Update app_enhanced.py

app_enhanced.py

@@ -1,12 +1,9 @@
-=import spaces  # <--- CRITICAL: MUST BE THE FIRST IMPORT
+import spaces  # <--- CRITICAL: MUST BE THE FIRST IMPORT
 import os
 import time
 import threading
 import json
 import traceback
-import logging
-import string
-import random
 import shutil
 import cv2
 import numpy as np
@@ -29,7 +26,7 @@ BASE_USER_DIR = os.path.join(BASE_STORAGE_PATH, "userdata")
 os.makedirs(BASE_USER_DIR, exist_ok=True)
 
 # ======================================================
-# 🔧 JSON SANITIZER (FIX FOR int64 SERIALIZATION ERROR)
+# 🔧 JSON SANITIZER (FIX FOR int64 ERROR)
 # ======================================================
 def sanitize_json(obj):
     if isinstance(obj, dict):
@@ -49,10 +46,7 @@ def sanitize_json(obj):
 # ======================================================
 @spaces.GPU(duration=300)
 def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages):
-    # Heavy imports inside function to avoid startup timeout
-    import cv2
-    import srt
-    import numpy as np
+    # Heavy AI imports inside function to avoid Startup Timeout
     from backend.keyframes.keyframes import black_bar_crop
     from backend.simple_color_enhancer import SimpleColorEnhancer
     from backend.subtitles.subs_real import get_real_subtitles
@@ -71,7 +65,7 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         get_real_subtitles(video_path)
         if os.path.exists('test1.srt'): shutil.move('test1.srt', user_srt)
     except:
-        with open(user_srt, 'w') as f: f.write("1\n00:00:01,000 --> 00:00:05,000\n...\n")
+        with open(user_srt, 'w') as f: f.write("1\n00:00:01,000 --> 00:00:05,000\nDialogue...\n")
 
     with open(user_srt, 'r', encoding='utf-8') as f:
         try: all_subs = list(srt.parse(f.read()))
@@ -92,7 +86,7 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         indices = np.linspace(0, len(all_subs) - 1, total_needed, dtype=int)
         moments = [{'text': all_subs[i].content, 'start': all_subs[i].start.total_seconds()} for i in indices]
 
-    # 3. Extraction
+    # 3. Frame Extraction
     frame_metadata = {}
     cap = cv2.VideoCapture(video_path)
     frame_files = []
@@ -113,12 +107,11 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     try: black_bar_crop() 
     except: pass
 
-    # 4. Enhance and Organize
+    # 4. Enhance & Assemble
     se = SimpleColorEnhancer()
     pages_data = []
     for p_idx in range(target_pages):
-        p_panels = []
-        p_bubbles = []
+        p_p, p_b = [], []
         start = p_idx * 5
         for i in range(start, start + 5):
             if i >= len(frame_files): break
@@ -132,18 +125,18 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
                 faces = face_detector.detect_faces(img_p)
                 lip = face_detector.get_lip_position(img_p, faces[0]) if faces else (-1, -1)
                 bx, by = ai_bubble_placer.place_bubble_ai(img_p, lip)
-                bubble_item = {'dialog': txt, 'x': bx, 'y': by}
+                item = {'dialog': txt, 'x': bx, 'y': by}
             except:
-                bubble_item = {'dialog': txt, 'x': 50, 'y': 25}
+                item = {'dialog': txt, 'x': 50, 'y': 25}
             
-            p_panels.append({'image': f_name})
-            p_bubbles.append(bubble_item)
-        pages_data.append({'panels': p_panels, 'bubbles': p_bubbles})
+            p_p.append({'image': f_name})
+            p_b.append(item)
+        pages_data.append({'panels': p_p, 'bubbles': p_b})
 
     return sanitize_json(pages_data)
 
 # ======================================================
-# 🔧 APP SETUP
+# 🔧 APP ENGINE
 # ======================================================
 app = Flask(__name__)
 
@@ -163,7 +156,7 @@ def uploader():
     def task():
         try:
             with open(os.path.join(o_dir, 'status.json'), 'w') as f:
-                json.dump({'message': 'Building Geometric Ratios...', 'progress': 30}, f)
+                json.dump({'message': 'Generating Panels...', 'progress': 30}, f)
             data = generate_comic_gpu(vid_p, u_dir, f_dir, os.path.join(f_dir, 'meta.json'), pages)
             with open(os.path.join(o_dir, 'pages.json'), 'w') as f: json.dump(data, f)
             with open(os.path.join(o_dir, 'status.json'), 'w') as f:
@@ -180,7 +173,7 @@ 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': 'Initializing...'})
+    return jsonify({'progress': 0})
 
 @app.route('/frames/<sid>/<path:filename>')
 def get_frame(sid, filename):
@@ -191,108 +184,87 @@ def get_output(sid, filename):
     return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
 
 # ======================================================
-# 🌐 HTML (PERFECT THIN TILTED LINES TEMPLATE)
+# 🌐 UI HTML (USING YOUR FINAL COORDINATES)
 # ======================================================
 INDEX_HTML = '''
 <!DOCTYPE html><html lang="en">
 <head>
-    <meta charset="UTF-8"><title>High-Fidelity Comic Generator</title>
+    <meta charset="UTF-8"><title>Elite Geometric 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=Comic+Neue:wght@700&family=Lato&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Lato:wght@400;900&display=swap" rel="stylesheet">
     <style>
-        :root { 
-            --slant: 35px; /* Consistent Tilt Angle */
-            --thin-line: 8px; /* Consistent White Gutters */
-            --page-border: 12px;
-        }
-        
-        body { background: #1a1a1a; font-family: 'Lato', sans-serif; margin: 0; padding: 20px; }
-        .setup-view { max-width: 450px; margin: 100px auto; background: white; padding: 40px; border-radius: 12px; text-align: center; color: black; }
-        
-        /* ⚡ THE PIXEL-PERFECT ASYMMETRICAL TEMPLATE ⚡ */
-        .comic-page { 
-            background: white; width: 1000px; height: 750px; margin: 30px auto; 
-            border: var(--page-border) solid black; padding: 10px; box-sizing: border-box;
-            display: grid; gap: var(--thin-line);
-            grid-template-columns: repeat(6, 1fr); 
-            grid-template-rows: 1.3fr 1fr; 
-            position: relative; overflow: hidden;
+        /* COORDINATES INJECTED FROM YOUR TOOL */
+        :root {
+            --w: 1000px;
+            --h: 700px;
+            --tierY: 350px;
+            --gut: 5.25px; /* Half of 10.5px Gutter */
+            
+            --r1-topX: 641.2px;
+            --r1-botX: 588.2px;
+            
+            --r2L-topX: 284.2px;
+            --r2L-botX: 314.2px;
+            
+            --r2R-topX: 618.2px;
+            --r2R-botX: 678.2px;
         }
 
-        .panel { position: relative; background: #000; overflow: hidden; cursor: pointer; border: 3px solid black; }
-        /* Scale images to cover clip-path areas without showing black backgrounds */
-        .panel img { width: 115%; height: 115%; object-fit: cover; position: absolute; top: -7.5%; left: -7.5%; object-position: center 15%; pointer-events: none; }
+        body { background: #111; font-family: 'Lato', sans-serif; margin: 0; padding: 20px; color: white; }
+        .setup-box { max-width: 450px; margin: 80px auto; background: white; padding: 40px; border-radius: 12px; color: black; text-align: center; }
         
-        /* ROW 1: Slant LEFT \ (Panel 1 Wide, Panel 2 Narrow) */
-        .panel:nth-child(1) { 
-            grid-column: span 4; 
-            clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); 
-        }
-        .panel:nth-child(2) { 
-            grid-column: span 2; 
-            clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%); 
+        .comic-page { 
+            background: white; width: var(--w); height: var(--h); margin: 40px auto; 
+            border: 12px solid black; position: relative; overflow: hidden;
         }
 
-        /* ROW 2: Slant RIGHT / (Three equal action panels) */
-        .panel:nth-child(3) { 
-            grid-column: span 2; 
-            clip-path: polygon(0 0, calc(100% - var(--slant)) 0, 100% 100%, 0 100%); 
-        }
-        .panel:nth-child(4) { 
-            grid-column: span 2; 
-            clip-path: polygon(var(--slant) 0, calc(100% - var(--slant)) 0, 100% 100%, var(--slant) 100%); 
-        }
-        .panel:nth-child(5) { 
-            grid-column: span 2; 
-            clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, var(--slant) 100%); 
-        }
+        .panel { position: absolute; background: #000; overflow: hidden; cursor: pointer; }
+        .panel img { width: 120%; height: 120%; object-fit: cover; position: absolute; top: -10%; left: -10%; pointer-events: none; }
 
-        .panel.selected { outline: 6px solid #f39c12; z-index: 5; filter: contrast(1.1); }
+        /* ⚡ YOUR PRECISE GEOMETRY ⚡ */
+        /* Panel 1 (Top Left) */
+        .p1 { top: 0; left: 0; width: 100%; height: var(--tierY); clip-path: polygon(0 0, calc(var(--r1-topX) - var(--gut)) 0, calc(var(--r1-botX) - var(--gut)) var(--tierY), 0 var(--tierY)); }
+        /* Panel 2 (Top Right) */
+        .p2 { top: 0; left: 0; width: 100%; height: var(--tierY); clip-path: polygon(calc(var(--r1-topX) + var(--gut)) 0, var(--w) 0, var(--w) var(--tierY), calc(var(--r1-botX) + var(--gut)) var(--tierY)); }
+        
+        /* Panel 3 (Bottom Left) */
+        .p3 { top: calc(var(--tierY) + var(--gut)); left: 0; width: 100%; height: calc(var(--h) - var(--tierY)); clip-path: polygon(0 0, calc(var(--r2L-topX) - var(--gut)) 0, calc(var(--r2L-botX) - var(--gut)) 100%, 0 100%); }
+        /* Panel 4 (Bottom Center) */
+        .p4 { top: calc(var(--tierY) + var(--gut)); left: 0; width: 100%; height: calc(var(--h) - var(--tierY)); clip-path: polygon(calc(var(--r2L-topX) + var(--gut)) 0, calc(var(--r2R-topX) - var(--gut)) 0, calc(var(--r2R-botX) - var(--gut)) 100%, calc(var(--r2L-botX) + var(--gut)) 100%); }
+        /* Panel 5 (Bottom Right) */
+        .p5 { top: calc(var(--tierY) + var(--gut)); left: 0; width: 100%; height: calc(var(--h) - var(--tierY)); clip-path: polygon(calc(var(--r2R-topX) + var(--gut)) 0, var(--w) 0, var(--w) 100%, calc(var(--r2R-botX) + var(--gut)) 100%); }
 
-        /* BUBBLE STYLING - PRECISE WHITE CAPSULE */
         .bubble { 
             position: absolute; background: white; border: 2.5px solid black; border-radius: 25px;
-            padding: 10px 20px; font-family: 'Comic Neue'; font-weight: bold; font-size: 16px;
-            color: black; min-width: 120px; text-align: center; cursor: move; z-index: 10;
-            box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
-        }
-        .bubble::after {
-            content: ""; position: absolute; bottom: -18px; left: 30px;
-            width: 0; height: 0; border-left: 10px solid transparent;
-            border-right: 10px solid transparent; border-top: 20px solid black;
-        }
-        .bubble::before {
-            content: ""; position: absolute; bottom: -13px; left: 31px;
-            width: 0; height: 0; border-left: 9px solid transparent;
-            border-right: 9px solid transparent; border-top: 17px solid white;
-            z-index: 2;
+            padding: 10px 18px; font-family: 'Comic Neue'; font-weight: bold; font-size: 15px;
+            color: black; min-width: 100px; text-align: center; cursor: move; z-index: 10;
         }
 
-        .controls { position: fixed; bottom: 20px; right: 20px; background: #000; padding: 25px; border-radius: 12px; width: 240px; border: 1px solid #333; }
-        button { width: 100%; padding: 12px; margin-top: 10px; cursor: pointer; font-weight: bold; border-radius: 6px; border: none; }
+        .controls { position: fixed; bottom: 20px; right: 20px; background: #000; padding: 20px; border-radius: 12px; width: 220px; border: 2px solid #333; }
+        button { width: 100%; padding: 10px; margin-top: 10px; cursor: pointer; font-weight: bold; border-radius: 6px; border: none; }
         .hidden { display: none; }
-        .loader { border: 5px solid #333; border-top: 5px solid #e67e22; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; }
+        .loader { border: 5px solid #333; border-top: 5px solid #00d2ff; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     </style>
 </head>
 <body>
-    <div id="upload-zone" class="setup-view">
-        <h1>🎬 High-Fidelity Comic</h1>
-        <p>Consistent tilted lines & accurate ratios</p>
+    <div id="u-zone" class="setup-box">
+        <h1>🎬 Elite Comic Maker</h1>
+        <p>Using Final Dragged Coordinates</p>
         <input type="file" id="vid" accept="video/mp4"><br><br>
         <label>Total Pages: </label><input type="number" id="pg" value="2" style="width:50px">
         <br><br>
-        <button onclick="start()" style="background:#e67e22; color:white;">Generate Comic</button>
+        <button onclick="start()" style="background:#00d2ff; color:black;">🚀 GENERATE COMIC</button>
         <div id="loading" class="hidden"><div class="loader"></div><p id="st">Acquiring GPU...</p></div>
     </div>
 
     <div id="editor-zone" class="hidden">
         <div id="output"></div>
         <div class="controls">
-            <h4 style="margin:0; color:white;">Interactive Editor</h4>
+            <h4 style="margin:0; color:#00d2ff;">EDITOR</h4>
             <button onclick="addB()" style="background:#2ecc71; color:white;">💬 Add Bubble</button>
             <button onclick="exportPNG()" style="background:#3498db; color:white;">📥 Download PNGs</button>
-            <button onclick="location.reload()" style="background:#555; color:white;">🏠 Reset</button>
+            <button onclick="location.reload()" style="background:#e74c3c; color:white;">🏠 Reset</button>
         </div>
     </div>
 
@@ -308,21 +280,21 @@ INDEX_HTML = '''
         await fetch(`/uploader?sid=${sid}`, {method: 'POST', body: fd});
         const itv = setInterval(async () => {
             const r = await fetch(`/status?sid=${sid}`); const d = await r.json();
-            document.getElementById('st').innerText = d.message;
+            document.getElementById('st').innerText = d.message || "Working...";
             if(d.progress >= 100) { clearInterval(itv); load(); }
         }, 2000);
     }
 
     async function load() {
         const r = await fetch(`/output/${sid}/pages.json`); const pages = await r.json();
-        document.getElementById('upload-zone').classList.add('hidden');
+        document.getElementById('u-zone').classList.add('hidden');
         document.getElementById('editor-zone').classList.remove('hidden');
         const out = document.getElementById('output');
         pages.forEach(p => {
             const pgDiv = document.createElement('div'); pgDiv.className = 'comic-page';
             p.panels.forEach((pan, i) => {
-                const pDiv = document.createElement('div'); pDiv.className = 'panel';
-                pDiv.onclick = (e) => { e.stopPropagation(); if(selP) selP.classList.remove('selected'); selP=pDiv; pDiv.classList.add('selected'); };
+                const pDiv = document.createElement('div'); pDiv.className = 'panel p' + (i+1);
+                pDiv.onclick = (e) => { e.stopPropagation(); selP=pDiv; };
                 const img = document.createElement('img'); img.src = `/frames/${sid}/${pan.image}`;
                 pDiv.appendChild(img);
                 if(p.bubbles[i]) pDiv.appendChild(createB(p.bubbles[i].dialog, p.bubbles[i].x, p.bubbles[i].y));
@@ -345,7 +317,7 @@ INDEX_HTML = '''
         return b;
     }
 
-    function addB() { if(selP) selP.appendChild(createB("Dialogue", 60, 60)); else alert("Select a panel first!"); }
+    function addB() { if(selP) selP.appendChild(createB("Dialogue", 60, 60)); }
 
     async function exportPNG() {
         const pgs = document.querySelectorAll('.comic-page');