Update app_enhanced.py

app_enhanced.py

@@ -6,74 +6,79 @@ import shutil
 import json
 import traceback
 from concurrent.futures import ThreadPoolExecutor
+from flask import Flask, render_template, request, jsonify, send_from_directory, send_file, session
 
-# --- ESSENTIAL IMPORTS ---
-# These must be at the top. If they fail, add them to requirements.txt
+# --- 1. CORE DEPENDENCY CHECKS ---
 try:
     import cv2
     import numpy as np
     from PIL import Image
     import srt
-    from flask import Flask, render_template, request, jsonify, send_from_directory, send_file, session
 except ImportError as e:
-    print(f"❌ Critical Import Error: {e}")
-    print("Please ensure 'flask', 'opencv-python-headless', 'numpy', 'pillow', and 'srt' are in requirements.txt")
-    exit(1)
+    print(f"❌ CRITICAL ERROR: Missing python library. {e}")
+    # We define dummy variables to let the app start, but generation will fail with a clear message
+    cv2 = None
+    np = None
+    Image = None
+    srt = None
+
+# --- 2. BACKEND MODULE IMPORT WITH FALLBACKS ---
+# This ensures the app doesn't crash if a specific backend file is missing
+def dummy_function(*args, **kwargs):
+    print("⚠️ Warning: Function not loaded correctly.")
+    return 0, 0, None, None
 
-# --- ROBUST IMPORTS WITH FALLBACKS ---
 try:
     from backend.keyframes.keyframes import black_bar_crop
-    print("✅ Black bar cropping module loaded.")
-except Exception as e:
-    print(f"⚠️ Could not load black_bar_crop: {e}. Cropping will be SKIPPED.")
-    def black_bar_crop():
-        return 0, 0, None, None
+except Exception:
+    black_bar_crop = dummy_function
 
 try:
     from backend.simple_color_enhancer import SimpleColorEnhancer
-    print("✅ SimpleColorEnhancer loaded.")
-except Exception as e:
-    print(f"⚠️ Could not load SimpleColorEnhancer: {e}. This feature will be SKIPPED.")
+except Exception:
     class SimpleColorEnhancer:
-        def enhance_batch(self, *args, **kwargs): pass
-        def enhance_single(self, *args, **kwargs): pass
+        def enhance_single(self, *args): pass
 
 try:
     from backend.quality_color_enhancer import QualityColorEnhancer
-    print("✅ QualityColorEnhancer loaded.")
-except Exception as e:
-    print(f"⚠️ Could not load QualityColorEnhancer: {e}. This feature will be SKIPPED.")
+except Exception:
     class QualityColorEnhancer:
-        def batch_enhance(self, *args, **kwargs): pass
-        def enhance_single(self, *args, **kwargs): pass
+        def enhance_single(self, *args): pass
 
 try:
     from backend.class_def import bubble, panel, Page
-    print("✅ Core class definitions (bubble, panel, Page) loaded.")
-except Exception as e:
-    print(f"⚠️ CRITICAL: Could not load core class definitions: {e}. Using fallback definitions.")
+except Exception:
     def bubble(**kwargs): return kwargs
     def panel(**kwargs): return kwargs
     class Page:
-        def __init__(self, panels, bubbles):
-            self.panels = panels
-            self.bubbles = bubbles
+        def __init__(self, panels, bubbles): self.panels, self.bubbles = panels, bubbles
 
 try:
-    from backend.ai_enhanced_core import image_processor, comic_styler, face_detector, layout_optimizer
+    from backend.ai_enhanced_core import image_processor, face_detector
     from backend.ai_bubble_placement import ai_bubble_placer
     from backend.subtitles.subs_real import get_real_subtitles
-    from backend.keyframes.keyframes_simple import generate_keyframes_simple
-    print("✅ Core utility modules loaded.")
 except Exception as e:
-    print(f"⚠️ Could not load a core utility module: {e}")
+    print(f"⚠️ Backend Import Error: {e}")
+    # Define dummy get_real_subtitles to prevent NameError
+    def get_real_subtitles(video_path):
+        raise Exception("Subtitle module failed to load. Check backend/subtitles/subs_real.py")
+    
+    # Define dummy face detector
+    class DummyDetector:
+        def detect_faces(self, p): return []
+        def get_lip_position(self, p, f): return -1, -1
+    face_detector = DummyDetector()
+    
+    # Define dummy bubble placer
+    class DummyPlacer:
+        def place_bubble_ai(self, p, l): return 50, 20
+    ai_bubble_placer = DummyPlacer()
 
 # --- FLASK APP SETUP ---
 app = Flask(__name__)
-app.secret_key = "HUGGINGFACE_SECRET_KEY_XYZ" # Necessary for sessions
-BASE_USER_DIR = "userdata" # Persistent storage location
+app.secret_key = "HF_SPACE_SECRET_KEY_555"
+BASE_USER_DIR = "userdata"
 
-# --- MERGED HTML: UPLOAD UI + EDITOR UI + EXPORT FIX + CSS FIX ---
 INDEX_HTML = '''
 <!DOCTYPE html>
 <html lang="en">
@@ -81,605 +86,161 @@ INDEX_HTML = '''
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Movie to Comic Generator</title>
-    <!-- EXPORT LIBRARY (Supports CSS Masks/Gradients) -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.min.js"></script>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&family=Gloria+Hallelujah&family=Lato&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&display=swap" rel="stylesheet">
     <style>
-        /* --- GLOBAL & UPLOAD STYLES --- */
-        body {
-            background-color: #fdf6e3;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            color: #3d3d3d;
-            margin: 0;
-            min-height: 100vh;
-        }
-        
-        #upload-container {
-            display: flex; justify-content: center; align-items: center;
-            min-height: 100vh; width: 100%;
-        }
-
-        .upload-box {
-            max-width: 500px; width: 100%; padding: 40px;
-            background-color: #ffffff; border-radius: 12px;
-            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); text-align: center;
-        }
-        
-        #editor-container {
-            display: none; /* Hidden by default */
-            padding: 20px; width: 100%; box-sizing: border-box;
-        }
-
-        h1 { color: #2c3e50; margin-bottom: 30px; font-weight: 600; }
-        .file-input { display: none; }
-        .file-label {
-            display: block; padding: 15px 25px; background-color: #2c3e50; color: white;
-            border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 500;
-            transition: background-color 0.3s ease, transform 0.2s ease;
-        }
-        .file-label:hover { background-color: #34495e; transform: translateY(-2px); }
-        #file-name { display: block; margin-top: 15px; font-style: italic; color: #7f8c8d; }
-        .submit-btn {
-            width: 100%; padding: 15px; border: none; border-radius: 8px;
-            background-color: #e67e22; color: white; font-size: 18px; font-weight: bold;
-            cursor: pointer; transition: background-color 0.3s ease; margin-top: 20px;
-        }
-        .submit-btn:hover { background-color: #d35400; }
+        body { background-color: #fdf6e3; font-family: system-ui, sans-serif; color: #3d3d3d; margin: 0; min-height: 100vh; }
+        #upload-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; width: 100%; }
+        .upload-box { max-width: 500px; width: 100%; padding: 40px; background: white; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); text-align: center; }
+        #editor-container { display: none; padding: 20px; width: 100%; box-sizing: border-box; }
+        .file-label { display: block; padding: 15px; background: #2c3e50; color: white; border-radius: 8px; cursor: pointer; margin-bottom: 10px; }
+        .submit-btn { width: 100%; padding: 15px; background: #e67e22; color: white; border: none; border-radius: 8px; font-size: 18px; cursor: pointer; font-weight: bold; }
+        .loader { width: 120px; height: 20px; background: radial-gradient(circle 10px, #e67e22 100%, transparent 0); background-size: 20px 20px; animation: ball 1s infinite linear; margin: 20px auto; }
+        @keyframes ball { 0%{background-position:0 50%} 100%{background-position:100px 50%} }
         
-        .loading-view { display: none; flex-direction: column; align-items: center; justify-content: center; }
-        .loader {
-            width: 120px; height: 20px; border-radius: 20px;
-            background: radial-gradient(circle 10px, #e67e22 100%, transparent 0),
-                        radial-gradient(circle 10px, #e67e22 100%, transparent 0),
-                        radial-gradient(circle 10px, #e67e22 100%, transparent 0);
-            background-size: 20px 20px; background-position: 0px 50%, 50px 50%, 100px 50%;
-            background-repeat: no-repeat; animation:-ball 2s infinite linear;
-        }
-        @keyframes -ball {
-            0%   {background-position: 0px 50%   ,50px 50%  ,100px 50%}
-            16%  {background-position: 0px 0%    ,50px 50%  ,100px 50%}
-            33%  {background-position: 0px 100%  ,50px 0%    ,100px 50%}
-            50%  {background-position: 0px 50%   ,50px 100%  ,100px 0%}
-            66%  {background-position: 0px 50%   ,50px 50%   ,100px 100%}
-            83%  {background-position: 0px 50%   ,50px 50%   ,100px 50%}
-            100% {background-position: 0px 50%   ,50px 50%   ,100px 50%}
-        }
-        #status-text { margin-top: 25px; color: #34495e; font-weight: 500; font-size: 18px; }
-
-        /* --- COMIC EDITOR STYLES --- */
-        .comic-container-wrapper { max-width: 1200px; margin: 0 auto; }
-        .comic-page { background: white; width: 600px; height: 400px; box-shadow: 0 0 10px rgba(0,0,0,0.1); box-sizing: content-box; position: relative; overflow: hidden; border: 1px solid #333; padding: 10px; }
-        .comic-grid { display: grid; grid-template-columns: 285px 285px; grid-template-rows: 185px 185px; gap: 10px; width: 100%; height: 100%; }
-        .page-wrapper { margin: 30px auto; width: 622px; display: flex; flex-direction: column; align-items: center; }
-        .page-title { text-align: center; color: #333; margin-bottom: 10px; font-size: 18px; font-weight: bold; }
+        /* COMIC STYLES */
+        .comic-page { background: white; width: 600px; height: 400px; position: relative; overflow: hidden; border: 2px solid #000; margin: 0 auto 20px; }
+        .comic-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; }
+        .panel { position: relative; overflow: hidden; border: 2px solid #000; background: #eee; }
+        .panel img { width: 100%; height: 100%; object-fit: cover; }
         
-        .panel { position: relative; overflow: hidden; width: 100%; height: 100%; box-sizing: border-box; cursor: pointer; border: 1px solid #333; }
-        .panel.selected { outline: 3px solid #2196F3; outline-offset: -3px; }
-        .panel img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.1s ease-out; }
-        .panel img.pannable { cursor: grab; }
-        .panel img.panning { cursor: grabbing; }
-        
-        .speech-bubble { 
-            position: absolute; display: flex; justify-content: center; align-items: center; width: 150px; height: 80px; 
-            min-width: 50px; min-height: 30px; box-sizing: border-box; z-index: 10; cursor: move; overflow: visible; 
-            font-size: 13px; font-weight: bold; text-align: center; font-family: 'Comic Neue', cursive; 
-        }
-        .bubble-text { padding: 0.8em; word-wrap: break-word; position: relative; z-index: 5; }
-        .speech-bubble.selected { outline: 2px dashed #4CAF50; }
-        .speech-bubble textarea { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #4CAF50; background: rgba(255,255,255,0.95); font: inherit; text-align: center; resize: none; padding: 8px; z-index: 102; }
-        
-        /* <<< EXACT CSS WITH GRADIENT EXPORT FIX >>> */
+        /* SPEECH BUBBLE - EXPORT SAFE GRADIENT */
         .speech-bubble.speech {
             --b: 3em; --h: 1.8em; --t: 0.6; --p: var(--tail-pos, 50%); --r: 1.2em; 
             --c: var(--bubble-fill-color, #4ECDC4);
             background: var(--c); color: var(--bubble-text-color, #fff); padding: 1em; position: absolute;
             border-radius: var(--r) var(--r) min(var(--r), calc(100% - var(--p) - (1 - var(--t)) * var(--b) / 2)) min(var(--r), calc(var(--p) - (1 - var(--t)) * var(--b) / 2)) / var(--r);
+            font-family: 'Comic Neue', cursive; font-weight: bold; font-size: 13px; text-align: center;
+            min-width: 60px; min-height: 40px; display: flex; align-items: center; justify-content: center;
+            cursor: move; z-index: 10;
         }
         .speech-bubble.speech:before {
             content: ""; position: absolute; width: var(--b); height: var(--h);
             background: radial-gradient(100% 100% at 100% 0, transparent calc(var(--t) * 100% - 1px), var(--c) calc(var(--t) * 100%));
             border-bottom-left-radius: 100%; pointer-events: none; z-index: 1;
         }
-        /* Directional Logic */
         .speech-bubble.speech.tail-bottom:before { top: 99%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); }
-        .speech-bubble.speech.tail-top { border-radius: min(var(--r), calc(var(--p) - (1 - var(--t)) * var(--b) / 2)) min(var(--r), calc(100% - var(--p) - (1 - var(--t)) * var(--b) / 2)) var(--r) var(--r) / var(--r); }
-        .speech-bubble.speech.tail-top:before { bottom: 99%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: scaleY(-1); }
-        .speech-bubble.speech.tail-left { border-radius: var(--r); }
-        .speech-bubble.speech.tail-left:before { right: 99%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: rotate(90deg); transform-origin: top right; }
-        .speech-bubble.speech.tail-right { border-radius: var(--r); }
-        .speech-bubble.speech.tail-right:before { left: 99%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: rotate(-90deg); transform-origin: top left; }
-
-        .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
-        .speech-bubble.thought::after { display: none; }
-        .thought-dot { position: absolute; background-color: white; border: 2px solid #555; border-radius: 50%; z-index: -1; }
-        .thought-dot-1 { width: 20px; height: 20px; bottom: -20px; left: 15px; }
-        .thought-dot-2 { width: 12px; height: 12px; bottom: -32px; left: 5px; }
-        .speech-bubble.flipped .thought-dot-1 { left: auto; right: 15px; }
-        .speech-bubble.flipped .thought-dot-2 { left: auto; right: 5px; }
-        .speech-bubble.flipped-vertical .thought-dot-1 { bottom: auto; top: -20px; }
-        .speech-bubble.flipped-vertical .thought-dot-2 { bottom: auto; top: -32px; }
-
-        .resize-handle { position: absolute; width: 10px; height: 10px; background: #2196F3; border: 1px solid white; border-radius: 50%; display: none; z-index: 11; }
-        .speech-bubble.selected .resize-handle { display: block; }
-        .resize-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
-        .resize-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
-        .resize-handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
-        .resize-handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
         
-        .edit-controls { position: fixed; bottom: 20px; right: 20px; background: rgba(44, 62, 80, 0.9); color: white; padding: 10px 15px; border-radius: 8px; font-size: 13px; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.3); width: 220px; }
-        .edit-controls h4 { margin: 0 0 10px 0; color: #26a69a; text-align: center; }
-        .edit-controls button, .edit-controls select, .edit-controls input { margin-top: 5px; padding: 6px 8px; font-size: 12px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; width: 100%; box-sizing: border-box; }
-        .edit-controls .control-group { margin-top: 10px; border-top: 1px solid #555; padding-top: 10px; }
-        .edit-controls .reset-button { background-color: #e74c3c; }
-        .edit-controls .action-button { background-color: #4CAF50; }
-        .edit-controls .secondary-button { background-color: #f39c12; }
-        .button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
-        .zoom-controls { display: grid; grid-template-columns: auto 1fr; gap: 5px; align-items: center;}
-        .timestamp-controls { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
-        .timestamp-controls input { color: #333; font-weight: normal; }
-        .color-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
-        .color-picker-grid div { text-align: center; }
-        .color-picker-grid label { font-size: 11px; }
-        .color-picker-grid input[type="color"] { height: 25px; padding: 2px; }
-        .slider-container { display: flex; align-items: center; gap: 5px; margin-top: 5px;}
-        .slider-container label { font-size: 11px; min-width: 50px;}
+        .speech-bubble.selected { outline: 2px dashed #333; }
+        .edit-controls { position: fixed; bottom: 20px; right: 20px; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); width: 200px; }
+        .edit-controls button { width: 100%; margin-top: 5px; padding: 8px; cursor: pointer; }
     </style>
 </head>
 <body>
-    <!-- UPLOAD VIEW -->
     <div id="upload-container">
-        <div class="upload-box" id="upload-view">
-            <h1>🎬 Movie to Comic Generator</h1>
-            <form id="upload-form">
-                <label for="file-upload" class="file-label">Choose Video File</label>
-                <input id="file-upload" class="file-input" type="file" name="file" onchange="updateFileName(this)">
-                <span id="file-name">No file selected</span>
-                <button class="submit-btn" type="submit">Generate Comic</button>
-            </form>
-        </div>
-        <div class="loading-view" id="loading-view">
-            <div class="loader"></div>
-            <p id="status-text">Starting...</p>
+        <div class="upload-box">
+            <h1>🎬 Comic Generator</h1>
+            <input type="file" id="file-upload" class="file-input" onchange="document.getElementById('fname').innerText=this.files[0].name">
+            <label for="file-upload" class="file-label">Choose Video</label>
+            <span id="fname">No file</span>
+            <button class="submit-btn" onclick="upload()">Generate</button>
+            <div id="loading" style="display:none;">
+                <div class="loader"></div>
+                <p id="status">Uploading...</p>
+            </div>
         </div>
     </div>
 
-    <!-- EDITOR VIEW (Initially Hidden) -->
     <div id="editor-container">
-        <div class="comic-container-wrapper">
-            <h1 class="comic-title" style="text-align:center;">🎬 Generated Comic</h1>
-            <div id="comic-pages"><div class="loading">Loading comic...</div></div>
-        </div>
-        
-        <input type="file" id="image-uploader" style="display: none;" accept="image/*">
-        
+        <div id="comic-pages"></div>
         <div class="edit-controls">
-            <h4>✏️ Interactive Editor</h4>
-            <div class="control-group">
-                <label>Bubble Tools:</label>
-                <select id="bubble-type-select" onchange="changeBubbleType(this.value)" disabled>
-                    <option value="speech">Speech</option><option value="thought">Thought</option>
-                </select>
-                <div class="color-picker-grid">
-                    <div><label>Text</label><input type="color" id="bubble-text-color" value="#ffffff" disabled></div>
-                    <div><label>Fill</label><input type="color" id="bubble-fill-color" value="#4ECDC4" disabled></div>
-                </div>
-                <button onclick="addBubbleToPanel()" class="action-button">💬 Add Bubble</button>
-                <button onclick="deleteBubble()" class="reset-button">🗑️ Delete Bubble</button>
-            </div>
-            <div class="control-group" id="tail-controls" style="display: none;">
-                <label>Tail Adjustment</label>
-                <button onclick="rotateBubbleTail()" class="secondary-button">🔄 Rotate Side</button>
-                <div class="slider-container">
-                    <label>Pos:</label>
-                    <input type="range" id="tail-slider" min="10" max="90" value="50" oninput="slideTail(this.value)">
-                </div>
-            </div>
-            <div class="control-group">
-                <label>Panel Tools (Select Panel):</label>
-                <button onclick="replacePanelImage()" class="action-button">🖼️ Replace Image</button>
-                <div class="button-grid">
-                    <button onclick="adjustFrame('backward')" class="secondary-button">⬅️ Prev</button>
-                    <button onclick="adjustFrame('forward')" class="action-button">Next ➡️</button>
-                </div>
-                <div class="timestamp-controls">
-                     <input type="text" id="timestamp-input" placeholder="mm:ss or secs">
-                     <button onclick="gotoTimestamp()" class="action-button">Go</button>
-                </div>
-            </div>
-            <div class="control-group">
-                <label>Zoom & Pan (Select Panel):</label>
-                <div class="zoom-controls">
-                    <button onclick="resetPanelTransform()" class="secondary-button" style="padding: 4px 6px;">Reset</button>
-                    <input type="range" id="zoom-slider" min="100" max="300" value="100" step="5" disabled>
-                </div>
-            </div>
-            <div class="control-group">
-                <button onclick="exportPagesToPNG()" class="action-button" style="background-color: #2196F3;">🖨️ Export Pages</button>
-            </div>
+            <h4>Editor</h4>
+            <button onclick="exportToPng()">💾 Export PNG</button>
         </div>
     </div>
 
     <script>
-        let statusInterval;
-        let currentlyEditing = null, draggedBubble = null, offset = {x: 0, y: 0};
-        let currentlySelectedBubble = null;
-        let currentlySelectedPanel = null;
-        let isPanning = false, panStartX, panStartY, panStartTranslateX, panStartTranslateY;
-        let isResizing = false, resizeHandle, originalWidth, originalHeight, originalX, originalY, originalMouseX, originalMouseY;
-
-        function updateFileName(input) {
-            const fileNameSpan = document.getElementById('file-name');
-            if (input.files && input.files.length > 0) {
-                fileNameSpan.textContent = input.files[0].name;
-            } else {
-                fileNameSpan.textContent = 'No file selected';
-            }
+        let interval;
+        async function upload() {
+            const file = document.getElementById('file-upload').files[0];
+            if(!file) return alert("Select file");
+            
+            const fd = new FormData();
+            fd.append('file', file);
+            
+            document.querySelector('.upload-box').style.display='none';
+            document.getElementById('loading').style.display='block';
+            
+            const res = await fetch('/uploader', {method:'POST', body:fd});
+            if(res.ok) interval = setInterval(checkStatus, 2000);
+            else { alert("Upload failed"); location.reload(); }
         }
 
         async function checkStatus() {
-            try {
-                const response = await fetch('/status');
-                const data = await response.json();
-                const statusText = document.getElementById('status-text');
-                statusText.textContent = data.message;
-                
-                if (data.progress >= 100) {
-                    clearInterval(statusInterval);
-                    // SWITCH TO EDITOR VIEW
-                    document.getElementById('upload-container').style.display = 'none';
-                    document.getElementById('editor-container').style.display = 'block';
-                    loadComicData(); 
-                } else if (data.progress < 0) {
-                    clearInterval(statusInterval);
-                    statusText.textContent = "An error occurred. Check server logs.";
-                    statusText.style.color = '#e74c3c';
-                    document.querySelector('.loader').style.display = 'none';
-                }
-            } catch (error) {
-                console.error("Error fetching status:", error);
-            }
-        }
-
-        document.getElementById('upload-form').addEventListener('submit', async function(event) {
-            event.preventDefault();
-            const fileInput = document.getElementById('file-upload');
-            if (!fileInput.files || fileInput.files.length === 0) {
-                alert("Please select a video file first.");
-                return;
-            }
-            document.getElementById('upload-view').style.display = 'none';
-            document.getElementById('loading-view').style.display = 'flex';
-            const formData = new FormData();
-            formData.append('file', fileInput.files[0]);
-            try {
-                const response = await fetch('/uploader', { method: 'POST', body: formData });
-                if (!response.ok) throw new Error('Upload failed!');
-                statusInterval = setInterval(checkStatus, 2000);
-            } catch (error) {
-                console.error("Upload error:", error);
-                document.getElementById('status-text').textContent = "Failed to start generation.";
+            const res = await fetch('/status');
+            const data = await res.json();
+            document.getElementById('status').innerText = data.message;
+            
+            if(data.progress >= 100) {
+                clearInterval(interval);
+                document.getElementById('upload-container').style.display='none';
+                document.getElementById('editor-container').style.display='block';
+                loadComic();
+            } else if(data.progress < 0) {
+                clearInterval(interval);
+                alert("Error: " + data.message);
+                location.reload();
             }
-        });
-
-        // --- EDITOR LOGIC ---
-        function loadComicData() {
-            fetch('output/pages.json')
-                .then(res => res.ok ? res.json() : Promise.reject(new Error('Failed')))
-                .then(data => { renderComic(data); initializeEditor(); })
-                .catch(err => { document.getElementById('comic-pages').innerHTML = `<div class="loading">Error: ${err.message}</div>`; });
         }
 
-        function renderComic(data) {
-            const container = document.getElementById('comic-pages');
-            container.innerHTML = '';
-            data.forEach((pageData, pageIndex) => {
-                const pageWrapper = document.createElement('div');
-                pageWrapper.className = 'page-wrapper';
-                const pageTitleEl = document.createElement('h2');
-                pageTitleEl.textContent = `Page ${pageIndex + 1}`;
-                pageWrapper.appendChild(pageTitleEl);
-                const pageDiv = document.createElement('div');
-                pageDiv.className = 'comic-page';
-                const grid = document.createElement('div');
-                grid.className = 'comic-grid';
-                pageData.panels.forEach((panelData, panelIndex) => {
-                    const panelDiv = document.createElement('div');
-                    panelDiv.className = 'panel';
-                    const img = document.createElement('img');
-                    img.src = 'frames/' + panelData.image; 
-                    panelDiv.appendChild(img);
-                    if (pageData.bubbles && pageData.bubbles[panelIndex] && pageData.bubbles[panelIndex].dialog) {
-                        const bubbleDiv = createBubbleElement({
-                            id: `initial-${pageIndex}-${panelIndex}`,
-                            text: pageData.bubbles[panelIndex].dialog || '',
-                            left: `${pageData.bubbles[panelIndex].bubble_offset_x ?? 50}px`,
-                            top: `${pageData.bubbles[panelIndex].bubble_offset_y ?? 20}px`,
-                        });
-                        panelDiv.appendChild(bubbleDiv);
-                    }
-                    grid.appendChild(panelDiv);
+        function loadComic() {
+            fetch('output/pages.json').then(r=>r.json()).then(data => {
+                const c = document.getElementById('comic-pages');
+                data.forEach((p, i) => {
+                    const div = document.createElement('div');
+                    div.className = 'comic-page';
+                    div.id = 'page-'+i;
+                    const grid = document.createElement('div');
+                    grid.className = 'comic-grid';
+                    
+                    p.panels.forEach((pan, j) => {
+                        const pDiv = document.createElement('div');
+                        pDiv.className = 'panel';
+                        const img = document.createElement('img');
+                        img.src = 'frames/' + pan.image;
+                        pDiv.appendChild(img);
+                        
+                        // Add bubble
+                        if(p.bubbles && p.bubbles[j] && p.bubbles[j].dialog) {
+                            const b = document.createElement('div');
+                            b.className = 'speech-bubble speech tail-bottom';
+                            b.innerText = p.bubbles[j].dialog;
+                            // Safe defaults
+                            b.style.left = (p.bubbles[j].bubble_offset_x || 50) + 'px';
+                            b.style.top = (p.bubbles[j].bubble_offset_y || 20) + 'px';
+                            pDiv.appendChild(b);
+                            makeInteractive(b);
+                        }
+                        grid.appendChild(pDiv);
+                    });
+                    div.appendChild(grid);
+                    c.appendChild(div);
                 });
-                pageDiv.appendChild(grid);
-                pageWrapper.appendChild(pageDiv);
-                container.appendChild(pageWrapper);
             });
         }
 
-        function createBubbleElement(data) {
-            const bubbleDiv = document.createElement('div');
-            bubbleDiv.dataset.id = data.id;
-            const textSpan = document.createElement('span');
-            textSpan.className = 'bubble-text';
-            textSpan.textContent = data.text;
-            bubbleDiv.appendChild(textSpan);
-            bubbleDiv.style.left = data.left;
-            bubbleDiv.style.top = data.top;
-            applyBubbleType(bubbleDiv, 'speech');
-            initializeBubbleEvents(bubbleDiv);
-            return bubbleDiv;
-        }
-
-        function applyBubbleType(bubble, type) {
-            bubble.className = 'speech-bubble ' + type;
-            if(type === 'speech') bubble.classList.add('tail-bottom');
-            if(type === 'thought') {
-                bubble.querySelectorAll('.thought-dot').forEach(e=>e.remove());
-                for(let i=1; i<=2; i++) {
-                    const d = document.createElement('div');
-                    d.className = `thought-dot thought-dot-${i}`;
-                    bubble.appendChild(d);
+        function makeInteractive(el) {
+            el.onmousedown = function(e) {
+                e.stopPropagation();
+                // Simple drag logic
+                const offX = e.clientX - el.offsetLeft;
+                const offY = e.clientY - el.offsetTop;
+                document.onmousemove = function(ev) {
+                    el.style.left = (ev.clientX - offX) + 'px';
+                    el.style.top = (ev.clientY - offY) + 'px';
                 }
-            }
-            bubble.dataset.type = type;
-        }
-
-        function initializeEditor() {
-            document.querySelectorAll('.panel').forEach(panel => {
-               panel.addEventListener('click', () => selectPanel(panel));
-               panel.querySelector('img')?.addEventListener('mousedown', startPan);
-            });
-            document.querySelectorAll('.speech-bubble').forEach(initializeBubbleEvents);
-            document.getElementById('zoom-slider').addEventListener('input', handleZoom);
-            document.getElementById('tail-slider').addEventListener('input', (e) => slideTail(e.target.value));
-            
-            document.getElementById('bubble-text-color').addEventListener('input', (e) => {
-                if(currentlySelectedBubble) currentlySelectedBubble.style.setProperty('--bubble-text-color', e.target.value);
-            });
-            document.getElementById('bubble-fill-color').addEventListener('input', (e) => {
-                if(currentlySelectedBubble) currentlySelectedBubble.style.setProperty('--bubble-fill-color', e.target.value);
-            });
-
-            document.addEventListener('mousemove', e => { if (isPanning) panImage(e); if (draggedBubble) drag(e); if(isResizing) resizeBubble(e); });
-            document.addEventListener('mouseup', e => { if (isPanning) stopPan(e); if (draggedBubble) stopDrag(e); if(isResizing) stopResize(e);});
-            document.addEventListener('mouseleave', e => { if (isPanning) stopPan(e); if (draggedBubble) stopDrag(e); if(isResizing) stopResize(e);});
-        }
-
-        function initializeBubbleEvents(bubble) {
-            bubble.addEventListener('mousedown', (e) => { e.stopPropagation(); startDrag(e); });
-            bubble.addEventListener('click', (e) => { e.stopPropagation(); selectBubble(bubble); });
-            bubble.addEventListener('dblclick', (e) => { e.stopPropagation(); editBubbleText(bubble); });
-            ['nw', 'ne', 'sw', 'se'].forEach(dir => {
-                const h = document.createElement('div'); h.className = `resize-handle ${dir}`;
-                bubble.appendChild(h);
-                h.addEventListener('mousedown', (e) => startResize(e, dir));
-            });
-        }
-
-        function selectPanel(panel) {
-            document.querySelectorAll('.panel.selected').forEach(p => p.classList.remove('selected'));
-            panel.classList.add('selected');
-            currentlySelectedPanel = panel;
-            selectBubble(null);
-            resetPanelTransform(); 
-        }
-
-        function selectBubble(bubble) {
-            if(currentlySelectedBubble) currentlySelectedBubble.classList.remove('selected');
-            currentlySelectedBubble = bubble;
-            const tailControls = document.getElementById('tail-controls');
-            
-            if(bubble) {
-                bubble.classList.add('selected');
-                document.getElementById('bubble-text-color').disabled = false;
-                document.getElementById('bubble-fill-color').disabled = false;
-                document.getElementById('bubble-type-select').disabled = false;
-                document.getElementById('zoom-slider').disabled = true;
-                
-                if(bubble.dataset.type === 'speech') tailControls.style.display = 'block';
-                else tailControls.style.display = 'none';
-            } else {
-                if(document.getElementById('bubble-text-color')) document.getElementById('bubble-text-color').disabled = true;
-                if(document.getElementById('bubble-fill-color')) document.getElementById('bubble-fill-color').disabled = true;
-                if(document.getElementById('bubble-type-select')) document.getElementById('bubble-type-select').disabled = true;
-                document.getElementById('zoom-slider').disabled = false;
-                tailControls.style.display = 'none';
-            }
-        }
-
-        function startDrag(e) {
-            draggedBubble = e.target.closest('.speech-bubble');
-            selectBubble(draggedBubble);
-            const rect = draggedBubble.getBoundingClientRect();
-            offset = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-        }
-        function drag(e) {
-            if(!draggedBubble) return;
-            e.preventDefault();
-            const parent = draggedBubble.parentElement.getBoundingClientRect();
-            draggedBubble.style.left = (e.clientX - parent.left - offset.x) + 'px';
-            draggedBubble.style.top = (e.clientY - parent.top - offset.y) + 'px';
-        }
-        function stopDrag() { draggedBubble = null; }
-
-        function startResize(e, dir) {
-            e.preventDefault(); e.stopPropagation();
-            isResizing = true; resizeHandle = dir;
-            const b = currentlySelectedBubble;
-            const r = b.getBoundingClientRect();
-            originalWidth = r.width; originalHeight = r.height;
-            originalX = b.offsetLeft; originalY = b.offsetTop;
-            originalMouseX = e.clientX; originalMouseY = e.clientY;
-        }
-        function resizeBubble(e) {
-            if(!isResizing || !currentlySelectedBubble) return;
-            const dx = e.clientX - originalMouseX;
-            const dy = e.clientY - originalMouseY;
-            const b = currentlySelectedBubble;
-            if(resizeHandle.includes('e')) b.style.width = (originalWidth + dx) + 'px';
-            if(resizeHandle.includes('w')) { b.style.width = (originalWidth - dx) + 'px'; b.style.left = (originalX + dx) + 'px'; }
-            if(resizeHandle.includes('s')) b.style.height = (originalHeight + dy) + 'px';
-            if(resizeHandle.includes('n')) { b.style.height = (originalHeight - dy) + 'px'; b.style.top = (originalY + dy) + 'px'; }
-        }
-        function stopResize() { isResizing = false; }
-
-        function slideTail(val) {
-            if(currentlySelectedBubble) currentlySelectedBubble.style.setProperty('--tail-pos', val + '%');
-        }
-        function rotateBubbleTail() {
-            if(!currentlySelectedBubble) return;
-            const b = currentlySelectedBubble;
-            if(b.classList.contains('tail-bottom')) b.classList.replace('tail-bottom', 'tail-left');
-            else if(b.classList.contains('tail-left')) b.classList.replace('tail-left', 'tail-top');
-            else if(b.classList.contains('tail-top')) b.classList.replace('tail-top', 'tail-right');
-            else b.className = b.className.replace(/tail-\w+/, 'tail-bottom');
-        }
-        function changeBubbleType(val) {
-            if(!currentlySelectedBubble) return;
-            applyBubbleType(currentlySelectedBubble, val);
-            selectBubble(currentlySelectedBubble);
-        }
-        function editBubbleText(bubble) {
-            const span = bubble.querySelector('.bubble-text');
-            const txt = document.createElement('textarea');
-            txt.value = span.textContent;
-            bubble.appendChild(txt);
-            span.style.display = 'none';
-            txt.focus();
-            txt.onblur = () => { span.textContent = txt.value; txt.remove(); span.style.display = 'block'; };
-        }
-        function addBubbleToPanel() {
-            if(!currentlySelectedPanel) return alert("Select panel first");
-            const b = createBubbleElement({id: Date.now(), text: "New Text", left: "20px", top: "20px"});
-            currentlySelectedPanel.appendChild(b);
-            selectBubble(b);
-        }
-        function deleteBubble() {
-            if(currentlySelectedBubble) { currentlySelectedBubble.remove(); selectBubble(null); }
-        }
-
-        function startPan(e) {
-            if(e.button !== 0) return;
-            const img = e.target;
-            if((parseFloat(img.dataset.zoom)||100) <= 100) return;
-            e.preventDefault(); isPanning = true;
-            img.classList.add('panning');
-            panStartX = e.clientX; panStartY = e.clientY;
-            panStartTranslateX = parseFloat(img.dataset.translateX || 0);
-            panStartTranslateY = parseFloat(img.dataset.translateY || 0);
-        }
-        function panImage(e) {
-            if(!isPanning || !currentlySelectedPanel) return;
-            const img = currentlySelectedPanel.querySelector('img');
-            img.dataset.translateX = panStartTranslateX + (e.clientX - panStartX);
-            img.dataset.translateY = panStartTranslateY + (e.clientY - panStartY);
-            updateImageTransform(img);
-        }
-        function stopPan() {
-            if(!isPanning) return;
-            isPanning = false;
-            currentlySelectedPanel?.querySelector('img')?.classList.remove('panning');
-        }
-        function handleZoom(e) {
-            if(!currentlySelectedPanel) return;
-            const img = currentlySelectedPanel.querySelector('img');
-            img.dataset.zoom = e.target.value;
-            updateImageTransform(img);
-        }
-        function updateImageTransform(img) {
-            const z = (img.dataset.zoom || 100)/100;
-            const x = img.dataset.translateX || 0;
-            const y = img.dataset.translateY || 0;
-            img.style.transform = `translateX(${x}px) translateY(${y}px) scale(${z})`;
-            img.classList.toggle('pannable', z>1);
-        }
-        function resetPanelTransform() {
-            if(!currentlySelectedPanel) return;
-            const img = currentlySelectedPanel.querySelector('img');
-            img.dataset.zoom=100; img.dataset.translateX=0; img.dataset.translateY=0;
-            document.getElementById('zoom-slider').value = 100;
-            updateImageTransform(img);
-        }
-
-        function replacePanelImage() {
-            if (!currentlySelectedPanel) return alert("Select a panel first.");
-            const img = currentlySelectedPanel.querySelector('img');
-            const uploader = document.getElementById('image-uploader');
-            uploader.onchange = (event) => {
-                const file = event.target.files[0];
-                if (!file) return;
-                const formData = new FormData();
-                formData.append('image', file);
-                img.style.opacity = '0.5';
-                fetch('/replace_panel', { method: 'POST', body: formData })
-                    .then(res => res.json())
-                    .then(data => {
-                        if (data.success) {
-                            img.src = `frames/${data.new_filename}?t=${Date.now()}`;
-                            resetPanelTransform();
-                        } else alert('Error: ' + data.error);
-                        img.style.opacity = '1';
-                    });
-                uploader.value = '';
+                document.onmouseup = function() { document.onmousemove = null; }
             };
-            uploader.click();
-        }
-
-        function adjustFrame(dir) {
-            if (!currentlySelectedPanel) return alert("Select a panel.");
-            const img = currentlySelectedPanel.querySelector('img');
-            let filename = img.src.substring(img.src.lastIndexOf('/')+1).split('?')[0];
-            fetch('/regenerate_frame', {
-                method: 'POST', headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({ filename, direction: dir })
-            }).then(r=>r.json()).then(d=>{
-                if(d.success) img.src = `frames/${filename}?t=${Date.now()}`;
-                else alert(d.message);
-            });
-        }
-
-        function gotoTimestamp() {
-            if (!currentlySelectedPanel) return alert("Select a panel.");
-            const input = document.getElementById('timestamp-input');
-            let val = input.value.trim();
-            if(!val) return;
-            if(val.includes(':')) {
-                let parts = val.split(':');
-                val = parseInt(parts[0])*60 + parseFloat(parts[1]);
-            } else val = parseFloat(val);
-            
-            const img = currentlySelectedPanel.querySelector('img');
-            let filename = img.src.substring(img.src.lastIndexOf('/')+1).split('?')[0];
-            fetch('/goto_timestamp', {
-                method: 'POST', headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({ filename, timestamp: val })
-            }).then(r=>r.json()).then(d=>{
-                if(d.success) { img.src = `frames/${filename}?t=${Date.now()}`; input.value=''; resetPanelTransform(); }
-                else alert(d.message);
-            });
         }
 
-        async function exportPagesToPNG() {
+        async function exportToPng() {
             const pages = document.querySelectorAll('.comic-page');
-            for(let i=0; i<pages.length; i++) {
-                try {
-                    const dataUrl = await htmlToImage.toPng(pages[i], { pixelRatio: 3 });
-                    const link = document.createElement('a');
-                    link.download = `page-${i+1}.png`;
-                    link.href = dataUrl;
-                    link.click();
-                } catch(e) { console.error(e); alert("Export failed"); }
+            for(let p of pages) {
+                const url = await htmlToImage.toPng(p, {pixelRatio: 2});
+                const a = document.createElement('a');
+                a.download = 'comic.png';
+                a.href = url;
+                a.click();
             }
         }
     </script>
@@ -700,356 +261,129 @@ class EnhancedComicGenerator:
         os.makedirs(self.output_dir, exist_ok=True)
         
         self.video_fps = None
-        self.frame_metadata = {}
 
     def update_status(self, message, progress):
         try:
             with open(self.status_file, 'w') as f:
                 json.dump({'message': message, 'progress': progress}, f)
-        except Exception as e:
-            print(f"Error updating status: {e}")
-
-    def cleanup_generated(self):
-        print(f"[{self.sid}] 🧹 Performing cleanup...")
-        if os.path.isdir(self.frames_dir):
-            for file in os.listdir(self.frames_dir):
-                os.remove(os.path.join(self.frames_dir, file))
-        if os.path.isdir(self.output_dir):
-            for file in os.listdir(self.output_dir):
-                if file != 'status.json':
-                    try: os.remove(os.path.join(self.output_dir, file))
-                    except: pass
-        srt_file = os.path.join(self.user_dir, 'subs.srt')
-        if os.path.exists(srt_file): os.remove(srt_file)
-        print(f"[{self.sid}] ✅ Cleanup complete.")
+        except: pass
 
-    def regenerate_frame(self, frame_filename, direction):
+    def generate_comic(self):
         try:
-            if not self.video_fps:
-                cap = cv2.VideoCapture(self.video_path)
-                self.video_fps = cap.get(cv2.CAP_PROP_FPS)
-                cap.release()
-                
-            metadata_path = os.path.join(self.frames_dir, 'frame_metadata.json')
-            if not os.path.exists(metadata_path):
-                return {"success": False, "message": "Frame metadata missing."}
-            with open(metadata_path, 'r') as f:
-                frame_to_time = json.load(f)
-            
-            if frame_filename not in frame_to_time:
-                return {"success": False, "message": "Panel not linked to video."}
-                
-            current_data = frame_to_time[frame_filename]
-            current_time = current_data['time'] if isinstance(current_data, dict) else current_data
-            
-            frame_duration = 1.0 / self.video_fps
-            target_time = current_time + frame_duration if direction == 'forward' else current_time - frame_duration
-            target_time = max(0, target_time)
+            if cv2 is None: raise Exception("OpenCV not installed on server.")
             
+            self.update_status("Processing Video...", 10)
             cap = cv2.VideoCapture(self.video_path)
-            if not cap.isOpened(): return {"success": False, "message": "Cannot open video."}
-            cap.set(cv2.CAP_PROP_POS_MSEC, target_time * 1000)
-            ret, frame = cap.read()
-            cap.release()
-            
-            if not ret or frame is None:
-                return {"success": False, "message": f"No frame at {target_time:.2f}s."}
+            if not cap.isOpened(): raise Exception("Invalid Video File")
             
-            new_path = os.path.join(self.frames_dir, frame_filename)
-            cv2.imwrite(new_path, frame)
-            
-            self._enhance_all_images(single_image_path=new_path)
-            self._enhance_quality_colors(single_image_path=new_path)
-
-            if isinstance(frame_to_time[frame_filename], dict):
-                frame_to_time[frame_filename]['time'] = target_time
-            else:
-                frame_to_time[frame_filename] = target_time
-                
-            with open(metadata_path, 'w') as f: json.dump(frame_to_time, f, indent=2)
-            
-            return {"success": True, "message": f"Adjusted to {target_time:.3f}s", "new_filename": frame_filename}
-        except Exception as e:
-            traceback.print_exc()
-            return {"success": False, "message": str(e)}
+            self.video_fps = cap.get(cv2.CAP_PROP_FPS)
+            total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+            duration = total_frames / self.video_fps
+            cap.release()
 
-    def get_frame_at_timestamp(self, frame_filename, timestamp_seconds):
-        try:
-            metadata_path = os.path.join(self.frames_dir, 'frame_metadata.json')
-            if not os.path.exists(metadata_path): return {"success": False, "message": "Metadata missing."}
-            
+            # --- GENERATE SUBTITLES ---
+            self.update_status("Extracting Dialogue...", 30)
+            try:
+                get_real_subtitles(self.video_path) # Generates 'test1.srt' in cwd usually
+                # Move it to user dir
+                if os.path.exists('test1.srt'):
+                    shutil.move('test1.srt', os.path.join(self.user_dir, 'subs.srt'))
+            except Exception as e:
+                print(f"Subtitle Error: {e}")
+                # Create dummy srt if failed
+                with open(os.path.join(self.user_dir, 'subs.srt'), 'w') as f:
+                    f.write("1\n00:00:01,000 --> 00:00:04,000\nHello World!\n")
+
+            # --- EXTRACT FRAMES ---
+            self.update_status("Creating Panels...", 50)
             cap = cv2.VideoCapture(self.video_path)
-            if not cap.isOpened(): return {"success": False, "message": "Cannot open video."}
-            fps = cap.get(cv2.CAP_PROP_FPS)
-            if fps == 0: fps = 25
-            duration = int(cap.get(cv2.CAP_PROP_FRAME_COUNT)) / fps
             
-            if timestamp_seconds < 0 or timestamp_seconds > duration:
-                cap.release()
-                return {"success": False, "message": f"Timestamp invalid (0-{duration:.2f}s)."}
-                
-            cap.set(cv2.CAP_PROP_POS_MSEC, timestamp_seconds * 1000)
-            ret, frame = cap.read()
-            cap.release()
+            # Parse SRT
+            subs_path = os.path.join(self.user_dir, 'subs.srt')
+            with open(subs_path, 'r', encoding='utf-8') as f:
+                subs = list(srt.parse(f.read()))
             
-            if not ret or frame is None: return {"success": False, "message": "Could not retrieve frame."}
+            frame_files = []
+            bubbles = []
             
-            new_path = os.path.join(self.frames_dir, frame_filename)
-            cv2.imwrite(new_path, frame)
-
-            self._enhance_all_images(single_image_path=new_path)
-            self._enhance_quality_colors(single_image_path=new_path)
-
-            with open(metadata_path, 'r') as f: frame_to_time = json.load(f)
-            if frame_filename in frame_to_time:
-                if isinstance(frame_to_time[frame_filename], dict):
-                    frame_to_time[frame_filename]['time'] = timestamp_seconds
-                else:
-                    frame_to_time[frame_filename] = timestamp_seconds
-                with open(metadata_path, 'w') as f: json.dump(frame_to_time, f, indent=2)
-                
-            return { "success": True, "message": f"Jumped to {timestamp_seconds:.3f}s" }
-        except Exception as e:
-            return {"success": False, "message": str(e)}
-
-    def generate_keyframes_from_moments(self, video_path, key_moments, max_frames=32):
-        try:
-            cap = cv2.VideoCapture(video_path)
-            if not cap.isOpened(): raise Exception("Cannot open video")
-            fps, total_frames = self.video_fps, int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
-            duration = total_frames / fps
-            key_moments.sort(key=lambda x: x['start'])
+            # Limit to 12 frames for speed
+            step = max(1, len(subs) // 12)
             
-            frame_metadata, frame_count = {}, 0
-            for i, moment in enumerate(key_moments):
-                self.update_status(f"Extracting frame {i+1}/{len(key_moments)}...", 25 + int(20 * (i / len(key_moments))))
-                frame_time = (moment['start'] + moment['end']) / 2
-                if frame_time > duration: continue
-                
-                frame_number = int(frame_time * fps)
-                cap.set(cv2.CAP_PROP_POS_FRAMES, frame_number)
+            for i, sub in enumerate(subs[::step]):
+                mid_time = (sub.start.total_seconds() + sub.end.total_seconds()) / 2
+                cap.set(cv2.CAP_PROP_POS_MSEC, mid_time * 1000)
                 ret, frame = cap.read()
                 if ret:
-                    frame_filename = f"frame_{frame_count:04d}.png"
-                    frame_path = os.path.join(self.frames_dir, frame_filename)
-                    cv2.imwrite(frame_path, frame)
-                    frame_metadata[frame_filename] = { 'time': frame_time, 'dialogue': moment['text'], 'start': moment['start'], 'end': moment['end'] }
-                    frame_count += 1
+                    fname = f"frame_{i}.png"
+                    cv2.imwrite(os.path.join(self.frames_dir, fname), frame)
+                    frame_files.append(fname)
+                    # Simple bubble placement
+                    bubbles.append(bubble(dialog=sub.content, bubble_offset_x=50, bubble_offset_y=20))
             cap.release()
             
-            with open(os.path.join(self.frames_dir, 'frame_metadata.json'), 'w') as f:
-                json.dump(frame_metadata, f, indent=2)
-            print(f"[{self.sid}] ✅ Extracted {frame_count} keyframes")
-            return True
-        except Exception as e:
-            print(f"[{self.sid}] ❌ Error extracting keyframes: {e}")
-            return False
-
-    def generate_comic(self):
-        start_time = time.time()
-        try:
-            self.update_status("Cleaning up...", 0)
-            self.cleanup_generated()
-            
-            self.update_status("Analyzing video...", 5)
-            cap = cv2.VideoCapture(self.video_path)
-            if not cap.isOpened(): raise Exception("Cannot open video to get FPS.")
-            self.video_fps = cap.get(cv2.CAP_PROP_FPS)
-            if self.video_fps == 0: self.video_fps = 25
-            cap.release()
-            
-            self.update_status("Generating subtitles...", 10)
-            get_real_subtitles(self.video_path) 
-            
-            if os.path.exists('test1.srt'):
-                user_srt = os.path.join(self.user_dir, 'subs.srt')
-                shutil.move('test1.srt', user_srt)
-            else:
-                user_srt = os.path.join(self.user_dir, 'subs.srt')
+            # --- GENERATE PAGES ---
+            self.update_status("Assembling...", 80)
+            pages_data = []
+            # Create 4-panel pages
+            for i in range(0, len(frame_files), 4):
+                batch_files = frame_files[i:i+4]
+                batch_bubbles = bubbles[i:i+4]
                 
-            with open(user_srt, 'r', encoding='utf-8') as f:
-                all_subs = list(srt.parse(f.read()))
-            
-            key_moments = [{'index': s.index, 'text': s.content, 'start': s.start.total_seconds(), 'end': s.end.total_seconds()} for s in all_subs]
-            
-            if not self.generate_keyframes_from_moments(self.video_path, key_moments):
-                raise Exception("Keyframe extraction failed.")
+                panels = [{'image': f} for f in batch_files]
+                b_data = [b.__dict__ if hasattr(b, '__dict__') else b for b in batch_bubbles]
                 
-            self.update_status("Cropping black bars...", 45)
-            black_x, black_y, _, _ = black_bar_crop()
-            
-            self.update_status("Enhancing images...", 50)
-            self._enhance_all_images()
-            self._enhance_quality_colors()
-            
-            self.update_status("Placing speech bubbles...", 75)
-            bubbles = self._create_ai_bubbles_from_moments(black_x, black_y)
-            
-            self.update_status("Assembling pages...", 90)
-            pages = self._generate_pages(bubbles)
-            
-            self.update_status("Saving...", 95)
-            self._save_results(pages)
-            
-            execution_time = (time.time() - start_time) / 60
-            print(f"[{self.sid}] ✅ Completed in {execution_time:.2f} min")
-            self.update_status("Complete!", 100)
-            return True
-        except Exception as e:
-            print(f"[{self.sid}] ❌ Failed: {e}")
-            traceback.print_exc()
-            self.update_status(f"Error: {e}", -1)
-            return False
-
-    def _enhance_all_images(self, single_image_path=None):
-        try:
-            enhancer = SimpleColorEnhancer()
-            if single_image_path:
-                enhancer.enhance_single(single_image_path)
-            else:
-                frame_paths = [os.path.join(self.frames_dir, f) for f in os.listdir(self.frames_dir) if f.endswith('.png')]
-                with ThreadPoolExecutor() as executor:
-                    list(executor.map(enhancer.enhance_single, frame_paths))
-        except Exception as e:
-            print(f"Simple enhancement error: {e}")
-
-    def _enhance_quality_colors(self, single_image_path=None):
-        try:
-            enhancer = QualityColorEnhancer()
-            if single_image_path:
-                enhancer.enhance_single(single_image_path)
-            else:
-                frame_paths = [os.path.join(self.frames_dir, f) for f in os.listdir(self.frames_dir) if f.endswith('.png')]
-                with ThreadPoolExecutor() as executor:
-                    list(executor.map(enhancer.enhance_single, frame_paths))
-        except Exception as e:
-            print(f"Quality enhancement error: {e}")
-
-    def _process_bubble_for_frame(self, frame_file):
-        frame_path = os.path.join(self.frames_dir, frame_file)
-        dialogue = self.frame_metadata.get(frame_file, {}).get('dialogue', "")
-        try:
-            faces = face_detector.detect_faces(frame_path)
-            lip_x, lip_y = face_detector.get_lip_position(frame_path, faces[0]) if faces else (-1, -1)
-            bubble_x, bubble_y = ai_bubble_placer.place_bubble_ai(frame_path, (lip_x, lip_y))
-            return bubble(bubble_offset_x=bubble_x, bubble_offset_y=bubble_y, lip_x=lip_x, lip_y=lip_y, dialog=dialogue, emotion='normal')
-        except Exception as e:
-            return bubble(bubble_offset_x=50, bubble_offset_y=20, lip_x=-1, lip_y=-1, dialog=dialogue, emotion='normal')
-
-    def _create_ai_bubbles_from_moments(self, black_x, black_y):
-        frame_files = sorted([f for f in os.listdir(self.frames_dir) if f.endswith('.png')])
-        metadata_path = os.path.join(self.frames_dir, 'frame_metadata.json')
-        if not os.path.exists(metadata_path):
-            return [bubble(dialog="") for _ in frame_files]
+                pages_data.append({'panels': panels, 'bubbles': b_data})
 
-        with open(metadata_path, 'r') as f:
-            self.frame_metadata = json.load(f)
+            with open(os.path.join(self.output_dir, 'pages.json'), 'w') as f:
+                json.dump(pages_data, f)
 
-        with ThreadPoolExecutor() as executor:
-            bubbles = list(executor.map(self._process_bubble_for_frame, frame_files))
-        return bubbles
+            # Save HTML for direct viewing
+            with open(os.path.join(self.output_dir, 'page.html'), 'w') as f:
+                f.write(INDEX_HTML)
 
-    def _generate_pages(self, bubbles):
-        pages, frame_files = [], sorted([f for f in os.listdir(self.frames_dir) if f.endswith('.png')])
-        num_pages = (len(frame_files) + 3) // 4
-        for i in range(num_pages):
-            start, end = i*4, (i+1)*4
-            page_panels = [panel(image=f) for f in frame_files[start:end]]
-            page_bubbles = bubbles[start:end]
-            if page_panels: pages.append(Page(panels=page_panels, bubbles=page_bubbles))
-        return pages
+            self.update_status("Done!", 100)
 
-    def _save_results(self, pages):
-        try:
-            pages_data = []
-            for page in pages:
-                panels = [p.__dict__ if hasattr(p, '__dict__') else p for p in page.panels]
-                bubbles_data = [b.__dict__ if hasattr(b, '__dict__') else b for b in page.bubbles]
-                pages_data.append({'panels': panels, 'bubbles': bubbles_data})
-            
-            with open(os.path.join(self.output_dir, 'pages.json'), 'w', encoding='utf-8') as f:
-                json.dump(pages_data, f, indent=2)
-            self._copy_template_files()
         except Exception as e:
-            print(f"Save results failed: {e}")
-
-    def _copy_template_files(self):
-        try:
-            with open(os.path.join(self.output_dir, 'page.html'), 'w', encoding='utf-8') as f:
-                f.write(INDEX_HTML)
-        except Exception as e:
-            print(f"[{self.sid}] Template creation failed: {e}")
-
-# --- ROUTES ---
+            traceback.print_exc()
+            self.update_status(f"Failed: {str(e)}", -1)
 
 @app.route('/')
 def index():
-    if 'sid' not in session:
-        session['sid'] = uuid.uuid4().hex
+    if 'sid' not in session: session['sid'] = uuid.uuid4().hex
     return INDEX_HTML
 
 @app.route('/uploader', methods=['POST'])
-def upload_file():
+def upload():
     if 'sid' not in session: session['sid'] = uuid.uuid4().hex
-    try:
-        f = request.files['file']
-        gen = EnhancedComicGenerator(session['sid'])
-        f.save(gen.video_path)
-        threading.Thread(target=gen.generate_comic).start()
-        return jsonify({'success': True})
-    except Exception as e:
-        return jsonify({'success': False, 'message': str(e)}), 500
+    sid = session['sid']
+    if 'file' not in request.files: return "No file", 400
+    
+    gen = EnhancedComicGenerator(sid)
+    request.files['file'].save(gen.video_path)
+    
+    # Initial status
+    gen.update_status("Starting...", 5)
+    
+    threading.Thread(target=gen.generate_comic).start()
+    return jsonify({'success': True})
 
 @app.route('/status')
-def status():
-    if 'sid' not in session: return jsonify({'message': 'Session expired', 'progress': -1})
+def get_status():
+    if 'sid' not in session: return jsonify({'progress': -1, 'message': "Session Lost"})
     sid = session['sid']
-    status_file = os.path.join(BASE_USER_DIR, sid, 'output', 'status.json')
-    if os.path.exists(status_file):
-        with open(status_file, 'r') as f: return jsonify(json.load(f))
-    return jsonify({'message': 'Initializing...', 'progress': 0})
-
-@app.route('/comic')
-def view_comic():
-    if 'sid' not in session: return "Session expired", 400
-    return send_from_directory(os.path.join(BASE_USER_DIR, session['sid'], 'output'), 'page.html')
+    status_path = os.path.join(BASE_USER_DIR, sid, 'output', 'status.json')
+    if os.path.exists(status_path):
+        return send_file(status_path)
+    return jsonify({'progress': 0, 'message': "Waiting..."})
 
 @app.route('/output/<path:filename>')
-def output_file(filename):
-    if 'sid' not in session: return "Session expired", 400
+def get_output(filename):
     return send_from_directory(os.path.join(BASE_USER_DIR, session['sid'], 'output'), filename)
 
 @app.route('/frames/<path:filename>')
-def frame_file(filename):
-    if 'sid' not in session: return "Session expired", 400
+def get_frame(filename):
     return send_from_directory(os.path.join(BASE_USER_DIR, session['sid'], 'frames'), filename)
 
-@app.route('/regenerate_frame', methods=['POST'])
-def regenerate_frame_route():
-    if 'sid' not in session: return jsonify({'success': False, 'message': 'Session expired'})
-    data = request.get_json()
-    gen = EnhancedComicGenerator(session['sid'])
-    return jsonify(gen.regenerate_frame(data['filename'], data['direction']))
-
-@app.route('/replace_panel', methods=['POST'])
-def replace_panel():
-    if 'sid' not in session: return jsonify({'success': False, 'error': 'Session expired'})
-    if 'image' not in request.files: return jsonify({'success': False, 'error': 'No image'})
-    file = request.files['image']
-    gen = EnhancedComicGenerator(session['sid'])
-    filename = f"replaced_{int(time.time())}.png"
-    file.save(os.path.join(gen.frames_dir, filename))
-    return jsonify({'success': True, 'new_filename': filename})
-
-@app.route('/goto_timestamp', methods=['POST'])
-def goto_timestamp_route():
-    if 'sid' not in session: return jsonify({'success': False, 'message': 'Session expired'})
-    data = request.get_json()
-    gen = EnhancedComicGenerator(session['sid'])
-    return jsonify(gen.get_frame_at_timestamp(data['filename'], float(data['timestamp'])))
-
 if __name__ == '__main__':
     os.makedirs(BASE_USER_DIR, exist_ok=True)
-    port = int(os.getenv("PORT", 7860))
-    print(f"🚀 Starting Multi-User Comic Generator on port {port}")
-    app.run(debug=False, host='0.0.0.0', port=port)
+    app.run(host='0.0.0.0', port=7860)