Update app_enhanced.py

app_enhanced.py

@@ -118,7 +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
-    # CHANGED TO 4 PANELS
+    # 4 PANELS
     panels_per_page = 4 
     total_panels_needed = target_pages * panels_per_page
 
@@ -332,26 +332,32 @@ INDEX_HTML = '''
         background: white; 
         width: 1000px; 
         height: 700px; 
-        box-shadow: 0 0 50px rgba(0,0,0,0.2); 
         position: relative; 
         z-index: 1;
         overflow: hidden; 
-        border: 2px solid black;
+        /* UPDATED: THICK WHITE BORDER */
+        border: 10px solid white;
+        box-shadow: 0 0 30px rgba(0,0,0,0.5); 
     }
     
     /* HANDLES FOR DRAGGING */
     .handle {
         position: absolute;
-        width: 16px; height: 16px;
+        /* UPDATED: LARGER HANDLES */
+        width: 24px; height: 24px;
         background: #ff4757;
-        border: 2px solid white;
+        border: 3px solid white;
         border-radius: 50%;
         cursor: ew-resize;
         z-index: 999;
         transform: translate(-50%, -50%);
         box-shadow: 0 2px 5px rgba(0,0,0,0.3);
     }
-    .handle.horiz { cursor: ns-resize; width: 40px; height: 12px; border-radius: 6px; }
+    .handle.horiz { 
+        cursor: ns-resize; 
+        width: 60px; height: 18px; 
+        border-radius: 9px; 
+    }
     
     /* PANELS */
     .panel { 
@@ -514,11 +520,10 @@ INDEX_HTML = '''
     let startX, startY, initX, initY, panStartX, panStartY, panStartTx, panStartTy;
     let activeLayoutHandle = null, activePageId = null;
     
-    // 4-PANEL DEFAULT LAYOUT
     const DEFAULT_LAYOUT = {
         width: 1000, height: 700, gutter: 10, tierY: 350,
-        r1: { topX: 500, botX: 500 }, // Top Row Vertical Split
-        r2: { topX: 500, botX: 500 }  // Bottom Row Vertical Split
+        r1: { topX: 500, botX: 500 }, 
+        r2: { topX: 500, botX: 500 }  
     };
     
     let historyStack = [];
@@ -627,7 +632,6 @@ INDEX_HTML = '''
             div.id = pageId;
             div.dataset.layout = JSON.stringify(layout);
             
-            // Generate 4 Panels
             for(let i=0; i<4; i++) {
                 const pDiv = document.createElement('div'); 
                 pDiv.className = 'panel'; pDiv.id = `${pageId}-p${i}`;
@@ -643,11 +647,10 @@ INDEX_HTML = '''
                 div.appendChild(pDiv);
             }
             
-            // Generate Handles (Vertical Dividers and Tier Divider)
             const handles = [
-                {id: 'h1-top', t:0, l:0}, {id: 'h1-bot', t:0, l:0}, // Top Row
-                {id: 'h2-top', t:0, l:0}, {id: 'h2-bot', t:0, l:0}, // Bottom Row
-                {id: 'h-tier', t:0, l:0, cls: 'horiz'} // Horizontal Tier
+                {id: 'h1-top', t:0, l:0}, {id: 'h1-bot', t:0, l:0},
+                {id: 'h2-top', t:0, l:0}, {id: 'h2-bot', t:0, l:0},
+                {id: 'h-tier', t:0, l:0, cls: 'horiz'}
             ];
             handles.forEach(h => {
                 const hDiv = document.createElement('div');
@@ -657,7 +660,6 @@ INDEX_HTML = '''
                 div.appendChild(hDiv);
             });
 
-            // Bubbles
             if(page.pageBubbles) {
                 page.pageBubbles.forEach(bData => div.appendChild(createBubbleHTML(bData)));
             }
@@ -672,7 +674,6 @@ INDEX_HTML = '''
             pageWrapper.appendChild(div); 
             con.appendChild(pageWrapper);
             
-            // Draw Initial Layout
             drawLayout(pageId);
         });
         
@@ -680,7 +681,6 @@ INDEX_HTML = '''
         document.getElementById('font-select').disabled = true;
     }
     
-    // --- LAYOUT ENGINE (4-PANEL) ---
     function drawLayout(pageId) {
         const pageEl = document.getElementById(pageId);
         if(!pageEl) return;
@@ -690,27 +690,22 @@ INDEX_HTML = '''
         const w = state.width;
         const h = state.height;
 
-        // P0: Top Left
         const p0 = document.getElementById(`${pageId}-p0`);
         p0.style.top='0px'; p0.style.left='0px'; p0.style.width='100%'; p0.style.height = ty + 'px';
         p0.style.clipPath = `polygon(0 0, ${state.r1.topX - g}px 0, ${state.r1.botX - g}px ${ty}px, 0 ${ty}px)`;
 
-        // P1: Top Right
         const p1 = document.getElementById(`${pageId}-p1`);
         p1.style.top='0px'; p1.style.left='0px'; p1.style.width='100%'; p1.style.height = ty + 'px';
         p1.style.clipPath = `polygon(${state.r1.topX + g}px 0, ${w}px 0, ${w}px ${ty}px, ${state.r1.botX + g}px ${ty}px)`;
 
-        // P2: Bottom Left
         const p2 = document.getElementById(`${pageId}-p2`);
         p2.style.top = ty + 'px'; p2.style.left='0px'; p2.style.width='100%'; p2.style.height = (h - ty) + 'px';
         p2.style.clipPath = `polygon(0 ${g}px, ${state.r2.topX - g}px ${g}px, ${state.r2.botX - g}px ${h-ty}px, 0 ${h-ty}px)`;
 
-        // P3: Bottom Right
         const p3 = document.getElementById(`${pageId}-p3`);
         p3.style.top = ty + 'px'; p3.style.left='0px'; p3.style.width='100%'; p3.style.height = (h - ty) + 'px';
         p3.style.clipPath = `polygon(${state.r2.topX + g}px ${g}px, ${w}px ${g}px, ${w}px ${h-ty}px, ${state.r2.botX + g}px ${h-ty}px)`;
 
-        // Update Handles Position
         const setH = (id, l, t) => { const el = document.getElementById(`${pageId}-${id}`); if(el) { el.style.left=l+'px'; el.style.top=t+'px'; } };
         
         setH('h1-top', state.r1.topX, 0);
@@ -727,7 +722,6 @@ INDEX_HTML = '''
         isDragging = true; 
     }
 
-    // --- GLOBAL MOUSE EVENTS ---
     document.addEventListener('mousemove', (e) => {
         if(isDragging && activeLayoutHandle && activePageId) {
             const pageEl = document.getElementById(activePageId);
@@ -769,7 +763,6 @@ INDEX_HTML = '''
         });
     }
 
-    // --- IMAGE FIT & TRANSFORM ---
     function fitImageToPanel(img, panel, savedState) {
         if(savedState && savedState.baseScale) {
             img.dataset.zoom = savedState.zoom || 100;
@@ -780,13 +773,15 @@ INDEX_HTML = '''
             return;
         }
         
-        // Fit to 1000px width container to ensure panning works across whole row
+        // CONTAIN LOGIC: Ensure WHOLE image fits
         const pW = 1000; 
         const pH = panel.offsetHeight; 
         const iW = img.naturalWidth || img.width;
         const iH = img.naturalHeight || img.height;
         
-        const scale = Math.max(pW / iW, pH / iH);
+        // Math.min makes sure it fits fully (contain)
+        const scale = Math.min(pW / iW, pH / iH);
+        
         const tx = (pW - iW * scale) / 2;
         const ty = (pH - iH * scale) / 2;
         
@@ -812,7 +807,6 @@ INDEX_HTML = '''
     function handleZoom(el) { if(!selectedPanel) return; const img = selectedPanel.querySelector('img'); img.dataset.zoom = el.value; updateImageTransform(img); }
     function resetPanelTransform() { if(!selectedPanel) return alert("Select a panel"); const img = selectedPanel.querySelector('img'); fitImageToPanel(img, selectedPanel, null); saveDraft(true); }
 
-    // --- STANDARD FUNCTIONS ---
     function selectPanel(el) { 
         if(selectedPanel) selectedPanel.classList.remove('selected'); 
         if(selectedBubble) { selectedBubble.classList.remove('selected'); selectedBubble = null; }