tckm.yan/aha
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

去除原先的页面

Browse Source
This commit is contained in:
PoRi
2026-04-25 17:09:29 +08:00
parent 6cf1681a42
commit 3bec94d5cc
4 changed files with 0 additions and 658 deletions
Download Patch File Download Diff File Expand all files Collapse all files
aha-ui/src/App.tsx
-33
View File
@@ -1,33 +0,0 @@
import { useState } from "react"
import Sidebar, { type PageView } from "./components/Sidebar"
import ModelsPage from "./pages/ModelsPage"
import LaunchPage from "./pages/LaunchPage"
import "./index.css"
function App() {
const [activePage, setActivePage] = useState<PageView>("models")
const [address, setAddress] = useState("127.0.0.1")
const [port, setPort] = useState("10100")
return (
<div className="flex h-screen w-screen overflow-hidden">
<Sidebar
activePage={activePage}
onNavigate={setActivePage}
address={address}
port={port}
onAddressChange={setAddress}
onPortChange={setPort}
/>
<main className="flex-1 overflow-y-auto">
{activePage === "models" ? (
<ModelsPage />
) : (
<LaunchPage key={`${address}:${port}`} />
)}
</main>
</div>
)
}
export default App
aha-ui/src/index.css
-152
View File
@@ -1,152 +0,0 @@
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource-variable/geist";
@custom-variant dark (&:is(.dark *));
@custom-variant dark (&:is(.dark *));
* {
border-color: var(--border);
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Log terminal area */
.log-area {
font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", monospace;
font-size: 13px;
line-height: 1.5;
}
@theme inline {
--font-heading: var(--font-sans);
--font-sans: 'Geist Variable', sans-serif;
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-background: var(--background);
--radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) * 1.4);
--radius-2xl: calc(var(--radius) * 1.8);
--radius-3xl: calc(var(--radius) * 2.2);
--radius-4xl: calc(var(--radius) * 2.6);
}
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0.042 265.755);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.965 0.001 286.375);
--secondary-foreground: oklch(0.205 0.042 265.755);
--muted: oklch(0.965 0.001 286.375);
--muted-foreground: oklch(0.556 0.027 264.364);
--accent: oklch(0.965 0.001 286.375);
--accent-foreground: oklch(0.205 0.042 265.755);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0.004 286.375);
--input: oklch(0.922 0.004 286.375);
--ring: oklch(0.708 0.015 286.375);
--radius: 0.625rem;
--sidebar-background: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.556 0.027 264.364);
--sidebar-primary: oklch(0.205 0.042 265.755);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.965 0.001 286.375);
--sidebar-accent-foreground: oklch(0.205 0.042 265.755);
--sidebar-border: oklch(0.922 0.004 286.375);
--sidebar-ring: oklch(0.708 0.015 286.375);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
html {
@apply font-sans;
}
}
aha-ui/src/pages/LaunchPage.tsx
-283
View File
@@ -1,283 +0,0 @@
import { useState, useEffect, useRef, useCallback } from "react"
import { invoke } from "@tauri-apps/api/core"
import { listen } from "@tauri-apps/api/event"
import { Play, Square, Terminal, RotateCw, Server } from "lucide-react"
import { cn } from "../lib/utils"
interface ModelInfo {
model_id: string
owner: string
model_type: string
downloaded: boolean
}
interface LaunchConfig {
model_id: string
address: string
port: number
weight_path?: string | null
save_dir?: string | null
gguf_path?: string | null
mmproj_path?: string | null
}
interface ServerStatus {
running: boolean
pid: number | null
logs: string[]
}
export default function LaunchPage() {
const [models, setModels] = useState<ModelInfo[]>([])
const [selectedModel, setSelectedModel] = useState("")
const [address, setAddress] = useState("127.0.0.1")
const [port, setPort] = useState("10100")
const [weightPath, setWeightPath] = useState("")
const [status, setStatus] = useState<ServerStatus>({ running: false, pid: null, logs: [] })
const logEndRef = useRef<HTMLDivElement>(null)
// 加载模型列表
useEffect(() => {
invoke<ModelInfo[]>("list_models").then(setModels).catch(() => {})
}, [])
// 获取服务状态
const refreshStatus = useCallback(async () => {
try {
const s = await invoke<ServerStatus>("get_server_status")
setStatus(s)
} catch {}
}, [])
// 监听日志和状态事件
useEffect(() => {
const unlistens: (() => void)[] = []
listen<string>("server-log", (event) => {
setStatus((prev) => ({
...prev,
logs: [...prev.logs.slice(-1999), event.payload],
}))
}).then((fn) => unlistens.push(fn))
listen<number>("server-started", () => {
refreshStatus()
}).then((fn) => unlistens.push(fn))
listen("server-stopped", () => {
refreshStatus()
}).then((fn) => unlistens.push(fn))
return () => unlistens.forEach((fn) => fn())
}, [refreshStatus])
// 初始加载状态
useEffect(() => {
refreshStatus()
}, [refreshStatus])
// 自动滚动到底部
useEffect(() => {
logEndRef.current?.scrollIntoView({ behavior: "smooth" })
}, [status.logs])
const handleStart = async () => {
if (!selectedModel) return
try {
await invoke("start_server", {
config: {
model_id: selectedModel,
address,
port: parseInt(port) || 10100,
weight_path: weightPath || null,
save_dir: null,
gguf_path: null,
mmproj_path: null,
} satisfies LaunchConfig,
})
} catch (e) {
setStatus((prev) => ({
...prev,
logs: [...prev.logs, `[错误] ${e}`],
}))
}
}
const handleStop = async () => {
try {
await invoke("stop_server")
} catch (e) {
setStatus((prev) => ({
...prev,
logs: [...prev.logs, `[错误] ${e}`],
}))
}
}
const handleClearLogs = async () => {
try {
await invoke("clear_logs")
setStatus((prev) => ({ ...prev, logs: [] }))
} catch {}
}
const downloadedModels = models.filter((m) => m.downloaded)
return (
<div className="p-6 flex flex-col h-full">
<h1 className="text-2xl font-bold mb-6 flex items-center gap-2">
<Server className="w-6 h-6" />
启动服务
</h1>
{/* 配置区 */}
<div className="grid grid-cols-2 gap-4 mb-4">
<div className="space-y-4">
{/* 模型选择 */}
<div>
<label className="block text-sm font-medium mb-1">模型</label>
<select
value={selectedModel}
onChange={(e) => setSelectedModel(e.target.value)}
className="w-full h-9 px-3 rounded-md border bg-background text-sm
focus:outline-none focus:ring-2 focus:ring-ring"
disabled={status.running}
>
<option value="">选择模型...</option>
{downloadedModels.map((m) => (
<option key={m.model_id} value={m.model_id}>
{m.model_id}
</option>
))}
</select>
{downloadedModels.length === 0 && (
<p className="text-xs text-muted-foreground mt-1">
没有已下载的模型，请先在"模型列表"页面下载模型
</p>
)}
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm font-medium mb-1">监听地址</label>
<input
value={address}
onChange={(e) => setAddress(e.target.value)}
className="w-full h-9 px-3 rounded-md border bg-background text-sm
focus:outline-none focus:ring-2 focus:ring-ring"
disabled={status.running}
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">端口</label>
<input
value={port}
onChange={(e) => setPort(e.target.value)}
className="w-full h-9 px-3 rounded-md border bg-background text-sm
focus:outline-none focus:ring-2 focus:ring-ring"
disabled={status.running}
/>
</div>
</div>
{/* 权重路径 */}
<div>
<label className="block text-sm font-medium mb-1">
权重路径 <span className="text-muted-foreground font-normal">(可选，默认自动)</span>
</label>
<input
value={weightPath}
onChange={(e) => setWeightPath(e.target.value)}
placeholder="留空则使用默认路径"
className="w-full h-9 px-3 rounded-md border bg-background text-sm
focus:outline-none focus:ring-2 focus:ring-ring"
disabled={status.running}
/>
</div>
</div>
{/* 状态 + 控制 */}
<div className="flex flex-col">
<div className="flex-1 p-4 rounded-lg border bg-secondary/20">
<div className="text-sm font-medium mb-3">服务状态</div>
<div className="space-y-2 text-sm">
<div className="flex items-center gap-2">
<span className={cn(
"w-2.5 h-2.5 rounded-full",
status.running ? "bg-green-500" : "bg-gray-300"
)} />
<span>{status.running ? "运行中" : "已停止"}</span>
</div>
{status.pid && (
<div className="text-muted-foreground">PID: {status.pid}</div>
)}
{selectedModel && (
<div className="text-muted-foreground">
模型: {selectedModel}
</div>
)}
</div>
</div>
<div className="flex gap-2 mt-4">
{!status.running ? (
<button
onClick={handleStart}
disabled={!selectedModel}
className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2
rounded-md bg-primary text-primary-foreground text-sm font-medium
hover:opacity-90 disabled:opacity-50 transition-opacity cursor-pointer"
>
<Play className="w-4 h-4" />
启动服务
</button>
) : (
<button
onClick={handleStop}
className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2
rounded-md bg-destructive text-destructive-foreground text-sm font-medium
hover:opacity-90 transition-opacity cursor-pointer"
>
<Square className="w-4 h-4" />
停止服务
</button>
)}
</div>
</div>
</div>
{/* 日志区域 */}
<div className="flex-1 min-h-0 flex flex-col">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2 text-sm font-medium">
<Terminal className="w-4 h-4" />
日志输出
</div>
<button
onClick={handleClearLogs}
className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md
border hover:bg-secondary transition-colors cursor-pointer"
>
<RotateCw className="w-3 h-3" />
清空
</button>
</div>
<div className="flex-1 bg-[#1e1e2e] rounded-lg p-4 overflow-y-auto log-area">
{status.logs.length === 0 ? (
<div className="text-gray-500 italic">等待日志输出...</div>
) : (
<div className="space-y-0.5">
{status.logs.map((line, i) => (
<div key={i} className="text-gray-300 whitespace-pre-wrap break-all">
{line}
</div>
))}
<div ref={logEndRef} />
</div>
)}
</div>
</div>
</div>
)
}
aha-ui/src/pages/ModelsPage.tsx
-190
View File
@@ -1,190 +0,0 @@
import { useState, useEffect } from "react"
import { invoke } from "@tauri-apps/api/core"
import { Download, Trash2, RefreshCw, FolderOpen, HardDrive, Package } from "lucide-react"
import { cn } from "../lib/utils"
interface ModelInfo {
model_id: string
owner: string
model_type: string
downloaded: boolean
size: number | null
size_human: string | null
path: string | null
}
const typeColors: Record<string, string> = {
llm: "bg-blue-100 text-blue-800",
vlm: "bg-purple-100 text-purple-800",
ocr: "bg-green-100 text-green-800",
asr: "bg-yellow-100 text-yellow-800",
tts: "bg-pink-100 text-pink-800",
image: "bg-orange-100 text-orange-800",
embedding: "bg-teal-100 text-teal-800",
reranker: "bg-indigo-100 text-indigo-800",
}
const typeLabels: Record<string, string> = {
llm: "LLM",
vlm: "VLM",
ocr: "OCR",
asr: "ASR",
tts: "TTS",
image: "图像",
embedding: "嵌入",
reranker: "重排序",
}
export default function ModelsPage() {
const [models, setModels] = useState<ModelInfo[]>([])
const [loading, setLoading] = useState(true)
const [downloading, setDownloading] = useState<string | null>(null)
const [error, setError] = useState<string | null>(null)
const loadModels = async () => {
setLoading(true)
try {
const data = await invoke<ModelInfo[]>("list_models")
setModels(data)
} catch (e) {
setError(String(e))
}
setLoading(false)
}
useEffect(() => {
loadModels()
}, [])
const handleDownload = async (modelId: string) => {
setDownloading(modelId)
setError(null)
try {
await invoke("download_model", { modelId })
await loadModels()
} catch (e) {
setError(String(e))
}
setDownloading(null)
}
const handleDelete = async (modelId: string) => {
if (!confirm(`确定删除模型 ${modelId}？`)) return
try {
await invoke("delete_model", { modelId })
await loadModels()
} catch (e) {
setError(String(e))
}
}
return (
<div className="p-6">
<div className="flex items-center justify-between mb-6">
<h1 className="text-2xl font-bold flex items-center gap-2">
<Package className="w-6 h-6" />
模型列表
</h1>
<button
onClick={loadModels}
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md border
hover:bg-secondary transition-colors cursor-pointer"
>
<RefreshCw className={cn("w-4 h-4", loading && "animate-spin")} />
刷新
</button>
</div>
{error && (
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-md text-sm text-red-700">
{error}
</div>
)}
<div className="border rounded-lg overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="bg-secondary/50 border-b">
<th className="text-left px-4 py-3 font-medium">模型 ID</th>
<th className="text-left px-4 py-3 font-medium">类型</th>
<th className="text-left px-4 py-3 font-medium">大小</th>
<th className="text-left px-4 py-3 font-medium">状态</th>
<th className="text-right px-4 py-3 font-medium">操作</th>
</tr>
</thead>
<tbody>
{models.map((m) => (
<tr key={m.model_id} className="border-b last:border-0 hover:bg-secondary/30">
<td className="px-4 py-3">
<div className="font-medium">{m.model_id}</div>
{m.path && (
<div className="text-xs text-muted-foreground mt-0.5 flex items-center gap-1">
<FolderOpen className="w-3 h-3 flex-shrink-0" />
<span className="truncate max-w-[400px]">{m.path}</span>
</div>
)}
</td>
<td className="px-4 py-3">
<span className={cn(
"inline-flex items-center px-2 py-0.5 rounded text-xs font-medium",
typeColors[m.model_type] || "bg-gray-100 text-gray-800"
)}>
{typeLabels[m.model_type] || m.model_type}
</span>
</td>
<td className="px-4 py-3 text-muted-foreground">
{m.size_human ? (
<span className="flex items-center gap-1">
<HardDrive className="w-3.5 h-3.5" />
{m.size_human}
</span>
) : (
"-"
)}
</td>
<td className="px-4 py-3">
{m.downloaded ? (
<span className="inline-flex items-center gap-1 text-green-700">
<span className="w-2 h-2 rounded-full bg-green-500" />
已下载
</span>
) : (
<span className="text-muted-foreground">未下载</span>
)}
</td>
<td className="px-4 py-3 text-right">
<div className="flex items-center justify-end gap-2">
{!m.downloaded ? (
<button
onClick={() => handleDownload(m.model_id)}
disabled={downloading === m.model_id}
className="inline-flex items-center gap-1 px-3 py-1.5 text-xs rounded-md
bg-primary text-primary-foreground hover:opacity-90
disabled:opacity-50 transition-opacity cursor-pointer"
>
<Download className="w-3.5 h-3.5" />
{downloading === m.model_id ? "下载中..." : "下载"}
</button>
) : (
<button
onClick={() => handleDelete(m.model_id)}
className="inline-flex items-center gap-1 px-3 py-1.5 text-xs rounded-md
border border-red-200 text-red-600 hover:bg-red-50
transition-colors cursor-pointer"
>
<Trash2 className="w-3.5 h-3.5" />
删除
</button>
)}
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
)
}