Update app_enhanced.py

app_enhanced.py

@@ -118,6 +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
+    # 5 Panels for the specific template requested
     panels_per_page = 5
     total_panels_needed = target_pages * panels_per_page
 
@@ -176,11 +177,8 @@ 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'
         
-        # 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)
+        # Default placement; user will adjust in UI
+        b = bubble(dialog=dialogue, bubble_offset_x=50, bubble_offset_y=50, type=b_type)
         bubbles_list.append(b)
             
     pages = []
@@ -329,44 +327,48 @@ INDEX_HTML = '''
     @keyframes ball { 0%{background-position:0 50%} 100%{background-position:100px 50%} }
     
     /* ========================================= */
-    /* 🎨 NEW POLYGON TEMPLATE LAYOUT CSS */
+    /* 🎨 POLYGON TEMPLATE LAYOUT CSS (FIXED)  */
     /* ========================================= */
-
+    
     .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; 
-        /* Ensure bubbles (children of this) are not hidden by panel clipping */
+        /* Overflow visible so bubbles can pop out slightly if needed, but panels clip images */
         z-index: 1;
     }
     
-    /* 
-       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.
-    */
+    /* BUBBLES are direct children of comic-page now, so they float above everything */
+    .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: 200; /* High z-index to stay above panels */
+        cursor: move; font-family: 'Comic Neue', cursive; font-weight: bold; 
+        font-size: 13px; text-align: center; 
+        overflow: visible; 
+        line-height: 1.2;
+        --tail-pos: 50%;
+    }
+    
     .panel { 
         position: absolute; 
         background: #eee; 
         cursor: pointer; 
         overflow: hidden; 
-        z-index: 0;
+        z-index: 10;
+        border: none;
     }
-    .panel.selected { filter: brightness(0.9) sepia(0.2); z-index: 0; outline: 3px solid #2196F3; }
+    .panel.selected { filter: brightness(0.9) sepia(0.2); outline: 3px solid #2196F3; z-index: 15; }
     
+    /* OBJECT FIT COVER FIX: 
+       Images fill their defined bounding box, maintaining aspect ratio. 
+    */
     .panel img { 
         width: 100%; 
         height: 100%; 
@@ -377,76 +379,72 @@ INDEX_HTML = '''
     .panel img.pannable { cursor: grab; }
     .panel img.panning { cursor: grabbing; }
 
+    /* 
+       CALCULATED COORDINATES WITH 10PX GUTTER 
+       Total W: 1000, Row Height: 350. Gutter Y: 10px (350-360).
+    */
+
     /* --- 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.
+       Line: (635.2, 0) to (588.2, 350).
+       Minus 5px for gutter.
+       TR: 630.2, BR: 583.2.
     */
     .panel-0 {
-        top: 0; left: 0; width: 636px; height: 350px;
-        clip-path: polygon(0% 0%, 100% 0%, 92.5% 100%, 0% 100%);
+        top: 0; left: 0; width: 631px; height: 350px;
+        clip-path: polygon(0% 0%, 630.2px 0%, 583.2px 100%, 0% 100%);
     }
     
     /* 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.
+       Line: (635.2, 0) to (588.2, 350).
+       Plus 5px for gutter.
+       TL: 640.2, BL: 593.2.
+       Bounding Box: Starts at X=593. Width = 1000-593 = 407.
+       Poly Relative: TL(47.2, 0), BL(0.2, 350).
     */
     .panel-1 {
-        top: 0; left: 588px; width: 412px; height: 350px;
-        clip-path: polygon(11.5% 0%, 100% 0%, 100% 100%, 0% 100%);
+        top: 0; left: 593px; width: 407px; height: 350px;
+        clip-path: polygon(47.2px 0%, 100% 0%, 100% 100%, 0.2px 100%);
     }
 
-    /* --- TIER 2 (Y: 360 - 710) Height 350 --- */
-    /* Gutter is 10px, so T2 starts at 360px */
-
+    /* --- TIER 2 (Y: 360 - 710) --- */
+    
     /* Panel 2 (Bottom Left)
-       Coords: (0,0) -> (293.2, 0) -> (326.2, 350) -> (0, 350)
-       Box: Left 0, Width 327px.
+       Line Left: (293.2, 0) to (326.2, 350).
+       Minus 5px.
+       TR: 288.2, BR: 321.2.
+       Box Height: 350px. Top: 360px.
     */
     .panel-2 {
-        top: 360px; left: 0; width: 327px; height: 350px;
-        clip-path: polygon(0% 0%, 89.6% 0%, 100% 100%, 0% 100%);
+        top: 360px; left: 0; width: 322px; height: 350px;
+        clip-path: polygon(0% 0%, 288.2px 0%, 321.2px 100%, 0% 100%);
     }
 
     /* 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).
+       Line Left (+5px): TL 298.2, BL 331.2.
+       Line Right (-5px): (617.2,0)->(666.2,350). TR 612.2, BR 661.2.
+       Box Start: 298px. Width: 662 - 298 = 364px.
+       Poly Relative: 
+         TL: 0.2, BL: 33.2
+         TR: 314.2, BR: 363.2
     */
     .panel-3 {
-        top: 360px; left: 293px; width: 374px; height: 350px;
-        clip-path: polygon(0% 0%, 86.6% 0%, 100% 100%, 8.8% 100%);
+        top: 360px; left: 298px; width: 364px; height: 350px;
+        clip-path: polygon(0.2px 0%, 314.2px 0%, 363.2px 100%, 33.2px 100%);
     }
 
     /* Panel 4 (Bottom Right)
-       Right Divider: Top 617.2, Bot 666.2.
-       Box Left: 617px. Width: 383px (1000-617).
+       Line Right (+5px): TL 622.2, BL 671.2.
+       Box Start: 622px. Width: 378px.
+       Poly Relative: TL 0.2, BL 49.2.
     */
     .panel-4 {
-        top: 360px; left: 617px; width: 383px; height: 350px;
-        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 12.8% 100%);
+        top: 360px; left: 622px; width: 378px; height: 350px;
+        clip-path: polygon(0.2px 0%, 100% 0%, 100% 100%, 49.2px 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: 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;
-        --tail-pos: 50%;
-    }
+    /* ... Bubbles CSS continued ... */
     
     .bubble-text { 
         padding: 0.5em; 
@@ -465,10 +463,9 @@ INDEX_HTML = '''
         border-radius: inherit;
     }
     
-    .speech-bubble.selected { outline: 2px dashed #4CAF50; z-index: 101; }
+    .speech-bubble.selected { outline: 2px dashed #4CAF50; z-index: 201; }
     .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) */
     .speech-bubble.speech {
         --b: 3em; --h: 1.8em; --t: 0.6; --p: var(--tail-pos, 50%); --r: 1.2em;
         background: var(--bubble-fill-color, #4ECDC4);
@@ -736,14 +733,6 @@ INDEX_HTML = '''
     
     // 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 => {
@@ -805,10 +794,8 @@ INDEX_HTML = '''
                 img.onmousedown = (e) => startPan(e, img);
                 pDiv.appendChild(img);
                 
-                // Legacy support: if bubbles were inside panels
+                // Legacy support for old saves
                 (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);
                 });
@@ -816,7 +803,7 @@ INDEX_HTML = '''
                 div.appendChild(pDiv);
             });
             
-            // 2. Render Page-Level Bubbles (New Structure)
+            // 2. Render Page-Level Bubbles
             if(page.pageBubbles) {
                 page.pageBubbles.forEach(bData => {
                     div.appendChild(createBubbleHTML(bData));
@@ -869,8 +856,7 @@ INDEX_HTML = '''
                 const panels = [];
                 const pageBubbles = [];
                 
-                // Panel Geometry for Default Bubble Placement mapping
-                // We have 5 panels. We know their rough centers.
+                // Panel Geometry for Default Bubble Placement
                 const panelCenters = [
                     {x: 315, y: 175}, // 0
                     {x: 790, y: 175}, // 1
@@ -886,21 +872,16 @@ INDEX_HTML = '''
                     });
                     
                     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
+                            left: (center.x - 75) + 'px', 
                             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);
@@ -988,12 +969,7 @@ INDEX_HTML = '''
     }
     
     function addBubble() { 
-        // 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);