fix: remove missing resource path from tauri.conf; add GPU detection and layer clamping
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
99672b33d0
commit
ae8d79e167
4 files changed
+230
-14
No files matched your search
@@ -144,3 +144,90 @@
|
||||
.sp-message-error {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.sp-gpu-badge {
|
||||
font-size: 11px;
|
||||
color: #22c55e;
|
||||
background: rgba(34, 197, 94, 0.08);
|
||||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||||
border-radius: 5px;
|
||||
padding: 4px 8px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.sp-gpu-cpu {
|
||||
color: #9ca3af;
|
||||
background: rgba(156, 163, 175, 0.08);
|
||||
border-color: rgba(156, 163, 175, 0.2);
|
||||
}
|
||||
|
||||
.sp-gpu-loading {
|
||||
color: #f59e0b;
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border-color: rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.sp-label-hint {
|
||||
color: var(--accent, #5b6af0);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.sp-layers-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sp-btn-max {
|
||||
background: var(--accent, #5b6af0);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.sp-btn-max:hover:not(:disabled) {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.sp-btn-max:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.sp-layers-hint {
|
||||
font-size: 11px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.sp-vram-bar {
|
||||
position: relative;
|
||||
height: 18px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.sp-vram-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--accent, #5b6af0), #818cf8);
|
||||
transition: width 0.3s ease;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sp-vram-label {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
color: #e5e7eb;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import type { ProcessStatus, ServerConfig } from "../hooks/useServerProcess";
|
||||
import "./ServerPanel.css";
|
||||
|
||||
@@ -9,6 +10,12 @@ interface Props {
|
||||
onStop: () => void;
|
||||
}
|
||||
|
||||
interface GpuInfo {
|
||||
name: string;
|
||||
vram_mib: number;
|
||||
recommended_layers: number;
|
||||
}
|
||||
|
||||
const STATUS_LABEL: Record<ProcessStatus, string> = {
|
||||
stopped: "Stopped",
|
||||
starting: "Starting…",
|
||||
@@ -35,9 +42,31 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
|
||||
const [gpuLayers, setGpuLayers] = useState(
|
||||
() => parseInt(localStorage.getItem("forgelm_gpu_layers") || "0", 10)
|
||||
);
|
||||
const [gpuInfo, setGpuInfo] = useState<GpuInfo | null>(null);
|
||||
const [gpuError, setGpuError] = useState<string>("");
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
// Detect GPU 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);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const isActive = status === "running" || status === "starting" || status === "stopping";
|
||||
const maxLayers = gpuInfo ? gpuInfo.recommended_layers : 999;
|
||||
|
||||
const handleStart = () => {
|
||||
localStorage.setItem("forgelm_model_path", modelPath);
|
||||
@@ -46,6 +75,11 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
|
||||
onStart({ modelPath, addr, gpuLayers });
|
||||
};
|
||||
|
||||
const handleLayersChange = (val: number) => {
|
||||
const clamped = Math.max(0, Math.min(val, maxLayers));
|
||||
setGpuLayers(clamped);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="server-panel">
|
||||
<div className="server-panel-header" onClick={() => setExpanded(!expanded)}>
|
||||
@@ -64,6 +98,19 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
|
||||
|
||||
{expanded && (
|
||||
<div className="server-panel-body">
|
||||
{/* GPU info badge */}
|
||||
{gpuInfo ? (
|
||||
<div className="sp-gpu-badge">
|
||||
🎮 {gpuInfo.name} — {(gpuInfo.vram_mib / 1024).toFixed(1)} GB VRAM
|
||||
</div>
|
||||
) : gpuError ? (
|
||||
<div className="sp-gpu-badge sp-gpu-cpu">
|
||||
💻 CPU only — {gpuError.includes("not found") ? "No NVIDIA GPU" : gpuError}
|
||||
</div>
|
||||
) : (
|
||||
<div className="sp-gpu-badge sp-gpu-loading">🔍 Detecting GPU…</div>
|
||||
)}
|
||||
|
||||
<label className="sp-label">Model path (.gguf)</label>
|
||||
<input
|
||||
className="sp-input"
|
||||
@@ -84,16 +131,48 @@ export default function ServerPanel({ status, message, onStart, onStop }: Props)
|
||||
disabled={isActive}
|
||||
/>
|
||||
|
||||
<label className="sp-label">GPU Layers (0 = CPU only)</label>
|
||||
<input
|
||||
className="sp-input sp-input-num"
|
||||
type="number"
|
||||
min={0}
|
||||
max={999}
|
||||
value={gpuLayers}
|
||||
onChange={(e) => setGpuLayers(parseInt(e.target.value, 10) || 0)}
|
||||
disabled={isActive}
|
||||
/>
|
||||
<label className="sp-label">
|
||||
GPU Layers
|
||||
{gpuInfo && (
|
||||
<span className="sp-label-hint"> (max {gpuInfo.recommended_layers} for your GPU)</span>
|
||||
)}
|
||||
</label>
|
||||
<div className="sp-layers-row">
|
||||
<input
|
||||
className="sp-input sp-input-num"
|
||||
type="number"
|
||||
min={0}
|
||||
max={maxLayers}
|
||||
value={gpuLayers}
|
||||
onChange={(e) => handleLayersChange(parseInt(e.target.value, 10) || 0)}
|
||||
disabled={isActive}
|
||||
/>
|
||||
{gpuInfo && (
|
||||
<button
|
||||
className="sp-btn-max"
|
||||
onClick={() => handleLayersChange(gpuInfo.recommended_layers)}
|
||||
disabled={isActive}
|
||||
title="Set to maximum recommended"
|
||||
>
|
||||
Max
|
||||
</button>
|
||||
)}
|
||||
{gpuLayers === 0 && (
|
||||
<span className="sp-layers-hint">CPU only</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{gpuInfo && gpuLayers > 0 && (
|
||||
<div className="sp-vram-bar">
|
||||
<div
|
||||
className="sp-vram-fill"
|
||||
style={{ width: `${Math.min(100, (gpuLayers / gpuInfo.recommended_layers) * 100)}%` }}
|
||||
/>
|
||||
<span className="sp-vram-label">
|
||||
~{Math.round(gpuLayers * 80)} MB / {gpuInfo.vram_mib} MB VRAM
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="sp-actions">
|
||||
{status === "stopped" || status === "error" ? (
|
||||
|
||||
Reference in new issue
Block a user