mirror of
https://github.com/jamiepine/voicebox.git
synced 2026-09-15 04:40:40 -07:00
Windows dev experience: CUDA detection, GPU display cleanup, hide drag region, dev-mode update status
This commit is contained in:
@@ -113,7 +113,7 @@ export function ConnectionForm() {
|
||||
<Badge variant={health.gpu_available ? 'default' : 'secondary'}>
|
||||
GPU: {health.gpu_available ? 'Available' : 'Not Available'}
|
||||
</Badge>
|
||||
{health.vram_used_mb && (
|
||||
{health.vram_used_mb != null && health.vram_used_mb > 0 && (
|
||||
<Badge variant="outline">VRAM: {health.vram_used_mb.toFixed(0)} MB</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -26,7 +26,7 @@ export function GpuAcceleration() {
|
||||
// Query CUDA backend status
|
||||
const {
|
||||
data: cudaStatus,
|
||||
isLoading: cudaStatusLoading,
|
||||
isLoading: _cudaStatusLoading,
|
||||
refetch: refetchCudaStatus,
|
||||
} = useQuery({
|
||||
queryKey: ['cuda-status', serverUrl],
|
||||
@@ -218,35 +218,33 @@ export function GpuAcceleration() {
|
||||
<CardTitle>GPU Acceleration</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Current status */}
|
||||
{/* GPU status */}
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm font-medium">Backend</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{isCurrentlyCuda
|
||||
? 'CUDA (GPU accelerated)'
|
||||
: hasNativeGpu
|
||||
? `${health.backend_type === 'mlx' ? 'MLX' : 'PyTorch'} (GPU accelerated)`
|
||||
: 'CPU'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* GPU info from health */}
|
||||
{health.gpu_type && (
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm font-medium">GPU</div>
|
||||
<div className="text-sm text-muted-foreground">{health.gpu_type}</div>
|
||||
{health.vram_used_mb != null && (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
VRAM: {health.vram_used_mb.toFixed(0)} MB used
|
||||
{health.gpu_available && health.gpu_type ? (
|
||||
<>
|
||||
<div className="text-sm font-medium">
|
||||
{health.gpu_type.replace(/^(CUDA|ROCm|MPS|Metal|XPU|DirectML)\s*\((.+)\)$/, '$2') ||
|
||||
health.gpu_type}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{health.gpu_type.replace(/\s*\(.+\)$/, '')}
|
||||
{health.vram_used_mb != null && health.vram_used_mb > 0
|
||||
? ` \u00b7 ${health.vram_used_mb.toFixed(0)} MB VRAM used`
|
||||
: ''}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="text-sm font-medium">CPU</div>
|
||||
<div className="text-sm text-muted-foreground">No GPU acceleration available</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Native GPU detected - no CUDA download needed */}
|
||||
|
||||
{/* CUDA download section - only show when native GPU is NOT detected (i.e., Windows/Linux NVIDIA users) */}
|
||||
{!hasNativeGpu && (
|
||||
{/* CUDA download section - only show when no GPU is active (native or CUDA) */}
|
||||
{!hasNativeGpu && !isCurrentlyCuda && (
|
||||
<>
|
||||
{/* Download progress */}
|
||||
{cudaDownloading && downloadProgress && (
|
||||
|
||||
@@ -11,6 +11,7 @@ export function UpdateStatus() {
|
||||
const platform = usePlatform();
|
||||
const { status, checkForUpdates, downloadAndInstall, restartAndInstall } = useAutoUpdater(false);
|
||||
const [currentVersion, setCurrentVersion] = useState<string>('');
|
||||
const isDev = !import.meta.env?.PROD;
|
||||
|
||||
useEffect(() => {
|
||||
platform.metadata
|
||||
@@ -20,11 +21,7 @@ export function UpdateStatus() {
|
||||
}, [platform]);
|
||||
|
||||
return (
|
||||
<Card
|
||||
role="region"
|
||||
aria-label="App Updates"
|
||||
tabIndex={0}
|
||||
>
|
||||
<Card role="region" aria-label="App Updates" tabIndex={0}>
|
||||
<CardHeader>
|
||||
<CardTitle>App Updates</CardTitle>
|
||||
</CardHeader>
|
||||
@@ -32,97 +29,110 @@ export function UpdateStatus() {
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm font-medium">Current Version</div>
|
||||
<div className="text-sm text-muted-foreground">v{currentVersion}</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
v{currentVersion}
|
||||
{isDev ? ' (dev)' : ''}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={checkForUpdates}
|
||||
disabled={status.checking || status.downloading || status.readyToInstall}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 mr-2 ${status.checking ? 'animate-spin' : ''}`} />
|
||||
Check for Updates
|
||||
</Button>
|
||||
{!isDev && (
|
||||
<Button
|
||||
onClick={checkForUpdates}
|
||||
disabled={status.checking || status.downloading || status.readyToInstall}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 mr-2 ${status.checking ? 'animate-spin' : ''}`} />
|
||||
Check for Updates
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{status.checking && (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<RefreshCw className="h-4 w-4 animate-spin" />
|
||||
Checking for updates...
|
||||
{isDev ? (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Auto-updates are disabled in development mode.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status.error && (
|
||||
<div className="flex items-center gap-2 text-sm text-destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
{status.error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status.available && !status.downloading && !status.readyToInstall && (
|
||||
<div className="space-y-3 p-4 border rounded-lg bg-primary/5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-semibold">Update Available</div>
|
||||
<div className="text-sm text-muted-foreground">Version {status.version}</div>
|
||||
) : (
|
||||
<>
|
||||
{status.checking && (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<RefreshCw className="h-4 w-4 animate-spin" />
|
||||
Checking for updates...
|
||||
</div>
|
||||
<Badge>New</Badge>
|
||||
</div>
|
||||
<Button onClick={downloadAndInstall} className="w-full" size="sm">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Download Update
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{status.downloading && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Download className="h-4 w-4" />
|
||||
Downloading update...
|
||||
{status.error && (
|
||||
<div className="flex items-center gap-2 text-sm text-destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
{status.error}
|
||||
</div>
|
||||
{status.downloadProgress !== undefined && (
|
||||
<span className="text-muted-foreground">{status.downloadProgress}%</span>
|
||||
)}
|
||||
</div>
|
||||
<Progress value={status.downloadProgress} />
|
||||
{status.downloadedBytes !== undefined &&
|
||||
status.totalBytes !== undefined &&
|
||||
status.totalBytes > 0 && (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{(status.downloadedBytes / 1024 / 1024).toFixed(1)} MB /{' '}
|
||||
{(status.totalBytes / 1024 / 1024).toFixed(1)} MB
|
||||
)}
|
||||
|
||||
{status.available && !status.downloading && !status.readyToInstall && (
|
||||
<div className="space-y-3 p-4 border rounded-lg bg-primary/5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-semibold">Update Available</div>
|
||||
<div className="text-sm text-muted-foreground">Version {status.version}</div>
|
||||
</div>
|
||||
<Badge>New</Badge>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<Button onClick={downloadAndInstall} className="w-full" size="sm">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Download Update
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status.readyToInstall && (
|
||||
<div className="space-y-3 p-4 border rounded-lg bg-accent/30 border-accent/50">
|
||||
<div className="flex items-center gap-2">
|
||||
<div>
|
||||
<div className="font-semibold">Update Ready to Install</div>
|
||||
{status.downloading && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Download className="h-4 w-4" />
|
||||
Downloading update...
|
||||
</div>
|
||||
{status.downloadProgress !== undefined && (
|
||||
<span className="text-muted-foreground">{status.downloadProgress}%</span>
|
||||
)}
|
||||
</div>
|
||||
<Progress value={status.downloadProgress} />
|
||||
{status.downloadedBytes !== undefined &&
|
||||
status.totalBytes !== undefined &&
|
||||
status.totalBytes > 0 && (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{(status.downloadedBytes / 1024 / 1024).toFixed(1)} MB /{' '}
|
||||
{(status.totalBytes / 1024 / 1024).toFixed(1)} MB
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status.readyToInstall && (
|
||||
<div className="space-y-3 p-4 border rounded-lg bg-accent/30 border-accent/50">
|
||||
<div className="flex items-center gap-2">
|
||||
<div>
|
||||
<div className="font-semibold">Update Ready to Install</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Version {status.version} has been downloaded
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Version {status.version} has been downloaded
|
||||
The app needs to restart to complete the installation. You can do this now or
|
||||
later at your convenience.
|
||||
</div>
|
||||
<Button onClick={restartAndInstall} className="w-full" size="sm">
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Restart Now
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
The app needs to restart to complete the installation. You can do this now or later at
|
||||
your convenience.
|
||||
</div>
|
||||
<Button onClick={restartAndInstall} className="w-full" size="sm">
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Restart Now
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{!status.available && !status.checking && !status.error && status.checking === false && (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
You're up to date
|
||||
</div>
|
||||
{!status.available && !status.checking && !status.error && (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
You're up to date
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
const isWindows = navigator.userAgent.includes('Windows');
|
||||
|
||||
export function TitleBarDragRegion() {
|
||||
return (
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="fixed top-0 left-0 right-0 h-12 z-[9999]"
|
||||
/>
|
||||
);
|
||||
if (isWindows) return null;
|
||||
|
||||
return <div data-tauri-drag-region className="fixed top-0 left-0 right-0 h-12 z-[9999]" />;
|
||||
}
|
||||
|
||||
@@ -2,11 +2,14 @@
|
||||
* UI layout constants for safe area padding
|
||||
*/
|
||||
|
||||
const isWindows = typeof navigator !== 'undefined' && navigator.userAgent.includes('Windows');
|
||||
|
||||
/**
|
||||
* Top safe area padding - height of the drag region bar
|
||||
* Corresponds to Tailwind's pt-12 (3rem / 48px)
|
||||
* On macOS this accounts for the overlay titlebar (48px).
|
||||
* On Windows the native title bar is outside the webview, so no padding is needed.
|
||||
*/
|
||||
export const TOP_SAFE_AREA_PADDING = 'pt-12';
|
||||
export const TOP_SAFE_AREA_PADDING = isWindows ? 'pt-8' : 'pt-12';
|
||||
|
||||
/**
|
||||
* Bottom safe area padding - height of the audio player
|
||||
|
||||
+1
-1
@@ -263,7 +263,7 @@ async def health():
|
||||
gpu_type=gpu_type,
|
||||
vram_used_mb=vram_used,
|
||||
backend_type=backend_type,
|
||||
backend_variant=os.environ.get("VOICEBOX_BACKEND_VARIANT", "cpu"),
|
||||
backend_variant=os.environ.get("VOICEBOX_BACKEND_VARIANT", "cuda" if torch.cuda.is_available() else "cpu"),
|
||||
)
|
||||
|
||||
|
||||
|
||||
@@ -66,6 +66,11 @@ setup-python:
|
||||
}
|
||||
Write-Host "Installing Python dependencies..."
|
||||
& "{{ python }}" -m pip install --upgrade pip -q
|
||||
$hasNvidia = $null -ne (Get-WmiObject Win32_VideoController | Where-Object { $_.Name -match 'NVIDIA' })
|
||||
if ($hasNvidia) { \
|
||||
Write-Host "NVIDIA GPU detected — installing PyTorch with CUDA support..."; \
|
||||
& "{{ pip }}" install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu126; \
|
||||
}
|
||||
& "{{ pip }}" install -r {{ backend_dir }}/requirements.txt
|
||||
& "{{ pip }}" install --no-deps chatterbox-tts
|
||||
& "{{ pip }}" install git+https://github.com/QwenLM/Qwen3-TTS.git
|
||||
@@ -77,30 +82,37 @@ setup-js:
|
||||
|
||||
# ─── Development ──────────────────────────────────────────────────────
|
||||
|
||||
# Start backend + frontend for development (two processes, one terminal)
|
||||
# Start backend (if not already running) + frontend for development
|
||||
[unix]
|
||||
dev: _ensure-venv _ensure-sidecar
|
||||
#!/usr/bin/env bash
|
||||
set -euo pipefail
|
||||
trap 'kill 0' EXIT
|
||||
|
||||
echo "Starting backend on http://localhost:17493 ..."
|
||||
{{ venv_bin }}/uvicorn backend.main:app --reload --port 17493 &
|
||||
sleep 2
|
||||
backend_pid=""
|
||||
if curl -sf http://127.0.0.1:17493/health > /dev/null 2>&1; then
|
||||
echo "Backend already running on http://localhost:17493"
|
||||
else
|
||||
echo "Starting backend on http://localhost:17493 ..."
|
||||
{{ venv_bin }}/uvicorn backend.main:app --reload --port 17493 &
|
||||
backend_pid=$!
|
||||
sleep 2
|
||||
fi
|
||||
|
||||
trap '[ -n "$backend_pid" ] && kill "$backend_pid" 2>/dev/null; wait' EXIT
|
||||
|
||||
echo "Starting Tauri desktop app..."
|
||||
cd {{ tauri_dir }} && bun run tauri dev &
|
||||
|
||||
wait
|
||||
cd {{ tauri_dir }} && bun run tauri dev
|
||||
|
||||
[windows]
|
||||
dev: _ensure-venv _ensure-sidecar
|
||||
Write-Host "Starting backend on http://localhost:17493 ..."
|
||||
$backend = Start-Process -NoNewWindow -PassThru -FilePath "{{ python }}" -ArgumentList "-m", "uvicorn", "backend.main:app", "--reload", "--port", "17493"
|
||||
Start-Sleep -Seconds 2
|
||||
$backendJob = $null
|
||||
try { $null = Invoke-WebRequest -Uri "http://127.0.0.1:17493/health" -UseBasicParsing -TimeoutSec 2 -ErrorAction Stop; Write-Host "Backend already running on http://localhost:17493" } catch { \
|
||||
Write-Host "Starting backend on http://localhost:17493 ..."; \
|
||||
$backendJob = Start-Job -ScriptBlock { & "{{ python }}" -m uvicorn backend.main:app --reload --port 17493 } -WorkingDirectory (Get-Location); \
|
||||
Start-Sleep -Seconds 2; \
|
||||
}
|
||||
Write-Host "Starting Tauri desktop app..."
|
||||
$frontend = Start-Process -NoNewWindow -PassThru -WorkingDirectory "{{ tauri_dir }}" -FilePath "bun" -ArgumentList "run", "tauri", "dev"
|
||||
try { Wait-Process -Id $backend.Id, $frontend.Id } finally { Stop-Process -Id $backend.Id, $frontend.Id -ErrorAction SilentlyContinue }
|
||||
try { Set-Location "{{ tauri_dir }}"; bun run tauri dev } finally { if ($backendJob) { Stop-Job $backendJob -ErrorAction SilentlyContinue; Remove-Job $backendJob -Force -ErrorAction SilentlyContinue } }
|
||||
|
||||
# Start backend only
|
||||
[unix]
|
||||
@@ -115,25 +127,36 @@ dev-backend: _ensure-venv
|
||||
dev-frontend: _ensure-sidecar
|
||||
cd {{ tauri_dir }} && bun run tauri dev
|
||||
|
||||
# Start backend + web app (no Tauri)
|
||||
# Start backend (if not already running) + web app (no Tauri)
|
||||
[unix]
|
||||
dev-web: _ensure-venv
|
||||
#!/usr/bin/env bash
|
||||
set -euo pipefail
|
||||
trap 'kill 0' EXIT
|
||||
{{ venv_bin }}/uvicorn backend.main:app --reload --port 17493 &
|
||||
sleep 2
|
||||
cd {{ web_dir }} && bun run dev &
|
||||
wait
|
||||
|
||||
backend_pid=""
|
||||
if curl -sf http://127.0.0.1:17493/health > /dev/null 2>&1; then
|
||||
echo "Backend already running on http://localhost:17493"
|
||||
else
|
||||
echo "Starting backend on http://localhost:17493 ..."
|
||||
{{ venv_bin }}/uvicorn backend.main:app --reload --port 17493 &
|
||||
backend_pid=$!
|
||||
sleep 2
|
||||
fi
|
||||
|
||||
trap '[ -n "$backend_pid" ] && kill "$backend_pid" 2>/dev/null; wait' EXIT
|
||||
|
||||
cd {{ web_dir }} && bun run dev
|
||||
|
||||
[windows]
|
||||
dev-web: _ensure-venv
|
||||
Write-Host "Starting backend on http://localhost:17493 ..."
|
||||
$backend = Start-Process -NoNewWindow -PassThru -FilePath "{{ python }}" -ArgumentList "-m", "uvicorn", "backend.main:app", "--reload", "--port", "17493"
|
||||
Start-Sleep -Seconds 2
|
||||
$backendJob = $null
|
||||
try { $null = Invoke-WebRequest -Uri "http://127.0.0.1:17493/health" -UseBasicParsing -TimeoutSec 2 -ErrorAction Stop; Write-Host "Backend already running on http://localhost:17493" } catch { \
|
||||
Write-Host "Starting backend on http://localhost:17493 ..."; \
|
||||
$backendJob = Start-Job -ScriptBlock { & "{{ python }}" -m uvicorn backend.main:app --reload --port 17493 } -WorkingDirectory (Get-Location); \
|
||||
Start-Sleep -Seconds 2; \
|
||||
}
|
||||
Write-Host "Starting web app..."
|
||||
$frontend = Start-Process -NoNewWindow -PassThru -WorkingDirectory "{{ web_dir }}" -FilePath "bun" -ArgumentList "run", "dev"
|
||||
try { Wait-Process -Id $backend.Id, $frontend.Id } finally { Stop-Process -Id $backend.Id, $frontend.Id -ErrorAction SilentlyContinue }
|
||||
try { Set-Location "{{ web_dir }}"; bun run dev } finally { if ($backendJob) { Stop-Job $backendJob -ErrorAction SilentlyContinue; Remove-Job $backendJob -Force -ErrorAction SilentlyContinue } }
|
||||
|
||||
# Kill all dev processes
|
||||
[unix]
|
||||
|
||||
Reference in New Issue
Block a user