Update app_enhanced.py

app_enhanced.py

@@ -9,21 +9,11 @@ import numpy as np
 from flask import Flask, jsonify, request, send_from_directory, send_file
 
 # ======================================================
-# 🚀 ZEROGPU WARMUP (CRITICAL FIX)
-# ======================================================
-@spaces.GPU
-def gpu_warmup():
-    """A dummy function to wake up the GPU on startup."""
-    import torch
-    print(f"✅ ZeroGPU Warmup Successful: CUDA Available: {torch.cuda.is_available()}")
-    return True
-
-# ======================================================
-# 🔧 CONFIGURATION
+# 🔧 CONFIGURATION & SETUP
 # ======================================================
 app = Flask(__name__)
 
-# Persistent storage check (for Hugging Face Spaces)
+# Check for persistent storage (Hugging Face Spaces specific)
 if os.path.exists('/data'):
     BASE_STORAGE_PATH = '/data'
 else:
@@ -33,113 +23,146 @@ BASE_USER_DIR = os.path.join(BASE_STORAGE_PATH, "userdata")
 os.makedirs(BASE_USER_DIR, exist_ok=True)
 
 # ======================================================
-# 🧠 BACKEND LOGIC
+# 🧠 GPU / BACKEND LOGIC
 # ======================================================
+
 def create_placeholder_image(text, filename, output_dir):
-    """Creates a dummy image if video extraction fails"""
-    img = np.zeros((600, 400, 3), dtype=np.uint8)
-    img[:] = (50, 50, 50) # Dark gray background
+    """Creates a backup image if video fails to read."""
+    img = np.zeros((600, 600, 3), dtype=np.uint8)
+    img[:] = (40, 40, 40) # Dark gray
+    
+    # Text
     font = cv2.FONT_HERSHEY_SIMPLEX
-    cv2.putText(img, text, (50, 300), font, 1, (255, 255, 255), 2, cv2.LINE_AA)
-    cv2.line(img, (0,0), (400,600), (100,100,100), 2)
-    cv2.line(img, (400,0), (0,600), (100,100,100), 2)
+    cv2.putText(img, text, (50, 300), font, 1.5, (200, 200, 200), 2, cv2.LINE_AA)
+    
+    # Border
+    cv2.rectangle(img, (0,0), (600,600), (100,100,100), 10)
+    
     path = os.path.join(output_dir, filename)
     cv2.imwrite(path, img)
     return filename
 
-@spaces.GPU(duration=120) # <-- CRITICAL FIX: The decorator is restored here
+@spaces.GPU(duration=120)
 def generate_comic_gpu(video_path, frames_dir, target_pages):
-    """Extracts frames from video. Uses placeholders if extraction fails."""
+    """
+    Extracts frames for a 4-panel layout (2x2 grid).
+    Target: 4 frames per page.
+    """
+    
+    # 1. Setup
     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
+    
     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:
-        print("❌ Error: Could not open video. Using placeholders.")
+        print("❌ Video load failed. Using placeholders.")
 
-    panels_per_page = 2
+    # 2. Calculate frames needed (4 per page)
+    panels_per_page = 4
     total_panels_needed = target_pages * panels_per_page
+    
     frame_files_ordered = []
     
+    # 3. Extract Frames
     if duration > 0 and total_frames > 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
                 h, w = frame.shape[:2]
-                if w > h:
-                    center_x = w // 2
-                    start_x = max(0, center_x - (h // 2))
-                    frame = frame[:, start_x : start_x + h]
-                p = os.path.join(frames_dir, fname)
-                cv2.imwrite(p, frame)
+                min_dim = min(h, w)
+                start_x = (w - min_dim) // 2
+                start_y = (h - min_dim) // 2
+                frame = frame[start_y:start_y+min_dim, start_x:start_x+min_dim]
+                
+                # Resize for consistency
+                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)
                 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(target_pages):
         start = i * panels_per_page
         end = start + panels_per_page
         p_frames = frame_files_ordered[start:end]
         
-        while len(p_frames) < 2:
-            fname = f"extra_{i}.png"
-            create_placeholder_image("Extra", fname, frames_dir)
+        # 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': p_frames[0]}, {'image': p_frames[1]}]
+        pg_panels = [{'image': f} for f in p_frames]
+        
         pg_bubbles = []
         if i == 0:
-            pg_bubbles.append({'dialog': "Drag the Blue Dots!", 'type': 'speech'})
+            pg_bubbles.append({'dialog': "Drag the CENTER DOT\nto adjust grid!", 'x': 50, 'y': 50})
 
-        pages_data.append({'panels': pg_panels, 'bubbles': pg_bubbles, 'splitT': '45%', 'splitB': '55%'})
+        pages_data.append({
+            'panels': pg_panels,
+            'bubbles': pg_bubbles,
+            'splitX': '50%', # Center X
+            'splitY': '50%'  # Center Y
+        })
 
     return pages_data
 
-class EnhancedComicGenerator:
+class ComicGenHost:
     def __init__(self, sid):
         self.sid = sid
         self.user_dir = os.path.join(BASE_USER_DIR, sid)
-        self.video_path = os.path.join(self.user_dir, 'uploaded.mp4')
+        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, target_pages):
+    def run(self, pages):
         try:
-            self.write_status("Processing...", 20)
-            data = generate_comic_gpu(self.video_path, self.frames_dir, int(target_pages))
-            with open(os.path.join(self.output_dir, 'pages.json'), 'w') as f:
-                json.dump(data, f, indent=2)
-            self.write_status("Complete!", 100)
+            self.write_status("Generating...", 30)
+            data = generate_comic_gpu(self.video_path, self.frames_dir, int(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()
-            self.write_status(f"Error: {str(e)}", -1)
+            self.write_status(f"Error: {e}", -1)
 
     def write_status(self, msg, prog):
         with open(os.path.join(self.output_dir, 'status.json'), 'w') as f:
             json.dump({'message': msg, 'progress': prog}, f)
 
 # ======================================================
-# 🌐 FRONTEND HTML (No changes needed here)
+# 🌐 FRONTEND
 # ======================================================
 INDEX_HTML = '''
 <!DOCTYPE html>
@@ -147,150 +170,275 @@ INDEX_HTML = '''
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vertical Comic Splitter</title>
+    <title>4-Panel Comic Generator</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=Comic+Neue:wght@700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
     <style>
-        body { background: #1a1a1a; font-family: 'Comic Neue', sans-serif; margin: 0; color: #eee; }
-        #app { max-width: 1200px; margin: 0 auto; padding: 20px; text-align: center; }
-        .upload-box { background: #333; padding: 40px; border-radius: 12px; display: inline-block; margin-top: 50px; }
-        input, button { padding: 10px; border-radius: 5px; border: none; font-size: 16px; }
-        button { background: #e67e22; color: white; cursor: pointer; font-weight: bold; }
-        button:hover { background: #d35400; }
-        #editor-area { display: none; }
-        .pages-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 30px; }
+        body { background: #121212; color: #eee; font-family: sans-serif; margin: 0; text-align: center; }
+        
+        /* UPLOAD */
+        #upload-view { padding: 50px; }
+        .box { background: #1e1e1e; display: inline-block; padding: 40px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
+        button { background: #f1c40f; border: none; padding: 10px 20px; font-weight: bold; cursor: pointer; border-radius: 4px; font-size: 16px; margin-top: 10px; }
+        button:hover { background: #f39c12; }
+        input { padding: 10px; margin: 5px; border-radius: 4px; border: 1px solid #555; background: #333; color: white; }
+
+        /* EDITOR */
+        #editor-view { display: none; padding: 20px; }
+        .comic-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin-top: 20px; }
+        
+        /* PAGE */
         .comic-page {
-            width: 400px; height: 600px; background: #2a2a2a; position: relative;
-            border: 4px solid #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.5); user-select: none;
+            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;
+            overflow: hidden; /* Clean edges */
         }
+
+        /* 2x2 GRID LOGIC */
         .comic-grid {
-            width: 100%; height: 100%; position: relative;
-            --split-t: 45%; --split-b: 55%;
+            width: 100%; height: 100%;
+            position: relative;
+            background: #000; /* Gutter color */
+            --x: 50%;
+            --y: 50%;
         }
+
         .panel {
-            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
-            overflow: hidden; pointer-events: none;
+            position: absolute;
+            overflow: hidden;
+            background: #333;
+            border: 2px solid black; /* Inner borders */
+            box-sizing: border-box;
         }
-        .panel img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: auto; }
-        .panel:nth-child(1) { z-index: 5; clip-path: polygon(0 0, var(--split-t) 0, var(--split-b) 100%, 0 100%); border-right: 1px solid black; }
-        .panel:nth-child(2) { z-index: 4; clip-path: polygon(var(--split-t) 0, 100% 0, 100% 100%, var(--split-b) 100%); }
-        .split-handle {
-            position: absolute; width: 20px; height: 20px; background: #3498db; border: 3px solid white; border-radius: 50%;
-            z-index: 999; cursor: ew-resize; transform: translate(-50%, -50%); box-shadow: 0 2px 5px rgba(0,0,0,0.5); pointer-events: auto;
+
+        .panel img {
+            width: 100%; height: 100%;
+            object-fit: cover;
+            pointer-events: auto; /* Allow image dragging if added later */
+        }
+
+        /* POSITIONS BASED ON CSS VARIABLES */
+        /* Top Left */
+        .panel:nth-child(1) { left: 0; top: 0; width: var(--x); height: var(--y); }
+        /* Top Right */
+        .panel:nth-child(2) { left: var(--x); top: 0; width: calc(100% - var(--x)); height: var(--y); }
+        /* Bottom Left */
+        .panel:nth-child(3) { left: 0; top: var(--y); width: var(--x); height: calc(100% - var(--y)); }
+        /* Bottom Right */
+        .panel:nth-child(4) { left: var(--x); top: var(--y); width: calc(100% - var(--x)); height: calc(100% - var(--y)); }
+
+        /* CENTRAL HANDLE */
+        .grid-handle {
+            position: absolute;
+            width: 30px; height: 30px;
+            background: #e74c3c;
+            border: 3px 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;
         }
-        .split-handle.top { top: 0%; left: var(--split-t); margin-top: -10px; }
-        .split-handle.bottom { top: 100%; left: var(--split-b); margin-top: 10px; }
+        .grid-handle:hover { transform: translate(-50%, -50%) scale(1.1); }
+
+        /* BUBBLES */
         .bubble {
-            position: absolute; background: white; color: black; padding: 10px;
-            border-radius: 12px; min-width: 80px; text-align: center;
-            font-size: 14px; font-weight: bold; cursor: move; z-index: 100;
-            border: 2px solid #000; box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
-            top: 50%; left: 50%; transform: translate(-50%, -50%);
+            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;
+            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;
+        }
+
+        /* 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);
         }
     </style>
 </head>
 <body>
-<div id="app">
-    <div id="upload-screen">
-        <div class="upload-box">
-            <h1>🎬 Vertical Video to Comic</h1>
-            <p>Select a video file to generate panels.</p>
-            <input type="file" id="fileIn" accept="video/*"><br><br>
-            <label>Pages:</label> <input type="number" id="pgCount" value="2" min="1" max="5" style="width:50px;"><br><br>
-            <button onclick="startProcess()">Generate Comic</button>
-            <p id="statusMsg" style="color:#aaa; margin-top:10px;"></p>
-        </div>
+
+<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>
+        <label>Pages:</label> <input type="number" id="pgCount" value="1" min="1" max="5" style="width:50px;">
+        <br>
+        <button onclick="startUpload()">Generate</button>
+        <p id="status" style="color: #bbb; margin-top:10px;"></p>
     </div>
-    <div id="editor-area">
-        <h2>Drag the Blue Dots to tilt the line!</h2>
-        <div class="controls" style="margin-bottom: 20px; display: flex; gap: 10px; justify-content: center;">
-            <button onclick="addBubble()">+ Bubble</button>
-            <button onclick="downloadAll()">Download Pages</button>
-            <button style="background:#444" onclick="location.reload()">Start Over</button>
-        </div>
-        <div class="pages-container" id="comic-container"></div>
+</div>
+
+<div id="editor-view">
+    <h2>Adjust the Crosshair 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()">↺ Reset</button>
     </div>
 </div>
+
 <script>
     let sid = 'S' + Date.now();
-    let dragTarget = null, activeItem = null;
+    let dragItem = null; // 'handle' or 'bubble'
+    let activeEl = null;
 
-    async function startProcess() {
+    async function startUpload() {
         let f = document.getElementById('fileIn').files[0];
-        if(!f) return alert("Select a video!");
+        if(!f) return alert("Select a video.");
+        
         let fd = new FormData();
         fd.append('file', f);
-        fd.append('target_pages', document.getElementById('pgCount').value);
-        document.getElementById('statusMsg').innerText = "Uploading & Processing...";
-        let r = await fetch(`/uploader?sid=${sid}`, { method:'POST', body:fd });
-        if(r.ok) trackStatus(); else alert("Upload failed");
+        fd.append('pages', document.getElementById('pgCount').value);
+        
+        document.getElementById('status').innerText = "Uploading & Processing (GPU)...";
+        
+        let r = await fetch(`/upload?sid=${sid}`, {method:'POST', body:fd});
+        if(r.ok) monitorStatus();
     }
-    function trackStatus() {
-        let tmr = setInterval(async () => {
+
+    function monitorStatus() {
+        let t = setInterval(async () => {
             let r = await fetch(`/status?sid=${sid}`);
             let d = await r.json();
-            document.getElementById('statusMsg').innerText = d.message;
-            if(d.progress >= 100 || d.progress == -1) {
-                clearInterval(tmr);
-                if(d.progress == 100) loadEditor();
+            document.getElementById('status').innerText = d.message;
+            if(d.progress === 100) {
+                clearInterval(t);
+                loadEditor();
             }
-        }, 1500);
+        }, 1000);
     }
+
     async function loadEditor() {
-        document.getElementById('upload-screen').style.display='none';
-        document.getElementById('editor-area').style.display='block';
-        let r = await fetch(`/output/pages.json?sid=${sid}`);
-        let pages = await r.json();
-        let con = document.getElementById('comic-container');
+        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 = '';
-        pages.forEach((pg, i) => {
-            let div = document.createElement('div'); div.className = 'comic-page';
-            let grid = document.createElement('div'); grid.className = 'comic-grid';
-            grid.style.setProperty('--split-t', pg.splitT); grid.style.setProperty('--split-b', pg.splitB);
+        
+        data.forEach((pg, i) => {
+            let page = document.createElement('div');
+            page.className = 'comic-page';
+            
+            let grid = document.createElement('div');
+            grid.className = 'comic-grid';
+            // Default split
+            grid.style.setProperty('--x', pg.splitX || '50%');
+            grid.style.setProperty('--y', pg.splitY || '50%');
+            
+            // 4 Panels
             pg.panels.forEach(pan => {
-                let pDiv = document.createElement('div'); pDiv.className = 'panel';
-                let imgPath = `/frames/${pan.image}?sid=${sid}&t=${Date.now()}`;
-                pDiv.innerHTML = `<img src="${imgPath}" onerror="this.style.display='none'">`; 
-                grid.appendChild(pDiv);
+                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()}">`;
+                grid.appendChild(div);
             });
-            grid.appendChild(createHandle('top', grid)); grid.appendChild(createHandle('bottom', grid));
+            
+            // Handle
+            let handle = document.createElement('div');
+            handle.className = 'grid-handle';
+            handle.onmousedown = (e) => {
+                e.stopPropagation();
+                dragItem = 'handle';
+                activeEl = { handle: handle, grid: grid };
+            };
+            grid.appendChild(handle);
+            
+            // Bubbles
             if(pg.bubbles) pg.bubbles.forEach(b => createBubble(b.dialog, grid));
-            div.appendChild(grid); con.appendChild(div);
+            
+            page.appendChild(grid);
+            con.appendChild(page);
         });
     }
-    function createHandle(pos, grid) {
-        let h = document.createElement('div'); h.className = `split-handle ${pos}`;
-        h.onmousedown = (e) => { e.stopPropagation(); dragTarget = 'handle'; activeItem = { el: h, grid: grid, pos: pos }; };
-        return h;
-    }
-    function createBubble(text, parent) {
-        let b = document.createElement('div'); b.className = 'bubble'; b.contentEditable = true; b.innerText = text || "New Text";
-        b.onmousedown = (e) => { if(e.target !== b) return; e.stopPropagation(); dragTarget = 'bubble'; activeItem = b; };
-        let targetParent = parent || document.querySelector('.comic-grid');
-        if(targetParent) targetParent.appendChild(b);
+
+    function createBubble(txt, parent) {
+        let b = document.createElement('div');
+        b.className = 'bubble';
+        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;
+        };
+        
+        if(!parent) parent = document.querySelector('.comic-grid');
+        parent.appendChild(b);
     }
-    window.addBubble = () => createBubble("Text Here");
+    
+    window.addBubble = () => createBubble("New Text");
+
+    // DRAGGING LOGIC
     document.addEventListener('mousemove', (e) => {
-        if(!dragTarget) return;
-        if(dragTarget === 'handle') {
-            let rect = activeItem.grid.getBoundingClientRect(); let rx = e.clientX - rect.left;
-            let pct = (rx / rect.width) * 100; pct = Math.max(0, Math.min(100, pct));
-            if(activeItem.pos === 'top') activeItem.grid.style.setProperty('--split-t', pct+'%');
-            else activeItem.grid.style.setProperty('--split-b', pct+'%');
-        } else if(dragTarget === 'bubble') {
-            let rect = activeItem.parentElement.getBoundingClientRect();
-            let x = e.clientX - rect.left; let y = e.clientY - rect.top;
-            activeItem.style.left = x + 'px'; activeItem.style.top = y + 'px';
+        if(!dragItem) return;
+        
+        if(dragItem === 'handle') {
+            let rect = activeEl.grid.getBoundingClientRect();
+            let x = e.clientX - rect.left;
+            let y = e.clientY - rect.top;
+            
+            // 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));
+            
+            activeEl.grid.style.setProperty('--x', px + '%');
+            activeEl.grid.style.setProperty('--y', py + '%');
+        }
+        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';
         }
     });
-    document.addEventListener('mouseup', () => { dragTarget = null; activeItem = null; });
+
+    document.addEventListener('mouseup', () => {
+        dragItem = null;
+        activeEl = null;
+    });
+
     window.downloadAll = async () => {
         let pgs = document.querySelectorAll('.comic-page');
         for(let i=0; i<pgs.length; i++) {
-            let handles = pgs[i].querySelectorAll('.split-handle'); handles.forEach(h => h.style.display='none');
+            // Hide handles for screenshot
+            let handles = pgs[i].querySelectorAll('.grid-handle');
+            handles.forEach(h => h.style.display = 'none');
+            
             let url = await htmlToImage.toPng(pgs[i]);
-            let a = document.createElement('a'); a.download = `page_${i+1}.png`; a.href = url; a.click();
-            handles.forEach(h => h.style.display='block');
+            let a = document.createElement('a');
+            a.download = `comic_page_${i+1}.png`;
+            a.href = url;
+            a.click();
+            
+            handles.forEach(h => h.style.display = 'block');
         }
     };
 </script>
@@ -305,28 +453,30 @@ INDEX_HTML = '''
 def index():
     return INDEX_HTML
 
-@app.route('/uploader', methods=['POST'])
-def uploader():
+@app.route('/upload', methods=['POST'])
+def upload():
     sid = request.args.get('sid')
     f = request.files['file']
-    pages = request.form.get('target_pages', 2)
-    gen = EnhancedComicGenerator(sid)
-    f.save(gen.video_path)
-    threading.Thread(target=gen.run, args=(pages,)).start()
-    return jsonify({'success':True})
+    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})
 
 @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-cache, no-store, must-revalidate"
+    resp.headers['Cache-Control'] = 'no-store'
     return resp
 
 @app.route('/output/<path:filename>')
@@ -335,10 +485,5 @@ def output(filename):
     return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
 
 if __name__ == '__main__':
-    # CRITICAL: Call the warmup function to initialize the GPU environment
-    try:
-        gpu_warmup()
-    except Exception as e:
-        print(f"GPU warmup failed: {e}")
-    
+    # Standard HF Spaces port
     app.run(host='0.0.0.0', port=7860)