Update app_enhanced.py

app_enhanced.py

@@ -21,13 +21,9 @@ try:
     import srt
 except ImportError as e:
     print(f"❌ CRITICAL ERROR: Missing python library. {e}")
-    # Dummies to allow app startup (will fail on generation if not fixed)
-    cv2 = None
-    np = None
-    Image = None
-    srt = None
+    cv2 = None; np = None; Image = None; srt = None
 
-# --- 2. BACKEND MODULE IMPORTS (WITH FALLBACKS) ---
+# --- 2. BACKEND IMPORTS WITH FALLBACKS ---
 def dummy_func(*args, **kwargs): return 0, 0, None, None
 
 try:
@@ -37,13 +33,10 @@ except:
 
 try:
     from backend.simple_color_enhancer import SimpleColorEnhancer
+    from backend.quality_color_enhancer import QualityColorEnhancer
 except:
     class SimpleColorEnhancer:
         def enhance_single(self, *args): pass
-
-try:
-    from backend.quality_color_enhancer import QualityColorEnhancer
-except:
     class QualityColorEnhancer:
         def enhance_single(self, *args): pass
 
@@ -69,10 +62,9 @@ except:
         def place_bubble_ai(self, p, l): return 50, 20
     ai_bubble_placer = DummyPlacer()
 
-
 # --- FLASK APP SETUP ---
 app = Flask(__name__)
-BASE_USER_DIR = "userdata"  # Root folder for all sessions
+BASE_USER_DIR = "userdata"
 
 # --- HTML INTERFACE ---
 INDEX_HTML = '''
@@ -82,29 +74,30 @@ INDEX_HTML = '''
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Movie to Comic Generator</title>
-    <!-- html-to-image: Required for accurate PNG export of CSS gradients -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.min.js"></script>
     <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&family=Lato&display=swap" rel="stylesheet">
     <style>
         body { background-color: #fdf6e3; font-family: 'Lato', sans-serif; color: #3d3d3d; margin: 0; min-height: 100vh; }
         
-        /* UPLOAD VIEW */
-        #upload-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; width: 100%; }
+        /* 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 VIEW */
         #editor-container { display: none; padding: 20px; width: 100%; box-sizing: border-box; }
         
+        /* BUTTONS & INPUTS */
         h1 { color: #2c3e50; margin-bottom: 30px; font-weight: 600; }
         .file-input { display: none; }
-        .file-label { display: block; padding: 15px; background: #2c3e50; color: white; border-radius: 8px; cursor: pointer; font-weight: bold; }
-        .submit-btn { width: 100%; padding: 15px; background: #e67e22; color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; margin-top: 20px; }
+        .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%} }
-        #status-text { margin-top: 10px; font-size: 18px; }
-
-        /* COMIC LAYOUT */
-        .comic-container-wrapper { max-width: 1200px; margin: 0 auto; padding-bottom: 100px; }
+        
+        /* 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; }
@@ -113,119 +106,235 @@ INDEX_HTML = '''
         .panel img.pannable { cursor: grab; }
         .panel img.panning { cursor: grabbing; }
 
-        /* SPEECH BUBBLE (SHARK FIN - EXPORT SAFE) */
+        /* --- SPEECH BUBBLE (EXACT SHARK FIN CSS) --- */
         .speech-bubble { 
             position: absolute; display: flex; justify-content: center; align-items: center; 
             width: 150px; height: 80px; min-width: 60px; min-height: 40px; box-sizing: border-box; 
             z-index: 10; cursor: move; font-family: 'Comic Neue', cursive; font-weight: bold; 
             font-size: 14px; text-align: center;
         }
-        .bubble-text { padding: 0.8em; position: relative; z-index: 5; }
+        .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; }
 
-        /* The Exact CSS Logic Requested (Adapted for Export Compatibility) */
         .speech-bubble.speech {
-            --b: 3em;   /* tail base */
-            --h: 1.8em; /* tail height */
-            --t: 0.6;   /* thickness */
-            --p: var(--tail-pos, 50%);
-            --r: 1.2em; /* radius */
-            --c: var(--bubble-fill-color, #4ECDC4); /* color */
-            
-            background: var(--c);
-            color: var(--bubble-text-color, #fff);
-            padding: 1em;
-            position: absolute;
-            
-            /* Body Radius */
+            --b: 3em; --h: 1.8em; --t: 0.6; --p: var(--tail-pos, 50%); --r: 1.2em; 
+            --c: var(--bubble-fill-color, #4ECDC4);
+            background: var(--c); color: var(--bubble-text-color, #fff); padding: 1em; position: absolute;
             border-radius: var(--r) var(--r) min(var(--r), calc(100% - var(--p) - (1 - var(--t)) * var(--b) / 2)) min(var(--r), calc(var(--p) - (1 - var(--t)) * var(--b) / 2)) / var(--r);
         }
-
-        /* The Tail (Using Gradient instead of Mask for Export Safety) */
         .speech-bubble.speech:before {
             content: ""; position: absolute; width: var(--b); height: var(--h);
-            /* Radial Gradient simulates the concave mask curve */
             background: radial-gradient(100% 100% at 100% 0, transparent calc(var(--t) * 100% - 1px), var(--c) calc(var(--t) * 100%));
             border-bottom-left-radius: 100%; pointer-events: none; z-index: 1;
         }
-
-        /* Tail Positioning */
         .speech-bubble.speech.tail-bottom:before { top: 99%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); }
-        
         .speech-bubble.speech.tail-top { border-radius: min(var(--r), calc(var(--p) - (1 - var(--t)) * var(--b) / 2)) min(var(--r), calc(100% - var(--p) - (1 - var(--t)) * var(--b) / 2)) var(--r) var(--r) / var(--r); }
         .speech-bubble.speech.tail-top:before { bottom: 99%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: scaleY(-1); }
-        
         .speech-bubble.speech.tail-left { border-radius: var(--r); }
         .speech-bubble.speech.tail-left:before { right: 99%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: rotate(90deg); transform-origin: top right; }
-        
         .speech-bubble.speech.tail-right { border-radius: var(--r); }
         .speech-bubble.speech.tail-right:before { left: 99%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: rotate(-90deg); transform-origin: top left; }
 
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
         .speech-bubble.thought::after { display:none; } 
-        /* (Thought dots CSS omitted for brevity, handled in JS if needed) */
+        .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 button, input, select { width: 100%; margin-top: 5px; padding: 5px; }
+        .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 -->
+    <!-- UPLOAD SCREEN -->
     <div id="upload-container">
         <div class="upload-box">
-            <h1>🎬 Movie to Comic</h1>
+            <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</span>
-            <button class="submit-btn" onclick="upload()">Generate</button>
-            <div class="loading-view" id="loading-view">
+            <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 -->
+    <!-- EDITOR SCREEN -->
     <div id="editor-container">
         <div class="comic-container-wrapper">
-            <h1 style="text-align:center;">Generated Comic</h1>
+            <h1 style="text-align:center;">Comic Editor</h1>
             <div id="comic-pages"></div>
         </div>
+        
+        <!-- Hidden inputs -->
+        <input type="file" id="image-uploader" style="display: none;" accept="image/*">
+
         <div class="edit-controls">
-            <h4>Editor</h4>
-            <button onclick="addBubble()">+ Bubble</button>
-            <button onclick="deleteBubble()" style="background:#ffcccc">Delete</button>
-            <label>Tail Position:</label>
-            <input type="range" id="tail-slider" min="10" max="90" value="50" oninput="slideTail(this.value)">
-            <button onclick="rotateTail()">Rotate Tail</button>
+            <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>
+                <input type="range" id="zoom-slider" min="100" max="300" value="100" step="5" disabled oninput="handleZoom(this)">
+            </div>
             <hr>
-            <button onclick="exportComic()" style="background:#ccffcc">💾 Save PNG</button>
-            <button onclick="location.reload()">↺ New Video</button>
+            <button onclick="saveLocal()">💾 Force Save Draft</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 ID
+        // --- SESSION ---
         function genUUID(){ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,c=>{var r=Math.random()*16|0,v=c=='x'?r:(r&0x3|0x8);return v.toString(16);}); }
         let sid = localStorage.getItem('comic_sid') || genUUID();
         localStorage.setItem('comic_sid', sid);
         console.log("SID:", sid);
 
-        let interval, selectedBubble;
+        // Check for existing save on load
+        if(localStorage.getItem('comic_autosave')) {
+            document.getElementById('restore-btn').style.display = 'block';
+        }
+
+        let interval, selectedBubble, selectedPanel;
+        let isResizing=false, resizeHandle, startX, startY, startW, startH, startL, startT;
+        let isPanning=false, panStartX, panStartY, panStartTx, panStartTy;
+
+        // --- RESTORE LOGIC ---
+        function restoreSession() {
+            const savedData = localStorage.getItem('comic_autosave');
+            if(!savedData) return alert("No saved session found.");
+            try {
+                const state = JSON.parse(savedData);
+                // Restore SID from state if needed, or keep current
+                renderFromState(state);
+                document.getElementById('upload-container').style.display = 'none';
+                document.getElementById('editor-container').style.display = 'block';
+            } catch(e) {
+                alert("Failed to restore: " + e);
+            }
+        }
+
+        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');
+                    // Ensure image path includes SID if it's relative, or use full saved src
+                    img.src = pan.src; 
+                    // Restore pan/zoom
+                    img.dataset.zoom = pan.zoom || 100;
+                    img.dataset.translateX = pan.tx || 0;
+                    img.dataset.translateY = pan.ty || 0;
+                    updateImageTransform(img);
+                    img.onmousedown = startPan;
+                    pDiv.appendChild(img);
+
+                    // Restore bubbles
+                    pan.bubbles.forEach(bData => {
+                        const b = createBubble(bData.text, bData.left, bData.top, bData.type, bData.tailPos, bData.width, bData.height, bData.colors);
+                        // Re-apply rotation classes
+                        if(bData.classes) b.className = bData.classes;
+                        pDiv.appendChild(b);
+                    });
+                    grid.appendChild(pDiv);
+                });
+                div.appendChild(grid);
+                con.appendChild(div);
+            });
+        }
+
+        // --- SAVE LOGIC (Auto-Save) ---
+        function saveLocal() {
+            const pages = [];
+            document.querySelectorAll('.comic-page').forEach(page => {
+                const panels = [];
+                page.querySelectorAll('.panel').forEach(pDiv => {
+                    const img = pDiv.querySelector('img');
+                    const bubbles = [];
+                    pDiv.querySelectorAll('.speech-bubble').forEach(b => {
+                        bubbles.push({
+                            text: b.querySelector('.bubble-text').innerText,
+                            left: b.style.left, top: b.style.top,
+                            width: b.style.width, height: b.style.height,
+                            type: b.dataset.type,
+                            tailPos: b.style.getPropertyValue('--tail-pos'),
+                            classes: b.className,
+                            colors: {
+                                text: b.style.getPropertyValue('--bubble-text-color'),
+                                fill: b.style.getPropertyValue('--bubble-fill-color')
+                            }
+                        });
+                    });
+                    panels.push({
+                        src: img.src,
+                        zoom: img.dataset.zoom,
+                        tx: img.dataset.translateX,
+                        ty: img.dataset.translateY,
+                        bubbles: bubbles
+                    });
+                });
+                pages.push({ panels: panels });
+            });
+            localStorage.setItem('comic_autosave', JSON.stringify(pages));
+            console.log("Autosaved.");
+        }
 
+        // --- 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);
@@ -240,75 +349,103 @@ INDEX_HTML = '''
                 clearInterval(interval);
                 document.getElementById('upload-container').style.display='none';
                 document.getElementById('editor-container').style.display='block';
-                loadComic();
+                loadNewComic();
             }
         }
 
-        function loadComic() {
+        function loadNewComic() {
             fetch(`/output/pages.json?sid=${sid}`).then(r=>r.json()).then(data => {
-                const con = document.getElementById('comic-pages');
-                con.innerHTML = '';
-                data.forEach((p,i) => {
-                    const div = document.createElement('div');
-                    div.className = 'comic-page';
-                    const grid = document.createElement('div');
-                    grid.className = 'comic-grid';
-                    p.panels.forEach((pan, j) => {
-                        const pDiv = document.createElement('div');
-                        pDiv.className = 'panel';
-                        pDiv.innerHTML = `<img src="/frames/${pan.image}?sid=${sid}">`;
-                        if(p.bubbles && p.bubbles[j]) {
-                            const b = createBubble(p.bubbles[j].dialog, p.bubbles[j].bubble_offset_x, p.bubbles[j].bubble_offset_y);
-                            pDiv.appendChild(b);
-                        }
-                        grid.appendChild(pDiv);
-                    });
-                    div.appendChild(grid);
-                    con.appendChild(div);
-                });
+                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(); // Initial save
             });
         }
 
-        function createBubble(text, x, y) {
+        // --- INTERACTIVITY ---
+        function createBubble(text, x, y, type='speech', tailPos='50%', w, h, colors) {
             const b = document.createElement('div');
             b.className = 'speech-bubble speech tail-bottom';
-            b.style.left = (x||50)+'px'; b.style.top = (y||20)+'px';
-            b.innerHTML = `<span class="bubble-text">${text||'Text'}</span><div class="resize-handle se"></div>`;
+            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 = function(e) {
+            // Handlers
+            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 = function(ev) {
+                document.onmousemove = (ev) => {
                     b.style.left = (ev.clientX-ox)+'px'; b.style.top = (ev.clientY-oy)+'px';
-                }
-                document.onmouseup = () => document.onmousemove = null;
+                };
+                document.onmouseup = () => { document.onmousemove=null; saveLocal(); };
             };
-            
-            b.querySelector('.resize-handle').onmousedown = function(e) {
+
+            b.querySelector('.resize-handle').onmousedown = (e) => {
                 e.stopPropagation();
                 const ox = e.clientX, oy = e.clientY, ow = b.offsetWidth, oh = b.offsetHeight;
-                document.onmousemove = function(ev) {
+                document.onmousemove = (ev) => {
                     b.style.width = (ow + ev.clientX - ox) + 'px';
                     b.style.height = (oh + ev.clientY - oy) + 'px';
-                }
-                document.onmouseup = () => document.onmousemove = null;
+                };
+                document.onmouseup = () => { document.onmousemove=null; saveLocal(); };
             };
-            
-            b.ondblclick = function(e) {
+
+            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.display='none'; i.focus();
-                i.onblur = function() { t.innerText = i.value; i.remove(); t.style.display='block'; }
+                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 slideTail(v) { if(selectedBubble) selectedBubble.style.setProperty('--tail-pos', v+'%'); }
+        function selectPanel(el) {
+            document.querySelectorAll('.panel.selected').forEach(e=>e.classList.remove('selected'));
+            el.classList.add('selected');
+            selectedPanel = el;
+            selectBubbleUI(null);
+        }
+
+        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;
@@ -317,28 +454,129 @@ INDEX_HTML = '''
             else if(b.classList.contains('tail-left')) b.classList.replace('tail-left','tail-top');
             else if(b.classList.contains('tail-top')) b.classList.replace('tail-top','tail-right');
             else b.className = b.className.replace(/tail-\w+/,'tail-bottom');
+            saveLocal();
+        }
+        
+        function changeBubbleType(v) {
+            if(!selectedBubble) return;
+            selectedBubble.className = `speech-bubble ${v} tail-bottom selected`;
+            selectedBubble.dataset.type = v;
+            selectBubbleUI(selectedBubble);
+            saveLocal();
         }
 
         function addBubble() {
-            if(document.querySelector('.panel')) {
-                document.querySelector('.panel').appendChild(createBubble("New", 20, 20));
-            }
+            if(!selectedPanel) return alert("Select a panel");
+            const b = createBubble("New", "20px", "20px");
+            selectedPanel.appendChild(b);
+            saveLocal();
+        }
+        function deleteBubble() { if(selectedBubble) { selectedBubble.remove(); saveLocal(); } }
+
+        // Panel Manipulations
+        function startPan(e) {
+            if(e.button!==0) return;
+            const img = e.target;
+            if((parseFloat(img.dataset.zoom)||100) <= 100) return;
+            e.preventDefault(); isPanning = true;
+            img.classList.add('panning');
+            panStartX = e.clientX; panStartY = e.clientY;
+            panStartTx = parseFloat(img.dataset.translateX||0);
+            panStartTy = parseFloat(img.dataset.translateY||0);
+        }
+        document.addEventListener('mousemove', (e) => {
+            if(!isPanning || !selectedPanel) return;
+            const img = selectedPanel.querySelector('img');
+            img.dataset.translateX = panStartTx + (e.clientX - panStartX);
+            img.dataset.translateY = panStartTy + (e.clientY - panStartY);
+            updateImageTransform(img);
+        });
+        document.addEventListener('mouseup', () => {
+            if(isPanning) { isPanning=false; selectedPanel?.querySelector('img')?.classList.remove('panning'); saveLocal(); }
+        });
+        function handleZoom(el) {
+            if(!selectedPanel) return;
+            const img = selectedPanel.querySelector('img');
+            img.dataset.zoom = el.value;
+            updateImageTransform(img);
+            saveLocal();
+        }
+        function updateImageTransform(img) {
+            const z = (img.dataset.zoom||100)/100;
+            const x = img.dataset.translateX||0; const y = img.dataset.translateY||0;
+            img.style.transform = `translateX(${x}px) translateY(${y}px) scale(${z})`;
+            img.classList.toggle('pannable', z>1);
+        }
+        function resetPanelTransform() {
+            if(!selectedPanel) return;
+            const img = selectedPanel.querySelector('img');
+            img.dataset.zoom=100; img.dataset.translateX=0; img.dataset.translateY=0;
+            document.getElementById('zoom-slider').value = 100;
+            updateImageTransform(img);
+            saveLocal();
         }
-        function deleteBubble() { if(selectedBubble) selectedBubble.remove(); }
 
+        // API
+        function replacePanelImage() {
+            if(!selectedPanel) return alert("Select panel");
+            const img = selectedPanel.querySelector('img');
+            const inp = document.getElementById('image-uploader');
+            inp.onchange = async(e) => {
+                const fd = new FormData(); fd.append('image', e.target.files[0]);
+                const r = await fetch(`/replace_panel?sid=${sid}`, {method:'POST', body:fd});
+                const d = await r.json();
+                if(d.success) { img.src = `/frames/${d.new_filename}?sid=${sid}&t=${Date.now()}`; saveLocal(); }
+                inp.value='';
+            };
+            inp.click();
+        }
+        async function adjustFrame(dir) {
+            if(!selectedPanel) return alert("Select panel");
+            const img = selectedPanel.querySelector('img');
+            let fname = img.src.split('/').pop().split('?')[0];
+            await fetch(`/regenerate_frame?sid=${sid}`, {
+                method:'POST', headers:{'Content-Type':'application/json'},
+                body:JSON.stringify({filename:fname, direction:dir})
+            });
+            img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`;
+            saveLocal();
+        }
+        async function gotoTimestamp() {
+            if(!selectedPanel) return alert("Select panel");
+            let v = document.getElementById('timestamp-input').value;
+            if(v.includes(':')) { let p=v.split(':'); v = parseInt(p[0])*60 + parseFloat(p[1]); }
+            const img = selectedPanel.querySelector('img');
+            let fname = img.src.split('/').pop().split('?')[0];
+            await fetch(`/goto_timestamp?sid=${sid}`, {
+                method:'POST', headers:{'Content-Type':'application/json'},
+                body:JSON.stringify({filename:fname, timestamp:v})
+            });
+            img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`;
+            saveLocal();
+        }
+        
         async function exportComic() {
             const pgs = document.querySelectorAll('.comic-page');
             for(let i=0; i<pgs.length; i++) {
-                const url = await htmlToImage.toPng(pgs[i], {pixelRatio:3});
-                const a = document.createElement('a');
-                a.download = `comic-${i+1}.png`; a.href=url; a.click();
+                const u = await htmlToImage.toPng(pgs[i], {pixelRatio:3});
+                const a = document.createElement('a'); a.href=u; a.download=`comic-${i+1}.png`; a.click();
             }
         }
+
+        // Color Listeners Logic
+        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
@@ -347,20 +585,17 @@ class EnhancedComicGenerator:
         self.frames_dir = os.path.join(self.user_dir, 'frames')
         self.output_dir = os.path.join(self.user_dir, 'output')
         self.status_file = os.path.join(self.output_dir, 'status.json')
-        
         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)
+            with open(self.status_file, 'w') as f: json.dump({'message': message, 'progress': progress}, f)
         except: pass
 
     def cleanup_previous_run(self):
-        # Wipe old frames to prevent mixing comics
         if os.path.exists(self.frames_dir):
             for f in os.listdir(self.frames_dir):
                 try: os.remove(os.path.join(self.frames_dir, f))
@@ -373,32 +608,29 @@ class EnhancedComicGenerator:
 
     def generate_comic(self):
         try:
-            if cv2 is None: raise Exception("OpenCV missing on server.")
-            
+            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()
 
-            # 1. Subtitles
             self.update_status("Extracting Dialogue...", 20)
             user_srt = os.path.join(self.user_dir, 'subs.srt')
             try:
                 get_real_subtitles(self.video_path)
                 if os.path.exists('test1.srt'): shutil.move('test1.srt', user_srt)
             except: 
-                with open(user_srt, 'w') as f: f.write("1\n00:00:01,000 --> 00:00:04,000\nScene 1\n")
+                with open(user_srt, 'w') as f: f.write("1\n00:00:01,000 --> 00:00:04,000\nHello\n")
 
-            # 2. Frames
             self.update_status("Generating Panels...", 40)
             with open(user_srt, 'r', encoding='utf-8') as f: subs = list(srt.parse(f.read()))
+            
             cap = cv2.VideoCapture(self.video_path)
             frame_files = []
             bubbles = []
             
-            limit_subs = subs[:12]
-            for i, sub in enumerate(limit_subs):
+            for i, sub in enumerate(subs[:12]):
                 mid = (sub.start.total_seconds() + sub.end.total_seconds())/2
                 cap.set(cv2.CAP_PROP_POS_MSEC, mid*1000)
                 ret, frame = cap.read()
@@ -406,36 +638,73 @@ class EnhancedComicGenerator:
                     fname = f"frame_{i}.png"
                     cv2.imwrite(os.path.join(self.frames_dir, fname), frame)
                     frame_files.append(fname)
-                    # FIX: Provide ALL args to avoid TypeError
+                    self.frame_metadata[fname] = mid
                     bubbles.append(bubble(
-                        dialog=sub.content, 
-                        bubble_offset_x=50, bubble_offset_y=20,
+                        dialog=sub.content, bubble_offset_x=50, bubble_offset_y=20,
                         lip_x=-1, lip_y=-1, emotion='normal'
                     ))
             cap.release()
+            
+            with open(os.path.join(self.frames_dir, 'frame_metadata.json'), 'w') as f: json.dump(self.frame_metadata, f)
 
-            # 3. Assemble
             self.update_status("Finalizing...", 90)
             pages_data = []
             for i in range(0, len(frame_files), 4):
                 batch_f = frame_files[i:i+4]
                 batch_b = bubbles[i:i+4]
                 panels = [{'image': f} for f in batch_f]
-                b_data = [b.__dict__ if hasattr(b, '__dict__') else b for b in batch_b]
+                b_data = [b if isinstance(b, dict) else b.__dict__ for b in batch_b]
                 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)
+            with open(os.path.join(self.output_dir, 'pages.json'), 'w') as f: json.dump(pages_data, f)
             
-            # Save template for debugging (optional in this mode)
-            with open(os.path.join(self.output_dir, 'page.html'), 'w', encoding='utf-8') as f:
-                f.write(INDEX_HTML)
-
             self.update_status("Done!", 100)
         except Exception as e:
             traceback.print_exc()
             self.update_status(f"Error: {str(e)}", -1)
 
+    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('/')
 def index(): return INDEX_HTML
@@ -443,13 +712,11 @@ def index(): return INDEX_HTML
 @app.route('/uploader', methods=['POST'])
 def upload():
     sid = request.args.get('sid')
-    if not sid: return "No SID", 400
+    if not sid: return "Missing SID", 400
     f = request.files['file']
-    
     gen = EnhancedComicGenerator(sid)
-    gen.cleanup_previous_run() # Clean old files BEFORE new generation
+    gen.cleanup_previous_run()
     f.save(gen.video_path)
-    
     gen.update_status("Starting...", 5)
     threading.Thread(target=gen.generate_comic).start()
     return jsonify({'success': True})
@@ -463,31 +730,26 @@ def get_status():
 
 @app.route('/output/<path:filename>')
 def get_output(filename):
-    sid = request.args.get('sid')
-    return send_from_directory(os.path.join(BASE_USER_DIR, sid, '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):
-    sid = request.args.get('sid')
-    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'frames'), filename)
+    return send_from_directory(os.path.join(BASE_USER_DIR, request.args.get('sid'), 'frames'), filename)
 
-# --- UTILITY ROUTES FOR EDITOR ---
 @app.route('/regenerate_frame', methods=['POST'])
-def regenerate_frame():
+def regen_frame():
     sid = request.args.get('sid')
-    data = request.get_json()
-    gen = EnhancedComicGenerator(sid)
-    return jsonify(gen.regenerate_frame(data['filename'], data['direction']))
+    d = request.get_json()
+    return jsonify(EnhancedComicGenerator(sid).regenerate_frame(d['filename'], d['direction']))
 
 @app.route('/goto_timestamp', methods=['POST'])
-def goto_timestamp():
+def go_time():
     sid = request.args.get('sid')
-    data = request.get_json()
-    gen = EnhancedComicGenerator(sid)
-    return jsonify(gen.get_frame_at_timestamp(data['filename'], data['timestamp']))
+    d = request.get_json()
+    return jsonify(EnhancedComicGenerator(sid).get_frame_at_timestamp(d['filename'], d['timestamp']))
 
 @app.route('/replace_panel', methods=['POST'])
-def replace_panel():
+def rep_panel():
     sid = request.args.get('sid')
     f = request.files['image']
     gen = EnhancedComicGenerator(sid)