feat: 添加 esaxx-rs 依赖并更新 Windows 构建配置
- 添加 esaxx-rs 依赖库 (0.1.10) - 更新 zip 依赖从 7.2.0 到 8.5.1 - 更新 crc-catalog 依赖从 2.4.0 到 2.5.0 - 为 Windows MSVC 目标添加构建配置，禁用静态 CRT 链接 - 移除本地 vendor 路径补丁，改用 crates.io 版本 chore(aha-ui): 更新前端项目配置和界面 - 将 CSS 文件路径从 src/App.css 改为 src/index.css - 更新 HTML 标签语言属性为 zh-CN - 修改页面标题为"AHA 模型启动器" - 移除默认的 vite 图标链接 - 为前端添加 Windows 构建配置 Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
PoRi
@@ -1,130 +0,0 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
@import "@fontsource-variable/geist";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@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 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 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);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
+27
-45
@@ -1,51 +1,33 @@
|
||||
import { useState } from "react";
|
||||
import reactLogo from "./assets/react.svg";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import "./App.css";
|
||||
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 [greetMsg, setGreetMsg] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
|
||||
async function greet() {
|
||||
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
|
||||
setGreetMsg(await invoke("greet", { name }));
|
||||
}
|
||||
const [activePage, setActivePage] = useState<PageView>("models")
|
||||
const [address, setAddress] = useState("127.0.0.1")
|
||||
const [port, setPort] = useState("10100")
|
||||
|
||||
return (
|
||||
<main className="container">
|
||||
<h1>Welcome to Tauri + React</h1>
|
||||
|
||||
<div className="row">
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src="/vite.svg" className="logo vite" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://tauri.app" target="_blank">
|
||||
<img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
|
||||
</a>
|
||||
<a href="https://react.dev" target="_blank">
|
||||
<img src={reactLogo} className="logo react" alt="React logo" />
|
||||
</a>
|
||||
</div>
|
||||
<p>Click on the Tauri, Vite, and React logos to learn more.</p>
|
||||
|
||||
<form
|
||||
className="row"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
greet();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="greet-input"
|
||||
onChange={(e) => setName(e.currentTarget.value)}
|
||||
placeholder="Enter a name..."
|
||||
/>
|
||||
<button type="submit">Greet</button>
|
||||
</form>
|
||||
<p>{greetMsg}</p>
|
||||
</main>
|
||||
);
|
||||
<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;
|
||||
export default App
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
import { Package, Play, Settings } from "lucide-react"
|
||||
import { cn } from "../lib/utils"
|
||||
|
||||
export type PageView = "models" | "launch"
|
||||
|
||||
interface SidebarProps {
|
||||
activePage: PageView
|
||||
onNavigate: (page: PageView) => void
|
||||
address: string
|
||||
port: string
|
||||
onAddressChange: (v: string) => void
|
||||
onPortChange: (v: string) => void
|
||||
}
|
||||
|
||||
const navItems: { id: PageView; label: string; icon: typeof Package }[] = [
|
||||
{ id: "models", label: "模型列表", icon: Package },
|
||||
{ id: "launch", label: "启动服务", icon: Play },
|
||||
]
|
||||
|
||||
export default function Sidebar({
|
||||
activePage,
|
||||
onNavigate,
|
||||
address,
|
||||
port,
|
||||
onAddressChange,
|
||||
onPortChange,
|
||||
}: SidebarProps) {
|
||||
return (
|
||||
<aside className="w-64 border-r bg-sidebar-background flex flex-col h-full">
|
||||
{/* Logo */}
|
||||
<div className="p-4 border-b">
|
||||
<h1 className="text-lg font-bold flex items-center gap-2">
|
||||
<Play className="w-5 h-5 text-primary" />
|
||||
AHA Launcher
|
||||
</h1>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">模型推理服务启动器</p>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="p-2 space-y-1">
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onNavigate(item.id)}
|
||||
className={cn(
|
||||
"w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-sm transition-colors cursor-pointer",
|
||||
activePage === item.id
|
||||
? "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
|
||||
: "text-sidebar-foreground hover:bg-sidebar-accent/50"
|
||||
)}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
{item.label}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Settings */}
|
||||
<div className="mt-auto p-4 border-t">
|
||||
<div className="flex items-center gap-2 text-sm font-medium mb-3 text-muted-foreground">
|
||||
<Settings className="w-4 h-4" />
|
||||
默认设置
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="block text-xs text-muted-foreground mb-1">监听端口</label>
|
||||
<input
|
||||
value={port}
|
||||
onChange={(e) => onPortChange(e.target.value)}
|
||||
className="w-full h-8 px-2.5 rounded-md border bg-background text-xs
|
||||
focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-muted-foreground mb-1">监听地址</label>
|
||||
<input
|
||||
value={address}
|
||||
onChange={(e) => onAddressChange(e.target.value)}
|
||||
className="w-full h-8 px-2.5 rounded-md border bg-background text-xs
|
||||
focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { type ClassValue, clsx } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
|
||||
@@ -0,0 +1,283 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user