Update app_enhanced.py

app_enhanced.py

@@ -29,7 +29,7 @@ BASE_USER_DIR = os.path.join(BASE_STORAGE_PATH, "userdata")
 os.makedirs(BASE_USER_DIR, exist_ok=True)
 
 # ======================================================
-# 🔧 JSON SANITIZER
+# 🔧 JSON SANITIZER (FIX FOR int64 ERROR)
 # ======================================================
 def sanitize_json(obj):
     if isinstance(obj, dict):
@@ -40,6 +40,8 @@ def sanitize_json(obj):
         return int(obj)
     elif isinstance(obj, (np.float64, np.float32)):
         return float(obj)
+    elif isinstance(obj, np.ndarray):
+        return sanitize_json(obj.tolist())
     return obj
 
 # ======================================================
@@ -47,6 +49,9 @@ 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
     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,7 +69,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()))
@@ -73,21 +78,28 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     panels_per_page = 5
     target_pages = int(target_pages)
     total_needed = target_pages * panels_per_page
-    indices = np.linspace(0, len(all_subs) - 1, total_needed, dtype=int) if all_subs else range(total_needed)
-    
+
+    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]
+
     frame_metadata = {}
     cap = cv2.VideoCapture(video_path)
     frame_files = []
-
-    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)
+    for i, m in enumerate(moments):
+        cap.set(cv2.CAP_PROP_POS_MSEC, m['start'] * 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': all_subs[idx].content if all_subs else "", 'time': t}
+            frame_metadata[fname] = {'dialogue': m['text'], 'time': m['start']}
             frame_files.append(fname)
     cap.release()
 
@@ -121,7 +133,7 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     return sanitize_json(pages_data)
 
 # ======================================================
-# 🔧 APP ENGINE
+# 🔧 FLASK APP
 # ======================================================
 app = Flask(__name__)
 
@@ -141,7 +153,7 @@ def uploader():
     def task():
         try:
             with open(os.path.join(o_dir, 'status.json'), 'w') as f:
-                json.dump({'message': 'Generating Tilted Frames...', 'progress': 30}, f)
+                json.dump({'message': 'Generating 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:
@@ -166,54 +178,51 @@ 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)
 
 # ======================================================
-# 🖼️ UI HTML (FULL IMAGE PRESERVATION + 0.1px DESIGN LINES)
+# 🌐 HTML (CONSISTENT STRAIGHT HORIZONTAL + TILTED VERTICAL)
 # ======================================================
 INDEX_HTML = '''
 <!DOCTYPE html><html lang="en">
 <head>
-    <meta charset="UTF-8"><title>Pro Full-Frame Comic Maker</title>
+    <meta charset="UTF-8"><title>Geometric Precision 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=Comic+Neue:wght@700&family=Lato:wght@400;900&display=swap" rel="stylesheet">
     <style>
         :root { 
-            --slant: 28px; /* Balanced tilt: visible but not destructive */
-            --gutter: 0.1px; 
-            --border-page: 12px;
+            --slant: 35px; /* Angle offset */
+            --hairline: 1px; /* RAZOR THIN WHITE LINE */
+            --page-border: 12px;
         }
-        body { background: #000; font-family: 'Lato', sans-serif; margin: 0; padding: 20px; }
+        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 FULL-FRAME GEOMETRIC TEMPLATE ⚡ */
+        /* THE PERFECT GEOMETRIC LAYOUT */
         .comic-page { 
             background: white; width: 1000px; height: 750px; margin: 40px auto; 
-            border: var(--border-page) solid black; padding: 4px; box-sizing: border-box;
-            display: grid; gap: var(--gutter);
+            border: var(--page-border) solid black; padding: 2px; box-sizing: border-box;
+            display: grid; 
+            gap: var(--hairline); /* HAIRLINE GAP */
             grid-template-columns: repeat(6, 1fr); 
-            grid-template-rows: 1.3fr 1fr; 
+            grid-template-rows: 1.35fr 1fr; /* Taller top row, straight horizontal divider */
             position: relative; overflow: hidden;
         }
 
         .panel { position: relative; background: #000; overflow: hidden; cursor: pointer; border: 1.5px solid black; }
         
-        /* IMAGE PRESERVATION: Minimal zoom (105%) and top-bias positioning */
-        .panel img { 
-            width: 108%; height: 108%; object-fit: cover; 
-            position: absolute; top: -4%; left: -4%; 
-            object-position: center 10%; /* Ensures faces at the top aren't cut */
-            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: Design Lines - Tilt Left \ */
+        /* 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 2: Design Lines - Tilt Right / (Preserving Fullness) */
+        /* 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%); }
 
-        .panel.selected { outline: 8px solid #00d2ff; z-index: 5; filter: brightness(1.1); }
+        .panel.selected { outline: 6px 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;
@@ -231,13 +240,12 @@ INDEX_HTML = '''
 </head>
 <body>
     <div id="upload-zone" class="setup-box">
-        <h1>🎬 Elite Comic Maker</h1>
-        <p>Full Image Preservation + 0.1px Design Lines</p>
+        <h1>🎬 Elite Comic Generator</h1>
+        <p>Consistent Straight & Tilted Geometry</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:#00d2ff; color:black;">🚀 GENERATE COMIC</button>
-        <div id="loading" class="hidden"><div class="loader"></div><p id="st">Processing Composition...</p></div>
+        <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>
+        <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>
@@ -293,7 +301,7 @@ INDEX_HTML = '''
         b.ondblclick = () => { let n = prompt("Edit:", b.innerText); if(n) b.innerText = n; };
         return b;
     }
-    function addB() { if(selP) selP.appendChild(createB("Dialogue", 60, 60)); }
+    function addB() { if(selP) selP.appendChild(createB("Text", 60, 60)); }
     async function exportPNG() {
         const pgs = document.querySelectorAll('.comic-page');
         for(let pg of pgs) {