Spaces:

bigbossmonster
/

testing

Sleeping

App Files Files Community

bigbossmonster commited on Jan 20

Commit

7060e3a

verified ·

1 Parent(s): 667821f

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +482 -217

static/index.html CHANGED Viewed

@@ -1,218 +1,483 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Subtitle QC Client</title>
-    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
-    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
-    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-        body { font-family: 'Segoe UI', sans-serif; }
-    </style>
-</head>
-<body class="bg-slate-50 text-slate-900">
-    <div id="root"></div>
-    <script type="text/babel">
-        const { useState, useEffect } = React;
-        const Icon = ({ d, className }) => (
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d={d}/></svg>
-        );
-        const Icons = {
-            Upload: ({className}) => <Icon className={className} d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/>,
-            Check: ({className}) => <Icon className={className} d="M22 11.08V12a10 10 0 1 1-5.93-9.14 22 4 12 14.01 9 11.01"/>,
-            X: ({className}) => <Icon className={className} d="M18 6 6 18M6 6l12 12"/>,
-            Download: ({className}) => <Icon className={className} d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>,
-            Settings: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
-        };
-        const App = () => {
-            const [apiKeys, setApiKeys] = useState(() => localStorage.getItem('qc_api_keys') || '');
-            const [srtFile, setSrtFile] = useState(null);
-            const [mediaFiles, setMediaFiles] = useState([]);
-            const [isUploading, setIsUploading] = useState(false);
-            const [results, setResults] = useState([]);
-            const [error, setError] = useState(null);
-            const [showSettings, setShowSettings] = useState(false);
-            useEffect(() => {
-                localStorage.setItem('qc_api_keys', apiKeys);
-            }, [apiKeys]);
-            const handleAnalyze = async () => {
-                if (!srtFile || mediaFiles.length === 0 || !apiKeys) {
-                    setError("Please provide SRT, Media files, and API Key.");
-                    return;
-                }
-                setIsUploading(true);
-                setError(null);
-                setResults([]);
-                const formData = new FormData();
-                formData.append("srt_file", srtFile);
-                for (let i = 0; i < mediaFiles.length; i++) {
-                    formData.append("media_files", mediaFiles[i]);
-                }
-                formData.append("api_keys", apiKeys);
-                formData.append("batch_size", 20);
-                try {
-                    // Send to current origin /api/analyze
-                    const response = await fetch('/api/analyze', {
-                        method: 'POST',
-                        body: formData
-                    });
-                    if (!response.ok) {
-                        const errText = await response.text();
-                        throw new Error(`Backend Error (${response.status}): ${errText}`);
-                    }
-                    const data = await response.json();
-                    if (data.status === 'success') {
-                        setResults(data.results);
-                    } else {
-                        throw new Error(data.message || "Unknown error");
-                    }
-                } catch (err) {
-                    setError(err.message);
-                } finally {
-                    setIsUploading(false);
-                }
-            };
-            const downloadCorrectedSRT = () => {
-                if (results.length === 0) return;
-                let content = "";
-                results.forEach(r => {
-                    content += `${r.srt_id}\n${r.srt_time}\n${r.status === 'mismatch' ? r.detected : r.expected}\n\n`;
-                });
-                const blob = new Blob([content], {type: "text/plain"});
-                const url = URL.createObjectURL(blob);
-                const a = document.createElement("a");
-                a.href = url;
-                a.download = "corrected_subtitles.srt";
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-            };
-            return (
-                <div className="min-h-screen bg-slate-100 font-sans text-slate-900 pb-20">
-                    <header className="bg-slate-900 text-white p-4 shadow-lg sticky top-0 z-50">
-                        <div className="max-w-6xl mx-auto flex justify-between items-center">
-                            <h1 className="text-xl font-bold">Subtitle QC <span className="text-slate-400 font-normal">Docker</span></h1>
-                            <button onClick={() => setShowSettings(!showSettings)} className="p-2 hover:bg-slate-800 rounded-full">
-                                <Icons.Settings className="w-5 h-5" />
-                            </button>
-                        </div>
-                    </header>
-                    {showSettings && (
-                        <div className="bg-slate-800 text-white p-6 shadow-inner animate-in slide-in-from-top-4">
-                            <div className="max-w-6xl mx-auto">
-                                <label className="block text-sm font-medium mb-1 text-blue-300">Gemini API Keys (One per line)</label>
-                                <textarea
-                                    value={apiKeys}
-                                    onChange={e => setApiKeys(e.target.value)}
-                                    className="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-sm h-20 font-mono"
-                                    placeholder="AIzaSy..."
-                                />
-                            </div>
-                        </div>
-                    )}
-                    <main className="max-w-6xl mx-auto p-6 space-y-6">
-                        <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
-                            <div className="grid md:grid-cols-2 gap-6">
-                                <div className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:bg-slate-50 transition-colors">
-                                    <input type="file" accept=".srt" id="srt" className="hidden" onChange={e => setSrtFile(e.target.files[0])} />
-                                    <label htmlFor="srt" className="cursor-pointer block">
-                                        <div className="text-lg font-semibold text-slate-700">{srtFile ? srtFile.name : "Select SRT File"}</div>
-                                        <div className="text-xs text-slate-400 mt-2">.srt subtitle file</div>
-                                    </label>
-                                </div>
-                                <div className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:bg-slate-50 transition-colors">
-                                    <input type="file" accept=".rar,.zip,image/*" multiple id="media" className="hidden" onChange={e => setMediaFiles(e.target.files)} />
-                                    <label htmlFor="media" className="cursor-pointer block">
-                                        <div className="text-lg font-semibold text-slate-700">{mediaFiles.length > 0 ? `${mediaFiles.length} Files Selected` : "Select Media"}</div>
-                                        <div className="text-xs text-slate-400 mt-2">Images, .rar or .zip archives</div>
-                                    </label>
-                                </div>
-                            </div>
-                            <div className="mt-6 flex justify-end gap-3">
-                                {results.length > 0 && (
-                                    <button onClick={downloadCorrectedSRT} className="flex items-center gap-2 px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 font-bold transition-all">
-                                        <Icons.Download className="w-5 h-5" /> Download Corrected
-                                    </button>
-                                )}
-                                <button
-                                    onClick={handleAnalyze}
-                                    disabled={isUploading}
-                                    className={`flex items-center gap-2 px-8 py-3 rounded-lg font-bold text-white transition-all ${isUploading ? 'bg-slate-400 cursor-wait' : 'bg-blue-600 hover:bg-blue-700 shadow-md hover:shadow-lg'}`}
-                                >
-                                    {isUploading ? "Processing..." : "Analyze"}
-                                    {!isUploading && <Icons.Upload className="w-5 h-5" />}
-                                </button>
-                            </div>
-                            {error && (
-                                <div className="mt-4 p-4 bg-red-50 text-red-700 rounded-lg border border-red-200 flex items-center gap-2">
-                                    <Icons.X className="w-5 h-5" /> {error}
-                                </div>
-                            )}
-                        </div>
-                        {results.length > 0 && (
-                            <div className="space-y-4 animate-in fade-in duration-500">
-                                <div className="flex justify-between items-center">
-                                    <h2 className="text-xl font-bold">Analysis Results ({results.length})</h2>
-                                    <div className="flex gap-2 text-sm">
-                                        <span className="px-2 py-1 bg-green-100 text-green-700 rounded">Match: {results.filter(r => r.status === 'match').length}</span>
-                                        <span className="px-2 py-1 bg-red-100 text-red-700 rounded">Mismatch: {results.filter(r => r.status === 'mismatch').length}</span>
-                                    </div>
-                                </div>
-                                {results.map((item, idx) => (
-                                    <div key={idx} className={`bg-white rounded-lg shadow-sm border p-4 flex gap-4 ${item.status === 'mismatch' ? 'border-red-200 bg-red-50' : 'border-slate-200'}`}>
-                                        <div className="w-32 h-20 bg-slate-200 rounded overflow-hidden flex-shrink-0">
-                                            <img src={item.thumb} alt="thumb" className="w-full h-full object-cover" />
-                                        </div>
-                                        <div className="flex-1 grid md:grid-cols-2 gap-4">
-                                            <div>
-                                                <div className="text-xs text-slate-500 font-mono mb-1">{item.srt_id} | {item.filename}</div>
-                                                <div className="font-medium text-slate-800">{item.expected}</div>
-                                            </div>
-                                            <div className="border-l pl-4 border-slate-200">
-                                                <div className="flex items-center gap-2 mb-1">
-                                                    <span className="text-xs font-bold uppercase text-slate-400">Detected</span>
-                                                    {item.status === 'match' ? <Icons.Check className="w-4 h-4 text-green-600" /> : <Icons.X className="w-4 h-4 text-red-600" />}
-                                                </div>
-                                                <div className={`text-sm ${item.status === 'mismatch' ? 'text-red-700 font-semibold' : 'text-slate-600'}`}>
-                                                    {item.detected || "(No text detected)"}
-                                                </div>
-                                                {item.reason && <div className="text-xs text-slate-400 mt-1 italic">{item.reason}</div>}
-                                            </div>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        )}
-                    </main>
-                </div>
-            );
-        };
-        const root = ReactDOM.createRoot(document.getElementById('root'));
-        root.render(<App />);
-    </script>
-</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Subtitle QC Assistant</title>
+    <!-- React & ReactDOM -->
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <!-- Babel for JSX -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-900">
+    <div id="root"></div>
+    <script type="text/babel">
+        const { useState, useEffect, useRef, useCallback } = React;
+        // --- Icons ---
+        const IconWrapper = ({ children, className }) => (
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
+                {children}
+            </svg>
+        );
+        const FileText = ({ className }) => <IconWrapper className={className}><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/></IconWrapper>;
+        const LucideImage = ({ className }) => <IconWrapper className={className}><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></IconWrapper>;
+        const CheckCircle = ({ className }) => <IconWrapper className={className}><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></IconWrapper>;
+        const XCircle = ({ className }) => <IconWrapper className={className}><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></IconWrapper>;
+        const Play = ({ className }) => <IconWrapper className={className}><polygon points="5 3 19 12 5 21 5 3"/></IconWrapper>;
+        const AlertCircle = ({ className }) => <IconWrapper className={className}><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></IconWrapper>;
+        const Loader2 = ({ className }) => <IconWrapper className={className}><path d="M21 12a9 9 0 1 1-6.219-8.56"/></IconWrapper>;
+        const Trash2 = ({ className }) => <IconWrapper className={className}><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></IconWrapper>;
+        const Clock = ({ className }) => <IconWrapper className={className}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></IconWrapper>;
+        const ArrowRightLeft = ({ className }) => <IconWrapper className={className}><path d="m16 21 5-5-5-5"/><path d="M21 16H3"/><path d="m8 3-5 5 5 5"/><path d="M3 8h18"/></IconWrapper>;
+        const SettingsIcon = ({ className }) => <IconWrapper className={className}><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.1a2 2 0 0 1-1-1.74v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></IconWrapper>;
+        const Zap = ({ className }) => <IconWrapper className={className}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></IconWrapper>;
+        const Download = ({ className }) => <IconWrapper className={className}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></IconWrapper>;
+        const Package = ({ className }) => <IconWrapper className={className}><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></IconWrapper>;
+        // --- Components ---
+        const StatusBadge = ({ status }) => {
+            if (status === 'match') return <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"><CheckCircle className="w-3 h-3 mr-1"/> Match</span>;
+            if (status === 'mismatch') return <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800"><XCircle className="w-3 h-3 mr-1"/> Mismatch</span>;
+            return <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Pending</span>;
+        };
+        const Header = ({ onOpenSettings, activeWorkers }) => (
+            <header className="bg-slate-900 text-white p-6 shadow-lg">
+                <div className="max-w-6xl mx-auto flex items-center justify-between">
+                    <div className="flex items-center space-x-3">
+                        <div className="bg-blue-600 p-2 rounded-lg">
+                            <FileText className="w-6 h-6 text-white" />
+                        </div>
+                        <div>
+                            <h1 className="text-xl font-bold tracking-tight">Subtitle QC Assistant</h1>
+                            <p className="text-slate-400 text-sm">Verify image subtitles against SRT files using Gemini</p>
+                        </div>
+                    </div>
+                    <div className="flex items-center space-x-4">
+                        <div className="hidden md:block text-xs text-slate-500 text-right">
+                            {activeWorkers > 0 ? (
+                                <span className="text-green-400 font-bold flex items-center justify-end gap-1">
+                                    <Zap className="w-3 h-3 animate-pulse"/>
+                                    {activeWorkers} Parallel Key(s) Active
+                                </span>
+                            ) : (
+                                "Mode: Sequential Sort (Time Ascending)"
+                            )}
+                            <br/>
+                            Supports Multi-Key Parallel Batching
+                        </div>
+                        <button
+                            onClick={onOpenSettings}
+                            className="p-2 bg-slate-800 hover:bg-slate-700 rounded-full transition-colors text-slate-300 hover:text-white"
+                            title="API Key Settings"
+                        >
+                            <SettingsIcon className="w-5 h-5" />
+                        </button>
+                    </div>
+                </div>
+            </header>
+        );
+        const SettingsModal = ({ isOpen, onClose, config, setConfig }) => {
+            if (!isOpen) return null;
+            return (
+                <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+                    <div className="bg-white rounded-xl shadow-2xl max-w-md w-full p-6 animate-in fade-in zoom-in duration-200">
+                        <div className="flex justify-between items-center mb-4">
+                            <h3 className="text-lg font-bold text-slate-800">Configuration</h3>
+                            <button onClick={onClose} className="text-slate-400 hover:text-slate-600">
+                                <XCircle className="w-6 h-6" />
+                            </button>
+                        </div>
+                        <div className="space-y-4">
+                            <div>
+                                <label className="block text-sm font-medium text-slate-700 mb-1">Gemini API Keys</label>
+                                <p className="text-xs text-slate-500 mb-2">Enter one key per line. Multiple keys will run in parallel.</p>
+                                <textarea
+                                    value={config.apiKeys}
+                                    onChange={(e) => setConfig({...config, apiKeys: e.target.value})}
+                                    placeholder="AIzaSy...&#10;AIzaSy..."
+                                    rows={3}
+                                    className="w-full p-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none font-mono text-xs"
+                                />
+                            </div>
+                            <div className="grid grid-cols-2 gap-4">
+                                <div>
+                                    <label className="block text-sm font-medium text-slate-700 mb-1">Model Name</label>
+                                    <select
+                                        value={config.modelName}
+                                        onChange={(e) => setConfig({...config, modelName: e.target.value})}
+                                        className="w-full p-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm"
+                                    >
+                                        <option value="gemini-3-flash-preview">Gemini 3 Flash</option>
+                                        <option value="gemini-3-pro-preview">Gemini 3 Pro</option>
+                                    </select>
+                                </div>
+                                <div>
+                                    <label className="block text-sm font-medium text-slate-700 mb-1">Batch Size</label>
+                                    <input
+                                        type="number"
+                                        min="1" max="50"
+                                        value={config.batchSize}
+                                        onChange={(e) => setConfig({...config, batchSize: Number(e.target.value)})}
+                                        className="w-full p-2 border border-slate-300 rounded-lg text-sm"
+                                    />
+                                </div>
+                            </div>
+                            <div>
+                                <label className="block text-sm font-medium text-slate-700 mb-1">
+                                    Compression Quality: <span className="text-blue-600 font-bold">{config.quality}</span>
+                                </label>
+                                <input
+                                    type="range"
+                                    min="0.1"
+                                    max="1.0"
+                                    step="0.1"
+                                    value={config.quality}
+                                    onChange={(e) => setConfig({...config, quality: Number(e.target.value)})}
+                                    className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer"
+                                />
+                                <div className="flex justify-between text-xs text-slate-400 mt-1">
+                                    <span>0.1 (Smallest)</span>
+                                    <span>0.7 (Default)</span>
+                                    <span>1.0 (Best)</span>
+                                </div>
+                            </div>
+                            <div className="flex justify-end pt-2">
+                                <button onClick={onClose} className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium">
+                                    Save & Close
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            );
+        };
+        const App = () => {
+            const [srtFile, setSrtFile] = useState(null);
+            const [mediaFiles, setMediaFiles] = useState([]);
+            const [pairs, setPairs] = useState([]);
+            const [isProcessing, setIsProcessing] = useState(false);
+            const [activeWorkers, setActiveWorkers] = useState(0);
+            const [error, setError] = useState(null);
+            const [loadingMessage, setLoadingMessage] = useState('');
+            const [showSettings, setShowSettings] = useState(false);
+            // Centralized Config State
+            const [config, setConfig] = useState(() => ({
+                apiKeys: localStorage.getItem('gemini_api_keys_multi') || '',
+                batchSize: Number(localStorage.getItem('gemini_batch_size')) || 20,
+                modelName: localStorage.getItem('gemini_model_name') || 'gemini-2.0-flash',
+                quality: Number(localStorage.getItem('gemini_quality')) || 0.7
+            }));
+            useEffect(() => {
+                localStorage.setItem('gemini_api_keys_multi', config.apiKeys);
+                localStorage.setItem('gemini_batch_size', config.batchSize);
+                localStorage.setItem('gemini_model_name', config.modelName);
+                localStorage.setItem('gemini_quality', config.quality);
+            }, [config]);
+            const [isDraggingSrt, setIsDraggingSrt] = useState(false);
+            const [isDraggingImages, setIsDraggingImages] = useState(false);
+            const handleAnalyze = async () => {
+                if (!srtFile || mediaFiles.length === 0) {
+                    setError("Please upload both SRT file and Media files.");
+                    return;
+                }
+                if (!config.apiKeys.trim()) {
+                    setError("API Key missing. Please check settings.");
+                    setShowSettings(true);
+                    return;
+                }
+                setIsProcessing(true);
+                setError(null);
+                setPairs([]);
+                setLoadingMessage("Uploading and analyzing on backend...");
+                // Count workers simply by keys present
+                const keyCount = config.apiKeys.split('\n').filter(k => k.trim()).length;
+                setActiveWorkers(keyCount);
+                const formData = new FormData();
+                formData.append("srt_file", srtFile);
+                for (let i = 0; i < mediaFiles.length; i++) {
+                    formData.append("media_files", mediaFiles[i]);
+                }
+                formData.append("api_keys", config.apiKeys);
+                formData.append("batch_size", config.batchSize);
+                formData.append("model_name", config.modelName);
+                formData.append("compression_quality", config.quality);
+                try {
+                    const response = await fetch('/api/analyze', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    if (!response.ok) {
+                        const errText = await response.text();
+                        throw new Error(`Backend Error (${response.status}): ${errText}`);
+                    }
+                    const data = await response.json();
+                    if (data.status === 'success') {
+                        // The backend returns a unified list of results
+                        // We map this to the structure expected by the UI renderer
+                        const mappedPairs = data.results.map((res, idx) => ({
+                            id: res.id,
+                            image: { originalFile: { name: res.filename }, dataUrl: res.thumb },
+                            subtitle: { text: res.expected, time: res.srt_time },
+                            status: res.status,
+                            analysis: { detected_text: res.detected, reason: res.reason },
+                            matchNote: res.status === 'match' ? 'Match' : 'Mismatch' // simplified for remote logic
+                        }));
+                        setPairs(mappedPairs);
+                    } else {
+                        throw new Error(data.message || "Unknown server error");
+                    }
+                } catch (err) {
+                    setError(err.message);
+                } finally {
+                    setIsProcessing(false);
+                    setLoadingMessage('');
+                    setActiveWorkers(0);
+                }
+            };
+            const handleDownloadSRT = () => {
+                if (pairs.length === 0) return;
+                let srtContent = "";
+                pairs.forEach((pair) => {
+                    const text = (pair.status === 'mismatch' && pair.analysis?.detected_text)
+                        ? pair.analysis.detected_text
+                        : pair.subtitle.text;
+                    // Note: Backend simplified passing back SRT IDs, ensuring they exist
+                    srtContent += `${pair.id + 1}\n${pair.subtitle.time}\n${text}\n\n`;
+                });
+                const blob = new Blob([srtContent], { type: 'text/plain' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = "corrected_subtitles.srt";
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+            };
+            const handleReset = () => {
+                setSrtFile(null);
+                setMediaFiles([]);
+                setPairs([]);
+                setError(null);
+            };
+            return (
+                <div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
+                    <Header onOpenSettings={() => setShowSettings(true)} activeWorkers={activeWorkers} />
+                    <SettingsModal
+                        isOpen={showSettings}
+                        onClose={() => setShowSettings(false)}
+                        config={config}
+                        setConfig={setConfig}
+                    />
+                    <main className="max-w-6xl mx-auto p-6 space-y-8">
+                        {/* Upload Section */}
+                        <section className="grid md:grid-cols-2 gap-6">
+                            {/* SRT Uploader */}
+                            <div
+                                className={`relative border-2 border-dashed rounded-xl p-8 flex flex-col items-center justify-center transition-all duration-200
+                                    ${isDraggingSrt ? 'border-blue-500 bg-blue-50 scale-[1.02] shadow-xl' : 'border-slate-300 hover:border-blue-400 bg-white'}
+                                    ${srtFile ? 'border-green-400 bg-green-50' : ''}`}
+                                onDragOver={(e) => { e.preventDefault(); setIsDraggingSrt(true); }}
+                                onDragLeave={(e) => { e.preventDefault(); setIsDraggingSrt(false); }}
+                                onDrop={(e) => {
+                                    e.preventDefault(); setIsDraggingSrt(false);
+                                    if(e.dataTransfer.files.length) setSrtFile(e.dataTransfer.files[0]);
+                                }}
+                            >
+                                <input type="file" accept=".srt" onChange={(e) => setSrtFile(e.target.files[0])} className="hidden" id="srt-upload" />
+                                <label htmlFor="srt-upload" className="cursor-pointer flex flex-col items-center text-center w-full z-10">
+                                    <FileText className={`w-12 h-12 mb-4 transition-colors ${srtFile ? 'text-green-600' : 'text-slate-400'}`} />
+                                    <span className="font-semibold text-lg mb-1">
+                                        {srtFile ? srtFile.name : 'Drag & Drop SRT File'}
+                                    </span>
+                                </label>
+                            </div>
+                            {/* Image Uploader */}
+                            <div
+                                className={`relative border-2 border-dashed rounded-xl p-8 flex flex-col items-center justify-center transition-all duration-200
+                                    ${isDraggingImages ? 'border-blue-500 bg-blue-50 scale-[1.02] shadow-xl' : 'border-slate-300 hover:border-blue-400 bg-white'}
+                                    ${mediaFiles.length > 0 ? 'border-green-400 bg-green-50' : ''}`}
+                                onDragOver={(e) => { e.preventDefault(); setIsDraggingImages(true); }}
+                                onDragLeave={(e) => { e.preventDefault(); setIsDraggingImages(false); }}
+                                onDrop={(e) => {
+                                    e.preventDefault(); setIsDraggingImages(false);
+                                    if(e.dataTransfer.files.length) setMediaFiles(e.dataTransfer.files);
+                                }}
+                            >
+                                <input type="file" accept="image/*,.rar,.zip" multiple onChange={(e) => setMediaFiles(e.target.files)} className="hidden" id="img-upload" />
+                                <label htmlFor="img-upload" className="cursor-pointer flex flex-col items-center text-center w-full z-10">
+                                    <div className="flex justify-center space-x-2">
+                                        <LucideImage className={`w-12 h-12 mb-4 transition-colors ${mediaFiles.length > 0 ? 'text-green-600' : 'text-slate-400'}`} />
+                                        <Package className={`w-12 h-12 mb-4 transition-colors ${mediaFiles.length > 0 ? 'text-green-600' : 'text-slate-400'}`} />
+                                    </div>
+                                    <span className="font-semibold text-lg mb-1">
+                                        {mediaFiles.length > 0 ? `${mediaFiles.length} Files Selected` : 'Drag & Drop Images/RAR/ZIP'}
+                                    </span>
+                                </label>
+                            </div>
+                        </section>
+                        {/* Processing & Error State */}
+                        {isProcessing && (
+                            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-center justify-center space-x-3 text-blue-800 animate-pulse">
+                                <Loader2 className="w-5 h-5 animate-spin" />
+                                <span className="font-medium">{loadingMessage}</span>
+                            </div>
+                        )}
+                        {error && (
+                            <div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center space-x-3 text-red-800">
+                                <AlertCircle className="w-5 h-5" />
+                                <span>{error}</span>
+                            </div>
+                        )}
+                        {/* Actions & Results */}
+                        {(pairs.length > 0 || (srtFile && mediaFiles.length > 0 && !isProcessing)) && (
+                            <section className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+                                <div className="p-4 border-b border-slate-200 bg-slate-50 flex items-center justify-between sticky top-0 z-10">
+                                    <div className="flex items-center space-x-4">
+                                        <h2 className="font-bold text-lg">Results ({pairs.length})</h2>
+                                        {pairs.length > 0 && (
+                                            <div className="flex space-x-2 text-sm">
+                                                <span className="px-2 py-1 bg-green-100 text-green-700 rounded-md">
+                                                    {pairs.filter(p => p.status === 'match').length} Match
+                                                </span>
+                                                <span className="px-2 py-1 bg-red-100 text-red-700 rounded-md">
+                                                    {pairs.filter(p => p.status === 'mismatch').length} Mismatch
+                                                </span>
+                                            </div>
+                                        )}
+                                    </div>
+                                    <div className="flex space-x-3">
+                                         {pairs.length > 0 && (
+                                             <button
+                                                onClick={handleDownloadSRT}
+                                                className="flex items-center space-x-2 px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors"
+                                            >
+                                                <Download className="w-4 h-4" />
+                                                <span>Corrected SRT</span>
+                                            </button>
+                                         )}
+                                         <button
+                                            onClick={handleReset}
+                                            className="flex items-center space-x-2 px-4 py-2 text-sm font-medium text-slate-600 hover:text-red-600 transition-colors"
+                                        >
+                                            <Trash2 className="w-4 h-4" />
+                                            <span>Clear All</span>
+                                        </button>
+                                        <button
+                                            onClick={handleAnalyze}
+                                            disabled={isProcessing}
+                                            className={`flex items-center space-x-2 px-6 py-2 rounded-lg font-semibold text-white transition-all shadow-md ${isProcessing ? 'bg-slate-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700 hover:shadow-lg'}`}
+                                        >
+                                            {isProcessing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Play className="w-4 h-4" />}
+                                            <span>{pairs.length > 0 ? 'Re-Analyze' : 'Run Analysis'}</span>
+                                        </button>
+                                    </div>
+                                </div>
+                                <div className="divide-y divide-slate-100">
+                                    {pairs.map((pair, index) => (
+                                        <div key={index} className={`grid grid-cols-12 gap-4 p-4 hover:bg-slate-50 transition-colors ${pair.status === 'mismatch' ? 'bg-red-50/50' : ''}`}>
+                                            <div className="col-span-12 md:col-span-3">
+                                                <div className="relative aspect-video bg-slate-100 rounded-lg overflow-hidden border border-slate-200">
+                                                    {pair.image.dataUrl ? (
+                                                        <img src={pair.image.dataUrl} alt={`Frame ${index}`} className="w-full h-full object-contain" />
+                                                    ) : (
+                                                        <div className="w-full h-full flex items-center justify-center text-xs text-gray-400">No Image</div>
+                                                    )}
+                                                    <div className="absolute top-0 left-0 right-0 bg-black/70 p-1">
+                                                        <div className="text-white text-[10px] truncate font-mono">{pair.image.originalFile?.name}</div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div className="col-span-12 md:col-span-4 flex flex-col justify-center">
+                                                <div className="text-xs font-bold text-slate-400 uppercase mb-1">Expected</div>
+                                                <div className="p-3 bg-slate-100 rounded-lg text-sm font-medium">{pair.subtitle.text}</div>
+                                                <div className="mt-1 text-xs text-slate-400 font-mono flex items-center">
+                                                    <Clock className="w-3 h-3 mr-1"/> {pair.subtitle.time}
+                                                </div>
+                                            </div>
+                                            <div className="col-span-12 md:col-span-5 flex flex-col justify-center">
+                                                <div className="flex justify-between items-center mb-1">
+                                                    <div className="text-xs font-bold text-slate-400 uppercase">Actual (Gemini)</div>
+                                                    <StatusBadge status={pair.status} />
+                                                </div>
+                                                <div className={`p-3 rounded-lg text-sm border min-h-[60px] flex items-center ${
+                                                    pair.status === 'match' ? 'bg-green-50 border-green-200 text-green-800' :
+                                                    pair.status === 'mismatch' ? 'bg-red-50 border-red-200 text-red-800' :
+                                                    'bg-white border-slate-200 text-slate-400 italic'
+                                                }`}>
+                                                    <div>
+                                                        <span className="font-semibold block mb-1">Detected: "{pair.analysis.detected_text}"</span>
+                                                        {pair.analysis.reason && <span className="text-xs opacity-75 block">{pair.analysis.reason}</span>}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </section>
+                        )}
+                        {pairs.length === 0 && !srtFile && (
+                            <div className="text-center py-20 opacity-50">
+                                <div className="w-16 h-16 bg-slate-200 rounded-full flex items-center justify-center mx-auto mb-4">
+                                    <ArrowRightLeft className="w-8 h-8 text-slate-400" />
+                                </div>
+                                <p className="text-lg font-medium text-slate-500">
+                                    Server-Side Processing Mode.<br/>
+                                    Upload files to sort, pair, and analyze remotely.
+                                </p>
+                            </div>
+                        )}
+                    </main>
+                </div>
+            );
+        };
+        const root = ReactDOM.createRoot(document.getElementById('root'));
+        root.render(<App />);
+    </script>
+</body>
 </html>