Update app_enhanced.py

app_enhanced.py

@@ -1,4 +1,4 @@
-import spaces
+import spaces  # <--- CRITICAL: MUST BE THE FIRST LINE
 import os
 import threading
 import json
@@ -6,14 +6,24 @@ import traceback
 import shutil
 import cv2
 import numpy as np
+import torch
 from flask import Flask, jsonify, request, send_from_directory, send_file
 
 # ======================================================
-# 🔧 CONFIGURATION & SETUP
+# 🚀 ZEROGPU WARMUP (FIXES RUNTIME ERROR)
+# ======================================================
+@spaces.GPU
+def gpu_warmup():
+    """Dummy function to trigger ZeroGPU detection at startup."""
+    print(f"✅ GPU Warmup: CUDA Available = {torch.cuda.is_available()}")
+    return True
+
+# ======================================================
+# 🔧 CONFIGURATION
 # ======================================================
 app = Flask(__name__)
 
-# Check for persistent storage (Hugging Face Spaces specific)
+# Persistent storage check
 if os.path.exists('/data'):
     BASE_STORAGE_PATH = '/data'
 else:
@@ -23,20 +33,21 @@ BASE_USER_DIR = os.path.join(BASE_STORAGE_PATH, "userdata")
 os.makedirs(BASE_USER_DIR, exist_ok=True)
 
 # ======================================================
-# 🧠 GPU / BACKEND LOGIC
+# 🧠 BACKEND LOGIC
 # ======================================================
 
 def create_placeholder_image(text, filename, output_dir):
     """Creates a backup image if video fails to read."""
-    img = np.zeros((600, 600, 3), dtype=np.uint8)
-    img[:] = (40, 40, 40) # Dark gray
+    # Create dark grey image
+    img = np.zeros((800, 800, 3), dtype=np.uint8)
+    img[:] = (40, 40, 40) 
     
-    # Text
+    # Add text
     font = cv2.FONT_HERSHEY_SIMPLEX
-    cv2.putText(img, text, (50, 300), font, 1.5, (200, 200, 200), 2, cv2.LINE_AA)
+    cv2.putText(img, text, (50, 400), font, 1.5, (200, 200, 200), 3, cv2.LINE_AA)
     
-    # Border
-    cv2.rectangle(img, (0,0), (600,600), (100,100,100), 10)
+    # Add border
+    cv2.rectangle(img, (0,0), (800,800), (100,100,100), 20)
     
     path = os.path.join(output_dir, filename)
     cv2.imwrite(path, img)
@@ -45,9 +56,9 @@ def create_placeholder_image(text, filename, output_dir):
 @spaces.GPU(duration=120)
 def generate_comic_gpu(video_path, frames_dir, target_pages):
     """
-    Extracts frames for a 4-panel layout (2x2 grid).
-    Target: 4 frames per page.
+    Extracts 4 frames per page (2x2 Grid).
     """
+    print(f"🚀 Starting GPU generation for {video_path}")
     
     # 1. Setup
     if os.path.exists(frames_dir): shutil.rmtree(frames_dir)
@@ -67,7 +78,7 @@ def generate_comic_gpu(video_path, frames_dir, target_pages):
 
     # 2. Calculate frames needed (4 per page)
     panels_per_page = 4
-    total_panels_needed = target_pages * panels_per_page
+    total_panels_needed = int(target_pages) * panels_per_page
     
     frame_files_ordered = []
     
@@ -86,6 +97,7 @@ def generate_comic_gpu(video_path, frames_dir, target_pages):
                 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
@@ -106,7 +118,7 @@ def generate_comic_gpu(video_path, frames_dir, target_pages):
 
     # 4. Build Page Data
     pages_data = []
-    for i in range(target_pages):
+    for i in range(int(target_pages)):
         start = i * panels_per_page
         end = start + panels_per_page
         p_frames = frame_files_ordered[start:end]
@@ -121,7 +133,7 @@ def generate_comic_gpu(video_path, frames_dir, target_pages):
         
         pg_bubbles = []
         if i == 0:
-            pg_bubbles.append({'dialog': "Drag the CENTER DOT\nto adjust grid!", 'x': 50, 'y': 50})
+            pg_bubbles.append({'dialog': "Drag the RED DOT\nto resize panels!", 'x': '50%', 'y': '50%'})
 
         pages_data.append({
             'panels': pg_panels,
@@ -147,7 +159,7 @@ class ComicGenHost:
     def run(self, pages):
         try:
             self.write_status("Generating...", 30)
-            data = generate_comic_gpu(self.video_path, self.frames_dir, int(pages))
+            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)
@@ -170,24 +182,24 @@ INDEX_HTML = '''
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>4-Panel Comic Generator</title>
+    <title>4-Panel Adjustable Comic</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; }
         
-        /* UPLOAD */
+        /* UPLOAD SCREEN */
         #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; }
+        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:hover { background: #c0392b; }
         input { padding: 10px; margin: 5px; border-radius: 4px; border: 1px solid #555; background: #333; color: white; }
 
-        /* EDITOR */
+        /* EDITOR SCREEN */
         #editor-view { display: none; padding: 20px; }
-        .comic-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin-top: 20px; }
+        .comic-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin-top: 20px; padding-bottom: 80px; }
         
-        /* PAGE */
+        /* COMIC PAGE STYLE */
         .comic-page {
             width: 600px; height: 800px;
             background: white;
@@ -195,46 +207,47 @@ INDEX_HTML = '''
             position: relative;
             box-shadow: 0 0 20px rgba(0,0,0,0.5);
             user-select: none;
-            overflow: hidden; /* Clean edges */
+            overflow: hidden; 
         }
 
         /* 2x2 GRID LOGIC */
         .comic-grid {
             width: 100%; height: 100%;
             position: relative;
-            background: #000; /* Gutter color */
+            background: #000; /* The "Gap" color */
             --x: 50%;
             --y: 50%;
+            --gap: 4px; /* Thickness of divider */
         }
 
         .panel {
             position: absolute;
             overflow: hidden;
             background: #333;
-            border: 2px solid black; /* Inner borders */
             box-sizing: border-box;
+            border: 2px solid #000;
         }
 
         .panel img {
             width: 100%; height: 100%;
             object-fit: cover;
-            pointer-events: auto; /* Allow image dragging if added later */
+            pointer-events: auto; 
         }
 
-        /* POSITIONS BASED ON CSS VARIABLES */
+        /* DYNAMIC PANEL SIZING */
         /* Top Left */
-        .panel:nth-child(1) { left: 0; top: 0; width: var(--x); height: var(--y); }
+        .panel:nth-child(1) { left: 0; top: 0; width: calc(var(--x) - var(--gap)/2); height: calc(var(--y) - var(--gap)/2); }
         /* Top Right */
-        .panel:nth-child(2) { left: var(--x); top: 0; width: calc(100% - var(--x)); height: var(--y); }
+        .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); }
         /* Bottom Left */
-        .panel:nth-child(3) { left: 0; top: var(--y); width: var(--x); height: calc(100% - var(--y)); }
+        .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); }
         /* Bottom Right */
-        .panel:nth-child(4) { left: var(--x); top: var(--y); width: calc(100% - var(--x)); height: calc(100% - var(--y)); }
+        .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); }
 
-        /* CENTRAL HANDLE */
+        /* CENTRAL HANDLE (RED DOT) */
         .grid-handle {
             position: absolute;
-            width: 30px; height: 30px;
+            width: 24px; height: 24px;
             background: #e74c3c;
             border: 3px solid white;
             border-radius: 50%;
@@ -245,7 +258,7 @@ INDEX_HTML = '''
             box-shadow: 0 4px 10px rgba(0,0,0,0.5);
             pointer-events: auto;
         }
-        .grid-handle:hover { transform: translate(-50%, -50%) scale(1.1); }
+        .grid-handle:hover { transform: translate(-50%, -50%) scale(1.2); }
 
         /* BUBBLES */
         .bubble {
@@ -272,6 +285,7 @@ INDEX_HTML = '''
             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);
         }
+        .toolbar button { margin-top: 0; font-size: 14px; }
     </style>
 </head>
 <body>
@@ -283,25 +297,25 @@ INDEX_HTML = '''
         <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>
+        <button onclick="startUpload()">🚀 Generate</button>
         <p id="status" style="color: #bbb; margin-top:10px;"></p>
     </div>
 </div>
 
 <div id="editor-view">
-    <h2>Adjust the Crosshair to resize panels!</h2>
+    <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()">↺ Reset</button>
+        <button style="background:#555" onclick="location.reload()">↺ New</button>
     </div>
 </div>
 
 <script>
     let sid = 'S' + Date.now();
-    let dragItem = null; // 'handle' or 'bubble'
+    let dragItem = null; 
     let activeEl = null;
 
     async function startUpload() {
@@ -312,7 +326,7 @@ INDEX_HTML = '''
         fd.append('file', f);
         fd.append('pages', document.getElementById('pgCount').value);
         
-        document.getElementById('status').innerText = "Uploading & Processing (GPU)...";
+        document.getElementById('status').innerText = "Uploading & Processing...";
         
         let r = await fetch(`/upload?sid=${sid}`, {method:'POST', body:fd});
         if(r.ok) monitorStatus();
@@ -346,7 +360,6 @@ INDEX_HTML = '''
             
             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%');
             
@@ -392,7 +405,7 @@ INDEX_HTML = '''
         };
         
         if(!parent) parent = document.querySelector('.comic-grid');
-        parent.appendChild(b);
+        if(parent) parent.appendChild(b);
     }
     
     window.addBubble = () => createBubble("New Text");
@@ -428,7 +441,6 @@ INDEX_HTML = '''
     window.downloadAll = async () => {
         let pgs = document.querySelectorAll('.comic-page');
         for(let i=0; i<pgs.length; i++) {
-            // Hide handles for screenshot
             let handles = pgs[i].querySelectorAll('.grid-handle');
             handles.forEach(h => h.style.display = 'none');
             
@@ -485,5 +497,10 @@ def output(filename):
     return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
 
 if __name__ == '__main__':
-    # Standard HF Spaces port
+    # 🚀 EXPLICIT WARMUP CALL TO REGISTER FUNCTION
+    try:
+        gpu_warmup()
+    except Exception as e:
+        print(f"⚠️ Warmup ignored (Normal if not on GPU yet): {e}")
+
     app.run(host='0.0.0.0', port=7860)