feat: native folder/file picker, persistent config, and model management

This commit is contained in:
Evandro Fonseca Junior committed 2026-03-26 21:44:39 -03:00
1 parent d1d77b83ef
commit 2cac674cba
5 files changed
+506 -195

No files matched your search

+261 -140
View File
@@ -21,6 +21,22 @@ interface ModelFile {
path: string;
}
interface PickDirResult {
dir: string;
models: ModelFile[];
}
interface AppConfig {
models_dir?: string;
model_path?: string;
addr?: string;
gpu_layers?: number;
ctx_size?: number;
api_key?: string;
server_url?: string;
extra_model_paths?: string[];
}
const STATUS_LABEL: Record<ProcessStatus, string> = {
stopped: "Stopped",
starting: "Starting…",
@@ -37,108 +53,190 @@ const STATUS_COLOR: Record<ProcessStatus, string> = {
error: "#ef4444",
};
const DEFAULT_MODELS_DIR = "models";
const DEFAULT_CTX = 4096;
const CTX_PRESETS = [512, 1024, 2048, 4096, 8192, 16384, 32768, 65536, 131072];
export default function ServerPanel({ status, message, onStart, onStop }: Props) {
const [modelsDir, setModelsDir] = useState(
() => localStorage.getItem("forgelm_models_dir") || DEFAULT_MODELS_DIR
);
const [modelsDir, setModelsDir] = useState<string>("");
const [scannedModels, setScannedModels] = useState<ModelFile[]>([]);
const [selectedModel, setSelectedModel] = useState(
() => localStorage.getItem("forgelm_model_path") || ""
);
const [addr, setAddr] = useState(
() => localStorage.getItem("forgelm_server_addr") || "127.0.0.1:8080"
);
const [gpuLayers, setGpuLayers] = useState(
() => parseInt(localStorage.getItem("forgelm_gpu_layers") || "0", 10)
);
const [ctxSize, setCtxSize] = useState(
() => parseInt(localStorage.getItem("forgelm_ctx_size") || String(DEFAULT_CTX), 10)
);
const [extraModels, setExtraModels] = useState<ModelFile[]>([]);
const [selectedModel, setSelectedModel] = useState<string>("");
const [addr, setAddr] = useState("127.0.0.1:8080");
const [gpuLayers, setGpuLayers] = useState(0);
const [ctxSize, setCtxSize] = useState(DEFAULT_CTX);
const [gpuInfo, setGpuInfo] = useState<GpuInfo | null>(null);
const [gpuError, setGpuError] = useState<string>("");
const [expanded, setExpanded] = useState(true);
const [scanning, setScanning] = useState(false);
const [scanError, setScanError] = useState("");
const [importing, setImporting] = useState(false);
const [importError, setImportError] = useState("");
const [isDragOver, setIsDragOver] = useState(false);
const [configLoaded, setConfigLoaded] = useState(false);
const dropRef = useRef<HTMLDivElement>(null);
const scanModels = useCallback(async (dir: string) => {
// All models = scanned from dir + extra picked files (deduplicated by path)
const allModels: ModelFile[] = [
...scannedModels,
...extraModels.filter((e) => !scannedModels.some((s) => s.path === e.path)),
];
// ── Persist config to app data dir ──────────────────────────────────────────
const persistConfig = useCallback(
async (overrides: Partial<AppConfig> = {}) => {
const cfg: AppConfig = {
models_dir: modelsDir || undefined,
model_path: selectedModel || undefined,
addr,
gpu_layers: gpuLayers,
ctx_size: ctxSize,
extra_model_paths: extraModels.map((m) => m.path),
...overrides,
};
try {
await invoke("save_config", { config: cfg });
} catch {
// Fallback to localStorage if not in Tauri context
localStorage.setItem("forgelm_config", JSON.stringify(cfg));
}
},
[modelsDir, selectedModel, addr, gpuLayers, ctxSize, extraModels]
);
// ── Load config on mount ─────────────────────────────────────────────────────
useEffect(() => {
const loadConfig = async () => {
let cfg: AppConfig = {};
try {
cfg = await invoke<AppConfig>("load_config");
} catch {
// Fallback: try localStorage
const raw = localStorage.getItem("forgelm_config");
if (raw) {
try { cfg = JSON.parse(raw); } catch { /* ignore */ }
}
}
if (cfg.addr) setAddr(cfg.addr);
if (cfg.gpu_layers !== undefined) setGpuLayers(cfg.gpu_layers);
if (cfg.ctx_size !== undefined) setCtxSize(cfg.ctx_size);
if (cfg.model_path) setSelectedModel(cfg.model_path);
// Restore extra model paths
if (cfg.extra_model_paths?.length) {
const extras: ModelFile[] = cfg.extra_model_paths.map((p) => ({
name: p.split(/[\\/]/).pop() ?? p,
path: p,
}));
setExtraModels(extras);
}
// Restore models dir and scan it
if (cfg.models_dir) {
setModelsDir(cfg.models_dir);
setConfigLoaded(true); // trigger scan in next effect
} else {
setConfigLoaded(true);
}
};
loadConfig();
// Detect GPU
invoke<GpuInfo>("query_gpu")
.then((info) => {
setGpuInfo(info);
setGpuLayers((prev) => prev || info.recommended_layers);
})
.catch((e) => setGpuError(String(e)));
}, []); // eslint-disable-line react-hooks/exhaustive-deps
// Scan models dir once config is loaded
useEffect(() => {
if (configLoaded && modelsDir) {
scanDir(modelsDir);
}
}, [configLoaded]); // eslint-disable-line react-hooks/exhaustive-deps
// ── Scan directory ───────────────────────────────────────────────────────────
const scanDir = useCallback(async (dir: string) => {
if (!dir.trim()) return;
setScanning(true);
setScanError("");
try {
const models = await invoke<ModelFile[]>("scan_models", { dir: dir.trim() });
setScannedModels(models);
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);
}
}
// Auto-select first if current selection is gone
setSelectedModel((prev) => {
const allPaths = [
...models.map((m) => m.path),
...extraModels.map((m) => m.path),
];
if (prev && allPaths.includes(prev)) return prev;
return models[0]?.path ?? extraModels[0]?.path ?? "";
});
} catch (e) {
setScanError(String(e));
setScannedModels([]);
} finally {
setScanning(false);
}
}, []);
}, [extraModels]);
const importModel = useCallback(async (srcPath: string) => {
setImporting(true);
setImportError("");
// ── Native folder picker ─────────────────────────────────────────────────────
const handlePickDir = useCallback(async () => {
try {
const model = await invoke<ModelFile>("import_model", {
srcPath,
destDir: modelsDir.trim() || DEFAULT_MODELS_DIR,
});
// Refresh model list and select the imported model
await scanModels(modelsDir.trim() || DEFAULT_MODELS_DIR);
setSelectedModel(model.path);
const result = await invoke<PickDirResult>("pick_models_dir");
setModelsDir(result.dir);
setScannedModels(result.models);
if (result.models.length > 0) {
setSelectedModel((prev) => {
const allPaths = [
...result.models.map((m) => m.path),
...extraModels.map((m) => m.path),
];
if (prev && allPaths.includes(prev)) return prev;
return result.models[0].path;
});
}
await persistConfig({ models_dir: result.dir });
} catch (e) {
setImportError(String(e));
} finally {
setImporting(false);
if (String(e) !== "cancelled") setScanError(String(e));
}
}, [modelsDir, scanModels]);
}, [extraModels, persistConfig]);
// Detect GPU and scan models on mount
useEffect(() => {
invoke<GpuInfo>("query_gpu")
.then((info) => {
setGpuInfo(info);
if (!localStorage.getItem("forgelm_gpu_layers")) {
setGpuLayers(info.recommended_layers);
}
})
.catch((e) => {
setGpuError(String(e));
if (!localStorage.getItem("forgelm_gpu_layers")) {
setGpuLayers(0);
// ── Native file picker (multi-select) ────────────────────────────────────────
const handlePickFiles = useCallback(async () => {
try {
const picked = await invoke<ModelFile[]>("pick_model_files");
if (!picked.length) return;
setExtraModels((prev) => {
const merged = [...prev];
for (const m of picked) {
if (!merged.some((x) => x.path === m.path)) merged.push(m);
}
return merged;
});
// Select the first newly picked model
setSelectedModel((prev) => prev || picked[0].path);
await persistConfig({
extra_model_paths: [
...extraModels.map((m) => m.path),
...picked.map((m) => m.path),
],
});
} catch (e) {
if (String(e) !== "cancelled") setScanError(String(e));
}
}, [extraModels, persistConfig]);
scanModels(modelsDir);
}, []); // eslint-disable-line react-hooks/exhaustive-deps
// Drag-and-drop handlers
// ── Drag-and-drop ────────────────────────────────────────────────────────────
const handleDragOver = useCallback((e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
if (e.dataTransfer.types.includes("Files")) {
setIsDragOver(true);
}
if (e.dataTransfer.types.includes("Files")) setIsDragOver(true);
}, []);
const handleDragLeave = useCallback((e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
// Only clear if leaving the drop zone itself (not a child)
if (dropRef.current && !dropRef.current.contains(e.relatedTarget as Node)) {
setIsDragOver(false);
}
@@ -150,64 +248,69 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
setIsDragOver(false);
const files = Array.from(e.dataTransfer.files);
const gguf = files.find((f) => f.name.toLowerCase().endsWith(".gguf"));
if (!gguf) {
setImportError("Only .gguf files are supported");
const ggufFiles = files.filter((f) => f.name.toLowerCase().endsWith(".gguf"));
if (!ggufFiles.length) {
setScanError("Only .gguf files are supported");
return;
}
// Tauri exposes the real path via the file object's path property
// In Tauri v2, we can read it from the dataTransfer items
const item = e.dataTransfer.items[files.indexOf(gguf)];
const entry = item?.webkitGetAsEntry?.();
// The actual file path is available as a non-standard property in Tauri's webview
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const filePath = (gguf as any).path as string | undefined;
if (filePath) {
await importModel(filePath);
} else if (entry) {
// Fallback: use the file name to construct path (best effort)
setImportError("Could not read file path. Try using the scan button after copying the file manually.");
} else {
setImportError("Could not read file path from drop event.");
const newModels: ModelFile[] = [];
for (const f of ggufFiles) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const filePath = (f as any).path as string | undefined;
if (filePath) {
newModels.push({ name: f.name, path: filePath });
}
}
}, [importModel]);
if (newModels.length) {
setExtraModels((prev) => {
const merged = [...prev];
for (const m of newModels) {
if (!merged.some((x) => x.path === m.path)) merged.push(m);
}
return merged;
});
setSelectedModel((prev) => prev || newModels[0].path);
await persistConfig({
extra_model_paths: [
...extraModels.map((m) => m.path),
...newModels.map((m) => m.path),
],
});
} else {
setScanError("Could not read file path. Use 'Add Models…' button instead.");
}
}, [extraModels, persistConfig]);
// ── Remove a model from the extra list ───────────────────────────────────────
const removeModel = useCallback(async (path: string) => {
setExtraModels((prev) => {
const next = prev.filter((m) => m.path !== path);
persistConfig({ extra_model_paths: next.map((m) => m.path) });
return next;
});
setSelectedModel((prev) => (prev === path ? allModels.find((m) => m.path !== path)?.path ?? "" : prev));
}, [allModels, persistConfig]);
// ── Start / Stop ─────────────────────────────────────────────────────────────
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", selectedModel);
localStorage.setItem("forgelm_server_addr", addr);
localStorage.setItem("forgelm_gpu_layers", String(gpuLayers));
localStorage.setItem("forgelm_models_dir", modelsDir);
localStorage.setItem("forgelm_ctx_size", String(ctxSize));
const handleStart = async () => {
await persistConfig();
onStart({ modelPath: selectedModel, addr, gpuLayers, ctxSize });
};
const handleLayersChange = (val: number) => {
const clamped = Math.max(0, Math.min(val, maxLayers));
setGpuLayers(clamped);
};
const handleCtxChange = (val: number) => {
const clamped = Math.max(512, Math.min(131072, val));
setCtxSize(clamped);
};
const handleScanDir = () => {
localStorage.setItem("forgelm_models_dir", modelsDir);
scanModels(modelsDir);
setGpuLayers(Math.max(0, Math.min(val, maxLayers)));
};
const vramPct = gpuInfo && gpuLayers > 0
? Math.min(100, (gpuLayers / gpuInfo.recommended_layers) * 100)
: 0;
const CTX_PRESETS = [512, 1024, 2048, 4096, 8192, 16384, 32768, 65536, 131072];
return (
<div className="server-panel">
{/* Header */}
@@ -246,36 +349,37 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
)}
{/* Models directory */}
<label className="sp-label">Models directory</label>
<label className="sp-label">Models folder</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}
/>
<div className="sp-dir-path" title={modelsDir || "No folder selected"}>
{modelsDir ? modelsDir.split(/[\\/]/).pop() : "No folder selected"}
</div>
<button
className="sp-scan-btn"
onClick={handleScanDir}
disabled={isActive || scanning}
title="Scan for .gguf files"
onClick={handlePickDir}
disabled={isActive}
title="Browse for models folder"
>
📁
</button>
<button
className="sp-scan-btn"
onClick={() => modelsDir && scanDir(modelsDir)}
disabled={isActive || scanning || !modelsDir}
title="Rescan folder"
>
{scanning ? "…" : "⟳"}
</button>
</div>
{/* Model selector + drag-and-drop zone */}
{/* Model list + drop zone */}
<label className="sp-label">
Model
{scannedModels.length > 0 && (
<span className="sp-label-hint"> ({scannedModels.length} found)</span>
Models
{allModels.length > 0 && (
<span className="sp-label-hint"> ({allModels.length} available)</span>
)}
</label>
{/* Drop zone wrapper */}
<div
ref={dropRef}
className={`sp-drop-zone${isDragOver ? " sp-drop-zone--active" : ""}${isActive ? " sp-drop-zone--disabled" : ""}`}
@@ -286,43 +390,62 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
{isDragOver && (
<div className="sp-drop-overlay">
<span className="sp-drop-icon">📦</span>
<span>Drop .gguf to import</span>
<span>Drop .gguf to add</span>
</div>
)}
{scannedModels.length > 0 ? (
{allModels.length > 0 ? (
<select
className="sp-model-select"
value={selectedModel}
onChange={(e) => setSelectedModel(e.target.value)}
disabled={isActive}
>
{scannedModels.map((m) => (
{allModels.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}
/>
<div className="sp-no-models">
No models found — browse a folder or add files below
</div>
)}
{!isActive && (
<div className="sp-drop-hint">
{importing ? "Importing…" : "Drop a .gguf file here to add it"}
</div>
<div className="sp-drop-hint">Drop .gguf here or use the button below</div>
)}
</div>
{/* Extra models list (removable) */}
{extraModels.length > 0 && (
<div className="sp-extra-models">
{extraModels.map((m) => (
<div key={m.path} className="sp-extra-model-item">
<span className="sp-extra-model-name" title={m.path}>{m.name}</span>
{!isActive && (
<button
className="sp-extra-model-remove"
onClick={() => removeModel(m.path)}
title="Remove from list"
>
×
</button>
)}
</div>
))}
</div>
)}
{/* Add models button */}
{!isActive && (
<button className="sp-add-models-btn" onClick={handlePickFiles}>
<span>+</span> Add Models…
</button>
)}
{scanError && <div className="sp-scan-error">{scanError}</div>}
{importError && <div className="sp-scan-error">{importError}</div>}
{/* Context size */}
<label className="sp-label">
@@ -337,7 +460,7 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
max={131072}
step={512}
value={ctxSize}
onChange={(e) => handleCtxChange(parseInt(e.target.value, 10) || DEFAULT_CTX)}
onChange={(e) => setCtxSize(Math.max(512, Math.min(131072, parseInt(e.target.value, 10) || DEFAULT_CTX)))}
disabled={isActive}
/>
<div className="sp-ctx-presets">
@@ -347,7 +470,7 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
className={`sp-ctx-preset${ctxSize === p ? " sp-ctx-preset--active" : ""}`}
onClick={() => setCtxSize(p)}
disabled={isActive}
title={`Set context to ${p.toLocaleString()} tokens`}
title={`${p.toLocaleString()} tokens`}
>
{p >= 1024 ? `${p / 1024}k` : p}
</button>
@@ -369,9 +492,7 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
{/* GPU Layers */}
<label className="sp-label">
GPU layers
{gpuInfo && (
<span className="sp-label-hint"> (max {gpuInfo.recommended_layers})</span>
)}
{gpuInfo && <span className="sp-label-hint"> (max {gpuInfo.recommended_layers})</span>}
</label>
<div className="sp-layers-row">
<input
@@ -406,7 +527,7 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
</div>
)}
{/* Action button */}
{/* Action buttons */}
<div className="sp-actions">
{status === "stopped" || status === "error" ? (
<button