Update static/index.html

static/index.html

@@ -26,144 +26,141 @@
         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}
+        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>,
+            Zap: ({className}) => <Icon className={className} d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" />,
+            Clock: ({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="10"/><polyline points="12 6 12 12 16 14"/></svg>,
+            Archive: ({className}) => <Icon className={className} d="M21 8v13H3V8M1 3h22v5H1zM10 12h4" />
+        };
 
-        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 IconWrapper = ({ children, className }) => (
+            <div className={className}>{children}</div>
+        );
 
+        // Alias for compatibility
+        const FileText = ({ className }) => <IconWrapper className={className}><Icons.Upload className="w-full h-full" /></IconWrapper>;
+        const LucideImage = ({ className }) => <IconWrapper className={className}><Icons.Archive className="w-full h-full" /></IconWrapper>;
+        const CheckCircle = ({ className }) => <IconWrapper className={className}><Icons.Check className="w-full h-full" /></IconWrapper>;
+        const XCircle = ({ className }) => <IconWrapper className={className}><Icons.X className="w-full h-full" /></IconWrapper>;
+        const Play = ({ className }) => <IconWrapper className={className}><Icons.Zap className="w-full h-full" /></IconWrapper>;
+        const AlertCircle = ({ className }) => <IconWrapper className={className}><Icons.X className="w-full h-full" /></IconWrapper>;
+        const Loader2 = ({ className }) => <IconWrapper className={className}><svg className="animate-spin w-full h-full" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z" opacity=".3"/><path d="M12 4a8 8 0 0 1 7.8 6.6L22 10a10 10 0 0 0-19.6 0L4.2 10.6A8 8 0 0 1 12 4z"/></svg></IconWrapper>;
+        const Trash2 = ({ className }) => <IconWrapper className={className}><Icons.X className="w-full h-full" /></IconWrapper>;
+        const SettingsIcon = ({ className }) => <IconWrapper className={className}><Icons.Settings className="w-full h-full" /></IconWrapper>;
+        const Package = ({ className }) => <IconWrapper className={className}><Icons.Archive className="w-full h-full" /></IconWrapper>;
+        const Download = ({ className }) => <IconWrapper className={className}><Icons.Download className="w-full h-full" /></IconWrapper>;
         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>;
+            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"><Icons.Check 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"><Icons.X 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>
-        );
+        // --- Client Side Parsing Logic for Preview ---
+        const timeStringToMs = (timeStr) => {
+            if (!timeStr) return 0;
+            const [time, ms] = timeStr.replace(',', '.').split('.');
+            const [hours, minutes, seconds] = time.split(':').map(Number);
+            return (hours * 3600000) + (minutes * 60000) + (seconds * 1000) + (Number(ms) || 0);
+        };
+
+        const filenameToMs = (filename) => {
+            const match = filename.match(/(\d{1,2})_(\d{2})_(\d{2})_(\d{3})/);
+            if (!match) return null;
+            const [_, h, m, s, ms] = match;
+            return (Number(h) * 3600000) + (Number(m) * 60000) + (Number(s) * 1000) + Number(ms);
+        };
+
+        const parseSRT = (data) => {
+            if (!data) return [];
+            const normalized = data.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+            
+            // Robust splitting by double newlines (or more) to handle inconsistent files
+            // This regex handles \n\n, \n\n\n, or \n  \n etc.
+            const blocks = normalized.trim().split(/\n\s*\n/);
+            
+            const parsed = [];
+            
+            blocks.forEach(block => {
+                const lines = block.split('\n').map(l => l.trim()).filter(l => l);
+                
+                if (lines.length < 2) return;
+                
+                // Find timestamp line
+                let timeLineIndex = -1;
+                for (let i = 0; i < lines.length; i++) {
+                    if (lines[i].includes('-->')) {
+                        timeLineIndex = i;
+                        break;
+                    }
+                }
+                
+                if (timeLineIndex !== -1) {
+                    const timeLine = lines[timeLineIndex];
+                    // ID is likely the line before timestamp, otherwise guess sequence
+                    const id = timeLineIndex > 0 ? lines[timeLineIndex - 1] : String(parsed.length + 1);
+                    
+                    // Text is everything after timestamp
+                    const textLines = lines.slice(timeLineIndex + 1);
+                    const text = textLines.length > 0 ? textLines.join(' ') : "[BLANK SUBTITLE]";
+                    
+                    const startTimeStr = timeLine.split('-->')[0].trim();
+                    
+                    parsed.push({
+                        id: id,
+                        time: timeLine,
+                        startTimeMs: timeStringToMs(startTimeStr),
+                        text: text
+                    });
+                }
+            });
+            
+            return parsed;
+        };
 
         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="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
+                    <div className="bg-white rounded-xl shadow-2xl max-w-md w-full p-6 animate-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>
+                            <button onClick={onClose} className="text-slate-400 hover:text-slate-600"><Icons.X 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"
-                                />
+                                <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 text-xs font-mono" />
                             </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>
+                                    <label className="block text-sm font-medium text-slate-700 mb-1">Model</label>
+                                    <select value={config.modelName} onChange={(e) => setConfig({...config, modelName: e.target.value})} className="w-full p-2 border border-slate-300 rounded-lg text-sm">
+                                        <option value="gemini-2.0-flash">Gemini 2.0 Flash</option>
+                                        <option value="gemini-1.5-flash">Gemini 1.5 Flash</option>
+                                        <option value="gemini-1.5-pro">Gemini 1.5 Pro</option>
+                                        <option value="gemini-3-flash-preview">Gemini 3 Flash</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"
-                                    />
+                                    <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>
+                                <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 cursor-pointer" />
                             </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>
+                                <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>
@@ -172,53 +169,105 @@
         };
 
         const App = () => {
+            // Configuration
+            const [config, setConfig] = useState(() => ({
+                apiKeys: localStorage.getItem('qc_api_keys') || '',
+                batchSize: Number(localStorage.getItem('qc_batch_size')) || 20,
+                modelName: localStorage.getItem('qc_model') || 'gemini-2.0-flash',
+                quality: Number(localStorage.getItem('qc_quality')) || 0.7
+            }));
+            
+            useEffect(() => {
+                localStorage.setItem('qc_api_keys', config.apiKeys);
+                localStorage.setItem('qc_batch_size', config.batchSize);
+                localStorage.setItem('qc_model', config.modelName);
+                localStorage.setItem('qc_quality', config.quality);
+            }, [config]);
+
+            // File State
             const [srtFile, setSrtFile] = useState(null);
             const [mediaFiles, setMediaFiles] = useState([]);
-            const [pairs, setPairs] = useState([]);
             
+            // Preview State
+            const [previewItems, setPreviewItems] = useState([]);
+            const [archiveMode, setArchiveMode] = useState(false);
+
+            // Process State
             const [isProcessing, setIsProcessing] = useState(false);
-            const [activeWorkers, setActiveWorkers] = useState(0);
+            const [results, setResults] = useState([]);
             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-3-flash-preview',
-                quality: Number(localStorage.getItem('gemini_quality')) || 0.7
-            }));
-            
+
+            // 1. Logic to Generate Preview
             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 generatePreview = async () => {
+                    if (!srtFile) {
+                        setPreviewItems([]);
+                        return;
+                    }
 
-            const [isDraggingSrt, setIsDraggingSrt] = useState(false);
-            const [isDraggingImages, setIsDraggingImages] = useState(false);
+                    // Parse SRT
+                    const text = await srtFile.text();
+                    const parsedSrt = parseSRT(text);
+                    parsedSrt.sort((a, b) => a.startTimeMs - b.startTimeMs);
 
-            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;
-                }
+                    let displayItems = [];
+
+                    // Check for Archives
+                    const hasArchive = Array.from(mediaFiles).some(f => f.name.toLowerCase().endsWith('.rar') || f.name.toLowerCase().endsWith('.zip'));
+                    setArchiveMode(hasArchive);
+
+                    if (hasArchive) {
+                        // Archive Mode: Just show SRT with placeholders
+                        displayItems = parsedSrt.map((srt, idx) => ({
+                            id: idx,
+                            srt: srt,
+                            imgName: "Inside Archive",
+                            imgUrl: null, // No preview for archive content client-side
+                            isArchive: true
+                        }));
+                    } else if (mediaFiles.length > 0) {
+                        // Image Mode: Sort and Pair locally
+                        const images = Array.from(mediaFiles)
+                            .filter(f => /\.(jpg|jpeg|png|webp|bmp)$/i.test(f.name))
+                            .map(f => ({ file: f, time: filenameToMs(f.name) }))
+                            .filter(f => f.time !== null)
+                            .sort((a, b) => a.time - b.time);
 
+                        displayItems = parsedSrt.map((srt, idx) => {
+                            const matchedImg = images[idx];
+                            return {
+                                id: idx,
+                                srt: srt,
+                                imgName: matchedImg ? matchedImg.file.name : "Missing Image",
+                                imgUrl: matchedImg ? URL.createObjectURL(matchedImg.file) : null,
+                                isArchive: false
+                            };
+                        });
+                    } else {
+                        // SRT Only Mode (just waiting for images)
+                        displayItems = parsedSrt.map((srt, idx) => ({
+                            id: idx,
+                            srt: srt,
+                            imgName: "Waiting for media...",
+                            imgUrl: null,
+                            isArchive: false
+                        }));
+                    }
+                    
+                    setPreviewItems(displayItems);
+                };
+
+                generatePreview();
+            }, [srtFile, mediaFiles]);
+
+            // 2. Analyze
+            const handleAnalyze = async () => {
+                if (!config.apiKeys.trim()) { setError("API Key missing."); 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);
+                setResults([]);
 
                 const formData = new FormData();
                 formData.append("srt_file", srtFile);
@@ -231,233 +280,161 @@
                 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 response = await fetch('/api/analyze', { method: 'POST', body: formData });
+                    if (!response.ok) throw new Error(await response.text());
                     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);
+                        setResults(data.results);
+                        // Clear preview to show results
+                        setPreviewItems([]); 
                     } else {
-                        throw new Error(data.message || "Unknown server error");
+                        throw new Error(data.message);
                     }
                 } 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`;
+            // 3. Download Logic
+            const handleDownload = () => {
+                let content = "";
+                results.forEach(r => {
+                    const text = (r.status === 'mismatch' && r.detected) ? r.detected : r.expected;
+                    content += `${r.srt_id}\n${r.srt_time}\n${text}\n\n`;
                 });
-                const blob = new Blob([srtContent], { type: 'text/plain' });
-                const url = URL.createObjectURL(blob);
+                const url = URL.createObjectURL(new Blob([content], { type: 'text/plain' }));
                 const a = document.createElement('a');
                 a.href = url;
-                a.download = "corrected_subtitles.srt";
+                a.download = "corrected.srt";
                 document.body.appendChild(a);
                 a.click();
                 document.body.removeChild(a);
-                URL.revokeObjectURL(url);
             };
 
             const handleReset = () => {
                 setSrtFile(null);
                 setMediaFiles([]);
-                setPairs([]);
+                setPreviewItems([]);
+                setResults([]);
                 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}
-                    />
+                <div className="min-h-screen bg-slate-50 text-slate-900 font-sans pb-20">
+                    <Header onOpenSettings={() => setShowSettings(true)} activeWorkers={isProcessing ? config.apiKeys.split('\n').length : 0} />
+                    <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>
+                    <main className="max-w-6xl mx-auto p-6 space-y-6">
+                        
+                        {/* Upload Area */}
+                        <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 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 relative">
+                                <input type="file" accept=".srt" onChange={e => setSrtFile(e.target.files[0])} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
+                                <div className="pointer-events-none">
+                                    <div className="flex justify-center mb-2"><Icons.Upload className={`w-8 h-8 ${srtFile ? 'text-green-500' : 'text-slate-400'}`} /></div>
+                                    <div className="font-semibold text-sm">{srtFile ? srtFile.name : "Upload SRT File"}</div>
+                                </div>
                             </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 className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:bg-slate-50 transition-colors relative">
+                                <input type="file" accept=".rar,.zip,image/*" multiple onChange={e => setMediaFiles(e.target.files)} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
+                                <div className="pointer-events-none">
+                                    <div className="flex justify-center mb-2"><Icons.Upload className={`w-8 h-8 ${mediaFiles.length > 0 ? 'text-green-500' : 'text-slate-400'}`} /></div>
+                                    <div className="font-semibold text-sm">{mediaFiles.length > 0 ? `${mediaFiles.length} Files` : "Upload Media (Img/RAR/ZIP)"}</div>
+                                </div>
                             </div>
-                        )}
+                        </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>
-                        )}
+                        {/* Error Banner */}
+                        {error && <div className="bg-red-50 text-red-700 p-4 rounded-lg border border-red-200 flex items-center gap-2"><Icons.X className="w-5 h-5"/>{error}</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>
+                        {/* Action Bar (Only shows when content is loaded) */}
+                        {(previewItems.length > 0 || results.length > 0) && (
+                            <div className="flex justify-between items-center bg-white p-4 rounded-xl shadow-sm border border-slate-200 sticky top-4 z-40">
+                                <div className="font-bold text-lg">
+                                    {results.length > 0 ? "Analysis Results" : "Preview Alignment"}
+                                </div>
+                                <div className="flex gap-3">
+                                    <button onClick={handleReset} className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg text-sm font-medium">Reset</button>
+                                    {results.length > 0 ? (
+                                        <button onClick={handleDownload} className="flex items-center gap-2 px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-bold shadow-sm transition-all">
+                                            <Icons.Download className="w-4 h-4" /> Download SRT
                                         </button>
+                                    ) : (
                                         <button 
-                                            onClick={handleAnalyze}
+                                            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'}`}
+                                            className={`flex items-center gap-2 px-6 py-2 rounded-lg font-bold text-white shadow-sm transition-all ${isProcessing ? 'bg-slate-400' : 'bg-green-600 hover:bg-green-700'}`}
                                         >
-                                            {isProcessing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Play className="w-4 h-4" />}
-                                            <span>{pairs.length > 0 ? 'Re-Analyze' : 'Run Analysis'}</span>
+                                            {isProcessing ? <Loader2 className="w-4 h-4 animate-spin"/> : <Icons.Zap className="w-4 h-4"/>}
+                                            {isProcessing ? "Analyzing..." : "Analyze with Gemini"}
                                         </button>
-                                    </div>
+                                    )}
                                 </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>
+                        {/* Preview List (Before Analysis) */}
+                        {previewItems.length > 0 && results.length === 0 && (
+                            <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden divide-y divide-slate-100">
+                                {archiveMode && <div className="p-3 bg-amber-50 text-amber-800 text-sm text-center border-b border-amber-100">📦 Archive mode active. Images will be extracted and paired on server.</div>}
+                                {previewItems.map((item) => (
+                                    <div key={item.id} className="grid grid-cols-12 gap-4 p-4 hover:bg-slate-50 transition-colors group">
+                                        <div className="col-span-3">
+                                            <div className="relative aspect-video bg-slate-100 rounded-lg overflow-hidden border border-slate-200">
+                                                {item.imgUrl ? (
+                                                    <img src={item.imgUrl} className="w-full h-full object-contain" />
+                                                ) : (
+                                                    <div className="w-full h-full flex items-center justify-center text-slate-400 text-xs flex-col">
+                                                        {item.isArchive ? <Icons.Archive className="w-6 h-6 mb-1"/> : <Icons.X className="w-6 h-6 mb-1"/>}
+                                                        {item.isArchive ? "Server Side" : "No Image"}
                                                     </div>
-                                                </div>
+                                                )}
+                                                <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white text-[10px] p-1 truncate font-mono">{item.imgName}</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-9 flex flex-col justify-center">
+                                            <div className="flex items-center justify-between mb-1">
+                                                <span className="text-xs font-bold text-slate-400 uppercase">Line #{item.id}</span>
+                                                <span className="text-xs font-mono text-slate-500 bg-slate-100 px-2 py-0.5 rounded">{item.srt.time.split('-->')[0].trim()}</span>
                                             </div>
+                                            <div className="text-sm font-medium text-slate-800 p-2 bg-slate-50 rounded border border-slate-100 group-hover:bg-white">{item.srt.text}</div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
 
-                                            <div className="col-span-12 md:col-span-5 flex flex-col justify-center">
+                        {/* Results List (After Analysis) */}
+                        {results.length > 0 && (
+                            <div className="space-y-4">
+                                {results.map((res, idx) => (
+                                    <div key={idx} className={`bg-white rounded-xl shadow-sm border p-4 flex gap-4 ${res.status === 'mismatch' ? 'border-red-200 bg-red-50' : 'border-slate-200'}`}>
+                                        <div className="w-40 bg-slate-100 rounded-lg overflow-hidden flex-shrink-0 border border-slate-200">
+                                            <img src={res.thumb} className="w-full h-full object-cover" />
+                                        </div>
+                                        <div className="flex-1 grid md:grid-cols-2 gap-6">
+                                            <div>
+                                                <div className="text-xs font-bold text-slate-400 uppercase mb-1">Original Text</div>
+                                                <div className="p-3 bg-slate-100/50 rounded-lg text-sm">{res.expected}</div>
+                                                <div className="mt-2 text-xs text-slate-400 font-mono">{res.filename}</div>
+                                            </div>
+                                            <div>
                                                 <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} />
+                                                    <span className="text-xs font-bold text-slate-400 uppercase">AI Verified</span>
+                                                    <StatusBadge status={res.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 className={`p-3 rounded-lg text-sm border ${res.status === 'mismatch' ? 'bg-white border-red-200 text-red-700' : 'bg-green-50 border-green-200 text-green-800'}`}>
+                                                    {res.detected || "No Text Detected"}
                                                 </div>
+                                                {res.reason && <div className="text-xs text-slate-500 mt-2 italic">{res.reason}</div>}
                                             </div>
                                         </div>
-                                    ))}
-                                </div>
-                            </section>
+                                    </div>
+                                ))}
+                            </div>
                         )}
 
                         {pairs.length === 0 && !srtFile && (