Update app_enhanced.py

app_enhanced.py

@@ -10,11 +10,11 @@ import torch
 from flask import Flask, jsonify, request, send_from_directory, send_file
 
 # ======================================================
-# 🚀 ZEROGPU WARMUP (FIXES RUNTIME ERROR)
+# 🚀 ZEROGPU WARMUP
 # ======================================================
 @spaces.GPU
 def gpu_warmup():
-    """Dummy function to trigger ZeroGPU detection at startup."""
+    """Dummy function to trigger ZeroGPU detection."""
     print(f"✅ GPU Warmup: CUDA Available = {torch.cuda.is_available()}")
     return True
 
@@ -23,7 +23,6 @@ def gpu_warmup():
 # ======================================================
 app = Flask(__name__)
 
-# Persistent storage check
 if os.path.exists('/data'):
     BASE_STORAGE_PATH = '/data'
 else:
@@ -37,17 +36,14 @@ os.makedirs(BASE_USER_DIR, exist_ok=True)
 # ======================================================
 
 def create_placeholder_image(text, filename, output_dir):
-    """Creates a backup image if video fails to read."""
-    # Create dark grey image
+    """Fallback image generator."""
     img = np.zeros((800, 800, 3), dtype=np.uint8)
-    img[:] = (40, 40, 40) 
+    img[:] = (30, 30, 30) # Dark grey
     
-    # Add text
+    # Text
     font = cv2.FONT_HERSHEY_SIMPLEX
     cv2.putText(img, text, (50, 400), font, 1.5, (200, 200, 200), 3, cv2.LINE_AA)
-    
-    # Add border
-    cv2.rectangle(img, (0,0), (800,800), (100,100,100), 20)
+    cv2.rectangle(img, (0,0), (800,800), (100,100,100), 10)
     
     path = os.path.join(output_dir, filename)
     cv2.imwrite(path, img)
@@ -55,17 +51,11 @@ def create_placeholder_image(text, filename, output_dir):
 
 @spaces.GPU(duration=120)
 def generate_comic_gpu(video_path, frames_dir, target_pages):
-    """
-    Extracts 4 frames per page (2x2 Grid).
-    """
-    print(f"🚀 Starting GPU generation for {video_path}")
-    
-    # 1. Setup
+    """Extracts 4 frames per page (2x2 Grid)."""
     if os.path.exists(frames_dir): shutil.rmtree(frames_dir)
     os.makedirs(frames_dir, exist_ok=True)
     
     cap = cv2.VideoCapture(video_path)
-    fps = 25
     total_frames = 0
     duration = 0
     
@@ -74,72 +64,57 @@ def generate_comic_gpu(video_path, frames_dir, target_pages):
         fps = cap.get(cv2.CAP_PROP_FPS) or 25
         duration = total_frames / fps
     else:
-        print("❌ Video load failed. Using placeholders.")
+        print("❌ Video load failed.")
 
-    # 2. Calculate frames needed (4 per page)
     panels_per_page = 4
     total_panels_needed = int(target_pages) * panels_per_page
-    
     frame_files_ordered = []
     
-    # 3. Extract Frames
-    if duration > 0 and total_frames > 0:
+    if duration > 0:
         times = np.linspace(1, max(1, duration - 1), total_panels_needed)
-        
         for i, t in enumerate(times):
             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:
-                # Crop to square-ish for 2x2 grid
+                # Square crop
                 h, w = frame.shape[:2]
                 min_dim = min(h, w)
-                start_x = (w - min_dim) // 2
-                start_y = (h - min_dim) // 2
-                # Crop center square
-                frame = frame[start_y:start_y+min_dim, start_x:start_x+min_dim]
-                
-                # Resize for consistency
+                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))
-                
                 cv2.imwrite(os.path.join(frames_dir, fname), frame)
                 frame_files_ordered.append(fname)
             else:
-                create_placeholder_image(f"Error {t:.1f}s", fname, frames_dir)
+                create_placeholder_image(f"Err {t:.1f}s", fname, frames_dir)
                 frame_files_ordered.append(fname)
         cap.release()
     else:
-        # Fallback loop
         for i in range(total_panels_needed):
             fname = f"placeholder_{i}.png"
             create_placeholder_image(f"Panel {i+1}", fname, frames_dir)
             frame_files_ordered.append(fname)
 
-    # 4. Build Page Data
     pages_data = []
     for i in range(int(target_pages)):
         start = i * panels_per_page
         end = start + panels_per_page
         p_frames = frame_files_ordered[start:end]
         
-        # Fill missing if any
         while len(p_frames) < 4:
             fname = f"extra_{len(p_frames)}.png"
             create_placeholder_image("Empty", fname, frames_dir)
             p_frames.append(fname)
             
         pg_panels = [{'image': f} for f in p_frames]
-        
         pg_bubbles = []
         if i == 0:
-            pg_bubbles.append({'dialog': "Drag the RED DOT\nto resize panels!", 'x': '50%', 'y': '50%'})
+            pg_bubbles.append({'dialog': "Red Dot = Move Center\nBlue Dot = Tilt Line", 'x': '50%', 'y': '50%'})
 
         pages_data.append({
             'panels': pg_panels,
-            'bubbles': pg_bubbles,
-            'splitX': '50%', # Center X
-            'splitY': '50%'  # Center Y
+            'bubbles': pg_bubbles
         })
 
     return pages_data
@@ -151,19 +126,16 @@ class ComicGenHost:
         self.video_path = os.path.join(self.user_dir, 'video.mp4')
         self.frames_dir = os.path.join(self.user_dir, 'frames')
         self.output_dir = os.path.join(self.user_dir, 'output')
-        
         os.makedirs(self.user_dir, exist_ok=True)
         os.makedirs(self.frames_dir, exist_ok=True)
         os.makedirs(self.output_dir, exist_ok=True)
 
     def run(self, pages):
         try:
-            self.write_status("Generating...", 30)
+            self.write_status("Processing Video...", 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)
-            
             self.write_status("Ready", 100)
         except Exception as e:
             traceback.print_exc()
@@ -182,211 +154,241 @@ INDEX_HTML = '''
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>4-Panel Adjustable Comic</title>
+    <title>Advanced Comic Maker</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; text-align: center; }
+        body { background: #121212; color: #eee; font-family: sans-serif; margin: 0; user-select: none; }
         
-        /* UPLOAD SCREEN */
-        #upload-view { padding: 50px; }
+        /* 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; margin-top: 10px; color: white; }
+        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; }
-        input { padding: 10px; margin: 5px; border-radius: 4px; border: 1px solid #555; background: #333; color: white; }
-
-        /* EDITOR SCREEN */
-        #editor-view { display: none; padding: 20px; }
-        .comic-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin-top: 20px; padding-bottom: 80px; }
         
-        /* COMIC PAGE STYLE */
+        #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; }
+        
+        /* PAGE */
         .comic-page {
             width: 600px; height: 800px;
             background: white;
             border: 4px solid #000;
             position: relative;
-            box-shadow: 0 0 20px rgba(0,0,0,0.5);
-            user-select: none;
+            box-shadow: 0 0 30px rgba(0,0,0,0.5);
             overflow: hidden; 
         }
 
-        /* 2x2 GRID LOGIC */
+        /* GRID LOGIC with Clip Path */
         .comic-grid {
             width: 100%; height: 100%;
             position: relative;
-            background: #000; /* The "Gap" color */
-            --x: 50%;
-            --y: 50%;
-            --gap: 4px; /* Thickness of divider */
+            background: #000;
+            --x: 50%;   /* Center X */
+            --y: 50%;   /* Center Y */
+            --xt: 50%;  /* Top X (Tilt) */
+            --xb: 50%;  /* Bottom X (Tilt) */
+            --gap: 3px;
         }
 
         .panel {
-            position: absolute;
+            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
             overflow: hidden;
-            background: #333;
-            box-sizing: border-box;
-            border: 2px solid #000;
+            background: #222;
         }
-
+        
+        /* IMAGE ZOOM/PAN */
         .panel img {
             width: 100%; height: 100%;
             object-fit: cover;
-            pointer-events: auto; 
+            transform-origin: center;
+            cursor: grab;
         }
+        .panel img:active { cursor: grabbing; }
 
-        /* DYNAMIC PANEL SIZING */
+        /* CLIP PATHS FOR TILTED PANELS */
         /* Top Left */
-        .panel:nth-child(1) { left: 0; top: 0; width: calc(var(--x) - var(--gap)/2); height: calc(var(--y) - var(--gap)/2); }
+        .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)));
+            z-index: 1;
+        }
         /* Top Right */
-        .panel:nth-child(2) { left: calc(var(--x) + var(--gap)/2); top: 0; width: calc(100% - var(--x) - var(--gap)/2); height: calc(var(--y) - var(--gap)/2); }
+        .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)));
+            z-index: 1;
+        }
         /* Bottom Left */
-        .panel:nth-child(3) { left: 0; top: calc(var(--y) + var(--gap)/2); width: calc(var(--x) - var(--gap)/2); height: calc(100% - var(--y) - var(--gap)/2); }
+        .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%);
+            z-index: 1;
+        }
         /* Bottom Right */
-        .panel:nth-child(4) { left: calc(var(--x) + var(--gap)/2); top: calc(var(--y) + var(--gap)/2); width: calc(100% - var(--x) - var(--gap)/2); height: calc(100% - var(--y) - var(--gap)/2); }
+        .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%);
+            z-index: 1;
+        }
 
-        /* CENTRAL HANDLE (RED DOT) */
-        .grid-handle {
+        /* HANDLES */
+        .handle-center {
             position: absolute;
-            width: 24px; height: 24px;
-            background: #e74c3c;
-            border: 3px solid white;
-            border-radius: 50%;
+            width: 20px; height: 20px;
+            background: #e74c3c; /* RED */
+            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 4px 10px rgba(0,0,0,0.5);
-            pointer-events: auto;
+            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;
         }
-        .grid-handle:hover { transform: translate(-50%, -50%) scale(1.2); }
 
         /* BUBBLES */
         .bubble {
             position: absolute;
             background: white; color: black;
-            padding: 10px 15px; border-radius: 20px;
-            font-family: 'Bangers', cursive;
-            letter-spacing: 1px;
-            border: 2px solid black;
-            z-index: 100; cursor: move;
+            padding: 8px 12px; border-radius: 15px;
+            font-family: 'Bangers', cursive; letter-spacing: 1px;
+            border: 2px solid black; z-index: 100; cursor: move;
             transform: translate(-50%, -50%);
-            min-width: 50px; text-align: center;
-        }
-        .bubble:after {
-            content: ''; position: absolute;
-            bottom: -10px; left: 50%; transform: translateX(-50%);
-            border-width: 10px 10px 0; border-style: solid;
-            border-color: black transparent transparent transparent;
+            text-align: center; min-width: 60px;
+            box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
         }
 
-        /* CONTROLS */
         .toolbar {
             position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
             background: #333; padding: 10px 20px; border-radius: 50px;
-            display: flex; gap: 15px; z-index: 1000; box-shadow: 0 5px 20px rgba(0,0,0,0.6);
+            display: flex; gap: 10px; z-index: 1000; box-shadow: 0 5px 20px rgba(0,0,0,0.6);
         }
-        .toolbar button { margin-top: 0; font-size: 14px; }
+        .info-tip { color: #888; margin-top: 10px; font-size: 0.9em; }
     </style>
 </head>
 <body>
 
 <div id="upload-view">
     <div class="box">
-        <h1>🎞️ 4-Panel Comic Maker</h1>
-        <p>Upload a video to create a 2x2 Comic Page.</p>
-        <input type="file" id="fileIn" accept="video/*"><br>
+        <h1>🎞️ Advanced Comic Maker</h1>
+        <p>Zoom, Pan, Tilt & Resize!</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><br>
         <button onclick="startUpload()">🚀 Generate</button>
-        <p id="status" style="color: #bbb; margin-top:10px;"></p>
+        <p id="status" style="color:#aaa; margin-top:10px;"></p>
     </div>
 </div>
 
 <div id="editor-view">
-    <h2>Drag the <span style="color:#e74c3c">Red Dot</span> to resize panels!</h2>
     <div class="comic-container" id="container"></div>
-    
     <div class="toolbar">
-        <button onclick="addBubble()">💬 Add Text</button>
-        <button onclick="downloadAll()">💾 Download</button>
-        <button style="background:#555" onclick="location.reload()">↺ New</button>
+        <button onclick="addBubble()">💬 Text</button>
+        <button onclick="downloadAll()">💾 Save</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 dragItem = null; 
-    let activeEl = null;
+    let dragType = null; // 'center', 'tilt', 'bubble', 'pan'
+    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() {
         let f = document.getElementById('fileIn').files[0];
-        if(!f) return alert("Select a video.");
-        
+        if(!f) return alert("Select video");
         let fd = new FormData();
         fd.append('file', f);
         fd.append('pages', document.getElementById('pgCount').value);
-        
-        document.getElementById('status').innerText = "Uploading & Processing...";
-        
+        document.getElementById('status').innerText = "Uploading...";
         let r = await fetch(`/upload?sid=${sid}`, {method:'POST', body:fd});
-        if(r.ok) monitorStatus();
+        if(r.ok) checkStatus();
     }
 
-    function monitorStatus() {
+    function checkStatus() {
         let t = setInterval(async () => {
             let r = await fetch(`/status?sid=${sid}`);
             let d = await r.json();
             document.getElementById('status').innerText = d.message;
-            if(d.progress === 100) {
-                clearInterval(t);
-                loadEditor();
-            }
+            if(d.progress >= 100) { clearInterval(t); loadEditor(); }
         }, 1000);
     }
 
     async function loadEditor() {
         document.getElementById('upload-view').style.display='none';
         document.getElementById('editor-view').style.display='block';
-        
         let r = await fetch(`/output/data.json?sid=${sid}`);
         let data = await r.json();
-        
         let con = document.getElementById('container');
         con.innerHTML = '';
-        
-        data.forEach((pg, i) => {
-            let page = document.createElement('div');
-            page.className = 'comic-page';
+
+        data.forEach(pg => {
+            let pDiv = document.createElement('div');
+            pDiv.className = 'comic-page';
             
             let grid = document.createElement('div');
             grid.className = 'comic-grid';
-            grid.style.setProperty('--x', pg.splitX || '50%');
-            grid.style.setProperty('--y', pg.splitY || '50%');
             
-            // 4 Panels
-            pg.panels.forEach(pan => {
+            // Panels
+            pg.panels.forEach((pan, idx) => {
                 let div = document.createElement('div');
                 div.className = 'panel';
-                // Timestamp avoids caching blank images
-                div.innerHTML = `<img src="/frames/${pan.image}?sid=${sid}&t=${Date.now()}">`;
+                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;
+                    dragStart = {x: e.clientX, y: e.clientY};
+                };
+
+                div.appendChild(img);
                 grid.appendChild(div);
             });
-            
-            // Handle
-            let handle = document.createElement('div');
-            handle.className = 'grid-handle';
-            handle.onmousedown = (e) => {
+
+            // Center Handle (Red)
+            let hc = document.createElement('div');
+            hc.className = 'handle-center';
+            hc.onmousedown = (e) => {
                 e.stopPropagation();
-                dragItem = 'handle';
-                activeEl = { handle: handle, grid: grid };
+                dragType = 'center'; activeObj = grid;
             };
-            grid.appendChild(handle);
-            
+            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));
-            
-            page.appendChild(grid);
-            con.appendChild(page);
+
+            pDiv.appendChild(grid);
+            con.appendChild(pDiv);
         });
     }
 
@@ -396,53 +398,116 @@ INDEX_HTML = '''
         b.contentEditable = true;
         b.innerText = txt || "Text";
         b.style.left = '50%'; b.style.top = '50%';
-        
         b.onmousedown = (e) => {
-            if(e.target !== b) return;
             e.stopPropagation();
-            dragItem = 'bubble';
-            activeEl = b;
+            dragType = 'bubble'; activeObj = b;
         };
-        
         if(!parent) parent = document.querySelector('.comic-grid');
-        if(parent) parent.appendChild(b);
+        parent.appendChild(b);
     }
-    
     window.addBubble = () => createBubble("New Text");
 
-    // DRAGGING LOGIC
+    // === 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
+        updateImgTransform(img);
+    }
+
+    function updateImgTransform(img) {
+        let st = imgStates.get(img.id);
+        img.style.transform = `translate(${st.tx}px, ${st.ty}px) scale(${st.s})`;
+    }
+
+    // Global Move
     document.addEventListener('mousemove', (e) => {
-        if(!dragItem) return;
+        if(!dragType) return;
         
-        if(dragItem === 'handle') {
-            let rect = activeEl.grid.getBoundingClientRect();
-            let x = e.clientX - rect.left;
-            let y = e.clientY - rect.top;
+        // 1. Resize Center (Red Dot)
+        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));
             
-            // Constraints (10% to 90%)
-            let px = Math.max(10, Math.min(90, (x / rect.width) * 100));
-            let py = Math.max(10, Math.min(90, (y / rect.height) * 100));
+            activeObj.style.setProperty('--x', x + '%');
+            activeObj.style.setProperty('--y', y + '%');
             
-            activeEl.grid.style.setProperty('--x', px + '%');
-            activeEl.grid.style.setProperty('--y', py + '%');
+            // Recalculate Tilt Bottom (Geometry)
+            updateTiltGeometry(activeObj);
         }
-        else if(dragItem === 'bubble') {
-            let rect = activeEl.parentElement.getBoundingClientRect();
-            activeEl.style.left = (e.clientX - rect.left) + 'px';
-            activeEl.style.top = (e.clientY - rect.top) + 'px';
+        
+        // 2. Tilt (Blue Dot)
+        else if(dragType === 'tilt') {
+            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);
+        }
+        
+        // 3. 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;
+            dragStart = {x: e.clientX, y: e.clientY};
+            updateImgTransform(activeObj);
         }
-    });
 
-    document.addEventListener('mouseup', () => {
-        dragItem = null;
-        activeEl = null;
+        // 4. Move Bubble
+        else if(dragType === 'bubble') {
+            let rect = activeObj.parentElement.getBoundingClientRect();
+            activeObj.style.left = (e.clientX - rect.left) + 'px';
+            activeObj.style.top = (e.clientY - rect.top) + 'px';
+        }
     });
 
+    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 + '%');
+    }
+
     window.downloadAll = async () => {
         let pgs = document.querySelectorAll('.comic-page');
         for(let i=0; i<pgs.length; i++) {
-            let handles = pgs[i].querySelectorAll('.grid-handle');
-            handles.forEach(h => h.style.display = 'none');
+            // Hide handles
+            let handles = pgs[i].querySelectorAll('.handle-center, .handle-tilt');
+            handles.forEach(h => h.style.display='none');
             
             let url = await htmlToImage.toPng(pgs[i]);
             let a = document.createElement('a');
@@ -450,7 +515,7 @@ INDEX_HTML = '''
             a.href = url;
             a.click();
             
-            handles.forEach(h => h.style.display = 'block');
+            handles.forEach(h => h.style.display='block');
         }
     };
 </script>
@@ -459,37 +524,32 @@ INDEX_HTML = '''
 '''
 
 # ======================================================
-# 🔌 FLASK ROUTES
+# 🔌 ROUTES
 # ======================================================
 @app.route('/')
-def index():
-    return INDEX_HTML
+def index(): return INDEX_HTML
 
 @app.route('/upload', methods=['POST'])
 def upload():
     sid = request.args.get('sid')
     f = request.files['file']
     pages = request.form.get('pages', 1)
-    
     host = ComicGenHost(sid)
     f.save(host.video_path)
-    
     threading.Thread(target=host.run, args=(pages,)).start()
-    return jsonify({'ok': True})
+    return jsonify({'ok':True})
 
 @app.route('/status')
 def status():
     sid = request.args.get('sid')
     p = os.path.join(BASE_USER_DIR, sid, 'output', 'status.json')
     if os.path.exists(p): return send_file(p)
-    return jsonify({'progress': 0, 'message': 'Waiting...'})
+    return jsonify({'progress':0, 'message':'Waiting...'})
 
 @app.route('/frames/<path:filename>')
 def frames(filename):
     sid = request.args.get('sid')
-    resp = send_from_directory(os.path.join(BASE_USER_DIR, sid, 'frames'), filename)
-    resp.headers['Cache-Control'] = 'no-store'
-    return resp
+    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'frames'), filename)
 
 @app.route('/output/<path:filename>')
 def output(filename):
@@ -497,10 +557,6 @@ def output(filename):
     return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
 
 if __name__ == '__main__':
-    # 🚀 EXPLICIT WARMUP CALL TO REGISTER FUNCTION
-    try:
-        gpu_warmup()
-    except Exception as e:
-        print(f"⚠️ Warmup ignored (Normal if not on GPU yet): {e}")
-
+    try: gpu_warmup()
+    except: pass
     app.run(host='0.0.0.0', port=7860)