Update app_enhanced.py

app_enhanced.py

@@ -24,14 +24,12 @@ def gpu_warmup():
     return True
 
 # ======================================================
-# 💾 PERSISTENT STORAGE
+# 💾 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")
@@ -43,7 +41,7 @@ os.makedirs(SAVED_COMICS_DIR, exist_ok=True)
 # 🔧 APP CONFIG
 # ======================================================
 app = Flask(__name__)
-app.config['MAX_CONTENT_LENGTH'] = 500 * 1024 * 1024  # 500MB Upload Limit
+app.config['MAX_CONTENT_LENGTH'] = 500 * 1024 * 1024  # 500MB Limit
 
 def generate_save_code(length=8):
     chars = string.ascii_uppercase + string.digits
@@ -55,11 +53,11 @@ def generate_save_code(length=8):
 # ======================================================
 # 🧱 DATA CLASSES
 # ======================================================
-def bubble(dialog="", bubble_offset_x=50, bubble_offset_y=50, type='speech'):
+def bubble(dialog="", x=50, y=50, type='speech'):
     return {
         'dialog': dialog,
-        'bubble_offset_x': int(bubble_offset_x),
-        'bubble_offset_y': int(bubble_offset_y),
+        'bubble_offset_x': int(x),
+        'bubble_offset_y': int(y),
         'type': type,
         'tail_pos': '50%',
         'classes': f'speech-bubble {type} tail-bottom'
@@ -74,12 +72,11 @@ class Page:
         self.bubbles = bubbles
 
 # ======================================================
-# 🧠 GPU GENERATION
+# 🧠 GPU GENERATION (FAST & HD)
 # ======================================================
 @spaces.GPU(duration=120)
 def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages):
-    print(f"🚀 Generating: {video_path}")
-    
+    print(f"🚀 Generating HD Comic: {video_path}")
     import cv2
     import srt
     import numpy as np
@@ -103,9 +100,9 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     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]
 
-    if target_pages <= 0: target_pages = 1
+    # Calculate Frames (4 per page)
     panels_per_page = 4
-    total_panels_needed = target_pages * panels_per_page
+    total_panels_needed = int(target_pages) * panels_per_page
 
     selected_moments = []
     if not raw_moments:
@@ -130,15 +127,11 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         
         if ret:
             # ----------------------------------------------------
-            # 🎯 QUALITY FIX: EXTRACT AT HD (1280px width)
-            # Do NOT crop to square here. Keep 16:9 Aspect Ratio.
-            # This allows the frontend "Zoom" to reveal details.
+            # 🎯 KEEP HD RESOLUTION (1280x720)
+            # We do NOT crop to square here. 
+            # The CSS 'object-fit: cover' + Zoom handles the square layout.
             # ----------------------------------------------------
-            h, w = frame.shape[:2]
-            aspect = w / h
-            new_w = 1280
-            new_h = int(new_w / aspect)
-            frame = cv2.resize(frame, (new_w, new_h))
+            frame = cv2.resize(frame, (1280, 720))
             
             fname = f"frame_{count:04d}.png"
             p = os.path.join(frames_dir, fname)
@@ -151,24 +144,27 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     cap.release()
     with open(metadata_path, 'w') as f: json.dump(frame_metadata, f, indent=2)
         
+    # Bubbles (Default Center)
     bubbles_list = []
     for f in frame_files_ordered:
         dialogue = frame_metadata.get(f, {}).get('dialogue', '')
         b_type = 'speech'
         if '(' in dialogue: b_type = 'narration'
         elif '!' in dialogue: b_type = 'reaction'
-        bubbles_list.append(bubble(dialog=dialogue, bubble_offset_x=50, bubble_offset_y=50, type=b_type))
+        bubbles_list.append(bubble(dialog=dialogue, x=50, y=50, type=b_type))
             
+    # Pages (4 Panels)
     pages = []
-    for i in range(target_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_bubbles = bubbles_list[start_idx:end_idx]
         
+        # Fill empty
         while len(p_frames) < 4:
              fname = f"empty_{i}_{len(p_frames)}.png"
-             img = np.zeros((720, 1280, 3), dtype=np.uint8); img[:] = (40,40,40)
+             img = np.zeros((720, 1280, 3), dtype=np.uint8); img[:] = (30,30,30)
              cv2.imwrite(os.path.join(frames_dir, fname), img)
              p_frames.append(fname)
              p_bubbles.append(bubble(dialog="", type='speech'))
@@ -205,12 +201,7 @@ def regen_frame_gpu(video_path, frames_dir, metadata_path, fname, direction):
     cap.release()
 
     if ret:
-        h, w = frame.shape[:2]
-        aspect = w / h
-        new_w = 1280
-        new_h = int(new_w / aspect)
-        frame = cv2.resize(frame, (new_w, new_h))
-        
+        frame = cv2.resize(frame, (1280, 720)) # HD
         p = os.path.join(frames_dir, fname)
         cv2.imwrite(p, frame)
         
@@ -220,6 +211,30 @@ def regen_frame_gpu(video_path, frames_dir, metadata_path, fname, direction):
         return {"success": True, "message": f"Time: {new_t:.2f}s"}
     return {"success": False, "message": "End of video"}
 
+@spaces.GPU
+def get_frame_at_ts_gpu(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, (1280, 720)) # HD
+        p = os.path.join(frames_dir, fname)
+        cv2.imwrite(p, frame)
+        
+        if os.path.exists(metadata_path):
+            with open(metadata_path, 'r') as f: meta = json.load(f)
+            if fname in meta:
+                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"}
+    return {"success": False, "message": "Invalid timestamp"}
+
 # ======================================================
 # 💻 BACKEND CLASS
 # ======================================================
@@ -242,7 +257,7 @@ class EnhancedComicGenerator:
 
     def run(self, target_pages):
         try:
-            self.write_status("Waiting for GPU...", 5)
+            self.write_status("Generating...", 5)
             data = generate_comic_gpu(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)
@@ -256,15 +271,15 @@ class EnhancedComicGenerator:
             json.dump({'message': msg, 'progress': prog}, f)
 
 # ======================================================
-# 🌐 ROUTES & FRONTEND
+# 🌐 FRONTEND
 # ======================================================
 INDEX_HTML = '''
-<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Square HD Comic</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } body { background-color: #222; font-family: 'Lato', sans-serif; color: #eee; margin: 0; min-height: 100vh; }
+<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Square HD Comic</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } body { background-color: #222; font-family: 'Comic Neue', 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: #333; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); text-align: center; }
     
-    #editor-container { display: none; padding: 20px; width: 100%; box-sizing: border-box; padding-bottom: 100px; }
+    #editor-container { display: none; padding: 20px; width: 100%; box-sizing: border-box; padding-bottom: 150px; }
     
     h1 { color: #fff; margin-bottom: 20px; font-weight: 600; }
     .file-input { display: none; }
@@ -282,18 +297,18 @@ INDEX_HTML = '''
     @keyframes ball { 0%{background-position:0 50%} 100%{background-position:100px 50%} }
     
     /* === SQUARE COMIC LAYOUT (800x800) === */
-    .comic-wrapper { max-width: 1000px; margin: 0 auto; }
-    .page-wrapper { margin: 30px auto; display: flex; flex-direction: column; align-items: center; }
-    .page-title { text-align: center; color: #eee; margin-bottom: 10px; font-size: 18px; font-weight: bold; }
+    .comic-wrapper { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; }
+    .page-wrapper { display: flex; flex-direction: column; align-items: center; }
+    .page-title { text-align: center; color: #eee; margin-bottom: 10px; font-size: 20px; font-weight: bold; }
     
     .comic-page { 
         width: 800px; 
         height: 800px; 
         background: white; 
-        box-shadow: 0 4px 20px rgba(0,0,0,0.5); 
+        box-shadow: 0 4px 30px rgba(0,0,0,0.5); 
         position: relative; 
         overflow: hidden; 
-        border: 4px solid #000; 
+        border: 6px solid #000; 
     }
     
     /* === GRID CSS === */
@@ -304,8 +319,8 @@ INDEX_HTML = '''
         
         /* Grid Variables */
         --y: 50%;      
-        --t1: 100%; --t2: 100%; /* Hidden by default */
-        --b1: 100%; --b2: 100%; /* Hidden by default */
+        --t1: 100%; --t2: 100%; /* Hidden Right by default */
+        --b1: 100%; --b2: 100%; /* Hidden Right by default */
         --gap: 3px; 
     }
 
@@ -332,13 +347,13 @@ INDEX_HTML = '''
 
     /* === HANDLES === */
     .handle {
-        position: absolute; width: 24px; height: 24px;
-        border: 2px solid white; border-radius: 50%;
+        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 4px rgba(0,0,0,0.8);
+        box-shadow: 0 2px 5px rgba(0,0,0,0.8);
     }
-    .handle:hover { transform: scale(1.3); }
+    .handle:hover { transform: translate(-50%, -50%) scale(1.3); }
 
     .h-t1 { background: #3498db; left: var(--t1); top: 0%; margin-top: 15px; }
     .h-t2 { background: #3498db; left: var(--t2); top: 50%; margin-top: -15px; }
@@ -348,34 +363,42 @@ INDEX_HTML = '''
     /* SPEECH BUBBLES */
     .speech-bubble { 
         position: absolute; display: flex; justify-content: center; align-items: center; 
-        width: 150px; height: 80px; min-width: 50px; min-height: 30px; box-sizing: border-box; 
+        width: 180px; height: 100px; min-width: 50px; min-height: 30px; box-sizing: border-box; 
         z-index: 10; cursor: move; font-family: 'Comic Neue', cursive; font-weight: bold; 
         font-size: 16px; text-align: center; 
         overflow: visible; line-height: 1.2; --tail-pos: 50%;
     }
-    .bubble-text { padding: 0.5em; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: pre-wrap; pointer-events: none; }
+    .bubble-text { padding: 0.8em; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: pre-wrap; pointer-events: none; border-radius: inherit; }
     .speech-bubble.selected { outline: 2px dashed #4CAF50; z-index: 100; }
     
     .speech-bubble.speech {
-        background: #fff; color: #000; border: 2px solid #000;
+        background: var(--bubble-fill, #fff); color: var(--bubble-text, #000); border: 3px solid #000;
         border-radius: 50%;
     }
     .speech-bubble.speech::after {
-        content: ''; position: absolute; bottom: -10px; left: var(--tail-pos);
-        border: 10px solid transparent; border-top-color: #000; border-bottom: 0; margin-left: -10px;
+        content: ''; position: absolute; bottom: -12px; left: var(--tail-pos);
+        border: 12px solid transparent; border-top-color: #000; border-bottom: 0; margin-left: -12px;
     }
-    
+    .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: 260px; 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 { 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; }
-    button, input, select { width: 100%; margin-top: 5px; padding: 6px; border-radius: 4px; border: 1px solid #ddd; cursor: pointer; font-weight: bold; font-size: 12px; }
+    .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: #4CAF50; color: white; }
     .reset-btn { background: #e74c3c; color: white; }
     .secondary-btn { background: #f39c12; color: white; }
+    .save-btn { background: #9b59b6; color: white; }
     
     .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> 
 
@@ -392,7 +415,13 @@ INDEX_HTML = '''
         </div>
         
         <button class="submit-btn" onclick="upload()">🚀 Generate</button>
+        <button id="restore-draft-btn" class="reset-btn" style="display:none; margin-top:10px; background:#27ae60;" 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" style="margin:0 auto;"></div>
             <p id="status-text" style="margin-top:10px;">Starting...</p>
@@ -401,18 +430,27 @@ INDEX_HTML = '''
 </div>
 
 <div id="editor-container">
-    <div class="tip">👉 Drag Blue/Green dots from the RIGHT edge to reveal hidden panels!</div>
+    <div class="tip">👉 Drag Blue/Green dots from the RIGHT edge to reveal hidden square panels!</div>
     <div class="comic-wrapper" id="comic-container"></div>
     
     <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>💬 Bubbles:</label>
             <div class="button-grid">
                 <button onclick="addBubble()" class="action-btn">Add Text</button>
                 <button onclick="deleteBubble()" class="reset-btn">Delete</button>
             </div>
+            <div class="color-grid">
+                <input type="color" id="bub-fill" value="#ffffff" onchange="updateBubbleColor()">
+                <input type="color" id="bub-text" value="#000000" onchange="updateBubbleColor()">
+            </div>
         </div>
 
         <div class="control-group">
@@ -431,38 +469,110 @@ INDEX_HTML = '''
         
         <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;">🏠 Start Over</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 = [];
+    
+    // HISTORY & UNDO
+    function saveState() {
+        // Lightweight state save (Bubbles + Layout vars)
+        const state = [];
+        document.querySelectorAll('.comic-page').forEach(pg => {
+            const grid = pg.querySelector('.comic-grid');
+            const layout = { t1: grid.style.getPropertyValue('--t1'), t2: grid.style.getPropertyValue('--t2'), b1: grid.style.getPropertyValue('--b1'), b2: grid.style.getPropertyValue('--b2') };
+            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,
+                    colors: { fill: b.style.getPropertyValue('--bubble-fill'), text: b.style.getPropertyValue('--bubble-text') }
+                });
+            });
+            const panels = [];
+            grid.querySelectorAll('.panel').forEach(pan => {
+                const img = pan.querySelector('img');
+                panels.push({ 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(); // Remove current
+            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);
+            }
+            // Restore bubbles
+            grid.querySelectorAll('.speech-bubble').forEach(b=>b.remove());
+            pgData.bubbles.forEach(bData => {
+                const b = createBubbleHTML(bData);
+                grid.appendChild(b);
+            });
+            // Restore Panels
+            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;
+                    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='block';
+        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);
-        
+        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 || "Server Error")); 
-            location.reload(); 
-        }
+        else { const d = await r.json(); alert("Upload failed: " + d.message); location.reload(); }
     }
     
     async function checkStatus() {
@@ -473,16 +583,15 @@ INDEX_HTML = '''
         } catch(e) {}
     }
     
-    function loadNewComic() {
-        fetch(`/output/pages.json?sid=${sid}`).then(r=>r.json()).then(data => {
-            const cleanData = data.map(p => ({
-                panels: p.panels.map(pan => ({ src: `/frames/${pan.image}?sid=${sid}` })),
-                bubbles: p.bubbles.map(b => ({
-                    text: b.dialog, left: (b.bubble_offset_x||50)+'px', top: (b.bubble_offset_y||20)+'px'
-                }))
-            }));
-            renderFromState(cleanData);
-        });
+    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}` })),
+            bubbles: p.bubbles.map(b => ({ text: b.dialog, left: (b.bubble_offset_x||50)+'px', top: (b.bubble_offset_y||20)+'px' }))
+        }));
+        renderFromState(cleanData);
+        saveState();
     }
 
     function renderFromState(pagesData) {
@@ -493,45 +602,18 @@ INDEX_HTML = '''
             const div = document.createElement('div'); div.className = 'comic-page';
             const grid = document.createElement('div'); grid.className = 'comic-grid';
             
-            // Panels
             page.panels.forEach(pan => {
                 const pDiv = document.createElement('div'); pDiv.className = 'panel';
                 const img = document.createElement('img');
                 img.src = pan.src.includes('?') ? pan.src : pan.src + `?sid=${sid}`;
-                // Init transform data
                 img.dataset.zoom = 100; img.dataset.translateX = 0; img.dataset.translateY = 0;
-                
-                // MOUSE EVENTS
-                img.onmousedown = (e) => { 
-                    e.preventDefault(); e.stopPropagation(); 
-                    selectPanel(pDiv);
-                    dragType = 'pan'; activeObj = img; 
-                    dragStart = {x:e.clientX, y:e.clientY}; 
-                    img.classList.add('panning');
-                };
-                
-                // 🚀 ZOOM WITH WHEEL
-                img.onwheel = (e) => {
-                    e.preventDefault();
-                    let zoom = parseFloat(img.dataset.zoom);
-                    zoom += e.deltaY * -0.1;
-                    zoom = Math.min(Math.max(100, zoom), 300);
-                    img.dataset.zoom = zoom;
-                    updateImageTransform(img);
-                    if(selectedPanel === pDiv) document.getElementById('zoom-slider').value = zoom;
-                };
-                
-                pDiv.appendChild(img);
-                grid.appendChild(pDiv);
+                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(100, zoom), 300); img.dataset.zoom = zoom; updateImageTransform(img); if(selectedPanel === pDiv) document.getElementById('zoom-slider').value = zoom; saveState(); };
+                pDiv.appendChild(img); grid.appendChild(pDiv);
             });
             
-            // Handles
-            grid.append(createHandle('h-t1', grid, 't1')); grid.append(createHandle('h-t2', grid, 't2'));
-            grid.append(createHandle('h-b1', grid, 'b1')); grid.append(createHandle('h-b2', grid, 'b2'));
-            
-            // Bubbles (Appended to Grid)
+            grid.append(createHandle('h-t1', grid, 't1'), createHandle('h-t2', grid, 't2'), createHandle('h-b1', grid, 'b1'), createHandle('h-b2', grid, 'b2'));
             (page.bubbles || []).forEach(bData => { grid.appendChild(createBubbleHTML(bData)); });
-            
             div.appendChild(grid); pageWrapper.appendChild(div); con.appendChild(pageWrapper);
         });
     }
@@ -546,12 +628,16 @@ INDEX_HTML = '''
         const b = document.createElement('div');
         b.className = `speech-bubble speech`;
         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.colors) { b.style.setProperty('--bubble-fill', data.colors.fill); b.style.setProperty('--bubble-text', data.colors.text); }
         
         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) => { 
-            e.stopPropagation(); selectBubble(b); dragType = 'bubble'; activeObj = b; dragStart = {x: e.clientX, y: e.clientY};
-        };
+        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;
     }
@@ -559,37 +645,35 @@ INDEX_HTML = '''
     function editBubbleText(bubble) {
         const textSpan = bubble.querySelector('.bubble-text'); 
         const newText = prompt("Edit Text:", textSpan.textContent);
-        if(newText !== null) textSpan.textContent = newText;
+        if(newText !== null) { textSpan.textContent = newText; saveState(); }
     }
     
-    // GLOBAL INTERACTION
     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') {
+        } else if(dragType === 'pan') {
             const dx = e.clientX - dragStart.x; const dy = e.clientY - dragStart.y;
             const img = activeObj;
-            let cx = parseFloat(img.dataset.translateX);
-            let cy = parseFloat(img.dataset.translateY);
-            img.dataset.translateX = cx + dx;
-            img.dataset.translateY = cy + dy;
-            updateImageTransform(img);
-            dragStart = {x: e.clientX, y: e.clientY};
-        }
-        else if(dragType === 'bubble') {
+            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; 
     });
     
@@ -603,29 +687,14 @@ INDEX_HTML = '''
     
     function addBubble() { 
         const grid = document.querySelector('.comic-grid'); 
-        if(grid) { const b = createBubbleHTML({ text: "Text", left: "50%", top: "50%" }); grid.appendChild(b); selectBubble(b); }
-    }
-    function deleteBubble() { if(selectedBubble) { selectedBubble.remove(); selectedBubble=null; } }
-    
-    function handleZoom(val) { 
-        if(selectedPanel) { 
-            const img = selectedPanel.querySelector('img'); 
-            img.dataset.zoom = val; 
-            updateImageTransform(img); 
-        } 
-    }
-    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;
-        } 
+        if(grid) { const b = createBubbleHTML({ text: "Text", left: "50%", top: "50%" }); grid.appendChild(b); selectBubble(b); saveState(); }
     }
+    function deleteBubble() { if(selectedBubble) { selectedBubble.remove(); selectedBubble=null; saveState(); } }
+    function updateBubbleColor() { if(selectedBubble) { selectedBubble.style.setProperty('--bubble-fill', document.getElementById('bub-fill').value); selectedBubble.style.setProperty('--bubble-text', document.getElementById('bub-text').value); 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(); } }
     
     async function adjustFrame(dir) {
         if(!selectedPanel) return alert("Click a panel first");
@@ -634,7 +703,7 @@ INDEX_HTML = '''
         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.style.opacity='1';
+        img.style.opacity='1'; saveState();
     }
     
     async function exportComic() {
@@ -644,6 +713,42 @@ INDEX_HTML = '''
             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='block'; }
+        else alert(d.message);
+    }
+    function closeModal() { document.getElementById('save-modal').style.display='none'; }
+    
+    function getCurrentState() {
+        // Full state grabber for save/load
+        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, colors: { fill: b.style.getPropertyValue('--bubble-fill'), text: b.style.getPropertyValue('--bubble-text') } });
+            });
+            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, zoom: img.dataset.zoom, tx: img.dataset.translateX, ty: img.dataset.translateY });
+            });
+            state.push({ layout, bubbles, panels });
+        });
+        return state;
+    }
 </script>
 </body> </html> '''
 
@@ -656,15 +761,11 @@ 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 = None
-    if 'file' in request.files:
-        file = request.files['file']
-    
+    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)
@@ -697,6 +798,46 @@ def regen():
     gen = EnhancedComicGenerator(sid)
     return jsonify(regen_frame_gpu(gen.video_path, gen.frames_dir, gen.metadata_path, d['filename'], d['direction']))
 
+@app.route('/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)
+        
+        # Copy frames
+        user_frames = os.path.join(BASE_USER_DIR, sid, 'frames')
+        saved_frames = os.path.join(save_dir, 'frames')
+        if os.path.exists(user_frames):
+            if os.path.exists(saved_frames): shutil.rmtree(saved_frames)
+            shutil.copytree(user_frames, saved_frames)
+            
+        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)
+        # Restore frames
+        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__':
     try: gpu_warmup()
     except: pass