Implement sidebar navigation and model management features. Refactor App component to utilize a Sidebar for tab navigation, integrating ProfileList, GenerationForm, HistoryTable, and ServerStatus components. Introduce ModelManagement and ModelProgress components for handling AI model downloads and status updates. Enhance CSS for sidebar styling and add progress tracking functionality in the backend for model downloads.

2026-09-18 06:10:43 -07:00 · 2026-01-25 03:10:16 -08:00
parent ca3409ebef
commit 6429cb6673
12 changed files with 1061 additions and 82 deletions
@@ -0,0 +1,121 @@
+import { useEffect, useState } from 'react';
+import { Progress } from '@/components/ui/progress';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { useServerStore } from '@/stores/serverStore';
+import type { ModelProgress as ModelProgressType } from '@/lib/api/types';
+import { Loader2, CheckCircle2, XCircle } from 'lucide-react';
+
+interface ModelProgressProps {
+  modelName: string;
+  displayName: string;
+}
+
+export function ModelProgress({ modelName, displayName }: ModelProgressProps) {
+  const [progress, setProgress] = useState<ModelProgressType | null>(null);
+  const [isSubscribed, setIsSubscribed] = useState(false);
+  const serverUrl = useServerStore((state) => state.serverUrl);
+
+  useEffect(() => {
+    if (!serverUrl || isSubscribed) return;
+
+    // Subscribe to progress updates via Server-Sent Events
+    const eventSource = new EventSource(`${serverUrl}/models/progress/${modelName}`);
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data) as ModelProgressType;
+        setProgress(data);
+        
+        // Close connection if complete or error
+        if (data.status === 'complete' || data.status === 'error') {
+          eventSource.close();
+          setIsSubscribed(false);
+        }
+      } catch (error) {
+        console.error('Error parsing progress event:', error);
+      }
+    };
+
+    eventSource.onerror = (error) => {
+      console.error('SSE error:', error);
+      eventSource.close();
+      setIsSubscribed(false);
+    };
+
+    setIsSubscribed(true);
+
+    return () => {
+      eventSource.close();
+      setIsSubscribed(false);
+    };
+  }, [serverUrl, modelName, isSubscribed]);
+
+  // Don't render if no progress or if complete/error and some time has passed
+  if (!progress || (progress.status === 'complete' && Date.now() - new Date(progress.timestamp).getTime() > 5000)) {
+    return null;
+  }
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+  };
+
+  const getStatusIcon = () => {
+    switch (progress.status) {
+      case 'complete':
+        return <CheckCircle2 className="h-4 w-4 text-green-500" />;
+      case 'error':
+        return <XCircle className="h-4 w-4 text-destructive" />;
+      case 'downloading':
+      case 'extracting':
+        return <Loader2 className="h-4 w-4 animate-spin" />;
+      default:
+        return null;
+    }
+  };
+
+  const getStatusText = () => {
+    switch (progress.status) {
+      case 'complete':
+        return 'Download complete';
+      case 'error':
+        return `Error: ${progress.error || 'Unknown error'}`;
+      case 'downloading':
+        return progress.filename ? `Downloading ${progress.filename}...` : 'Downloading...';
+      case 'extracting':
+        return 'Extracting...';
+      default:
+        return 'Processing...';
+    }
+  };
+
+  return (
+    <Card className="mb-4">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-sm font-medium flex items-center gap-2">
+          {getStatusIcon()}
+          {displayName}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <div className="space-y-1">
+          <div className="flex justify-between text-xs text-muted-foreground">
+            <span>{getStatusText()}</span>
+            {progress.total > 0 && (
+              <span>
+                {formatBytes(progress.current)} / {formatBytes(progress.total)} (
+                {progress.progress.toFixed(1)}%)
+              </span>
+            )}
+          </div>
+          {progress.total > 0 && (
+            <Progress value={progress.progress} className="h-2" />
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}