got cpu based backend working; trying python/gpu solution bc faster probs

frontend/src/App.tsx

@@ -13,7 +13,6 @@ import {
   Settings,
   Sparkles,
   Download,
-  Loader2,
   FolderSearch,
   FileInput,
 } from 'lucide-react';
@@ -28,6 +27,7 @@ export default function App() {
     words,
     isTranscribing,
     transcriptionProgress,
+    transcriptionStatus,
     loadVideo,
     setBackendUrl,
     setTranscription,
@@ -88,15 +88,19 @@ export default function App() {
   };
 
   const transcribeVideo = async (path: string) => {
-    setTranscribing(true, 0);
+    setTranscribing(true, 0, 'Checking model...');
     try {
-      const res = await fetch(`${backendUrl}/transcribe`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ file_path: path, model: whisperModel }),
-      });
-      if (!res.ok) throw new Error(`Transcription failed: ${res.statusText}`);
-      const data = await res.json();
+      if (!window.electronAPI?.transcribe) {
+        throw new Error('Transcription not available');
+      }
+      // Step 1: ensure model is downloaded (may take a while on first run)
+      const modelLabel = whisperModel === 'tiny' ? '~75 MB' : whisperModel === 'base' ? '~140 MB' : '~460 MB';
+      setTranscribing(true, 5, `Downloading ${whisperModel} model (${modelLabel})...`);
+      await window.electronAPI.ensureModel(whisperModel);
+
+      // Step 2: run transcription
+      setTranscribing(true, 20, 'Transcribing audio...');
+      const data = await window.electronAPI.transcribe(path, whisperModel);
       setTranscription(data);
     } catch (err) {
       console.error('Transcription error:', err);
@@ -244,11 +248,24 @@ export default function App() {
             {/* Transcript */}
             <div className="w-1/2 border-l border-editor-border flex flex-col min-h-0">
               {isTranscribing ? (
-                <div className="flex-1 flex flex-col items-center justify-center gap-4">
-                  <Loader2 className="w-8 h-8 text-editor-accent animate-spin" />
-                  <p className="text-sm text-editor-text-muted">
-                    Transcribing... {Math.round(transcriptionProgress)}%
-                  </p>
+                <div className="flex-1 flex flex-col items-center justify-center gap-5">
+                  {/* Animated waveform */}
+                  <div className="flex items-end gap-[3px] h-10">
+                    {[35, 60, 45, 80, 55, 70, 40, 65, 50, 75, 40, 58].map((h, i) => (
+                      <div
+                        key={i}
+                        className="w-[5px] rounded-full bg-editor-accent wave-bar"
+                        style={{
+                          height: `${h}%`,
+                          animationDelay: `${i * 75}ms`,
+                        }}
+                      />
+                    ))}
+                  </div>
+                  <div className="text-center space-y-1">
+                    <p className="text-sm font-medium text-editor-text">Processing audio</p>
+                    <p className="text-xs text-editor-text-muted">{transcriptionStatus || 'Please wait...'}</p>
+                  </div>
                 </div>
               ) : words.length > 0 ? (
                 <TranscriptEditor />