Update app_enhanced.py

app_enhanced.py

@@ -82,8 +82,8 @@ def generate_save_code(length=8):
 # 🧠 GLOBAL GPU FUNCTIONS
 # ======================================================
 @spaces.GPU(duration=300)
-def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages):
-    print(f"🚀 GPU Task Started: {video_path} | Pages: {target_pages}")
+def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages, panels_per_page_req):
+    print(f"🚀 GPU Task Started: {video_path} | Pages: {target_pages} | Panels/Page: {panels_per_page_req}")
     
     import cv2
     import srt
@@ -118,9 +118,9 @@ 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
+    panels_per_page = int(panels_per_page_req)
+    if panels_per_page <= 0: panels_per_page = 2
     
-    # --- CHANGED: 2 PANELS PER PAGE ---
-    panels_per_page = 2
     total_panels_needed = target_pages * panels_per_page
 
     selected_moments = []
@@ -182,9 +182,8 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
             
     pages = []
     for i in range(target_pages):
-        # --- CHANGED: Slicing by 2 ---
-        start_idx = i * 2
-        end_idx = start_idx + 2
+        start_idx = i * panels_per_page
+        end_idx = start_idx + panels_per_page
         p_frames = frame_files_ordered[start_idx:end_idx]
         p_bubbles = bubbles_list[start_idx:end_idx]
         if p_frames:
@@ -279,10 +278,10 @@ class EnhancedComicGenerator:
         os.makedirs(self.frames_dir, exist_ok=True)
         os.makedirs(self.output_dir, exist_ok=True)
 
-    def run(self, target_pages):
+    def run(self, target_pages, panels_per_page):
         try:
             self.write_status("Waiting for GPU...", 5)
-            data = generate_comic_gpu(self.video_path, self.user_dir, self.frames_dir, self.metadata_path, int(target_pages))
+            data = generate_comic_gpu(self.video_path, self.user_dir, self.frames_dir, self.metadata_path, int(target_pages), int(panels_per_page))
             with open(os.path.join(self.output_dir, 'pages.json'), 'w') as f:
                 json.dump(data, f, indent=2)
             self.write_status("Complete!", 100)
@@ -331,48 +330,45 @@ INDEX_HTML = '''
     .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; }
     
-    .comic-page { background: white; width: 600px; height: 400px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: relative; overflow: hidden; border: 2px solid #000; padding: 0; }
+    .comic-page { background: white; width: 600px; height: 400px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: relative; overflow: hidden; border: 2px solid #000; padding: 10px; }
     
-    /* === DESIGNER 2-PANEL LAYOUT === */
-    .comic-grid { width: 100%; height: 100%; position: relative; background: #000; }
+    /* === ADJUSTABLE LAYOUTS === */
+    .comic-grid { width: 100%; height: 100%; position: relative; background: #000; display:grid; gap: 10px; }
     
-    .panel { position: absolute; overflow: hidden; background: #eee; cursor: pointer; border: 0; }
-    .panel.selected { z-index: 20; }
-    .panel.selected img { outline: 3px solid #2196F3; outline-offset: -3px; }
+    /* Layout: Rows (Horizontal Split) - Default */
+    .comic-grid.layout-rows { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
     
-    /* 
-       PANEL 1 (Top): Height 55%.
-       Clip: Standard rect top, but bottom slants up from left to right.
-       polygon(0 0, 100% 0, 100% 85%, 0 100%)
-    */
-    .panel:nth-child(1) {
-        top: 0; left: 0; width: 100%; height: 55%;
-        clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%);
-        z-index: 2;
-    }
+    /* Layout: Columns (Vertical Split) */
+    .comic-grid.layout-cols { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: 1fr; }
     
-    /* 
-       PANEL 2 (Bottom): Height 55%, positioned at 45% (overlap).
-       Clip: Top slants up from left to right, creating gap.
-       polygon(0 15%, 100% 0, 100% 100%, 0 100%)
-    */
-    .panel:nth-child(2) {
-        top: 45%; left: 0; width: 100%; height: 55%;
-        clip-path: polygon(0% 15%, 100% 0%, 100% 100%, 0% 100%);
-        z-index: 1;
-    }
-
-    /* Hide extra panels just in case */
-    .panel:nth-child(3), .panel:nth-child(4) { display: none; }
-    /* ====================== */
+    /* Layout: Grid (2x2) */
+    .comic-grid.layout-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
+    
+    /* Layout: Slanted (Designer) */
+    .comic-grid.layout-slanted { display: block; }
+    .comic-grid.layout-slanted .panel { position: absolute; width:100%; left:0; }
+    /* Top Panel */
+    .comic-grid.layout-slanted .panel:nth-child(1) { top: 0; height: 55%; clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%); z-index:2; }
+    /* Bottom Panel */
+    .comic-grid.layout-slanted .panel:nth-child(2) { top: 45%; height: 55%; clip-path: polygon(0% 15%, 100% 0%, 100% 100%, 0% 100%); z-index:1; }
+    /* Hide extra panels in slanted mode */
+    .comic-grid.layout-slanted .panel:nth-child(n+3) { display: none; }
     
+    
+    .panel { overflow: hidden; background: #eee; cursor: pointer; border: 2px solid #000; position: relative; }
+    .layout-slanted .panel { border: none; background: transparent; }
+    .panel.selected { z-index: 20; border-color: #2196F3; }
+    
+    /* Image fitting */
     .panel img { 
         width: 100%; height: 100%; 
-        object-fit: cover; 
+        object-fit: contain; /* Default: Show entire image (no cut) */
         transition: transform 0.1s ease-out; 
         transform-origin: center center; 
         pointer-events: auto; 
     }
+    .panel img.fit-cover { object-fit: cover; }
+    
     .panel img.pannable { cursor: grab; }
     .panel img.panning { cursor: grabbing; }
     
@@ -385,10 +381,7 @@ INDEX_HTML = '''
         overflow: visible; 
         line-height: 1.2;
         --tail-pos: 50%;
-        
-        /* Default Center Positioning if no coords */
-        left: 50%; top: 50%;
-        transform: translate(-50%, -50%);
+        left: 50%; top: 50%; transform: translate(-50%, -50%);
     }
     
     .bubble-text { 
@@ -464,10 +457,15 @@ INDEX_HTML = '''
     .modal-content button { background: #3498db; color: white; border: none; padding: 12px 30px; border-radius: 8px; cursor: pointer; font-weight: bold; margin: 5px; }
 </style>
 </head> <body> <div id="upload-container"> <div class="upload-box"> <h1>🎬 Enhanced Comic Generator</h1> <input type="file" id="file-upload" class="file-input" onchange="document.getElementById('fn').innerText=this.files[0].name"> <label for="file-upload" class="file-label">📁 Choose Video File</label> <span id="fn" style="margin-bottom:10px; display:block; color:#666;">No file selected</span>
-        <div class="page-input-group">
-            <label>📚 Total Comic Pages:</label>
-            <input type="number" id="page-count" value="4" min="1" max="15" placeholder="e.g. 4 (Video will be divided evenly)">
-            <small style="color:#666; font-size:11px; display:block; margin-top:5px;">System calculates ~2 panels per page.</small>
+        <div class="button-grid">
+            <div class="page-input-group" style="margin:5px 0;">
+                <label>📚 Panels / Page:</label>
+                <input type="number" id="panels-per-page" value="2" min="1" max="4">
+            </div>
+            <div class="page-input-group" style="margin:5px 0;">
+                <label>📄 Total Pages:</label>
+                <input type="number" id="page-count" value="4" min="1" max="15">
+            </div>
         </div>
         
         <button class="submit-btn" onclick="upload()">🚀 Generate Comic</button>
@@ -494,6 +492,16 @@ INDEX_HTML = '''
         
         <button onclick="undoLastAction()" class="undo-btn">↩️ Undo</button>
         
+        <div class="control-group">
+            <label>📐 Layout Style:</label>
+            <select id="layout-select" onchange="changeLayout(this.value)">
+                <option value="layout-rows">Rows (Horizontal)</option>
+                <option value="layout-cols">Cols (Vertical)</option>
+                <option value="layout-grid">Grid (2x2)</option>
+                <option value="layout-slanted">Slanted (Designer)</option>
+            </select>
+        </div>
+        
         <div class="control-group">
             <label>💾 Save & Load:</label>
             <button onclick="saveComic()" class="save-btn">💾 Save Comic</button>
@@ -552,10 +560,11 @@ INDEX_HTML = '''
         <div class="control-group">
             <label>🔍 Zoom & Pan:</label>
             <div class="button-grid">
+                <button onclick="toggleFitMode()" class="secondary-btn" id="fit-btn">Fit: Contain</button>
                 <button onclick="resetPanelTransform()" class="secondary-btn">Reset</button>
-                <input type="range" id="zoom-slider" min="50" max="500" value="100" step="5" disabled oninput="handleZoom(this)">
             </div>
-            <small style="display:block;margin-top:5px;color:#aaa;">💡 Scroll on image to Zoom, Drag to Pan. (Zoom < 100% to fit edges)</small>
+            <input type="range" id="zoom-slider" min="50" max="500" value="100" step="5" disabled oninput="handleZoom(this)">
+            <small style="display:block;margin-top:5px;color:#aaa;">💡 Scroll on image to Zoom, Drag to Pan.</small>
         </div>
         
         <div class="control-group">
@@ -663,8 +672,14 @@ INDEX_HTML = '''
     function getCurrentState() {
         const pages = [];
         document.querySelectorAll('.comic-page').forEach(p => {
-            const panels = [];
             const grid = p.querySelector('.comic-grid');
+            // Extract layout class
+            let layout = 'layout-rows';
+            if(grid.classList.contains('layout-cols')) layout = 'layout-cols';
+            if(grid.classList.contains('layout-grid')) layout = 'layout-grid';
+            if(grid.classList.contains('layout-slanted')) layout = 'layout-slanted';
+            
+            const panels = [];
             grid.querySelectorAll('.panel').forEach(pan => {
                 const img = pan.querySelector('img');
                 const bubbles = [];
@@ -677,16 +692,17 @@ INDEX_HTML = '''
                         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') },
-                        transform: b.style.transform // Preserve centered transform
+                        transform: b.style.transform
                     });
                 });
                 panels.push({ 
                     src: img.src, 
                     zoom: img.dataset.zoom, tx: img.dataset.translateX, ty: img.dataset.translateY,
+                    fit: img.classList.contains('fit-cover') ? 'cover' : 'contain',
                     bubbles: bubbles 
                 });
             });
-            pages.push({ panels: panels });
+            pages.push({ layout: layout, panels: panels });
         });
         return pages;
     }
@@ -704,7 +720,10 @@ INDEX_HTML = '''
             pageWrapper.appendChild(pageTitle);
             
             const div = document.createElement('div'); div.className = 'comic-page';
-            const grid = document.createElement('div'); grid.className = 'comic-grid';
+            const grid = document.createElement('div'); 
+            
+            // Restore Layout
+            grid.className = 'comic-grid ' + (page.layout || 'layout-rows');
             
             page.panels.forEach((pan) => {
                 const pDiv = document.createElement('div'); pDiv.className = 'panel';
@@ -712,6 +731,9 @@ INDEX_HTML = '''
                 const img = document.createElement('img');
                 img.src = pan.src.includes('?') ? pan.src : pan.src + `?sid=${sid}`; 
                 img.dataset.zoom = pan.zoom || 100; img.dataset.translateX = pan.tx || 0; img.dataset.translateY = pan.ty || 0;
+                
+                if(pan.fit === 'cover') img.classList.add('fit-cover');
+                
                 updateImageTransform(img);
                 
                 // === EVENTS FOR PANNING AND ZOOMING ===
@@ -726,6 +748,9 @@ INDEX_HTML = '''
                 grid.appendChild(pDiv);
             });
             div.appendChild(grid); pageWrapper.appendChild(div); con.appendChild(pageWrapper);
+            
+            // Sync layout dropdown if this is the first page
+            if(pageIdx === 0) document.getElementById('layout-select').value = (page.layout || 'layout-rows');
         });
         selectedBubble = null;
         selectedPanel = null;
@@ -736,11 +761,12 @@ INDEX_HTML = '''
     async function upload() {
         const f = document.getElementById('file-upload').files[0];
         const pCount = document.getElementById('page-count').value;
+        const panelCount = document.getElementById('panels-per-page').value;
         if(!f) return alert("Select a video");
         sid = genUUID(); localStorage.setItem('comic_sid', sid); currentSaveCode = null;
         document.querySelector('.upload-box').style.display='none'; 
         document.getElementById('loading-view').style.display='flex';
-        const fd = new FormData(); fd.append('file', f); fd.append('target_pages', pCount); 
+        const fd = new FormData(); fd.append('file', f); fd.append('target_pages', pCount); fd.append('panels_per_page', panelCount);
         const r = await fetch(`/uploader?sid=${sid}`, {method:'POST', body:fd});
         if(r.ok) interval = setInterval(checkStatus, 2000);
         else { alert("Upload failed"); location.reload(); }
@@ -758,8 +784,10 @@ INDEX_HTML = '''
     function loadNewComic() {
         fetch(`/output/pages.json?sid=${sid}`).then(r=>r.json()).then(data => {
             const cleanData = data.map((p, pi) => ({
+                layout: 'layout-rows', // Default layout
                 panels: p.panels.map((pan, j) => ({
                     src: `/frames/${pan.image}?sid=${sid}`,
+                    fit: 'contain', // Default no cut
                     bubbles: (p.bubbles && p.bubbles[j] && p.bubbles[j].dialog) ? [{ 
                         text: p.bubbles[j].dialog, 
                         // Backend now sends -1, -1 for center. 
@@ -869,6 +897,9 @@ INDEX_HTML = '''
         document.getElementById('bubble-type-select').disabled = true;
         document.getElementById('font-select').disabled = true;
         document.getElementById('tail-controls').style.display = 'none';
+        
+        // Update Fit Button Text
+        document.getElementById('fit-btn').innerText = img.classList.contains('fit-cover') ? "Fit: Cover" : "Fit: Contain";
     }
     
     function addBubble() { 
@@ -973,6 +1004,28 @@ INDEX_HTML = '''
     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', true); }
     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); }
     
+    // === LAYOUT & FIT FUNCTIONS ===
+    function changeLayout(newLayout) {
+        // Apply layout to all pages for consistency
+        document.querySelectorAll('.comic-grid').forEach(g => {
+            g.className = 'comic-grid ' + newLayout;
+        });
+        saveDraft(true);
+    }
+    
+    function toggleFitMode() {
+        if(!selectedPanel) return alert("Select a panel");
+        const img = selectedPanel.querySelector('img');
+        if(img.classList.contains('fit-cover')) {
+            img.classList.remove('fit-cover'); // Switch to Contain
+            document.getElementById('fit-btn').innerText = "Fit: Contain";
+        } else {
+            img.classList.add('fit-cover'); // Switch to Cover
+            document.getElementById('fit-btn').innerText = "Fit: Cover";
+        }
+        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); }
     async function gotoTimestamp() { if(isProcessing) return; if(!selectedPanel) return alert("Select a panel"); let v = document.getElementById('timestamp-input').value.trim(); if(!v) return; if(v.includes(':')) { let p = v.split(':'); v = parseInt(p[0]) * 60 + parseFloat(p[1]); } else { v = parseFloat(v); } if(isNaN(v)) return alert("Invalid time"); 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(`/goto_timestamp?sid=${sid}`, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({filename:fname, timestamp:v}) }); const d = await r.json(); if(d.success) { img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`; document.getElementById('timestamp-input').value = ''; } else { alert('Error: ' + d.message); } } catch(e) { console.error(e); } img.style.opacity = '1'; setProcessing(false); saveDraft(true); }
@@ -1034,6 +1087,8 @@ def upload():
     
     # GET PAGE COUNT FROM FORM
     target_pages = request.form.get('target_pages', 4)
+    # GET PANEL COUNT FROM FORM (Default to 2)
+    panels_per_page = request.form.get('panels_per_page', 2)
 
     f = request.files['file']
     gen = EnhancedComicGenerator(sid)
@@ -1042,7 +1097,7 @@ def upload():
     gen.write_status("Starting...", 5)
     
     # Run in thread
-    threading.Thread(target=gen.run, args=(target_pages,)).start()
+    threading.Thread(target=gen.run, args=(target_pages, panels_per_page)).start()
     return jsonify({'success': True, 'message': 'Generation started.'})
 
 @app.route('/status')