Update app_enhanced.py

app_enhanced.py

@@ -118,8 +118,7 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     raw_moments = [{'text': s.content, 'start': s.start.total_seconds(), 'end': s.end.total_seconds()} for s in valid_subs]
 
     if target_pages <= 0: target_pages = 1
-    # UPDATED: 5 Panels per page for the new polygon layout
-    panels_per_page = 5 
+    panels_per_page = 5
     total_panels_needed = target_pages * panels_per_page
 
     selected_moments = []
@@ -177,16 +176,12 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         elif '!' in dialogue and dialogue.isupper(): b_type = 'reaction'
         elif '?' in dialogue: b_type = 'speech'
         
-        try:
-            faces = face_detector.detect_faces(p)
-            lip = face_detector.get_lip_position(p, faces[0]) if faces else (-1, -1)
-            # Adjust placement for new panel sizes? 
-            # The AI placement is generic, we let the user adjust in UI
-            bx, by = ai_bubble_placer.place_bubble_ai(p, lip)
-            b = bubble(dialog=dialogue, bubble_offset_x=bx, bubble_offset_y=by, lip_x=lip[0], lip_y=lip[1], type=b_type)
-            bubbles_list.append(b)
-        except:
-            bubbles_list.append(bubble(dialog=dialogue, type=b_type))
+        # Use simpler positioning logic for the backend; user adjusts in frontend
+        # Just putting default offsets
+        bx, by = 50, 50 
+        
+        b = bubble(dialog=dialogue, bubble_offset_x=bx, bubble_offset_y=by, type=b_type)
+        bubbles_list.append(b)
             
     pages = []
     for i in range(target_pages):
@@ -336,41 +331,41 @@ INDEX_HTML = '''
     /* ========================================= */
     /* 🎨 NEW POLYGON TEMPLATE LAYOUT CSS */
     /* ========================================= */
-    
-    /* 
-       Total Width: 1000px
-       Tier Height: 350px
-       Gutter: 10px
-       
-       Row 1 Y: 0 - 350
-       Row 2 Y: 360 - 710
-       Total Height: 710px
-    */
 
     .comic-wrapper { max-width: 1050px; margin: 0 auto; }
     .page-wrapper { margin: 30px auto; display: flex; flex-direction: column; align-items: center; }
     .page-title { text-align: center; color: #333; margin-bottom: 10px; font-size: 18px; font-weight: bold; }
     
+    /* 
+       The Comic Page Container 
+       Width: 1000px, Height: 710px
+       Overflow must be VISIBLE so bubbles can pop out if needed, 
+       but we usually want them contained. 
+       Actually, to fix "missing bubbles", we must allow them to sit on top of everything.
+    */
     .comic-page { 
         background: white; 
         width: 1000px; 
         height: 710px; 
         box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
         position: relative; 
-        overflow: hidden; 
-        border: none;
+        /* Ensure bubbles (children of this) are not hidden by panel clipping */
+        z-index: 1;
     }
     
-    /* We use absolute positioning for panels with clip-path */
+    /* 
+       PANELS: 
+       Now defined with specific bounding boxes so images are not stretched/zoomed incorrectly.
+       Each panel has overflow:hidden to clip the image, but the bubbles will be siblings, not children.
+    */
     .panel { 
         position: absolute; 
         background: #eee; 
         cursor: pointer; 
-        overflow: hidden;
-        border: none;
+        overflow: hidden; 
+        z-index: 0;
     }
-    
-    .panel.selected { filter: brightness(0.9) sepia(0.2); z-index: 5; }
+    .panel.selected { filter: brightness(0.9) sepia(0.2); z-index: 0; outline: 3px solid #2196F3; }
     
     .panel img { 
         width: 100%; 
@@ -382,54 +377,71 @@ INDEX_HTML = '''
     .panel img.pannable { cursor: grab; }
     .panel img.panning { cursor: grabbing; }
 
-    /* 
-       Coordinates Logic with 10px Gutter (approx +/- 5px from center lines)
-       
-       Row 1 Divider: (635.2, 0) to (588.2, 350)
-       Row 2 Left Div: (293.2, 0) to (326.2, 350)
-       Row 2 Right Div: (617.2, 0) to (666.2, 350)
-       
-       Row 1 Top: 0px. Row 1 Height: 350px.
-       Row 2 Top: 360px. Row 2 Height: 350px.
+    /* --- TIER 1 (Y: 0 - 350) --- */
+    
+    /* Panel 0 (Top Left) 
+       Starts at 0, ends at ~635. 
+       Polygon: (0,0) -> (635.2, 0) -> (588.2, 350) -> (0, 350)
+       Box Width: ~636px. Box Height: 350px.
     */
-
-    /* --- TIER 1 --- */
-    /* Panel 0 (Top Left) */
     .panel-0 {
-        top: 0; left: 0; width: 1000px; height: 350px;
-        clip-path: polygon(0% 0%, 630.2px 0%, 583.2px 100%, 0% 100%);
+        top: 0; left: 0; width: 636px; height: 350px;
+        clip-path: polygon(0% 0%, 100% 0%, 92.5% 100%, 0% 100%);
     }
     
-    /* Panel 1 (Top Right) */
+    /* Panel 1 (Top Right)
+       Starts at ~588 (to overlap/fit), ends at 1000.
+       Polygon: (635.2 + gap) ... actually lets follow the user coords:
+       Divider Top: 635.2, Bottom: 588.2.
+       So Right Panel starts after the divider.
+       Let's define Right Panel Box:
+       Left: 588px (min X), Width: 412px (1000-588).
+       Clip: (Top-Left of box is 588). Top-Left coord of polygon is 635.2. Relative X = 635.2 - 588 = 47.2.
+       So polygon starts at X=47.2px relative to box.
+    */
     .panel-1 {
-        top: 0; left: 0; width: 1000px; height: 350px;
-        clip-path: polygon(640.2px 0%, 1000px 0%, 1000px 100%, 593.2px 100%);
+        top: 0; left: 588px; width: 412px; height: 350px;
+        clip-path: polygon(11.5% 0%, 100% 0%, 100% 100%, 0% 100%);
     }
 
-    /* --- TIER 2 --- */
-    /* Panel 2 (Bottom Left) */
+    /* --- TIER 2 (Y: 360 - 710) Height 350 --- */
+    /* Gutter is 10px, so T2 starts at 360px */
+
+    /* Panel 2 (Bottom Left)
+       Coords: (0,0) -> (293.2, 0) -> (326.2, 350) -> (0, 350)
+       Box: Left 0, Width 327px.
+    */
     .panel-2 {
-        top: 360px; left: 0; width: 1000px; height: 350px;
-        clip-path: polygon(0% 0%, 288.2px 0%, 321.2px 100%, 0% 100%);
+        top: 360px; left: 0; width: 327px; height: 350px;
+        clip-path: polygon(0% 0%, 89.6% 0%, 100% 100%, 0% 100%);
     }
 
-    /* Panel 3 (Bottom Middle) */
+    /* Panel 3 (Bottom Middle)
+       Left Divider: Top 293.2, Bot 326.2.
+       Right Divider: Top 617.2, Bot 666.2.
+       Box Left: 293px. Width: 374px (667-293).
+    */
     .panel-3 {
-        top: 360px; left: 0; width: 1000px; height: 350px;
-        clip-path: polygon(298.2px 0%, 612.2px 0%, 661.2px 100%, 331.2px 100%);
+        top: 360px; left: 293px; width: 374px; height: 350px;
+        clip-path: polygon(0% 0%, 86.6% 0%, 100% 100%, 8.8% 100%);
     }
 
-    /* Panel 4 (Bottom Right) */
+    /* Panel 4 (Bottom Right)
+       Right Divider: Top 617.2, Bot 666.2.
+       Box Left: 617px. Width: 383px (1000-617).
+    */
     .panel-4 {
-        top: 360px; left: 0; width: 1000px; height: 350px;
-        clip-path: polygon(622.2px 0%, 1000px 0%, 1000px 100%, 671.2px 100%);
+        top: 360px; left: 617px; width: 383px; height: 350px;
+        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 12.8% 100%);
     }
     
     /* SPEECH BUBBLES */
+    /* Positioned absolute relative to .comic-page now */
     .speech-bubble { 
         position: absolute; display: flex; justify-content: center; align-items: center; 
         width: 150px; height: 80px; min-width: 50px; min-height: 30px; box-sizing: border-box; 
-        z-index: 10; cursor: move; font-family: 'Comic Neue', cursive; font-weight: bold; 
+        z-index: 100; /* Above panels */
+        cursor: move; font-family: 'Comic Neue', cursive; font-weight: bold; 
         font-size: 13px; text-align: center; 
         overflow: visible; 
         line-height: 1.2;
@@ -453,7 +465,7 @@ INDEX_HTML = '''
         border-radius: inherit;
     }
     
-    .speech-bubble.selected { outline: 2px dashed #4CAF50; z-index: 100; }
+    .speech-bubble.selected { outline: 2px dashed #4CAF50; z-index: 101; }
     .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.95); text-align:center; padding:8px; z-index:102; resize:none; font: inherit; white-space: pre-wrap; }
     
     /* SPEECH BUBBLE CSS (Tails) */
@@ -722,31 +734,44 @@ INDEX_HTML = '''
         } catch(e) { console.error(e); alert("Failed to restore."); }
     }
     
+    // UPDATED STATE RETRIEVAL
+    // Bubbles are now children of comic-page, not panels.
+    // Panels need to be associated with bubbles still for data consistency.
+    // For simplicity, we will save bubbles as a list belonging to the page, 
+    // but the backend format expects bubbles inside panels.
+    // We will attempt to reconstruct that structure roughly or just store them.
+    // Actually, let's just store "page bubbles" separately in our new save format if needed,
+    // OR we can map bubbles back to panels spatially.
+    // SIMPLER APPROACH: Save the structure as it is visually (Page -> Panels, Page -> Bubbles).
+    
     function getCurrentState() {
         const pages = [];
         document.querySelectorAll('.comic-page').forEach(p => {
             const panels = [];
+            const bubbles = []; // Page-level bubbles
+            
             p.querySelectorAll('.panel').forEach(pan => {
                 const img = pan.querySelector('img');
-                const bubbles = [];
-                pan.querySelectorAll('.speech-bubble').forEach(b => {
-                    const textEl = b.querySelector('.bubble-text');
-                    bubbles.push({ 
-                        text: textEl ? textEl.textContent : '', 
-                        left: b.style.left, top: b.style.top, width: b.style.width, height: b.style.height, 
-                        classes: b.className.replace(' selected', ''), 
-                        type: b.dataset.type, font: b.style.fontFamily,
-                        tailPos: b.style.getPropertyValue('--tail-pos'),
-                        colors: { fill: b.style.getPropertyValue('--bubble-fill-color'), text: b.style.getPropertyValue('--bubble-text-color') }
-                    });
-                });
                 panels.push({ 
                     src: img.src, 
                     zoom: img.dataset.zoom, tx: img.dataset.translateX, ty: img.dataset.translateY,
-                    bubbles: bubbles 
+                    bubbles: [] // Legacy structure kept empty
+                });
+            });
+            
+            p.querySelectorAll('.speech-bubble').forEach(b => {
+                const textEl = b.querySelector('.bubble-text');
+                bubbles.push({ 
+                    text: textEl ? textEl.textContent : '', 
+                    left: b.style.left, top: b.style.top, width: b.style.width, height: b.style.height, 
+                    classes: b.className.replace(' selected', ''), 
+                    type: b.dataset.type, font: b.style.fontFamily,
+                    tailPos: b.style.getPropertyValue('--tail-pos'),
+                    colors: { fill: b.style.getPropertyValue('--bubble-fill-color'), text: b.style.getPropertyValue('--bubble-text-color') }
                 });
             });
-            pages.push({ panels: panels });
+            
+            pages.push({ panels: panels, pageBubbles: bubbles });
         });
         return pages;
     }
@@ -764,12 +789,11 @@ INDEX_HTML = '''
             pageWrapper.appendChild(pageTitle);
             
             const div = document.createElement('div'); 
-            div.className = 'comic-page'; // Now 1000x710px
+            div.className = 'comic-page'; 
             
-            // Render 5 panels using specific layout classes
+            // 1. Render Panels
             page.panels.forEach((pan, idx) => {
                 const pDiv = document.createElement('div'); 
-                // Cycle through 0-4 for layout positions if there are more panels, or just use idx
                 const posClass = `panel-${idx % 5}`;
                 pDiv.className = `panel ${posClass}`;
                 
@@ -780,10 +804,33 @@ INDEX_HTML = '''
                 updateImageTransform(img);
                 img.onmousedown = (e) => startPan(e, img);
                 pDiv.appendChild(img);
-                (pan.bubbles || []).forEach(bData => { pDiv.appendChild(createBubbleHTML(bData)); });
+                
+                // Legacy support: if bubbles were inside panels
+                (pan.bubbles || []).forEach(bData => { 
+                    // Convert old relative coords (if any) to page relative?
+                    // Ideally data is standardized. We append to Page div, not pDiv.
+                    const b = createBubbleHTML(bData);
+                    div.appendChild(b);
+                });
+                
                 div.appendChild(pDiv);
             });
             
+            // 2. Render Page-Level Bubbles (New Structure)
+            if(page.pageBubbles) {
+                page.pageBubbles.forEach(bData => {
+                    div.appendChild(createBubbleHTML(bData));
+                });
+            }
+            
+            // Bind click to deselect
+            div.onclick = (e) => {
+                if(e.target === div) {
+                    if(selectedBubble) selectedBubble.classList.remove('selected'); selectedBubble = null;
+                    if(selectedPanel) selectedPanel.classList.remove('selected'); selectedPanel = null;
+                }
+            }
+            
             pageWrapper.appendChild(div); 
             con.appendChild(pageWrapper);
         });
@@ -817,18 +864,45 @@ INDEX_HTML = '''
     
     function loadNewComic() {
         fetch(`/output/pages.json?sid=${sid}`).then(r=>r.json()).then(data => {
-            const cleanData = data.map((p, pi) => ({
-                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: (p.bubbles[j].type || 'speech'),
-                        classes: `speech-bubble ${p.bubbles[j].type || 'speech'} tail-bottom`
-                    }] : []
-                }))
-            }));
+            // Convert Backend Data (Bubbles in Panels) to Frontend Data (Page Bubbles)
+            const cleanData = data.map((p, pi) => {
+                const panels = [];
+                const pageBubbles = [];
+                
+                // Panel Geometry for Default Bubble Placement mapping
+                // We have 5 panels. We know their rough centers.
+                const panelCenters = [
+                    {x: 315, y: 175}, // 0
+                    {x: 790, y: 175}, // 1
+                    {x: 160, y: 535}, // 2
+                    {x: 480, y: 535}, // 3
+                    {x: 800, y: 535}  // 4
+                ];
+
+                p.panels.forEach((pan, j) => {
+                    panels.push({
+                        src: `/frames/${pan.image}?sid=${sid}`,
+                        bubbles: []
+                    });
+                    
+                    if(p.bubbles && p.bubbles[j] && p.bubbles[j].dialog) {
+                        // Backend gives an offset relative to panel 0,0 usually.
+                        // But now panels have offsets.
+                        // Let's just place bubble near the center of the panel.
+                        const center = panelCenters[j % 5] || {x:500, y:350};
+                        
+                        pageBubbles.push({
+                            text: p.bubbles[j].dialog,
+                            left: (center.x - 75) + 'px', // Center - half bubble width
+                            top: (center.y - 40) + 'px',
+                            type: (p.bubbles[j].type || 'speech'),
+                            classes: `speech-bubble ${p.bubbles[j].type || 'speech'} tail-bottom`
+                        });
+                    }
+                });
+                
+                return { panels: panels, pageBubbles: pageBubbles };
+            });
             renderFromState(cleanData); saveDraft(true);
         });
     }
@@ -914,9 +988,15 @@ INDEX_HTML = '''
     }
     
     function addBubble() { 
-        if(!selectedPanel) return alert("Select a panel first"); 
-        const b = createBubbleHTML({ text: "Text", left: "50px", top: "30px", type: 'speech', classes: "speech-bubble speech tail-bottom" }); 
-        selectedPanel.appendChild(b); selectBubble(b); saveDraft(true); 
+        // Add to the active page container
+        // If no panel is selected, finding the active page is tricky. 
+        // We will default to the first page or the last clicked page context if we stored it.
+        // For now, if a panel is selected, add to that panel's parent page.
+        if(!selectedPanel) return alert("Select a panel to define which page to add to."); 
+        
+        const pageDiv = selectedPanel.parentElement;
+        const b = createBubbleHTML({ text: "Text", left: "50px", top: "50px", type: 'speech', classes: "speech-bubble speech tail-bottom" }); 
+        pageDiv.appendChild(b); selectBubble(b); saveDraft(true); 
     }
     
     function deleteBubble() { 
@@ -986,12 +1066,9 @@ INDEX_HTML = '''
         alert(`Exporting ${pgs.length} page(s)...`); 
         
         // --- 0% ERROR FIX ---
-        // 1. Lock specific pixel dimensions + 1px buffer to prevent word wrapping
         const bubbles = document.querySelectorAll('.speech-bubble'); 
         bubbles.forEach(b => { 
             const rect = b.getBoundingClientRect(); 
-            // Add slight buffer (1px) to width to handle sub-pixel rendering differences
-            // This prevents "just fitting" words from wrapping in the export
             b.style.width = (rect.width + 1) + 'px'; 
             b.style.height = rect.height + 'px'; 
             b.style.display = 'flex';