Testcomic

Configuration error

App Files Files Community

tester343 commited on Dec 3, 2025

Commit

75c73c6

verified ·

1 Parent(s): b5ffd51

Update app_enhanced.py

Browse files

Files changed (1) hide show

app_enhanced.py +173 -606

app_enhanced.py CHANGED Viewed

@@ -9,11 +9,9 @@ import logging
 from concurrent.futures import ThreadPoolExecutor
 from flask import Flask, render_template, request, jsonify, send_from_directory, send_file
-# --- 0. SUPPRESS HUGGING FACE WARNINGS ---
-import warnings
-warnings.filterwarnings("ignore", category=UserWarning)
-os.environ["TF_CPP_MIN_LOG_LEVEL"] = "3"
-logging.getLogger("transformers").setLevel(logging.ERROR)
 # --- 1. CORE DEPENDENCY CHECKS ---
 try:
@@ -21,56 +19,42 @@ try:
     import numpy as np
     from PIL import Image
     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 ROBUST FALLBACKS) ---
-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
-    print("✅ SimpleColorEnhancer loaded.")
-except Exception:
     class SimpleColorEnhancer:
         def enhance_single(self, *args): pass
-try:
-    from backend.quality_color_enhancer import QualityColorEnhancer
-    print("✅ QualityColorEnhancer loaded.")
-except Exception:
     class QualityColorEnhancer:
         def enhance_single(self, *args): pass
 try:
     from backend.class_def import bubble, panel, Page
-    print("✅ Core class definitions loaded.")
-except Exception:
-    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
 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 []
@@ -80,12 +64,10 @@ except Exception:
         def place_bubble_ai(self, p, l): return 50, 20
     ai_bubble_placer = DummyPlacer()
-# --- FLASK APP SETUP ---
 app = Flask(__name__)
 BASE_USER_DIR = "userdata"
-# --- HTML INTERFACE ---
 INDEX_HTML = '''
 <!DOCTYPE html>
 <html lang="en">
@@ -96,199 +78,76 @@ INDEX_HTML = '''
     <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>
-        /* 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);
@@ -299,328 +158,118 @@ INDEX_HTML = '''
         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);
         }
-        // --- API Calls ---
-        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"); }
             }
         }
     </script>
@@ -628,7 +277,6 @@ INDEX_HTML = '''
 </html>
 '''
-# --- BACKEND LOGIC ---
 class EnhancedComicGenerator:
     def __init__(self, sid):
         self.sid = sid
@@ -642,57 +290,63 @@ class EnhancedComicGenerator:
         os.makedirs(self.output_dir, exist_ok=True)
         self.video_fps = None
-        self.frame_metadata = {}
     def update_status(self, message, progress):
         try:
             with open(self.status_file, 'w') as f:
                 json.dump({'message': message, 'progress': progress}, f)
         except: pass
-    # --- CLEANUP: Deletes OLD processing files on NEW upload ---
     def cleanup_previous_run(self):
-        print(f"[{self.sid}] 🧹 Cleaning previous run...")
-        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):
-                try: os.remove(os.path.join(self.output_dir, f))
-                except: pass
-        srt_file = os.path.join(self.user_dir, 'subs.srt')
-        if os.path.exists(srt_file): os.remove(srt_file)
     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
             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\n...\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
             for i, sub in enumerate(limit_subs):
                 mid = (sub.start.total_seconds() + sub.end.total_seconds()) / 2
@@ -702,24 +356,15 @@ class EnhancedComicGenerator:
                     fname = f"frame_{i}.png"
                     cv2.imwrite(os.path.join(self.frames_dir, fname), frame)
                     frame_files.append(fname)
-                    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()
-            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)
-            self._enhance_all_images()
-            self._enhance_quality_colors()
-            # 4. Assemble
             self.update_status("Finalizing...", 90)
             pages_data = []
             for i in range(0, len(frame_files), 4):
@@ -731,80 +376,17 @@ class EnhancedComicGenerator:
             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)
-                self._enhance_all_images(single_image_path=os.path.join(self.frames_dir, fname))
-                self._enhance_quality_colors(single_image_path=os.path.join(self.frames_dir, fname))
-                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)
-                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)
-                self._enhance_all_images(single_image_path=os.path.join(self.frames_dir, fname))
-                self._enhance_quality_colors(single_image_path=os.path.join(self.frames_dir, fname))
-                return {"success":True}
-            return {"success":False, "message":"Invalid time"}
-        except Exception as e: return {"success":False, "message":str(e)}
-    def _enhance_all_images(self, single_image_path=None):
-        try:
-            enhancer = SimpleColorEnhancer()
-            if single_image_path: enhancer.enhance_single(single_image_path)
-            else:
-                paths = [os.path.join(self.frames_dir, f) for f in os.listdir(self.frames_dir) if f.endswith('.png')]
-                with ThreadPoolExecutor() as ex: list(ex.map(enhancer.enhance_single, paths))
-        except: pass
-    def _enhance_quality_colors(self, single_image_path=None):
-        try:
-            enhancer = QualityColorEnhancer()
-            if single_image_path: enhancer.enhance_single(single_image_path)
-            else:
-                paths = [os.path.join(self.frames_dir, f) for f in os.listdir(self.frames_dir) if f.endswith('.png')]
-                with ThreadPoolExecutor() as ex: list(ex.map(enhancer.enhance_single, paths))
-        except: pass
 # --- ROUTES ---
 @app.route('/')
@@ -813,22 +395,27 @@ 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)
-    # CLEAN OLD FILES
     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..."})
@@ -843,28 +430,8 @@ 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))
     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 SETUP ---
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
 # --- 1. CORE DEPENDENCY CHECKS ---
 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:
     from backend.keyframes.keyframes import black_bar_crop
+except:
+    black_bar_crop = dummy_func
 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
 try:
     from backend.class_def import bubble, panel, Page
+except:
+    def bubble(**kwargs): return kwargs
+    def panel(**kwargs): return kwargs
     class Page:
         def __init__(self, panels, bubbles): self.panels, self.bubbles = panels, bubbles
 try:
+    from backend.ai_enhanced_core import image_processor, face_detector
     from backend.ai_bubble_placement import ai_bubble_placer
     from backend.subtitles.subs_real import get_real_subtitles
+except:
     def get_real_subtitles(v): pass
     class DummyDetector:
         def detect_faces(self, p): return []
         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">
     <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);
         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>
 </html>
 '''
 class EnhancedComicGenerator:
     def __init__(self, sid):
         self.sid = sid
         os.makedirs(self.output_dir, exist_ok=True)
         self.video_fps = None
     def update_status(self, message, progress):
         try:
             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
                     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 = []
             for i in range(0, len(frame_files), 4):
             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('/')
 @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..."})
     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)