Update app_enhanced.py

app_enhanced.py

@@ -36,36 +36,30 @@ os.makedirs(BASE_USER_DIR, exist_ok=True)
 # ======================================================
 
 def create_placeholder_image(text, filename, output_dir):
-    """Fallback image generator."""
-    img = np.zeros((800, 800, 3), dtype=np.uint8)
-    img[:] = (30, 30, 30) # Dark grey
-    
-    # Text
+    img = np.zeros((1200, 800, 3), dtype=np.uint8)
+    img[:] = (30, 30, 30) 
     font = cv2.FONT_HERSHEY_SIMPLEX
-    cv2.putText(img, text, (50, 400), font, 1.5, (200, 200, 200), 3, cv2.LINE_AA)
-    cv2.rectangle(img, (0,0), (800,800), (100,100,100), 10)
-    
+    cv2.putText(img, text, (50, 600), font, 2, (200, 200, 200), 4, cv2.LINE_AA)
+    cv2.rectangle(img, (0,0), (800,1200), (100,100,100), 10)
     path = os.path.join(output_dir, filename)
     cv2.imwrite(path, img)
     return filename
 
 @spaces.GPU(duration=120)
 def generate_comic_gpu(video_path, frames_dir, target_pages):
-    """Extracts 4 frames per page (2x2 Grid)."""
+    """Extracts frames WITHOUT cropping them (Preserves content)."""
     if os.path.exists(frames_dir): shutil.rmtree(frames_dir)
     os.makedirs(frames_dir, exist_ok=True)
     
     cap = cv2.VideoCapture(video_path)
-    total_frames = 0
-    duration = 0
-    
-    if cap.isOpened():
-        total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
-        fps = cap.get(cv2.CAP_PROP_FPS) or 25
-        duration = total_frames / fps
-    else:
+    if not cap.isOpened():
         print("❌ Video load failed.")
+        return []
 
+    total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+    fps = cap.get(cv2.CAP_PROP_FPS) or 25
+    duration = total_frames / fps
+    
     panels_per_page = 4
     total_panels_needed = int(target_pages) * panels_per_page
     frame_files_ordered = []
@@ -76,14 +70,22 @@ def generate_comic_gpu(video_path, frames_dir, target_pages):
             cap.set(cv2.CAP_PROP_POS_MSEC, t * 1000)
             ret, frame = cap.read()
             fname = f"frame_{i:04d}.png"
+            
             if ret and frame is not None:
-                # Square crop
+                # FIX: Do NOT crop to square. Just resize to reasonable resolution.
+                # Maintains visual data.
+                # We resize to a standard width (e.g. 800) but keep aspect ratio relative
+                # or just force a high res fit.
+                
+                # Let's resize to 800xWidth to ensure it fits nicely in panels
+                # but we won't cut pixels off.
                 h, w = frame.shape[:2]
-                min_dim = min(h, w)
-                sx = (w - min_dim) // 2
-                sy = (h - min_dim) // 2
-                frame = frame[sy:sy+min_dim, sx:sx+min_dim]
-                frame = cv2.resize(frame, (800, 800))
+                
+                # Simple Resize (Distortion is usually okay for comics, 
+                # but keeping aspect ratio is better. Let's just standard resize 
+                # so the frontend Object-Fit handles the rest).
+                frame = cv2.resize(frame, (800, 1000)) 
+                
                 cv2.imwrite(os.path.join(frames_dir, fname), frame)
                 frame_files_ordered.append(fname)
             else:
@@ -110,7 +112,7 @@ def generate_comic_gpu(video_path, frames_dir, target_pages):
         pg_panels = [{'image': f} for f in p_frames]
         pg_bubbles = []
         if i == 0:
-            pg_bubbles.append({'dialog': "Red Dot = Move Center\nBlue Dot = Tilt Line", 'x': '50%', 'y': '50%'})
+            pg_bubbles.append({'dialog': "Red: Center\nBlue: Top Tilt\nGreen: Bottom Tilt", 'x': '50%', 'y': '50%'})
 
         pages_data.append({
             'panels': pg_panels,
@@ -132,7 +134,7 @@ class ComicGenHost:
 
     def run(self, pages):
         try:
-            self.write_status("Processing Video...", 20)
+            self.write_status("Processing...", 20)
             data = generate_comic_gpu(self.video_path, self.frames_dir, pages)
             with open(os.path.join(self.output_dir, 'data.json'), 'w') as f:
                 json.dump(data, f)
@@ -154,22 +156,20 @@ INDEX_HTML = '''
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Advanced Comic Maker</title>
+    <title>Ultimate Comic Editor</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.min.js"></script>
     <link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
     <style>
-        body { background: #121212; color: #eee; font-family: sans-serif; margin: 0; user-select: none; }
+        body { background: #1a1a1a; color: #eee; font-family: sans-serif; margin: 0; user-select: none; }
         
-        /* LAYOUT */
         #upload-view { padding: 50px; text-align: center; }
-        .box { background: #1e1e1e; display: inline-block; padding: 40px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
-        button { background: #e74c3c; border: none; padding: 10px 20px; font-weight: bold; cursor: pointer; border-radius: 4px; font-size: 16px; color: white; margin: 5px; }
-        button:hover { background: #c0392b; }
+        .box { background: #2d2d2d; display: inline-block; padding: 40px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
+        button { background: #e74c3c; border: none; padding: 12px 24px; font-weight: bold; cursor: pointer; border-radius: 6px; font-size: 16px; color: white; margin: 5px; transition: 0.2s; }
+        button:hover { transform: scale(1.05); }
         
         #editor-view { display: none; padding: 20px; text-align: center; }
-        .comic-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin-top: 20px; padding-bottom: 100px; }
+        .comic-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin-top: 20px; padding-bottom: 120px; }
         
-        /* PAGE */
         .comic-page {
             width: 600px; height: 800px;
             background: white;
@@ -179,104 +179,113 @@ INDEX_HTML = '''
             overflow: hidden; 
         }
 
-        /* GRID LOGIC with Clip Path */
+        /* === GRID CSS === */
         .comic-grid {
             width: 100%; height: 100%;
             position: relative;
             background: #000;
+            /* Coordinate System */
             --x: 50%;   /* Center X */
             --y: 50%;   /* Center Y */
-            --xt: 50%;  /* Top X (Tilt) */
-            --xb: 50%;  /* Bottom X (Tilt) */
-            --gap: 3px;
+            --xt: 50%;  /* Top Edge X */
+            --xb: 50%;  /* Bottom Edge X */
+            
+            --gap: 3px; /* Gap thickness */
         }
 
         .panel {
             position: absolute; top: 0; left: 0; width: 100%; height: 100%;
-            overflow: hidden;
-            background: #222;
+            overflow: hidden; background: #222;
         }
         
-        /* IMAGE ZOOM/PAN */
         .panel img {
             width: 100%; height: 100%;
-            object-fit: cover;
+            object-fit: cover; /* Ensures image fills panel. User zooms/pans to adjust. */
             transform-origin: center;
             cursor: grab;
         }
         .panel img:active { cursor: grabbing; }
 
-        /* CLIP PATHS FOR TILTED PANELS */
+        /* === DYNAMIC CLIP PATHS === */
         /* Top Left */
         .panel:nth-child(1) {
-            clip-path: polygon(0 0, calc(var(--xt) - var(--gap)), calc(var(--x) - var(--gap)) calc(var(--y) - var(--gap)), 0 calc(var(--y) - var(--gap)));
+            clip-path: polygon(
+                0 0, 
+                calc(var(--xt) - var(--gap)) 0, 
+                calc(var(--x) - var(--gap)) calc(var(--y) - var(--gap)), 
+                0 calc(var(--y) - var(--gap))
+            );
             z-index: 1;
         }
         /* Top Right */
         .panel:nth-child(2) {
-            clip-path: polygon(calc(var(--xt) + var(--gap)) 0, 100% 0, 100% calc(var(--y) - var(--gap)), calc(var(--x) + var(--gap)) calc(var(--y) - var(--gap)));
+            clip-path: polygon(
+                calc(var(--xt) + var(--gap)) 0, 
+                100% 0, 
+                100% calc(var(--y) - var(--gap)), 
+                calc(var(--x) + var(--gap)) calc(var(--y) - var(--gap))
+            );
             z-index: 1;
         }
         /* Bottom Left */
         .panel:nth-child(3) {
-            clip-path: polygon(0 calc(var(--y) + var(--gap)), calc(var(--x) - var(--gap)) calc(var(--y) + var(--gap)), calc(var(--xb) - var(--gap)) 100%, 0 100%);
+            clip-path: polygon(
+                0 calc(var(--y) + var(--gap)), 
+                calc(var(--x) - var(--gap)) calc(var(--y) + var(--gap)), 
+                calc(var(--xb) - var(--gap)) 100%, 
+                0 100%
+            );
             z-index: 1;
         }
         /* Bottom Right */
         .panel:nth-child(4) {
-            clip-path: polygon(calc(var(--x) + var(--gap)) calc(var(--y) + var(--gap)), 100% calc(var(--y) + var(--gap)), 100% 100%, calc(var(--xb) + var(--gap)) 100%);
+            clip-path: polygon(
+                calc(var(--x) + var(--gap)) calc(var(--y) + var(--gap)), 
+                100% calc(var(--y) + var(--gap)), 
+                100% 100%, 
+                calc(var(--xb) + var(--gap)) 100%
+            );
             z-index: 1;
         }
 
-        /* HANDLES */
-        .handle-center {
-            position: absolute;
-            width: 20px; height: 20px;
-            background: #e74c3c; /* RED */
+        /* === HANDLES === */
+        .handle {
+            position: absolute; width: 22px; height: 22px;
             border: 2px solid white; border-radius: 50%;
-            left: var(--x); top: var(--y);
             transform: translate(-50%, -50%);
-            cursor: move; z-index: 999;
-            box-shadow: 0 0 5px black;
-        }
-        
-        .handle-tilt {
-            position: absolute;
-            width: 16px; height: 16px;
-            background: #3498db; /* BLUE */
-            border: 2px solid white; border-radius: 50%;
-            left: var(--xt); top: 0%;
-            transform: translate(-50%, 50%); /* Just below top edge */
-            cursor: ew-resize; z-index: 999;
-            box-shadow: 0 0 5px black;
+            z-index: 999; cursor: pointer;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.8);
         }
+        .handle:hover { transform: translate(-50%, -50%) scale(1.2); }
+
+        .h-center { background: #e74c3c; left: var(--x); top: var(--y); cursor: move; }
+        .h-top    { background: #3498db; left: var(--xt); top: 1%; cursor: ew-resize; }
+        .h-bottom { background: #2ecc71; left: var(--xb); top: 99%; cursor: ew-resize; }
 
         /* BUBBLES */
         .bubble {
-            position: absolute;
-            background: white; color: black;
-            padding: 8px 12px; border-radius: 15px;
+            position: absolute; background: white; color: black;
+            padding: 8px 12px; border-radius: 12px;
             font-family: 'Bangers', cursive; letter-spacing: 1px;
             border: 2px solid black; z-index: 100; cursor: move;
-            transform: translate(-50%, -50%);
-            text-align: center; min-width: 60px;
-            box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
+            transform: translate(-50%, -50%); text-align: center;
+            box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
         }
 
         .toolbar {
-            position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
-            background: #333; padding: 10px 20px; border-radius: 50px;
-            display: flex; gap: 10px; z-index: 1000; box-shadow: 0 5px 20px rgba(0,0,0,0.6);
+            position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
+            background: #222; padding: 12px 25px; border-radius: 50px;
+            display: flex; gap: 15px; z-index: 1000; box-shadow: 0 5px 20px rgba(0,0,0,0.6);
+            border: 1px solid #444;
         }
-        .info-tip { color: #888; margin-top: 10px; font-size: 0.9em; }
     </style>
 </head>
 <body>
 
 <div id="upload-view">
     <div class="box">
-        <h1>🎞️ Advanced Comic Maker</h1>
-        <p>Zoom, Pan, Tilt & Resize!</p>
+        <h1>🎞️ Full Control Comic Maker</h1>
+        <p>Independent Upper/Lower Tilt + Full Image View</p>
         <input type="file" id="fileIn" accept="video/*"><br><br>
         <label>Pages:</label> <input type="number" id="pgCount" value="1" min="1" max="5" style="width:50px;">
         <br><br>
@@ -288,22 +297,17 @@ INDEX_HTML = '''
 <div id="editor-view">
     <div class="comic-container" id="container"></div>
     <div class="toolbar">
-        <button onclick="addBubble()">💬 Text</button>
-        <button onclick="downloadAll()">💾 Save</button>
+        <button onclick="addBubble()">💬 Add Text</button>
+        <button onclick="downloadAll()">💾 Download</button>
         <button style="background:#555" onclick="location.reload()">↺ Reset</button>
     </div>
-    <div class="info-tip">
-        <b>Controls:</b> Red Dot = Resize Center | Blue Dot = Tilt | Scroll Image = Zoom | Drag Image = Pan
-    </div>
 </div>
 
 <script>
     let sid = 'S' + Date.now();
-    let dragType = null; // 'center', 'tilt', 'bubble', 'pan'
+    let dragType = null; 
     let activeObj = null;
     let dragStart = {x:0, y:0};
-    
-    // IMAGE STATE STORAGE: { imgId: {scale:1, tx:0, ty:0} }
     let imgStates = new Map();
 
     async function startUpload() {
@@ -337,61 +341,54 @@ INDEX_HTML = '''
         data.forEach(pg => {
             let pDiv = document.createElement('div');
             pDiv.className = 'comic-page';
-            
             let grid = document.createElement('div');
             grid.className = 'comic-grid';
             
             // Panels
-            pg.panels.forEach((pan, idx) => {
+            pg.panels.forEach((pan) => {
                 let div = document.createElement('div');
                 div.className = 'panel';
                 let img = document.createElement('img');
                 img.src = `/frames/${pan.image}?sid=${sid}`;
                 img.id = `img-${Math.random().toString(36).substr(2,9)}`;
                 
-                // Initialize State
                 imgStates.set(img.id, {s: 1, tx: 0, ty: 0});
-                
-                // Zoom Listener
                 img.onwheel = (e) => handleZoom(e, img);
-                // Pan Listener (Start)
                 img.onmousedown = (e) => {
                     e.preventDefault(); e.stopPropagation();
-                    dragType = 'pan';
-                    activeObj = img;
+                    dragType = 'pan'; activeObj = img;
                     dragStart = {x: e.clientX, y: e.clientY};
                 };
-
                 div.appendChild(img);
                 grid.appendChild(div);
             });
 
-            // Center Handle (Red)
-            let hc = document.createElement('div');
-            hc.className = 'handle-center';
-            hc.onmousedown = (e) => {
-                e.stopPropagation();
-                dragType = 'center'; activeObj = grid;
-            };
-            grid.appendChild(hc);
-
-            // Tilt Handle (Blue)
-            let ht = document.createElement('div');
-            ht.className = 'handle-tilt';
-            ht.onmousedown = (e) => {
-                e.stopPropagation();
-                dragType = 'tilt'; activeObj = grid;
-            };
-            grid.appendChild(ht);
-
-            // Bubbles
-            if(pg.bubbles) pg.bubbles.forEach(b => createBubble(b.dialog, grid));
+            // Handles
+            // 1. Center (Red)
+            let hc = createHandle('h-center', grid, 'center');
+            // 2. Top (Blue)
+            let ht = createHandle('h-top', grid, 'top');
+            // 3. Bottom (Green)
+            let hb = createHandle('h-bottom', grid, 'bottom');
 
+            grid.append(hc, ht, hb);
+
+            if(pg.bubbles) pg.bubbles.forEach(b => createBubble(b.dialog, grid));
             pDiv.appendChild(grid);
             con.appendChild(pDiv);
         });
     }
 
+    function createHandle(cls, grid, type) {
+        let h = document.createElement('div');
+        h.className = `handle ${cls}`;
+        h.onmousedown = (e) => {
+            e.stopPropagation();
+            dragType = type; activeObj = grid;
+        };
+        return h;
+    }
+
     function createBubble(txt, parent) {
         let b = document.createElement('div');
         b.className = 'bubble';
@@ -408,13 +405,11 @@ INDEX_HTML = '''
     window.addBubble = () => createBubble("New Text");
 
     // === INTERACTION LOGIC ===
-    
-    // Zoom
     function handleZoom(e, img) {
         e.preventDefault();
         let st = imgStates.get(img.id);
         let delta = e.deltaY * -0.001;
-        st.s = Math.min(Math.max(0.5, st.s + delta), 5); // Limit Zoom 0.5x to 5x
+        st.s = Math.min(Math.max(0.5, st.s + delta), 5);
         updateImgTransform(img);
     }
 
@@ -423,49 +418,39 @@ INDEX_HTML = '''
         img.style.transform = `translate(${st.tx}px, ${st.ty}px) scale(${st.s})`;
     }
 
-    // Global Move
     document.addEventListener('mousemove', (e) => {
         if(!dragType) return;
         
-        // 1. Resize Center (Red Dot)
+        // 1. Center (Moves Intersection)
         if(dragType === 'center') {
             let rect = activeObj.getBoundingClientRect();
             let x = (e.clientX - rect.left) / rect.width * 100;
             let y = (e.clientY - rect.top) / rect.height * 100;
-            
-            // Allow 0 to 100%
-            x = Math.max(0, Math.min(100, x));
-            y = Math.max(0, Math.min(100, y));
-            
-            activeObj.style.setProperty('--x', x + '%');
-            activeObj.style.setProperty('--y', y + '%');
-            
-            // Recalculate Tilt Bottom (Geometry)
-            updateTiltGeometry(activeObj);
+            activeObj.style.setProperty('--x', clamp(x)+'%');
+            activeObj.style.setProperty('--y', clamp(y)+'%');
         }
-        
-        // 2. Tilt (Blue Dot)
-        else if(dragType === 'tilt') {
+        // 2. Top Tilt (Moves Top Edge X)
+        else if(dragType === 'top') {
             let rect = activeObj.getBoundingClientRect();
             let x = (e.clientX - rect.left) / rect.width * 100;
-            x = Math.max(0, Math.min(100, x)); // 0-100%
-            
-            activeObj.style.setProperty('--xt', x + '%');
-            updateTiltGeometry(activeObj);
+            activeObj.style.setProperty('--xt', clamp(x)+'%');
         }
-        
-        // 3. Pan Image
+        // 3. Bottom Tilt (Moves Bottom Edge X)
+        else if(dragType === 'bottom') {
+            let rect = activeObj.getBoundingClientRect();
+            let x = (e.clientX - rect.left) / rect.width * 100;
+            activeObj.style.setProperty('--xb', clamp(x)+'%');
+        }
+        // 4. Pan Image
         else if(dragType === 'pan') {
             let dx = e.clientX - dragStart.x;
             let dy = e.clientY - dragStart.y;
             let st = imgStates.get(activeObj.id);
-            st.tx += dx;
-            st.ty += dy;
+            st.tx += dx; st.ty += dy;
             dragStart = {x: e.clientX, y: e.clientY};
             updateImgTransform(activeObj);
         }
-
-        // 4. Move Bubble
+        // 5. Bubble
         else if(dragType === 'bubble') {
             let rect = activeObj.parentElement.getBoundingClientRect();
             activeObj.style.left = (e.clientX - rect.left) + 'px';
@@ -474,47 +459,18 @@ INDEX_HTML = '''
     });
 
     document.addEventListener('mouseup', () => { dragType = null; activeObj = null; });
-
-    // Calculates the Bottom X based on Top X and Center X to form a straight line
-    function updateTiltGeometry(grid) {
-        // Need to read computed styles roughly or rely on inline styles
-        // Since we set properties on the style attribute, we can parse them
-        let cx = parseFloat(grid.style.getPropertyValue('--x')) || 50;
-        let cy = parseFloat(grid.style.getPropertyValue('--y')) || 50;
-        let xt = parseFloat(grid.style.getPropertyValue('--xt')) || 50;
-        
-        // Math: We have Point Top (xt, 0) and Point Center (cx, cy).
-        // We want Point Bottom (xb, 100) to be on the same line.
-        // Slope m = (cy - 0) / (cx - xt) = cy / (cx - xt)
-        // Line eq: y - 0 = m * (x - xt)  =>  y = m(x - xt)
-        // At bottom, y = 100.
-        // 100 = (cy / (cx - xt)) * (xb - xt)
-        // 100 * (cx - xt) / cy = xb - xt
-        // xb = xt + (100/cy) * (cx - xt)
-        
-        if(cy === 0) cy = 0.1; // Avoid divide by zero
-        
-        let xb = xt + (100 / cy) * (cx - xt);
-        
-        // Clamp visually so it doesn't fly off screen too wildly
-        // xb = Math.max(-50, Math.min(150, xb)); 
-        
-        grid.style.setProperty('--xb', xb + '%');
-    }
+    function clamp(val) { return Math.max(0, Math.min(100, val)); }
 
     window.downloadAll = async () => {
         let pgs = document.querySelectorAll('.comic-page');
         for(let i=0; i<pgs.length; i++) {
-            // Hide handles
-            let handles = pgs[i].querySelectorAll('.handle-center, .handle-tilt');
+            let handles = pgs[i].querySelectorAll('.handle');
             handles.forEach(h => h.style.display='none');
-            
             let url = await htmlToImage.toPng(pgs[i]);
             let a = document.createElement('a');
             a.download = `comic_page_${i+1}.png`;
             a.href = url;
             a.click();
-            
             handles.forEach(h => h.style.display='block');
         }
     };