Update app_enhanced.py

app_enhanced.py

@@ -100,7 +100,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, status_p
             frame_metadata[fname] = {'dialogue': moment['text'], 'time': mid}
             frame_files_ordered.append(fname)
             count += 1
-            # Update progress periodically
             if count % 2 == 0:
                 prog = 30 + int((count / total_panels_needed) * 20)
                 update_status_file(status_path, f"Extracted Frame {count}/{total_panels_needed}", prog)
@@ -375,70 +374,74 @@ INDEX_HTML = '''
         overflow: hidden; 
         border: 2px solid #000; 
         padding: 0;
-        /* SCALING FOR EDITOR VIEW ONLY - REMOVED FOR EXPORT */
+        /* SCALING FOR EDITOR VIEW */
         transform-origin: top center;
-        /* transform: scale(0.6); - DISABLED to show True Size */
-        margin-bottom: 30px; 
+        transform: scale(0.6); 
+        margin-bottom: -280px; /* Compensate for scale empty space */
     }
     
     /* === 5-PANEL TEMPLATE (2 TOP, 3 BOTTOM) === */
-    /* Background White for 0px Gutter */
+    /* Background White for 12px Gutter (1.2% width, 1.7% height of 712px) */
     .comic-grid { width: 100%; height: 100%; position: relative; background: #ffffff; }
     
     /* Panel Background White */
-    .panel { position: absolute; overflow: hidden; background: #ffffff; cursor: pointer; border: 0; }
+    .panel { position: absolute; overflow: hidden; background: #ffffff; cursor: pointer; border: 0; display:flex; justify-content:center; align-items:center; }
     .panel.selected { z-index: 20; }
     .panel.selected img { outline: 3px solid #2196F3; outline-offset: -3px; }
     
     /* 
-       0% GAP COORDINATES from Green Text:
+       COORDINATES from Green Text:
        Row 1 Split: Top=63.2%, Bottom=59.5%
        Row 2 Left Split: Top=33.0%, Bottom=35.7%
        Row 2 Right Split: Top=64.8%, Bottom=68.2%
-       Rows are 50% / 50%
+       Tier Height: 350px (approx 49.15% of 712px)
     */
 
-    /* --- ROW 1 (TOP) --- Height 50% */
+    /* --- ROW 1 (TOP) --- Height 49.15% */
     
-    /* Panel 1: Right ends at 63.2% / 59.5% */
+    /* Panel 1: Right ends at (63.2 - 0.6)% / (59.5 - 0.6)% */
     .panel:nth-child(1) {
-        top: 0; left: 0; height: 50%; width: 100%;
-        clip-path: polygon(0% 0%, 63.2% 0%, 59.5% 100%, 0% 100%);
+        top: 0; left: 0; height: 49.15%; width: 100%;
+        clip-path: polygon(0% 0%, 62.6% 0%, 58.9% 100%, 0% 100%);
     }
-    /* Panel 2: Left starts at 63.2% / 59.5% */
+    /* Panel 2: Left starts at (63.2 + 0.6)% / (59.5 + 0.6)% */
     .panel:nth-child(2) {
-        top: 0; left: 0; height: 50%; width: 100%;
-        clip-path: polygon(63.2% 0%, 100% 0%, 100% 100%, 59.5% 100%);
+        top: 0; left: 0; height: 49.15%; width: 100%;
+        clip-path: polygon(63.8% 0%, 100% 0%, 100% 100%, 60.1% 100%);
     }
 
-    /* --- ROW 2 (BOTTOM) --- Top: 50%, Height: 50% */
+    /* --- ROW 2 (BOTTOM) --- Top: 50.85% (Gap ~1.7%), Height: 49.15% */
     
-    /* Panel 3: Right ends at 33.0% / 35.7% */
+    /* Panel 3: Right ends at (33.0 - 0.6)% / (35.7 - 0.6)% */
     .panel:nth-child(3) {
-        top: 50%; left: 0; height: 50%; width: 100%;
-        clip-path: polygon(0% 0%, 33.0% 0%, 35.7% 100%, 0% 100%);
+        top: 50.85%; left: 0; height: 49.15%; width: 100%;
+        clip-path: polygon(0% 0%, 32.4% 0%, 35.1% 100%, 0% 100%);
     }
-    /* Panel 4: Left starts 33.0%/35.7%. Right ends 64.8%/68.2% */
+    /* Panel 4: Left starts (33.0 + 0.6)% / (35.7 + 0.6)%. Right ends (64.8 - 0.6)% / (68.2 - 0.6)% */
     .panel:nth-child(4) {
-        top: 50%; left: 0; height: 50%; width: 100%;
-        clip-path: polygon(33.0% 0%, 64.8% 0%, 68.2% 100%, 35.7% 100%);
+        top: 50.85%; left: 0; height: 49.15%; width: 100%;
+        clip-path: polygon(33.6% 0%, 64.2% 0%, 67.6% 100%, 36.3% 100%);
     }
-    /* Panel 5: Left starts 64.8%/68.2% */
+    /* Panel 5: Left starts (64.8 + 0.6)% / (68.2 + 0.6)% */
     .panel:nth-child(5) {
-        top: 50%; left: 0; height: 50%; width: 100%;
-        clip-path: polygon(64.8% 0%, 100% 0%, 100% 100%, 68.2% 100%);
+        top: 50.85%; left: 0; height: 49.15%; width: 100%;
+        clip-path: polygon(65.4% 0%, 100% 0%, 100% 100%, 68.8% 100%);
     }
 
     /* ====================== */
     
     /* 
-       IMAGE FIT: 'fill' ensures full image is visible (100% fit) and stretches to fill (0 white space).
+       IMAGE FIT: 'fill' to STRETCH fully into the panel shape 
+       WITHOUT empty space and WITHOUT zooming.
+       (User accepted distortion over empty space/cutting)
+       Allowed to be transformed (panned/scaled) via JS if user wants.
     */
     .panel img { 
         width: 100%; height: 100%; 
-        object-fit: fill; /* STRETCH TO FILL (No Zoom, No Gaps) */
+        object-fit: fill;  /* STRETCH: No gaps, no cut */
         transition: transform 0.1s ease-out; 
         transform-origin: center center; 
+        display: block;
     }
     /* Toggle classes */
     .panel img.fit-cover { object-fit: cover !important; }
@@ -969,12 +972,51 @@ INDEX_HTML = '''
     document.getElementById('bubble-text-color').addEventListener('change', (e) => { if(selectedBubble) { selectedBubble.style.setProperty('--bubble-text-color', e.target.value); saveDraft(true); } });
     document.getElementById('bubble-fill-color').addEventListener('change', (e) => { if(selectedBubble) { selectedBubble.style.setProperty('--bubble-fill-color', e.target.value); saveDraft(true); } });
     
-    function handleZoom(el) { if(!selectedPanel) return; const img = selectedPanel.querySelector('img'); img.dataset.zoom = el.value; updateImageTransform(img); }
+    function handleZoom(el) { 
+        if(!selectedPanel) return; 
+        const img = selectedPanel.querySelector('img'); 
+        img.dataset.zoom = el.value; 
+        updateImageTransform(img);
+    }
     document.getElementById('zoom-slider').addEventListener('change', () => saveDraft(true));
-    function startPan(e, img) { if(parseFloat(img.dataset.zoom || 100) <= 100) return; e.preventDefault(); isPanning = true; selectedPanel = img.closest('.panel'); panStartX = e.clientX; panStartY = e.clientY; panStartTx = parseFloat(img.dataset.translateX || 0); panStartTy = parseFloat(img.dataset.translateY || 0); img.classList.add('panning'); }
-    function panImage(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); }
-    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 alert("Select a panel"); 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); saveDraft(true); }
+
+    function startPan(e, img) { 
+        // REMOVED ZOOM CHECK - ALLOW PAN ALWAYS
+        e.preventDefault(); 
+        isPanning = true; 
+        selectedPanel = img.closest('.panel'); 
+        panStartX = e.clientX; 
+        panStartY = e.clientY; 
+        panStartTx = parseFloat(img.dataset.translateX || 0); 
+        panStartTy = parseFloat(img.dataset.translateY || 0); 
+        img.classList.add('panning'); 
+    }
+
+    function panImage(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); 
+    }
+
+    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})`; 
+    }
+
+    function resetPanelTransform() { 
+        if(!selectedPanel) return alert("Select a panel"); 
+        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); 
+        saveDraft(true); 
+    }
     
     function replacePanelImage() { if(!selectedPanel) return alert("Select a panel"); const inp = document.getElementById('image-uploader'); inp.onchange = async (e) => { const fd = new FormData(); fd.append('image', e.target.files[0]); const img = selectedPanel.querySelector('img'); 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}`; saveDraft(true); } inp.value = ''; }; inp.click(); }
     async function adjustFrame(dir) { if(isProcessing) return; if(!selectedPanel) return alert("Select a panel"); const img = selectedPanel.querySelector('img'); let fname = img.src.split('/').pop().split('?')[0]; setProcessing(true); img.style.opacity = '0.5'; try { const r = await fetch(`/regenerate_frame?sid=${sid}`, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({filename:fname, direction:dir}) }); const d = await r.json(); if(d.success) { img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`; } else { alert('Error: ' + d.message); } } catch(e) { console.error(e); } img.style.opacity = '1'; setProcessing(false); saveDraft(true); }
@@ -1000,6 +1042,13 @@ INDEX_HTML = '''
         if(selectedPanel) selectedPanel.classList.remove('selected');
         alert(`Exporting ${pgs.length} page(s)...`); 
         
+        // --- PREPARE FOR EXPORT: Remove editor scaling ---
+        const comicPages = document.querySelectorAll('.comic-page');
+        comicPages.forEach(page => {
+            page.style.transform = 'none'; // Remove scaling from comic-page
+            page.style.marginBottom = '0'; // Remove margin compensation
+        });
+
         // --- 0% ERROR FIX ---
         // 1. Lock specific pixel dimensions + 1px buffer to prevent word wrapping
         const bubbles = document.querySelectorAll('.speech-bubble'); 
@@ -1017,8 +1066,8 @@ INDEX_HTML = '''
         for(let i = 0; i < pgs.length; i++) { 
             try { 
                 const u = await htmlToImage.toPng(pgs[i], { 
-                    pixelRatio: 2, // High quality
-                    style: { transform: 'none' } 
+                    pixelRatio: 2, // High quality for print
+                    style: { transform: 'none' } // Ensure no transforms for html-to-image
                 }); 
                 const a = document.createElement('a'); 
                 a.href = u; 
@@ -1030,8 +1079,11 @@ INDEX_HTML = '''
             } 
         } 
         
-        // Optional: Reload page or reset styles if user wants to continue editing immediately
-        // In this app, styles are locked until reload, which is safer for the export focus.
+        // --- RESTORE EDITOR SCALING AFTER EXPORT ---
+        comicPages.forEach(page => {
+            page.style.transform = 'scale(0.6)';
+            page.style.marginBottom = '-280px'; 
+        });
     }
     
     function goBackToUpload() { if(confirm('Go home? Unsaved changes will be lost.')) { document.getElementById('editor-container').style.display = 'none'; document.getElementById('upload-container').style.display = 'flex'; document.getElementById('loading-view').style.display = 'none'; } }