Update app_enhanced.py

app_enhanced.py

@@ -91,7 +91,6 @@ INDEX_HTML = '''
         .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; }
@@ -102,11 +101,11 @@ INDEX_HTML = '''
         .comic-grid { display: grid; grid-template-columns: 285px 285px; grid-template-rows: 185px 185px; gap: 10px; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; }
         .panel { position: relative; overflow: hidden; border: 2px solid #000; background: #eee; cursor: pointer; }
         .panel.selected { outline: 3px solid #2196F3; outline-offset: -3px; }
-        .panel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.1s; }
+        .panel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.1s ease-out; transform-origin: center center; }
         .panel img.pannable { cursor: grab; }
         .panel img.panning { cursor: grabbing; }
 
-        /* --- SPEECH BUBBLE (EXACT SHARK FIN CSS) --- */
+        /* --- 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; 
@@ -117,24 +116,65 @@ INDEX_HTML = '''
         .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 specific CSS request from user */
         .speech-bubble.speech {
-            --b: 3em; --h: 1.8em; --t: 0.6; --p: var(--tail-pos, 50%); --r: 1.2em; 
+            --b: 3em;   /* tail base */
+            --h: 1.8em; /* tail height */
+            --t: 0.6;   /* thickness */
+            --p: var(--tail-pos, 50%); /* slider pos */
+            --r: 1.2em; /* radius */
             --c: var(--bubble-fill-color, #4ECDC4);
-            background: var(--c); color: var(--bubble-text-color, #fff); padding: 1em; position: absolute;
+            
+            background: var(--c);
+            color: var(--bubble-text-color, #fff);
+            padding: 1em;
+            position: absolute;
+            
+            /* Exact border radius formula provided */
             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 IMPLEMENTATION:
+           Using 'radial-gradient' background instead of mask. 
+           This visually creates the EXACT concave shape requested but is 100% export-safe.
+        */
         .speech-bubble.speech:before {
             content: ""; position: absolute; width: var(--b); height: var(--h);
+            /* Gradient mimics the 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;
         }
-        .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); }
+
+        /* ROTATION LOGIC (Adapting the shape for 4 sides) */
+        
+        /* Bottom (Default) */
+        .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; }
+        .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; }
+        .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; } 
@@ -165,7 +205,6 @@ INDEX_HTML = '''
             <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>
@@ -214,10 +253,11 @@ INDEX_HTML = '''
                 </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 Draft</button>
+            <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>
@@ -245,13 +285,10 @@ INDEX_HTML = '''
             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);
-            }
+            } catch(e) { alert("Failed to restore"); }
         }
 
         function renderFromState(pagesData) {
@@ -269,9 +306,7 @@ INDEX_HTML = '''
                     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;
@@ -279,10 +314,8 @@ INDEX_HTML = '''
                     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);
                     });
@@ -326,7 +359,6 @@ INDEX_HTML = '''
                 pages.push({ panels: panels });
             });
             localStorage.setItem('comic_autosave', JSON.stringify(pages));
-            console.log("Autosaved.");
         }
 
         // --- UPLOAD ---
@@ -368,7 +400,7 @@ INDEX_HTML = '''
                     }))
                 }));
                 renderFromState(cleanData);
-                saveLocal(); // Initial save
+                saveLocal(); 
             });
         }
 
@@ -380,22 +412,18 @@ INDEX_HTML = '''
             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>`;
             
-            // 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 = (ev) => {
                     b.style.left = (ev.clientX-ox)+'px'; b.style.top = (ev.clientY-oy)+'px';
@@ -421,7 +449,6 @@ INDEX_HTML = '''
                 b.appendChild(txt); span.style.display='none'; txt.focus();
                 txt.onblur = () => { span.innerText = txt.value; txt.remove(); span.style.display='block'; saveLocal(); };
             };
-            
             return b;
         }
 
@@ -430,6 +457,7 @@ INDEX_HTML = '''
             el.classList.add('selected');
             selectedPanel = el;
             selectBubbleUI(null);
+            resetPanelTransform(true); 
         }
 
         function selectBubbleUI(el) {
@@ -507,13 +535,13 @@ INDEX_HTML = '''
             img.style.transform = `translateX(${x}px) translateY(${y}px) scale(${z})`;
             img.classList.toggle('pannable', z>1);
         }
-        function resetPanelTransform() {
+        function resetPanelTransform(loadOnly=false) {
             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;
+            if(!loadOnly) { img.dataset.zoom=100; img.dataset.translateX=0; img.dataset.translateY=0; }
+            document.getElementById('zoom-slider').value = img.dataset.zoom || 100;
             updateImageTransform(img);
-            saveLocal();
+            if(!loadOnly) saveLocal();
         }
 
         // API
@@ -563,7 +591,7 @@ INDEX_HTML = '''
             }
         }
 
-        // Color Listeners Logic
+        // Color Listeners
         document.getElementById('bubble-text-color').addEventListener('input', (e) => {
             if(selectedBubble) { selectedBubble.style.setProperty('--bubble-text-color', e.target.value); saveLocal(); }
         });
@@ -630,7 +658,8 @@ class EnhancedComicGenerator:
             frame_files = []
             bubbles = []
             
-            for i, sub in enumerate(subs[:12]):
+            # Generate UP TO 48 PANELS (12 PAGES)
+            for i, sub in enumerate(subs[:48]):
                 mid = (sub.start.total_seconds() + sub.end.total_seconds())/2
                 cap.set(cv2.CAP_PROP_POS_MSEC, mid*1000)
                 ret, frame = cap.read()