RealComic

Configuration error

App Files Files Community

tester343 commited on Dec 3, 2025

Commit

809edf1

verified ·

1 Parent(s): 75c73c6

Update app_enhanced.py

Browse files

Files changed (1) hide show

app_enhanced.py +243 -180

app_enhanced.py CHANGED Viewed

@@ -9,7 +9,7 @@ import logging
 from concurrent.futures import ThreadPoolExecutor
 from flask import Flask, render_template, request, jsonify, send_from_directory, send_file
-# --- 0. LOGGING SETUP ---
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
@@ -19,13 +19,15 @@ try:
     import numpy as np
     from PIL import Image
     import srt
-    print("✅ OpenCV, Numpy, Pillow, SRT loaded successfully.")
 except ImportError as e:
     print(f"❌ CRITICAL ERROR: Missing python library. {e}")
-    print("⚠️ Please ensure 'opencv-python-headless' is in requirements.txt")
-    cv2 = None; np = None; Image = None; srt = None
-# --- 2. BACKEND IMPORTS WITH DUMMIES ---
 def dummy_func(*args, **kwargs): return 0, 0, None, None
 try:
@@ -35,10 +37,13 @@ except:
 try:
     from backend.simple_color_enhancer import SimpleColorEnhancer
-    from backend.quality_color_enhancer import QualityColorEnhancer
 except:
     class SimpleColorEnhancer:
         def enhance_single(self, *args): pass
     class QualityColorEnhancer:
         def enhance_single(self, *args): pass
@@ -64,10 +69,12 @@ except:
         def place_bubble_ai(self, p, l): return 50, 20
     ai_bubble_placer = DummyPlacer()
-# --- FLASK SETUP ---
 app = Flask(__name__)
-BASE_USER_DIR = "userdata"
 INDEX_HTML = '''
 <!DOCTYPE html>
 <html lang="en">
@@ -75,201 +82,256 @@ 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&family=Lato&display=swap" rel="stylesheet">
     <style>
         body { background-color: #fdf6e3; font-family: 'Lato', 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; }
-        .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 USER CSS FOR SPEECH BUBBLE (EXPORT SAFE) */
         .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: 14px; text-align: center;
-            min-width: 80px; 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;
         }
         .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: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: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: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.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; }
-        .slider-container { margin-top:10px; }
-        .slider-container input { width: 100%; }
     </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</span>
             <button class="submit-btn" onclick="upload()">Generate</button>
-            <div id="loading" style="display:none;">
                 <div class="loader"></div>
-                <p id="status">Starting...</p>
             </div>
         </div>
     </div>
     <div id="editor-container">
-        <div id="comic-pages"></div>
         <div class="edit-controls">
             <h4>Editor</h4>
-            <label>Tail Pos:</label>
-            <div class="slider-container"><input type="range" id="tail-slider" min="10" max="90" value="50" oninput="slideTail(this.value)"></div>
-            <button onclick="exportToPng()">💾 Export PNG</button>
-            <button onclick="location.reload()" style="color:red; margin-top:10px;">↺ Reset</button>
         </div>
     </div>
     <script>
-        // --- 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 interval;
-        let currentlySelectedBubble = null;
         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';
-            try {
-                const res = await fetch(`/uploader?sid=${sid}`, {method:'POST', body:fd});
-                if(res.ok) {
-                    interval = setInterval(checkStatus, 2000);
-                } else {
-                    const err = await res.json();
-                    alert("Upload Error: " + (err.message || "Unknown"));
-                    location.reload();
-                }
-            } catch(e) {
-                console.error(e);
-                alert("Connection Failed. Check logs.");
-            }
         }
         async function checkStatus() {
-            try {
-                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("Generation Error: " + data.message);
-                    location.reload();
-                }
-            } catch(e) { console.error("Status check failed", e); }
         }
         function loadComic() {
             fetch(`/output/pages.json?sid=${sid}`).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}?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 tail-bottom';
-                            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);
                 });
             });
         }
-        function makeInteractive(el) {
-            el.onmousedown = function(e) {
                 e.stopPropagation();
-                currentlySelectedBubble = el;
-                document.querySelectorAll('.speech-bubble').forEach(b => b.classList.remove('selected'));
-                el.classList.add('selected');
-                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; }
             };
         }
-        function slideTail(val) {
-            if(currentlySelectedBubble) {
-                currentlySelectedBubble.style.setProperty('--tail-pos', val + '%');
             }
         }
-        async function exportToPng() {
-            const pages = document.querySelectorAll('.comic-page');
-            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>
@@ -296,74 +358,62 @@ class EnhancedComicGenerator:
             with open(self.status_file, 'w') as f:
                 json.dump({'message': message, 'progress': progress}, f)
         except: pass
     def cleanup_previous_run(self):
-        # Remove old frames/output files but keep directories
-        for folder in [self.frames_dir, self.output_dir]:
-            if os.path.exists(folder):
-                for filename in os.listdir(folder):
-                    file_path = os.path.join(folder, filename)
-                    try:
-                        if os.path.isfile(file_path) or os.path.islink(file_path):
-                            os.unlink(file_path)
-                        elif os.path.isdir(file_path):
-                            shutil.rmtree(file_path)
-                    except Exception as e:
-                        print(f'Failed to delete {file_path}. Reason: {e}')
     def generate_comic(self):
         try:
-            print(f"[{self.sid}] Generation thread started.")
-            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(): raise Exception("Invalid Video File")
             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...", 30)
             user_srt = os.path.join(self.user_dir, 'subs.srt')
             try:
-                get_real_subtitles(self.video_path) # Should produce test1.srt
-                if os.path.exists('test1.srt'):
-                    shutil.move('test1.srt', user_srt)
-            except Exception as e:
-                print(f"Subtitle generation warning: {e}")
-                if not os.path.exists(user_srt):
-                     with open(user_srt, 'w') as f: f.write("1\n00:00:01,000 --> 00:00:04,000\nComic Scene 1\n")
-            # 2. Extract Frames
-            self.update_status("Generating Panels...", 50)
-            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 = []
-            # Simple sampling logic
-            limit_subs = subs[:12]
             for i, sub in enumerate(limit_subs):
-                mid = (sub.start.total_seconds() + sub.end.total_seconds()) / 2
-                cap.set(cv2.CAP_PROP_POS_MSEC, mid * 1000)
                 ret, frame = cap.read()
                 if ret:
                     fname = f"frame_{i}.png"
                     cv2.imwrite(os.path.join(self.frames_dir, fname), frame)
                     frame_files.append(fname)
-                    # Pass all necessary args 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...", 90)
             pages_data = []
@@ -376,17 +426,15 @@ class EnhancedComicGenerator:
             with open(os.path.join(self.output_dir, 'pages.json'), 'w') as f:
                 json.dump(pages_data, f)
-            # Also save the HTML template for debug purposes
-            with open(os.path.join(self.output_dir, 'page.html'), 'w') as f:
                 f.write(INDEX_HTML)
             self.update_status("Done!", 100)
-            print(f"[{self.sid}] Generation Complete.")
         except Exception as e:
             traceback.print_exc()
-            self.update_status(f"Failed: {str(e)}", -1)
 # --- ROUTES ---
 @app.route('/')
@@ -395,27 +443,20 @@ def index(): return INDEX_HTML
 @app.route('/uploader', methods=['POST'])
 def upload():
     sid = request.args.get('sid')
-    if not sid: return jsonify({'message': 'No SID provided'}), 400
-    print(f"[SERVER] Upload received for SID: {sid}")
-    if 'file' not in request.files: return jsonify({'message': 'No file part'}), 400
     f = request.files['file']
     gen = EnhancedComicGenerator(sid)
-    gen.cleanup_previous_run()
     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..."})
@@ -430,8 +471,30 @@ def get_frame(filename):
     sid = request.args.get('sid')
     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))
-    print(f"🚀 Server starting on port {port}")
-    app.run(host='0.0.0.0', port=port)

 from concurrent.futures import ThreadPoolExecutor
 from flask import Flask, render_template, request, jsonify, send_from_directory, send_file
+# --- 0. LOGGING & CONFIG ---
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
     import numpy as np
     from PIL import Image
     import srt
 except ImportError as e:
     print(f"❌ CRITICAL ERROR: Missing python library. {e}")
+    # Dummies to allow app startup (will fail on generation if not fixed)
+    cv2 = None
+    np = None
+    Image = None
+    srt = None
+# --- 2. BACKEND MODULE IMPORTS (WITH FALLBACKS) ---
 def dummy_func(*args, **kwargs): return 0, 0, None, None
 try:
 try:
     from backend.simple_color_enhancer import SimpleColorEnhancer
 except:
     class SimpleColorEnhancer:
         def enhance_single(self, *args): pass
+try:
+    from backend.quality_color_enhancer import QualityColorEnhancer
+except:
     class QualityColorEnhancer:
         def enhance_single(self, *args): pass
         def place_bubble_ai(self, p, l): return 50, 20
     ai_bubble_placer = DummyPlacer()
+# --- FLASK APP SETUP ---
 app = Flask(__name__)
+BASE_USER_DIR = "userdata"  # Root folder for all sessions
+# --- HTML INTERFACE ---
 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>
+    <!-- html-to-image: Required for accurate PNG export of CSS gradients -->
     <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&family=Lato&display=swap" rel="stylesheet">
     <style>
         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; }
+        /* EDITOR VIEW */
         #editor-container { display: none; 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; background: #2c3e50; color: white; border-radius: 8px; cursor: pointer; font-weight: bold; }
+        .submit-btn { width: 100%; padding: 15px; background: #e67e22; color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; 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; margin: 20px auto; }
         @keyframes ball { 0%{background-position:0 50%} 100%{background-position:100px 50%} }
+        #status-text { margin-top: 10px; font-size: 18px; }
+        /* COMIC LAYOUT */
+        .comic-container-wrapper { max-width: 1200px; margin: 0 auto; padding-bottom: 100px; }
+        .comic-page { background: white; width: 600px; height: 400px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: relative; overflow: hidden; border: 2px solid #000; margin: 0 auto 30px; }
+        .comic-grid { display: grid; grid-template-columns: 285px 285px; grid-template-rows: 185px 185px; gap: 10px; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; }
+        .panel { position: relative; overflow: hidden; border: 2px solid #000; background: #eee; cursor: pointer; }
+        .panel.selected { outline: 3px solid #2196F3; outline-offset: -3px; }
+        .panel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.1s; }
+        .panel img.pannable { cursor: grab; }
+        .panel img.panning { cursor: grabbing; }
+        /* SPEECH BUBBLE (SHARK FIN - EXPORT SAFE) */
+        .speech-bubble {
+            position: absolute; display: flex; justify-content: center; align-items: center;
+            width: 150px; height: 80px; min-width: 60px; min-height: 40px; box-sizing: border-box;
+            z-index: 10; cursor: move; font-family: 'Comic Neue', cursive; font-weight: bold;
+            font-size: 14px; text-align: center;
+        }
+        .bubble-text { padding: 0.8em; 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.9); text-align:center; padding:8px; z-index:100; resize:none; }
+        /* The Exact CSS Logic Requested (Adapted for Export Compatibility) */
         .speech-bubble.speech {
+            --b: 3em;   /* tail base */
+            --h: 1.8em; /* tail height */
+            --t: 0.6;   /* thickness */
+            --p: var(--tail-pos, 50%);
+            --r: 1.2em; /* radius */
+            --c: var(--bubble-fill-color, #4ECDC4); /* color */
+            background: var(--c);
+            color: var(--bubble-text-color, #fff);
+            padding: 1em;
+            position: absolute;
+            /* Body Radius */
             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);
         }
+        /* The Tail (Using Gradient instead of Mask for Export Safety) */
         .speech-bubble.speech:before {
             content: ""; position: absolute; width: var(--b); height: var(--h);
+            /* Radial Gradient simulates the concave mask curve */
             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 Positioning */
         .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 dots CSS omitted for brevity, handled in JS if needed) */
+        .resize-handle { position: absolute; width: 10px; height: 10px; background: #2196F3; border: 1px solid white; border-radius: 50%; display: none; }
+        .speech-bubble.selected .resize-handle { display: block; }
+        .resize-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
+        .edit-controls { position: fixed; bottom: 20px; right: 20px; width: 220px; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); z-index: 100; }
+        .edit-controls button, input, select { width: 100%; margin-top: 5px; padding: 5px; }
+        .slider-container { margin-top: 10px; }
     </style>
 </head>
 <body>
+    <!-- UPLOAD -->
     <div id="upload-container">
         <div class="upload-box">
+            <h1>🎬 Movie to Comic</h1>
+            <input type="file" id="file-upload" class="file-input" onchange="document.getElementById('fn').innerText=this.files[0].name">
             <label for="file-upload" class="file-label">Choose Video</label>
+            <span id="fn">No file</span>
             <button class="submit-btn" onclick="upload()">Generate</button>
+            <div class="loading-view" id="loading-view">
                 <div class="loader"></div>
+                <p id="status-text">Starting...</p>
             </div>
         </div>
     </div>
+    <!-- EDITOR -->
     <div id="editor-container">
+        <div class="comic-container-wrapper">
+            <h1 style="text-align:center;">Generated Comic</h1>
+            <div id="comic-pages"></div>
+        </div>
         <div class="edit-controls">
             <h4>Editor</h4>
+            <button onclick="addBubble()">+ Bubble</button>
+            <button onclick="deleteBubble()" style="background:#ffcccc">Delete</button>
+            <label>Tail Position:</label>
+            <input type="range" id="tail-slider" min="10" max="90" value="50" oninput="slideTail(this.value)">
+            <button onclick="rotateTail()">Rotate Tail</button>
+            <hr>
+            <button onclick="exportComic()" style="background:#ccffcc">💾 Save PNG</button>
+            <button onclick="location.reload()">↺ New Video</button>
         </div>
     </div>
     <script>
+        // Session ID
+        function genUUID(){ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,c=>{var r=Math.random()*16|0,v=c=='x'?r:(r&0x3|0x8);return v.toString(16);}); }
+        let sid = localStorage.getItem('comic_sid') || genUUID();
+        localStorage.setItem('comic_sid', sid);
         console.log("SID:", sid);
+        let interval, selectedBubble;
         async function upload() {
+            const f = document.getElementById('file-upload').files[0];
+            if(!f) return alert("Select file");
             document.querySelector('.upload-box').style.display='none';
+            document.getElementById('loading-view').style.display='flex';
+            const fd = new FormData(); fd.append('file', f);
+            const r = await fetch(`/uploader?sid=${sid}`, {method:'POST', body:fd});
+            if(r.ok) interval = setInterval(checkStatus, 2000);
+            else { alert("Upload failed"); location.reload(); }
         }
         async function checkStatus() {
+            const r = await fetch(`/status?sid=${sid}`);
+            const d = await r.json();
+            document.getElementById('status-text').innerText = d.message;
+            if(d.progress >= 100) {
+                clearInterval(interval);
+                document.getElementById('upload-container').style.display='none';
+                document.getElementById('editor-container').style.display='block';
+                loadComic();
+            }
         }
         function loadComic() {
             fetch(`/output/pages.json?sid=${sid}`).then(r=>r.json()).then(data => {
+                const con = document.getElementById('comic-pages');
+                con.innerHTML = '';
+                data.forEach((p,i) => {
                     const div = document.createElement('div');
                     div.className = 'comic-page';
                     const grid = document.createElement('div');
                     grid.className = 'comic-grid';
                     p.panels.forEach((pan, j) => {
                         const pDiv = document.createElement('div');
                         pDiv.className = 'panel';
+                        pDiv.innerHTML = `<img src="/frames/${pan.image}?sid=${sid}">`;
+                        if(p.bubbles && p.bubbles[j]) {
+                            const b = createBubble(p.bubbles[j].dialog, p.bubbles[j].bubble_offset_x, p.bubbles[j].bubble_offset_y);
                             pDiv.appendChild(b);
                         }
                         grid.appendChild(pDiv);
                     });
                     div.appendChild(grid);
+                    con.appendChild(div);
                 });
             });
         }
+        function createBubble(text, x, y) {
+            const b = document.createElement('div');
+            b.className = 'speech-bubble speech tail-bottom';
+            b.style.left = (x||50)+'px'; b.style.top = (y||20)+'px';
+            b.innerHTML = `<span class="bubble-text">${text||'Text'}</span><div class="resize-handle se"></div>`;
+            b.onmousedown = function(e) {
+                if(e.target.classList.contains('resize-handle')) return;
+                e.stopPropagation(); selectedBubble = b;
+                document.querySelectorAll('.speech-bubble').forEach(el=>el.classList.remove('selected'));
+                b.classList.add('selected');
+                const ox = e.clientX - b.offsetLeft, oy = e.clientY - b.offsetTop;
+                document.onmousemove = function(ev) {
+                    b.style.left = (ev.clientX-ox)+'px'; b.style.top = (ev.clientY-oy)+'px';
+                }
+                document.onmouseup = () => document.onmousemove = null;
+            };
+            b.querySelector('.resize-handle').onmousedown = function(e) {
                 e.stopPropagation();
+                const ox = e.clientX, oy = e.clientY, ow = b.offsetWidth, oh = b.offsetHeight;
                 document.onmousemove = function(ev) {
+                    b.style.width = (ow + ev.clientX - ox) + 'px';
+                    b.style.height = (oh + ev.clientY - oy) + 'px';
                 }
+                document.onmouseup = () => document.onmousemove = null;
+            };
+            b.ondblclick = function(e) {
+                e.stopPropagation();
+                const t = b.querySelector('.bubble-text');
+                const i = document.createElement('textarea');
+                i.value = t.innerText;
+                b.appendChild(i); t.style.display='none'; i.focus();
+                i.onblur = function() { t.innerText = i.value; i.remove(); t.style.display='block'; }
             };
+            return b;
+        }
+        function slideTail(v) { if(selectedBubble) selectedBubble.style.setProperty('--tail-pos', v+'%'); }
+        function rotateTail() {
+            if(!selectedBubble) return;
+            const b = selectedBubble;
+            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 addBubble() {
+            if(document.querySelector('.panel')) {
+                document.querySelector('.panel').appendChild(createBubble("New", 20, 20));
             }
         }
+        function deleteBubble() { if(selectedBubble) selectedBubble.remove(); }
+        async function exportComic() {
+            const pgs = document.querySelectorAll('.comic-page');
+            for(let i=0; i<pgs.length; i++) {
+                const url = await htmlToImage.toPng(pgs[i], {pixelRatio:3});
                 const a = document.createElement('a');
+                a.download = `comic-${i+1}.png`; a.href=url; a.click();
             }
         }
     </script>
             with open(self.status_file, 'w') as f:
                 json.dump({'message': message, 'progress': progress}, f)
         except: pass
     def cleanup_previous_run(self):
+        # Wipe old frames to prevent mixing comics
+        if os.path.exists(self.frames_dir):
+            for f in os.listdir(self.frames_dir):
+                try: os.remove(os.path.join(self.frames_dir, f))
+                except: pass
+        if os.path.exists(self.output_dir):
+            for f in os.listdir(self.output_dir):
+                if f != 'status.json':
+                    try: os.remove(os.path.join(self.output_dir, f))
+                    except: pass
     def generate_comic(self):
         try:
+            if cv2 is None: raise Exception("OpenCV missing on server.")
+            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
             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:01,000 --> 00:00:04,000\nScene 1\n")
+            # 2. Frames
+            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]
             for i, sub in enumerate(limit_subs):
+                mid = (sub.start.total_seconds() + sub.end.total_seconds())/2
+                cap.set(cv2.CAP_PROP_POS_MSEC, mid*1000)
                 ret, frame = cap.read()
                 if ret:
                     fname = f"frame_{i}.png"
                     cv2.imwrite(os.path.join(self.frames_dir, fname), frame)
                     frame_files.append(fname)
+                    # FIX: Provide ALL args to avoid 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...", 90)
             pages_data = []
             with open(os.path.join(self.output_dir, 'pages.json'), 'w') as f:
                 json.dump(pages_data, f)
+            # Save template for debugging (optional in this mode)
+            with open(os.path.join(self.output_dir, 'page.html'), 'w', encoding='utf-8') as f:
                 f.write(INDEX_HTML)
             self.update_status("Done!", 100)
         except Exception as e:
             traceback.print_exc()
+            self.update_status(f"Error: {str(e)}", -1)
 # --- ROUTES ---
 @app.route('/')
 @app.route('/uploader', methods=['POST'])
 def upload():
     sid = request.args.get('sid')
+    if not sid: return "No SID", 400
     f = request.files['file']
     gen = EnhancedComicGenerator(sid)
+    gen.cleanup_previous_run() # Clean old files BEFORE new generation
     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')
     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..."})
     sid = request.args.get('sid')
     return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'frames'), filename)
+# --- UTILITY ROUTES FOR EDITOR ---
+@app.route('/regenerate_frame', methods=['POST'])
+def regenerate_frame():
+    sid = request.args.get('sid')
+    data = request.get_json()
+    gen = EnhancedComicGenerator(sid)
+    return jsonify(gen.regenerate_frame(data['filename'], data['direction']))
+@app.route('/goto_timestamp', methods=['POST'])
+def goto_timestamp():
+    sid = request.args.get('sid')
+    data = request.get_json()
+    gen = EnhancedComicGenerator(sid)
+    return jsonify(gen.get_frame_at_timestamp(data['filename'], data['timestamp']))
+@app.route('/replace_panel', methods=['POST'])
+def replace_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)
+    app.run(host='0.0.0.0', port=7860)