Update app_enhanced.py

app_enhanced.py

@@ -1,4 +1,5 @@
-import spaces  # <--- CRITICAL: MUST BE THE FIRST IMPORT
+import spaces # <--- MUST BE LINE 1
+import torch
 import os
 import time
 import threading
@@ -9,153 +10,66 @@ import string
 import random
 import shutil
 import cv2
-import math
 import numpy as np
 import srt
 from flask import Flask, jsonify, request, send_from_directory, send_file
 
 # ======================================================
-# 🚀 ZEROGPU CONFIGURATION
+# 🧠 ZERO GPU FUNCTIONS (Must be top-level)
 # ======================================================
-@spaces.GPU
-def gpu_warmup():
-    import torch
-    print(f"✅ ZeroGPU Warmup: CUDA Available: {torch.cuda.is_available()}")
-    return True
-
-# ======================================================
-# 💾 PERSISTENT STORAGE CONFIGURATION
-# ======================================================
-if os.path.exists('/data'):
-    BASE_STORAGE_PATH = '/data'
-else:
-    BASE_STORAGE_PATH = '.'
-
-BASE_USER_DIR = os.path.join(BASE_STORAGE_PATH, "userdata")
-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)
-
-# ======================================================
-# 🧱 DATA CLASSES
-# ======================================================
-def bubble(dialog="", bubble_offset_x=-1, bubble_offset_y=-1, lip_x=-1, lip_y=-1, emotion='normal', type='speech'):
-    return {
-        'dialog': dialog,
-        'bubble_offset_x': int(bubble_offset_x),
-        'bubble_offset_y': int(bubble_offset_y),
-        'lip_x': int(lip_x),
-        'lip_y': int(lip_y),
-        'emotion': emotion,
-        'type': type,
-        'tail_pos': '50%',
-        'classes': f'speech-bubble {type} tail-bottom'
-    }
-
-def panel(image=""):
-    return {'image': image}
-
-class Page:
-    def __init__(self, panels, bubbles):
-        self.panels = panels
-        self.bubbles = bubbles
-
-# ======================================================
-# 🔧 APP CONFIG
-# ======================================================
-logging.basicConfig(level=logging.INFO)
-logger = logging.getLogger(__name__)
 
-app = Flask(__name__)
-
-def generate_save_code(length=8):
-    chars = string.ascii_uppercase + string.digits
-    while True:
-        code = ''.join(random.choices(chars, k=length))
-        if not os.path.exists(os.path.join(SAVED_COMICS_DIR, code)):
-            return code
-
-# ======================================================
-# 🧠 GLOBAL GPU FUNCTIONS
-# ======================================================
-@spaces.GPU(duration=300)
+@spaces.GPU(duration=120)
 def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages, panels_per_page_req):
-    import cv2
-    import srt
-    import numpy as np
-    
+    """ZeroGPU task to extract frames and process video"""
     cap = cv2.VideoCapture(video_path)
     if not cap.isOpened(): raise Exception("Cannot open video")
+    
     fps = cap.get(cv2.CAP_PROP_FPS) or 25
     total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
     duration = total_frames / fps
     cap.release()
 
-    user_srt = os.path.join(user_dir, 'subs.srt')
-    # Simple SRT parsing logic
-    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 = []
-
-    valid_subs = [s for s in all_subs if s.content.strip()]
-    raw_moments = [{'text': s.content, 'start': s.start.total_seconds(), 'end': s.end.total_seconds()} for s in valid_subs]
-
+    # Create dummy subtitle logic for this standalone version
     target_pages = int(target_pages)
     panels_per_page = int(panels_per_page_req)
     total_panels_needed = target_pages * panels_per_page
 
-    selected_moments = []
-    if not raw_moments:
-        times = np.linspace(1, max(1, duration-1), total_panels_needed)
-        for t in times: selected_moments.append({'text': '', 'start': t, 'end': t+1})
-    else:
-        indices = np.linspace(0, len(raw_moments) - 1, total_panels_needed, dtype=int)
-        selected_moments = [raw_moments[i] for i in indices]
-        
+    # Uniformly pick timestamps
+    times = np.linspace(1, max(1, duration-1), total_panels_needed)
+    
     frame_metadata = {}
     cap = cv2.VideoCapture(video_path)
-    count = 0
     frame_files_ordered = []
 
-    for i, moment in enumerate(selected_moments):
-        mid = (moment['start'] + moment['end']) / 2
-        cap.set(cv2.CAP_PROP_POS_FRAMES, int(mid * fps))
+    for i, t in enumerate(times):
+        cap.set(cv2.CAP_PROP_POS_MSEC, t * 1000)
         ret, frame = cap.read()
         if ret:
-            fname = f"frame_{count:04d}.png"
+            fname = f"frame_{i:04d}.png"
             p = os.path.join(frames_dir, fname)
             cv2.imwrite(p, frame)
-            frame_metadata[fname] = {'dialogue': moment['text'], 'time': mid}
+            frame_metadata[fname] = {'dialogue': f"Dialogue {i+1}", 'time': t}
             frame_files_ordered.append(fname)
-            count += 1
     cap.release()
 
-    with open(metadata_path, 'w') as f: json.dump(frame_metadata, f, indent=2)
+    with open(metadata_path, 'w') as f:
+        json.dump(frame_metadata, f)
         
-    bubbles_list = []
-    for f in frame_files_ordered:
-        dialogue = frame_metadata.get(f, {}).get('dialogue', '')
-        bubbles_list.append(bubble(dialog=dialogue, type='speech'))
-            
     pages = []
     for i in range(target_pages):
         start_idx = i * panels_per_page
         end_idx = start_idx + panels_per_page
         p_frames = frame_files_ordered[start_idx:end_idx]
-        p_bubbles = bubbles_list[start_idx:end_idx]
         if p_frames:
-            pg_panels = [panel(image=f) for f in p_frames]
-            pages.append({'panels': pg_panels, 'bubbles': p_bubbles})
-        
+            pg_panels = [{'image': f} for f in p_frames]
+            # Create a simple bubble for each panel
+            pg_bubbles = [{'dialog': frame_metadata[f]['dialogue'], 'type': 'speech'} for f in p_frames]
+            pages.append({'panels': pg_panels, 'bubbles': pg_bubbles})
     return pages
 
 @spaces.GPU
 def regen_frame_gpu(video_path, frames_dir, metadata_path, fname, direction):
-    import cv2
-    import json
+    """ZeroGPU task to shift frame time slightly"""
     with open(metadata_path, 'r') as f: meta = json.load(f)
     t = meta[fname]['time']
     cap = cv2.VideoCapture(video_path)
@@ -168,13 +82,19 @@ def regen_frame_gpu(video_path, frames_dir, metadata_path, fname, direction):
     if ret:
         cv2.imwrite(os.path.join(frames_dir, fname), frame)
         meta[fname]['time'] = new_t
-        with open(metadata_path, 'w') as f: json.dump(meta, f, indent=2)
+        with open(metadata_path, 'w') as f: json.dump(meta, f)
         return {"success": True}
     return {"success": False}
 
 # ======================================================
-# 💻 BACKEND CLASS
+# 💾 APP CONFIG & STORAGE
 # ======================================================
+BASE_STORAGE_PATH = '/data' if os.path.exists('/data') else '.'
+BASE_USER_DIR = os.path.join(BASE_STORAGE_PATH, "userdata")
+os.makedirs(BASE_USER_DIR, exist_ok=True)
+
+app = Flask(__name__)
+
 class EnhancedComicGenerator:
     def __init__(self, sid):
         self.sid = sid
@@ -188,8 +108,10 @@ class EnhancedComicGenerator:
 
     def run(self, target_pages, panels_per_page):
         try:
+            self.write_status("Running on GPU...", 20)
             data = generate_comic_gpu(self.video_path, self.user_dir, self.frames_dir, self.metadata_path, target_pages, panels_per_page)
-            with open(os.path.join(self.output_dir, 'pages.json'), 'w') as f: json.dump(data, f, indent=2)
+            with open(os.path.join(self.output_dir, 'pages.json'), 'w') as f:
+                json.dump(data, f)
             self.write_status("Complete!", 100)
         except Exception as e:
             self.write_status(f"Error: {str(e)}", -1)
@@ -199,215 +121,149 @@ class EnhancedComicGenerator:
             json.dump({'message': msg, 'progress': prog}, f)
 
 # ======================================================
-# 🌐 ROUTES & FULL UI
+# 🌐 UI & TEMPLATE (With Vertical Tilt)
 # ======================================================
 INDEX_HTML = '''
-<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>🎬 Vertical Tilt 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=Lato&display=swap" rel="stylesheet"> <style>
-    * { box-sizing: border-box; }
-    body { background-color: #fdf6e3; font-family: 'Lato', sans-serif; margin: 0; }
-    
-    #upload-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }
-    .upload-box { max-width: 500px; width: 100%; padding: 40px; background: white; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); text-align: center; }
-    
-    #editor-container { display: none; padding: 20px; padding-bottom: 100px; }
-    
+<!DOCTYPE html><html><head><title>Vertical Tilt Comic</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.min.js"></script>
+<style>
+    body { background: #f0f0f0; font-family: sans-serif; margin: 0; padding: 20px; }
     .comic-page { 
-        background: white; width: 864px; height: 1080px; margin: 20px auto;
-        box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: relative; overflow: hidden; border: 4px solid #000; padding: 10px; 
+        background: white; width: 800px; height: 1000px; margin: 20px auto;
+        position: relative; overflow: hidden; border: 5px solid black; 
     }
-    
-    /* === THE VERTICAL TILT GRID === */
     .comic-grid { width: 100%; height: 100%; position: relative; background: #000; }
-    .panel { position: absolute; top:0; left:0; width: 100%; height: 100%; overflow: hidden; cursor: pointer; }
+    .panel { position: absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; }
     
-    /* Left Panel (1) */
-    .layout-custom-slant .panel:nth-child(1) { 
-        z-index: 2; 
-        clip-path: polygon(0 0, var(--split-t, 45%) 0, var(--split-b, 55%) 100%, 0 100%); 
+    /* VERTICAL TILT CLIPPING */
+    .layout-slant .panel:nth-child(1) { 
+        z-index: 2; clip-path: polygon(0 0, var(--split-t, 45%) 0, var(--split-b, 55%) 100%, 0 100%); 
     }
-    
-    /* Right Panel (2) */
-    .layout-custom-slant .panel:nth-child(2) { 
-        z-index: 1; 
-        clip-path: polygon(var(--split-t, 45%) 0, 100% 0, 100% 100%, var(--split-b, 55%) 100%); 
+    .layout-slant .panel:nth-child(2) { 
+        z-index: 1; clip-path: polygon(var(--split-t, 45%) 0, 100% 0, 100% 100%, var(--split-b, 55%) 100%); 
     }
     
-    .panel.selected { outline: 4px solid #2196F3; z-index: 10; }
+    .panel img { width: 100%; height: 100%; object-fit: cover; }
     
-    /* VERTICAL SPLIT HANDLES (Top and Bottom) */
-    .split-handle {
-        position: absolute; width: 28px; height: 28px; 
-        background: #FF5722; border: 3px solid white; border-radius: 50%;
-        cursor: ew-resize; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.4); 
+    /* DRAG HANDLES */
+    .handle { 
+        position: absolute; width: 30px; height: 30px; background: red; 
+        border-radius: 50%; z-index: 100; cursor: ew-resize; border: 3px solid white;
     }
-    .split-handle.top { top: -14px; left: var(--split-t, 45%); transform: translateX(-50%); }
-    .split-handle.bottom { bottom: -14px; left: var(--split-b, 55%); transform: translateX(-50%); }
+    .handle.top { top: -15px; left: var(--split-t); transform: translateX(-50%); }
+    .handle.bottom { bottom: -15px; left: var(--split-b); transform: translateX(-50%); }
 
-    .panel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.1s; pointer-events: none; }
-    
-    /* BUBBLES */
-    .speech-bubble { 
-        position: absolute; width: 160px; height: 90px; background: #4ECDC4; color: white;
-        border-radius: 1.2em; display: flex; align-items: center; justify-content: center;
-        padding: 10px; font-family: 'Comic Neue', cursive; font-weight: bold; font-size: 14px;
-        text-align: center; cursor: move; z-index: 50; transform: translate(-50%, -50%);
-    }
-    .speech-bubble.selected { outline: 3px dashed #FFEB3B; }
+    .controls { position: fixed; right: 20px; top: 20px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2); }
+    .speech-bubble { position: absolute; padding: 10px; background: white; border: 2px solid black; border-radius: 50%; cursor: move; z-index: 50; transform: translate(-50%, -50%); }
+</style></head><body>
 
-    .edit-controls { position: fixed; bottom: 20px; right: 20px; width: 240px; background: #2c3e50; color: white; padding: 15px; border-radius: 10px; z-index: 999; }
-    .edit-controls button { width: 100%; margin: 5px 0; padding: 8px; font-weight: bold; cursor: pointer; border-radius: 4px; border: none; }
-    .action-btn { background: #27ae60; color: white; }
-    .delete-btn { background: #c0392b; color: white; }
-</style> </head> <body>
-
-<div id="upload-container">
-    <div class="upload-box">
-        <h1>🎬 Vertical Comic Gen</h1>
-        <input type="file" id="file-upload" style="display:none;" onchange="document.getElementById('fn').innerText=this.files[0].name">
-        <button onclick="document.getElementById('file-upload').click()" class="action-btn">📁 Choose Video</button>
-        <p id="fn">No file selected</p>
-        <button class="action-btn" onclick="upload()" style="background:#e67e22">🚀 Generate</button>
-        <div id="loading" style="display:none;">
-            <p id="status-text">Processing...</p>
-        </div>
-    </div>
+<div id="setup">
+    <input type="file" id="vid">
+    <button onclick="start()">Generate Comic</button>
+    <p id="status"></p>
 </div>
 
-<div id="editor-container">
-    <div id="comic-container"></div>
-    <div class="edit-controls">
-        <h4>Panel Editor</h4>
-        <button onclick="addBubble()" class="action-btn">💬 Add Bubble</button>
-        <button onclick="deleteBubble()" class="delete-btn">🗑️ Delete Bubble</button>
-        <button onclick="exportComic()" style="background:#3498db; color:white;">📥 Export PNG</button>
-        <button onclick="location.reload()" class="delete-btn">🏠 Home</button>
+<div id="editor" style="display:none">
+    <div id="pages"></div>
+    <div class="controls">
+        <button onclick="download()">Download PNG</button>
+        <p>Drag the red circles to tilt the panels vertically.</p>
     </div>
 </div>
 
 <script>
-    let sid = 'S' + Math.floor(Math.random()*1000000);
-    let selectedPanel = null, selectedBubble = null, selectedSplitHandle = null;
-    let isDraggingBubble = false, isDraggingSplit = false;
-
-    async function upload() {
-        const f = document.getElementById('file-upload').files[0];
-        if(!f) return alert("Select a video");
-        document.getElementById('loading').style.display='block';
-        const fd = new FormData(); fd.append('file', f); fd.append('target_pages', 2); fd.append('panels_per_page', 2);
+    let sid = "S" + Date.now();
+    let isDragging = false;
+    let currentHandle = null;
+
+    async function start() {
+        const file = document.getElementById('vid').files[0];
+        if(!file) return alert("Select video");
+        const fd = new FormData(); fd.append('file', file); fd.append('target_pages', 2); fd.append('panels_per_page', 2);
         await fetch(`/uploader?sid=${sid}`, {method:'POST', body:fd});
-        const timer = setInterval(async () => {
+        document.getElementById('status').innerText = "Processing on ZeroGPU...";
+        
+        const check = setInterval(async () => {
             const r = await fetch(`/status?sid=${sid}`);
             const d = await r.json();
-            document.getElementById('status-text').innerText = d.message;
-            if(d.progress >= 100) { clearInterval(timer); loadComic(); }
+            document.getElementById('status').innerText = d.message;
+            if(d.progress >= 100) { clearInterval(check); loadEditor(); }
         }, 2000);
     }
 
-    async function loadComic() {
+    async function loadEditor() {
         const r = await fetch(`/output/pages.json?sid=${sid}`);
-        const pages = await r.json();
-        const container = document.getElementById('comic-container');
-        container.innerHTML = '';
-        
-        pages.forEach(pData => {
-            const pageDiv = document.createElement('div');
-            pageDiv.className = 'comic-page';
+        const data = await r.json();
+        const container = document.getElementById('pages');
+        data.forEach(p => {
+            const page = document.createElement('div');
+            page.className = 'comic-page';
             const grid = document.createElement('div');
-            grid.className = 'comic-grid layout-custom-slant';
+            grid.className = 'comic-grid layout-slant';
             grid.style.setProperty('--split-t', '45%');
             grid.style.setProperty('--split-b', '55%');
 
-            // VERTICAL SPLIT HANDLES
-            const hT = document.createElement('div'); hT.className = 'split-handle top';
-            hT.onmousedown = (e) => { isDraggingSplit = true; selectedSplitHandle = { grid, side: 'top' }; };
-            const hB = document.createElement('div'); hB.className = 'split-handle bottom';
-            hB.onmousedown = (e) => { isDraggingSplit = true; selectedSplitHandle = { grid, side: 'bottom' }; };
-            
-            grid.appendChild(hT); grid.appendChild(hB);
+            const hT = document.createElement('div'); hT.className = 'handle top';
+            hT.onmousedown = () => { isDragging = true; currentHandle = {grid, key: '--split-t'}; };
+            const hB = document.createElement('div'); hB.className = 'handle bottom';
+            hB.onmousedown = () => { isDragging = true; currentHandle = {grid, key: '--split-b'}; };
 
-            pData.panels.forEach(pan => {
-                const pDiv = document.createElement('div');
-                pDiv.className = 'panel';
+            p.panels.forEach(pan => {
+                const pDiv = document.createElement('div'); pDiv.className = 'panel';
                 pDiv.innerHTML = `<img src="/frames/${pan.image}?sid=${sid}">`;
-                pDiv.onclick = (e) => { e.stopPropagation(); selectPanel(pDiv); };
                 grid.appendChild(pDiv);
             });
-            pageDiv.appendChild(grid);
-            container.appendChild(pageDiv);
+            
+            grid.appendChild(hT); grid.appendChild(hB);
+            page.appendChild(grid);
+            container.appendChild(page);
         });
-        document.getElementById('upload-container').style.display='none';
-        document.getElementById('editor-container').style.display='block';
-    }
-
-    function selectPanel(el) {
-        if(selectedPanel) selectedPanel.classList.remove('selected');
-        selectedPanel = el;
-        selectedPanel.classList.add('selected');
-    }
-
-    function addBubble() {
-        if(!selectedPanel) return alert("Select a panel");
-        const b = document.createElement('div');
-        b.className = 'speech-bubble';
-        b.innerText = "New Dialogue";
-        b.style.left = '50%'; b.style.top = '50%';
-        b.onmousedown = (e) => { e.stopPropagation(); selectedBubble = b; isDraggingBubble = true; selectBubble(b); };
-        selectedPanel.appendChild(b);
-    }
-
-    function selectBubble(el) {
-        document.querySelectorAll('.speech-bubble').forEach(x => x.classList.remove('selected'));
-        el.classList.add('selected');
-        selectedBubble = el;
+        document.getElementById('setup').style.display = 'none';
+        document.getElementById('editor').style.display = 'block';
     }
 
-    function deleteBubble() { if(selectedBubble) selectedBubble.remove(); }
-
-    document.addEventListener('mousemove', (e) => {
-        if(isDraggingBubble && selectedBubble) {
-            const rect = selectedBubble.parentElement.getBoundingClientRect();
-            selectedBubble.style.left = ((e.clientX - rect.left) / rect.width * 100) + '%';
-            selectedBubble.style.top = ((e.clientY - rect.top) / rect.height * 100) + '%';
-        }
-        if(isDraggingSplit && selectedSplitHandle) {
-            const rect = selectedSplitHandle.grid.getBoundingClientRect();
-            let percent = ((e.clientX - rect.left) / rect.width * 100);
-            percent = Math.max(10, Math.min(90, percent));
-            if(selectedSplitHandle.side === 'top') selectedSplitHandle.grid.style.setProperty('--split-t', percent + '%');
-            else selectedSplitHandle.grid.style.setProperty('--split-b', percent + '%');
-        }
-    });
-
-    document.addEventListener('mouseup', () => { isDraggingBubble = false; isDraggingSplit = false; });
+    window.onmousemove = (e) => {
+        if(!isDragging) return;
+        const rect = currentHandle.grid.getBoundingClientRect();
+        let x = ((e.clientX - rect.left) / rect.width) * 100;
+        x = Math.max(10, Math.min(90, x));
+        currentHandle.grid.style.setProperty(currentHandle.key, x + '%');
+    };
+    window.onmouseup = () => isDragging = false;
 
-    async function exportComic() {
+    async function download() {
         const pages = document.querySelectorAll('.comic-page');
         for(let i=0; i<pages.length; i++) {
-            const imgData = await htmlToImage.toPng(pages[i]);
+            const dataUrl = await htmlToImage.toPng(pages[i]);
             const link = document.createElement('a');
-            link.download = `page-${i+1}.png`; link.href = imgData; link.click();
+            link.download = `page-${i+1}.png`; link.href = dataUrl; link.click();
         }
     }
-</script>
-</body> </html>
+</script></body></html>
 '''
 
+# ======================================================
+# 🚀 FLASK ROUTES
+# ======================================================
+
 @app.route('/')
 def index(): return INDEX_HTML
 
 @app.route('/uploader', methods=['POST'])
-def upload():
+def uploader():
     sid = request.args.get('sid')
     f = request.files['file']
     gen = EnhancedComicGenerator(sid)
     f.save(gen.video_path)
-    threading.Thread(target=gen.run, args=(request.form.get('target_pages', 2), request.form.get('panels_per_page', 2))).start()
-    return jsonify({'success': True})
+    threading.Thread(target=gen.run, args=(2, 2)).start()
+    return jsonify({'status': 'ok'})
 
 @app.route('/status')
 def get_status():
     sid = request.args.get('sid')
-    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), 'status.json')
+    path = os.path.join(BASE_USER_DIR, sid, 'output', 'status.json')
+    if os.path.exists(path): return send_file(path)
+    return jsonify({'message': 'Initializing...', 'progress': 0})
 
 @app.route('/output/<path:filename>')
 def get_output(filename):
@@ -420,4 +276,5 @@ def get_frame(filename):
     return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'frames'), filename)
 
 if __name__ == '__main__':
+    # On Hugging Face, the port must be 7860
     app.run(host='0.0.0.0', port=7860)