Update app_enhanced.py

app_enhanced.py

@@ -6,6 +6,8 @@ import shutil
 import json
 import traceback
 import logging
+import string
+import random
 from concurrent.futures import ThreadPoolExecutor
 from flask import Flask, render_template, request, jsonify, send_from_directory, send_file
 
@@ -41,7 +43,7 @@ try:
     from backend.simple_color_enhancer import SimpleColorEnhancer
     print("✅ SimpleColorEnhancer loaded.")
 except Exception as e:
-    print(f"⚠️ Could not load SimpleColorEnhancer: {e}. This feature will be SKIPPED.")
+    print(f"⚠️ Could not load SimpleColorEnhancer: {e}.")
     class SimpleColorEnhancer:
         def enhance_batch(self, *args, **kwargs): pass
         def enhance_single(self, *args, **kwargs): pass
@@ -50,16 +52,16 @@ try:
     from backend.quality_color_enhancer import QualityColorEnhancer
     print("✅ QualityColorEnhancer loaded.")
 except Exception as e:
-    print(f"⚠️ Could not load QualityColorEnhancer: {e}. This feature will be SKIPPED.")
+    print(f"⚠️ Could not load QualityColorEnhancer: {e}.")
     class QualityColorEnhancer:
         def batch_enhance(self, *args, **kwargs): pass
         def enhance_single(self, *args, **kwargs): pass
 
 try:
     from backend.class_def import bubble, panel, Page
-    print("✅ Core class definitions (bubble, panel, Page) loaded.")
+    print("✅ Core class definitions loaded.")
 except Exception as e:
-    print(f"⚠️ CRITICAL: Could not load core class definitions: {e}. Using fallback definitions.")
+    print(f"⚠️ Using fallback class definitions.")
     def bubble(dialog="", bubble_offset_x=50, bubble_offset_y=20, lip_x=-1, lip_y=-1, emotion='normal'):
         return {
             'dialog': dialog, 
@@ -83,7 +85,7 @@ try:
     from backend.keyframes.keyframes_simple import generate_keyframes_simple
     print("✅ Core utility modules loaded.")
 except Exception as e:
-    print(f"⚠️ Could not load a core utility module: {e}")
+    print(f"⚠️ Could not load utility modules: {e}")
     def get_real_subtitles(v): pass
     def generate_keyframes_simple(*args, **kwargs): pass
     class DummyDetector:
@@ -97,6 +99,19 @@ except Exception as e:
 # --- FLASK APP SETUP ---
 app = Flask(__name__)
 BASE_USER_DIR = "userdata"
+SAVED_COMICS_DIR = "saved_comics"
+
+# Create directories
+os.makedirs(BASE_USER_DIR, exist_ok=True)
+os.makedirs(SAVED_COMICS_DIR, exist_ok=True)
+
+def generate_save_code(length=8):
+    """Generate a unique save code"""
+    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
 
 # --- FULL HTML INTERFACE ---
 INDEX_HTML = '''
@@ -114,21 +129,29 @@ INDEX_HTML = '''
         body { background-color: #fdf6e3; font-family: 'Lato', sans-serif; color: #3d3d3d; margin: 0; min-height: 100vh; }
         
         /* --- UPLOAD VIEW --- */
-        #upload-container { display: flex; flex-direction:column; justify-content: center; align-items: center; min-height: 100vh; width: 100%; }
+        #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: white; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); text-align: center; }
         
         /* --- EDITOR VIEW --- */
         #editor-container { display: none; padding: 20px; width: 100%; box-sizing: border-box; padding-bottom: 100px; }
         
         /* --- BUTTONS & INPUTS --- */
-        h1 { color: #2c3e50; margin-bottom: 30px; font-weight: 600; }
+        h1 { color: #2c3e50; margin-bottom: 20px; font-weight: 600; }
+        h3 { color: #34495e; margin: 20px 0 10px 0; font-size: 16px; }
         .file-input { display: none; }
         .file-label { display: block; padding: 15px; background: #2c3e50; color: white; border-radius: 8px; cursor: pointer; font-weight: bold; margin-bottom: 10px; transition:0.2s; }
         .file-label:hover { background: #34495e; }
         .submit-btn { width: 100%; padding: 15px; background: #e67e22; color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; transition: 0.2s; }
         .submit-btn:hover { background: #d35400; }
         
-        .restore-btn { margin-top: 15px; background: #27ae60; color: white; padding: 10px; width: 100%; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; display: none; }
+        .restore-btn { margin-top: 10px; background: #27ae60; color: white; padding: 12px; width: 100%; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }
+        .restore-btn:hover { background: #219a52; }
+        
+        .load-section { margin-top: 30px; padding-top: 20px; border-top: 2px solid #eee; }
+        .load-input-group { display: flex; gap: 10px; margin-top: 10px; }
+        .load-input-group input { flex: 1; padding: 12px; border: 2px solid #ddd; border-radius: 8px; font-size: 16px; text-transform: uppercase; letter-spacing: 2px; text-align: center; }
+        .load-input-group button { padding: 12px 20px; background: #3498db; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }
+        .load-input-group button:hover { background: #2980b9; }
         
         .loader { width: 120px; height: 20px; background: radial-gradient(circle 10px, #e67e22 100%, transparent 0); background-size: 20px 20px; animation: ball 1s infinite linear; margin: 20px auto; }
         @keyframes ball { 0%{background-position:0 50%} 100%{background-position:100px 50%} }
@@ -157,7 +180,7 @@ INDEX_HTML = '''
         .speech-bubble.selected { outline: 2px dashed #4CAF50; z-index: 100; }
         .speech-bubble textarea { position: absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; border:1px solid #4CAF50; background:rgba(255,255,255,0.95); text-align:center; padding:8px; z-index:102; resize:none; font: inherit; }
         
-        /* --- EXACT "SHARK FIN" CSS WITH MASK --- */
+        /* --- SPEECH BUBBLE CSS --- */
         .speech-bubble.speech {
             --b: 3em;
             --h: 1.8em;
@@ -181,10 +204,7 @@ INDEX_HTML = '''
             mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0,#0000 99%,#000 101%);
         }
         
-        /* BOTTOM TAIL (Default) */
         .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))); }
-        
-        /* TOP TAIL */
         .speech-bubble.speech.tail-top {
             border-radius: min(var(--r), calc(var(--p) - (1 - var(--t)) * var(--b) / 2)) min(var(--r), calc(100% - var(--p) - (1 - var(--t)) * var(--b) / 2)) var(--r) var(--r) / var(--r);
         }
@@ -192,22 +212,17 @@ INDEX_HTML = '''
             bottom: 100%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
             transform: scaleY(-1);
         }
-        
-        /* LEFT TAIL */
         .speech-bubble.speech.tail-left { border-radius: var(--r); }
         .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;
         }
-        
-        /* RIGHT TAIL */
         .speech-bubble.speech.tail-right { border-radius: var(--r); }
         .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;
         }
         
-        /* THOUGHT BUBBLE */
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
         .speech-bubble.thought::after { display:none; } 
         .thought-dot { position: absolute; background-color: white; border: 2px solid #555; border-radius: 50%; z-index: -1; }
@@ -218,24 +233,18 @@ INDEX_HTML = '''
         .speech-bubble.flipped-vertical .thought-dot-1 { bottom: auto; top: -20px; }
         .speech-bubble.flipped-vertical .thought-dot-2 { bottom: auto; top: -32px; }
         
-        /* REACTION BUBBLE */
         .speech-bubble.reaction { 
             background: #FFD700; border: 3px solid #E53935; color: #D32F2F; 
             font-weight: 900; text-transform: uppercase; width: 180px; 
             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%); 
         }
-        
-        /* NARRATION BOX */
         .speech-bubble.narration { background: #FAFAFA; border: 2px solid #BDBDBD; color: #424242; border-radius: 3px; }
-        
-        /* IDEA BUBBLE */
         .speech-bubble.idea { 
             background: linear-gradient(180deg,#FFFDD0 0%, #FFF8B5 100%); 
             border: 2px solid #FFA500; color: #6a4b00; 
             border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%; 
         }
         
-        /* RESIZE HANDLES */
         .resize-handle { position: absolute; width: 10px; height: 10px; background: #2196F3; border: 1px solid white; border-radius: 50%; display: none; z-index: 11; }
         .speech-bubble.selected .resize-handle { display: block; }
         .resize-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
@@ -245,9 +254,10 @@ INDEX_HTML = '''
         
         /* FLOATING TOOLBAR */
         .edit-controls { 
-            position: fixed; bottom: 20px; right: 20px; width: 250px; 
+            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 h4 { margin: 0 0 10px 0; color: #4ECDC4; text-align: center; }
         .control-group { margin-top: 10px; border-top: 1px solid #555; padding-top: 10px; }
@@ -266,6 +276,49 @@ INDEX_HTML = '''
         .reset-btn { background: #e74c3c; color: white; }
         .secondary-btn { background: #f39c12; color: white; }
         .export-btn { background: #2196F3; color: white; }
+        .save-btn { background: #9b59b6; color: white; }
+        
+        /* SAVE CODE DISPLAY */
+        .save-code-display { 
+            background: #2ecc71; color: white; padding: 15px; border-radius: 8px; 
+            text-align: center; margin-top: 10px; display: none;
+        }
+        .save-code-display .code { 
+            font-size: 24px; font-weight: bold; letter-spacing: 3px; 
+            background: white; color: #2ecc71; padding: 10px 20px; 
+            border-radius: 4px; display: inline-block; margin: 10px 0;
+            font-family: monospace;
+        }
+        .save-code-display button { 
+            background: white; color: #2ecc71; border: none; 
+            padding: 8px 15px; border-radius: 4px; cursor: pointer; 
+            font-weight: bold; margin-top: 5px;
+        }
+        
+        /* MODAL */
+        .modal-overlay {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.7); display: none; justify-content: center;
+            align-items: center; z-index: 9999;
+        }
+        .modal-content {
+            background: white; padding: 30px; border-radius: 12px;
+            max-width: 400px; width: 90%; text-align: center;
+        }
+        .modal-content h2 { color: #2ecc71; margin-bottom: 20px; }
+        .modal-content .code {
+            font-size: 32px; font-weight: bold; letter-spacing: 4px;
+            background: #f0f0f0; padding: 15px 25px; border-radius: 8px;
+            display: inline-block; margin: 15px 0; font-family: monospace;
+            user-select: all;
+        }
+        .modal-content p { color: #666; margin: 10px 0; }
+        .modal-content button {
+            background: #3498db; color: white; border: none;
+            padding: 12px 30px; border-radius: 8px; cursor: pointer;
+            font-weight: bold; font-size: 14px; margin: 5px;
+        }
+        .modal-content button.close-btn { background: #95a5a6; }
     </style>
 </head>
 <body>
@@ -273,11 +326,27 @@ INDEX_HTML = '''
     <div id="upload-container">
         <div class="upload-box">
             <h1>🎬 Comic Generator</h1>
+            
+            <!-- New Comic Section -->
             <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>
+            <label for="file-upload" class="file-label">📁 Choose Video File</label>
             <span id="fn" style="margin-bottom:10px; display:block; color:#666;">No file selected</span>
-            <button class="submit-btn" onclick="upload()">Generate Comic</button>
-            <button id="restore-btn" class="restore-btn" onclick="restoreSession()">📂 Restore Unsaved Session</button>
+            <button class="submit-btn" onclick="upload()">🚀 Generate Comic</button>
+            
+            <!-- Restore Draft Section -->
+            <button id="restore-draft-btn" class="restore-btn" style="display:none; margin-top:15px;" onclick="restoreDraft()">
+                📂 Restore Unsaved Draft
+            </button>
+            
+            <!-- Load Saved Comic Section -->
+            <div class="load-section">
+                <h3>📥 Load Saved Comic</h3>
+                <p style="font-size:12px; color:#888; margin-bottom:10px;">Enter your save code to continue editing</p>
+                <div class="load-input-group">
+                    <input type="text" id="load-code-input" placeholder="SAVE CODE" maxlength="8" style="text-transform:uppercase;">
+                    <button onclick="loadSavedComic()">Load</button>
+                </div>
+            </div>
             
             <div class="loading-view" id="loading-view" style="display:none; margin-top:20px;">
                 <div class="loader" style="margin:0 auto;"></div>
@@ -295,9 +364,20 @@ INDEX_HTML = '''
         <div class="edit-controls">
             <h4>✏️ Interactive Editor</h4>
             
+            <!-- Save/Load Section -->
+            <div class="control-group">
+                <label>💾 Save & Load:</label>
+                <button onclick="saveComic()" class="save-btn">💾 Save Comic (Get Code)</button>
+                <div id="current-save-code" style="display:none; margin-top:8px; padding:8px; background:#2ecc71; border-radius:4px; text-align:center;">
+                    <span style="font-size:11px;">Current Save Code:</span><br>
+                    <span id="display-save-code" style="font-size:18px; font-weight:bold; letter-spacing:2px;"></span>
+                    <button onclick="copyCode()" style="padding:4px 8px; margin-left:5px; font-size:10px;">📋 Copy</button>
+                </div>
+            </div>
+            
             <!-- Bubble Controls -->
             <div class="control-group">
-                <label>Bubble Tools:</label>
+                <label>💬 Bubble Tools:</label>
                 <select id="bubble-type-select" onchange="changeBubbleType(this.value)" disabled>
                     <option value="speech">Speech</option>
                     <option value="thought">Thought</option>
@@ -327,7 +407,7 @@ INDEX_HTML = '''
             
             <!-- Tail Controls -->
             <div class="control-group" id="tail-controls" style="display:none;">
-                <label>Tail Adjustment:</label>
+                <label>📐 Tail Adjustment:</label>
                 <button onclick="rotateTail()" class="secondary-btn">🔄 Rotate Side</button>
                 <div class="slider-container">
                     <label>Pos:</label>
@@ -337,7 +417,7 @@ INDEX_HTML = '''
             
             <!-- Panel Controls -->
             <div class="control-group">
-                <label>Panel Tools:</label>
+                <label>🖼️ Panel Tools:</label>
                 <button onclick="replacePanelImage()" class="action-btn">🖼️ Replace Image</button>
                 <div class="button-grid">
                     <button onclick="adjustFrame('backward')" class="secondary-btn">⬅️ Prev</button>
@@ -351,7 +431,7 @@ INDEX_HTML = '''
             
             <!-- Zoom Controls -->
             <div class="control-group">
-                <label>Zoom & Pan:</label>
+                <label>🔍 Zoom & Pan:</label>
                 <div class="button-grid">
                     <button onclick="resetPanelTransform()" class="secondary-btn">Reset</button>
                     <input type="range" id="zoom-slider" min="100" max="300" value="100" step="5" disabled oninput="handleZoom(this)">
@@ -360,13 +440,24 @@ INDEX_HTML = '''
             
             <!-- Actions -->
             <div class="control-group">
-                <button onclick="saveLocal()" class="secondary-btn">💾 Save Draft</button>
-                <button onclick="exportComic()" class="export-btn">📥 Export Pages</button>
-                <button onclick="clearAndReset()" class="reset-btn" style="margin-top:10px;">🔄 Clear & Reset</button>
+                <button onclick="exportComic()" class="export-btn">📥 Export as PNG</button>
+                <button onclick="goBackToUpload()" class="reset-btn" style="margin-top:10px;">🏠 Back to Home</button>
             </div>
         </div>
     </div>
     
+    <!-- SAVE CODE MODAL -->
+    <div class="modal-overlay" id="save-modal">
+        <div class="modal-content">
+            <h2>✅ Comic Saved!</h2>
+            <p>Your unique save code is:</p>
+            <div class="code" id="modal-save-code">XXXXXXXX</div>
+            <p style="font-size:12px;">Write this code down or copy it.<br>Anyone can load this comic using this code.</p>
+            <button onclick="copyModalCode()">📋 Copy Code</button>
+            <button class="close-btn" onclick="closeModal()">Close</button>
+        </div>
+    </div>
+    
     <script>
         // --- SESSION LOGIC ---
         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);}); }
@@ -374,10 +465,7 @@ INDEX_HTML = '''
         localStorage.setItem('comic_sid', sid);
         console.log("Session ID:", sid);
         
-        if(localStorage.getItem('comic_autosave_'+sid)) {
-            document.getElementById('restore-btn').style.display = 'block';
-        }
-        
+        let currentSaveCode = null;
         let interval, selectedBubble = null, selectedPanel = null;
         let isDragging = false, isResizing = false, isPanning = false;
         let startX, startY, initX, initY, initW, initH;
@@ -385,18 +473,175 @@ INDEX_HTML = '''
         let resizeHandle = '', originalWidth, originalHeight, originalX, originalY, originalMouseX, originalMouseY;
         let currentlyEditing = null;
         
-        // --- RESTORE FUNCTION ---
-        function restoreSession() {
-            const savedData = localStorage.getItem('comic_autosave_'+sid);
-            if(!savedData) return alert("No saved session found.");
+        // Check for draft on load
+        if(localStorage.getItem('comic_draft_'+sid)) {
+            document.getElementById('restore-draft-btn').style.display = 'block';
+        }
+        
+        // --- MODAL FUNCTIONS ---
+        function showSaveModal(code) {
+            document.getElementById('modal-save-code').textContent = code;
+            document.getElementById('save-modal').style.display = 'flex';
+        }
+        function closeModal() {
+            document.getElementById('save-modal').style.display = 'none';
+        }
+        function copyModalCode() {
+            const code = document.getElementById('modal-save-code').textContent;
+            navigator.clipboard.writeText(code).then(() => {
+                alert('Code copied to clipboard!');
+            });
+        }
+        function copyCode() {
+            if(currentSaveCode) {
+                navigator.clipboard.writeText(currentSaveCode).then(() => {
+                    alert('Code copied!');
+                });
+            }
+        }
+        
+        // --- SAVE COMIC TO SERVER ---
+        async function saveComic() {
+            const state = getCurrentState();
+            if(!state || state.length === 0) {
+                alert('No comic to save!');
+                return;
+            }
+            
+            try {
+                const response = await fetch(`/save_comic?sid=${sid}`, {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({
+                        pages: state,
+                        savedAt: new Date().toISOString()
+                    })
+                });
+                
+                const data = await response.json();
+                if(data.success) {
+                    currentSaveCode = data.code;
+                    document.getElementById('display-save-code').textContent = data.code;
+                    document.getElementById('current-save-code').style.display = 'block';
+                    showSaveModal(data.code);
+                    // Also save to local draft
+                    saveDraft();
+                } else {
+                    alert('Failed to save: ' + data.message);
+                }
+            } catch(e) {
+                console.error(e);
+                alert('Error saving comic');
+            }
+        }
+        
+        // --- LOAD SAVED COMIC ---
+        async function loadSavedComic() {
+            const code = document.getElementById('load-code-input').value.trim().toUpperCase();
+            if(!code || code.length < 4) {
+                alert('Please enter a valid save code');
+                return;
+            }
+            
+            try {
+                const response = await fetch(`/load_comic/${code}`);
+                const data = await response.json();
+                
+                if(data.success) {
+                    currentSaveCode = code;
+                    sid = data.originalSid || sid;
+                    localStorage.setItem('comic_sid', sid);
+                    
+                    renderFromState(data.pages);
+                    document.getElementById('upload-container').style.display = 'none';
+                    document.getElementById('editor-container').style.display = 'block';
+                    
+                    document.getElementById('display-save-code').textContent = code;
+                    document.getElementById('current-save-code').style.display = 'block';
+                    
+                    saveDraft();
+                } else {
+                    alert('Could not load comic: ' + data.message);
+                }
+            } catch(e) {
+                console.error(e);
+                alert('Error loading comic. Check the code and try again.');
+            }
+        }
+        
+        // --- RESTORE DRAFT (Local Storage) ---
+        function restoreDraft() {
+            const savedData = localStorage.getItem('comic_draft_'+sid);
+            if(!savedData) {
+                alert("No draft found.");
+                return;
+            }
             try {
                 const state = JSON.parse(savedData);
-                renderFromState(state);
+                if(state.saveCode) {
+                    currentSaveCode = state.saveCode;
+                    document.getElementById('display-save-code').textContent = state.saveCode;
+                    document.getElementById('current-save-code').style.display = 'block';
+                }
+                renderFromState(state.pages || state);
                 document.getElementById('upload-container').style.display = 'none';
                 document.getElementById('editor-container').style.display = 'block';
-            } catch(e) { console.error(e); alert("Failed to restore session."); }
+            } catch(e) { 
+                console.error(e); 
+                alert("Failed to restore draft."); 
+            }
+        }
+        
+        // --- GET CURRENT STATE ---
+        function getCurrentState() {
+            const pages = [];
+            document.querySelectorAll('.comic-page').forEach(p => {
+                const panels = [];
+                p.querySelectorAll('.panel').forEach(pan => {
+                    const img = pan.querySelector('img');
+                    const bubbles = [];
+                    pan.querySelectorAll('.speech-bubble').forEach(b => {
+                        const textEl = b.querySelector('.bubble-text');
+                        bubbles.push({
+                            text: textEl ? textEl.textContent : '',
+                            left: b.style.left, 
+                            top: b.style.top,
+                            width: b.style.width, 
+                            height: b.style.height,
+                            classes: b.className,
+                            type: b.dataset.type,
+                            font: b.style.fontFamily,
+                            tailPos: b.style.getPropertyValue('--tail-pos'),
+                            colors: {
+                                fill: b.style.getPropertyValue('--bubble-fill-color'),
+                                text: b.style.getPropertyValue('--bubble-text-color')
+                            }
+                        });
+                    });
+                    panels.push({
+                        src: img.src,
+                        zoom: img.dataset.zoom, 
+                        tx: img.dataset.translateX, 
+                        ty: img.dataset.translateY,
+                        bubbles: bubbles
+                    });
+                });
+                pages.push({ panels: panels });
+            });
+            return pages;
         }
         
+        // --- SAVE DRAFT TO LOCAL STORAGE ---
+        function saveDraft() {
+            const state = {
+                pages: getCurrentState(),
+                saveCode: currentSaveCode,
+                savedAt: new Date().toISOString()
+            };
+            localStorage.setItem('comic_draft_'+sid, JSON.stringify(state));
+        }
+        
+        // --- RENDER FROM STATE ---
         function renderFromState(pagesData) {
             const con = document.getElementById('comic-container');
             con.innerHTML = '';
@@ -427,7 +672,6 @@ INDEX_HTML = '''
                     img.onmousedown = (e) => startPan(e, img);
                     pDiv.appendChild(img);
                     
-                    // Restore bubbles
                     (pan.bubbles || []).forEach(bData => {
                         const b = createBubbleHTML(bData);
                         pDiv.appendChild(b);
@@ -443,7 +687,13 @@ INDEX_HTML = '''
         // --- UPLOAD LOGIC ---
         async function upload() {
             const f = document.getElementById('file-upload').files[0];
-            if(!f) return alert("Select file");
+            if(!f) return alert("Select a video file first");
+            
+            // Generate new session for new upload
+            sid = genUUID();
+            localStorage.setItem('comic_sid', sid);
+            currentSaveCode = null;
+            
             document.querySelector('.upload-box').style.display='none';
             document.getElementById('loading-view').style.display='flex';
             const fd = new FormData(); fd.append('file', f);
@@ -486,16 +736,26 @@ INDEX_HTML = '''
                     }))
                 }));
                 renderFromState(cleanData);
-                saveLocal(); 
+                saveDraft(); 
             });
         }
         
+        // --- GO BACK TO UPLOAD ---
+        function goBackToUpload() {
+            if(confirm('Go back to home? Make sure you saved your comic!')) {
+                document.getElementById('editor-container').style.display = 'none';
+                document.getElementById('upload-container').style.display = 'flex';
+                document.querySelector('.upload-box').style.display = 'block';
+                document.getElementById('loading-view').style.display = 'none';
+                document.getElementById('current-save-code').style.display = 'none';
+            }
+        }
+        
         // --- BUBBLE CREATION ---
         function createBubbleHTML(data) {
             const b = document.createElement('div');
             b.dataset.type = data.type || 'speech';
             
-            // Apply type-specific classes
             applyBubbleType(b, data.type || 'speech', data.classes);
             
             b.style.left = data.left;
@@ -515,7 +775,6 @@ INDEX_HTML = '''
             textSpan.textContent = data.text || '';
             b.appendChild(textSpan);
             
-            // Add resize handles
             ['nw', 'ne', 'sw', 'se'].forEach(dir => {
                 const handle = document.createElement('div');
                 handle.className = `resize-handle ${dir}`;
@@ -523,7 +782,6 @@ INDEX_HTML = '''
                 b.appendChild(handle);
             });
             
-            // Drag
             b.onmousedown = (e) => {
                 if(e.target.classList.contains('resize-handle')) return;
                 e.stopPropagation(); selectBubble(b);
@@ -531,19 +789,13 @@ INDEX_HTML = '''
                 initX = b.offsetLeft; initY = b.offsetTop;
             };
             
-            // Edit Text
-            b.ondblclick = (e) => {
-                e.stopPropagation();
-                editBubbleText(b);
-            };
-            
+            b.ondblclick = (e) => { e.stopPropagation(); editBubbleText(b); };
             b.onclick = (e) => { e.stopPropagation(); selectBubble(b); };
             
             return b;
         }
         
         function applyBubbleType(bubble, type, existingClasses) {
-            // Remove thought dots if any
             bubble.querySelectorAll('.thought-dot').forEach(el => el.remove());
             
             let baseClasses = 'speech-bubble ' + type;
@@ -576,7 +828,7 @@ INDEX_HTML = '''
                 textarea.remove();
                 textSpan.style.display = '';
                 currentlyEditing = null;
-                saveLocal();
+                saveDraft();
             };
             textarea.addEventListener('blur', finishEditing, { once: true });
             textarea.addEventListener('keydown', e => { 
@@ -602,7 +854,7 @@ INDEX_HTML = '''
         });
         
         document.addEventListener('mouseup', () => {
-            if(isDragging || isResizing || isPanning) saveLocal();
+            if(isDragging || isResizing || isPanning) saveDraft();
             isDragging = false; isResizing = false; isPanning = false;
         });
         
@@ -645,7 +897,6 @@ INDEX_HTML = '''
             selectedBubble = el;
             el.classList.add('selected');
             
-            // Sync Controls
             const bubbleType = el.dataset.type || 'speech';
             document.getElementById('tail-controls').style.display = (bubbleType === 'speech' || bubbleType === 'thought') ? 'block' : 'none';
             
@@ -653,14 +904,12 @@ INDEX_HTML = '''
             document.getElementById('zoom-slider').disabled = true;
             document.getElementById('bubble-type-select').value = bubbleType;
             
-            // Sync colors
             const styles = window.getComputedStyle(el);
             const textColor = styles.getPropertyValue('--bubble-text-color').trim() || rgbToHex(styles.color);
             const fillColor = styles.getPropertyValue('--bubble-fill-color').trim() || rgbToHex(styles.backgroundColor);
             document.getElementById('bubble-text-color').value = textColor;
             document.getElementById('bubble-fill-color').value = fillColor;
             
-            // Sync tail slider
             const tailPos = styles.getPropertyValue('--tail-pos').trim();
             document.getElementById('tail-slider').value = tailPos ? parseInt(tailPos) : 50;
         }
@@ -689,7 +938,7 @@ INDEX_HTML = '''
             });
             selectedPanel.appendChild(b);
             selectBubble(b);
-            saveLocal();
+            saveDraft();
         }
         
         function deleteBubble() { 
@@ -697,7 +946,7 @@ INDEX_HTML = '''
             if(confirm("Delete this bubble?")) {
                 selectedBubble.remove(); 
                 selectedBubble = null;
-                saveLocal(); 
+                saveDraft(); 
             }
         }
         
@@ -706,13 +955,13 @@ INDEX_HTML = '''
             applyBubbleType(selectedBubble, type);
             selectedBubble.classList.add('selected');
             document.getElementById('tail-controls').style.display = (type === 'speech' || type === 'thought') ? 'block' : 'none';
-            saveLocal();
+            saveDraft();
         }
         
         function changeFont(font) {
             if(!selectedBubble) return;
             selectedBubble.style.fontFamily = font;
-            saveLocal();
+            saveDraft();
         }
         
         function rotateTail() {
@@ -733,27 +982,26 @@ INDEX_HTML = '''
                 else if (isFlippedH && isFlippedV) selectedBubble.classList.remove('flipped');
                 else selectedBubble.classList.remove('flipped-vertical');
             }
-            saveLocal();
+            saveDraft();
         }
         
         function slideTail(v) { 
             if(selectedBubble) { 
                 selectedBubble.style.setProperty('--tail-pos', v+'%'); 
-                saveLocal(); 
+                saveDraft(); 
             } 
         }
         
-        // Color handlers
         document.getElementById('bubble-text-color').addEventListener('input', (e) => {
             if(selectedBubble) { 
                 selectedBubble.style.setProperty('--bubble-text-color', e.target.value); 
-                saveLocal(); 
+                saveDraft(); 
             }
         });
         document.getElementById('bubble-fill-color').addEventListener('input', (e) => {
             if(selectedBubble) { 
                 selectedBubble.style.setProperty('--bubble-fill-color', e.target.value); 
-                saveLocal(); 
+                saveDraft(); 
             }
         });
         
@@ -763,7 +1011,7 @@ INDEX_HTML = '''
             const img = selectedPanel.querySelector('img');
             img.dataset.zoom = el.value;
             updateImageTransform(img);
-            saveLocal();
+            saveDraft();
         }
         
         function startPan(e, img) {
@@ -802,7 +1050,7 @@ INDEX_HTML = '''
             img.dataset.translateY = 0;
             document.getElementById('zoom-slider').value = 100;
             updateImageTransform(img);
-            saveLocal();
+            saveDraft();
         }
         
         // --- BACKEND ACTIONS ---
@@ -819,7 +1067,7 @@ INDEX_HTML = '''
                 if(d.success) { 
                     img.src = `/frames/${d.new_filename}?sid=${sid}`; 
                     resetPanelTransform();
-                    saveLocal(); 
+                    saveDraft(); 
                 } else {
                     alert('Error: ' + d.error);
                 }
@@ -845,7 +1093,7 @@ INDEX_HTML = '''
                 alert('Error: ' + d.message);
             }
             img.style.opacity = '1';
-            saveLocal();
+            saveDraft();
         }
         
         async function gotoTimestamp() {
@@ -878,7 +1126,7 @@ INDEX_HTML = '''
                 alert('Error: ' + d.message);
             }
             img.style.opacity = '1';
-            saveLocal();
+            saveDraft();
         }
         
         // --- EXPORT ---
@@ -886,7 +1134,6 @@ INDEX_HTML = '''
             const pgs = document.querySelectorAll('.comic-page');
             if(pgs.length === 0) return alert("No pages found");
             
-            // Freeze dimensions
             const bubbles = document.querySelectorAll('.speech-bubble');
             bubbles.forEach(b => {
                 const rect = b.getBoundingClientRect();
@@ -908,59 +1155,12 @@ INDEX_HTML = '''
                 }
             }
             
-            // Unfreeze
             bubbles.forEach(b => {
                 b.style.width = '';
                 b.style.height = '';
             });
         }
         
-        // --- SAVE & RESET ---
-        function saveLocal() {
-            const pages = [];
-            document.querySelectorAll('.comic-page').forEach(p => {
-                const panels = [];
-                p.querySelectorAll('.panel').forEach(pan => {
-                    const img = pan.querySelector('img');
-                    const bubbles = [];
-                    pan.querySelectorAll('.speech-bubble').forEach(b => {
-                        const textEl = b.querySelector('.bubble-text');
-                        bubbles.push({
-                            text: textEl ? textEl.textContent : '',
-                            left: b.style.left, 
-                            top: b.style.top,
-                            width: b.style.width, 
-                            height: b.style.height,
-                            classes: b.className,
-                            type: b.dataset.type,
-                            font: b.style.fontFamily,
-                            tailPos: b.style.getPropertyValue('--tail-pos'),
-                            colors: {
-                                fill: b.style.getPropertyValue('--bubble-fill-color'),
-                                text: b.style.getPropertyValue('--bubble-text-color')
-                            }
-                        });
-                    });
-                    panels.push({
-                        src: img.src,
-                        zoom: img.dataset.zoom, 
-                        tx: img.dataset.translateX, 
-                        ty: img.dataset.translateY,
-                        bubbles: bubbles
-                    });
-                });
-                pages.push({ panels: panels });
-            });
-            localStorage.setItem('comic_autosave_'+sid, JSON.stringify(pages));
-        }
-        
-        function clearAndReset() {
-            if(confirm("Clear all edits and reset?")) {
-                localStorage.removeItem('comic_autosave_'+sid);
-                location.reload();
-            }
-        }
-        
         // Helper
         function rgbToHex(rgb) {
             if (!rgb || !rgb.startsWith('rgb')) return '#ffffff';
@@ -991,7 +1191,6 @@ class EnhancedComicGenerator:
         os.makedirs(self.output_dir, exist_ok=True)
         self.video_fps = None
         self.frame_metadata = {}
-        self.apply_comic_style = False
 
     def update_status(self, message, progress):
         try:
@@ -1015,14 +1214,12 @@ class EnhancedComicGenerator:
                         os.remove(os.path.join(self.output_dir, f))
                     except: 
                         pass
-        # Also clean temp srt
         user_srt = os.path.join(self.user_dir, 'subs.srt')
         if os.path.exists(user_srt):
             os.remove(user_srt)
         print("✅ Cleanup complete.")
 
     def generate_keyframes_from_moments(self, key_moments, max_frames=48):
-        """Extract keyframes based on subtitle moments"""
         try:
             cap = cv2.VideoCapture(self.video_path)
             if not cap.isOpened():
@@ -1073,7 +1270,6 @@ class EnhancedComicGenerator:
             return False
 
     def _enhance_all_images(self, single_image_path=None):
-        """Apply simple color enhancement"""
         try:
             enhancer = SimpleColorEnhancer()
             if single_image_path:
@@ -1088,7 +1284,6 @@ class EnhancedComicGenerator:
             print(f"⚠️ Simple enhancement failed: {e}")
 
     def _enhance_quality_colors(self, single_image_path=None):
-        """Apply quality color enhancement"""
         try:
             enhancer = QualityColorEnhancer()
             if single_image_path:
@@ -1103,7 +1298,6 @@ class EnhancedComicGenerator:
             print(f"⚠️ Quality enhancement failed: {e}")
 
     def _process_bubble_for_frame(self, frame_file):
-        """Process AI bubble placement for a single frame"""
         frame_path = os.path.join(self.frames_dir, frame_file)
         meta = self.frame_metadata.get(frame_file, {})
         dialogue = meta.get('dialogue', '') if isinstance(meta, dict) else ''
@@ -1135,7 +1329,6 @@ class EnhancedComicGenerator:
             )
 
     def _create_ai_bubbles_from_moments(self):
-        """Create AI-placed bubbles for all frames"""
         frame_files = sorted([f for f in os.listdir(self.frames_dir) if f.endswith('.png')])
         
         if not os.path.exists(self.metadata_path):
@@ -1150,13 +1343,11 @@ class EnhancedComicGenerator:
         return bubbles
 
     def _generate_pages(self, bubbles_list):
-        """Generate comic pages from frames and bubbles"""
         try:
             from backend.fixed_12_pages_800x1080 import generate_12_pages_800x1080
             frame_files = sorted([f for f in os.listdir(self.frames_dir) if f.endswith('.png')])
             return generate_12_pages_800x1080(frame_files, bubbles_list)
         except ImportError:
-            # Fallback: simple 4-panel pages
             pages = []
             frame_files = sorted([f for f in os.listdir(self.frames_dir) if f.endswith('.png')])
             num_pages = (len(frame_files) + 3) // 4
@@ -1171,7 +1362,6 @@ class EnhancedComicGenerator:
             return pages
 
     def generate_comic(self):
-        """Main comic generation pipeline"""
         start_time = time.time()
         try:
             if cv2 is None:
@@ -1247,7 +1437,6 @@ class EnhancedComicGenerator:
             return False
 
     def _save_results(self, pages):
-        """Save comic pages data to JSON"""
         try:
             pages_data = []
             for page in pages:
@@ -1263,7 +1452,6 @@ class EnhancedComicGenerator:
             print(f"❌ Save results failed: {e}")
 
     def regenerate_frame(self, fname, direction):
-        """Regenerate a frame by stepping forward/backward"""
         try:
             if not os.path.exists(self.metadata_path):
                 return {"success": False, "message": "Frame metadata missing."}
@@ -1274,24 +1462,20 @@ class EnhancedComicGenerator:
             if fname not in meta:
                 return {"success": False, "message": "Panel not linked to video."}
             
-            # Get current time
             current_data = meta[fname]
             if isinstance(current_data, dict):
                 curr_time = current_data['time']
             else:
                 curr_time = current_data
             
-            # Get video FPS
             if not self.video_fps:
                 cap = cv2.VideoCapture(self.video_path)
                 self.video_fps = cap.get(cv2.CAP_PROP_FPS) or 25
                 cap.release()
             
-            # Calculate new time
             offset = (1.0 / self.video_fps) * (1 if direction == 'forward' else -1)
             new_time = max(0, curr_time + offset)
             
-            # Extract new frame
             cap = cv2.VideoCapture(self.video_path)
             cap.set(cv2.CAP_PROP_POS_MSEC, new_time * 1000)
             ret, frame = cap.read()
@@ -1301,12 +1485,10 @@ class EnhancedComicGenerator:
                 frame_path = os.path.join(self.frames_dir, fname)
                 cv2.imwrite(frame_path, frame)
                 
-                # Apply enhancements
                 print(f"🎨 Applying enhancements to new frame: {fname}")
                 self._enhance_all_images(single_image_path=frame_path)
                 self._enhance_quality_colors(single_image_path=frame_path)
                 
-                # Update metadata
                 if isinstance(meta[fname], dict):
                     meta[fname]['time'] = new_time
                 else:
@@ -1325,7 +1507,6 @@ class EnhancedComicGenerator:
             return {"success": False, "message": str(e)}
 
     def get_frame_at_timestamp(self, fname, ts):
-        """Get a specific frame at a given timestamp"""
         try:
             cap = cv2.VideoCapture(self.video_path)
             if not cap.isOpened():
@@ -1346,12 +1527,10 @@ class EnhancedComicGenerator:
                 frame_path = os.path.join(self.frames_dir, fname)
                 cv2.imwrite(frame_path, frame)
                 
-                # Apply enhancements
                 print(f"🎨 Applying enhancements to frame from timestamp: {fname}")
                 self._enhance_all_images(single_image_path=frame_path)
                 self._enhance_quality_colors(single_image_path=frame_path)
                 
-                # Update metadata
                 if os.path.exists(self.metadata_path):
                     with open(self.metadata_path, 'r') as f:
                         meta = json.load(f)
@@ -1452,13 +1631,109 @@ def rep_panel():
         return jsonify({'success': False, 'error': 'No image provided.'})
     
     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(BASE_USER_DIR, sid, 'frames', fname))
+    f.save(os.path.join(frames_dir, fname))
     return jsonify({'success': True, 'new_filename': fname})
 
+# --- SAVE COMIC ENDPOINT ---
+@app.route('/save_comic', methods=['POST'])
+def save_comic():
+    sid = request.args.get('sid')
+    if not sid:
+        return jsonify({'success': False, 'message': 'Missing session ID'})
+    
+    try:
+        data = request.get_json()
+        
+        # Generate unique save code
+        save_code = generate_save_code()
+        save_dir = os.path.join(SAVED_COMICS_DIR, save_code)
+        os.makedirs(save_dir, exist_ok=True)
+        
+        # Copy frames from user directory to saved directory
+        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)
+        
+        # Save the comic state
+        save_data = {
+            'code': save_code,
+            'originalSid': sid,
+            'pages': data.get('pages', []),
+            'savedAt': data.get('savedAt', time.strftime('%Y-%m-%d %H:%M:%S'))
+        }
+        
+        with open(os.path.join(save_dir, 'comic_state.json'), 'w') as f:
+            json.dump(save_data, f, indent=2)
+        
+        print(f"✅ Comic saved with code: {save_code}")
+        return jsonify({'success': True, 'code': save_code})
+        
+    except Exception as e:
+        traceback.print_exc()
+        return jsonify({'success': False, 'message': str(e)})
+
+# --- LOAD COMIC ENDPOINT ---
+@app.route('/load_comic/<code>')
+def load_comic(code):
+    code = code.upper()
+    save_dir = os.path.join(SAVED_COMICS_DIR, code)
+    state_file = os.path.join(save_dir, 'comic_state.json')
+    
+    if not os.path.exists(state_file):
+        return jsonify({'success': False, 'message': 'Save code not found'})
+    
+    try:
+        with open(state_file, 'r') as f:
+            save_data = json.load(f)
+        
+        original_sid = save_data.get('originalSid')
+        
+        # Copy frames to user directory if needed
+        saved_frames_dir = os.path.join(save_dir, 'frames')
+        if original_sid and os.path.exists(saved_frames_dir):
+            user_frames_dir = os.path.join(BASE_USER_DIR, original_sid, 'frames')
+            os.makedirs(user_frames_dir, exist_ok=True)
+            
+            # Copy files that don't exist
+            for fname in os.listdir(saved_frames_dir):
+                src = os.path.join(saved_frames_dir, fname)
+                dst = os.path.join(user_frames_dir, fname)
+                if not os.path.exists(dst):
+                    shutil.copy2(src, dst)
+        
+        return jsonify({
+            'success': True,
+            'pages': save_data.get('pages', []),
+            'originalSid': original_sid,
+            'savedAt': save_data.get('savedAt')
+        })
+        
+    except Exception as e:
+        traceback.print_exc()
+        return jsonify({'success': False, 'message': str(e)})
+
+# --- SERVE SAVED COMIC FRAMES ---
+@app.route('/saved_frames/<code>/<path:filename>')
+def get_saved_frame(code, filename):
+    code = code.upper()
+    frames_dir = os.path.join(SAVED_COMICS_DIR, code, 'frames')
+    if os.path.exists(os.path.join(frames_dir, filename)):
+        return send_from_directory(frames_dir, filename)
+    return "Frame not found", 404
+
 
 if __name__ == '__main__':
     os.makedirs(BASE_USER_DIR, exist_ok=True)
+    os.makedirs(SAVED_COMICS_DIR, exist_ok=True)
     port = int(os.getenv("PORT", 7860))
     print(f"🚀 Starting Enhanced Comic Generator on host 0.0.0.0, port {port}")
+    print(f"📁 User data directory: {BASE_USER_DIR}")
+    print(f"💾 Saved comics directory: {SAVED_COMICS_DIR}")
     app.run(host='0.0.0.0', port=port, debug=False)