Update app_enhanced.py

app_enhanced.py

@@ -49,9 +49,7 @@ def sanitize_json(obj):
 # ======================================================
 @spaces.GPU(duration=300)
 def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages):
-    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
@@ -64,6 +62,7 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     duration = total_frames / fps
     cap.release()
 
+    # 1. Subtitles
     user_srt = os.path.join(user_dir, 'subs.srt')
     try:
         get_real_subtitles(video_path)
@@ -75,35 +74,31 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         try: all_subs = list(srt.parse(f.read()))
         except: all_subs = []
 
+    # 2. 5-Panel Math
     panels_per_page = 5
     target_pages = int(target_pages)
     total_needed = target_pages * panels_per_page
 
-    if not all_subs:
-        times = np.linspace(1, max(1.1, duration-1), total_needed)
-        moments = [{'text': '', 'start': t} for t in times]
-    elif len(all_subs) <= total_needed:
-        moments = [{'text': s.content, 'start': s.start.total_seconds()} for s in all_subs]
-        while len(moments) < total_needed: moments.append({'text': '', 'start': duration/2})
-    else:
-        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]
-
+    indices = np.linspace(0, len(all_subs) - 1, total_needed, dtype=int) if all_subs else range(total_needed)
+    
     frame_metadata = {}
     cap = cv2.VideoCapture(video_path)
     frame_files = []
-    for i, m in enumerate(moments):
-        cap.set(cv2.CAP_PROP_POS_MSEC, m['start'] * 1000)
+    for i, idx in enumerate(indices):
+        t = all_subs[idx].start.total_seconds() if all_subs else (i * (duration/total_needed))
+        cap.set(cv2.CAP_PROP_POS_MSEC, t * 1000)
         ret, frame = cap.read()
         if ret:
             fname = f"frame_{i:04d}.png"
             p = os.path.join(frames_dir, fname)
             cv2.imwrite(p, frame)
-            frame_metadata[fname] = {'dialogue': m['text'], 'time': m['start']}
+            frame_metadata[fname] = {'dialogue': all_subs[idx].content if all_subs else "", 'time': t}
             frame_files.append(fname)
     cap.release()
 
-    with open(metadata_path, 'w') as f: json.dump(sanitize_json(frame_metadata), f)
+    with open(metadata_path, 'w') as f:
+        json.dump(sanitize_json(frame_metadata), f)
+
     try: black_bar_crop() 
     except: pass
 
@@ -133,7 +128,7 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     return sanitize_json(pages_data)
 
 # ======================================================
-# 🔧 FLASK APP
+# 🔧 APP ENGINE
 # ======================================================
 app = Flask(__name__)
 
@@ -153,7 +148,7 @@ def uploader():
     def task():
         try:
             with open(os.path.join(o_dir, 'status.json'), 'w') as f:
-                json.dump({'message': 'Generating Geometry...', 'progress': 30}, f)
+                json.dump({'message': 'Drafting Parallel Geometry...', '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:
@@ -178,55 +173,67 @@ def get_frame(sid, filename): return send_from_directory(os.path.join(BASE_USER_
 def get_output(sid, filename): return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
 
 # ======================================================
-# 🌐 HTML (CONSISTENT STRAIGHT HORIZONTAL + TILTED VERTICAL)
+# 🌐 HTML (MATHEMATICALLY PARALLEL TILT TEMPLATE)
 # ======================================================
 INDEX_HTML = '''
 <!DOCTYPE html><html lang="en">
 <head>
-    <meta charset="UTF-8"><title>Geometric Precision Comic</title>
+    <meta charset="UTF-8"><title>Geometric Consistency 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&family=Lato:wght@400;900&display=swap" rel="stylesheet">
     <style>
         :root { 
-            --slant: 35px; /* Angle offset */
-            --hairline: 1px; /* RAZOR THIN WHITE LINE */
+            --slant: 35px; /* Fixed angle for all panels */
+            --hairline: 1.5px; /* Minimal consistent gap */
             --page-border: 12px;
         }
         body { background: #111; font-family: 'Lato', sans-serif; margin: 0; padding: 20px; }
         .setup-box { max-width: 450px; margin: 80px auto; background: white; padding: 40px; border-radius: 12px; color: black; text-align: center; }
         
-        /* THE PERFECT GEOMETRIC LAYOUT */
+        /* ⚡ THE PERFECT PARALLEL TEMPLATE ⚡ */
         .comic-page { 
             background: white; width: 1000px; height: 750px; margin: 40px auto; 
-            border: var(--page-border) solid black; padding: 2px; box-sizing: border-box;
-            display: grid; 
-            gap: var(--hairline); /* HAIRLINE GAP */
+            border: var(--page-border) solid black; padding: 3px; box-sizing: border-box;
+            display: grid; gap: var(--hairline);
             grid-template-columns: repeat(6, 1fr); 
-            grid-template-rows: 1.35fr 1fr; /* Taller top row, straight horizontal divider */
+            grid-template-rows: 1.35fr 1fr; /* Straight horizontal line between tiers */
             position: relative; overflow: hidden;
         }
 
         .panel { position: relative; background: #000; overflow: hidden; cursor: pointer; border: 1.5px solid black; }
+        .panel img { width: 115%; height: 115%; object-fit: cover; position: absolute; top: -7.5%; left: -7.5%; object-position: center 15%; pointer-events: none; }
         
-        /* Oversize images so slanted edges don't cut content */
-        .panel img { width: 112%; height: 112%; object-fit: cover; position: absolute; top: -6%; left: -6%; object-position: center 15%; pointer-events: none; }
-        
-        /* ROW 1: Straight top/bottom, slanted center divider */
-        .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%); }
+        /* ROW 1: Slant Left \ (Dividers are perfectly parallel) */
+        .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%); 
+        }
 
-        /* ROW 2: Straight top/bottom, three parallel slanted dividers */
-        .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%); }
+        /* ROW 2: Slant Right / (Dividers are perfectly parallel) */
+        .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.selected { outline: 6px solid #00d2ff; z-index: 5; filter: brightness(1.1); }
+        .panel.selected { outline: 8px solid #00d2ff; z-index: 5; filter: brightness(1.1); }
 
-        /* Bubble Style - Pro 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: 15px;
             color: black; min-width: 110px; 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; }
@@ -240,11 +247,12 @@ INDEX_HTML = '''
 </head>
 <body>
     <div id="upload-zone" class="setup-box">
-        <h1>🎬 Elite Comic Generator</h1>
-        <p>Consistent Straight & Tilted Geometry</p>
+        <h1>🎬 Elite Comic Maker</h1>
+        <p>Consistent Straight & Slanted Geometry</p>
         <input type="file" id="vid" accept="video/mp4"><br><br>
-        <label>Pages: </label><input type="number" id="pg" value="2" style="width:50px"><br><br>
-        <button onclick="start()" style="background:#e67e22; color:white;">🚀 GENERATE</button>
+        <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>
         <div id="loading" class="hidden"><div class="loader"></div><p id="st">Acquiring GPU...</p></div>
     </div>
     <div id="editor-zone" class="hidden">
@@ -298,15 +306,15 @@ INDEX_HTML = '''
             document.onmousemove = (ev) => { b.style.left=(ev.clientX-ox)+'px'; b.style.top=(ev.clientY-oy)+'px'; };
             document.onmouseup = () => { document.onmousemove = null; };
         };
-        b.ondblclick = () => { let n = prompt("Edit:", b.innerText); if(n) b.innerText = n; };
+        b.ondblclick = () => { let n = prompt("Edit text:", b.innerText); if(n) b.innerText = n; };
         return b;
     }
-    function addB() { if(selP) selP.appendChild(createB("Text", 60, 60)); }
+    function addB() { if(selP) selP.appendChild(createB("Dialogue", 60, 60)); }
     async function exportPNG() {
         const pgs = document.querySelectorAll('.comic-page');
         for(let pg of pgs) {
             const url = await htmlToImage.toPng(pg, {pixelRatio: 2});
-            const l = document.createElement('a'); l.download='Pro_Comic.png'; l.href=url; l.click();
+            const l = document.createElement('a'); l.download='Elite_Comic.png'; l.href=url; l.click();
         }
     }
 </script>