able to re-transcribe

frontend/src/components/TranscriptEditor.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useRef, useEffect, useMemo, useState } from 'react';
 import { useEditorStore } from '../store/editorStore';
 import { Virtuoso } from 'react-virtuoso';
-import { Scissors, VolumeX, SlidersHorizontal, Gauge, RotateCcw, Search, ChevronUp, ChevronDown, X } from 'lucide-react';
+import { Scissors, VolumeX, SlidersHorizontal, Gauge, RotateCcw, Search, ChevronUp, ChevronDown, X, RefreshCw } from 'lucide-react';
 
 interface TranscriptEditorProps {
   cutMode: boolean;
@@ -30,6 +30,9 @@ export default function TranscriptEditor({
   const hoveredWordIndex = useEditorStore((s) => s.hoveredWordIndex);
   const setSelectedWordIndices = useEditorStore((s) => s.setSelectedWordIndices);
   const setHoveredWordIndex = useEditorStore((s) => s.setHoveredWordIndex);
+  const videoPath = useEditorStore((s) => s.videoPath);
+  const backendUrl = useEditorStore((s) => s.backendUrl);
+  const replaceWordRange = useEditorStore((s) => s.replaceWordRange);
   const removeCutRange = useEditorStore((s) => s.removeCutRange);
   const removeMuteRange = useEditorStore((s) => s.removeMuteRange);
   const removeGainRange = useEditorStore((s) => s.removeGainRange);
@@ -254,6 +257,50 @@ export default function TranscriptEditor({
     setEditText('');
   }, []);
 
+  const [isReTranscribing, setIsReTranscribing] = useState(false);
+  const reTranscribeGuard = useRef(false);
+
+  const handleReTranscribe = useCallback(async () => {
+    if (!videoPath || selectedWordIndices.length === 0 || reTranscribeGuard.current) return;
+    reTranscribeGuard.current = true;
+    setIsReTranscribing(true);
+
+    // Snapshot indices and word timings before the async gap
+    const sorted = [...selectedWordIndices].sort((a, b) => a - b);
+    const startWord = words[sorted[0]];
+    const endWord = words[sorted[sorted.length - 1]];
+    if (!startWord || !endWord) {
+      reTranscribeGuard.current = false;
+      setIsReTranscribing(false);
+      return;
+    }
+
+    try {
+      const res = await fetch(`${backendUrl}/transcribe/segment`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          file_path: videoPath,
+          start: startWord.start,
+          end: endWord.end,
+        }),
+      });
+      if (!res.ok) {
+        let detail = res.statusText;
+        try { const body = await res.json(); if (body?.detail) detail = String(body.detail); } catch { /* keep statusText fallback */ }
+        throw new Error(`Re-transcribe failed: ${detail}`);
+      }
+      const data = await res.json();
+      replaceWordRange(sorted[0], sorted[sorted.length - 1], data.words);
+    } catch (err) {
+      console.error('Re-transcribe error:', err);
+      alert(err instanceof Error ? err.message : 'Re-transcribe failed');
+    } finally {
+      reTranscribeGuard.current = false;
+      setIsReTranscribing(false);
+    }
+  }, [videoPath, selectedWordIndices, words, backendUrl, replaceWordRange]);
+
   const handleWordDoubleClick = useCallback((index: number) => {
     if (cutMode || muteMode || gainMode || speedMode) return;
     startEditing(index);
@@ -535,6 +582,15 @@ export default function TranscriptEditor({
               <Gauge className="w-3 h-3" />
               Speed {speedModeValue.toFixed(2)}x
             </button>
+            <button
+              onClick={handleReTranscribe}
+              disabled={isReTranscribing}
+              className="flex items-center gap-1 px-2 py-1 text-xs bg-purple-500/20 text-purple-300 rounded hover:bg-purple-500/30 disabled:opacity-40 transition-colors"
+              title="Re-run Whisper transcription on this segment"
+            >
+              <RefreshCw className={`w-3 h-3 ${isReTranscribing ? 'animate-spin' : ''}`} />
+              {isReTranscribing ? 'Re-transcribing...' : 'Re-transcribe'}
+            </button>
           </div>
         )}
       </div>