Update app_enhanced.py

app_enhanced.py

@@ -24,16 +24,20 @@ def gpu_warmup():
     return True
 
 # ======================================================
-# 🧱 DATA CLASSES (Local Definition)
+# 🧱 DATA CLASSES (Robust Local Definitions)
 # ======================================================
-def bubble(dialog="", bubble_offset_x=50, bubble_offset_y=20, lip_x=-1, lip_y=-1, emotion='normal'):
+def bubble(dialog="", bubble_offset_x=50, bubble_offset_y=20, lip_x=-1, lip_y=-1, emotion='normal', type='speech'):
+    # Returns a dictionary that matches the frontend expectations
     return {
         'dialog': dialog, 
         'bubble_offset_x': int(bubble_offset_x), 
         'bubble_offset_y': int(bubble_offset_y),
         'lip_x': int(lip_x), 
         'lip_y': int(lip_y), 
-        'emotion': emotion
+        'emotion': emotion,
+        'type': type, # speech, thought, reaction, narration
+        'tail_pos': 50,
+        'tail_direction': 'bottom'
     }
 
 def panel(image=""): 
@@ -45,7 +49,7 @@ class Page:
         self.bubbles = bubbles
 
 # ======================================================
-# 🔧 APP SETUP
+# 🔧 APP CONFIG
 # ======================================================
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
@@ -65,13 +69,14 @@ def generate_save_code(length=8):
             return code
 
 # ======================================================
-# 🧠 GLOBAL GPU FUNCTIONS
+# 🧠 GLOBAL GPU FUNCTIONS (THE ENGINE)
 # ======================================================
 
-@spaces.GPU(duration=240)
+@spaces.GPU(duration=300) # Increased duration for longer videos
 def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages):
     print(f"🚀 GPU Task Started: {video_path} | Target Pages: {target_pages}")
     
+    # --- Local Imports for GPU Context ---
     import cv2
     import srt
     import math
@@ -91,100 +96,141 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     duration = total_frames / fps
     cap.release()
     
-    # 2. Subtitles
+    # 2. Subtitles Generation
     user_srt = os.path.join(user_dir, 'subs.srt')
     try:
+        print("🎬 Extracting subtitles...")
         get_real_subtitles(video_path)
         if os.path.exists('test1.srt'):
             shutil.move('test1.srt', user_srt)
     except Exception as e:
-        print(f"⚠️ Subtitle error: {e}")
-        with open(user_srt, 'w') as f: f.write("1\n00:00:01,000 --> 00:00:04,000\nHello\n")
+        print(f"⚠️ Subtitle error: {e}. Using fallback.")
+        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:
         all_subs = list(srt.parse(f.read()))
     
-    key_moments = [{'index': s.index, 'text': s.content, 'start': s.start.total_seconds(), 'end': s.end.total_seconds()} for s in all_subs]
-    key_moments.sort(key=lambda x: x['start'])
+    # 3. Smart Keyframe Selection (Equal Division Logic)
+    raw_moments = [{'index': s.index, 'text': s.content, 'start': s.start.total_seconds(), 'end': s.end.total_seconds()} for s in all_subs]
+    raw_moments.sort(key=lambda x: x['start'])
     
-    # 3. Extract Frames (Limit max frames to keep it snappy)
+    # LOGIC: 4 panels per page.
+    if target_pages <= 0: target_pages = 1
+    panels_per_page = 4
+    total_panels_needed = target_pages * panels_per_page
+    
+    print(f"📊 Calculating: Needed {total_panels_needed} panels for {target_pages} pages.")
+    
+    selected_moments = []
+    if len(raw_moments) <= total_panels_needed:
+        # If video is short/has few lines, take all
+        selected_moments = raw_moments
+    else:
+        # EVENLY DISTRIBUTE selection across the entire list
+        # This ensures the comic covers the beginning, middle, and end.
+        indices = np.linspace(0, len(raw_moments) - 1, total_panels_needed, dtype=int)
+        selected_moments = [raw_moments[i] for i in indices]
+        
+    # 4. Extract Frames
     frame_metadata = {}
     cap = cv2.VideoCapture(video_path)
     count = 0
-    max_frames_to_extract = 40 
+    frame_files_ordered = []
+    
+    print(f"📸 Extracting {len(selected_moments)} frames...")
     
-    for i, moment in enumerate(key_moments[:max_frames_to_extract]):
+    for i, moment in enumerate(selected_moments):
         mid = (moment['start'] + moment['end']) / 2
         if mid > duration: continue
+        
         cap.set(cv2.CAP_PROP_POS_FRAMES, int(mid * fps))
         ret, frame = cap.read()
         if ret:
             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}
+            
+            # Save metadata
+            frame_metadata[fname] = {
+                'dialogue': moment['text'], 
+                'time': mid,
+                'start': moment['start'],
+                'end': moment['end']
+            }
+            frame_files_ordered.append(fname)
             count += 1
+            
+            # Sync to disk to prevent libpng errors on fast writes
+            os.sync() 
     cap.release()
     
-    with open(metadata_path, 'w') as f: json.dump(frame_metadata, f)
+    with open(metadata_path, 'w') as f: json.dump(frame_metadata, f, indent=2)
         
-    # 4. Enhance
+    # 5. Image Enhancement
     try: black_bar_crop() 
     except: pass
     
     se = SimpleColorEnhancer()
     qe = QualityColorEnhancer()
-    frame_files = sorted([f for f in os.listdir(frames_dir) if f.endswith('.png')])
     
-    print(f"🎨 Enhancing {len(frame_files)} frames...")
-    for f in frame_files:
+    print("🎨 Enhancing images...")
+    for f in frame_files_ordered:
         p = os.path.join(frames_dir, f)
-        try: se.enhance_single(p, p)
+        try: se.enhance_single(p, p) # Overwrite
         except: pass
-        try: qe.enhance_single(p, p)
+        try: qe.enhance_single(p, p) # Overwrite
         except: pass
         
-    # 5. Bubbles
-    print("💬 Placing bubbles...")
+    # 6. Bubble Placement & Type Detection
+    print("💬 Analyzing faces and bubbles...")
     bubbles_list = []
-    for f in frame_files:
+    
+    for f in frame_files_ordered:
         p = os.path.join(frames_dir, f)
         dialogue = frame_metadata.get(f, {}).get('dialogue', '')
+        
+        # Determine bubble type based on text content (Simple heuristic)
+        b_type = 'speech'
+        if '(' in dialogue and ')' in dialogue: b_type = 'narration' # (Sound effect)
+        elif '!' in dialogue and dialogue.isupper(): b_type = 'reaction' # SHOUTING
+        elif '?' in dialogue: b_type = 'speech'
+        
         try:
             faces = face_detector.detect_faces(p)
             lip = face_detector.get_lip_position(p, faces[0]) if faces else (-1, -1)
             bx, by = ai_bubble_placer.place_bubble_ai(p, lip)
-            bubbles_list.append(bubble(dialog=dialogue, bubble_offset_x=bx, bubble_offset_y=by, lip_x=lip[0], lip_y=lip[1]))
+            
+            b = bubble(
+                dialog=dialogue, 
+                bubble_offset_x=bx, 
+                bubble_offset_y=by, 
+                lip_x=lip[0], 
+                lip_y=lip[1], 
+                emotion='normal',
+                type=b_type
+            )
+            bubbles_list.append(b)
         except:
-            bubbles_list.append(bubble(dialog=dialogue))
+            bubbles_list.append(bubble(dialog=dialogue, type=b_type))
             
-    # 6. Dynamic Layout Calculation
-    print("📄 Generating layout...")
-    total_panels = len(frame_files)
-    
-    # Calculate panels per page
-    if target_pages <= 0: target_pages = 1
-    
-    # If we have 32 panels and user wants 4 pages -> 8 panels/page
-    # If we have 32 panels and user wants 10 pages -> ~3 panels/page
-    panels_per_page = math.ceil(total_panels / target_pages)
-    
-    print(f"📊 Layout: {total_panels} panels across {target_pages} pages (~{panels_per_page}/page)")
-    
+    # 7. Final Layout Construction
+    print("📄 Assembling pages...")
     pages = []
+    
+    # We strictly use 4 panels per page for consistency based on user input
     for i in range(target_pages):
-        start_idx = i * panels_per_page
-        end_idx = start_idx + panels_per_page
+        start_idx = i * 4
+        end_idx = start_idx + 4
         
-        # Slicing safely
-        page_frames = frame_files[start_idx:end_idx]
-        page_bubbles = bubbles_list[start_idx:end_idx]
+        # Get slice for this page
+        p_frames = frame_files_ordered[start_idx:end_idx]
+        p_bubbles = bubbles_list[start_idx:end_idx]
         
-        if page_frames:
-            pg_panels = [panel(image=f) for f in page_frames]
-            pages.append(Page(panels=pg_panels, bubbles=page_bubbles))
+        if p_frames:
+            pg_panels = [panel(image=f) for f in p_frames]
+            pages.append(Page(panels=pg_panels, bubbles=p_bubbles))
 
-    # Serialize Results
+    # Serialize
     result = []
     for pg in pages:
         p_data = [p if isinstance(p, dict) else p.__dict__ for p in pg.panels]
@@ -215,10 +261,8 @@ def regen_frame_gpu(video_path, frames_dir, metadata_path, fname, direction):
     
     if ret:
         p = os.path.join(frames_dir, fname)
-        # Write then Flush to prevent libpng errors
         cv2.imwrite(p, frame)
-        os.sync() 
-        
+        os.sync()
         try: SimpleColorEnhancer().enhance_single(p, p)
         except: pass
         
@@ -243,7 +287,6 @@ def get_frame_at_ts_gpu(video_path, frames_dir, metadata_path, fname, ts):
         p = os.path.join(frames_dir, fname)
         cv2.imwrite(p, frame)
         os.sync()
-        
         try: SimpleColorEnhancer().enhance_single(p, p)
         except: pass
         
@@ -279,7 +322,6 @@ class EnhancedComicGenerator:
     def run(self, target_pages):
         try:
             self.write_status("Waiting for GPU...", 5)
-            # Pass target_pages to GPU function
             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)
@@ -293,7 +335,7 @@ class EnhancedComicGenerator:
             json.dump({'message': msg, 'progress': prog}, f)
 
 # ======================================================
-# 🌐 ROUTES
+# 🌐 ROUTES & HTML
 # ======================================================
 
 INDEX_HTML = '''
@@ -302,18 +344,16 @@ INDEX_HTML = '''
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Movie to Comic Generator</title>
+    <title>🎬 Enhanced Comic Generator</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.min.js"></script>
     <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&family=Gloria+Hallelujah&family=Lato&display=swap" rel="stylesheet">
     <style>
         * { box-sizing: border-box; }
         body { background-color: #fdf6e3; font-family: 'Lato', sans-serif; color: #3d3d3d; margin: 0; min-height: 100vh; }
         
-        /* UPLOAD SCREEN */
         #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 SCREEN */
         #editor-container { display: none; padding: 20px; width: 100%; box-sizing: border-box; padding-bottom: 100px; }
         
         h1 { color: #2c3e50; margin-bottom: 20px; font-weight: 600; }
@@ -321,10 +361,9 @@ INDEX_HTML = '''
         .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; }
         
-        /* PAGE INPUT STYLES */
-        .page-input-group { margin: 15px 0; text-align: left; }
+        .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: #333; }
-        .page-input-group input { width: 100%; padding: 10px; border: 2px solid #ddd; border-radius: 8px; font-size: 16px; }
+        .page-input-group input { width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 8px; font-size: 16px; box-sizing: border-box; }
         
         .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; }
@@ -355,11 +394,12 @@ INDEX_HTML = '''
         .bubble-text { padding: 0.8em; word-wrap: break-word; position: relative; z-index: 5; }
         .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; }
-        .speech-bubble.speech { --b: 3em; --h: 1.8em; --t: 0.6; --p: var(--tail-pos, 50%); --r: 1.2em; --c: var(--bubble-fill-color, #4ECDC4); background: var(--c); color: var(--bubble-text-color, #fff); padding: 1em; position: absolute; 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 { 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); }
-        .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); }
+        
+        /* BUBBLE STYLES */
+        .speech-bubble.speech { background: var(--bubble-fill-color, #4ECDC4); color: var(--bubble-text-color, #fff); border-radius: 20px; }
+        .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
+        .speech-bubble.reaction { background: #FFD700; border: 3px solid #E53935; color: #D32F2F; 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: #FAFAFA; border: 2px solid #BDBDBD; color: #424242; border-radius: 3px; }
         
         .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; }
@@ -369,10 +409,12 @@ INDEX_HTML = '''
         .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 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-size: 11px; font-weight: bold; display: block; margin-bottom: 3px; }
         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; }
         .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; }
-        .action-btn:disabled { background: #555; cursor: not-allowed; opacity: 0.7; }
+        .reset-btn { background: #e74c3c; color: white; }
         
         /* 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; }
@@ -383,14 +425,15 @@ INDEX_HTML = '''
 <body>
     <div id="upload-container">
         <div class="upload-box">
-            <h1>🎬 Comic Generator</h1>
+            <h1>🎬 Enhanced Comic Generator</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 File</label>
             <span id="fn" style="margin-bottom:10px; display:block; color:#666;">No file selected</span>
             
             <div class="page-input-group">
-                <label>📚 Number of Pages:</label>
-                <input type="number" id="page-count" value="4" min="1" max="10" placeholder="e.g. 4">
+                <label>📚 Total Comic Pages:</label>
+                <input type="number" id="page-count" value="4" min="1" max="15" placeholder="e.g. 4 (Video will be divided evenly)">
+                <small style="color:#666; font-size:11px; display:block; margin-top:5px;">System calculates ~4 panels per page.</small>
             </div>
             
             <button class="submit-btn" onclick="upload()">🚀 Generate Comic</button>
@@ -415,19 +458,40 @@ INDEX_HTML = '''
         <input type="file" id="image-uploader" style="display: none;" accept="image/*">
         <div class="edit-controls">
             <h4>✏️ Interactive Editor</h4>
+            
             <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 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>
+                <button onclick="saveComic()" class="save-btn">💾 Save Comic</button>
+                <div id="current-save-code" style="display:none; margin-top:5px; text-align:center;">
+                    <span id="display-save-code" style="font-weight:bold; background:#eee; padding:2px 5px; border-radius:3px;"></span>
+                    <button onclick="copyCode()" style="padding:2px; width:auto; font-size:10px;">Copy</button>
                 </div>
             </div>
+            
             <div class="control-group">
-                <label>💬 Bubble Tools:</label>
-                <button onclick="addBubble()" class="action-btn">💬 Add Bubble</button>
-                <button onclick="deleteBubble()" class="reset-btn">🗑️ Delete Bubble</button>
+                <label>💬 Bubble Styling:</label>
+                <select id="bubble-type-select" onchange="changeBubbleType(this.value)" disabled>
+                    <option value="speech">Speech</option>
+                    <option value="thought">Thought</option>
+                    <option value="reaction">Reaction (Shout)</option>
+                    <option value="narration">Narration (Box)</option>
+                </select>
+                <select id="font-select" onchange="changeFont(this.value)" disabled>
+                    <option value="'Comic Neue', cursive">Comic Neue</option>
+                    <option value="'Bangers', cursive">Bangers</option>
+                    <option value="'Gloria Hallelujah', cursive">Gloria</option>
+                    <option value="'Lato', sans-serif">Lato</option>
+                </select>
+                <div class="color-grid">
+                    <div><label>Text</label><input type="color" id="bubble-text-color" value="#ffffff" disabled></div>
+                    <div><label>Fill</label><input type="color" id="bubble-fill-color" value="#4ECDC4" disabled></div>
+                </div>
+                <div class="button-grid">
+                    <button onclick="addBubble()" class="action-btn">Add</button>
+                    <button onclick="deleteBubble()" class="reset-btn">Delete</button>
+                </div>
             </div>
+            
             <div class="control-group">
                 <label>🖼️ Panel Tools:</label>
                 <button onclick="replacePanelImage()" class="action-btn">🖼️ Replace Image</button>
@@ -440,14 +504,14 @@ INDEX_HTML = '''
                     <button onclick="gotoTimestamp()" class="action-btn" id="go-btn">Go</button>
                 </div>
             </div>
+            
             <div class="control-group">
                 <button onclick="exportComic()" class="export-btn">📥 Export as PNG</button>
-                <button onclick="goBackToUpload()" class="reset-btn" style="margin-top:10px;">🏠 Back to Home</button>
+                <button onclick="goBackToUpload()" class="reset-btn" style="margin-top:10px;">🏠 Home</button>
             </div>
         </div>
     </div>
     
-    <!-- MODAL -->
     <div class="modal-overlay" id="save-modal">
         <div class="modal-content">
             <h2>✅ Comic Saved!</h2>
@@ -463,11 +527,10 @@ INDEX_HTML = '''
         localStorage.setItem('comic_sid', sid);
         
         let currentSaveCode = null;
-        let isProcessing = false; // Lock to prevent 429 errors
+        let isProcessing = false; // Lock for ZeroGPU throttling
         let interval, selectedBubble = null, selectedPanel = null;
         let isDragging = false, isResizing = false;
-        let startX, startY, initX, initY;
-        let resizeHandle = '', originalWidth, originalHeight, originalX, originalY, originalMouseX, originalMouseY;
+        let startX, startY, initX, initY, resizeHandle, originalWidth, originalHeight;
         let currentlyEditing = null;
         
         if(localStorage.getItem('comic_draft_'+sid)) document.getElementById('restore-draft-btn').style.display = 'block';
@@ -477,12 +540,13 @@ INDEX_HTML = '''
         function closeModal() { document.getElementById('save-modal').style.display = 'none'; }
         function copyModalCode() { navigator.clipboard.writeText(document.getElementById('modal-save-code').textContent).then(() => alert('Code copied!')); }
         function copyCode() { if(currentSaveCode) navigator.clipboard.writeText(currentSaveCode).then(() => alert('Code copied!')); }
+        
         function setProcessing(busy) {
             isProcessing = busy;
             const btns = ['prev-btn', 'next-btn', 'go-btn'];
             btns.forEach(id => {
                 const el = document.getElementById(id);
-                if(el) { el.disabled = busy; el.style.opacity = busy ? '0.5' : '1'; }
+                if(el) { el.disabled = busy; el.style.opacity = busy ? '0.5' : '1'; el.innerText = busy ? '⏳' : el.getAttribute('data-txt') || el.innerText; }
             });
         }
 
@@ -528,7 +592,12 @@ INDEX_HTML = '''
                     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 });
+                        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,
+                            colors: { fill: b.style.getPropertyValue('--bubble-fill-color'), text: b.style.getPropertyValue('--bubble-text-color') }
+                        });
                     });
                     panels.push({ src: img.src, bubbles: bubbles });
                 });
@@ -551,7 +620,6 @@ INDEX_HTML = '''
                     const pDiv = document.createElement('div'); pDiv.className = 'panel';
                     pDiv.onclick = (e) => { e.stopPropagation(); selectPanel(pDiv); };
                     const img = document.createElement('img');
-                    // Add timestamp to src to force refresh
                     img.src = pan.src.includes('?') ? pan.src : pan.src + `?sid=${sid}`; 
                     pDiv.appendChild(img);
                     (pan.bubbles || []).forEach(bData => { pDiv.appendChild(createBubbleHTML(bData)); });
@@ -572,7 +640,7 @@ INDEX_HTML = '''
             
             const fd = new FormData(); 
             fd.append('file', f);
-            fd.append('target_pages', pCount); // Send page count to backend
+            fd.append('target_pages', pCount); 
             
             const r = await fetch(`/uploader?sid=${sid}`, {method:'POST', body:fd});
             if(r.ok) interval = setInterval(checkStatus, 2000);
@@ -593,7 +661,7 @@ INDEX_HTML = '''
                 const cleanData = data.map((p, pi) => ({
                     panels: p.panels.map((pan, j) => ({
                         src: `/frames/${pan.image}?sid=${sid}`,
-                        bubbles: (p.bubbles && p.bubbles[j] && p.bubbles[j].dialog) ? [{ text: p.bubbles[j].dialog, left: (p.bubbles[j].bubble_offset_x || 50) + 'px', top: (p.bubbles[j].bubble_offset_y || 20) + 'px', classes: 'speech-bubble speech tail-bottom' }] : []
+                        bubbles: (p.bubbles && p.bubbles[j] && p.bubbles[j].dialog) ? [{ text: p.bubbles[j].dialog, left: (p.bubbles[j].bubble_offset_x || 50) + 'px', top: (p.bubbles[j].bubble_offset_y || 20) + 'px', type: (p.bubbles[j].type || 'speech') }] : []
                     }))
                 }));
                 renderFromState(cleanData); saveDraft();
@@ -603,9 +671,19 @@ INDEX_HTML = '''
         // --- INTERACTIVE ELEMENTS ---
         function createBubbleHTML(data) {
             const b = document.createElement('div');
-            b.className = data.classes || 'speech-bubble speech tail-bottom';
+            b.className = 'speech-bubble ' + (data.type || 'speech');
+            if(data.classes) b.className = data.classes; 
+            
+            b.dataset.type = data.type || '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.font) b.style.fontFamily = data.font;
+            
+            if(data.colors) {
+                b.style.setProperty('--bubble-fill-color', data.colors.fill || '#4ECDC4');
+                b.style.setProperty('--bubble-text-color', data.colors.text || '#ffffff');
+            }
+            
             const textSpan = document.createElement('span'); textSpan.className = 'bubble-text'; textSpan.textContent = data.text || ''; b.appendChild(textSpan);
             ['nw', 'ne', 'sw', 'se'].forEach(dir => { const handle = document.createElement('div'); handle.className = `resize-handle ${dir}`; handle.onmousedown = (e) => startResize(e, dir); b.appendChild(handle); });
             b.onmousedown = (e) => { if(e.target.classList.contains('resize-handle')) return; e.stopPropagation(); selectBubble(b); isDragging = true; startX = e.clientX; startY = e.clientY; initX = b.offsetLeft; initY = b.offsetTop; };
@@ -627,10 +705,59 @@ INDEX_HTML = '''
         function startResize(e, dir) { e.preventDefault(); e.stopPropagation(); isResizing = true; resizeHandle = dir; const rect = selectedBubble.getBoundingClientRect(); originalWidth = rect.width; originalHeight = rect.height; originalMouseX = e.clientX; originalMouseY = e.clientY; }
         function resizeBubble(e) { if (!isResizing || !selectedBubble) return; const dx = e.clientX - originalMouseX; const dy = e.clientY - originalMouseY; if(resizeHandle.includes('e')) selectedBubble.style.width = (originalWidth + dx)+'px'; if(resizeHandle.includes('s')) selectedBubble.style.height = (originalHeight + dy)+'px'; }
         
-        function selectBubble(el) { if(selectedBubble) selectedBubble.classList.remove('selected'); if(selectedPanel) { selectedPanel.classList.remove('selected'); selectedPanel = null; } selectedBubble = el; el.classList.add('selected'); }
-        function selectPanel(el) { if(selectedPanel) selectedPanel.classList.remove('selected'); if(selectedBubble) { selectedBubble.classList.remove('selected'); selectedBubble = null; } selectedPanel = el; el.classList.add('selected'); }
-        function addBubble() { if(!selectedPanel) return alert("Select a panel first"); const b = createBubbleHTML({ text: "Text", left: "50px", top: "30px", classes: "speech-bubble speech tail-bottom" }); selectedPanel.appendChild(b); selectBubble(b); saveDraft(); }
-        function deleteBubble() { if(!selectedBubble) return alert("Select a bubble"); selectedBubble.remove(); selectedBubble=null; saveDraft(); }
+        function selectBubble(el) { 
+            if(selectedBubble) selectedBubble.classList.remove('selected'); 
+            if(selectedPanel) { selectedPanel.classList.remove('selected'); selectedPanel = null; } 
+            selectedBubble = el; el.classList.add('selected'); 
+            
+            // Update controls
+            document.getElementById('bubble-type-select').disabled = false;
+            document.getElementById('font-select').disabled = false;
+            document.getElementById('bubble-text-color').disabled = false;
+            document.getElementById('bubble-fill-color').disabled = false;
+            
+            document.getElementById('bubble-type-select').value = el.dataset.type || 'speech';
+        }
+        
+        function selectPanel(el) { 
+            if(selectedPanel) selectedPanel.classList.remove('selected'); 
+            if(selectedBubble) { selectedBubble.classList.remove('selected'); selectedBubble = null; } 
+            selectedPanel = el; el.classList.add('selected'); 
+            
+            document.getElementById('bubble-type-select').disabled = true;
+            document.getElementById('font-select').disabled = true;
+        }
+        
+        function addBubble() { 
+            if(!selectedPanel) return alert("Select a panel first"); 
+            const b = createBubbleHTML({ text: "Text", left: "50px", top: "30px", type: 'speech' }); 
+            selectedPanel.appendChild(b); selectBubble(b); saveDraft(); 
+        }
+        
+        function deleteBubble() { 
+            if(!selectedBubble) return alert("Select a bubble"); 
+            selectedBubble.remove(); selectedBubble=null; saveDraft(); 
+        }
+        
+        function changeBubbleType(type) {
+            if(!selectedBubble) return;
+            selectedBubble.dataset.type = type;
+            selectedBubble.className = 'speech-bubble ' + type + ' selected';
+            saveDraft();
+        }
+        
+        function changeFont(font) {
+            if(!selectedBubble) return;
+            selectedBubble.style.fontFamily = font;
+            saveDraft();
+        }
+        
+        document.getElementById('bubble-text-color').addEventListener('input', (e) => { 
+            if(selectedBubble) { selectedBubble.style.setProperty('--bubble-text-color', e.target.value); saveDraft(); } 
+        });
+        document.getElementById('bubble-fill-color').addEventListener('input', (e) => { 
+            if(selectedBubble) { selectedBubble.style.setProperty('--bubble-fill-color', e.target.value); saveDraft(); } 
+        });
         
         function replacePanelImage() { 
             if(!selectedPanel) return alert("Select a panel"); 
@@ -647,12 +774,12 @@ INDEX_HTML = '''
         }
         
         async function adjustFrame(dir) { 
-            if(isProcessing) return; // LOCK
+            if(isProcessing) return; 
             if(!selectedPanel) return alert("Select a panel"); 
             const img = selectedPanel.querySelector('img'); 
             let fname = img.src.split('/').pop().split('?')[0]; 
             
-            setProcessing(true); // ENABLE LOCK
+            setProcessing(true); 
             img.style.opacity = '0.5';
             
             try {
@@ -663,12 +790,12 @@ INDEX_HTML = '''
             } catch(e) { console.error(e); }
             
             img.style.opacity = '1';
-            setProcessing(false); // RELEASE LOCK
+            setProcessing(false); 
             saveDraft(); 
         }
         
         async function gotoTimestamp() { 
-            if(isProcessing) return; // LOCK
+            if(isProcessing) return; 
             if(!selectedPanel) return alert("Select a panel"); 
             let v = document.getElementById('timestamp-input').value.trim(); 
             if(!v) return;
@@ -678,7 +805,7 @@ INDEX_HTML = '''
             const img = selectedPanel.querySelector('img'); 
             let fname = img.src.split('/').pop().split('?')[0]; 
             
-            setProcessing(true); // ENABLE LOCK
+            setProcessing(true); 
             img.style.opacity = '0.5';
             
             try {
@@ -689,7 +816,7 @@ INDEX_HTML = '''
             } catch(e) { console.error(e); }
             
             img.style.opacity = '1';
-            setProcessing(false); // RELEASE LOCK
+            setProcessing(false); 
             saveDraft(); 
         }
         
@@ -735,6 +862,7 @@ def upload():
     f.save(gen.video_path)
     gen.write_status("Starting...", 5)
     
+    # Run in thread
     threading.Thread(target=gen.run, args=(target_pages,)).start()
     return jsonify({'success': True, 'message': 'Generation started.'})