app_enhanced.py

import os
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

# ======================================================
# 💾 STORAGE SETUP
# ======================================================
if os.path.exists('/data'):
    BASE_STORAGE_PATH = '/data'
    print("✅ Using Persistent Storage at /data")
else:
    BASE_STORAGE_PATH = '.'
    print("⚠️ Using Ephemeral 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)

app = Flask(__name__)
app.config['MAX_CONTENT_LENGTH'] = 500 * 1024 * 1024

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

# ======================================================
# 🧱 DATA CLASSES
# ======================================================
def bubble(dialog="", x=50, y=20, type='speech'):
    classes = f"speech-bubble {type}"
    if type == 'speech':
        classes += " tail-bottom"
    elif type == 'thought':
        classes += " pos-bl"
    elif type == 'reaction':
        classes += " tail-bottom"
        
    return {
        'dialog': dialog,
        'bubble_offset_x': int(x),
        'bubble_offset_y': int(y),
        'type': type,
        'tail_pos': '50%',
        'classes': classes,
        'colors': {'fill': '#ffffff', 'text': '#000000'},
        'font': "'Comic Neue', cursive"
    }

def panel(image="", time=0.0):
    return {'image': image, 'time': time}

class Page:
    def __init__(self, panels, bubbles):
        self.panels = panels
        self.bubbles = bubbles

# ======================================================
# 🧠 CPU GENERATION (Formerly GPU)
# ======================================================
def generate_comic_cpu(video_path, user_dir, frames_dir, metadata_path, target_pages):
    print(f"🚀 Generating 864x1080 Comic (CPU Mode): {video_path}")
    import cv2
    import srt
    import numpy as np
    # Assuming backend.subtitles.subs_real exists in your file structure. 
    # If not, the try/except block below handles the fallback.
    try:
        from backend.subtitles.subs_real import get_real_subtitles
    except ImportError:
        get_real_subtitles = None
    
    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()

    # Subtitles
    user_srt = os.path.join(user_dir, 'subs.srt')
    try:
        if get_real_subtitles:
            get_real_subtitles(video_path)
            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")
        else:
            raise Exception("Subtitles module missing")
    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, '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()]
    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 = []

    panels_per_page = 4
    total_panels_needed = int(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})
    elif len(raw_moments) <= total_panels_needed:
        selected_moments = raw_moments
    else:
        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)
    count = 0
    frame_files_ordered = []
    frame_times = []

    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:
            frame = cv2.resize(frame, (1920, 1080))
            fname = f"frame_{count:04d}.png"
            p = os.path.join(frames_dir, fname)
            cv2.imwrite(p, frame)
            frame_metadata[fname] = {'dialogue': moment['text'], 'time': mid}
            frame_files_ordered.append(fname)
            frame_times.append(mid)
            count += 1
    cap.release()
    
    with open(metadata_path, 'w') as f: json.dump(frame_metadata, f, indent=2)
        
    bubbles_list = []
    for i, f in enumerate(frame_files_ordered):
        dialogue = frame_metadata.get(f, {}).get('dialogue', '')
        
        # 🎯 STRICT BUBBLE TYPE LOGIC (Prefer Speech)
        b_type = 'speech'
        if '(' in dialogue: 
            b_type = 'narration'
        elif '!' in dialogue and dialogue.isupper() and len(dialogue) < 10: 
            # Only use reaction if VERY short and yelling
            b_type = 'reaction'
        
        # Smart Positioning for 864x1080
        pos_idx = i % 4
        if pos_idx == 0: bx, by = 150, 80
        elif pos_idx == 1: bx, by = 580, 80
        elif pos_idx == 2: bx, by = 150, 600
        elif pos_idx == 3: bx, by = 580, 600
        else: bx, by = 50, 50
            
        bubbles_list.append(bubble(dialog=dialogue, x=bx, y=by, type=b_type))
            
    pages = []
    for i in range(int(target_pages)):
        start_idx = i * 4
        end_idx = start_idx + 4
        p_frames = frame_files_ordered[start_idx:end_idx]
        p_times = frame_times[start_idx:end_idx]
        p_bubbles = bubbles_list[start_idx:end_idx]
        
        while len(p_frames) < 4:
             fname = f"empty_{i}_{len(p_frames)}.png"
             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)
             p_times.append(0.0)
             p_bubbles.append(bubble(dialog="", x=-999, y=-999, type='speech'))

        if p_frames:
            pg_panels = [panel(image=p_frames[j], time=p_times[j]) for j in range(len(p_frames))]
            pages.append(Page(panels=pg_panels, bubbles=p_bubbles))

    result = []
    for pg in pages:
        p_data = [p if isinstance(p, dict) else p.__dict__ for p in pg.panels]
        b_data = [b if isinstance(b, dict) else b.__dict__ for b in pg.bubbles]
        result.append({'panels': p_data, 'bubbles': b_data})

    return result

def regen_frame_cpu(video_path, frames_dir, metadata_path, fname, direction):
    import cv2
    import json
    if not os.path.exists(metadata_path): return {"success": False, "message": "No metadata"}
    with open(metadata_path, 'r') as f: meta = json.load(f)
    
    t = meta[fname]['time'] if isinstance(meta[fname], dict) else meta[fname]
    cap = cv2.VideoCapture(video_path)
    fps = cap.get(cv2.CAP_PROP_FPS) or 25
    offset = (1.0/fps) * (1 if direction == 'forward' else -1)
    new_t = max(0, t + offset)

    cap.set(cv2.CAP_PROP_POS_MSEC, new_t * 1000)
    ret, frame = cap.read()
    cap.release()

    if ret:
        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)
        return {"success": True, "message": f"Time: {new_t:.2f}s", "new_time": new_t}
    return {"success": False}

def get_frame_at_ts_cpu(video_path, frames_dir, metadata_path, fname, ts):
    import cv2
    import json
    cap = cv2.VideoCapture(video_path)
    cap.set(cv2.CAP_PROP_POS_MSEC, float(ts) * 1000)
    ret, frame = cap.read()
    cap.release()

    if ret:
        frame = cv2.resize(frame, (1920, 1080))
        cv2.imwrite(os.path.join(frames_dir, fname), frame)
        if os.path.exists(metadata_path):
            with open(metadata_path, 'r') as f: meta = json.load(f)
            if fname in meta:
                if isinstance(meta[fname], dict): meta[fname]['time'] = float(ts)
                else: meta[fname] = float(ts)
                with open(metadata_path, 'w') as f: json.dump(meta, f, indent=2)
        return {"success": True, "message": f"Jumped to {ts}s", "new_time": float(ts)}
    return {"success": False, "message": "Invalid timestamp"}

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.frames_dir): shutil.rmtree(self.frames_dir)
        if os.path.exists(self.output_dir): shutil.rmtree(self.output_dir)
        os.makedirs(self.frames_dir, exist_ok=True)
        os.makedirs(self.output_dir, exist_ok=True)

    def run(self, target_pages):
        try:
            self.write_status("Generating...", 5)
            # Call CPU function instead of GPU
            data = generate_comic_cpu(self.video_path, self.user_dir, self.frames_dir, self.metadata_path, int(target_pages))
            with open(os.path.join(self.output_dir, 'pages.json'), 'w') as f:
                json.dump(data, f, indent=2)
            self.write_status("Complete!", 100)
        except Exception as e:
            traceback.print_exc()
            self.write_status(f"Error: {str(e)}", -1)

    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)

# ======================================================
# 🌐 ROUTES & 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>864x1080 Robust 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; }
    
    #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; }
    
    #editor-container { 
        display: none; padding: 20px; width: 100%; box-sizing: border-box; 
        padding-bottom: 150px; flex-direction: column; align-items: center; 
    }
    
    h1 { color: #fff; margin-bottom: 20px; }
    .file-input { display: none; }
    .file-label { display: block; padding: 15px; background: #e67e22; color: white; border-radius: 8px; cursor: pointer; font-weight: bold; margin-bottom: 10px; transition:0.2s; }
    .file-label:hover { background: #d35400; }
    
    .page-input-group { margin: 20px 0; text-align: left; }
    .page-input-group label { font-weight: bold; font-size: 14px; display: block; margin-bottom: 5px; color: #ccc; }
    .page-input-group input { width: 100%; padding: 12px; border: 2px solid #555; background: #2c3e50; color: white; border-radius: 8px; font-size: 16px; box-sizing: border-box; }
    
    .submit-btn { width: 100%; padding: 15px; background: #2980b9; color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; }
    .loader { width: 100px; height: 10px; background: #e67e22; margin: 20px auto; animation: load 1s infinite alternate; }
    @keyframes load { from { width: 20px; } to { width: 100px; } }
    
    /* === 864x1080 LAYOUT + WHITE BORDER === */
    .comic-wrapper { 
        max-width: 1000px; margin: 0 auto; 
        display: flex; flex-direction: column; align-items: center; 
        gap: 40px; width: 100%;
    }
    
    .comic-page { 
        width: 864px; 
        height: 1080px; 
        background: white; 
        box-shadow: 0 5px 30px rgba(0,0,0,0.6); 
        position: relative; overflow: hidden; 
        border: 5px solid #ffffff; /* White Page Border */
        flex-shrink: 0;
    }
    
    .comic-grid {
        width: 100%; height: 100%; position: relative; 
        background: #ffffff; /* White Gap */
        --y: 50%; --t1: 100%; --t2: 100%; --b1: 100%; --b2: 100%; 
        --gap: 5px; /* Size of White Gap */
    }
    /* 🎯 BLACK BORDER INSIDE THE PANEL */
    .panel { 
        position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
        overflow: hidden; background: #1a1a1a; cursor: grab;
        border: 2px solid #000; /* Black Inner Border */
        box-sizing: border-box;
    }
    
    .panel img { 
        width: 100%; height: 100%; 
        object-fit: contain; /* 0% Cut */
        transform-origin: center; 
        transition: transform 0.05s ease-out; 
        display: block; 
    }
    .panel img.panning { cursor: grabbing; transition: none; }
    .panel.selected { border: 4px solid #3498db; z-index: 5; }
    /* Clip Paths */
    .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; }
    .panel:nth-child(4) { clip-path: polygon(calc(var(--b1) + var(--gap)) calc(var(--y) + var(--gap)), 100% calc(var(--y) + var(--gap)), 100% 100%, calc(var(--b2) + var(--gap)) 100%); z-index: 1; }
    .handle { position: absolute; width: 26px; height: 26px; border: 3px solid white; border-radius: 50%; transform: translate(-50%, -50%); z-index: 101; cursor: ew-resize; box-shadow: 0 2px 5px rgba(0,0,0,0.8); }
    .h-t1 { background: #3498db; left: var(--t1); top: 0%; margin-top: 15px; }
    .h-t2 { background: #3498db; left: var(--t2); top: 50%; margin-top: -15px; }
    .h-b1 { background: #2ecc71; left: var(--b1); top: 50%; margin-top: 15px; }
    .h-b2 { background: #2ecc71; left: var(--b2); top: 100%; margin-top: -15px; }
    
    /* BUBBLES */
    .speech-bubble { 
        position: absolute; display: flex; justify-content: center; align-items: center; 
        min-width: 60px; min-height: 40px; box-sizing: border-box; 
        z-index: 10; cursor: move; font-weight: bold; text-align: center; 
        overflow: visible; line-height: 1.2; --tail-pos: 50%;
    }
    .bubble-text { 
        padding: 0.8em; word-wrap: break-word; white-space: pre-wrap; 
        width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; 
        border-radius: inherit; pointer-events: none;
    }
    .speech-bubble.selected { outline: 2px dashed #4CAF50; z-index: 100; }
    
    .speech-bubble.speech { --b: 3em; --h: 1.8em; --t: 0.6; --p: var(--tail-pos, 50%); --r: 1.2em; background: var(--bubble-fill, #fff); color: var(--bubble-text, #000); padding: 0; border-radius: var(--r) var(--r) min(var(--r), calc(100% - var(--p) - (1 - var(--t)) * var(--b) / 2)) min(var(--r), calc(var(--p) - (1 - var(--t)) * var(--b) / 2)) / var(--r); }
    .speech-bubble.speech:before { content: ""; position: absolute; width: var(--b); height: var(--h); background: inherit; border-bottom-left-radius: 100%; pointer-events: none; z-index: 1; -webkit-mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0,#0000 99%,#000 101%); mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0,#0000 99%,#000 101%); }
    .speech-bubble.speech.tail-bottom:before { top: 100%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); }
    .speech-bubble.speech.tail-top:before { bottom: 100%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: scaleY(-1); }
    .speech-bubble.speech.tail-left:before { right: 100%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: rotate(90deg); transform-origin: top right; }
    .speech-bubble.speech.tail-right:before { left: 100%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: rotate(-90deg); transform-origin: top left; }
    .speech-bubble.thought { background: var(--bubble-fill, #fff); color: var(--bubble-text, #000); border: 2px dashed #555; border-radius: 50%; }
    .speech-bubble.thought::before { display:none; }
    .thought-dot { position: absolute; background-color: var(--bubble-fill, #fff); border: 2px solid #555; border-radius: 50%; z-index: -1; }
    .thought-dot-1 { width: 15px; height: 15px; bottom:-15px; left:20px; } .thought-dot-2 { width: 10px; height: 10px; bottom:-25px; left:10px; }
    .speech-bubble.thought.pos-bl .thought-dot-1 { left: 20px; bottom: -20px; }
    
    .speech-bubble.reaction { background: #FFD700; border: 3px solid #E53935; color: #D32F2F; font-family: 'Bangers'; text-transform: uppercase; clip-path: polygon(0% 25%, 17% 21%, 17% 0%, 31% 16%, 50% 4%, 69% 16%, 83% 0%, 83% 21%, 100% 25%, 85% 45%, 95% 62%, 82% 79%, 100% 97%, 79% 89%, 60% 98%, 46% 82%, 27% 95%, 15% 78%, 5% 62%, 15% 45%); }
    .speech-bubble.narration { background: #eee; border: 2px solid #000; color: #000; border-radius: 0; font-family: 'Lato'; bottom: 10px; left: 50%; transform: translateX(-50%); }
    
    .resize-handle { position: absolute; bottom:-5px; right:-5px; width:15px; height:15px; background:#3498db; border:1px solid white; cursor:se-resize; display:none; }
    .speech-bubble.selected .resize-handle { display:block; }
    /* CONTROLS */
    .edit-controls { position: fixed; bottom: 20px; right: 20px; width: 280px; background: rgba(44, 62, 80, 0.95); color: white; padding: 15px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); z-index: 900; font-size: 13px; max-height: 90vh; overflow-y: auto; }
    .edit-controls h4 { margin: 0 0 10px 0; color: #4ECDC4; text-align: center; }
    .control-group { margin-top: 10px; border-top: 1px solid #555; padding-top: 10px; }
    .control-group label { font-weight: bold; display: block; margin-bottom: 5px; }
    button, input, select { width: 100%; margin-top: 5px; padding: 8px; border-radius: 4px; border: 1px solid #ddd; cursor: pointer; font-weight: bold; font-size: 13px; }
    .button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
    .color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
    .action-btn { background: #27ae60; color: white; }
    .reset-btn { background: #c0392b; color: white; }
    .secondary-btn { background: #f39c12; color: white; }
    .save-btn { background: #8e44ad; color: white; }
    .timestamp-controls { display: flex; gap: 5px; }
    .timestamp-controls input { width: 70%; }
    .timestamp-controls button { width: 30%; }
    
    .tip { text-align:center; padding:10px; background:#e74c3c; color:white; font-weight:bold; margin-bottom:20px; border-radius:5px; }
    .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; z-index: 2000; }
    .modal-content { background: white; padding: 30px; border-radius: 12px; width: 90%; max-width: 400px; text-align: center; color: #333; }
    .code { font-size: 24px; font-weight: bold; letter-spacing: 3px; background: #eee; padding: 10px; margin: 15px 0; display: inline-block; font-family: monospace; }
</style>
</head> <body> 
<div id="upload-container"> 
    <div class="upload-box"> 
        <h1>⚡ 864x1080 Robust Comic (CPU)</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>
        
        <div class="page-input-group">
            <label>📚 Total Pages:</label>
            <input type="number" id="page-count" value="4" min="1" max="15">
        </div>
        
        <button class="submit-btn" onclick="upload()">🚀 Generate</button>
        <button id="restore-draft-btn" class="reset-btn" style="display:none; margin-top:10px;" onclick="restoreDraft()">📂 Restore Draft</button>
        
        <div style="margin-top:20px; border-top:1px solid #555; padding-top:10px;">
            <input type="text" id="load-code" placeholder="ENTER SAVE CODE" style="width:70%; display:inline-block;">
            <button onclick="loadComic()" style="width:25%; display:inline-block; background:#9b59b6; color:white;">Load</button>
        </div>
        <div class="loading-view" id="loading-view" style="display:none; margin-top:20px;">
            <div class="loader"></div>
            <p id="status-text" style="margin-top:10px;">Analyzing Video...</p>
        </div>
    </div>
</div>
<div id="editor-container">
    <div class="tip">👉 Drag Right-Side Dots 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/*">
    
    <div class="edit-controls">
        <h4>✏️ Editor</h4>
        
        <div class="control-group">
            <button onclick="undo()" style="background:#7f8c8d; color:white;">↩️ Undo</button>
            <button onclick="saveComic()" class="save-btn">💾 Save Comic</button>
        </div>
        <div class="control-group">
            <label>💬 Bubble Styling:</label>
            <select id="bubble-type" onchange="updateBubbleType()">
                <option value="speech">Speech 💬</option>
                <option value="thought">Thought 💭</option>
                <option value="reaction">Reaction 💥</option>
                <option value="narration">Narration ⬜</option>
            </select>
            <select id="font-select" onchange="updateFont()">
                <option value="'Comic Neue', cursive">Comic Neue</option>
                <option value="'Bangers', cursive">Bangers</option>
                <option value="'Gloria Hallelujah', cursive">Handwritten</option>
                <option value="'Lato', sans-serif">Modern</option>
            </select>
            <div class="color-grid">
                <input type="color" id="bub-fill" value="#ffffff" onchange="updateColors()" title="Fill">
                <input type="color" id="bub-text" value="#000000" onchange="updateColors()" title="Text">
            </div>
            <div class="button-grid">
                <button onclick="addBubble()" class="action-btn">Add</button>
                <button onclick="deleteBubble()" class="reset-btn">Delete</button>
            </div>
            <div id="tail-controls">
                <button onclick="rotateTail()" class="secondary-btn" style="margin-top:5px;">🔄 Rotate Tail</button>
                <input type="range" min="10" max="90" value="50" oninput="slideTail(this.value)" title="Tail Pos">
            </div>
        </div>
        <div class="control-group">
            <label>🖼️ Time Frame (MM:SS):</label>
            <div class="timestamp-controls">
                <input type="text" id="timestamp-input" placeholder="Click panel for time (e.g. 02:15)">
                <button onclick="gotoTimestamp()" class="action-btn">Go</button>
            </div>
            <label style="margin-top:10px">🖼️ Image Control:</label>
            <div class="button-grid">
                <button onclick="adjustFrame('backward')" class="secondary-btn">⬅️ Frame</button>
                <button onclick="adjustFrame('forward')" class="action-btn">Frame ➡️</button>
            </div>
             <button onclick="replaceImage()" class="action-btn" style="margin-top:5px;">Replace Image</button>
        </div>
        
        <div class="control-group">
            <label>🔍 Zoom (Scroll Wheel):</label>
            <input type="range" id="zoom-slider" min="20" max="300" value="100" step="5" oninput="handleZoom(this.value)" disabled>
            <button onclick="resetPanelTransform()" class="secondary-btn">Reset View</button>
        </div>
        
        <div class="control-group">
            <button onclick="exportComic()" class="action-btn" style="background:#3498db;">📥 Export PNG</button>
            <button onclick="location.reload()" class="reset-btn" style="margin-top:10px;">🏠 Home</button>
        </div>
    </div>
</div>
<div class="modal-overlay" id="save-modal">
    <div class="modal-content">
        <h2>✅ Comic Saved!</h2>
        <div class="code" id="modal-code">XXXX</div>
        <button onclick="closeModal()">Close</button>
    </div>
</div>
<script>
    function genUUID(){ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,c=>{var r=Math.random()*16|0,v=c=='x'?r:(r&0x3|0x8);return v.toString(16);}); }
    let sid = localStorage.getItem('comic_sid') || genUUID();
    localStorage.setItem('comic_sid', sid);
    let interval, selectedBubble = null, selectedPanel = null;
    let dragType = null, activeObj = null, dragStart = {x:0, y:0};
    let historyStack = [];
    
    // --- TIME HELPERS ---
    function formatTime(s) {
        s = parseFloat(s);
        let m = Math.floor(s / 60);
        let sec = Math.floor(s % 60);
        let ms = Math.round((s % 1) * 100);
        return `${m < 10 ? '0'+m : m}:${sec < 10 ? '0'+sec : sec}.${ms}`;
    }
    
    function parseTime(str) {
        if(str.includes(':')) {
            let p = str.split(':');
            return parseInt(p[0]) * 60 + parseFloat(p[1]);
        }
        return parseFloat(str);
    }
    
    function saveState() {
        const state = [];
        document.querySelectorAll('.comic-page').forEach(pg => {
            const grid = pg.querySelector('.comic-grid');
            const layout = { t1: grid.style.getPropertyValue('--t1')||'100%', t2: grid.style.getPropertyValue('--t2')||'100%', b1: grid.style.getPropertyValue('--b1')||'100%', b2: grid.style.getPropertyValue('--b2')||'100%' };
            const bubbles = [];
            grid.querySelectorAll('.speech-bubble').forEach(b => {
                bubbles.push({
                    text: b.querySelector('.bubble-text').textContent,
                    left: b.style.left, top: b.style.top, width: b.style.width, height: b.style.height,
                    type: b.dataset.type, font: b.style.fontFamily,
                    colors: { fill: b.style.getPropertyValue('--bubble-fill'), text: b.style.getPropertyValue('--bubble-text') },
                    tailPos: b.style.getPropertyValue('--tail-pos'),
                    classes: b.className
                });
            });
            const panels = [];
            grid.querySelectorAll('.panel').forEach(pan => {
                const img = pan.querySelector('img');
                const srcParts = img.src.split('frames/');
                const fname = srcParts.length > 1 ? srcParts[1].split('?')[0] : '';
                panels.push({ image: fname, time: img.dataset.time, zoom: img.dataset.zoom, tx: img.dataset.translateX, ty: img.dataset.translateY });
            });
            state.push({ layout, bubbles, panels });
        });
        historyStack.push(JSON.stringify(state));
        if(historyStack.length > 20) historyStack.shift();
        localStorage.setItem('comic_draft_'+sid, JSON.stringify(state));
    }
    
    function undo() {
        if(historyStack.length > 1) {
            historyStack.pop(); 
            const prev = JSON.parse(historyStack[historyStack.length-1]);
            restoreFromState(prev);
        }
    }
    
    function restoreFromState(stateData) {
        if(!stateData) return;
        const pages = document.querySelectorAll('.comic-page');
        stateData.forEach((pgData, i) => {
            if(i >= pages.length) return;
            const grid = pages[i].querySelector('.comic-grid');
            if(pgData.layout) {
                grid.style.setProperty('--t1', pgData.layout.t1); grid.style.setProperty('--t2', pgData.layout.t2);
                grid.style.setProperty('--b1', pgData.layout.b1); grid.style.setProperty('--b2', pgData.layout.b2);
            }
            grid.querySelectorAll('.speech-bubble').forEach(b=>b.remove());
            pgData.bubbles.forEach(bData => { const b = createBubbleHTML(bData); grid.appendChild(b); });
            const panels = grid.querySelectorAll('.panel');
            pgData.panels.forEach((pData, pi) => {
                if(pi < panels.length) {
                    const img = panels[pi].querySelector('img');
                    img.dataset.zoom = pData.zoom; img.dataset.translateX = pData.tx; img.dataset.translateY = pData.ty;
                    img.dataset.time = pData.time;
                    if(pData.image) img.src = `/frames/${pData.image}?sid=${sid}`;
                    updateImageTransform(img);
                }
            });
        });
    }
    
    if(localStorage.getItem('comic_draft_'+sid)) document.getElementById('restore-draft-btn').style.display='inline-block';
    function restoreDraft() {
        document.getElementById('upload-container').style.display='none';
        document.getElementById('editor-container').style.display='flex';
        loadNewComic().then(() => {
            setTimeout(() => restoreFromState(JSON.parse(localStorage.getItem('comic_draft_'+sid))), 500);
        });
    }
    async function upload() {
        const f = document.getElementById('file-upload').files[0];
        const pCount = document.getElementById('page-count').value;
        if(!f) return alert("Select video");
        sid = genUUID(); localStorage.setItem('comic_sid', sid);
        document.querySelector('.upload-box').style.display='none'; 
        document.getElementById('loading-view').style.display='flex';
        const fd = new FormData(); fd.append('file', f); fd.append('target_pages', pCount); fd.append('sid', sid);
        const r = await fetch(`/uploader?sid=${sid}`, {method:'POST', body:fd});
        if(r.ok) interval = setInterval(checkStatus, 1500); 
        else { const d = await r.json(); alert("Upload failed: " + d.message); location.reload(); }
    }
    
    async function checkStatus() {
        try {
            const r = await fetch(`/status?sid=${sid}`); const d = await r.json();
            document.getElementById('status-text').innerText = d.message;
            if(d.progress >= 100) { clearInterval(interval); document.getElementById('upload-container').style.display='none'; document.getElementById('editor-container').style.display='flex'; loadNewComic(); }
        } catch(e) {}
    }
    
    async function loadNewComic() {
        const r = await fetch(`/output/pages.json?sid=${sid}`);
        const data = await r.json();
        const cleanData = data.map(p => ({
            panels: p.panels.map(pan => ({ src: `/frames/${pan.image}?sid=${sid}`, time: pan.time })),
            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
            }))
        }));
        renderFromState(cleanData);
        saveState();
    }
    function renderFromState(pagesData) {
        const con = document.getElementById('comic-container'); con.innerHTML = '';
        pagesData.forEach((page, pageIdx) => {
            const pageWrapper = document.createElement('div'); pageWrapper.className = 'page-wrapper';
            pageWrapper.innerHTML = `<h2 class="page-title">Page ${pageIdx + 1}</h2>`;
            const div = document.createElement('div'); div.className = 'comic-page';
            const grid = document.createElement('div'); grid.className = 'comic-grid';
            
            page.panels.forEach((pan, idx) => {
                const pDiv = document.createElement('div'); pDiv.className = 'panel';
                const img = document.createElement('img');
                img.src = pan.src.includes('?') ? pan.src : pan.src + `?sid=${sid}`;
                img.dataset.zoom = 100; img.dataset.translateX = 0; img.dataset.translateY = 0;
                img.dataset.time = pan.time.toFixed(2);
                
                img.onmousedown = (e) => { e.preventDefault(); e.stopPropagation(); selectPanel(pDiv); dragType = 'pan'; activeObj = img; dragStart = {x:e.clientX, y:e.clientY}; img.classList.add('panning'); };
                img.onwheel = (e) => { e.preventDefault(); let zoom = parseFloat(img.dataset.zoom); zoom += e.deltaY * -0.1; zoom = Math.min(Math.max(20, zoom), 300); img.dataset.zoom = zoom; updateImageTransform(img); if(selectedPanel === pDiv) document.getElementById('zoom-slider').value = zoom; saveState(); };
                
                pDiv.appendChild(img); grid.appendChild(pDiv);
            });
            
            grid.append(createHandle('h-t1', grid, 't1'), createHandle('h-t2', grid, 't2'), createHandle('h-b1', grid, 'b1'), createHandle('h-b2', grid, 'b2'));
            
            if(page.bubbles) {
                page.bubbles.forEach((bData, bIdx) => {
                    if(bData.text) {
                        const b = createBubbleHTML(bData); 
                        grid.appendChild(b);
                    }
                });
            }
            
            div.appendChild(grid); pageWrapper.appendChild(div); con.appendChild(pageWrapper);
        });
    }
    
    function createHandle(cls, grid, varName) {
        let h = document.createElement('div'); h.className = `handle ${cls}`;
        h.onmousedown = (e) => { e.stopPropagation(); dragType = 'handle'; activeObj = { grid: grid, var: varName }; };
        return h;
    }
    
    function createBubbleHTML(data) {
        const b = document.createElement('div');
        const type = data.type || 'speech';
        
        let className = `speech-bubble ${type}`;
        if(type === 'speech' || type === 'thought' || type === 'reaction') {
             if(data.classes && data.classes.includes('tail-')) className = data.classes;
             else className += ' tail-bottom';
        }
        b.className = className;
        
        b.dataset.type = type;
        b.style.left = data.left; b.style.top = data.top;
        if(data.width) b.style.width = data.width;
        if(data.height) b.style.height = data.height;
        if(data.font) b.style.fontFamily = data.font;
        if(data.colors) { b.style.setProperty('--bubble-fill', data.colors.fill); b.style.setProperty('--bubble-text', data.colors.text); }
        if(data.tailPos) b.style.setProperty('--tail-pos', data.tailPos);
        
        if(type === 'thought') { for(let i=1; i<=2; i++){ const d = document.createElement('div'); d.className = `thought-dot thought-dot-${i}`; b.appendChild(d); } }
        
        const textSpan = document.createElement('span'); textSpan.className = 'bubble-text'; textSpan.textContent = data.text || 'Text'; b.appendChild(textSpan);
        const resizer = document.createElement('div'); resizer.className = 'resize-handle'; 
        resizer.onmousedown = (e) => { e.stopPropagation(); dragType='resize'; activeObj={b:b, startW:b.offsetWidth, startH:b.offsetHeight, mx:e.clientX, my:e.clientY}; };
        b.appendChild(resizer);
        
        b.onmousedown = (e) => { if(e.target === resizer) return; e.stopPropagation(); selectBubble(b); dragType = 'bubble'; activeObj = b; dragStart = {x: e.clientX, y: e.clientY}; };
        b.ondblclick = (e) => { e.stopPropagation(); editBubbleText(b); };
        return b;
    }
    
    function editBubbleText(bubble) {
        const textSpan = bubble.querySelector('.bubble-text'); 
        const newText = prompt("Edit Text:", textSpan.textContent);
        if(newText !== null) { textSpan.textContent = newText; saveState(); }
    }
    
    document.addEventListener('mousemove', (e) => {
        if(!dragType) return;
        if(dragType === 'handle') {
            const rect = activeObj.grid.getBoundingClientRect();
            let x = (e.clientX - rect.left) / rect.width * 100;
            activeObj.grid.style.setProperty(`--${activeObj.var}`, Math.max(0, Math.min(100, x))+'%');
        } else if(dragType === 'pan') {
            const dx = e.clientX - dragStart.x; const dy = e.clientY - dragStart.y;
            const img = activeObj;
            img.dataset.translateX = parseFloat(img.dataset.translateX) + dx;
            img.dataset.translateY = parseFloat(img.dataset.translateY) + dy;
            updateImageTransform(img); dragStart = {x: e.clientX, y: e.clientY};
        } else if(dragType === 'bubble') {
            const rect = activeObj.parentElement.getBoundingClientRect();
            activeObj.style.left = (e.clientX - rect.left - (activeObj.offsetWidth/2)) + 'px';
            activeObj.style.top = (e.clientY - rect.top - (activeObj.offsetHeight/2)) + 'px';
        } else if(dragType === 'resize') {
            const dx = e.clientX - activeObj.mx; const dy = e.clientY - activeObj.my;
            activeObj.b.style.width = (activeObj.startW + dx) + 'px';
            activeObj.b.style.height = (activeObj.startH + dy) + 'px';
        }
    });
    
    document.addEventListener('mouseup', () => { 
        if(activeObj && activeObj.classList) activeObj.classList.remove('panning');
        if(dragType) saveState();
        dragType = null; activeObj = null; 
    });
    
    function selectBubble(el) { 
        if(selectedBubble) selectedBubble.classList.remove('selected'); 
        selectedBubble = el; el.classList.add('selected'); 
        document.getElementById('bubble-type').value = el.dataset.type;
        document.getElementById('font-select').value = el.style.fontFamily || "'Comic Neue', cursive";
        
        const showTail = (el.dataset.type === 'speech' || el.dataset.type === 'thought' || el.dataset.type === 'reaction');
        document.getElementById('tail-controls').style.display = showTail ? 'block' : 'none';
    }
    
    function selectPanel(el) { 
        if(selectedPanel) selectedPanel.classList.remove('selected'); 
        selectedPanel = el; el.classList.add('selected'); 
        document.getElementById('zoom-slider').disabled = false;
        const img = el.querySelector('img');
        document.getElementById('zoom-slider').value = img.dataset.zoom || 100;
        
        // 🎯 POPULATE TIME BOX (Formatted)
        if(img.dataset.time) document.getElementById('timestamp-input').value = formatTime(img.dataset.time);
    }
    
    function addBubble() { const grid = document.querySelector('.comic-grid'); if(grid) { const b = createBubbleHTML({ text: "Text", left: "50%", top: "50%", type: "speech" }); grid.appendChild(b); selectBubble(b); saveState(); } }
    function deleteBubble() { if(selectedBubble) { selectedBubble.remove(); selectedBubble=null; saveState(); } }
    
    function updateBubbleType() {
        if(!selectedBubble) return;
        const type = document.getElementById('bubble-type').value;
        const oldB = selectedBubble;
        const data = {
            text: oldB.querySelector('.bubble-text').textContent,
            left: oldB.style.left, top: oldB.style.top, width: oldB.style.width, height: oldB.style.height,
            type: type, font: oldB.style.fontFamily,
            colors: { fill: oldB.style.getPropertyValue('--bubble-fill'), text: oldB.style.getPropertyValue('--bubble-text') },
            tailPos: oldB.style.getPropertyValue('--tail-pos')
        };
        const newB = createBubbleHTML(data);
        oldB.parentElement.replaceChild(newB, oldB);
        selectBubble(newB); saveState();
    }
    
    function updateColors() { if(!selectedBubble) return; selectedBubble.style.setProperty('--bubble-fill', document.getElementById('bub-fill').value); selectedBubble.style.setProperty('--bubble-text', document.getElementById('bub-text').value); saveState(); }
    function updateFont() { if(selectedBubble) { selectedBubble.style.fontFamily = document.getElementById('font-select').value; saveState(); } }
    function slideTail(val) { if(selectedBubble) { selectedBubble.style.setProperty('--tail-pos', val+'%'); saveState(); } }
    
    function rotateTail() {
        if(!selectedBubble) return;
        const type = selectedBubble.dataset.type;
        // Allow rotation for Speech, Thought, AND Reaction
        if(type === 'speech' || type === 'thought' || type === 'reaction') {
            const positions = ['tail-bottom', 'tail-right', 'tail-top', 'tail-left'];
            let current = positions.find(p => selectedBubble.classList.contains(p)) || 'tail-bottom';
            selectedBubble.classList.remove(current);
            let next = positions[(positions.indexOf(current)+1)%4];
            selectedBubble.classList.add(next);
        }
        saveState();
    }
    function handleZoom(val) { if(selectedPanel) { const img = selectedPanel.querySelector('img'); img.dataset.zoom = val; updateImageTransform(img); saveState(); } }
    function updateImageTransform(img) { const z = (img.dataset.zoom||100)/100, x = img.dataset.translateX||0, y = img.dataset.translateY||0; img.style.transform = `translateX(${x}px) translateY(${y}px) scale(${z})`; }
    function resetPanelTransform() { if(selectedPanel) { const img = selectedPanel.querySelector('img'); img.dataset.zoom=100; img.dataset.translateX=0; img.dataset.translateY=0; updateImageTransform(img); document.getElementById('zoom-slider').value=100; saveState(); } }
    
    function replaceImage() {
        if(!selectedPanel) return alert("Select a panel");
        const inp = document.getElementById('image-uploader');
        inp.onchange = async (e) => {
            const fd = new FormData(); fd.append('image', e.target.files[0]);
            const r = await fetch(`/replace_panel?sid=${sid}`, {method:'POST', body:fd});
            const d = await r.json();
            if(d.success) { 
                const img = selectedPanel.querySelector('img');
                img.src = `/frames/${d.new_filename}?sid=${sid}`; 
                saveState(); 
            }
            inp.value = '';
        };
        inp.click();
    }
    
    async function adjustFrame(dir) {
        if(!selectedPanel) return alert("Click a panel first");
        const img = selectedPanel.querySelector('img'); let fname = img.src.split('/').pop().split('?')[0]; 
        img.style.opacity='0.5';
        const r = await fetch(`/regenerate_frame?sid=${sid}`, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({filename:fname, direction:dir}) });
        const d = await r.json();
        if(d.success) { 
            img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`;
            img.dataset.time = d.new_time.toFixed(2);
            document.getElementById('timestamp-input').value = formatTime(d.new_time);
        }
        img.style.opacity='1'; saveState();
    }
    
    async function gotoTimestamp() {
        if(!selectedPanel) return alert("Select a panel");
        let v = document.getElementById('timestamp-input').value.trim();
        if(!v) return;
        // Parse Time (MM:SS or Seconds)
        let s = parseTime(v);
        if(isNaN(s)) return alert("Invalid Time");
        
        const img = selectedPanel.querySelector('img'); let fname = img.src.split('/').pop().split('?')[0]; 
        const r = await fetch(`/goto_timestamp?sid=${sid}`, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({filename:fname, timestamp:s}) });
        const d = await r.json();
        if(d.success) { 
            img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`;
            img.dataset.time = d.new_time.toFixed(2);
            document.getElementById('timestamp-input').value = formatTime(d.new_time);
        }
        img.style.opacity = '1'; saveState();
    }
    
    async function exportComic() {
        const pgs = document.querySelectorAll('.comic-page');
        for(let i=0; i<pgs.length; i++) {
            const u = await htmlToImage.toPng(pgs[i], {pixelRatio:2});
            const a = document.createElement('a'); a.href=u; a.download=`Page-${i+1}.png`; a.click();
        }
    }
    
    async function saveComic() {
        const r = await fetch(`/save_comic?sid=${sid}`, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({pages:getCurrentState()})});
        const d = await r.json();
        if(d.success) { document.getElementById('modal-code').innerText=d.code; document.getElementById('save-modal').style.display='flex'; }
    }
    async function loadComic() {
        const code = document.getElementById('load-code').value;
        const r = await fetch(`/load_comic/${code}`);
        const d = await r.json();
        if(d.success) { sid=d.originalSid; localStorage.setItem('comic_sid', sid); restoreFromState(d.pages); document.getElementById('upload-container').style.display='none'; document.getElementById('editor-container').style.display='flex'; }
        else alert(d.message);
    }
    function closeModal() { document.getElementById('save-modal').style.display='none'; }
</script>
</body> </html> '''

@app.route('/')
def index():
    return INDEX_HTML

@app.route('/uploader', methods=['POST'])
def upload():
    sid = request.args.get('sid') or request.form.get('sid')
    if not sid: return jsonify({'success': False, 'message': 'Missing session ID'}), 400
    
    file = request.files.get('file')
    if not file or file.filename == '': return jsonify({'success': False, 'message': 'No file uploaded'}), 400
    
    target_pages = request.form.get('target_pages', 4)
    gen = EnhancedComicGenerator(sid)
    gen.cleanup()
    file.save(gen.video_path)
    gen.write_status("Starting...", 5)
    
    threading.Thread(target=gen.run, args=(target_pages,)).start()
    return jsonify({'success': True})

@app.route('/status')
def get_status():
    sid = request.args.get('sid')
    path = os.path.join(BASE_USER_DIR, sid, 'output', 'status.json')
    if os.path.exists(path): return send_file(path)
    return jsonify({'progress': 0, 'message': "Waiting..."})

@app.route('/output/<path:filename>')
def get_output(filename):
    sid = request.args.get('sid')
    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)

@app.route('/frames/<path:filename>')
def get_frame(filename):
    sid = request.args.get('sid')
    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'frames'), filename)

@app.route('/regenerate_frame', methods=['POST'])
def regen():
    sid = request.args.get('sid')
    d = request.get_json()
    gen = EnhancedComicGenerator(sid)
    return jsonify(regen_frame_cpu(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_cpu(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')
    try:
        data = request.get_json()
        save_code = generate_save_code()
        save_dir = os.path.join(SAVED_COMICS_DIR, save_code)
        os.makedirs(save_dir, exist_ok=True)
        user_frames_dir = os.path.join(BASE_USER_DIR, sid, 'frames')
        saved_frames_dir = os.path.join(save_dir, 'frames')
        if os.path.exists(user_frames_dir):
            if os.path.exists(saved_frames_dir): shutil.rmtree(saved_frames_dir)
            shutil.copytree(user_frames_dir, saved_frames_dir)
        with open(os.path.join(save_dir, 'comic_state.json'), 'w') as f:
            json.dump({'originalSid': sid, 'pages': data['pages'], 'savedAt': time.time()}, f)
        return jsonify({'success': True, 'code': save_code})
    except Exception as e: return jsonify({'success': False, 'message': str(e)})

@app.route('/load_comic/<code>')
def load_comic(code):
    code = code.upper()
    save_dir = os.path.join(SAVED_COMICS_DIR, code)
    if not os.path.exists(save_dir): return jsonify({'success': False, 'message': 'Code not found'})
    try:
        with open(os.path.join(save_dir, 'comic_state.json'), 'r') as f: data = json.load(f)
        orig_sid = data['originalSid']
        saved_frames = os.path.join(save_dir, 'frames')
        user_frames = os.path.join(BASE_USER_DIR, orig_sid, 'frames')
        os.makedirs(user_frames, exist_ok=True)
        for fn in os.listdir(saved_frames):
            shutil.copy2(os.path.join(saved_frames, fn), os.path.join(user_frames, fn))
        return jsonify({'success': True, 'originalSid': orig_sid, 'pages': data['pages']})
    except Exception as e: return jsonify({'success': False, 'message': str(e)})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=7860)