update: enhance UI components and functionality, add model configuration, and update server proxy

Dockerfile

@@ -43,5 +43,12 @@ RUN pip install --no-cache-dir uvicorn python-multipart
 # Expose the default Hugging Face port
 EXPOSE 7860
 
+# Runtime model configuration (override these from HF Space Variables if needed)
+ENV MODEL_DATASET=Dataset
+ENV MODEL_TYPE=transformer
+ENV MODEL_TRANSFORMER_SIZE=large
+ENV MODEL_MAX_FRAME_LEN=169
+ENV MODEL_CHECKPOINT=/app/transformer_large.pth
+
 # Command to run your FastAPI application using Uvicorn
 CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

label_maps/label_map_Dataset.json

@@ -0,0 +1 @@
+{"bank": 0, "court": 1, "storeorshop": 2}

label_maps/label_map_dataset.json

@@ -0,0 +1 @@
+{"bank": 0, "court": 1, "storeorshop": 2}

ui/src/app/App.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { VideoInput } from './components/VideoInput';
 import { ProcessingPipeline } from './components/ProcessingPipeline';
 import { KeypointsDisplay } from './components/KeypointsDisplay';
 import { TranslationOutput } from './components/TranslationOutput';
-import { Sidebar } from './components/Sidebar';
+import { Sidebar, type SidebarSection } from './components/Sidebar';
 
 type PredictionResult = {
   label: string;
@@ -12,9 +12,62 @@ type PredictionResult = {
   uid?: string;
 };
 
+type ResultRecord = PredictionResult & {
+  id: string;
+  source: 'upload' | 'camera';
+  filename: string;
+  created_at: string;
+};
+
 const RECORDING_MS = 2000;
+const MAX_HISTORY = 200;
+const HISTORY_STORAGE_KEY = 'lumisign_history_v1';
+const SAVED_STORAGE_KEY = 'lumisign_saved_v1';
+
+function createRecordId() {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+
+function loadStoredRecords(key: string): ResultRecord[] {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw) as unknown;
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((entry): entry is ResultRecord => {
+      return (
+        entry !== null &&
+        typeof entry === 'object' &&
+        typeof (entry as { id?: unknown }).id === 'string' &&
+        typeof (entry as { label?: unknown }).label === 'string' &&
+        typeof (entry as { score?: unknown }).score === 'number' &&
+        typeof (entry as { elapsed_ms?: unknown }).elapsed_ms === 'number'
+      );
+    });
+  } catch {
+    return [];
+  }
+}
+
+function formatDateTime(iso: string) {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return iso;
+  return date.toLocaleString();
+}
+
+function escapeCsvValue(value: string | number | boolean) {
+  const text = String(value);
+  if (text.includes('"') || text.includes(',') || text.includes('\n')) {
+    return `"${text.replace(/"/g, '""')}"`;
+  }
+  return text;
+}
 
 export default function App() {
+  const [activeSection, setActiveSection] = useState<SidebarSection>('new');
   const [isProcessing, setIsProcessing] = useState(false);
   const [currentStep, setCurrentStep] = useState(0);
   const [videoFile, setVideoFile] = useState<File | null>(null);
@@ -22,6 +75,10 @@ export default function App() {
   const [error, setError] = useState<string | null>(null);
   const [cameraStream, setCameraStream] = useState<MediaStream | null>(null);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [history, setHistory] = useState<ResultRecord[]>(() => loadStoredRecords(HISTORY_STORAGE_KEY));
+  const [saved, setSaved] = useState<ResultRecord[]>(() => loadStoredRecords(SAVED_STORAGE_KEY));
+  const [latestRecord, setLatestRecord] = useState<ResultRecord | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
 
   useEffect(() => {
     if (!videoFile) {
@@ -40,6 +97,20 @@ export default function App() {
     };
   }, [cameraStream]);
 
+  useEffect(() => {
+    localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(history));
+  }, [history]);
+
+  useEffect(() => {
+    localStorage.setItem(SAVED_STORAGE_KEY, JSON.stringify(saved));
+  }, [saved]);
+
+  useEffect(() => {
+    if (!notice) return;
+    const timeout = window.setTimeout(() => setNotice(null), 3000);
+    return () => window.clearTimeout(timeout);
+  }, [notice]);
+
   const stopCamera = () => {
     cameraStream?.getTracks().forEach((track) => track.stop());
     setCameraStream(null);
@@ -57,6 +128,7 @@ export default function App() {
         audio: false,
       });
       setCameraStream(stream);
+      setActiveSection('new');
       setVideoFile(null);
       setPrediction(null);
       setError(null);
@@ -71,6 +143,7 @@ export default function App() {
     if (cameraStream) {
       stopCamera();
     }
+    setActiveSection('new');
     setVideoFile(file);
     setPrediction(null);
     setError(null);
@@ -115,13 +188,121 @@ export default function App() {
     const form = new FormData();
     form.append('file', blob, filename);
     const resp = await fetch('/predict', { method: 'POST', body: form });
-    const data = await resp.json();
+    const responseText = await resp.text();
+    let data: unknown = null;
+    if (responseText) {
+      try {
+        data = JSON.parse(responseText);
+      } catch {
+        data = null;
+      }
+    }
+
     if (!resp.ok) {
-      throw new Error(data?.error || `Request failed (${resp.status})`);
+      const errorMessage =
+        data && typeof data === 'object' && 'error' in data
+          ? String((data as { error?: unknown }).error ?? '')
+          : responseText;
+      throw new Error(errorMessage || `Request failed (${resp.status})`);
+    }
+
+    if (!data || typeof data !== 'object') {
+      throw new Error('Backend returned an empty response.');
     }
+
     return data as PredictionResult;
   };
 
+  const handleCopyPrediction = async () => {
+    const record = latestRecord;
+    if (!record) {
+      setNotice('No prediction available to copy.');
+      return;
+    }
+    const text = [
+      `Label: ${record.label}`,
+      `Confidence: ${(record.score * 100).toFixed(1)}%`,
+      `Processing Time: ${record.elapsed_ms} ms`,
+      `Source: ${record.source}`,
+      `Timestamp: ${formatDateTime(record.created_at)}`,
+    ].join('\n');
+    try {
+      await navigator.clipboard.writeText(text);
+      setNotice('Prediction copied to clipboard.');
+    } catch {
+      setNotice('Failed to copy. Please allow clipboard access.');
+    }
+  };
+
+  const handleSaveCurrentResult = () => {
+    if (!latestRecord) {
+      setNotice('No prediction available to save.');
+      return;
+    }
+    setSaved((prev) => {
+      if (prev.some((item) => item.id === latestRecord.id)) {
+        return prev;
+      }
+      return [latestRecord, ...prev];
+    });
+    setNotice('Result saved.');
+  };
+
+  const hasSavedCurrent = latestRecord ? saved.some((item) => item.id === latestRecord.id) : false;
+
+  const handleExportResults = () => {
+    const merged = new Map<string, ResultRecord & { saved: boolean }>();
+    for (const item of history) {
+      merged.set(item.id, { ...item, saved: false });
+    }
+    for (const item of saved) {
+      const existing = merged.get(item.id);
+      if (existing) {
+        merged.set(item.id, { ...existing, saved: true });
+      } else {
+        merged.set(item.id, { ...item, saved: true });
+      }
+    }
+
+    const rows = Array.from(merged.values()).sort((a, b) =>
+      b.created_at.localeCompare(a.created_at),
+    );
+
+    if (rows.length === 0) {
+      setNotice('No results to export yet.');
+      return;
+    }
+
+    const headers = ['id', 'label', 'confidence', 'elapsed_ms', 'source', 'filename', 'created_at', 'saved'];
+    const csvLines = [
+      headers.join(','),
+      ...rows.map((item) =>
+        [
+          item.id,
+          item.label,
+          item.score.toFixed(6),
+          item.elapsed_ms,
+          item.source,
+          item.filename,
+          item.created_at,
+          item.saved,
+        ]
+          .map(escapeCsvValue)
+          .join(','),
+      ),
+    ];
+
+    const blob = new Blob([csvLines.join('\n')], { type: 'text/csv;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+    link.href = url;
+    link.download = `lumisign-results-${stamp}.csv`;
+    link.click();
+    URL.revokeObjectURL(url);
+    setNotice('Export complete.');
+  };
+
   const handleStartTranslation = async () => {
     if (isProcessing) return;
     if (!videoFile && !cameraStream) {
@@ -137,14 +318,17 @@ export default function App() {
     try {
       let blob: Blob;
       let filename: string;
+      let source: ResultRecord['source'];
 
       if (videoFile) {
         blob = videoFile;
         filename = videoFile.name;
+        source = 'upload';
       } else if (cameraStream) {
         setCurrentStep(2);
         blob = await recordClip(cameraStream, RECORDING_MS);
         filename = 'recording.webm';
+        source = 'camera';
       } else {
         setIsProcessing(false);
         return;
@@ -153,7 +337,17 @@ export default function App() {
       setCurrentStep(3);
       const result = await requestPrediction(blob, filename);
       setPrediction(result);
+      const record: ResultRecord = {
+        ...result,
+        id: createRecordId(),
+        source,
+        filename,
+        created_at: new Date().toISOString(),
+      };
+      setLatestRecord(record);
+      setHistory((prev) => [record, ...prev].slice(0, MAX_HISTORY));
       setCurrentStep(4);
+      setActiveSection('new');
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Prediction failed.';
       setError(message);
@@ -172,9 +366,178 @@ export default function App() {
     stopCamera();
   };
 
+  const analytics = useMemo(() => {
+    const total = history.length;
+    const averageConfidence =
+      total > 0 ? history.reduce((sum, item) => sum + item.score, 0) / total : 0;
+    const labelCounts = new Map<string, number>();
+    for (const item of history) {
+      labelCounts.set(item.label, (labelCounts.get(item.label) ?? 0) + 1);
+    }
+    const topLabels = Array.from(labelCounts.entries())
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 5);
+    return {
+      total,
+      saved: saved.length,
+      averageConfidence,
+      topLabels,
+    };
+  }, [history, saved.length]);
+
+  const renderRecordList = (records: ResultRecord[], emptyText: string) => {
+    if (records.length === 0) {
+      return <div className="text-sm text-gray-500">{emptyText}</div>;
+    }
+    return (
+      <div className="space-y-2">
+        {records.slice(0, 20).map((item) => (
+          <button
+            key={item.id}
+            onClick={() => {
+              setPrediction(item);
+              setLatestRecord(item);
+              setCurrentStep(4);
+              setActiveSection('new');
+            }}
+            className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-left hover:bg-gray-50"
+          >
+            <div className="font-medium text-sm">{item.label}</div>
+            <div className="text-xs text-gray-500">
+              {(item.score * 100).toFixed(1)}% confidence • {item.elapsed_ms} ms •{' '}
+              {formatDateTime(item.created_at)}
+            </div>
+          </button>
+        ))}
+      </div>
+    );
+  };
+
+  const renderActiveSection = () => {
+    switch (activeSection) {
+      case 'history':
+        return (
+          <div className="mb-6 rounded-lg border border-gray-200 bg-white p-6">
+            <div className="mb-3 flex items-center justify-between">
+              <h2 className="text-lg">History</h2>
+              <button
+                onClick={() => setHistory([])}
+                className="rounded border border-gray-300 px-3 py-1.5 text-xs hover:bg-gray-50"
+              >
+                Clear History
+              </button>
+            </div>
+            {renderRecordList(history, 'No translation history yet.')}
+          </div>
+        );
+      case 'saved':
+        return (
+          <div className="mb-6 rounded-lg border border-gray-200 bg-white p-6">
+            <div className="mb-3 flex items-center justify-between">
+              <h2 className="text-lg">Saved Results</h2>
+              <button
+                onClick={() => setSaved([])}
+                className="rounded border border-gray-300 px-3 py-1.5 text-xs hover:bg-gray-50"
+              >
+                Clear Saved
+              </button>
+            </div>
+            {renderRecordList(saved, 'No saved results yet.')}
+          </div>
+        );
+      case 'analytics':
+        return (
+          <div className="mb-6 rounded-lg border border-gray-200 bg-white p-6">
+            <h2 className="mb-3 text-lg">Analytics</h2>
+            <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
+              <div className="rounded-lg border border-gray-200 p-3">
+                <div className="text-xs text-gray-500">Total Predictions</div>
+                <div className="text-xl">{analytics.total}</div>
+              </div>
+              <div className="rounded-lg border border-gray-200 p-3">
+                <div className="text-xs text-gray-500">Saved Results</div>
+                <div className="text-xl">{analytics.saved}</div>
+              </div>
+              <div className="rounded-lg border border-gray-200 p-3">
+                <div className="text-xs text-gray-500">Average Confidence</div>
+                <div className="text-xl">{(analytics.averageConfidence * 100).toFixed(1)}%</div>
+              </div>
+            </div>
+            <div className="mt-4 rounded-lg border border-gray-200 p-3">
+              <div className="mb-2 text-sm text-gray-600">Top Predicted Labels</div>
+              {analytics.topLabels.length === 0 ? (
+                <div className="text-sm text-gray-500">Run a few translations to see trends.</div>
+              ) : (
+                <div className="space-y-1">
+                  {analytics.topLabels.map(([label, count]) => (
+                    <div key={label} className="text-sm">
+                      {label}: {count}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        );
+      case 'documentation':
+        return (
+          <div className="mb-6 rounded-lg border border-gray-200 bg-white p-6 text-sm text-gray-700">
+            <h2 className="mb-3 text-lg text-black">Documentation</h2>
+            <div>1. Start backend (`uvicorn`) and frontend (`npm run dev`).</div>
+            <div>2. Upload a sign video or record with camera.</div>
+            <div>3. Click Start Translation to send it to `/predict`.</div>
+            <div>4. Save useful outputs or export CSV for analysis.</div>
+            <div className="mt-3 rounded bg-gray-50 p-3 font-mono text-xs text-gray-600">
+              MODEL_DATASET=Dataset MODEL_TYPE=transformer MODEL_TRANSFORMER_SIZE=large
+            </div>
+          </div>
+        );
+      case 'help':
+        return (
+          <div className="mb-6 rounded-lg border border-gray-200 bg-white p-6 text-sm text-gray-700">
+            <h2 className="mb-3 text-lg text-black">Help Center</h2>
+            <div>1. If translation fails, confirm backend is reachable on the configured port.</div>
+            <div>2. If camera fails, allow browser camera permission and retry.</div>
+            <div>3. If no output appears, check backend logs for model or media errors.</div>
+            <div>4. Use Export Results to share reproducible prediction history.</div>
+          </div>
+        );
+      case 'settings':
+        return (
+          <div className="mb-6 rounded-lg border border-gray-200 bg-white p-6">
+            <h2 className="mb-4 text-lg">Settings</h2>
+            <div className="mb-4 text-sm text-gray-700">Language: English</div>
+            <div className="flex gap-2">
+              <button
+                onClick={() => setHistory([])}
+                className="rounded border border-gray-300 px-3 py-2 text-xs hover:bg-gray-50"
+              >
+                Clear History
+              </button>
+              <button
+                onClick={() => setSaved([])}
+                className="rounded border border-gray-300 px-3 py-2 text-xs hover:bg-gray-50"
+              >
+                Clear Saved
+              </button>
+            </div>
+          </div>
+        );
+      case 'new':
+      default:
+        return null;
+    }
+  };
+
   return (
     <div className="flex h-screen bg-gray-50">
-      <Sidebar onReset={handleReset} />
+      <Sidebar
+        activeSection={activeSection}
+        historyCount={history.length}
+        savedCount={saved.length}
+        onReset={handleReset}
+        onSelectSection={setActiveSection}
+      />
 
       <main className="flex-1 overflow-auto">
         <div className="mx-auto max-w-7xl p-8">
@@ -186,16 +549,27 @@ export default function App() {
                 <p className="text-gray-600">Real-time ISL to English translation</p>
               </div>
               <div className="flex gap-3">
-                <button className="flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
-                  <span>Language</span>
-                </button>
-                <button className="rounded-lg bg-black px-4 py-2 text-white hover:bg-gray-800">
+                <div className="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm text-gray-700">
+                  Language: English
+                </div>
+                <button
+                  onClick={handleExportResults}
+                  className="rounded-lg bg-black px-4 py-2 text-white hover:bg-gray-800"
+                >
                   Export Results
                 </button>
               </div>
             </div>
           </div>
 
+          {notice && (
+            <div className="mb-6 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
+              {notice}
+            </div>
+          )}
+
+          {renderActiveSection()}
+
           {/* Video Input Section */}
           <VideoInput
             onVideoUpload={handleVideoUpload}
@@ -218,8 +592,11 @@ export default function App() {
             isProcessing={isProcessing}
             onStartTranslation={handleStartTranslation}
             onReset={handleReset}
+            onCopy={handleCopyPrediction}
+            onSaveResult={handleSaveCurrentResult}
             canStart={Boolean(videoFile || cameraStream)}
             prediction={prediction}
+            hasSavedCurrent={hasSavedCurrent}
             error={error}
           />
         </div>

ui/src/app/components/KeypointsDisplay.tsx

@@ -1,3 +1,4 @@
+import { useMemo, useState } from 'react';
 import { Hand, MoreHorizontal, Smile, User } from "lucide-react";
 
 const keypointTypes = [
@@ -7,6 +8,12 @@ const keypointTypes = [
 ];
 
 export function KeypointsDisplay() {
+  const [showDetails, setShowDetails] = useState(false);
+  const totalLandmarks = useMemo(
+    () => keypointTypes.reduce((sum, type) => sum + type.count, 0),
+    [],
+  );
+
   return (
     <div className="mb-6 rounded-xl border border-gray-200 bg-white p-4 sm:p-5">
       <div className="mb-4 flex items-center justify-between">
@@ -14,9 +21,12 @@ export function KeypointsDisplay() {
           <h2 className="mb-1 text-[18px]">Extracted Keypoints</h2>
           <p className="text-xs text-gray-600">Visual representation of detected landmarks</p>
         </div>
-        <button className="flex items-center gap-1 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs text-gray-600 hover:bg-gray-50">
+        <button
+          onClick={() => setShowDetails((prev) => !prev)}
+          className="flex items-center gap-1 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs text-gray-600 hover:bg-gray-50"
+        >
           <MoreHorizontal className="h-3.5 w-3.5" />
-          <span>View Details</span>
+          <span>{showDetails ? 'Hide Details' : 'View Details'}</span>
         </button>
       </div>
 
@@ -32,11 +42,23 @@ export function KeypointsDisplay() {
               <div className="border-t border-gray-200 px-3 py-2 text-center">
                 <p className="text-xs text-gray-700">{type.title}</p>
                 <p className="text-xs text-orange-700">{type.count} keypoints detected</p>
+                {showDetails && (
+                  <p className="mt-1 text-[11px] text-gray-500">
+                    Used as temporal features by the transformer classifier.
+                  </p>
+                )}
               </div>
             </div>
           );
         })}
       </div>
+      {showDetails && (
+        <div className="mt-4 rounded-md border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600">
+          <div>Total landmarks per frame: {totalLandmarks}</div>
+          <div>Face landmarks are available but less influential than pose and hands for many signs.</div>
+          <div>Final prediction uses a sequence-level transformer over extracted keypoint vectors.</div>
+        </div>
+      )}
     </div>
   );
 }

ui/src/app/components/ProcessingPipeline.tsx

@@ -19,8 +19,8 @@ export function ProcessingPipeline({ currentStep, isProcessing }: ProcessingPipe
     },
     {
       id: 3,
-      title: 'Step 3: LSTM Translation',
-      description: 'Processing through neural network model',
+      title: 'Step 3: Transformer Translation',
+      description: 'Sequence classification using the trained transformer model',
     },
     {
       id: 4,
@@ -30,6 +30,11 @@ export function ProcessingPipeline({ currentStep, isProcessing }: ProcessingPipe
   ];
 
   const getStepStatus = (stepId: number) => {
+    if (stepId === 4) {
+      if (currentStep >= 4) return 'completed';
+      if (currentStep > 0) return 'processing';
+      return 'pending';
+    }
     if (currentStep > stepId) return 'completed';
     if (currentStep === stepId) return 'processing';
     return 'pending';
@@ -97,10 +102,16 @@ export function ProcessingPipeline({ currentStep, isProcessing }: ProcessingPipe
                     <div className="mt-3">
                       <div className="flex items-center justify-between mb-2">
                         <span className="text-sm text-gray-600">Progress</span>
-                        <span className="text-sm font-medium">{Math.min(currentStep * 25, 100)}%</span>
+                        <span className="text-sm font-medium">
+                          {getStepStatus(step.id) === 'completed' ? 100 : Math.min(currentStep * 25, 100)}%
+                        </span>
                       </div>
                       <Progress 
-                        value={Math.min(currentStep * 25, 100)} 
+                        value={
+                          getStepStatus(step.id) === 'completed'
+                            ? 100
+                            : Math.min(currentStep * 25, 100)
+                        } 
                         className="h-2"
                       />
                     </div>

ui/src/app/components/Sidebar.tsx

@@ -1,8 +1,34 @@
+export type SidebarSection =
+  | 'new'
+  | 'history'
+  | 'saved'
+  | 'analytics'
+  | 'documentation'
+  | 'help'
+  | 'settings';
+
 interface SidebarProps {
+  activeSection: SidebarSection;
+  historyCount: number;
+  savedCount: number;
   onReset: () => void;
+  onSelectSection: (section: SidebarSection) => void;
 }
 
-export function Sidebar({ onReset }: SidebarProps) {
+export function Sidebar({
+  activeSection,
+  historyCount,
+  savedCount,
+  onReset,
+  onSelectSection,
+}: SidebarProps) {
+  const navButtonClass = (section: SidebarSection) =>
+    `w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left ${
+      activeSection === section
+        ? 'bg-gray-100 text-gray-900'
+        : 'text-gray-600 hover:bg-gray-100'
+    }`;
+
   return (
     <aside className="w-64 bg-white border-r border-gray-200 p-6 flex flex-col">
       {/* Logo */}
@@ -16,25 +42,43 @@ export function Sidebar({ onReset }: SidebarProps) {
       {/* Navigation */}
       <nav className="flex-1">
         <div className="space-y-2">
-          <button 
-            onClick={onReset}
-            className="w-full flex items-center gap-3 px-4 py-3 rounded-lg bg-gray-100 hover:bg-gray-200 text-left"
+          <button
+            onClick={() => {
+              onReset();
+              onSelectSection('new');
+            }}
+            className={navButtonClass('new')}
           >
             <span>📹</span>
             <span>New Translation</span>
           </button>
-          
-          <button className="w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-100 text-left text-gray-600">
+
+          <button
+            onClick={() => onSelectSection('history')}
+            className={navButtonClass('history')}
+          >
             <span>🕐</span>
-            <span>History</span>
+            <span className="flex-1">History</span>
+            <span className="rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-700">
+              {historyCount}
+            </span>
           </button>
-          
-          <button className="w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-100 text-left text-gray-600">
+
+          <button
+            onClick={() => onSelectSection('saved')}
+            className={navButtonClass('saved')}
+          >
             <span>🔖</span>
-            <span>Saved</span>
+            <span className="flex-1">Saved</span>
+            <span className="rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-700">
+              {savedCount}
+            </span>
           </button>
-          
-          <button className="w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-100 text-left text-gray-600">
+
+          <button
+            onClick={() => onSelectSection('analytics')}
+            className={navButtonClass('analytics')}
+          >
             <span>📊</span>
             <span>Analytics</span>
           </button>
@@ -44,17 +88,26 @@ export function Sidebar({ onReset }: SidebarProps) {
         <div className="mt-8">
           <div className="text-xs uppercase text-gray-400 mb-3 px-4">Resources</div>
           <div className="space-y-2">
-            <button className="w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-100 text-left text-gray-600">
+            <button
+              onClick={() => onSelectSection('documentation')}
+              className={navButtonClass('documentation')}
+            >
               <span>📚</span>
               <span>Documentation</span>
             </button>
-            
-            <button className="w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-100 text-left text-gray-600">
+
+            <button
+              onClick={() => onSelectSection('help')}
+              className={navButtonClass('help')}
+            >
               <span>❓</span>
               <span>Help Center</span>
             </button>
-            
-            <button className="w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-100 text-left text-gray-600">
+
+            <button
+              onClick={() => onSelectSection('settings')}
+              className={navButtonClass('settings')}
+            >
               <span>⚙️</span>
               <span>Settings</span>
             </button>
@@ -69,10 +122,16 @@ export function Sidebar({ onReset }: SidebarProps) {
             <span>👤</span>
           </div>
           <div className="flex-1">
-            <div className="font-medium">Priya Sharma</div>
-            <div className="text-sm text-gray-500">priya@example.com</div>
+            <div className="font-medium">Local Session</div>
+            <div className="text-sm text-gray-500">Stored in this browser</div>
           </div>
-          <button className="text-gray-400 hover:text-gray-600">⋮</button>
+          <button
+            onClick={() => onSelectSection('settings')}
+            className="text-gray-400 hover:text-gray-600"
+            aria-label="Open settings"
+          >
+            ⋮
+          </button>
         </div>
       </div>
     </aside>

ui/src/app/components/TranslationOutput.tsx

@@ -1,16 +1,19 @@
-import { Copy, Info, MessageSquareText, Play, RotateCcw, Save, Volume2 } from 'lucide-react';
+import { Copy, Info, MessageSquareText, Play, RotateCcw, Save } from 'lucide-react';
 
 interface TranslationOutputProps {
   currentStep: number;
   isProcessing: boolean;
   onStartTranslation: () => void;
   onReset: () => void;
+  onCopy: () => void;
+  onSaveResult: () => void;
   canStart: boolean;
   prediction: {
     label: string;
     score: number;
     elapsed_ms: number;
   } | null;
+  hasSavedCurrent: boolean;
   error: string | null;
 }
 
@@ -19,8 +22,11 @@ export function TranslationOutput({
   isProcessing,
   onStartTranslation,
   onReset,
+  onCopy,
+  onSaveResult,
   canStart,
   prediction,
+  hasSavedCurrent,
   error,
 }: TranslationOutputProps) {
   const isComplete = Boolean(prediction) && !isProcessing;
@@ -45,14 +51,18 @@ export function TranslationOutput({
           <p className="text-sm text-gray-600">Translated English text with confidence score</p>
         </div>
         <div className="flex gap-2">
-          <button className="flex items-center gap-1.5 rounded border border-gray-300 px-3 py-1.5 text-xs hover:bg-gray-50">
+          <button
+            onClick={onCopy}
+            disabled={!prediction}
+            className={`flex items-center gap-1.5 rounded border px-3 py-1.5 text-xs ${
+              prediction
+                ? 'border-gray-300 hover:bg-gray-50'
+                : 'cursor-not-allowed border-gray-200 bg-gray-100 text-gray-400'
+            }`}
+          >
             <Copy className="h-3.5 w-3.5" />
             Copy
           </button>
-          <button className="flex items-center gap-1.5 rounded border border-gray-300 px-3 py-1.5 text-xs hover:bg-gray-50">
-            <Volume2 className="h-3.5 w-3.5" />
-            Speak
-          </button>
         </div>
       </div>
 
@@ -71,7 +81,7 @@ export function TranslationOutput({
           <div className="text-center">
             <MessageSquareText className="mx-auto mb-2 h-8 w-8 text-gray-300" />
             <div className="text-gray-500">Translation in progress...</div>
-            <div className="text-xs text-gray-400">Processing through LSTM model</div>
+            <div className="text-xs text-gray-400">Processing through Transformer model</div>
           </div>
         ) : (
           <div className="text-center">
@@ -84,28 +94,37 @@ export function TranslationOutput({
 
       <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
         <div className="rounded-lg border border-gray-200 p-4">
-          <div className="mb-2 flex items-center justify-between">
-            <div className="text-sm text-gray-600">Accuracy Score</div>
-            <Info className="h-3.5 w-3.5 text-gray-400" />
+            <div className="mb-2 flex items-center justify-between">
+              <div className="text-sm text-gray-600">Accuracy Score</div>
+              <Info
+                className="h-3.5 w-3.5 text-gray-400"
+                title="Model confidence for the top predicted label"
+              />
+            </div>
+            <div className="text-2xl font-medium">{prediction ? `${confidencePercent}%` : '--%'}</div>
           </div>
-          <div className="text-2xl font-medium">{prediction ? `${confidencePercent}%` : '--%'}</div>
-        </div>
 
         <div className="rounded-lg border border-gray-200 p-4">
-          <div className="mb-2 flex items-center justify-between">
-            <div className="text-sm text-gray-600">Confidence Level</div>
-            <Info className="h-3.5 w-3.5 text-gray-400" />
+            <div className="mb-2 flex items-center justify-between">
+              <div className="text-sm text-gray-600">Confidence Level</div>
+              <Info
+                className="h-3.5 w-3.5 text-gray-400"
+                title="High: >=85%, Medium: >=60%, Low: <60%"
+              />
+            </div>
+            <div className="text-2xl font-medium">{confidenceLevel}</div>
           </div>
-          <div className="text-2xl font-medium">{confidenceLevel}</div>
-        </div>
 
         <div className="rounded-lg border border-gray-200 p-4">
-          <div className="mb-2 flex items-center justify-between">
-            <div className="text-sm text-gray-600">Processing Time</div>
-            <Info className="h-3.5 w-3.5 text-gray-400" />
+            <div className="mb-2 flex items-center justify-between">
+              <div className="text-sm text-gray-600">Processing Time</div>
+              <Info
+                className="h-3.5 w-3.5 text-gray-400"
+                title="End-to-end backend response time for this prediction"
+              />
+            </div>
+            <div className="text-2xl font-medium">{processingTime}</div>
           </div>
-          <div className="text-2xl font-medium">{processingTime}</div>
-        </div>
       </div>
 
       <div className="mt-6 flex items-center justify-between border-t border-gray-200 pt-6">
@@ -119,6 +138,7 @@ export function TranslationOutput({
 
         <div className="flex gap-3">
           <button
+            onClick={onSaveResult}
             disabled={!isComplete}
             className={`flex items-center gap-2 rounded-lg border px-6 py-2.5 ${
               isComplete
@@ -127,7 +147,7 @@ export function TranslationOutput({
             }`}
           >
             <Save className="h-4 w-4" />
-            Save Results
+            {hasSavedCurrent ? 'Saved' : 'Save Results'}
           </button>
 
           <button

ui/vite.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
   server: {
     proxy: {
       '/predict': {
-        target: 'http://localhost:8000',
+        target: 'http://localhost:8080',
         changeOrigin: true,
       },
     },