Testcomic

Configuration error

App Files Files Community

tester343 commited on Dec 3, 2025

Commit

4d2724c

verified ·

1 Parent(s): c5b20fe

Update app_enhanced.py

Browse files

Files changed (1) hide show

app_enhanced.py +484 -501

app_enhanced.py CHANGED Viewed

@@ -9,44 +9,40 @@ import logging
 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__)
-# --- 1. CORE DEPENDENCY CHECKS ---
 try:
     import cv2
     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 IMPORTS WITH FALLBACKS ---
-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
@@ -54,518 +50,549 @@ try:
     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 get_lip_position(self, p, f): return -1, -1
-    face_detector = DummyDetector()
-    class DummyPlacer:
-        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">
 <head>
     <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; }
-        /* LAYOUT */
-        #upload-container { display: flex; flex-direction:column; 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; }
-        /* BUTTONS & INPUTS */
-        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; margin-bottom: 10px; transition:0.2s; }
-        .file-label:hover { background: #34495e; }
-        .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.2s; }
-        .submit-btn:hover { background: #d35400; }
-        .restore-btn { margin-top: 15px; background: #27ae60; color: white; padding: 10px; width: 100%; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; display: none; }
-        .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; 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 (EXACT SHARK FIN CSS) --- */
-        .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; 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.9); text-align:center; padding:8px; z-index:100; resize:none; }
         .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);
         }
-        .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 { border-radius: min(var(--r), calc(var(--p) - (1 - var(--t)) * var(--b) / 2)) min(var(--r), calc(100% - var(--p) - (1 - var(--t)) * var(--b) / 2)) var(--r) var(--r) / var(--r); }
-        .speech-bubble.speech.tail-top:before { bottom: 99%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: scaleY(-1); }
         .speech-bubble.speech.tail-left { border-radius: var(--r); }
-        .speech-bubble.speech.tail-left:before { right: 99%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: rotate(90deg); transform-origin: top right; }
-        .speech-bubble.speech.tail-right { border-radius: var(--r); }
-        .speech-bubble.speech.tail-right:before { left: 99%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: rotate(-90deg); transform-origin: top left; }
-        .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
-        .speech-bubble.thought::after { display:none; }
-        .thought-dot { position: absolute; background-color: white; border: 2px solid #555; border-radius: 50%; z-index: -1; }
-        .thought-dot-1 { width: 20px; height: 20px; bottom: -20px; left: 15px; }
-        .thought-dot-2 { width: 12px; height: 12px; bottom: -32px; left: 5px; }
-        .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; }
-        /* CONTROLS */
-        .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 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, input, select { width: 100%; margin-top: 5px; padding: 5px; }
-        .button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
-        .slider-container { margin-top: 10px; }
     </style>
 </head>
 <body>
-    <!-- UPLOAD SCREEN -->
-    <div id="upload-container">
-        <div class="upload-box">
             <h1>🎬 Comic Generator</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 selected</span>
-            <button class="submit-btn" onclick="upload()">Generate Comic</button>
-            <button id="restore-btn" class="restore-btn" onclick="restoreSession()">📂 Restore Unsaved Session</button>
-            <div class="loading-view" id="loading-view" style="display:none;">
-                <div class="loader"></div>
-                <p id="status-text">Starting...</p>
             </div>
         </div>
     </div>
-    <!-- EDITOR SCREEN -->
-    <div id="editor-container">
-        <div class="comic-container-wrapper">
-            <h1 style="text-align:center;">Comic Editor</h1>
-            <div id="comic-pages"></div>
         </div>
-        <!-- Hidden inputs -->
-        <input type="file" id="image-uploader" style="display: none;" accept="image/*">
-        <div class="edit-controls">
-            <h4>Tools</h4>
-            <div class="control-group">
-                <button onclick="addBubble()">+ Bubble</button>
-                <button onclick="deleteBubble()" style="background:#ffcccc">Delete</button>
-            </div>
-            <div class="control-group">
-                <label>Colors:</label>
-                <div style="display:grid; grid-template-columns: 1fr 1fr; gap:5px;">
-                    <input type="color" id="bubble-text-color" disabled title="Text Color">
-                    <input type="color" id="bubble-fill-color" disabled title="Fill Color">
                 </div>
-                <select id="bubble-type-select" onchange="changeBubbleType(this.value)" disabled>
-                    <option value="speech">Speech</option>
-                    <option value="thought">Thought</option>
-                </select>
             </div>
-            <div class="control-group" id="tail-controls" style="display:none;">
-                <label>Tail:</label>
-                <button onclick="rotateTail()">Rotate</button>
-                <input type="range" id="tail-slider" min="10" max="90" value="50" oninput="slideTail(this.value)">
             </div>
-            <div class="control-group">
-                <label>Panel:</label>
-                <button onclick="replacePanelImage()">🖼️ Replace</button>
-                <div class="button-grid">
-                    <button onclick="adjustFrame('backward')">⬅️</button>
-                    <button onclick="adjustFrame('forward')">➡️</button>
                 </div>
-                <input type="text" id="timestamp-input" placeholder="mm:ss">
-                <button onclick="gotoTimestamp()">Go to Time</button>
-                <label>Zoom:</label>
-                <input type="range" id="zoom-slider" min="100" max="300" value="100" step="5" disabled oninput="handleZoom(this)">
             </div>
-            <hr>
-            <button onclick="saveLocal()">💾 Force Save</button>
-            <button onclick="exportComic()" style="background:#ccffcc; font-weight:bold;">📥 Download PNG</button>
-            <button onclick="location.reload()" style="color:red; margin-top:10px;">↺ Start Over</button>
         </div>
     </div>
     <script>
         // --- SESSION ---
-        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);
-        // Check for existing save on load
-        if(localStorage.getItem('comic_autosave')) {
             document.getElementById('restore-btn').style.display = 'block';
         }
-        let interval, selectedBubble, selectedPanel;
-        let isResizing=false, resizeHandle, startX, startY, startW, startH, startL, startT;
-        let isPanning=false, panStartX, panStartY, panStartTx, panStartTy;
-        // --- RESTORE LOGIC ---
         function restoreSession() {
-            const savedData = localStorage.getItem('comic_autosave');
-            if(!savedData) return alert("No saved session found.");
-            try {
-                const state = JSON.parse(savedData);
-                renderFromState(state);
-                document.getElementById('upload-container').style.display = 'none';
-                document.getElementById('editor-container').style.display = 'block';
-            } catch(e) { alert("Failed to restore"); }
         }
-        function renderFromState(pagesData) {
-            const con = document.getElementById('comic-pages');
             con.innerHTML = '';
-            pagesData.forEach((page, i) => {
-                const div = document.createElement('div');
-                div.className = 'comic-page';
                 const grid = document.createElement('div');
                 grid.className = 'comic-grid';
-                page.panels.forEach((pan) => {
                     const pDiv = document.createElement('div');
                     pDiv.className = 'panel';
                     pDiv.onclick = (e) => { e.stopPropagation(); selectPanel(pDiv); };
                     const img = document.createElement('img');
-                    img.src = pan.src;
-                    img.dataset.zoom = pan.zoom || 100;
-                    img.dataset.translateX = pan.tx || 0;
-                    img.dataset.translateY = pan.ty || 0;
-                    updateImageTransform(img);
-                    img.onmousedown = startPan;
                     pDiv.appendChild(img);
-                    pan.bubbles.forEach(bData => {
-                        const b = createBubble(bData.text, bData.left, bData.top, bData.type, bData.tailPos, bData.width, bData.height, bData.colors);
-                        if(bData.classes) b.className = bData.classes;
                         pDiv.appendChild(b);
                     });
                     grid.appendChild(pDiv);
                 });
-                div.appendChild(grid);
-                con.appendChild(div);
-            });
-        }
-        // --- SAVE LOGIC (Auto-Save) ---
-        function saveLocal() {
-            const pages = [];
-            document.querySelectorAll('.comic-page').forEach(page => {
-                const panels = [];
-                page.querySelectorAll('.panel').forEach(pDiv => {
-                    const img = pDiv.querySelector('img');
-                    const bubbles = [];
-                    pDiv.querySelectorAll('.speech-bubble').forEach(b => {
-                        bubbles.push({
-                            text: b.querySelector('.bubble-text').innerText,
-                            left: b.style.left, top: b.style.top,
-                            width: b.style.width, height: b.style.height,
-                            type: b.dataset.type,
-                            tailPos: b.style.getPropertyValue('--tail-pos'),
-                            classes: b.className,
-                            colors: {
-                                text: b.style.getPropertyValue('--bubble-text-color'),
-                                fill: b.style.getPropertyValue('--bubble-fill-color')
-                            }
-                        });
-                    });
-                    panels.push({
-                        src: img.src,
-                        zoom: img.dataset.zoom,
-                        tx: img.dataset.translateX,
-                        ty: img.dataset.translateY,
-                        bubbles: bubbles
-                    });
-                });
-                pages.push({ panels: panels });
-            });
-            localStorage.setItem('comic_autosave', JSON.stringify(pages));
-        }
-        // --- UPLOAD ---
-        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';
-                loadNewComic();
-            }
-        }
-        function loadNewComic() {
-            fetch(`/output/pages.json?sid=${sid}`).then(r=>r.json()).then(data => {
-                const cleanData = data.map(p => ({
-                    panels: p.panels.map((pan, j) => ({
-                        src: `/frames/${pan.image}?sid=${sid}`,
-                        bubbles: (p.bubbles && p.bubbles[j] && p.bubbles[j].dialog) ? [{
-                            text: p.bubbles[j].dialog,
-                            left: (p.bubbles[j].bubble_offset_x||50)+'px',
-                            top: (p.bubbles[j].bubble_offset_y||20)+'px',
-                            type: 'speech',
-                            tailPos: '50%'
-                        }] : []
-                    }))
-                }));
-                renderFromState(cleanData);
-                saveLocal();
             });
         }
-        // --- INTERACTIVITY ---
-        function createBubble(text, x, y, type='speech', tailPos='50%', w, h, colors) {
             const b = document.createElement('div');
-            b.className = 'speech-bubble speech tail-bottom';
-            b.style.left = x; b.style.top = y;
-            if(w) b.style.width = w; if(h) b.style.height = h;
-            b.dataset.type = type;
-            b.style.setProperty('--tail-pos', tailPos || '50%');
-            if(colors) {
-                if(colors.text) b.style.setProperty('--bubble-text-color', colors.text);
-                if(colors.fill) b.style.setProperty('--bubble-fill-color', colors.fill);
             }
-            b.innerHTML = `<span class="bubble-text">${text}</span><div class="resize-handle se"></div>`;
             b.onmousedown = (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');
-                selectBubbleUI(b);
-                const ox = e.clientX - b.offsetLeft, oy = e.clientY - b.offsetTop;
-                document.onmousemove = (ev) => {
-                    b.style.left = (ev.clientX-ox)+'px'; b.style.top = (ev.clientY-oy)+'px';
-                };
-                document.onmouseup = () => { document.onmousemove=null; saveLocal(); };
             };
             b.querySelector('.resize-handle').onmousedown = (e) => {
-                e.stopPropagation();
-                const ox = e.clientX, oy = e.clientY, ow = b.offsetWidth, oh = b.offsetHeight;
-                document.onmousemove = (ev) => {
-                    b.style.width = (ow + ev.clientX - ox) + 'px';
-                    b.style.height = (oh + ev.clientY - oy) + 'px';
-                };
-                document.onmouseup = () => { document.onmousemove=null; saveLocal(); };
             };
             b.ondblclick = (e) => {
                 e.stopPropagation();
-                const span = b.querySelector('.bubble-text');
-                const txt = document.createElement('textarea');
-                txt.value = span.innerText;
-                b.appendChild(txt); span.style.display='none'; txt.focus();
-                txt.onblur = () => { span.innerText = txt.value; txt.remove(); span.style.display='block'; saveLocal(); };
             };
             return b;
         }
-        function selectPanel(el) {
-            document.querySelectorAll('.panel.selected').forEach(e=>e.classList.remove('selected'));
             el.classList.add('selected');
-            selectedPanel = el;
-            selectBubbleUI(null);
-            resetPanelTransform(true);
         }
-        function selectBubbleUI(el) {
-            selectedBubble = el;
-            const inputs = ['bubble-text-color', 'bubble-fill-color', 'bubble-type-select'];
-            const tail = document.getElementById('tail-controls');
-            if(el) {
-                inputs.forEach(i => document.getElementById(i).disabled = false);
-                tail.style.display = (el.dataset.type === 'speech') ? 'block' : 'none';
-            } else {
-                inputs.forEach(i => document.getElementById(i).disabled = true);
-                tail.style.display = 'none';
-            }
         }
-        function slideTail(v) { if(selectedBubble) { selectedBubble.style.setProperty('--tail-pos', v+'%'); saveLocal(); } }
-        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');
-            saveLocal();
         }
-        function changeBubbleType(v) {
-            if(!selectedBubble) return;
-            selectedBubble.className = `speech-bubble ${v} tail-bottom selected`;
-            selectedBubble.dataset.type = v;
-            selectBubbleUI(selectedBubble);
-            saveLocal();
         }
-        function addBubble() {
-            if(!selectedPanel) return alert("Select a panel");
-            const b = createBubble("New", "20px", "20px");
-            selectedPanel.appendChild(b);
-            saveLocal();
         }
-        function deleteBubble() { if(selectedBubble) { selectedBubble.remove(); saveLocal(); } }
-        // Panel Manipulations
-        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);
-        }
-        document.addEventListener('mousemove', (e) => {
-            if(!isPanning || !selectedPanel) return;
-            const img = selectedPanel.querySelector('img');
-            img.dataset.translateX = panStartTx + (e.clientX - panStartX);
-            img.dataset.translateY = panStartTy + (e.clientY - panStartY);
-            updateImageTransform(img);
-        });
-        document.addEventListener('mouseup', () => {
-            if(isPanning) { isPanning=false; selectedPanel?.querySelector('img')?.classList.remove('panning'); saveLocal(); }
-        });
-        function handleZoom(el) {
-            if(!selectedPanel) return;
-            const img = selectedPanel.querySelector('img');
-            img.dataset.zoom = el.value;
-            updateImageTransform(img);
-            saveLocal();
         }
-        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(!selectedPanel) return;
-            const img = selectedPanel.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);
-            if(!loadOnly) saveLocal();
         }
-        // API
-        function replacePanelImage() {
-            if(!selectedPanel) return alert("Select panel");
-            const img = selectedPanel.querySelector('img');
-            const inp = document.getElementById('image-uploader');
-            inp.onchange = async(e) => {
                 const fd = new FormData(); fd.append('image', e.target.files[0]);
                 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()}`; saveLocal(); }
-                inp.value='';
             };
             inp.click();
         }
-        async function adjustFrame(dir) {
-            if(!selectedPanel) return alert("Select panel");
-            const img = selectedPanel.querySelector('img');
-            let fname = img.src.split('/').pop().split('?')[0];
-            await fetch(`/regenerate_frame?sid=${sid}`, {
-                method:'POST', headers:{'Content-Type':'application/json'},
-                body:JSON.stringify({filename:fname, direction:dir})
-            });
-            img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`;
-            saveLocal();
-        }
-        async function gotoTimestamp() {
-            if(!selectedPanel) return alert("Select panel");
-            let v = document.getElementById('timestamp-input').value;
-            if(v.includes(':')) { let p=v.split(':'); v = parseInt(p[0])*60 + parseFloat(p[1]); }
-            const img = selectedPanel.querySelector('img');
-            let fname = img.src.split('/').pop().split('?')[0];
-            await fetch(`/goto_timestamp?sid=${sid}`, {
-                method:'POST', headers:{'Content-Type':'application/json'},
-                body:JSON.stringify({filename:fname, timestamp:v})
             });
-            img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`;
-            saveLocal();
         }
-        async function exportComic() {
-            const pgs = document.querySelectorAll('.comic-page');
-            for(let i=0; i<pgs.length; i++) {
-                const u = await htmlToImage.toPng(pgs[i], {pixelRatio:3});
-                const a = document.createElement('a'); a.href=u; a.download=`comic-${i+1}.png`; a.click();
             }
         }
-        // Color Listeners
-        document.getElementById('bubble-text-color').addEventListener('input', (e) => {
-            if(selectedBubble) { selectedBubble.style.setProperty('--bubble-text-color', e.target.value); saveLocal(); }
-        });
-        document.getElementById('bubble-fill-color').addEventListener('input', (e) => {
-            if(selectedBubble) { selectedBubble.style.setProperty('--bubble-fill-color', e.target.value); saveLocal(); }
-        });
     </script>
 </body>
 </html>
 '''
-# --- BACKEND LOGIC ---
 class EnhancedComicGenerator:
     def __init__(self, sid):
         self.sid = sid
@@ -577,49 +604,42 @@ class EnhancedComicGenerator:
         os.makedirs(self.frames_dir, exist_ok=True)
         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
-    def cleanup_previous_run(self):
         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 not installed")
-            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()
-            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\nHello\n")
-            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 = []
-            # Generate UP TO 48 PANELS (12 PAGES)
             for i, sub in enumerate(subs[:48]):
                 mid = (sub.start.total_seconds() + sub.end.total_seconds())/2
                 cap.set(cv2.CAP_PROP_POS_MSEC, mid*1000)
@@ -628,16 +648,12 @@ 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)
-            self.update_status("Finalizing...", 90)
             pages_data = []
             for i in range(0, len(frame_files), 4):
                 batch_f = frame_files[i:i+4]
@@ -647,52 +663,30 @@ class EnhancedComicGenerator:
                 pages_data.append({'panels': panels, 'bubbles': b_data})
             with open(os.path.join(self.output_dir, 'pages.json'), 'w') as f: json.dump(pages_data, f)
             self.update_status("Done!", 100)
         except Exception as e:
             traceback.print_exc()
             self.update_status(f"Error: {str(e)}", -1)
     def regenerate_frame(self, fname, direction):
         try:
             meta_path = os.path.join(self.frames_dir, 'frame_metadata.json')
             with open(meta_path,'r') as f: meta = json.load(f)
-            curr_time = meta[fname]
             if not self.video_fps:
-                cap = cv2.VideoCapture(self.video_path); self.video_fps = cap.get(cv2.CAP_PROP_FPS); cap.release()
-            offset = (1.0/self.video_fps) * (1 if direction=='forward' else -1)
-            new_time = max(0, curr_time + offset)
-            cap = cv2.VideoCapture(self.video_path)
-            cap.set(cv2.CAP_PROP_POS_MSEC, new_time*1000)
-            ret, frame = cap.read()
-            cap.release()
-            if ret:
-                cv2.imwrite(os.path.join(self.frames_dir, fname), frame)
-                meta[fname] = new_time
                 with open(meta_path,'w') as f: json.dump(meta, f)
                 return {"success":True}
-            return {"success":False, "message":"End of video"}
-        except Exception as e: return {"success":False, "message":str(e)}
-    def get_frame_at_timestamp(self, fname, ts):
-        try:
-            cap = cv2.VideoCapture(self.video_path)
-            cap.set(cv2.CAP_PROP_POS_MSEC, float(ts)*1000)
-            ret, frame = cap.read()
-            cap.release()
-            if ret:
-                cv2.imwrite(os.path.join(self.frames_dir, fname), frame)
-                meta_path = os.path.join(self.frames_dir, 'frame_metadata.json')
-                if os.path.exists(meta_path):
-                    with open(meta_path,'r') as f: meta = json.load(f)
-                    meta[fname] = float(ts)
-                    with open(meta_path,'w') as f: json.dump(meta, f)
-                return {"success":True}
-            return {"success":False, "message":"Invalid time"}
         except Exception as e: return {"success":False, "message":str(e)}
 # --- ROUTES ---
@@ -702,10 +696,9 @@ 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)
-    gen.cleanup_previous_run()
     f.save(gen.video_path)
     gen.update_status("Starting...", 5)
     threading.Thread(target=gen.generate_comic).start()
@@ -714,38 +707,28 @@ def upload():
 @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..."})
 @app.route('/output/<path:filename>')
-def get_output(filename):
-    return send_from_directory(os.path.join(BASE_USER_DIR, request.args.get('sid'), 'output'), filename)
 @app.route('/frames/<path:filename>')
-def get_frame(filename):
-    return send_from_directory(os.path.join(BASE_USER_DIR, request.args.get('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)

 from concurrent.futures import ThreadPoolExecutor
 from flask import Flask, render_template, request, jsonify, send_from_directory, send_file
+# --- 0. CONFIG & LOGGING ---
 logging.basicConfig(level=logging.INFO)
+app = Flask(__name__)
+BASE_USER_DIR = "userdata"
+# --- 1. DEPENDENCY LOADER ---
 try:
     import cv2
     import numpy as np
     from PIL import Image
     import srt
+except ImportError:
+    # Dummies to prevent crash on start, will fail on usage if env is wrong
+    cv2 = np = Image = srt = None
+# --- 2. BACKEND MODULES (Fallback Architecture) ---
+def dummy_crop(): return 0, 0, None, None
+try: from backend.keyframes.keyframes import black_bar_crop
+except: black_bar_crop = dummy_crop
+try: from backend.simple_color_enhancer import SimpleColorEnhancer
+except: class SimpleColorEnhancer:
+    def enhance_single(self, *a): pass
+try: from backend.quality_color_enhancer import QualityColorEnhancer
+except: class QualityColorEnhancer:
+    def enhance_single(self, *a): pass
+try: from backend.class_def import bubble, panel, Page
 except:
+    def bubble(**k): return k
+    def panel(**k): return k
     class Page:
+        def __init__(self, p, b): self.panels=p; self.bubbles=b
 try:
     from backend.ai_enhanced_core import image_processor, face_detector
     from backend.subtitles.subs_real import get_real_subtitles
 except:
     def get_real_subtitles(v): pass
+    class DummyAI:
+        def detect_faces(self,p): return []
+        def place_bubble_ai(self,p,l): return 50, 20
+    face_detector = DummyAI(); ai_bubble_placer = DummyAI()
+# --- 3. HTML INTERFACE ---
 INDEX_HTML = '''
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Comic Generator Ultimate</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>
+        /* --- LAYOUT --- */
+        body { background: #fdf6e3; font-family: 'Lato', sans-serif; margin: 0; height: 100vh; display: flex; flex-direction: column; }
+        #upload-screen { display: flex; flex: 1; justify-content: center; align-items: center; }
+        .box { background: white; padding: 40px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); text-align: center; width: 400px; }
+        #editor-screen { display: none; padding: 20px; padding-bottom: 100px; }
+        .comic-wrapper { max-width: 1000px; margin: 0 auto; }
+        /* --- COMIC PAGE & PANELS --- */
+        .comic-page {
+            background: white; width: 600px; height: 400px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1); margin: 0 auto 40px;
+            border: 2px solid #000; position: relative; overflow: hidden;
+        }
+        .comic-grid {
+            display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
+            gap: 10px; padding: 10px; width: 100%; height: 100%; box-sizing: border-box;
+        }
+        .panel {
+            position: relative; overflow: hidden; background: #eee; border: 2px solid #333; cursor: pointer;
+        }
+        .panel.selected { outline: 4px solid #2196F3; z-index: 5; }
+        .panel img {
+            width: 100%; height: 100%; object-fit: cover;
+            transform-origin: center; transition: transform 0.1s;
+            pointer-events: auto;
+        }
+        .panel img.panning { cursor: grab; }
         /* --- SPEECH BUBBLE (EXACT SHARK FIN CSS) --- */
+        .speech-bubble {
+            position: absolute; z-index: 20; cursor: move;
+            font-family: 'Comic Neue', cursive; font-weight: bold; font-size: 16px; text-align: center;
+            display: flex; align-items: center; justify-content: center;
+            min-width: 80px; min-height: 50px; width: 160px; height: 90px;
+        }
+        .bubble-text { padding: 10px; pointer-events: none; user-select: none; }
+        .speech-bubble.selected { outline: 2px dashed #4CAF50; z-index: 30; }
+        .speech-bubble textarea {
+            position: absolute; width: 100%; height: 100%; top:0; left:0;
+            resize: none; border: 2px solid #4CAF50; text-align: center; padding: 10px;
+            font-family: inherit; font-size: inherit; font-weight: inherit;
         }
+        /* --- THE SHAPE LOGIC --- */
         .speech-bubble.speech {
+            /* Customizable Variables */
+            --b: 3em;   /* tail base */
+            --h: 1.8em; /* tail height */
+            --t: 0.6;   /* thickness */
+            --p: var(--tail-pos, 50%); /* Position (Controlled by Slider) */
+            --r: 1.2em; /* Radius */
+            --c: var(--bg-color, #4ECDC4); /* Fill Color */
+            color: var(--text-color, #fff);
+            padding: 1em;
+            background: var(--c);
+            /* Exact Body Radius Formula */
+            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);
         }
+        /*
+           EXPORT SAFE TAIL:
+           Using a radial-gradient background on a pseudo-element.
+           This visually replicates the mask but works with html-to-image.
+        */
+        .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;
         }
+        /* ROTATION CLASSES */
+        /* Bottom */
+        .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))); }
+        /* Top */
+        .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); }
+        /* Left */
         .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; }
+        /* 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; }
+        /* Resize Handle */
+        .resize-handle { width: 15px; height: 15px; background: #fff; border: 2px solid #2196F3; border-radius: 50%; position: absolute; bottom: -5px; right: -5px; cursor: nwse-resize; display: none; }
         .speech-bubble.selected .resize-handle { display: block; }
+        /* --- UI CONTROLS --- */
+        .controls-bar {
+            position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
+            background: white; padding: 15px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            display: flex; gap: 15px; align-items: center; z-index: 999;
+            flex-wrap: wrap; max-width: 90%; justify-content: center;
+        }
+        .ctrl-grp { display: flex; flex-direction: column; align-items: center; gap: 5px; border-right: 1px solid #eee; padding-right: 15px; }
+        .ctrl-grp:last-child { border: none; }
+        .ctrl-grp label { font-size: 10px; font-weight: bold; text-transform: uppercase; color: #888; }
+        .row { display: flex; gap: 5px; }
+        button { padding: 8px 12px; border: none; border-radius: 6px; background: #f0f0f0; cursor: pointer; font-weight: bold; font-size: 12px; }
+        button:hover { background: #e0e0e0; }
+        button.primary { background: #4ECDC4; color: white; }
+        button.danger { background: #ff6b6b; color: white; }
+        input[type="color"] { width: 30px; height: 30px; border: none; cursor: pointer; }
+        input[type="range"] { width: 100px; }
+        /* Loader */
+        .loader { width: 40px; height: 40px; border: 5px solid #f3f3f3; border-top: 5px solid #4ECDC4; border-radius: 50%; animation: spin 1s linear infinite; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     </style>
 </head>
 <body>
+    <!-- 1. UPLOAD VIEW -->
+    <div id="upload-screen">
+        <div class="box">
             <h1>🎬 Comic Generator</h1>
+            <input type="file" id="file-input" class="file-input" accept="video/*">
+            <label for="file-input" class="file-label" style="background:#2c3e50; color:white; padding:15px; border-radius:8px; display:block;">📂 Select Video</label>
+            <div id="file-name" style="margin:10px 0; color:#666;"></div>
+            <button class="submit-btn" onclick="startUpload()">Generate Comic</button>
+            <button id="restore-btn" class="submit-btn" style="background:#27ae60; display:none;" onclick="restoreSession()">📂 Restore Unsaved</button>
+            <div id="progress-area" style="display:none; margin-top:20px;">
+                <div class="loader" style="margin:0 auto;"></div>
+                <p id="status-msg">Initializing...</p>
             </div>
         </div>
     </div>
+    <!-- 2. EDITOR VIEW -->
+    <div id="editor-screen">
+        <div class="comic-wrapper" id="comic-container">
+            <!-- Pages will be injected here -->
         </div>
+        <!-- Floating Controls -->
+        <div class="controls-bar">
+            <div class="ctrl-grp">
+                <label>Bubble</label>
+                <div class="row">
+                    <button onclick="addBubble()">+</button>
+                    <button class="danger" onclick="deleteBubble()">🗑️</button>
+                </div>
+                <div class="row">
+                    <input type="color" id="col-text" title="Text Color" oninput="updateColor('text', this.value)">
+                    <input type="color" id="col-fill" title="Fill Color" oninput="updateColor('fill', this.value)">
                 </div>
             </div>
+            <div class="ctrl-grp">
+                <label>Tail</label>
+                <button onclick="rotateTail()">🔄 Rotate</button>
+                <input type="range" min="10" max="90" value="50" oninput="slideTail(this.value)" title="Tail Position">
             </div>
+            <div class="ctrl-grp">
+                <label>Panel</label>
+                <div class="row">
+                    <button onclick="regenFrame('backward')">⬅️</button>
+                    <button onclick="regenFrame('forward')">➡️</button>
                 </div>
+                <button onclick="replaceImage()">🖼️ Swap</button>
+                <input type="range" id="zoom-slider" min="100" max="300" value="100" oninput="zoomPanel(this.value)" disabled>
+            </div>
+            <div class="ctrl-grp">
+                <label>Project</label>
+                <button class="primary" onclick="downloadComic()">💾 Save PNG</button>
+                <button onclick="location.reload()">❌ Close</button>
             </div>
         </div>
+        <!-- Hidden File Input for Swaps -->
+        <input type="file" id="img-swap-input" style="display:none" accept="image/*">
     </div>
     <script>
         // --- SESSION ---
+        const sid = localStorage.getItem('comic_sid') || Math.random().toString(36).substr(2);
         localStorage.setItem('comic_sid', sid);
+        // Check for Autosave
+        if(localStorage.getItem('comic_save')) {
             document.getElementById('restore-btn').style.display = 'block';
         }
+        let selBubble = null;
+        let selPanel = null;
+        let isDragging = false;
+        let isResizing = false;
+        let startX, startY, initLeft, initTop, initW, initH;
+        // --- UPLOAD ---
+        document.getElementById('file-input').onchange = function() {
+            document.getElementById('file-name').innerText = this.files[0].name;
+        };
+        async function startUpload() {
+            const f = document.getElementById('file-input').files[0];
+            if(!f) return alert("Select a file!");
+            const fd = new FormData(); fd.append('file', f);
+            document.querySelector('.box').style.display='none'; // hide UI
+            document.getElementById('progress-area').style.display='block'; // show loader
+            // Clean UI
+            document.getElementById('upload-screen').innerHTML = document.querySelector('.box').outerHTML +
+                `<div style="text-align:center; margin-top:50px;">
+                    <div class="loader" style="margin:0 auto;"></div>
+                    <h2 id="prog-text">Uploading...</h2>
+                 </div>`;
+            await fetch(`/uploader?sid=${sid}`, {method:'POST', body:fd});
+            // Poll Status
+            const poll = setInterval(async () => {
+                const r = await fetch(`/status?sid=${sid}`);
+                const d = await r.json();
+                document.getElementById('prog-text').innerText = d.message;
+                if(d.progress >= 100) {
+                    clearInterval(poll);
+                    loadFromBackend();
+                }
+            }, 1500);
+        }
+        function loadFromBackend() {
+            fetch(`/output/pages.json?sid=${sid}`).then(r=>r.json()).then(renderComic);
+        }
         function restoreSession() {
+            const data = JSON.parse(localStorage.getItem('comic_save'));
+            renderComic(data, true); // true = skip fetching images from backend list, use saved src
         }
+        // --- RENDER ---
+        function renderComic(pages, isRestore=false) {
+            document.getElementById('upload-screen').style.display = 'none';
+            document.getElementById('editor-screen').style.display = 'block';
+            const con = document.getElementById('comic-container');
             con.innerHTML = '';
+            pages.forEach((p, i) => {
+                const pageDiv = document.createElement('div');
+                pageDiv.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.onclick = (e) => { e.stopPropagation(); selectPanel(pDiv); };
                     const img = document.createElement('img');
+                    img.src = isRestore ? pan.src : `/frames/${pan.image}?sid=${sid}`;
+                    // Restore Zoom
+                    if(isRestore && pan.zoom) {
+                        img.style.transform = `scale(${pan.zoom/100}) translate(${pan.tx}px, ${pan.ty}px)`;
+                        img.dataset.zoom = pan.zoom;
+                        img.dataset.tx = pan.tx;
+                        img.dataset.ty = pan.ty;
+                    }
+                    // Pan Logic
+                    img.onmousedown = (e) => startPan(e, img);
                     pDiv.appendChild(img);
+                    // Bubbles
+                    const bubbleList = isRestore ? pan.bubbles : (p.bubbles && p.bubbles[j] ? [p.bubbles[j]] : []);
+                    bubbleList.forEach(bData => {
+                        if(!bData.dialog && !bData.text) return;
+                        const b = createBubbleHTML(bData);
                         pDiv.appendChild(b);
                     });
                     grid.appendChild(pDiv);
                 });
+                pageDiv.appendChild(grid);
+                con.appendChild(pageDiv);
             });
+            autoSave();
         }
+        // --- BUBBLE LOGIC ---
+        function createBubbleHTML(data) {
             const b = document.createElement('div');
+            b.className = data.classes || 'speech-bubble speech tail-bottom';
+            // Position
+            b.style.left = (typeof data.left === 'number') ? data.left + 'px' : (data.left || (data.bubble_offset_x + 'px') || '50px');
+            b.style.top = (typeof data.top === 'number') ? data.top + 'px' : (data.top || (data.bubble_offset_y + 'px') || '20px');
+            if(data.width) b.style.width = data.width;
+            if(data.height) b.style.height = data.height;
+            // Styles
+            if(data.colors) {
+                b.style.setProperty('--bg-color', data.colors.fill);
+                b.style.setProperty('--text-color', data.colors.text);
             }
+            if(data.tailPos) b.style.setProperty('--tail-pos', data.tailPos);
+            b.innerHTML = `<div class="bubble-text">${data.text || data.dialog}</div><div class="resize-handle"></div>`;
+            // Events
             b.onmousedown = (e) => {
                 if(e.target.classList.contains('resize-handle')) return;
+                e.stopPropagation(); selectBubble(b);
+                isDragging = true;
+                startX = e.clientX; startY = e.clientY;
+                initLeft = b.offsetLeft; initTop = b.offsetTop;
             };
             b.querySelector('.resize-handle').onmousedown = (e) => {
+                e.stopPropagation(); isResizing = true;
+                startX = e.clientX; startY = e.clientY;
+                initW = b.offsetWidth; initH = b.offsetHeight;
             };
             b.ondblclick = (e) => {
                 e.stopPropagation();
+                const txt = b.querySelector('.bubble-text');
+                const input = document.createElement('textarea');
+                input.value = txt.innerText;
+                b.appendChild(input); txt.style.opacity=0; input.focus();
+                input.onblur = () => { txt.innerText = input.value; input.remove(); txt.style.opacity=1; autoSave(); };
             };
             return b;
         }
+        // Global Mouse Move for Drag/Resize
+        document.addEventListener('mousemove', (e) => {
+            if(isDragging && selBubble) {
+                const dx = e.clientX - startX;
+                const dy = e.clientY - startY;
+                selBubble.style.left = (initLeft + dx) + 'px';
+                selBubble.style.top = (initTop + dy) + 'px';
+            }
+            if(isResizing && selBubble) {
+                const dx = e.clientX - startX;
+                const dy = e.clientY - startY;
+                selBubble.style.width = (initW + dx) + 'px';
+                selBubble.style.height = (initH + dy) + 'px';
+            }
+        });
+        document.addEventListener('mouseup', () => {
+            if(isDragging || isResizing) autoSave();
+            isDragging = false; isResizing = false;
+        });
+        // --- SELECTION ---
+        function selectBubble(el) {
+            if(selBubble) selBubble.classList.remove('selected');
+            selBubble = el;
             el.classList.add('selected');
+            // Sync controls
+            const s = getComputedStyle(el);
+            document.getElementById('tail-slider').value = parseFloat(s.getPropertyValue('--tail-pos')) || 50;
+            // Reset Panel selection to avoid conflict
+            if(selPanel) selPanel.classList.remove('selected'); selPanel=null;
         }
+        function selectPanel(el) {
+            if(selPanel) selPanel.classList.remove('selected');
+            if(selBubble) selBubble.classList.remove('selected'); selBubble=null;
+            selPanel = el;
+            el.classList.add('selected');
+            // Sync Zoom
+            const img = el.querySelector('img');
+            document.getElementById('zoom-slider').disabled = false;
+            document.getElementById('zoom-slider').value = img.dataset.zoom || 100;
         }
+        // --- ACTIONS ---
+        function addBubble() {
+            if(!selPanel) return alert("Select a panel first!");
+            const b = createBubbleHTML({text:"Text", left:"50px", top:"50px"});
+            selPanel.appendChild(b);
+            selectBubble(b);
+            autoSave();
+        }
+        function deleteBubble() { if(selBubble) { selBubble.remove(); selBubble=null; autoSave(); } }
+        function updateColor(type, val) {
+            if(!selBubble) return;
+            if(type=='text') selBubble.style.setProperty('--text-color', val);
+            if(type=='fill') selBubble.style.setProperty('--bg-color', val);
+            autoSave();
         }
+        function slideTail(v) { if(selBubble) selBubble.style.setProperty('--tail-pos', v+'%'); }
+        function rotateTail() {
+            if(!selBubble) return;
+            const c = selBubble.classList;
+            if(c.contains('tail-bottom')) c.replace('tail-bottom','tail-left');
+            else if(c.contains('tail-left')) c.replace('tail-left','tail-top');
+            else if(c.contains('tail-top')) c.replace('tail-top','tail-right');
+            else c.replace('tail-right','tail-bottom') || c.add('tail-bottom');
+            autoSave();
         }
+        // --- PAN & ZOOM ---
+        function zoomPanel(val) {
+            if(!selPanel) return;
+            const img = selPanel.querySelector('img');
+            img.dataset.zoom = val;
+            applyTransform(img);
+            autoSave();
         }
+        function startPan(e, img) {
+            if(parseFloat(img.dataset.zoom) <= 100) return; // Only pan if zoomed
+            e.preventDefault();
+            let startX = e.clientX, startY = e.clientY;
+            let initTx = parseFloat(img.dataset.tx || 0);
+            let initTy = parseFloat(img.dataset.ty || 0);
+            function onMove(ev) {
+                img.dataset.tx = initTx + (ev.clientX - startX);
+                img.dataset.ty = initTy + (ev.clientY - startY);
+                applyTransform(img);
+            }
+            function onUp() {
+                document.removeEventListener('mousemove', onMove);
+                document.removeEventListener('mouseup', onUp);
+                autoSave();
+            }
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
         }
+        function applyTransform(img) {
+            const z = (img.dataset.zoom || 100) / 100;
+            const x = img.dataset.tx || 0;
+            const y = img.dataset.ty || 0;
+            img.style.transform = `scale(${z}) translate(${x/z}px, ${y/z}px)`;
         }
+        // --- BACKEND CALLS ---
+        async function regenFrame(dir) {
+            if(!selPanel) return alert("Select Panel");
+            const img = selPanel.querySelector('img');
+            const fname = img.src.split('/').pop().split('?')[0];
+            await fetch(`/regenerate_frame?sid=${sid}`, {
+                method:'POST', headers:{'Content-Type':'application/json'},
+                body: JSON.stringify({filename:fname, direction:dir})
+            });
+            img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`;
+        }
+        function replaceImage() {
+            if(!selPanel) return alert("Select Panel");
+            const inp = document.getElementById('img-swap-input');
+            inp.onchange = async (e) => {
                 const fd = new FormData(); fd.append('image', e.target.files[0]);
                 const r = await fetch(`/replace_panel?sid=${sid}`, {method:'POST', body:fd});
                 const d = await r.json();
+                if(d.success) selPanel.querySelector('img').src = `/frames/${d.new_filename}?sid=${sid}`;
+                inp.value = '';
             };
             inp.click();
         }
+        // --- AUTO SAVE / EXPORT ---
+        function autoSave() {
+            const pages = [];
+            document.querySelectorAll('.comic-page').forEach(p => {
+                const panels = [];
+                p.querySelectorAll('.panel').forEach(pan => {
+                    const img = pan.querySelector('img');
+                    const bubbles = [];
+                    pan.querySelectorAll('.speech-bubble').forEach(b => {
+                        bubbles.push({
+                            text: b.innerText,
+                            left: b.style.left, top: b.style.top,
+                            width: b.style.width, height: b.style.height,
+                            classes: b.className,
+                            tailPos: b.style.getPropertyValue('--tail-pos'),
+                            colors: {
+                                fill: b.style.getPropertyValue('--bg-color'),
+                                text: b.style.getPropertyValue('--text-color')
+                            }
+                        });
+                    });
+                    panels.push({
+                        src: img.src,
+                        zoom: img.dataset.zoom, tx: img.dataset.tx, ty: img.dataset.ty,
+                        bubbles: bubbles
+                    });
+                });
+                pages.push({ panels: panels });
             });
+            localStorage.setItem('comic_save', JSON.stringify(pages));
         }
+        async function downloadComic() {
+            const pages = document.querySelectorAll('.comic-page');
+            for(let i=0; i<pages.length; i++) {
+                const u = await htmlToImage.toPng(pages[i], {pixelRatio:3});
+                const a = document.createElement('a'); a.href=u; a.download=`Page-${i+1}.png`; a.click();
             }
         }
     </script>
 </body>
 </html>
 '''
+# --- BACKEND ---
 class EnhancedComicGenerator:
     def __init__(self, sid):
         self.sid = sid
         os.makedirs(self.frames_dir, exist_ok=True)
         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(self):
         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
     def generate_comic(self):
         try:
+            if cv2 is None: raise Exception("OpenCV missing")
+            self.update_status("Processing Video...", 10)
             cap = cv2.VideoCapture(self.video_path)
             self.video_fps = cap.get(cv2.CAP_PROP_FPS) or 25
             cap.release()
+            self.update_status("Extracting Dialogue...", 30)
             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\n...\n")
+            self.update_status("Generating 12 Pages...", 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 = [], []
+            meta = {}
+            # Limit to 48 panels (12 pages x 4 panels)
             for i, sub in enumerate(subs[:48]):
                 mid = (sub.start.total_seconds() + sub.end.total_seconds())/2
                 cap.set(cv2.CAP_PROP_POS_MSEC, mid*1000)
                     fname = f"frame_{i}.png"
                     cv2.imwrite(os.path.join(self.frames_dir, fname), frame)
                     frame_files.append(fname)
+                    meta[fname] = mid
+                    bubbles.append(bubble(dialog=sub.content, bubble_offset_x=50, bubble_offset_y=20))
             cap.release()
+            with open(os.path.join(self.frames_dir, 'frame_metadata.json'), 'w') as f: json.dump(meta, f)
             pages_data = []
             for i in range(0, len(frame_files), 4):
                 batch_f = frame_files[i:i+4]
                 pages_data.append({'panels': panels, 'bubbles': b_data})
             with open(os.path.join(self.output_dir, 'pages.json'), 'w') as f: json.dump(pages_data, f)
             self.update_status("Done!", 100)
         except Exception as e:
             traceback.print_exc()
             self.update_status(f"Error: {str(e)}", -1)
     def regenerate_frame(self, fname, direction):
+        # Simple regeneration logic logic
         try:
             meta_path = os.path.join(self.frames_dir, 'frame_metadata.json')
             with open(meta_path,'r') as f: meta = json.load(f)
+            t = meta[fname]
             if not self.video_fps:
+                c = cv2.VideoCapture(self.video_path); self.video_fps = c.get(cv2.CAP_PROP_FPS); c.release()
+            nt = t + (1/self.video_fps * (1 if direction=='forward' else -1))
+            c = cv2.VideoCapture(self.video_path)
+            c.set(cv2.CAP_PROP_POS_MSEC, nt*1000)
+            r, fr = c.read()
+            c.release()
+            if r:
+                cv2.imwrite(os.path.join(self.frames_dir, fname), fr)
+                meta[fname] = nt
                 with open(meta_path,'w') as f: json.dump(meta, f)
                 return {"success":True}
+            return {"success":False}
         except Exception as e: return {"success":False, "message":str(e)}
 # --- ROUTES ---
 @app.route('/uploader', methods=['POST'])
 def upload():
     sid = request.args.get('sid')
     f = request.files['file']
     gen = EnhancedComicGenerator(sid)
+    gen.cleanup()
     f.save(gen.video_path)
     gen.update_status("Starting...", 5)
     threading.Thread(target=gen.generate_comic).start()
 @app.route('/status')
 def get_status():
     sid = request.args.get('sid')
+    p = os.path.join(BASE_USER_DIR, sid, 'output', 'status.json')
+    if os.path.exists(p): return send_file(p)
+    return jsonify({'progress':0})
 @app.route('/output/<path:filename>')
+def out_file(filename): return send_from_directory(os.path.join(BASE_USER_DIR, request.args.get('sid'), 'output'), filename)
 @app.route('/frames/<path:filename>')
+def frm_file(filename): return send_from_directory(os.path.join(BASE_USER_DIR, request.args.get('sid'), 'frames'), filename)
 @app.route('/regenerate_frame', methods=['POST'])
+def regen():
     d = request.get_json()
+    return jsonify(EnhancedComicGenerator(request.args.get('sid')).regenerate_frame(d['filename'], d['direction']))
 @app.route('/replace_panel', methods=['POST'])
 def rep_panel():
     sid = request.args.get('sid')
     f = request.files['image']
+    fname = f"rep_{int(time.time())}.png"
+    f.save(os.path.join(BASE_USER_DIR, sid, 'frames', fname))
+    return jsonify({'success':True, 'new_filename':fname})
 if __name__ == '__main__':
     os.makedirs(BASE_USER_DIR, exist_ok=True)