Update app_enhanced.py

app_enhanced.py

@@ -10,7 +10,7 @@ import srt
 from flask import Flask, jsonify, request, send_from_directory, send_file
 
 # ======================================================
-# 🚀 ZEROGPU & STORAGE SETUP
+# 🚀 ZEROGPU & STORAGE
 # ======================================================
 @spaces.GPU
 def gpu_warmup():
@@ -29,7 +29,7 @@ def sanitize_json(obj):
     return obj
 
 # ======================================================
-# 🧠 THE GEOMETRIC ENGINE
+# 🧠 THE ENGINE
 # ======================================================
 @spaces.GPU(duration=300)
 def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages):
@@ -45,18 +45,19 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     duration = total_frames / fps
     cap.release()
 
-    # Subtitles
+    # Get Dialogue
     user_srt = os.path.join(user_dir, 'subs.srt')
     try:
         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:04,000\nDialogue...\n")
 
     with open(user_srt, 'r', encoding='utf-8') as f:
         try: all_subs = list(srt.parse(f.read()))
         except: all_subs = []
 
+    # Calculate 5 panels per page
     panels_per_page = 5
     target_pages = int(target_pages)
     total_needed = target_pages * panels_per_page
@@ -71,7 +72,8 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         ret, frame = cap.read()
         if ret:
             fname = f"frame_{i:04d}.png"
-            cv2.imwrite(os.path.join(frames_dir, fname), frame)
+            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_files.append(fname)
     cap.release()
@@ -103,7 +105,7 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     return sanitize_json(pages_data)
 
 # ======================================================
-# 🌐 FLASK SERVER
+# 🌐 SERVER
 # ======================================================
 app = Flask(__name__)
 
@@ -114,24 +116,16 @@ def index(): return INDEX_HTML
 def uploader():
     sid = request.args.get('sid')
     u_dir = os.path.join(BASE_USER_DIR, sid)
-    f_dir = os.path.join(u_dir, 'frames')
-    o_dir = os.path.join(u_dir, 'output')
+    f_dir = os.path.join(u_dir, 'frames'); o_dir = os.path.join(u_dir, 'output')
     os.makedirs(f_dir, exist_ok=True); os.makedirs(o_dir, exist_ok=True)
-    
-    video_file = request.files['file']
-    video_path = os.path.join(u_dir, 'video.mp4')
-    video_file.save(video_path)
-    
-    pages = request.form.get('pages', 2)
-
+    request.files['file'].save(os.path.join(u_dir, 'video.mp4'))
     def task():
         try:
-            data = generate_comic_gpu(video_path, u_dir, f_dir, os.path.join(f_dir, 'm.json'), pages)
+            data = generate_comic_gpu(os.path.join(u_dir, 'video.mp4'), u_dir, f_dir, os.path.join(f_dir, 'm.json'), request.form.get('pages', 2))
             with open(os.path.join(o_dir, 'p.json'), 'w') as f: json.dump(data, f)
             with open(os.path.join(o_dir, 's.json'), 'w') as f: json.dump({'progress': 100}, f)
         except Exception as e:
             with open(os.path.join(o_dir, 's.json'), 'w') as f: json.dump({'progress': -1, 'msg': str(e)}, f)
-
     threading.Thread(target=task).start()
     return jsonify({'ok': True})
 
@@ -140,7 +134,7 @@ def status():
     sid = request.args.get('sid')
     p = os.path.join(BASE_USER_DIR, sid, 'output', 's.json')
     if os.path.exists(p): return send_file(p)
-    return jsonify({'progress': 1, 'msg': 'Processing...'})
+    return jsonify({'progress': 1, 'msg': 'Warming GPU...'})
 
 @app.route('/frames/<sid>/<path:f>')
 def get_frame(sid, f): return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'frames'), f)
@@ -149,122 +143,104 @@ def get_frame(sid, f): return send_from_directory(os.path.join(BASE_USER_DIR, si
 def get_output(sid, f): return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), f)
 
 # ======================================================
-# 🖼️ UI HTML (FIXED GENERATE BUTTON)
+# 🖼️ UI (PARALLEL SLANT MATH)
 # ======================================================
 INDEX_HTML = '''
 <!DOCTYPE html><html><head><meta charset="UTF-8">
-<title>Pro 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:wght@400;900&display=swap" rel="stylesheet">
 <style>
-    :root { --slant: 40px; --hairline: 0.1px; }
-    body { background: #000; font-family: sans-serif; color: white; text-align: center; padding: 20px; }
+    :root { 
+        --slant: 35px; /* Angle offset */
+        --gutter: 2px; /* LITTLE SPACE AS REQUESTED */
+    }
+    body { background: #000; font-family: 'Lato', sans-serif; color: white; text-align: center; }
     
+    /* THE PARALLEL GEOMETRIC GRID */
     .comic-page { 
-        background: white; width: 1000px; height: 750px; margin: 20px auto; 
-        border: 12px solid black; padding: 2px; display: grid; gap: var(--hairline);
+        background: white; width: 1000px; height: 750px; margin: 30px auto; 
+        border: 12px solid black; padding: 4px; display: grid; gap: var(--gutter);
         grid-template-columns: repeat(6, 1fr); grid-template-rows: 1.35fr 1fr;
         position: relative; overflow: hidden;
     }
-    .panel { position: relative; background: #000; overflow: hidden; border: 1px solid black; }
-    .panel img { width: 115%; height: 115%; object-fit: cover; position: absolute; top: -7.5%; left: -7.5%; object-position: center 15%; }
+
+    .panel { position: relative; background: #000; overflow: hidden; border: 1.5px solid black; }
+    
+    /* Headroom Protection */
+    .panel img { 
+        width: 112%; height: 112%; object-fit: cover; 
+        position: absolute; top: -6%; left: -6%; 
+        object-position: center 15%; 
+    }
     
-    /* TILTED GEOMETRY */
+    /* ⚡ THE PARALLEL SLANT LOGIC ⚡ */
+    /* Side A moves left, Side B follows it left - Keeping gutter parallel */
+    
+    /* Row 1: Left Slant 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: Right Slant 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%); }
 
     .bubble { position: absolute; background: white; border: 2.5px solid black; border-radius: 25px; padding: 10px; color: black; font-weight: bold; z-index: 99; min-width: 100px;}
     .hidden { display: none; }
-    .btn { padding: 15px 30px; font-size: 18px; font-weight: bold; cursor: pointer; border-radius: 8px; border: none; }
-    #status-msg { margin-top: 20px; font-weight: bold; color: cyan; }
+    .btn { padding: 12px 24px; font-size: 16px; font-weight: 900; cursor: pointer; border-radius: 8px; border: none; margin: 10px; }
+    #status-log { color: #00d2ff; font-weight: bold; margin-top: 10px; }
 </style></head>
 <body>
-    <div id="u-zone">
-        <h1>🎬 Elite Geometric Generator</h1>
-        <p>Parallel Trapezoid Geometry | 0.1px Hairline Gutters</p>
+    <div id="u-zone" style="margin-top:80px;">
+        <h1>🎬 Elite Geometric Comic Maker</h1>
+        <p>Parallel Slant Geometry | Consistent Hairline Gutters</p>
         <input type="file" id="vid" accept="video/mp4"><br><br>
-        <label>Pages: </label><input type="number" id="pg-count" value="2" style="width: 50px; padding: 5px;"><br><br>
-        <button id="gen-btn" class="btn" onclick="start()" style="background:cyan; color:black;">GENERATE PERFECT COMIC</button>
-        <div id="status-msg"></div>
+        <button id="gen-btn" class="btn" onclick="start()" style="background:#00d2ff; color:black;">GENERATE COMIC</button>
+        <div id="status-log"></div>
     </div>
 
     <div id="e-zone" class="hidden">
         <div id="out"></div>
         <div style="position:fixed; bottom:20px; right:20px;">
-            <button class="btn" onclick="exportPNG()" style="background:lime;">DOWNLOAD PNG</button>
-            <button class="btn" onclick="location.reload()" style="background:grey;">RESET</button>
+            <button class="btn" onclick="exportPNG()" style="background:lime; color:black;">📥 DOWNLOAD PNG</button>
+            <button class="btn" onclick="location.reload()" style="background:#555; color:white;">🏠 RESET</button>
         </div>
     </div>
 
 <script>
     let sid = 's'+Math.random().toString(36).substr(2,9);
-    
     async function start() {
-        const fileInput = document.getElementById('vid');
-        const pgCount = document.getElementById('pg-count').value;
+        const file = document.getElementById('vid').files[0];
+        if(!file) return alert("Select video");
         
-        if(!fileInput.files[0]) return alert("Please select a video file first!");
-
-        // Feedback to user
         document.getElementById('gen-btn').disabled = true;
-        document.getElementById('gen-btn').innerText = "UPLOADING...";
-        document.getElementById('status-msg').innerText = "Uploading video to GPU... please wait.";
+        document.getElementById('gen-btn').innerText = "PROCESSING...";
+        document.getElementById('status-log').innerText = "Uploading to GPU...";
 
-        const fd = new FormData();
-        fd.append('file', fileInput.files[0]);
-        fd.append('pages', pgCount);
-
-        try {
-            const resp = await fetch(`/uploader?sid=${sid}`, {method: 'POST', body: fd});
-            const result = await resp.json();
-            
-            if(result.ok) {
-                const itv = setInterval(async () => {
-                    const r = await fetch(`/status?sid=${sid}`);
-                    const d = await r.json();
-                    
-                    if(d.progress === 100) {
-                        clearInterval(itv);
-                        loadEditor();
-                    } else if (d.progress === -1) {
-                        clearInterval(itv);
-                        alert("Error: " + d.msg);
-                        location.reload();
-                    } else {
-                        document.getElementById('status-msg').innerText = "GPU Processing: " + (d.msg || "Extracting Frames...");
-                    }
-                }, 3000);
-            }
-        } catch (e) {
-            alert("Connection Error. Check if Space is awake.");
-            location.reload();
-        }
+        const fd = new FormData(); fd.append('file', file); fd.append('pages', 2);
+        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('status-log').innerText = "Status: " + (d.msg || "Extracting Panels...");
+            if(d.progress >= 100) { clearInterval(itv); load(); }
+            if(d.progress < 0) { clearInterval(itv); alert("Error: " + d.msg); location.reload(); }
+        }, 3000);
     }
 
-    async function loadEditor() {
-        const r = await fetch(`/output/${sid}/p.json`);
-        const pages = await r.json();
+    async function load() {
+        const r = await fetch(`/output/${sid}/p.json`); const pages = await r.json();
         document.getElementById('u-zone').classList.add('hidden');
         document.getElementById('e-zone').classList.remove('hidden');
-        
         pages.forEach(p => {
-            const pgDiv = document.createElement('div');
-            pgDiv.className = 'comic-page';
+            const pgDiv = document.createElement('div'); pgDiv.className='comic-page';
             p.panels.forEach((pan, i) => {
-                const div = document.createElement('div');
-                div.className = 'panel';
-                const img = document.createElement('img');
-                img.src = `/frames/${sid}/${pan.image}`;
+                const div = document.createElement('div'); div.className='panel';
+                const img = document.createElement('img'); img.src=`/frames/${sid}/${pan.image}`;
                 div.appendChild(img);
-                
                 if(p.bubbles[i] && p.bubbles[i].dialog) {
-                    const b = document.createElement('div');
-                    b.className = 'bubble';
-                    b.innerText = p.bubbles[i].dialog;
-                    b.style.left = p.bubbles[i].x + 'px';
-                    b.style.top = p.bubbles[i].y + 'px';
+                    const b = document.createElement('div'); b.className='bubble'; b.innerText=p.bubbles[i].dialog;
+                    b.style.left='50px'; b.style.top='30px';
                     div.appendChild(b);
                 }
                 pgDiv.appendChild(div);
@@ -277,14 +253,10 @@ INDEX_HTML = '''
         const pgs = document.querySelectorAll('.comic-page');
         for(let pg of pgs) {
             const url = await htmlToImage.toPng(pg, {pixelRatio: 3});
-            const l = document.createElement('a');
-            l.download = 'Comic_Page.png';
-            l.href = url;
-            l.click();
+            const l = document.createElement('a'); l.download='Comic_Page.png'; l.href=url; l.click();
         }
     }
-</script></body></html>
-'''
+</script></body></html>'''
 
 if __name__ == '__main__':
     try: gpu_warmup()