Update app_enhanced.py

app_enhanced.py

@@ -4,8 +4,12 @@ import time
 import threading
 import json
 import traceback
+import logging
+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
@@ -16,17 +20,27 @@ from flask import Flask, jsonify, request, send_from_directory, send_file
 @spaces.GPU
 def gpu_warmup():
     import torch
-    return torch.cuda.is_available()
+    print(f"✅ ZeroGPU Warmup: CUDA Available: {torch.cuda.is_available()}")
+    return True
 
 # ======================================================
-# 💾 STORAGE SETUP
+# 💾 PERSISTENT STORAGE CONFIGURATION
 # ======================================================
-BASE_STORAGE_PATH = '/data' if os.path.exists('/data') else '.'
+if os.path.exists('/data'):
+    BASE_STORAGE_PATH = '/data'
+    print("✅ Using Persistent Storage at /data")
+else:
+    BASE_STORAGE_PATH = '.'
+    print("⚠️ Using Ephemeral/Local Storage")
+
 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)
 
 # ======================================================
-# 🔧 JSON SANITIZER (FIX FOR int64 SERIALIZATION ERROR)
+# 🔧 UTILS & SANITIZATION (FIX FOR int64 ERROR)
 # ======================================================
 def sanitize_json(obj):
     if isinstance(obj, dict):
@@ -42,17 +56,61 @@ def sanitize_json(obj):
     return obj
 
 # ======================================================
-# 🧠 CORE GPU GENERATOR
+# 🧱 DATA CLASSES
+# ======================================================
+def bubble(dialog="", bubble_offset_x=50, bubble_offset_y=20, 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)
 def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages):
+    # Heavy AI imports inside to prevent startup timeout
+    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.quality_color_enhancer import QualityColorEnhancer
     from backend.subtitles.subs_real import get_real_subtitles
     from backend.ai_bubble_placement import ai_bubble_placer
     from backend.ai_enhanced_core import face_detector
 
     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
@@ -61,150 +119,207 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     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)
+        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\nDialogue...\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 = []
 
+    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]
+
+    # SETTING 5 PANELS PER PAGE
     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})
+    total_panels_needed = target_pages * panels_per_page
+
+    selected_moments = []
+    if not raw_moments:
+        times = np.linspace(1, max(1.1, duration-1), total_panels_needed)
+        for t in times: selected_moments.append({'text': '', 'start': t, 'end': t+1})
+    elif len(raw_moments) <= total_panels_needed:
+        selected_moments = raw_moments
+        while len(selected_moments) < total_panels_needed:
+            selected_moments.append({'text': '', 'start': duration/2, 'end': duration/2+1})
     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(raw_moments) - 1, total_panels_needed, dtype=int)
+        selected_moments = [raw_moments[i] for i in indices]
+        
     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)
+    count = 0
+    frame_files_ordered = []
+
+    for i, moment in enumerate(selected_moments):
+        mid = (moment['start'] + moment['end']) / 2
+        cap.set(cv2.CAP_PROP_POS_MSEC, mid * 1000)
         ret, frame = cap.read()
         if ret:
-            fname = f"frame_{i:04d}.png"
+            fname = f"frame_{count:04d}.png"
             p = os.path.join(frames_dir, fname)
             cv2.imwrite(p, frame)
-            frame_metadata[fname] = {'dialogue': m['text'], 'time': m['start']}
-            frame_files.append(fname)
+            frame_metadata[fname] = {'dialogue': moment['text'], 'time': mid}
+            frame_files_ordered.append(fname)
+            count += 1
     cap.release()
 
-    with open(metadata_path, 'w') as f:
+    with open(metadata_path, 'w') as f: 
         json.dump(sanitize_json(frame_metadata), f)
-
+        
     try: black_bar_crop() 
     except: pass
 
+    # AI Enhancement
     se = SimpleColorEnhancer()
-    pages_data = []
-    for p_idx in range(target_pages):
-        p_p, p_b = [], []
-        start = p_idx * 5
-        for i in range(start, start + 5):
-            if i >= len(frame_files): break
-            f_name = frame_files[i]
-            img_p = os.path.join(frames_dir, f_name)
-            try: se.enhance_single(img_p, img_p)
-            except: pass
+    qe = QualityColorEnhancer()
+
+    for f in frame_files_ordered:
+        p = os.path.join(frames_dir, f)
+        try: se.enhance_single(p, p)
+        except: pass
+        try: qe.enhance_single(p, p)
+        except: pass
+        
+    bubbles_list = []
+    for f in frame_files_ordered:
+        p = os.path.join(frames_dir, f)
+        dialogue = frame_metadata.get(f, {}).get('dialogue', '')
+        
+        try:
+            faces = face_detector.detect_faces(p)
+            lip = face_detector.get_lip_position(p, faces[0]) if faces else (-1, -1)
+            bx, by = ai_bubble_placer.place_bubble_ai(p, lip)
+            b = bubble(dialog=dialogue, bubble_offset_x=bx, bubble_offset_y=by, lip_x=lip[0], lip_y=lip[1])
+            bubbles_list.append(b)
+        except:
+            bubbles_list.append(bubble(dialog=dialogue))
             
-            txt = frame_metadata[f_name]['dialogue']
-            try:
-                faces = face_detector.detect_faces(img_p)
-                lip = face_detector.get_lip_position(img_p, faces[0]) if faces else (-1, -1)
-                bx, by = ai_bubble_placer.place_bubble_ai(img_p, lip)
-                item = {'dialog': txt, 'x': bx, 'y': by}
-            except:
-                item = {'dialog': txt, 'x': 50, 'y': 25}
+    pages = []
+    for i in range(target_pages):
+        start_idx = i * 5
+        end_idx = start_idx + 5
+        p_frames = frame_files_ordered[start_idx:end_idx]
+        p_bubbles = bubbles_list[start_idx:end_idx]
+        if p_frames:
+            pages.append({
+                'panels': [panel(image=f).__dict__ for f in p_frames],
+                'bubbles': [b if isinstance(b, dict) else b.__dict__ for b in p_bubbles]
+            })
             
-            p_p.append({'image': f_name})
-            p_b.append(item)
-        pages_data.append({'panels': p_p, 'bubbles': p_b})
+    return sanitize_json(pages)
 
-    return sanitize_json(pages_data)
+@spaces.GPU
+def regen_frame_gpu(video_path, frames_dir, metadata_path, fname, direction):
+    import cv2
+    import json
+    from backend.simple_color_enhancer import SimpleColorEnhancer
+    with open(metadata_path, 'r') as f: meta = json.load(f)
+    t = meta[fname]['time']
+    cap = cv2.VideoCapture(video_path)
+    fps = cap.get(cv2.CAP_PROP_FPS) or 25
+    new_t = max(0, t + ((1.0/fps) * (1 if direction == 'forward' else -1)))
+    cap.set(cv2.CAP_PROP_POS_MSEC, new_t * 1000)
+    ret, frame = cap.read()
+    if ret:
+        cv2.imwrite(os.path.join(frames_dir, fname), frame)
+        SimpleColorEnhancer().enhance_single(os.path.join(frames_dir, fname), os.path.join(frames_dir, fname))
+        meta[fname]['time'] = new_t
+        with open(metadata_path, 'w') as f: json.dump(sanitize_json(meta), f)
+        return {"success": True}
+    return {"success": False}
+
+@spaces.GPU
+def get_frame_at_ts_gpu(video_path, frames_dir, metadata_path, fname, ts):
+    import cv2
+    import json
+    from backend.simple_color_enhancer import SimpleColorEnhancer
+    cap = cv2.VideoCapture(video_path)
+    cap.set(cv2.CAP_PROP_POS_MSEC, float(ts) * 1000)
+    ret, frame = cap.read()
+    if ret:
+        cv2.imwrite(os.path.join(frames_dir, fname), frame)
+        SimpleColorEnhancer().enhance_single(os.path.join(frames_dir, fname), os.path.join(frames_dir, fname))
+        if os.path.exists(metadata_path):
+            with open(metadata_path, 'r') as f: meta = json.load(f)
+            meta[fname]['time'] = float(ts)
+            with open(metadata_path, 'w') as f: json.dump(sanitize_json(meta), f)
+        return {"success": True}
+    return {"success": False}
 
 # ======================================================
-# 🔧 APP ENGINE
+# 💻 BACKEND MANAGER
 # ======================================================
-app = Flask(__name__)
-
-@app.route('/')
-def index(): return INDEX_HTML
-
-@app.route('/uploader', methods=['POST'])
-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')
-    os.makedirs(f_dir, exist_ok=True); os.makedirs(o_dir, exist_ok=True)
-    vid_p = os.path.join(u_dir, 'video.mp4')
-    request.files['file'].save(vid_p)
-    pages = request.form.get('pages', 2)
-
-    def task():
+class EnhancedComicGenerator:
+    def __init__(self, sid):
+        self.sid = sid
+        self.user_dir = os.path.join(BASE_USER_DIR, sid)
+        self.video_path = os.path.join(self.user_dir, 'uploaded.mp4')
+        self.frames_dir = os.path.join(self.user_dir, 'frames')
+        self.output_dir = os.path.join(self.user_dir, 'output')
+        os.makedirs(self.frames_dir, exist_ok=True)
+        os.makedirs(self.output_dir, exist_ok=True)
+        self.metadata_path = os.path.join(self.frames_dir, 'frame_metadata.json')
+
+    def cleanup(self):
+        if os.path.exists(self.user_dir): shutil.rmtree(self.user_dir)
+        os.makedirs(self.frames_dir, exist_ok=True)
+        os.makedirs(self.output_dir, exist_ok=True)
+
+    def run(self, target_pages):
         try:
-            with open(os.path.join(o_dir, 'status.json'), 'w') as f:
-                json.dump({'message': 'Generating Pro 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:
-                json.dump({'message': 'Complete', 'progress': 100}, f)
+            self.write_status("GPU Engine Running...", 15)
+            data = generate_comic_gpu(self.video_path, self.user_dir, self.frames_dir, self.metadata_path, target_pages)
+            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:
-            with open(os.path.join(o_dir, 'status.json'), 'w') as f:
-                json.dump({'message': f'Error: {str(e)}', 'progress': -1}, f)
-
-    threading.Thread(target=task).start()
-    return jsonify({'success': True})
-
-@app.route('/status')
-def status():
-    sid = request.args.get('sid')
-    p = os.path.join(BASE_USER_DIR, sid, 'output', 'status.json')
-    if os.path.exists(p): return send_file(p)
-    return jsonify({'progress': 0, 'message': 'Initializing...'})
+            traceback.print_exc()
+            self.write_status(f"Error: {str(e)}", -1)
 
-@app.route('/frames/<sid>/<path:filename>')
-def get_frame(sid, filename):
-    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'frames'), filename)
-
-@app.route('/output/<sid>/<path:filename>')
-def get_output(sid, filename):
-    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
+    def write_status(self, msg, prog):
+        with open(os.path.join(self.output_dir, 'status.json'), 'w') as f:
+            json.dump({'message': msg, 'progress': prog}, f)
 
 # ======================================================
-# 🌐 UI HTML (100% ZOOM INTEGRATED)
+# 🌐 UI (LATEST GEOMETRIC TEMPLATE)
 # ======================================================
 INDEX_HTML = '''
 <!DOCTYPE html><html lang="en">
 <head>
-    <meta charset="UTF-8"><title>Pro Comic Generator (100% Zoom)</title>
+    <meta charset="UTF-8"><title>Elite Geometric Comic 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>
+        /* ⚡ GEOMETRIC PARALLEL COORDINATES ⚡ */
         :root {
             --w: 1000px;
             --h: 700px;
             --tierY: 350px;
-            --gut: 5.25px; 
+            --gut: 5.25px; /* Half of 10.5px Gutter */
+            --hairline: 0.1px;
             
             --r1-topX: 641.2px;
             --r1-botX: 588.2px;
+            
             --r2L-topX: 284.2px;
             --r2L-botX: 314.2px;
+            
             --r2R-topX: 618.2px;
             --r2R-botX: 678.2px;
         }
 
-        body { background: #0a0a0b; font-family: 'Lato', sans-serif; margin: 0; padding: 20px; color: white; }
-        .setup-box { max-width: 450px; margin: 80px auto; background: white; padding: 40px; border-radius: 12px; color: black; text-align: center; }
+        * { box-sizing: border-box; }
+        body { background: #000; font-family: 'Lato', sans-serif; margin: 0; padding: 20px; color: white; }
         
+        #upload-container { display: flex; flex-direction:column; justify-content: center; align-items: center; min-height: 80vh; }
+        .upload-box { max-width: 450px; width: 100%; padding: 40px; background: white; border-radius: 12px; text-align: center; color: black; }
+        
+        #editor-container { display: none; padding-bottom: 150px; }
+        
+        /* THE PERFECT GEOMETRIC PAGE */
         .comic-page { 
             background: white; width: var(--w); height: var(--h); margin: 40px auto; 
             border: 12px solid black; position: relative; overflow: hidden;
@@ -212,124 +327,155 @@ INDEX_HTML = '''
         }
 
         .panel { position: absolute; background: #000; overflow: hidden; cursor: pointer; border: 1px solid black; }
-        
-        /* ⚡ 100% ZOOM SETTINGS ⚡ */
         .panel img { 
-            width: 100%; 
-            height: 100%; 
-            object-fit: cover; 
-            position: absolute; 
-            top: 0; 
-            left: 0; 
-            pointer-events: none; 
+            width: 112%; height: 112%; object-fit: cover; position: absolute; 
+            top: -6%; left: -6%; object-position: center 15%; pointer-events: none; 
         }
 
-        /* ROW 1 */
+        /* 📐 POLYGON CLIPPING 📐 */
         .p1 { top: 0; left: 0; width: 100%; height: var(--tierY); clip-path: polygon(0 0, calc(var(--r1-topX) - var(--gut)) 0, calc(var(--r1-botX) - var(--gut)) var(--tierY), 0 var(--tierY)); }
         .p2 { top: 0; left: 0; width: 100%; height: var(--tierY); clip-path: polygon(calc(var(--r1-topX) + var(--gut)) 0, var(--w) 0, var(--w) var(--tierY), calc(var(--r1-botX) + var(--gut)) var(--tierY)); }
         
-        /* ROW 2 */
         .p3 { top: calc(var(--tierY) + var(--gut)); left: 0; width: 100%; height: calc(var(--h) - var(--tierY)); clip-path: polygon(0 0, calc(var(--r2L-topX) - var(--gut)) 0, calc(var(--r2L-botX) - var(--gut)) 100%, 0 100%); }
         .p4 { top: calc(var(--tierY) + var(--gut)); left: 0; width: 100%; height: calc(var(--h) - var(--tierY)); clip-path: polygon(calc(var(--r2L-topX) + var(--gut)) 0, calc(var(--r2R-topX) - var(--gut)) 0, calc(var(--r2R-botX) - var(--gut)) 100%, calc(var(--r2L-botX) + var(--gut)) 100%); }
         .p5 { top: calc(var(--tierY) + var(--gut)); left: 0; width: 100%; height: calc(var(--h) - var(--tierY)); clip-path: polygon(calc(var(--r2R-topX) + var(--gut)) 0, var(--w) 0, var(--w) 100%, calc(var(--r2R-botX) + var(--gut)) 100%); }
 
-        .bubble { 
+        /* BUBBLE STYLE - CAPSULE WITH BEAKED TAIL */
+        .speech-bubble { 
             position: absolute; background: white; border: 2.5px solid black; border-radius: 25px;
             padding: 10px 18px; font-family: 'Comic Neue'; font-weight: bold; font-size: 15px;
             color: black; min-width: 110px; text-align: center; cursor: move; z-index: 100;
             box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
         }
-        .bubble::after { content: ""; position: absolute; bottom: -15px; left: 30px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid black; }
-        .bubble::before { content: ""; position: absolute; bottom: -11px; left: 31px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 14px solid white; z-index: 2; }
+        .speech-bubble::after { content: ""; position: absolute; bottom: -15px; left: 30px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid black; }
+        .speech-bubble::before { content: ""; position: absolute; bottom: -11px; left: 31px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 14px solid white; z-index: 2; }
+        .bubble-text { word-wrap: break-word; pointer-events: none; }
 
-        .controls { position: fixed; bottom: 20px; right: 20px; background: #000; padding: 25px; border-radius: 12px; width: 240px; border: 2px solid #333; z-index: 2000; }
+        .edit-controls { position: fixed; bottom: 20px; right: 20px; background: #000; padding: 25px; border-radius: 12px; width: 260px; border: 2px solid #333; z-index: 2000; }
         button { width: 100%; padding: 12px; margin-top: 10px; cursor: pointer; font-weight: bold; border-radius: 6px; border: none; }
-        .btn-gen { background: #00d2ff; color: black; }
+        .action-btn { background: #00d2ff; color: black; }
         .hidden { display: none; }
-        .loader { border: 5px solid #333; border-top: 5px solid #00d2ff; border-radius: 50%; width: 35px; height: 35px; animation: spin 1s linear infinite; margin: 20px auto; }
+        .loader { border: 5px solid #333; border-top: 5px solid #00d2ff; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     </style>
 </head>
 <body>
-    <div id="u-zone" class="setup-box">
-        <h1>🎬 Pro Comic Maker</h1>
-        <p>100% Zoom / Zero Crop Mode</p>
-        <input type="file" id="vid" accept="video/mp4"><br><br>
-        <label>Total Pages: </label><input type="number" id="pg" value="2" style="width:40px"><br><br>
-        <button class="btn-gen" onclick="start()">🚀 GENERATE COMIC</button>
-        <div id="loading" class="hidden"><div class="loader"></div><p id="st">Working...</p></div>
+    <div id="upload-container">
+        <div class="upload-box">
+            <h1>🎬 Pro Comic Maker</h1>
+            <input type="file" id="vid-input" accept="video/mp4"><br><br>
+            <label>Pages: </label><input type="number" id="pg-count" value="2" style="width:50px"><br><br>
+            <button class="action-btn" onclick="upload()">🚀 GENERATE COMIC</button>
+            <div id="loading-view" class="hidden"><div class="loader"></div><p id="status-text">Warming GPU...</p></div>
+        </div>
     </div>
 
-    <div id="editor-zone" class="hidden">
-        <div id="output"></div>
-        <div class="controls">
-            <button onclick="addB()" style="background:#2ecc71; color:white;">💬 Add Bubble</button>
+    <div id="editor-container">
+        <div id="comic-output"></div>
+        <div class="edit-controls">
+            <button onclick="addBubble()" style="background:#2ecc71; color:white;">💬 Add Text Box</button>
             <button onclick="exportPNG()" style="background:#3498db; color:white;">📥 Download PNGs</button>
-            <button onclick="location.reload()" style="background:#e74c3c; color:white;">🏠 Reset</button>
+            <button onclick="location.reload()" style="background:#e74c3c; color:white;">🏠 Start New</button>
         </div>
     </div>
 
 <script>
     let sid = 's' + Math.random().toString(36).substr(2,9);
-    let selP = null;
+    let selectedPanel = null, isDragging = false, startX, startY, initX, initY, selectedBubble = null;
 
-    async function start() {
-        const f = document.getElementById('vid').files[0];
-        if(!f) return alert("Select video!");
-        document.getElementById('loading').classList.remove('hidden');
-        const fd = new FormData(); fd.append('file', f); fd.append('pages', document.getElementById('pg').value);
+    async function upload() {
+        const f = document.getElementById('vid-input').files[0];
+        if(!f) return alert("Select a video!");
+        document.getElementById('loading-view').classList.remove('hidden');
+        const fd = new FormData(); fd.append('file', f); fd.append('pages', document.getElementById('pg-count').value);
         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('st').innerText = d.message || "Working...";
-            if(d.progress >= 100) { clearInterval(itv); load(); }
-        }, 2000);
+            document.getElementById('status-text').innerText = d.message || "Working...";
+            if(d.progress >= 100) { clearInterval(itv); loadComic(); }
+        }, 3000);
     }
 
-    async function load() {
+    async function loadComic() {
         const r = await fetch(`/output/${sid}/pages.json`); const pages = await r.json();
-        document.getElementById('u-zone').classList.add('hidden');
-        document.getElementById('editor-zone').classList.remove('hidden');
-        const out = document.getElementById('output');
+        document.getElementById('upload-container').style.display = 'none';
+        document.getElementById('editor-container').style.display = 'block';
+        const out = document.getElementById('comic-output');
         pages.forEach(p => {
             const pgDiv = document.createElement('div'); pgDiv.className = 'comic-page';
             p.panels.forEach((pan, i) => {
                 const pDiv = document.createElement('div'); pDiv.className = 'panel p' + (i+1);
-                pDiv.onclick = (e) => { e.stopPropagation(); selP=pDiv; };
+                pDiv.onclick = (e) => { e.stopPropagation(); if(selectedPanel) selectedPanel.style.outline="none"; selectedPanel=pDiv; pDiv.style.outline="5px solid #00d2ff"; };
                 const img = document.createElement('img'); img.src = `/frames/${sid}/${pan.image}`;
                 pDiv.appendChild(img);
-                if(p.bubbles[i]) pDiv.appendChild(createB(p.bubbles[i].dialog, p.bubbles[i].x, p.bubbles[i].y));
+                if(p.bubbles[i]) pDiv.appendChild(createBubbleUI(p.bubbles[i].dialog, p.bubbles[i].x, p.bubbles[i].y));
                 pgDiv.appendChild(pDiv);
             });
             out.appendChild(pgDiv);
         });
     }
 
-    function createB(txt, x, y) {
-        const b = document.createElement('div'); b.className = 'bubble';
-        b.innerText = txt || '...'; b.style.left = (x || 50) + 'px'; b.style.top = (y || 20) + 'px';
+    function createBubbleUI(txt, x, y) {
+        const b = document.createElement('div'); b.className = 'speech-bubble';
+        b.innerHTML = `<div class="bubble-text">${txt || '...'}</div>`;
+        b.style.left = (x || 50) + 'px'; b.style.top = (y || 20) + 'px';
         b.onmousedown = (e) => {
             e.stopPropagation();
-            let ox = e.clientX - b.offsetLeft, oy = e.clientY - b.offsetTop;
-            document.onmousemove = (ev) => { b.style.left=(ev.clientX-ox)+'px'; b.style.top=(ev.clientY-oy)+'px'; };
-            document.onmouseup = () => { document.onmousemove = null; };
+            if(selectedBubble) selectedBubble.style.boxShadow="4px 4px 0 rgba(0,0,0,0.1)";
+            selectedBubble = b; b.style.boxShadow="0 0 15px #00d2ff";
+            isDragging = true; startX = e.clientX; startY = e.clientY; initX = b.offsetLeft; initY = b.offsetTop;
         };
-        b.ondblclick = () => { let n = prompt("Edit text:", b.innerText); if(n) b.innerText = n; };
+        b.ondblclick = () => { const n = prompt("Edit text:", b.innerText); if(n) b.querySelector('.bubble-text').innerText = n; };
         return b;
     }
 
-    function addB() { if(selP) selP.appendChild(createB("Dialogue", 60, 60)); }
+    document.addEventListener('mousemove', (e) => { if(isDragging && selectedBubble) { selectedBubble.style.left = (initX + e.clientX - startX) + 'px'; selectedBubble.style.top = (initY + e.clientY - startY) + 'px'; } });
+    document.addEventListener('mouseup', () => isDragging = false);
+
+    function addBubble() { if(selectedPanel) selectedPanel.appendChild(createBubbleUI("New Text", 60, 60)); else alert("Select a panel first!"); }
 
     async function exportPNG() {
         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='ComicPage.png'; l.href=url; l.click();
+            const l = document.createElement('a'); l.download='Comic_Page.png'; l.href=url; l.click();
         }
     }
 </script>
 </body></html>
 '''
 
+# ======================================================
+# ⚡ ROUTES
+# ======================================================
+@app.route('/')
+def index(): return INDEX_HTML
+
+@app.route('/uploader', methods=['POST'])
+def uploader():
+    sid = request.args.get('sid')
+    mgr = ComicGenerator(sid)
+    mgr.cleanup()
+    f = request.files['file']
+    f.save(mgr.video_path)
+    threading.Thread(target=mgr.run, args=(request.form.get('pages', 2),)).start()
+    return jsonify({'success': True})
+
+@app.route('/status')
+def status():
+    sid = request.args.get('sid')
+    p = os.path.join(BASE_USER_DIR, sid, 'output', 'status.json')
+    if os.path.exists(p): return send_file(p)
+    return jsonify({'progress': 0})
+
+@app.route('/frames/<sid>/<path:filename>')
+def get_frame(sid, filename):
+    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'frames'), filename)
+
+@app.route('/output/<sid>/<path:filename>')
+def get_output(sid, filename):
+    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
+
 if __name__ == '__main__':
     try: gpu_warmup()
     except: pass