Testcomic

Configuration error

App Files Files Community

tester343 commited on Dec 3, 2025

Commit

6853c41

verified ·

1 Parent(s): 4d2724c

Update app_enhanced.py

Browse files

Files changed (1) hide show

app_enhanced.py +497 -453

app_enhanced.py CHANGED Viewed

@@ -9,495 +9,486 @@ import logging
 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.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 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);
@@ -511,88 +502,97 @@ INDEX_HTML = '''
             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
@@ -604,42 +604,49 @@ class EnhancedComicGenerator:
         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)
@@ -648,12 +655,16 @@ class EnhancedComicGenerator:
                     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]
@@ -663,30 +674,52 @@ 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):
-        # 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 ---
@@ -696,9 +729,10 @@ def index(): return INDEX_HTML
 @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()
@@ -707,28 +741,38 @@ def upload():
 @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)

 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">
 <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 */
+        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);
             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>
 '''
+# --- BACKEND LOGIC ---
 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
+        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)
                     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]
                 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 ---
 @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()
 @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)