Update app_enhanced.py

app_enhanced.py

@@ -24,7 +24,7 @@ def gpu_warmup():
     return True
 
 # ======================================================
-# 💾 STORAGE SETUP
+# 💾 PERSISTENT STORAGE
 # ======================================================
 if os.path.exists('/data'):
     BASE_STORAGE_PATH = '/data'
@@ -39,6 +39,9 @@ SAVED_COMICS_DIR = os.path.join(BASE_STORAGE_PATH, "saved_comics")
 os.makedirs(BASE_USER_DIR, exist_ok=True)
 os.makedirs(SAVED_COMICS_DIR, exist_ok=True)
 
+# ======================================================
+# 🔧 APP CONFIG
+# ======================================================
 app = Flask(__name__)
 app.config['MAX_CONTENT_LENGTH'] = 500 * 1024 * 1024
 
@@ -52,8 +55,8 @@ def generate_save_code(length=8):
 # ======================================================
 # 🧱 DATA CLASSES
 # ======================================================
-def bubble(dialog="", x=50, y=20, type='speech'):
-    # Apply classes
+def bubble(dialog="", x=50, y=50, type='speech'):
+    # Determine CSS classes based on type
     classes = f"speech-bubble {type}"
     if type == 'speech':
         classes += " tail-bottom"
@@ -80,11 +83,11 @@ class Page:
         self.bubbles = bubbles
 
 # ======================================================
-# 🧠 GPU GENERATION
+# 🧠 GPU GENERATION (1920x1080 Source -> 864x1080 Layout)
 # ======================================================
 @spaces.GPU(duration=300)
 def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages):
-    print(f"🚀 Generating HD Comic: {video_path}")
+    print(f"🚀 Generating Comic (864x1080): {video_path}")
     import cv2
     import srt
     import numpy as np
@@ -104,25 +107,21 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         if os.path.exists('test1.srt'):
             shutil.move('test1.srt', user_srt)
         elif not os.path.exists(user_srt):
-            with open(user_srt, 'w') as f:
-                f.write("1\n00:00:01,000 --> 00:00:04,000\n...\n")
+            with open(user_srt, 'w') as f: f.write("1\n00:00:01,000 --> 00:00:04,000\n...\n")
     except:
-        with open(user_srt, 'w') as f:
-            f.write("1\n00:00:01,000 --> 00:00:04,000\n...\n")
+        with open(user_srt, 'w') as f: f.write("1\n00:00:01,000 --> 00:00:04,000\n...\n")
             
     with open(user_srt, 'r', encoding='utf-8') as f:
-        try:
-            all_subs = list(srt.parse(f.read()))
-        except:
-            all_subs = []
+        try: all_subs = list(srt.parse(f.read()))
+        except: all_subs = []
 
-    valid_subs = [s for s in all_subs if s.content and s.content.strip()]
+    valid_subs = [s for s in all_subs if s.content.strip()]
     if valid_subs:
         raw_moments = [{'text': s.content.strip(), 'start': s.start.total_seconds(), 'end': s.end.total_seconds()} for s in valid_subs]
     else:
         raw_moments = []
 
-    # 4 Panels Per Page
+    # 4 Panels Per Page (Logic)
     panels_per_page = 4
     total_panels_needed = int(target_pages) * panels_per_page
 
@@ -146,18 +145,12 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         cap.set(cv2.CAP_PROP_POS_MSEC, mid * 1000)
         ret, frame = cap.read()
         if ret:
-            # 🎯 SQUARE PADDING (0% Cut)
-            h, w = frame.shape[:2]
-            sq_dim = max(h, w)
-            square_img = np.zeros((sq_dim, sq_dim, 3), dtype=np.uint8)
-            x_off = (sq_dim - w) // 2
-            y_off = (sq_dim - h) // 2
-            square_img[y_off:y_off+h, x_off:x_off+w] = frame
-            square_img = cv2.resize(square_img, (1024, 1024))
+            # 🎯 EXTRACT AT 1920x1080 (Matches Page Height, High Quality)
+            frame = cv2.resize(frame, (1920, 1080))
             
             fname = f"frame_{count:04d}.png"
             p = os.path.join(frames_dir, fname)
-            cv2.imwrite(p, square_img)
+            cv2.imwrite(p, frame)
             
             frame_metadata[fname] = {'dialogue': moment['text'], 'time': mid}
             frame_files_ordered.append(fname)
@@ -170,25 +163,23 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     for i, f in enumerate(frame_files_ordered):
         dialogue = frame_metadata.get(f, {}).get('dialogue', '')
         
-        # Determine Bubble Type
         b_type = 'speech'
         if '(' in dialogue: b_type = 'narration'
         elif '!' in dialogue: b_type = 'reaction'
         elif '?' in dialogue: b_type = 'speech'
         
-        # 🎯 CALCULATE POSITION BASED ON PANEL INDEX (0-3)
-        # Page size is 800x800. Panels are ~400x400 quadrants.
-        # We want to center the bubble roughly in each quadrant.
+        # 🎯 SMART PLACEMENT FOR 864x1080 GRID
+        # Top-Left (0), Top-Right (1), Bot-Left (2), Bot-Right (3)
         pos_idx = i % 4
         
-        if pos_idx == 0:   # Top-Left
-            bx, by = 150, 50
-        elif pos_idx == 1: # Top-Right
-            bx, by = 550, 50
-        elif pos_idx == 2: # Bottom-Left
-            bx, by = 150, 450
-        elif pos_idx == 3: # Bottom-Right
-            bx, by = 550, 450
+        if pos_idx == 0:   # Top-Left Panel
+            bx, by = 150, 80
+        elif pos_idx == 1: # Top-Right Panel (Hidden by default)
+            bx, by = 600, 80
+        elif pos_idx == 2: # Bot-Left Panel
+            bx, by = 150, 600
+        elif pos_idx == 3: # Bot-Right Panel (Hidden by default)
+            bx, by = 600, 600
         else:
             bx, by = 50, 50
             
@@ -203,10 +194,10 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         
         while len(p_frames) < 4:
              fname = f"empty_{i}_{len(p_frames)}.png"
-             img = np.zeros((1024, 1024, 3), dtype=np.uint8); img[:] = (30,30,30)
+             img = np.zeros((1080, 1920, 3), dtype=np.uint8); img[:] = (30,30,30)
              cv2.imwrite(os.path.join(frames_dir, fname), img)
              p_frames.append(fname)
-             # Add dummy bubble to keep count synced, but off-screen or empty
+             # Place empty bubble offscreen
              p_bubbles.append(bubble(dialog="", x=-999, y=-999, type='speech'))
 
         if p_frames:
@@ -233,15 +224,8 @@ def regen_frame_gpu(video_path, frames_dir, metadata_path, fname, direction):
     cap.release()
 
     if ret:
-        h, w = frame.shape[:2]
-        sq_dim = max(h, w)
-        square_img = np.zeros((sq_dim, sq_dim, 3), dtype=np.uint8)
-        x_off = (sq_dim - w) // 2
-        y_off = (sq_dim - h) // 2
-        square_img[y_off:y_off+h, x_off:x_off+w] = frame
-        square_img = cv2.resize(square_img, (1024, 1024))
-        
-        cv2.imwrite(os.path.join(frames_dir, fname), square_img)
+        frame = cv2.resize(frame, (1920, 1080))
+        cv2.imwrite(os.path.join(frames_dir, fname), frame)
         if isinstance(meta[fname], dict): meta[fname]['time'] = new_t
         else: meta[fname] = new_t
         with open(metadata_path, 'w') as f: json.dump(meta, f, indent=2)
@@ -258,15 +242,9 @@ def get_frame_at_ts_gpu(video_path, frames_dir, metadata_path, fname, ts):
     cap.release()
 
     if ret:
-        h, w = frame.shape[:2]
-        sq_dim = max(h, w)
-        square_img = np.zeros((sq_dim, sq_dim, 3), dtype=np.uint8)
-        x_off = (sq_dim - w) // 2
-        y_off = (sq_dim - h) // 2
-        square_img[y_off:y_off+h, x_off:x_off+w] = frame
-        square_img = cv2.resize(square_img, (1024, 1024))
-        
-        cv2.imwrite(os.path.join(frames_dir, fname), square_img)
+        frame = cv2.resize(frame, (1920, 1080))
+        p = os.path.join(frames_dir, fname)
+        cv2.imwrite(p, frame)
         if os.path.exists(metadata_path):
             with open(metadata_path, 'r') as f: meta = json.load(f)
             if fname in meta:
@@ -315,7 +293,7 @@ class EnhancedComicGenerator:
 # 🌐 FRONTEND
 # ======================================================
 INDEX_HTML = '''
-<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Square HD 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&family=Comic+Neue:wght@700&family=Gloria+Hallelujah&family=Lato&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } body { background-color: #2c3e50; font-family: 'Lato', sans-serif; color: #eee; margin: 0; min-height: 100vh; }
+<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>864x1080 Comic Gen</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&family=Comic+Neue:wght@700&family=Gloria+Hallelujah&family=Lato&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } body { background-color: #2c3e50; font-family: 'Lato', sans-serif; color: #eee; margin: 0; min-height: 100vh; }
     
     #upload-container { display: flex; flex-direction:column; justify-content: center; align-items: center; min-height: 100vh; width: 100%; padding: 20px; }
     .upload-box { max-width: 500px; width: 100%; padding: 40px; background: #34495e; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); text-align: center; }
@@ -335,14 +313,14 @@ INDEX_HTML = '''
     .loader { width: 100px; height: 10px; background: #e67e22; margin: 20px auto; animation: load 1s infinite alternate; }
     @keyframes load { from { width: 20px; } to { width: 100px; } }
     
-    /* === SQUARE COMIC LAYOUT (800x800) === */
+    /* === 864x1080 PAGE LAYOUT === */
     .comic-wrapper { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; }
     .page-wrapper { display: flex; flex-direction: column; align-items: center; }
     .page-title { text-align: center; color: #eee; margin-bottom: 10px; font-size: 20px; font-weight: bold; }
     
     .comic-page { 
-        width: 800px; 
-        height: 800px; 
+        width: 864px; 
+        height: 1080px; 
         background: white; 
         box-shadow: 0 5px 30px rgba(0,0,0,0.6); 
         position: relative; overflow: hidden; 
@@ -356,7 +334,7 @@ INDEX_HTML = '''
 
     .panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #1a1a1a; cursor: grab; }
     
-    /* IMAGE: Cover ensures it fills. Zoom allows control. */
+    /* IMAGE HANDLING */
     .panel img { 
         width: 100%; height: 100%; 
         object-fit: cover; 
@@ -367,7 +345,7 @@ INDEX_HTML = '''
     .panel img.panning { cursor: grabbing; transition: none; }
     .panel.selected { outline: 4px solid #3498db; z-index: 5; }
 
-    /* Clip Paths */
+    /* === CLIP PATHS FOR 864x1080 (100% t1/b1 = 864px width) === */
     .panel:nth-child(1) { clip-path: polygon(0 0, calc(var(--t1) - var(--gap)) 0, calc(var(--t2) - var(--gap)) calc(var(--y) - var(--gap)), 0 calc(var(--y) - var(--gap))); z-index: 1; }
     .panel:nth-child(2) { clip-path: polygon(calc(var(--t1) + var(--gap)) 0, 100% 0, 100% calc(var(--y) - var(--gap)), calc(var(--t2) + var(--gap)) calc(var(--y) - var(--gap))); z-index: 1; }
     .panel:nth-child(3) { clip-path: polygon(0 calc(var(--y) + var(--gap)), calc(var(--b1) - var(--gap)) calc(var(--y) + var(--gap)), calc(var(--b2) - var(--gap)) 100%, 0 100%); z-index: 1; }
@@ -381,7 +359,7 @@ INDEX_HTML = '''
     .h-b1 { background: #2ecc71; left: var(--b1); top: 50%; margin-top: 15px; }
     .h-b2 { background: #2ecc71; left: var(--b2); top: 100%; margin-top: -15px; }
     
-    /* --- ADVANCED SPEECH BUBBLES --- */
+    /* === SPEECH BUBBLES === */
     .speech-bubble { 
         position: absolute; display: flex; justify-content: center; align-items: center; 
         min-width: 60px; min-height: 40px; box-sizing: border-box; 
@@ -458,7 +436,7 @@ INDEX_HTML = '''
 
 <div id="upload-container"> 
     <div class="upload-box"> 
-        <h1>⚡ Ultimate Square Comic</h1> 
+        <h1>⚡ 864x1080 Comic Gen</h1> 
         <input type="file" id="file-upload" class="file-input" onchange="document.getElementById('fn').innerText=this.files[0].name"> 
         <label for="file-upload" class="file-label">📁 Choose Video</label> 
         <span id="fn" style="margin-bottom:10px; display:block; color:#aaa;">No file selected</span>
@@ -483,7 +461,7 @@ INDEX_HTML = '''
 </div>
 
 <div id="editor-container">
-    <div class="tip">👉 Drag Right-Side Dots to reveal 4 panels! | 📜 Scroll to Zoom/Pan</div>
+    <div class="tip">👉 Drag Right-Side Dots (Blue/Green) to reveal 4 panels! | 📜 Scroll to Zoom/Pan</div>
     <div class="comic-wrapper" id="comic-container"></div>
     <input type="file" id="image-uploader" style="display: none;" accept="image/*">
     
@@ -655,7 +633,7 @@ INDEX_HTML = '''
         const data = await r.json();
         const cleanData = data.map(p => ({
             panels: p.panels.map(pan => ({ src: `/frames/${pan.image}?sid=${sid}` })),
-            // Map backend bubbles to strict list structure to avoid grouping
+            // Map backend bubbles to strict list structure
             bubbles: p.bubbles.map(b => ({
                 text: b.dialog, left: (b.bubble_offset_x||50)+'px', top: (b.bubble_offset_y||20)+'px', type: b.type,
                 colors: b.colors, font: b.font, classes: b.classes, tailPos: b.tail_pos
@@ -685,13 +663,8 @@ INDEX_HTML = '''
             
             grid.append(createHandle('h-t1', grid, 't1'), createHandle('h-t2', grid, 't2'), createHandle('h-b1', grid, 'b1'), createHandle('h-b2', grid, 'b2'));
             
-            // 🎯 CRITICAL: PAIR 1 BUBBLE TO 1 PANEL IF AVAILABLE
-            // Instead of just looping all bubbles, we map them by index to keep 1:1 if possible
             if(page.bubbles) {
                 page.bubbles.forEach((bData, bIdx) => {
-                    // We simply append them to the grid. The backend ensures the list length matches panels roughly.
-                    // To enforce strict placement visually, we rely on the backend setting varied coordinates.
-                    // But here we just append to Grid so they float over panels.
                     if(bData.text) {
                         const b = createBubbleHTML(bData); 
                         grid.appendChild(b);
@@ -712,8 +685,6 @@ INDEX_HTML = '''
     function createBubbleHTML(data) {
         const b = document.createElement('div');
         const type = data.type || 'speech';
-        
-        // Use existing classes or generate defaults
         let className = data.classes || `speech-bubble ${type} tail-bottom`;
         if (type === 'thought' && !className.includes('pos-')) className += ' pos-bl';
         b.className = className;
@@ -744,7 +715,6 @@ INDEX_HTML = '''
         if(newText !== null) { textSpan.textContent = newText; saveState(); }
     }
     
-    // --- GLOBAL MOUSE EVENTS ---
     document.addEventListener('mousemove', (e) => {
         if(!dragType) return;
         if(dragType === 'handle') {
@@ -774,7 +744,6 @@ INDEX_HTML = '''
         dragType = null; activeObj = null; 
     });
     
-    // --- UI ACTIONS ---
     function selectBubble(el) { 
         if(selectedBubble) selectedBubble.classList.remove('selected'); 
         selectedBubble = el; el.classList.add('selected'); 
@@ -933,6 +902,23 @@ def regen():
     gen = EnhancedComicGenerator(sid)
     return jsonify(regen_frame_gpu(gen.video_path, gen.frames_dir, gen.metadata_path, d['filename'], d['direction']))
 
+@app.route('/goto_timestamp', methods=['POST'])
+def go_time():
+    sid = request.args.get('sid')
+    d = request.get_json()
+    gen = EnhancedComicGenerator(sid)
+    return jsonify(get_frame_at_ts_gpu(gen.video_path, gen.frames_dir, gen.metadata_path, d['filename'], float(d['timestamp'])))
+
+@app.route('/replace_panel', methods=['POST'])
+def rep_panel():
+    sid = request.args.get('sid')
+    f = request.files['image']
+    frames_dir = os.path.join(BASE_USER_DIR, sid, 'frames')
+    os.makedirs(frames_dir, exist_ok=True)
+    fname = f"replaced_{int(time.time() * 1000)}.png"
+    f.save(os.path.join(frames_dir, fname))
+    return jsonify({'success': True, 'new_filename': fname})
+
 @app.route('/save_comic', methods=['POST'])
 def save_comic():
     sid = request.args.get('sid')