Testcomic

Configuration error

App Files Files Community

tester343 commited on Dec 3, 2025

Commit

f2379ad

verified ·

1 Parent(s): c97c04c

Update app_enhanced.py

Browse files

Files changed (1) hide show

app_enhanced.py +589 -167

app_enhanced.py CHANGED Viewed

@@ -16,19 +16,22 @@ try:
     import srt
 except ImportError as e:
     print(f"❌ CRITICAL ERROR: Missing python library. {e}")
     cv2 = None
     np = None
     Image = None
     srt = None
-# --- 2. BACKEND MODULE IMPORTS (WITH DUMMY FALLBACKS) ---
-def dummy_function(*args, **kwargs): return 0, 0, None, None
 try:
     from backend.keyframes.keyframes import black_bar_crop
     print("✅ Black bar cropping module loaded.")
 except Exception:
-    black_bar_crop = dummy_function
 try:
     from backend.simple_color_enhancer import SimpleColorEnhancer
@@ -47,11 +50,14 @@ except Exception:
 try:
     from backend.class_def import bubble, panel, Page
     print("✅ Core class definitions loaded.")
-except Exception as e:
-    print(f"⚠️ Loading fallback definitions: {e}")
-    # Fallback if import fails
-    def bubble(**kwargs): return kwargs
-    def panel(**kwargs): return kwargs
     class Page:
         def __init__(self, panels, bubbles): self.panels, self.bubbles = panels, bubbles
@@ -59,9 +65,9 @@ try:
     from backend.ai_enhanced_core import image_processor, comic_styler, face_detector, layout_optimizer
     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:
     def get_real_subtitles(v): pass
     class DummyDetector:
         def detect_faces(self, p): return []
@@ -76,7 +82,7 @@ except Exception:
 app = Flask(__name__)
 BASE_USER_DIR = "userdata"
-# --- HTML ---
 INDEX_HTML = '''
 <!DOCTYPE html>
 <html lang="en">
@@ -84,182 +90,535 @@ INDEX_HTML = '''
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Movie to Comic Generator</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.min.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&display=swap" rel="stylesheet">
     <style>
-        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%} }
-        /* COMIC STYLES */
-        .comic-page { background: white; width: 600px; height: 400px; position: relative; overflow: hidden; border: 2px solid #000; margin: 0 auto 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
-        .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; }
-        /* EXACT SHARK FIN SPEECH BUBBLE CSS */
         .speech-bubble.speech {
-            --b: 3em; --h: 1.8em; --t: 0.6; --p: 50%; --r: 1.2em;
-            --c: #4ECDC4;
-            background: var(--c); 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: 14px; text-align: center;
-            min-width: 80px; min-height: 40px; display: flex; align-items: center; justify-content: center;
-            cursor: move; z-index: 10;
         }
-        /* Export-Safe Gradient instead of Mask */
         .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;
-            top: 99%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
         }
-        .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; background: #f0f0f0; border: 1px solid #ccc; border-radius: 4px; }
-        .edit-controls button:hover { background: #e0e0e0; }
     </style>
 </head>
 <body>
     <div id="upload-container">
         <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 selected</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>
     <div id="editor-container">
-        <div id="comic-pages"></div>
         <div class="edit-controls">
-            <h4>Editor Tools</h4>
-            <button onclick="exportToPng()">💾 Export PNG</button>
-            <button onclick="location.reload()" style="color:red;">↺ Start Over</button>
         </div>
     </div>
     <script>
-        // CLIENT-SIDE SESSION ID GENERATION (Fixes "Session Lost" on Hugging Face)
         function generateUUID() {
             return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                 var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                 return v.toString(16);
             });
         }
-        // Get or create SID
         let sid = localStorage.getItem('comic_sid');
-        if(!sid) {
-            sid = generateUUID();
-            localStorage.setItem('comic_sid', sid);
-        }
-        console.log("Using Session ID:", sid);
-        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';
-            // Pass SID in URL
-            const res = await fetch(`/uploader?sid=${sid}`, {method:'POST', body:fd});
-            if(res.ok) interval = setInterval(checkStatus, 2000);
-            else { alert("Upload failed"); location.reload(); }
-        }
         async function checkStatus() {
-            const res = await fetch(`/status?sid=${sid}`);
-            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();
-            }
         }
         function loadComic() {
-            // Fetch pages.json using SID
             fetch(`/output/pages.json?sid=${sid}`).then(r=>r.json()).then(data => {
-                const c = document.getElementById('comic-pages');
-                c.innerHTML = ''; // clear
-                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');
-                        // Fetch image using SID
-                        img.src = `/frames/${pan.image}?sid=${sid}`;
                         pDiv.appendChild(img);
-                        if(p.bubbles && p.bubbles[j] && p.bubbles[j].dialog) {
-                            const b = document.createElement('div');
-                            b.className = 'speech-bubble speech';
-                            b.innerText = p.bubbles[j].dialog;
-                            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);
                 });
-            }).catch(e => console.error(e));
         }
-        function makeInteractive(el) {
-            el.onmousedown = function(e) {
-                e.stopPropagation();
-                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';
-                }
-                document.onmouseup = function() { document.onmousemove = null; }
-            };
         }
-        async function exportToPng() {
-            const pages = document.querySelectorAll('.comic-page');
-            for(let i=0; i<pages.length; i++) {
                 try {
-                    const url = await htmlToImage.toPng(pages[i], {pixelRatio: 3});
                     const a = document.createElement('a');
-                    a.download = `comic-page-${i+1}.png`;
-                    a.href = url;
-                    a.click();
                 } catch(e) { console.error(e); alert("Export failed"); }
             }
         }
@@ -268,6 +627,7 @@ INDEX_HTML = '''
 </html>
 '''
 class EnhancedComicGenerator:
     def __init__(self, sid):
         self.sid = sid
@@ -281,6 +641,7 @@ class EnhancedComicGenerator:
         os.makedirs(self.output_dir, exist_ok=True)
         self.video_fps = None
     def update_status(self, message, progress):
         try:
@@ -288,46 +649,44 @@ class EnhancedComicGenerator:
                 json.dump({'message': message, 'progress': progress}, f)
         except: pass
-    def cleanup(self):
         if os.path.exists(self.frames_dir): shutil.rmtree(self.frames_dir)
         os.makedirs(self.frames_dir, exist_ok=True)
     def generate_comic(self):
         try:
             if cv2 is None: raise Exception("OpenCV missing on server.")
-            self.update_status("Processing Video...", 10)
             cap = cv2.VideoCapture(self.video_path)
             if not cap.isOpened(): raise Exception("Invalid Video")
             self.video_fps = cap.get(cv2.CAP_PROP_FPS) or 25
             cap.release()
             # 1. Subtitles
-            self.update_status("Extracting Dialogue...", 30)
             try:
-                get_real_subtitles(self.video_path) # Creates test1.srt
-                # Move to user dir if created in root
-                if os.path.exists('test1.srt'):
-                    shutil.move('test1.srt', os.path.join(self.user_dir, 'subs.srt'))
             except:
-                # Fallback dummy sub
-                with open(os.path.join(self.user_dir, 'subs.srt'), 'w') as f:
-                    f.write("1\n00:00:01,000 --> 00:00:04,000\nSample Text\n")
-            # 2. Extract Frames
-            self.update_status("Generating Panels...", 50)
-            cap = cv2.VideoCapture(self.video_path)
-            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()))
             frame_files = []
             bubbles = []
-            # Limit frames to avoid timeout
-            limit_subs = subs[:12]
             for i, sub in enumerate(limit_subs):
                 mid = (sub.start.total_seconds() + sub.end.total_seconds()) / 2
@@ -337,55 +696,101 @@ class EnhancedComicGenerator:
                     fname = f"frame_{i}.png"
                     cv2.imwrite(os.path.join(self.frames_dir, fname), frame)
                     frame_files.append(fname)
-                    # FIX: Added required arguments for bubble constructor to prevent TypeError
                     bubbles.append(bubble(
                         dialog=sub.content,
-                        bubble_offset_x=50,
-                        bubble_offset_y=20,
-                        lip_x=-1,
-                        lip_y=-1,
-                        emotion='normal'
                     ))
             cap.release()
-            # 3. Assemble
-            self.update_status("Finalizing...", 80)
             pages_data = []
             for i in range(0, len(frame_files), 4):
                 batch_f = frame_files[i:i+4]
                 batch_b = bubbles[i:i+4]
                 panels = [{'image': f} for f in batch_f]
-                # safe object conversion
                 b_data = [b.__dict__ if hasattr(b, '__dict__') else b for b in batch_b]
                 pages_data.append({'panels': panels, 'bubbles': b_data})
             with open(os.path.join(self.output_dir, 'pages.json'), 'w') as f:
                 json.dump(pages_data, f)
             self.update_status("Done!", 100)
         except Exception as e:
             traceback.print_exc()
             self.update_status(f"Error: {str(e)}", -1)
-# --- ROUTES (SID REQUIRED IN QUERY PARAMS) ---
 @app.route('/')
-def index():
-    return INDEX_HTML
 @app.route('/uploader', methods=['POST'])
 def upload():
     sid = request.args.get('sid')
     if not sid: return "Missing SID", 400
-    if 'file' not in request.files: return "No file", 400
     gen = EnhancedComicGenerator(sid)
-    gen.cleanup() # Clean previous run
-    request.files['file'].save(gen.video_path)
     gen.update_status("Starting...", 5)
     threading.Thread(target=gen.generate_comic).start()
     return jsonify({'success': True})
@@ -393,25 +798,42 @@ def upload():
 @app.route('/status')
 def get_status():
     sid = request.args.get('sid')
-    if not sid: return jsonify({'message': 'No SID', 'progress': -1})
-    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({'message': 'Waiting...', 'progress': 0})
 @app.route('/output/<path:filename>')
 def get_output(filename):
     sid = request.args.get('sid')
-    if not sid: return "No SID", 400
     return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
 @app.route('/frames/<path:filename>')
 def get_frame(filename):
     sid = request.args.get('sid')
-    if not sid: return "No SID", 400
     return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'frames'), filename)
 if __name__ == '__main__':
     os.makedirs(BASE_USER_DIR, exist_ok=True)
     port = int(os.getenv("PORT", 7860))

     import srt
 except ImportError as e:
     print(f"❌ CRITICAL ERROR: Missing python library. {e}")
+    # Define dummies to allow app to start (will fail gracefully later)
     cv2 = None
     np = None
     Image = None
     srt = None
+# --- 2. BACKEND MODULE IMPORTS (WITH ROBUST FALLBACKS) ---
+# This section ensures the app loads even if specific backend files are missing.
+def dummy_black_bar_crop(): return 0, 0, None, None
 try:
     from backend.keyframes.keyframes import black_bar_crop
     print("✅ Black bar cropping module loaded.")
 except Exception:
+    black_bar_crop = dummy_black_bar_crop
 try:
     from backend.simple_color_enhancer import SimpleColorEnhancer
 try:
     from backend.class_def import bubble, panel, Page
     print("✅ Core class definitions loaded.")
+except Exception:
+    # Fallback definitions if backend/class_def.py is missing
+    def bubble(dialog="", bubble_offset_x=50, bubble_offset_y=20, lip_x=-1, lip_y=-1, emotion='normal'):
+        return {
+            'dialog': dialog, 'bubble_offset_x': bubble_offset_x, 'bubble_offset_y': bubble_offset_y,
+            'lip_x': lip_x, 'lip_y': lip_y, 'emotion': emotion
+        }
+    def panel(image=""): return {'image': image}
     class Page:
         def __init__(self, panels, bubbles): self.panels, self.bubbles = panels, bubbles
     from backend.ai_enhanced_core import image_processor, comic_styler, face_detector, layout_optimizer
     from backend.ai_bubble_placement import ai_bubble_placer
     from backend.subtitles.subs_real import get_real_subtitles
     print("✅ Core utility modules loaded.")
 except Exception:
+    # Dummies for AI modules
     def get_real_subtitles(v): pass
     class DummyDetector:
         def detect_faces(self, p): return []
 app = Flask(__name__)
 BASE_USER_DIR = "userdata"
+# --- HTML INTERFACE (Upload + Editor + JS) ---
 INDEX_HTML = '''
 <!DOCTYPE html>
 <html lang="en">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Movie to Comic Generator</title>
+    <!-- Export Library that 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=Lato&display=swap" rel="stylesheet">
     <style>
+        /* GLOBAL STYLES */
+        body { background-color: #fdf6e3; font-family: 'Lato', sans-serif; color: #3d3d3d; margin: 0; min-height: 100vh; }
+        /* UPLOAD VIEW */
         #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; }
+        .file-input { display: none; }
+        .file-label { display: block; padding: 15px 25px; background-color: #2c3e50; color: white; border-radius: 8px; cursor: pointer; margin-bottom: 15px; font-weight: bold; transition: 0.3s; }
+        .file-label:hover { background-color: #34495e; transform: translateY(-2px); }
+        .submit-btn { width: 100%; padding: 15px; background: #e67e22; color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; transition: 0.3s; }
+        .submit-btn:hover { background-color: #d35400; }
+        .loading-view { display: none; flex-direction: column; align-items: center; margin-top: 20px; }
+        .loader { width: 120px; height: 20px; background: radial-gradient(circle 10px, #e67e22 100%, transparent 0); background-size: 20px 20px; animation: ball 1s infinite linear; }
         @keyframes ball { 0%{background-position:0 50%} 100%{background-position:100px 50%} }
+        #status-text { margin-top: 20px; font-size: 18px; font-weight: 500; }
+        /* EDITOR VIEW */
+        #editor-container { display: none; padding: 20px; width: 100%; box-sizing: border-box; }
+        .comic-container-wrapper { max-width: 1200px; margin: 0 auto; padding-bottom: 100px; }
+        .comic-page { background: white; width: 600px; height: 400px; box-shadow: 0 0 10px rgba(0,0,0,0.1); position: relative; overflow: hidden; border: 1px solid #333; padding: 10px; margin: 0 auto 30px; }
+        .comic-grid { display: grid; grid-template-columns: 285px 285px; grid-template-rows: 185px 185px; gap: 10px; width: 100%; height: 100%; }
+        .page-title { text-align: center; margin-bottom: 10px; font-family: 'Bangers', cursive; letter-spacing: 1px; }
+        .panel { position: relative; overflow: hidden; width: 100%; height: 100%; border: 1px solid #333; cursor: pointer; background: #eee; }
+        .panel.selected { outline: 3px solid #2196F3; outline-offset: -3px; }
+        .panel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.1s ease-out; }
+        .panel img.pannable { cursor: grab; }
+        .panel img.panning { cursor: grabbing; }
+        /* SPEECH BUBBLE (SHARK FIN CSS) */
+        .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-family: 'Comic Neue', cursive;
+            font-weight: bold; font-size: 14px; text-align: center;
+        }
+        .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 Logic provided for Shark Fin Tail (adapted for export) */
         .speech-bubble.speech {
+            --b: 3em;   /* tail base width */
+            --h: 1.8em; /* tail height */
+            --t: 0.6;   /* thickness */
+            --p: var(--tail-pos, 50%); /* Slider position */
+            --r: 1.2em; /* radius */
+            --c: var(--bubble-fill-color, #4ECDC4); /* color */
+            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);
         }
         .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;
         }
+        /* Tail Rotations */
+        .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; }
+        /* Thought Bubble */
+        .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; }
+        /* Resize Handles */
+        .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; }
+        /* Controls */
+        .edit-controls {
+            position: fixed; bottom: 20px; right: 20px; width: 220px;
+            background: rgba(44, 62, 80, 0.95); color: white; padding: 15px;
+            border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); z-index: 1000;
+        }
+        .edit-controls h4 { margin: 0 0 10px 0; color: #4ECDC4; text-align: center; }
+        .control-group { margin-top: 10px; border-top: 1px solid #555; padding-top: 10px; }
+        button, select, input { width: 100%; margin-top: 5px; padding: 6px; border-radius: 4px; border: none; cursor: pointer; font-weight: bold; }
+        .action-button { background-color: #4CAF50; color: white; }
+        .secondary-button { background-color: #f39c12; color: white; }
+        .reset-button { background-color: #e74c3c; color: white; }
+        .button-grid, .zoom-controls, .timestamp-controls, .color-picker-grid { display: grid; gap: 5px; }
+        .button-grid { grid-template-columns: 1fr 1fr; }
+        .zoom-controls { grid-template-columns: auto 1fr; align-items: center; }
+        .timestamp-controls { grid-template-columns: 1fr auto; }
+        .color-picker-grid { grid-template-columns: 1fr 1fr; }
+        .slider-container { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
+        .slider-container label { font-size: 11px; min-width: 30px; }
     </style>
 </head>
 <body>
+    <!-- UPLOAD SECTION -->
     <div id="upload-container">
         <div class="upload-box">
+            <h1>🎬 Movie to Comic</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" accept="video/*" onchange="document.getElementById('fname').innerText=this.files[0].name">
+                <span id="fname" style="display:block; margin-bottom:10px; color:#7f8c8d; font-style:italic;">No file selected</span>
+                <button class="submit-btn" type="submit">Generate Comic</button>
+            </form>
+            <div class="loading-view" id="loading-view">
                 <div class="loader"></div>
+                <p id="status-text">Starting...</p>
             </div>
         </div>
     </div>
+    <!-- EDITOR SECTION -->
     <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>
+        </div>
+        <input type="file" id="image-uploader" style="display: none;" accept="image/*">
         <div class="edit-controls">
+            <h4>✏️ Editor</h4>
+            <!-- Bubble Controls -->
+            <div class="control-group">
+                <label>Bubble:</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><small>Text</small><input type="color" id="bubble-text-color" value="#ffffff" disabled></div>
+                    <div><small>Fill</small><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</button>
+            </div>
+            <!-- Tail Controls -->
+            <div class="control-group" id="tail-controls" style="display: none;">
+                <label>Tail:</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>
+            <!-- Panel Controls -->
+            <div class="control-group">
+                <label>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">
+                     <button onclick="gotoTimestamp()" class="action-button">Go</button>
+                </div>
+                <div class="zoom-controls" style="margin-top:5px;">
+                    <button onclick="resetPanelTransform()" class="reset-button" style="font-size:10px; padding:2px;">Reset</button>
+                    <input type="range" id="zoom-slider" min="100" max="300" value="100" step="5" disabled>
+                </div>
+            </div>
+            <!-- Export -->
+            <div class="control-group">
+                <button onclick="exportPagesToPNG()" class="action-button" style="background-color: #2196F3;">💾 Export PNG</button>
+                <button onclick="location.reload()" class="reset-button">↺ Start Over</button>
+            </div>
         </div>
     </div>
     <script>
+        // --- CLIENT SIDE SESSION MANAGEMENT ---
         function generateUUID() {
             return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                 var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                 return v.toString(16);
             });
         }
         let sid = localStorage.getItem('comic_sid');
+        if(!sid) { sid = generateUUID(); localStorage.setItem('comic_sid', sid); }
+        console.log("SID:", sid);
+        let statusInterval;
+        let currentlySelectedBubble = null, currentlySelectedPanel = null;
+        let draggedBubble = null, offset = {x:0, y:0};
+        let isPanning = false, panStartX, panStartY, panStartTx, panStartTy;
+        let isResizing = false, resizeHandle, origW, origH, origX, origY, origMX, origMY;
+        // --- UPLOAD FLOW ---
+        document.getElementById('upload-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
             const file = document.getElementById('file-upload').files[0];
+            if(!file) return alert("Please select a file");
+            document.getElementById('upload-view').style.display = 'none';
+            document.getElementById('loading-view').style.display = 'flex';
+            const fd = new FormData(); fd.append('file', file);
+            try {
+                const res = await fetch(`/uploader?sid=${sid}`, {method:'POST', body:fd});
+                if(res.ok) statusInterval = setInterval(checkStatus, 2000);
+                else { alert("Upload failed"); location.reload(); }
+            } catch(e) { console.error(e); alert("Error uploading"); }
+        });
         async function checkStatus() {
+            try {
+                const res = await fetch(`/status?sid=${sid}`);
+                const data = await res.json();
+                document.getElementById('status-text').textContent = data.message;
+                if(data.progress >= 100) {
+                    clearInterval(statusInterval);
+                    document.getElementById('upload-container').style.display = 'none';
+                    document.getElementById('editor-container').style.display = 'block';
+                    loadComic();
+                } else if(data.progress < 0) {
+                    clearInterval(statusInterval);
+                    alert("Error: " + data.message);
+                    location.reload();
+                }
+            } catch(e) {}
         }
+        // --- EDITOR LOGIC ---
         function loadComic() {
             fetch(`/output/pages.json?sid=${sid}`).then(r=>r.json()).then(data => {
+                const container = document.getElementById('comic-pages');
+                container.innerHTML = '';
+                data.forEach((page, i) => {
+                    const wrapper = document.createElement('div');
+                    wrapper.className = 'comic-page';
+                    wrapper.id = 'page-'+i;
                     const grid = document.createElement('div');
                     grid.className = 'comic-grid';
+                    page.panels.forEach((p, j) => {
                         const pDiv = document.createElement('div');
                         pDiv.className = 'panel';
+                        pDiv.onclick = (e) => { e.stopPropagation(); selectPanel(pDiv); };
                         const img = document.createElement('img');
+                        img.src = `/frames/${p.image}?sid=${sid}`;
+                        img.onmousedown = startPan;
                         pDiv.appendChild(img);
+                        // Bubbles
+                        if(page.bubbles && page.bubbles[j] && page.bubbles[j].dialog) {
+                            const b = createBubbleElement({
+                                text: page.bubbles[j].dialog,
+                                left: (page.bubbles[j].bubble_offset_x||50)+'px',
+                                top: (page.bubbles[j].bubble_offset_y||20)+'px'
+                            });
                             pDiv.appendChild(b);
                         }
                         grid.appendChild(pDiv);
                     });
+                    wrapper.appendChild(grid);
+                    // Title wrapper
+                    const outer = document.createElement('div');
+                    outer.className = 'page-wrapper';
+                    outer.innerHTML = `<h2 class="page-title">Page ${i+1}</h2>`;
+                    outer.appendChild(wrapper);
+                    container.appendChild(outer);
+                });
+                // Setup Global Listeners
+                document.addEventListener('mousemove', (e) => {
+                    if(isPanning) panImage(e);
+                    if(draggedBubble) drag(e);
+                    if(isResizing) resizeBubble(e);
+                });
+                document.addEventListener('mouseup', () => {
+                    stopPan(); stopDrag(); stopResize();
                 });
+                // Color Listeners
+                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);
+                });
+                // Slider Listener
+                document.getElementById('zoom-slider').addEventListener('input', handleZoom);
+                document.getElementById('tail-slider').addEventListener('input', (e) => slideTail(e.target.value));
+            });
         }
+        function createBubbleElement(d) {
+            const b = document.createElement('div');
+            b.className = 'speech-bubble speech tail-bottom';
+            b.style.left = d.left; b.style.top = d.top;
+            b.dataset.type = 'speech';
+            const span = document.createElement('span');
+            span.className = 'bubble-text';
+            span.textContent = d.text;
+            b.appendChild(span);
+            // Handles
+            ['nw','ne','sw','se'].forEach(dir => {
+                const h = document.createElement('div'); h.className = `resize-handle ${dir}`;
+                h.onmousedown = (e) => startResize(e, dir);
+                b.appendChild(h);
+            });
+            b.onmousedown = startDrag;
+            b.onclick = (e) => { e.stopPropagation(); selectBubble(b); };
+            b.ondblclick = (e) => { e.stopPropagation(); editBubbleText(b); };
+            return b;
         }
+        function selectPanel(el) {
+            document.querySelectorAll('.panel.selected').forEach(e=>e.classList.remove('selected'));
+            el.classList.add('selected');
+            currentlySelectedPanel = el;
+            selectBubble(null);
+            resetPanelTransform(true); // Load zoom state
+        }
+        function selectBubble(el) {
+            if(currentlySelectedBubble) currentlySelectedBubble.classList.remove('selected');
+            currentlySelectedBubble = el;
+            const tailControls = document.getElementById('tail-controls');
+            if(el) {
+                el.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;
+                tailControls.style.display = (el.dataset.type === 'speech') ? 'block' : 'none';
+            } else {
+                document.getElementById('bubble-text-color').disabled = true;
+                document.getElementById('bubble-fill-color').disabled = true;
+                document.getElementById('bubble-type-select').disabled = true;
+                document.getElementById('zoom-slider').disabled = false;
+                tailControls.style.display = 'none';
+            }
+        }
+        // --- BUBBLE ACTIONS ---
+        function startDrag(e) {
+            const b = e.target.closest('.speech-bubble');
+            if(!b || e.target.classList.contains('resize-handle')) return;
+            draggedBubble = b; selectBubble(b);
+            const r = b.getBoundingClientRect();
+            offset = {x: e.clientX - r.left, y: e.clientY - r.top};
+        }
+        function drag(e) {
+            if(!draggedBubble) return;
+            e.preventDefault();
+            const p = draggedBubble.parentElement.getBoundingClientRect();
+            draggedBubble.style.left = (e.clientX - p.left - offset.x) + 'px';
+            draggedBubble.style.top = (e.clientY - p.top - offset.y) + 'px';
+        }
+        function stopDrag() { draggedBubble = null; }
+        function startResize(e, dir) {
+            e.stopPropagation(); e.preventDefault();
+            isResizing = true; resizeHandle = dir;
+            const b = currentlySelectedBubble;
+            const r = b.getBoundingClientRect();
+            origW = r.width; origH = r.height; origX = b.offsetLeft; origY = b.offsetTop;
+            origMX = e.clientX; origMY = e.clientY;
+        }
+        function resizeBubble(e) {
+            if(!isResizing) return;
+            const dx = e.clientX - origMX; const dy = e.clientY - origMY;
+            const b = currentlySelectedBubble;
+            if(resizeHandle.includes('e')) b.style.width = (origW + dx) + 'px';
+            if(resizeHandle.includes('w')) { b.style.width = (origW - dx) + 'px'; b.style.left = (origX + dx) + 'px'; }
+            if(resizeHandle.includes('s')) b.style.height = (origH + dy) + 'px';
+            if(resizeHandle.includes('n')) { b.style.height = (origH - dy) + 'px'; b.style.top = (origY + 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;
+            currentlySelectedBubble.className = `speech-bubble ${val} tail-bottom selected`;
+            currentlySelectedBubble.dataset.type = val;
+            selectBubble(currentlySelectedBubble); // refresh UI
+        }
+        function editBubbleText(b) {
+            const span = b.querySelector('.bubble-text');
+            const txt = document.createElement('textarea');
+            txt.value = span.textContent;
+            b.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 a panel first");
+            const b = createBubbleElement({text:"Text...", left:"20px", top:"20px"});
+            currentlySelectedPanel.appendChild(b);
+            selectBubble(b);
+        }
+        function deleteBubble() { if(currentlySelectedBubble) { currentlySelectedBubble.remove(); selectBubble(null); } }
+        // --- PANEL ACTIONS ---
+        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;
+            panStartTx = parseFloat(img.dataset.translateX||0);
+            panStartTy = parseFloat(img.dataset.translateY||0);
+        }
+        function panImage(e) {
+            if(!isPanning || !currentlySelectedPanel) return;
+            const img = currentlySelectedPanel.querySelector('img');
+            img.dataset.translateX = panStartTx + (e.clientX - panStartX);
+            img.dataset.translateY = panStartTy + (e.clientY - panStartY);
+            updateImageTransform(img);
+        }
+        function stopPan() { 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(loadOnly=false) {
+            if(!currentlySelectedPanel) return;
+            const img = currentlySelectedPanel.querySelector('img');
+            if(!loadOnly) {
+                img.dataset.zoom=100; img.dataset.translateX=0; img.dataset.translateY=0;
+            }
+            document.getElementById('zoom-slider').value = img.dataset.zoom || 100;
+            updateImageTransform(img);
+        }
+        function replacePanelImage() {
+            if(!currentlySelectedPanel) return alert("Select panel");
+            const img = currentlySelectedPanel.querySelector('img');
+            const inp = document.getElementById('image-uploader');
+            inp.onchange = async (e) => {
+                const f = e.target.files[0]; if(!f) return;
+                const fd = new FormData(); fd.append('image', f);
+                img.style.opacity=0.5;
+                const r = await fetch(`/replace_panel?sid=${sid}`, {method:'POST', body:fd});
+                const d = await r.json();
+                if(d.success) { img.src = `/frames/${d.new_filename}?sid=${sid}&t=${Date.now()}`; resetPanelTransform(); }
+                else alert(d.error);
+                img.style.opacity=1;
+            };
+            inp.click();
+        }
+        async function adjustFrame(dir) {
+            if(!currentlySelectedPanel) return alert("Select panel");
+            const img = currentlySelectedPanel.querySelector('img');
+            let fname = img.src.split('/').pop().split('?')[0];
+            const r = await fetch(`/regenerate_frame?sid=${sid}`, {
+                method:'POST', headers:{'Content-Type':'application/json'},
+                body: JSON.stringify({filename:fname, direction:dir})
+            });
+            const d = await r.json();
+            if(d.success) img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`;
+            else alert(d.message);
+        }
+        async function gotoTimestamp() {
+            if(!currentlySelectedPanel) return alert("Select panel");
+            const img = currentlySelectedPanel.querySelector('img');
+            let val = document.getElementById('timestamp-input').value;
+            if(val.includes(':')) { const p=val.split(':'); val = parseInt(p[0])*60 + parseFloat(p[1]); }
+            let fname = img.src.split('/').pop().split('?')[0];
+            const r = await fetch(`/goto_timestamp?sid=${sid}`, {
+                method:'POST', headers:{'Content-Type':'application/json'},
+                body: JSON.stringify({filename:fname, timestamp:val})
+            });
+            const d = await r.json();
+            if(d.success) img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`;
+            else alert(d.message);
+        }
+        async function exportPagesToPNG() {
+            const pgs = document.querySelectorAll('.comic-page');
+            for(let i=0; i<pgs.length; i++) {
                 try {
+                    const url = await htmlToImage.toPng(pgs[i], {pixelRatio:3});
                     const a = document.createElement('a');
+                    a.download = `comic-page-${i+1}.png`; a.href=url; a.click();
                 } catch(e) { console.error(e); alert("Export failed"); }
             }
         }
 </html>
 '''
+# --- BACKEND LOGIC ---
 class EnhancedComicGenerator:
     def __init__(self, sid):
         self.sid = sid
         os.makedirs(self.output_dir, exist_ok=True)
         self.video_fps = None
+        self.frame_metadata = {}
     def update_status(self, message, progress):
         try:
                 json.dump({'message': message, 'progress': progress}, f)
         except: pass
+    def cleanup_generated(self):
         if os.path.exists(self.frames_dir): shutil.rmtree(self.frames_dir)
+        if os.path.exists(self.output_dir): shutil.rmtree(self.output_dir)
         os.makedirs(self.frames_dir, exist_ok=True)
+        os.makedirs(self.output_dir, exist_ok=True)
+        srt = os.path.join(self.user_dir, 'subs.srt')
+        if os.path.exists(srt): os.remove(srt)
     def generate_comic(self):
         try:
             if cv2 is None: raise Exception("OpenCV missing on server.")
+            self.cleanup_generated()
+            self.update_status("Processing Video...", 5)
             cap = cv2.VideoCapture(self.video_path)
             if not cap.isOpened(): raise Exception("Invalid Video")
             self.video_fps = cap.get(cv2.CAP_PROP_FPS) or 25
+            total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
             cap.release()
             # 1. Subtitles
+            self.update_status("Extracting Dialogue...", 20)
+            user_srt = os.path.join(self.user_dir, 'subs.srt')
             try:
+                get_real_subtitles(self.video_path)
+                if os.path.exists('test1.srt'): shutil.move('test1.srt', user_srt)
             except:
+                with open(user_srt, 'w') as f: f.write("1\n00:00:00,000 --> 00:00:05,000\nStart\n")
+            # 2. Keyframes
+            self.update_status("Generating Panels...", 40)
+            with open(user_srt, 'r', encoding='utf-8') as f: subs = list(srt.parse(f.read()))
+            cap = cv2.VideoCapture(self.video_path)
             frame_files = []
             bubbles = []
+            limit_subs = subs[:12] # Limit to 12 panels for demo speed
             for i, sub in enumerate(limit_subs):
                 mid = (sub.start.total_seconds() + sub.end.total_seconds()) / 2
                     fname = f"frame_{i}.png"
                     cv2.imwrite(os.path.join(self.frames_dir, fname), frame)
                     frame_files.append(fname)
+                    # Map file to time for regeneration
+                    self.frame_metadata[fname] = mid
                     bubbles.append(bubble(
                         dialog=sub.content,
+                        bubble_offset_x=50, bubble_offset_y=20,
+                        lip_x=-1, lip_y=-1, emotion='normal'
                     ))
             cap.release()
+            # Save metadata for features like "Next Frame"
+            with open(os.path.join(self.frames_dir, 'frame_metadata.json'), 'w') as f:
+                json.dump(self.frame_metadata, f)
+            # 3. Enhance
+            self.update_status("Enhancing...", 70)
+            # (Call enhancers here if needed)
+            # 4. Assemble
+            self.update_status("Finalizing...", 90)
             pages_data = []
             for i in range(0, len(frame_files), 4):
                 batch_f = frame_files[i:i+4]
                 batch_b = bubbles[i:i+4]
                 panels = [{'image': f} for f in batch_f]
                 b_data = [b.__dict__ if hasattr(b, '__dict__') else b for b in batch_b]
                 pages_data.append({'panels': panels, 'bubbles': b_data})
             with open(os.path.join(self.output_dir, 'pages.json'), 'w') as f:
                 json.dump(pages_data, f)
             self.update_status("Done!", 100)
         except Exception as e:
             traceback.print_exc()
             self.update_status(f"Error: {str(e)}", -1)
+    # --- Helper Methods for Editor ---
+    def regenerate_frame(self, fname, direction):
+        try:
+            meta_path = os.path.join(self.frames_dir, 'frame_metadata.json')
+            if not os.path.exists(meta_path): return {"success":False, "message":"No metadata"}
+            with open(meta_path,'r') as f: meta = json.load(f)
+            if fname not in meta: return {"success":False, "message":"Frame not found"}
+            curr_time = meta[fname]
+            if not self.video_fps:
+                cap = cv2.VideoCapture(self.video_path); self.video_fps = cap.get(cv2.CAP_PROP_FPS); cap.release()
+            offset = (1.0/self.video_fps) * (1 if direction=='forward' else -1)
+            new_time = max(0, curr_time + offset)
+            cap = cv2.VideoCapture(self.video_path)
+            cap.set(cv2.CAP_PROP_POS_MSEC, new_time*1000)
+            ret, frame = cap.read()
+            cap.release()
+            if ret:
+                cv2.imwrite(os.path.join(self.frames_dir, fname), frame)
+                meta[fname] = new_time
+                with open(meta_path,'w') as f: json.dump(meta, f)
+                return {"success":True}
+            return {"success":False, "message":"End of video"}
+        except Exception as e: return {"success":False, "message":str(e)}
+    def get_frame_at_timestamp(self, fname, ts):
+        try:
+            cap = cv2.VideoCapture(self.video_path)
+            cap.set(cv2.CAP_PROP_POS_MSEC, float(ts)*1000)
+            ret, frame = cap.read()
+            cap.release()
+            if ret:
+                cv2.imwrite(os.path.join(self.frames_dir, fname), frame)
+                # Update meta
+                meta_path = os.path.join(self.frames_dir, 'frame_metadata.json')
+                if os.path.exists(meta_path):
+                    with open(meta_path,'r') as f: meta = json.load(f)
+                    meta[fname] = float(ts)
+                    with open(meta_path,'w') as f: json.dump(meta, f)
+                return {"success":True}
+            return {"success":False, "message":"Invalid time"}
+        except Exception as e: return {"success":False, "message":str(e)}
+# --- ROUTES ---
 @app.route('/')
+def index(): return INDEX_HTML
 @app.route('/uploader', methods=['POST'])
 def upload():
     sid = request.args.get('sid')
     if not sid: return "Missing SID", 400
+    f = request.files['file']
     gen = EnhancedComicGenerator(sid)
+    f.save(gen.video_path)
     gen.update_status("Starting...", 5)
     threading.Thread(target=gen.generate_comic).start()
     return jsonify({'success': True})
 @app.route('/status')
 def get_status():
     sid = request.args.get('sid')
+    if not sid: return jsonify({'progress': -1, 'message': "No SID"})
+    path = os.path.join(BASE_USER_DIR, sid, 'output', 'status.json')
+    if os.path.exists(path): return send_file(path)
+    return jsonify({'progress': 0, 'message': "Waiting..."})
 @app.route('/output/<path:filename>')
 def get_output(filename):
     sid = request.args.get('sid')
     return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
 @app.route('/frames/<path:filename>')
 def get_frame(filename):
     sid = request.args.get('sid')
     return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'frames'), filename)
+@app.route('/regenerate_frame', methods=['POST'])
+def regen_frame():
+    sid = request.args.get('sid')
+    d = request.get_json()
+    return jsonify(EnhancedComicGenerator(sid).regenerate_frame(d['filename'], d['direction']))
+@app.route('/goto_timestamp', methods=['POST'])
+def go_time():
+    sid = request.args.get('sid')
+    d = request.get_json()
+    return jsonify(EnhancedComicGenerator(sid).get_frame_at_timestamp(d['filename'], d['timestamp']))
+@app.route('/replace_panel', methods=['POST'])
+def rep_panel():
+    sid = request.args.get('sid')
+    f = request.files['image']
+    gen = EnhancedComicGenerator(sid)
+    fname = f"replaced_{int(time.time())}.png"
+    f.save(os.path.join(gen.frames_dir, fname))
+    return jsonify({'success': True, 'new_filename': fname})
 if __name__ == '__main__':
     os.makedirs(BASE_USER_DIR, exist_ok=True)
     port = int(os.getenv("PORT", 7860))