Update app_enhanced.py

app_enhanced.py

@@ -1,123 +1,144 @@
-import spaces  # <--- CRITICAL: MUST BE THE FIRST IMPORT
+import spaces
 import os
-import time
 import threading
 import json
 import traceback
-import logging
-import string
-import random
 import shutil
 import cv2
-import math
 import numpy as np
-import srt
 from flask import Flask, jsonify, request, send_from_directory, send_file
 
 # ======================================================
-# 🚀 ZEROGPU CONFIGURATION
+# 🔧 CONFIGURATION
 # ======================================================
-@spaces.GPU
-def gpu_warmup():
-    import torch
-    print(f"✅ ZeroGPU Warmup: CUDA Available: {torch.cuda.is_available()}")
-    return True
+app = Flask(__name__)
 
-# ======================================================
-# 💾 PERSISTENT STORAGE CONFIGURATION
-# ======================================================
+# Persistent storage check (for Hugging Face Spaces)
 if os.path.exists('/data'):
     BASE_STORAGE_PATH = '/data'
-    print("✅ Using Persistent Storage at /data")
 else:
     BASE_STORAGE_PATH = '.'
-    print("⚠️ Using Ephemeral Storage")
 
 BASE_USER_DIR = os.path.join(BASE_STORAGE_PATH, "userdata")
 os.makedirs(BASE_USER_DIR, exist_ok=True)
 
 # ======================================================
-# 🔧 APP CONFIG
+# 🧠 BACKEND LOGIC
 # ======================================================
-app = Flask(__name__)
+def create_placeholder_image(text, filename, output_dir):
+    """Creates a dummy image if video extraction fails"""
+    # Create a dark blue image
+    img = np.zeros((600, 400, 3), dtype=np.uint8)
+    img[:] = (50, 50, 50) # Dark gray background
+    
+    # Add text
+    font = cv2.FONT_HERSHEY_SIMPLEX
+    cv2.putText(img, text, (50, 300), font, 1, (255, 255, 255), 2, cv2.LINE_AA)
+    
+    # Draw an X to show it's a placeholder
+    cv2.line(img, (0,0), (400,600), (100,100,100), 2)
+    cv2.line(img, (400,0), (0,600), (100,100,100), 2)
+    
+    path = os.path.join(output_dir, filename)
+    cv2.imwrite(path, img)
+    return filename
 
-# ======================================================
-# 🧠 CORE LOGIC (SIMPLIFIED FOR ROBUSTNESS)
-# ======================================================
-@spaces.GPU(duration=300)
-def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages, panels_per_page_req):
-    import cv2
-    import numpy as np
+@spaces.GPU(duration=120)
+def generate_comic_gpu(video_path, frames_dir, target_pages):
+    """Extracts frames from video. Uses placeholders if extraction fails."""
     
-    # 1. Setup
+    # 1. Clean/Create Directory
     if os.path.exists(frames_dir): shutil.rmtree(frames_dir)
     os.makedirs(frames_dir, exist_ok=True)
     
-    # 2. Extract Frames
+    # 2. Try to Open Video
     cap = cv2.VideoCapture(video_path)
-    fps = cap.get(cv2.CAP_PROP_FPS) or 25
-    total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
-    duration = total_frames / fps
     
-    # Default to 2 panels per page (Split layout)
-    panels_per_page = 2
-    total_panels = target_pages * panels_per_page
+    total_frames = 0
+    duration = 0
+    fps = 25
     
-    # Pick timestamps
-    times = np.linspace(1, duration - 1, total_panels)
+    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.")
+
+    # 3. Determine Layout (2 panels per page)
+    panels_per_page = 2
+    total_panels_needed = target_pages * panels_per_page
     
     frame_files_ordered = []
-    frame_metadata = {}
     
-    for i, t in enumerate(times):
-        cap.set(cv2.CAP_PROP_POS_MSEC, t * 1000)
-        ret, frame = cap.read()
-        if ret:
-            fname = f"frame_{i:04d}.png"
-            # Resize for vertical quality
-            h, w = frame.shape[:2]
-            if w > h: # If landscape, crop center
-                center = w // 2
-                start = center - (h // 2)
-                frame = frame[:, start:start+h]
+    # 4. Extract Frames
+    if duration > 0 and total_frames > 0:
+        # Generate timestamps
+        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()
             
-            p = os.path.join(frames_dir, fname)
-            cv2.imwrite(p, frame)
+            fname = f"frame_{i:04d}.png"
             
-            frame_metadata[fname] = {'dialogue': "Edit Text", 'time': t}
+            if ret and frame is not None:
+                # Crop logic: Keep center vertical strip if landscape
+                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] # Crop to square/vertical
+                
+                # Resize to standard height for consistency
+                # frame = cv2.resize(frame, (500, 750))
+                
+                p = os.path.join(frames_dir, fname)
+                cv2.imwrite(p, frame)
+                frame_files_ordered.append(fname)
+            else:
+                # Fallback if specific frame read fails
+                create_placeholder_image(f"Error {t:.1f}s", fname, frames_dir)
+                frame_files_ordered.append(fname)
+        cap.release()
+    else:
+        # Fallback if video totally failed
+        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)
-            
-    cap.release()
-    
-    # 3. Build Page Structure
-    pages = []
+
+    # 5. Build Page JSON
+    pages_data = []
     for i in range(target_pages):
-        start_idx = i * panels_per_page
-        current_frames = frame_files_ordered[start_idx : start_idx + panels_per_page]
+        start = i * panels_per_page
+        end = start + panels_per_page
+        p_frames = frame_files_ordered[start:end]
         
-        # Create Page Object
-        pg_panels = [{'image': f} for f in current_frames]
-        # Add a default bubble to the first panel of each page
-        pg_bubbles = []
-        if len(pg_panels) > 0:
-            pg_bubbles.append({
-                'dialog': "Your text here...", 
-                'type': 'speech', 
-                'layout_idx': 0 # Belongs to first panel
-            })
+        # Ensure we have enough frames for the page
+        while len(p_frames) < 2:
+            fname = f"extra_{i}.png"
+            create_placeholder_image("Extra", fname, frames_dir)
+            p_frames.append(fname)
             
-        pages.append({
+        pg_panels = [
+            {'image': p_frames[0]},
+            {'image': p_frames[1]}
+        ]
+        
+        pg_bubbles = []
+        if i == 0: # Add intro bubble
+            pg_bubbles.append({'dialog': "Drag the Blue Dots\nto tilt the split!", 'type': 'speech'})
+
+        pages_data.append({
             'panels': pg_panels,
             'bubbles': pg_bubbles,
-            'splitT': '45%', # Default top split position
-            'splitB': '55%'  # Default bottom split position
+            'splitT': '45%', 
+            'splitB': '55%'
         })
 
-    return pages
+    return pages_data
 
-# ======================================================
-# 💻 BACKEND CLASS
-# ======================================================
 class EnhancedComicGenerator:
     def __init__(self, sid):
         self.sid = sid
@@ -125,17 +146,18 @@ class EnhancedComicGenerator:
         self.video_path = os.path.join(self.user_dir, 'uploaded.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)
-        self.metadata_path = os.path.join(self.frames_dir, 'frame_metadata.json')
 
-    def run(self, target_pages, panels_per_page):
+    def run(self, target_pages):
         try:
-            self.write_status("Generating Frames...", 10)
-            data = generate_comic_gpu(self.video_path, self.user_dir, self.frames_dir, self.metadata_path, int(target_pages), int(panels_per_page))
+            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)
         except Exception as e:
             traceback.print_exc()
@@ -146,7 +168,7 @@ class EnhancedComicGenerator:
             json.dump({'message': msg, 'progress': prog}, f)
 
 # ======================================================
-# 🌐 HTML FRONTEND
+# 🌐 FRONTEND HTML
 # ======================================================
 INDEX_HTML = '''
 <!DOCTYPE html>
@@ -154,402 +176,319 @@ INDEX_HTML = '''
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vertical Split Comic Generator</title>
+    <title>Vertical Comic Splitter</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&family=Comic+Neue:wght@700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap" rel="stylesheet">
     <style>
-        body { background: #222; font-family: 'Comic Neue', cursive; margin: 0; color: white; }
+        body { background: #1a1a1a; font-family: 'Comic Neue', sans-serif; margin: 0; color: #eee; }
+        
+        /* LAYOUT */
+        #app { max-width: 1200px; margin: 0 auto; padding: 20px; text-align: center; }
         
-        /* UPLOAD SCREEN */
-        #upload-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; }
-        .box { background: #333; padding: 40px; border-radius: 10px; text-align: center; }
-        .btn { padding: 10px 20px; background: #e67e22; border: none; color: white; cursor: pointer; font-size: 18px; border-radius: 5px; margin-top: 10px; }
-        .btn:hover { background: #d35400; }
-        input[type=file] { margin-bottom: 20px; }
-
-        /* EDITOR SCREEN */
-        #editor-container { display: none; padding: 20px; text-align: center; }
+        /* UPLOAD */
+        .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; }
         
-        .comic-wrapper { 
-            display: flex; 
-            flex-direction: row; 
-            flex-wrap: wrap; 
-            justify-content: center; 
-            gap: 40px; 
-            padding-bottom: 100px;
+        /* COMIC AREA */
+        #editor-area { display: none; }
+        
+        .pages-container { 
+            display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 30px; 
         }
 
-        /* PAGE CONTAINER */
+        /* PAGE - The container for one comic page */
         .comic-page {
-            width: 400px; /* Reduced width for preview */
-            height: 600px;
-            background: black;
+            width: 400px; height: 600px;
+            background: #2a2a2a; /* Grey background so you can see if image is missing */
             position: relative;
-            border: 4px solid white;
-            box-shadow: 0 0 20px rgba(0,0,0,0.5);
-            overflow: visible; /* Allow handles to stick out */
+            border: 4px solid #fff;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
             user-select: none;
         }
 
-        /* THE GRID HOLDER */
+        /* GRID - Holds panels and handles CSS vars */
         .comic-grid {
-            width: 100%;
-            height: 100%;
-            position: relative;
-            /* Default split variables */
+            width: 100%; height: 100%; position: relative;
             --split-t: 45%; 
             --split-b: 55%;
         }
 
-        /* PANELS - CLIPPED */
+        /* PANELS */
         .panel {
-            position: absolute;
-            top: 0; left: 0;
-            width: 100%; height: 100%;
-            overflow: hidden;
-            pointer-events: none; /* Let clicks pass through to bubbles/handles if needed */
+            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            overflow: hidden; pointer-events: none;
         }
         
         .panel img {
-            width: 100%; height: 100%;
-            object-fit: cover;
-            pointer-events: auto; /* Re-enable pointer events for dragging image if needed */
+            width: 100%; height: 100%; object-fit: cover;
+            display: block; /* Removes tiny gaps */
+            pointer-events: auto; /* Allow dragging checks later if needed */
         }
 
-        /* Left/Top Panel */
+        /* CLIP PATHS */
+        /* Panel 1 (Left) */
         .panel:nth-child(1) {
-            z-index: 2;
+            z-index: 5;
             clip-path: polygon(0 0, var(--split-t) 0, var(--split-b) 100%, 0 100%);
-            border-right: 2px solid black; /* Fake border */
+            border-right: 1px solid black; 
         }
-
-        /* Right/Bottom Panel */
+        /* Panel 2 (Right) */
         .panel:nth-child(2) {
-            z-index: 1;
+            z-index: 4;
             clip-path: polygon(var(--split-t) 0, 100% 0, 100% 100%, var(--split-b) 100%);
         }
 
-        /* DRAG HANDLES FOR SPLIT LINE */
+        /* HANDLES (Blue Dots) */
         .split-handle {
-            position: absolute;
-            width: 24px; height: 24px;
-            background: #2196F3;
-            border: 2px solid white;
-            border-radius: 50%;
-            transform: translate(-50%, -50%);
-            cursor: col-resize;
-            z-index: 999;
+            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;
         }
-        
-        /* Top Handle */
-        .split-handle.top { top: 0%; left: var(--split-t); margin-top: -12px; }
-        /* Bottom Handle */
-        .split-handle.bottom { top: 100%; left: var(--split-b); margin-top: 12px; }
-
-        /* LINE VISUALIZATION */
-        .split-line-visual {
-            position: absolute; top:0; left:0; width:100%; height:100%;
-            pointer-events: none; z-index: 10;
-            background: transparent;
-        }
+        .split-handle.top { top: 0%; left: var(--split-t); margin-top: -10px; }
+        .split-handle.bottom { top: 100%; left: var(--split-b); margin-top: 10px; }
 
         /* BUBBLES */
-        .speech-bubble {
-            position: absolute;
-            background: white; color: black;
-            padding: 10px; border-radius: 10px;
-            min-width: 80px; text-align: center;
-            font-family: 'Comic Neue'; font-weight: bold;
-            cursor: move; z-index: 100;
-            border: 2px solid black;
-            transform: translate(-50%, -50%);
-        }
-        
-        .speech-bubble:after {
-            content: ''; position: absolute; bottom: -10px; left: 50%;
-            border-width: 10px 10px 0; border-style: solid;
-            border-color: black transparent; display: block; width: 0;
-        }
-        
-        .speech-bubble:before {
-            content: ''; position: absolute; bottom: -6px; left: 50%;
-            border-width: 10px 10px 0; border-style: solid;
-            border-color: white transparent; display: block; width: 0; z-index: 1;
-        }
-
-        /* CONTROLS */
-        .controls {
-            position: fixed; bottom: 0; left: 0; width: 100%;
-            background: #333; padding: 15px; display: flex;
-            justify-content: center; gap: 20px; z-index: 1000;
+        .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%);
         }
     </style>
 </head>
 <body>
 
-<!-- UPLOAD -->
-<div id="upload-container">
-    <div class="box">
-        <h1>🎬 Vertical Split Comic</h1>
-        <input type="file" id="file-upload" accept="video/*"><br>
-        <label>Pages:</label> <input type="number" id="page-count" value="2" min="1" max="5" style="width:50px;">
-        <button class="btn" onclick="startUpload()">Generate Comic</button>
-        <p id="status" style="margin-top:10px; color:#aaa;"></p>
+<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>
-</div>
 
-<!-- EDITOR -->
-<div id="editor-container">
-    <h2>Adjust the Split Line by Dragging the Blue Dots</h2>
-    <div class="comic-wrapper" id="comic-container"></div>
-    
-    <div class="controls">
-        <button class="btn" onclick="addBubble()">+ Text Bubble</button>
-        <button class="btn" onclick="downloadAll()">Download Images</button>
-        <button class="btn" style="background:#c0392b" onclick="location.reload()">Reset</button>
+    <div id="editor-area">
+        <h2>Drag the Blue Dots to tilt the line!</h2>
+        <div class="controls">
+            <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>
 
 <script>
-    let sid = 'S' + Math.floor(Math.random()*100000);
-    let isDraggingHandle = false;
-    let activeHandle = null; // { element: domNode, type: 'top'|'bottom', grid: domNode }
+    let sid = 'S' + Date.now();
     
-    let isDraggingBubble = false;
-    let activeBubble = null;
-    let offset = {x:0, y:0};
-
-    // 1. UPLOAD LOGIC
-    async function startUpload() {
-        const file = document.getElementById('file-upload').files[0];
-        if(!file) return alert("Please select a file");
+    // DRAG STATE
+    let dragTarget = null; // 'handle' or 'bubble'
+    let activeItem = null;
+    let dragData = {};
+
+    async function startProcess() {
+        let f = document.getElementById('fileIn').files[0];
+        if(!f) return alert("Select a video!");
         
-        const pages = document.getElementById('page-count').value;
-        const fd = new FormData();
-        fd.append('file', file);
-        fd.append('target_pages', pages);
-        fd.append('panels_per_page', 2); // FORCE 2 PANELS
+        let fd = new FormData();
+        fd.append('file', f);
+        fd.append('target_pages', document.getElementById('pgCount').value);
         
-        document.querySelector('.box').style.display = 'none';
-        document.getElementById('status').innerText = "Uploading...";
+        document.getElementById('statusMsg').innerText = "Uploading & Processing...";
         
-        const res = await fetch(`/uploader?sid=${sid}`, { method: 'POST', body: fd });
-        if(res.ok) {
-            checkStatus();
-        }
+        // 1. Upload
+        let r = await fetch(`/uploader?sid=${sid}`, { method:'POST', body:fd });
+        if(r.ok) trackStatus();
+        else alert("Upload failed");
     }
 
-    async function checkStatus() {
-        const interval = setInterval(async () => {
-            const res = await fetch(`/status?sid=${sid}`);
-            const data = await res.json();
-            document.getElementById('status').innerText = data.message;
+    function trackStatus() {
+        let tmr = setInterval(async () => {
+            let r = await fetch(`/status?sid=${sid}`);
+            let d = await r.json();
+            document.getElementById('statusMsg').innerText = d.message;
             
-            if(data.progress >= 100) {
-                clearInterval(interval);
-                loadComic();
+            if(d.progress >= 100 || d.progress == -1) {
+                clearInterval(tmr);
+                if(d.progress == 100) loadEditor();
             }
         }, 1000);
     }
 
-    // 2. RENDER COMIC
-    async function loadComic() {
-        document.getElementById('upload-container').style.display = 'none';
-        document.getElementById('editor-container').style.display = 'block';
+    async function loadEditor() {
+        document.getElementById('upload-screen').style.display='none';
+        document.getElementById('editor-area').style.display='block';
         
-        const res = await fetch(`/output/pages.json?sid=${sid}`);
-        const pages = await res.json();
+        let r = await fetch(`/output/pages.json?sid=${sid}`);
+        let pages = await r.json();
         
-        const container = document.getElementById('comic-container');
-        container.innerHTML = '';
+        let con = document.getElementById('comic-container');
+        con.innerHTML = '';
         
-        pages.forEach((pageData, idx) => {
-            renderPage(pageData, idx, container);
+        pages.forEach((pg, i) => {
+            // Container
+            let div = document.createElement('div');
+            div.className = 'comic-page';
+            
+            // Grid
+            let grid = document.createElement('div');
+            grid.className = 'comic-grid';
+            grid.style.setProperty('--split-t', pg.splitT);
+            grid.style.setProperty('--split-b', pg.splitB);
+            
+            // Panels
+            pg.panels.forEach(pan => {
+                let pDiv = document.createElement('div');
+                pDiv.className = 'panel';
+                // Add timestamp to force image refresh
+                let imgPath = `/frames/${pan.image}?sid=${sid}&t=${Date.now()}`;
+                pDiv.innerHTML = `<img src="${imgPath}" onerror="this.style.display='none'">`; 
+                grid.appendChild(pDiv);
+            });
+            
+            // Handles
+            let h1 = createHandle('top', grid);
+            let h2 = createHandle('bottom', grid);
+            grid.appendChild(h1);
+            grid.appendChild(h2);
+            
+            // Bubbles
+            if(pg.bubbles) pg.bubbles.forEach(b => createBubble(b.dialog, grid));
+            
+            div.appendChild(grid);
+            con.appendChild(div);
         });
     }
 
-    function renderPage(data, idx, container) {
-        const pageDiv = document.createElement('div');
-        pageDiv.className = 'comic-page';
-        
-        // Grid Container
-        const grid = document.createElement('div');
-        grid.className = 'comic-grid';
-        grid.style.setProperty('--split-t', data.splitT || '45%');
-        grid.style.setProperty('--split-b', data.splitB || '55%');
-        
-        // Panels (Assuming 2 panels always)
-        if(data.panels.length >= 2) {
-            // Panel 1 (Left)
-            const p1 = document.createElement('div');
-            p1.className = 'panel';
-            p1.innerHTML = `<img src="/frames/${data.panels[0].image}?sid=${sid}">`;
-            grid.appendChild(p1);
-
-            // Panel 2 (Right)
-            const p2 = document.createElement('div');
-            p2.className = 'panel';
-            p2.innerHTML = `<img src="/frames/${data.panels[1].image}?sid=${sid}">`;
-            grid.appendChild(p2);
-        }
-
-        // HANDLES
-        const hTop = document.createElement('div');
-        hTop.className = 'split-handle top';
-        hTop.onmousedown = (e) => startDragHandle(e, hTop, 'top', grid);
-        
-        const hBot = document.createElement('div');
-        hBot.className = 'split-handle bottom';
-        hBot.onmousedown = (e) => startDragHandle(e, hBot, 'bottom', grid);
-        
-        grid.appendChild(hTop);
-        grid.appendChild(hBot);
-
-        // BUBBLES
-        if(data.bubbles) {
-            data.bubbles.forEach(b => createBubble(b.dialog, grid));
-        }
-
-        pageDiv.appendChild(grid);
-        container.appendChild(pageDiv);
-    }
-
-    // 3. INTERACTION LOGIC (DRAG HANDLES)
-    function startDragHandle(e, el, type, grid) {
-        e.preventDefault();
-        e.stopPropagation();
-        isDraggingHandle = true;
-        activeHandle = { el, type, grid };
+    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;
     }
 
-    // 4. INTERACTION LOGIC (BUBBLES)
     function createBubble(text, parent) {
-        const b = document.createElement('div');
-        b.className = 'speech-bubble';
+        let b = document.createElement('div');
+        b.className = 'bubble';
         b.contentEditable = true;
-        b.innerText = text;
-        b.style.left = '50%';
-        b.style.top = '50%';
+        b.innerText = text || "New Text";
         
         b.onmousedown = (e) => {
-            if(e.target !== b) return; // Allow text selection
-            e.preventDefault();
-            isDraggingBubble = true;
-            activeBubble = b;
-            offset.x = e.clientX - b.getBoundingClientRect().left - (b.offsetWidth/2);
-            offset.y = e.clientY - b.getBoundingClientRect().top - (b.offsetHeight/2);
+            if(e.target !== b) return; 
+            e.stopPropagation();
+            dragTarget = 'bubble';
+            activeItem = b;
         };
         
-        parent.appendChild(b);
+        if(!parent) {
+            let firstGrid = document.querySelector('.comic-grid');
+            if(firstGrid) firstGrid.appendChild(b);
+        } else {
+            parent.appendChild(b);
+        }
     }
     
-    function addBubble() {
-        const grids = document.querySelectorAll('.comic-grid');
-        if(grids.length > 0) createBubble("New Text", grids[0]);
-    }
+    window.addBubble = () => createBubble("Text Here");
 
-    // GLOBAL MOUSE EVENTS
+    // GLOBAL DRAG HANDLER
     document.addEventListener('mousemove', (e) => {
-        // Handle Dragging
-        if(isDraggingHandle && activeHandle) {
-            const rect = activeHandle.grid.getBoundingClientRect();
-            let relativeX = e.clientX - rect.left;
-            
-            // Constrain
-            if(relativeX < 0) relativeX = 0;
-            if(relativeX > rect.width) relativeX = rect.width;
-            
-            const pct = (relativeX / rect.width) * 100;
+        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(activeHandle.type === 'top') {
-                activeHandle.grid.style.setProperty('--split-t', pct + '%');
-            } else {
-                activeHandle.grid.style.setProperty('--split-b', pct + '%');
-            }
+            if(activeItem.pos === 'top') activeItem.grid.style.setProperty('--split-t', pct+'%');
+            else activeItem.grid.style.setProperty('--split-b', pct+'%');
         }
-
-        // Bubble Dragging
-        if(isDraggingBubble && activeBubble) {
-            const rect = activeBubble.parentElement.getBoundingClientRect();
-            let x = e.clientX - rect.left; // - offset.x;
-            let y = e.clientY - rect.top; // - offset.y;
-            
-            activeBubble.style.left = x + 'px';
-            activeBubble.style.top = y + 'px';
+        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';
         }
     });
 
     document.addEventListener('mouseup', () => {
-        isDraggingHandle = false;
-        activeHandle = null;
-        isDraggingBubble = false;
-        activeBubble = null;
+        dragTarget = null;
+        activeItem = null;
     });
 
-    // 5. EXPORT
-    async function downloadAll() {
-        const pages = document.querySelectorAll('.comic-page');
-        for(let i=0; i<pages.length; i++) {
-            // Hide handles for screenshot
-            const handles = pages[i].querySelectorAll('.split-handle');
-            handles.forEach(h => h.style.display = 'none');
+    window.downloadAll = async () => {
+        let pgs = document.querySelectorAll('.comic-page');
+        for(let i=0; i<pgs.length; i++) {
+            // Hide handles
+            let handles = pgs[i].querySelectorAll('.split-handle');
+            handles.forEach(h => h.style.display='none');
             
-            const dataUrl = await htmlToImage.toPng(pages[i]);
-            const link = document.createElement('a');
-            link.download = `comic_page_${i+1}.png`;
-            link.href = dataUrl;
-            link.click();
+            let url = await htmlToImage.toPng(pgs[i]);
+            let a = document.createElement('a');
+            a.download = `page_${i+1}.png`;
+            a.href = url;
+            a.click();
             
-            // Show handles again
-            handles.forEach(h => h.style.display = 'block');
+            handles.forEach(h => h.style.display='block');
         }
-    }
+    };
 </script>
 </body>
 </html>
 '''
 
 # ======================================================
-# 🚀 FLASK ROUTES
+# 🔌 FLASK ROUTES
 # ======================================================
 @app.route('/')
 def index():
     return INDEX_HTML
 
 @app.route('/uploader', methods=['POST'])
-def upload():
+def uploader():
     sid = request.args.get('sid')
-    target_pages = request.form.get('target_pages', 2)
-    panels_per_page = 2 # Fixed for this specific layout req
-    
     f = request.files['file']
+    pages = request.form.get('target_pages', 2)
+    
     gen = EnhancedComicGenerator(sid)
     f.save(gen.video_path)
     
-    # Run in background
-    threading.Thread(target=gen.run, args=(target_pages, panels_per_page)).start()
-    return jsonify({'success': True})
+    threading.Thread(target=gen.run, args=(pages,)).start()
+    return jsonify({'success':True})
 
 @app.route('/status')
-def get_status():
+def status():
     sid = request.args.get('sid')
-    path = os.path.join(BASE_USER_DIR, sid, 'output', 'status.json')
-    if os.path.exists(path): return send_file(path)
-    return jsonify({'progress': 0, 'message': "Waiting..."})
+    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...'})
 
-@app.route('/output/path:filename')
-def get_output(filename):
+@app.route('/frames/<path:filename>')
+def frames(filename):
     sid = request.args.get('sid')
-    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
+    # Force no-cache headers to prevent black screen on reload
+    resp = send_from_directory(os.path.join(BASE_USER_DIR, sid, 'frames'), filename)
+    resp.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
+    return resp
 
-@app.route('/frames/path:filename')
-def get_frame(filename):
+@app.route('/output/<path:filename>')
+def output(filename):
     sid = request.args.get('sid')
-    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'frames'), filename)
+    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
 
 if __name__ == '__main__':
-    try: gpu_warmup()
-    except: pass
     app.run(host='0.0.0.0', port=7860)