feat: scan local models, redesign sidebar and server panel UI
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
734d01a36e
commit
18d8b03074
5 files changed
+697
-252
No files matched your search
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import type { ProcessStatus, ServerConfig } from "../hooks/useServerProcess";
|
||||
import "./ServerPanel.css";
|
||||
@@ -16,6 +16,11 @@ interface GpuInfo {
|
||||
recommended_layers: number;
|
||||
}
|
||||
|
||||
interface ModelFile {
|
||||
name: string;
|
||||
path: string;
|
||||
}
|
||||
|
||||
const STATUS_LABEL: Record<ProcessStatus, string> = {
|
||||
stopped: "Stopped",
|
||||
starting: "Starting…",
|
||||
@@ -32,8 +37,15 @@ const STATUS_COLOR: Record<ProcessStatus, string> = {
|
||||
error: "#ef4444",
|
||||
};
|
||||
|
||||
// Default models directory relative to the repo root
|
||||
const DEFAULT_MODELS_DIR = "models";
|
||||
|
||||
export default function ServerPanel({ status, message, onStart, onStop }: Props) {
|
||||
const [modelPath, setModelPath] = useState(
|
||||
const [modelsDir, setModelsDir] = useState(
|
||||
() => localStorage.getItem("forgelm_models_dir") || DEFAULT_MODELS_DIR
|
||||
);
|
||||
const [scannedModels, setScannedModels] = useState<ModelFile[]>([]);
|
||||
const [selectedModel, setSelectedModel] = useState(
|
||||
() => localStorage.getItem("forgelm_model_path") || ""
|
||||
);
|
||||
const [addr, setAddr] = useState(
|
||||
@@ -44,35 +56,62 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
|
||||
);
|
||||
const [gpuInfo, setGpuInfo] = useState<GpuInfo | null>(null);
|
||||
const [gpuError, setGpuError] = useState<string>("");
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [expanded, setExpanded] = useState(true);
|
||||
const [scanning, setScanning] = useState(false);
|
||||
const [scanError, setScanError] = useState("");
|
||||
|
||||
// Detect GPU on mount
|
||||
const scanModels = useCallback(async (dir: string) => {
|
||||
if (!dir.trim()) return;
|
||||
setScanning(true);
|
||||
setScanError("");
|
||||
try {
|
||||
const models = await invoke<ModelFile[]>("scan_models", { dir: dir.trim() });
|
||||
setScannedModels(models);
|
||||
// Auto-select first model if none selected or current not in list
|
||||
if (models.length > 0) {
|
||||
const current = localStorage.getItem("forgelm_model_path") || "";
|
||||
const stillValid = models.some((m) => m.path === current);
|
||||
if (!stillValid) {
|
||||
setSelectedModel(models[0].path);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
setScanError(String(e));
|
||||
setScannedModels([]);
|
||||
} finally {
|
||||
setScanning(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Detect GPU and scan models on mount
|
||||
useEffect(() => {
|
||||
invoke<GpuInfo>("query_gpu")
|
||||
.then((info) => {
|
||||
setGpuInfo(info);
|
||||
// Only auto-set if user hasn't saved a preference yet
|
||||
if (!localStorage.getItem("forgelm_gpu_layers")) {
|
||||
setGpuLayers(info.recommended_layers);
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
setGpuError(String(e));
|
||||
// Default to CPU-only if no GPU
|
||||
if (!localStorage.getItem("forgelm_gpu_layers")) {
|
||||
setGpuLayers(0);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
scanModels(modelsDir);
|
||||
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const isActive = status === "running" || status === "starting" || status === "stopping";
|
||||
const maxLayers = gpuInfo ? gpuInfo.recommended_layers : 999;
|
||||
const canStart = !!selectedModel.trim() && !isActive;
|
||||
|
||||
const handleStart = () => {
|
||||
localStorage.setItem("forgelm_model_path", modelPath);
|
||||
localStorage.setItem("forgelm_model_path", selectedModel);
|
||||
localStorage.setItem("forgelm_server_addr", addr);
|
||||
localStorage.setItem("forgelm_gpu_layers", String(gpuLayers));
|
||||
onStart({ modelPath, addr, gpuLayers });
|
||||
localStorage.setItem("forgelm_models_dir", modelsDir);
|
||||
onStart({ modelPath: selectedModel, addr, gpuLayers });
|
||||
};
|
||||
|
||||
const handleLayersChange = (val: number) => {
|
||||
@@ -80,48 +119,108 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
|
||||
setGpuLayers(clamped);
|
||||
};
|
||||
|
||||
const handleScanDir = () => {
|
||||
localStorage.setItem("forgelm_models_dir", modelsDir);
|
||||
scanModels(modelsDir);
|
||||
};
|
||||
|
||||
const vramPct = gpuInfo && gpuLayers > 0
|
||||
? Math.min(100, (gpuLayers / gpuInfo.recommended_layers) * 100)
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div className="server-panel">
|
||||
{/* Header */}
|
||||
<div className="server-panel-header" onClick={() => setExpanded(!expanded)}>
|
||||
<div className="server-panel-title">
|
||||
<span
|
||||
className="server-status-dot"
|
||||
style={{ background: STATUS_COLOR[status] }}
|
||||
/>
|
||||
<span className="server-status-dot" style={{ background: STATUS_COLOR[status] }} />
|
||||
<span className="server-panel-label">Local Server</span>
|
||||
<span className="server-status-text" style={{ color: STATUS_COLOR[status] }}>
|
||||
</div>
|
||||
<div className="server-panel-header-right">
|
||||
<span className="server-status-badge" style={{ color: STATUS_COLOR[status] }}>
|
||||
{STATUS_LABEL[status]}
|
||||
</span>
|
||||
<span className="server-panel-chevron">{expanded ? "▲" : "▼"}</span>
|
||||
</div>
|
||||
<span className="server-panel-chevron">{expanded ? "▲" : "▼"}</span>
|
||||
</div>
|
||||
|
||||
{expanded && (
|
||||
<div className="server-panel-body">
|
||||
{/* GPU info badge */}
|
||||
{/* GPU badge */}
|
||||
{gpuInfo ? (
|
||||
<div className="sp-gpu-badge">
|
||||
🎮 {gpuInfo.name} — {(gpuInfo.vram_mib / 1024).toFixed(1)} GB VRAM
|
||||
<span className="sp-gpu-icon">⚡</span>
|
||||
<span>{gpuInfo.name}</span>
|
||||
<span className="sp-gpu-vram">{(gpuInfo.vram_mib / 1024).toFixed(1)} GB</span>
|
||||
</div>
|
||||
) : gpuError ? (
|
||||
<div className="sp-gpu-badge sp-gpu-cpu">
|
||||
💻 CPU only — {gpuError.includes("not found") ? "No NVIDIA GPU" : gpuError}
|
||||
<span className="sp-gpu-icon">🖥</span>
|
||||
<span>CPU only</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="sp-gpu-badge sp-gpu-loading">🔍 Detecting GPU…</div>
|
||||
<div className="sp-gpu-badge sp-gpu-loading">
|
||||
<span className="sp-gpu-icon">⟳</span>
|
||||
<span>Detecting GPU…</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<label className="sp-label">Model path (.gguf)</label>
|
||||
<input
|
||||
className="sp-input"
|
||||
type="text"
|
||||
value={modelPath}
|
||||
onChange={(e) => setModelPath(e.target.value)}
|
||||
placeholder="models/your-model.gguf"
|
||||
disabled={isActive}
|
||||
/>
|
||||
{/* Models directory */}
|
||||
<label className="sp-label">Models directory</label>
|
||||
<div className="sp-dir-row">
|
||||
<input
|
||||
className="sp-input"
|
||||
type="text"
|
||||
value={modelsDir}
|
||||
onChange={(e) => setModelsDir(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleScanDir()}
|
||||
placeholder="models/"
|
||||
disabled={isActive}
|
||||
/>
|
||||
<button
|
||||
className="sp-scan-btn"
|
||||
onClick={handleScanDir}
|
||||
disabled={isActive || scanning}
|
||||
title="Scan for .gguf files"
|
||||
>
|
||||
{scanning ? "…" : "⟳"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label className="sp-label">Address</label>
|
||||
{/* Model selector */}
|
||||
<label className="sp-label">
|
||||
Model
|
||||
{scannedModels.length > 0 && (
|
||||
<span className="sp-label-hint"> ({scannedModels.length} found)</span>
|
||||
)}
|
||||
</label>
|
||||
{scannedModels.length > 0 ? (
|
||||
<select
|
||||
className="sp-model-select"
|
||||
value={selectedModel}
|
||||
onChange={(e) => setSelectedModel(e.target.value)}
|
||||
disabled={isActive}
|
||||
>
|
||||
{scannedModels.map((m) => (
|
||||
<option key={m.path} value={m.path} title={m.path}>
|
||||
{m.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<input
|
||||
className="sp-input"
|
||||
type="text"
|
||||
value={selectedModel}
|
||||
onChange={(e) => setSelectedModel(e.target.value)}
|
||||
placeholder="path/to/model.gguf"
|
||||
disabled={isActive}
|
||||
/>
|
||||
)}
|
||||
{scanError && <div className="sp-scan-error">{scanError}</div>}
|
||||
|
||||
{/* Address */}
|
||||
<label className="sp-label">Listen address</label>
|
||||
<input
|
||||
className="sp-input"
|
||||
type="text"
|
||||
@@ -131,10 +230,11 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
|
||||
disabled={isActive}
|
||||
/>
|
||||
|
||||
{/* GPU Layers */}
|
||||
<label className="sp-label">
|
||||
GPU Layers
|
||||
GPU layers
|
||||
{gpuInfo && (
|
||||
<span className="sp-label-hint"> (max {gpuInfo.recommended_layers} for your GPU)</span>
|
||||
<span className="sp-label-hint"> (max {gpuInfo.recommended_layers})</span>
|
||||
)}
|
||||
</label>
|
||||
<div className="sp-layers-row">
|
||||
@@ -157,31 +257,29 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
|
||||
Max
|
||||
</button>
|
||||
)}
|
||||
{gpuLayers === 0 && (
|
||||
<span className="sp-layers-hint">CPU only</span>
|
||||
)}
|
||||
{gpuLayers === 0 && <span className="sp-layers-hint">CPU only</span>}
|
||||
</div>
|
||||
|
||||
{/* VRAM bar */}
|
||||
{gpuInfo && gpuLayers > 0 && (
|
||||
<div className="sp-vram-bar">
|
||||
<div
|
||||
className="sp-vram-fill"
|
||||
style={{ width: `${Math.min(100, (gpuLayers / gpuInfo.recommended_layers) * 100)}%` }}
|
||||
/>
|
||||
<div className="sp-vram-fill" style={{ width: `${vramPct}%` }} />
|
||||
<span className="sp-vram-label">
|
||||
~{Math.round(gpuLayers * 80)} MB / {gpuInfo.vram_mib} MB VRAM
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action button */}
|
||||
<div className="sp-actions">
|
||||
{status === "stopped" || status === "error" ? (
|
||||
<button
|
||||
className="sp-btn sp-btn-start"
|
||||
onClick={handleStart}
|
||||
disabled={!modelPath.trim()}
|
||||
disabled={!canStart}
|
||||
title={!selectedModel ? "Select a model first" : ""}
|
||||
>
|
||||
▶ Start Server
|
||||
<span className="sp-btn-icon">▶</span> Start Server
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
@@ -189,7 +287,7 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
|
||||
onClick={onStop}
|
||||
disabled={status === "starting" || status === "stopping"}
|
||||
>
|
||||
■ Stop Server
|
||||
<span className="sp-btn-icon">■</span> Stop Server
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user