Testcomic

Configuration error

App Files Files Community

tester343 commited on Dec 3, 2025

Commit

3097bc9

verified ·

1 Parent(s): 6853c41

Update app_enhanced.py

Browse files

Files changed (1) hide show

app_enhanced.py +377 -469

app_enhanced.py CHANGED Viewed

@@ -9,75 +9,54 @@ 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 PROPER FALLBACKS ---
-def dummy_func(*args, **kwargs):
-    return 0, 0, None, None
-try:
-    from backend.keyframes.keyframes import black_bar_crop
-except Exception:
-    black_bar_crop = dummy_func
-try:
-    from backend.simple_color_enhancer import SimpleColorEnhancer
-except Exception:
-    class SimpleColorEnhancer:
-        def enhance_single(self, *args, **kwargs):
-            pass
-try:
-    from backend.quality_color_enhancer import QualityColorEnhancer
-except Exception:
-    class QualityColorEnhancer:
-        def enhance_single(self, *args, **kwargs):
-            pass
-try:
-    from backend.class_def import bubble, panel, Page
-except Exception:
-    def bubble(**kwargs): return kwargs
-    def panel(**kwargs): return kwargs
     class Page:
-        def __init__(self, panels, bubbles):
-            self.panels = panels
-            self.bubbles = bubbles
 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 Exception:
     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">
@@ -88,505 +67,455 @@ 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>
-        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 */
-        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; transform-origin: center center; }
         .panel img.pannable { cursor: grab; }
-        .panel img.panning { cursor: grabbing; }
-        /* --- SPEECH BUBBLE (SHARK FIN) --- */
-        .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; }
-        /* EXACT CSS LOGIC FOR SHARK FIN (Adapted for Export) */
         .speech-bubble.speech {
             --b: 3em;   /* tail base */
             --h: 1.8em; /* tail height */
             --t: 0.6;   /* thickness */
             --p: var(--tail-pos, 50%);
             --r: 1.2em; /* radius */
-            --c: var(--bubble-fill-color, #4ECDC4);
-            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);
         }
-        /* Tail using Radial Gradient (Export Safe) */
-        .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;
         }
-        /* Rotation Logic */
-        .speech-bubble.speech.tail-bottom:before { top: 99%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); }
         .speech-bubble.speech.tail-top { border-radius: min(var(--r), calc(var(--p) - (1 - var(--t)) * var(--b) / 2)) min(var(--r), calc(100% - var(--p) - (1 - var(--t)) * var(--b) / 2)) var(--r) var(--r) / var(--r); }
-        .speech-bubble.speech.tail-top:before { bottom: 99%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: scaleY(-1); }
         .speech-bubble.speech.tail-left { border-radius: var(--r); }
-        .speech-bubble.speech.tail-left:before { right: 99%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: rotate(90deg); transform-origin: top right; }
         .speech-bubble.speech.tail-right { border-radius: var(--r); }
-        .speech-bubble.speech.tail-right:before { left: 99%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: rotate(-90deg); transform-origin: top left; }
-        .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
-        .speech-bubble.thought::after { display:none; }
-        .thought-dot { position: absolute; background-color: white; border: 2px solid #555; border-radius: 50%; z-index: -1; }
-        .thought-dot-1 { width: 20px; height: 20px; bottom: -20px; left: 15px; }
-        .thought-dot-2 { width: 12px; height: 12px; bottom: -32px; left: 5px; }
-        .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>
-        <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 & UTILS ---
-        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);
-        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 ---
         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 = (e) => startPan(e, img);
                     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 ---
-        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();
-            });
-        }
-        // --- BUBBLE LOGIC ---
-        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 c = selectedBubble.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');
             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(); } }
-        // --- PAN & ZOOM ---
         function startPan(e, img) {
-            if(parseFloat(img.dataset.zoom) <= 100) return;
-            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);
-                saveLocal();
-            }
-            document.addEventListener('mousemove', onMove);
-            document.addEventListener('mouseup', onUp);
         }
-        function handleZoom(el) {
-            if(!selectedPanel) return;
-            const img = selectedPanel.querySelector('img');
-            img.dataset.zoom = el.value;
-            applyTransform(img);
-            saveLocal();
-        }
         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)`;
-        }
-        function resetPanelTransform(loadOnly=false) {
-            if(!selectedPanel) return;
-            const img = selectedPanel.querySelector('img');
-            if(!loadOnly) { img.dataset.zoom=100; img.dataset.tx=0; img.dataset.ty=0; }
-            document.getElementById('zoom-slider').value = img.dataset.zoom || 100;
-            applyTransform(img);
-            if(!loadOnly) saveLocal();
         }
-        // --- BACKEND CALLS ---
-        function replacePanelImage() {
-            if(!selectedPanel) return alert("Select Panel");
-            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) { selectedPanel.querySelector('img').src = `/frames/${d.new_filename}?sid=${sid}`; 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=`Page-${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>
@@ -639,15 +568,14 @@ class EnhancedComicGenerator:
             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)
                 ret, frame = cap.read()
@@ -655,16 +583,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]
@@ -674,7 +598,6 @@ 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()
@@ -684,42 +607,32 @@ class EnhancedComicGenerator:
         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 ---
@@ -729,7 +642,7 @@ 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()
@@ -741,38 +654,33 @@ 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.basicConfig(level=logging.INFO)
+app = Flask(__name__)
+BASE_USER_DIR = "userdata"
+# --- 1. DEPENDENCIES ---
 try:
     import cv2
     import numpy as np
     from PIL import Image
     import srt
+except ImportError:
+    print("❌ Missing libraries. Install: flask opencv-python-headless numpy pillow srt")
+    cv2 = np = Image = srt = None
+# --- 2. BACKEND IMPORTS (Dummy Fallbacks) ---
+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.ai_bubble_placement import ai_bubble_placer
     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 FRONTEND ---
 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; margin: 0; min-height: 100vh; color: #333; }
+        /* --- LAYOUT --- */
+        #upload-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; }
+        .box { background: white; padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); text-align: center; width: 400px; }
+        #editor-container { display: none; padding: 20px; padding-bottom: 100px; }
+        .comic-wrapper { max-width: 1000px; margin: 0 auto; }
+        /* --- COMIC PAGE --- */
+        .comic-page { background: white; width: 600px; height: 400px; border: 2px solid #000; margin: 0 auto 40px; position: relative; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
+        .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; border: 2px solid #000; background: #eee; cursor: pointer; }
+        .panel.selected { outline: 4px solid #2196F3; z-index: 5; }
+        .panel img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; pointer-events: auto; }
         .panel img.pannable { cursor: grab; }
+        /* --- SPEECH BUBBLE (EXACT CSS REQUESTED) --- */
+        .speech-bubble {
+            position: absolute; z-index: 20; cursor: move;
+            display: flex; justify-content: center; align-items: center;
+            font-family: 'Comic Neue', cursive; font-weight: bold; font-size: 16px; text-align: center;
+            min-width: 60px; min-height: 40px;
+        }
+        .bubble-text { padding: 0.8em; pointer-events: none; }
+        .speech-bubble.selected { outline: 2px dashed #4CAF50; z-index: 30; }
+        /* The specific shape logic */
         .speech-bubble.speech {
             --b: 3em;   /* tail base */
             --h: 1.8em; /* tail height */
             --t: 0.6;   /* thickness */
             --p: var(--tail-pos, 50%);
             --r: 1.2em; /* radius */
+            --c: var(--bg-color, #4ECDC4);
+            color: var(--text-color, #fff);
             padding: 1em;
+            background: var(--c);
             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);
         }
+        /* Using Gradient to mimic mask for export safety */
+        .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 */
+        .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; }
+        .resize-handle { width: 12px; height: 12px; background: #2196F3; border: 2px solid white; border-radius: 50%; position: absolute; bottom: -6px; right: -6px; cursor: nwse-resize; display: none; }
         .speech-bubble.selected .resize-handle { display: block; }
+        /* --- CONTROLS --- */
+        .controls { position: fixed; bottom: 20px; right: 20px; width: 220px; background: white; padding: 15px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.2); z-index: 100; }
+        .controls h4 { margin: 0 0 10px 0; color: #4ECDC4; text-align: center; }
+        .c-grp { margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px; }
+        button, input, select { width: 100%; margin-top: 5px; padding: 6px; border-radius: 4px; border: 1px solid #ddd; cursor: pointer; }
+        button:hover { background: #f5f5f5; }
+        .btn-primary { background: #4ECDC4; color: white; border: none; }
+        .btn-danger { background: #ff6b6b; color: white; border: none; }
+        .row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
+        .loader { width: 40px; height: 40px; border: 5px solid #f3f3f3; border-top: 5px solid #4ECDC4; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     </style>
 </head>
 <body>
+    <!-- UPLOAD -->
     <div id="upload-container">
+        <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; font-weight:bold;">📂 Select Video</label>
+            <div id="file-name" style="margin:15px 0; color:#888;">No file selected</div>
+            <button class="submit-btn" style="background:#e67e22; color:white; font-size:18px; padding:12px; border:none; width:100%; border-radius:8px; cursor:pointer;" onclick="startUpload()">Generate Comic</button>
+            <button id="restore-btn" style="margin-top:10px; background:#27ae60; color:white; padding:10px; width:100%; border:none; border-radius:8px; cursor:pointer; display:none;" onclick="restoreSession()">📂 Restore Unsaved Session</button>
+            <div id="progress-area" style="display:none; margin-top:20px;">
                 <div class="loader"></div>
+                <p id="prog-text" style="margin-top:10px; font-weight:bold;">Starting...</p>
             </div>
         </div>
     </div>
+    <!-- EDITOR -->
     <div id="editor-container">
+        <div class="comic-wrapper" id="comic-container"></div>
+        <div class="controls">
+            <h4>Editor Tools</h4>
+            <div class="c-grp">
+                <button onclick="addBubble()">+ Add Bubble</button>
+                <button class="btn-danger" onclick="deleteBubble()">Delete Selected</button>
             </div>
+            <div class="c-grp">
+                <label>Tail:</label>
+                <div class="row">
+                    <button onclick="rotateTail()">Rotate</button>
+                    <input type="range" min="10" max="90" value="50" oninput="slideTail(this.value)">
                 </div>
             </div>
+             <div class="c-grp">
+                <label>Colors:</label>
+                <div class="row">
+                    <input type="color" id="c-text" title="Text" oninput="setColor('text', this.value)">
+                    <input type="color" id="c-bg" title="Fill" oninput="setColor('bg', this.value)">
+                </div>
             </div>
+            <div class="c-grp">
                 <label>Panel:</label>
+                <div class="row">
+                    <button onclick="regen('backward')">⬅️</button>
+                    <button onclick="regen('forward')">➡️</button>
                 </div>
+                <button onclick="replaceImg()">🖼️ Swap Image</button>
+                <input type="text" id="ts-in" placeholder="Time (mm:ss)">
+                <button onclick="goTime()">Jump to Time</button>
+                <input type="range" id="z-slide" min="100" max="300" value="100" disabled oninput="doZoom(this.value)">
+            </div>
+            <div class="c-grp">
+                <button onclick="saveLocal()" style="background:#f1c40f">⚠️ Force Save</button>
+                <button class="btn-primary" onclick="downloadPNG()">📥 Download PNG</button>
+                <button onclick="location.reload()">❌ Close</button>
             </div>
         </div>
+        <input type="file" id="img-swap" 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);
+        if(localStorage.getItem('comic_save')) document.getElementById('restore-btn').style.display = 'block';
+        // --- VARS ---
+        let selBubble, selPanel;
+        let isDragging=false, isResizing=false, isPanning=false;
+        let startX, startY, initX, initY, initW, initH;
+        let panStartX, panStartY, panInitTx, panInitTy;
+        // --- 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 file");
+            const fd = new FormData(); fd.append('file', f);
+            document.querySelector('.box').style.display='none';
+            document.getElementById('progress-area').style.display='block';
+            await fetch(`/uploader?sid=${sid}`, {method:'POST', body:fd});
+            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);
+                    fetchComic();
+                }
+            }, 1500);
         }
+        function fetchComic() {
+            fetch(`/output/pages.json?sid=${sid}`).then(r=>r.json()).then(d => {
+                renderComic(d);
+                saveLocal(); // Auto save initial state
+            });
+        }
         function restoreSession() {
+            const d = JSON.parse(localStorage.getItem('comic_save'));
+            renderComic(d, true);
         }
+        // --- RENDER ---
+        function renderComic(data, isRestore=false) {
+            document.getElementById('upload-container').style.display = 'none';
+            document.getElementById('editor-container').style.display = 'block';
+            const con = document.getElementById('comic-container');
             con.innerHTML = '';
+            data.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}`;
+                    if(isRestore) {
+                        img.dataset.zoom = pan.zoom||100;
+                        img.dataset.tx = pan.tx||0;
+                        img.dataset.ty = pan.ty||0;
+                        applyTransform(img);
+                    }
                     img.onmousedown = (e) => startPan(e, img);
                     pDiv.appendChild(img);
+                    // Bubbles
+                    const bList = isRestore ? pan.bubbles : (p.bubbles && p.bubbles[j] ? [p.bubbles[j]] : []);
+                    bList.forEach(bd => {
+                        if(!bd.text && !bd.dialog) return;
+                        const b = createBubbleHTML(bd);
                         pDiv.appendChild(b);
                     });
                     grid.appendChild(pDiv);
                 });
+                pageDiv.appendChild(grid);
+                con.appendChild(pageDiv);
             });
         }
+        // --- BUBBLE HTML ---
+        function createBubbleHTML(data) {
+            const b = document.createElement('div');
+            b.className = data.classes || 'speech-bubble speech tail-bottom';
+            b.style.left = data.left || (data.bubble_offset_x + 'px') || '50px';
+            b.style.top = data.top || (data.bubble_offset_y + 'px') || '20px';
+            if(data.width) b.style.width = data.width;
+            if(data.height) b.style.height = data.height;
+            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>`;
             b.onmousedown = (e) => {
                 if(e.target.classList.contains('resize-handle')) return;
+                e.stopPropagation(); selectBubble(b);
+                isDragging=true; startX=e.clientX; startY=e.clientY;
+                initX=b.offsetLeft; initY=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 t = b.querySelector('.bubble-text');
+                const i = document.createElement('textarea');
+                i.value = t.innerText;
+                b.appendChild(i); t.style.opacity=0; i.focus();
+                i.onblur = () => { t.innerText=i.value; i.remove(); t.style.opacity=1; saveLocal(); };
             };
             return b;
         }
+        // --- GLOBAL EVENTS ---
+        document.addEventListener('mousemove', (e) => {
+            if(isDragging && selBubble) {
+                selBubble.style.left = (initX + e.clientX - startX) + 'px';
+                selBubble.style.top = (initY + e.clientY - startY) + 'px';
+            }
+            if(isResizing && selBubble) {
+                selBubble.style.width = (initW + e.clientX - startX) + 'px';
+                selBubble.style.height = (initH + e.clientY - startY) + 'px';
+            }
+            if(isPanning && selPanel) {
+                const img = selPanel.querySelector('img');
+                img.dataset.tx = panInitTx + (e.clientX - panStartX);
+                img.dataset.ty = panInitTy + (e.clientY - panStartY);
+                applyTransform(img);
+            }
+        });
+        document.addEventListener('mouseup', () => {
+            if(isDragging || isResizing || isPanning) saveLocal();
+            isDragging = false; isResizing = false; isPanning = false;
+        });
+        // --- LOGIC ---
+        function selectBubble(el) {
+            if(selBubble) selBubble.classList.remove('selected');
+            selBubble = el;
+            el.classList.add('selected');
+            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');
+            const img = el.querySelector('img');
+            document.getElementById('zoom-slider').disabled = false;
+            document.getElementById('zoom-slider').value = img.dataset.zoom || 100;
         }
+        function addBubble() {
+            if(!selPanel) return alert("Select Panel");
+            const b = createBubbleHTML({text:"Text", left:"20px", top:"20px"});
+            selPanel.appendChild(b);
+            selectBubble(b);
+            saveLocal();
         }
+        function deleteBubble() { if(selBubble) { selBubble.remove(); saveLocal(); } }
         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');
             saveLocal();
         }
+        function slideTail(v) { if(selBubble) { selBubble.style.setProperty('--tail-pos', v+'%'); saveLocal(); } }
+        function setColor(type, val) {
+            if(!selBubble) return;
+            if(type=='text') selBubble.style.setProperty('--text-color', val);
+            else selBubble.style.setProperty('--bg-color', val);
             saveLocal();
         }
+        // --- ZOOM/PAN ---
+        function doZoom(val) {
+            if(!selPanel) return;
+            const img = selPanel.querySelector('img');
+            img.dataset.zoom = val;
+            applyTransform(img);
             saveLocal();
         }
         function startPan(e, img) {
+            if((parseFloat(img.dataset.zoom)||100) <= 100) return;
+            e.preventDefault(); isPanning = true;
+            panStartX = e.clientX; panStartY = e.clientY;
+            panInitTx = parseFloat(img.dataset.tx||0);
+            panInitTy = parseFloat(img.dataset.ty||0);
         }
         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)`;
+            img.classList.toggle('pannable', z>1);
         }
+        // --- BACKEND ---
+        function replaceImg() {
+            if(!selPanel) return alert("Select Panel");
+            const inp = document.getElementById('img-swap');
+            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}`; saveLocal(); }
+                inp.value='';
             };
             inp.click();
         }
+        async function regen(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()}`;
         }
+        async function goTime() {
+            if(!selPanel) return alert("Select Panel");
+            let v = document.getElementById('ts-in').value;
+            if(v.includes(':')) { const p=v.split(':'); v=parseInt(p[0])*60+parseFloat(p[1]); }
+            const img = selPanel.querySelector('img');
+            const 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()}`;
         }
+        // --- SAVE/EXPORT ---
+        function saveLocal() {
+            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 downloadPNG() {
             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=`Page-${i+1}.png`; a.click();
             }
         }
     </script>
 </body>
 </html>
             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 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 = {}
+            for i, sub in enumerate(subs[:48]): # 48 Panels = 12 Pages
                 mid = (sub.start.total_seconds() + sub.end.total_seconds())/2
                 cap.set(cv2.CAP_PROP_POS_MSEC, mid*1000)
                 ret, frame = cap.read()
                     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()
         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)}
     def get_frame_at_timestamp(self, fname, ts):
         try:
+            c = cv2.VideoCapture(self.video_path)
+            c.set(cv2.CAP_PROP_POS_MSEC, float(ts)*1000)
+            r, fr = c.read()
+            c.release()
+            if r:
+                cv2.imwrite(os.path.join(self.frames_dir, fname), fr)
                 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')
+    if not sid: return "No SID", 400
     f = request.files['file']
     gen = EnhancedComicGenerator(sid)
     gen.cleanup_previous_run()
 @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('/goto_timestamp', methods=['POST'])
 def go_time():
     d = request.get_json()
+    return jsonify(EnhancedComicGenerator(request.args.get('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']
+    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)