Update app_enhanced.py

app_enhanced.py

@@ -1,4 +1,4 @@
-import spaces  # <--- CRITICAL: MUST BE FIRST
+import spaces  # <--- CRITICAL: MUST BE THE FIRST IMPORT
 import os
 import time
 import threading
@@ -116,8 +116,7 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     selected_moments = []
     if not raw_moments:
         times = np.linspace(1, duration-1, total_panels_needed)
-        for t in times:
-            selected_moments.append({'text': '', 'start': t, 'end': t+1})
+        for t in times: selected_moments.append({'text': '', 'start': t, 'end': t+1})
     elif len(raw_moments) <= total_panels_needed:
         selected_moments = raw_moments
     else:
@@ -133,7 +132,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     for i, moment in enumerate(selected_moments):
         mid = (moment['start'] + moment['end']) / 2
         if mid > duration: mid = duration - 1
-        
         cap.set(cv2.CAP_PROP_POS_FRAMES, int(mid * fps))
         ret, frame = cap.read()
         if ret:
@@ -141,7 +139,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
             p = os.path.join(frames_dir, fname)
             cv2.imwrite(p, frame)
             os.sync() 
-            
             frame_metadata[fname] = {'dialogue': moment['text'], 'time': mid}
             frame_files_ordered.append(fname)
             count += 1
@@ -298,7 +295,7 @@ class EnhancedComicGenerator:
             json.dump({'message': msg, 'progress': prog}, f)
 
 # ======================================================
-# 🌐 ROUTES & HTML (FIXED SELECTION LOGIC)
+# 🌐 ROUTES & FULL UI
 # ======================================================
 
 INDEX_HTML = '''
@@ -340,6 +337,7 @@ INDEX_HTML = '''
         .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%} }
         
+        /* COMIC LAYOUT */
         .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: #333; margin-bottom: 10px; font-size: 18px; font-weight: bold; }
@@ -351,7 +349,7 @@ INDEX_HTML = '''
         .panel img.pannable { cursor: grab; }
         .panel img.panning { cursor: grabbing; }
         
-        /* BUBBLES - FIX: pointer-events none on text to fix selection */
+        /* 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; 
@@ -359,11 +357,12 @@ INDEX_HTML = '''
             font-size: 13px; text-align: center; overflow: visible;
             --tail-pos: 50%;
         }
+        /* POINTER EVENTS NONE ON TEXT TO FIX SELECTION BUG */
         .bubble-text { padding: 0.8em; word-wrap: break-word; position: relative; z-index: 5; pointer-events: none; user-select: none; }
         .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; }
         
-        /* BUBBLE TYPES & TAILS */
+        /* SPEECH BUBBLE CSS (Tails) */
         .speech-bubble.speech {
             --b: 3em; --h: 1.8em; --t: 0.6; --p: var(--tail-pos, 50%); --r: 1.2em;
             background: var(--bubble-fill-color, #4ECDC4);
@@ -386,11 +385,25 @@ INDEX_HTML = '''
         .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 CSS (Fixed Rotation) */
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
-        .speech-bubble.thought::before { display:none; }
+        .speech-bubble.thought::before { display:none; } 
         .thought-dot { position: absolute; background-color: white; border: 2px solid #555; border-radius: 50%; z-index: -1; }
-        .thought-dot-1 { width: 20px; height: 20px; bottom: -20px; left: 15px; }
-        .thought-dot-2 { width: 12px; height: 12px; bottom: -32px; left: 5px; }
+        .thought-dot-1 { width: 20px; height: 20px; }
+        .thought-dot-2 { width: 12px; height: 12px; }
+        
+        /* Thought Tail Positions */
+        .speech-bubble.thought.pos-bl .thought-dot-1 { left: 20px; bottom: -20px; }
+        .speech-bubble.thought.pos-bl .thought-dot-2 { left: 10px; bottom: -32px; }
+        
+        .speech-bubble.thought.pos-br .thought-dot-1 { right: 20px; bottom: -20px; }
+        .speech-bubble.thought.pos-br .thought-dot-2 { right: 10px; bottom: -32px; }
+        
+        .speech-bubble.thought.pos-tr .thought-dot-1 { right: 20px; top: -20px; }
+        .speech-bubble.thought.pos-tr .thought-dot-2 { right: 10px; top: -32px; }
+        
+        .speech-bubble.thought.pos-tl .thought-dot-1 { left: 20px; top: -20px; }
+        .speech-bubble.thought.pos-tl .thought-dot-2 { left: 10px; top: -32px; }
         
         .speech-bubble.reaction { background: #FFD700; border: 3px solid #E53935; color: #D32F2F; font-weight: 900; text-transform: uppercase; clip-path: polygon(0% 25%, 17% 21%, 17% 0%, 31% 16%, 50% 4%, 69% 16%, 83% 0%, 83% 21%, 100% 25%, 85% 45%, 95% 62%, 82% 79%, 100% 97%, 79% 89%, 60% 98%, 46% 82%, 27% 95%, 15% 78%, 5% 62%, 15% 45%); }
         .speech-bubble.narration { background: #FAFAFA; border: 2px solid #BDBDBD; color: #424242; border-radius: 3px; }
@@ -700,6 +713,8 @@ INDEX_HTML = '''
             const b = document.createElement('div');
             const type = data.type || 'speech';
             b.className = data.classes || `speech-bubble ${type} tail-bottom`;
+            if (type === 'thought' && !b.className.includes('pos-')) b.className += ' pos-bl'; // Default position for thought
+            
             b.dataset.type = type;
             b.style.left = data.left; b.style.top = data.top;
             if(data.width) b.style.width = data.width; if(data.height) b.style.height = data.height;
@@ -712,11 +727,12 @@ INDEX_HTML = '''
             if(type === 'thought') { for(let i=1; i<=2; i++){ const d = document.createElement('div'); d.className = `thought-dot thought-dot-${i}`; b.appendChild(d); } }
             
             ['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; 
             };
-            b.onclick = (e) => { e.stopPropagation(); }; // Critical Fix for selection
+            b.onclick = (e) => { e.stopPropagation(); };
             b.ondblclick = (e) => { e.stopPropagation(); editBubbleText(b); };
             return b;
         }
@@ -779,24 +795,40 @@ INDEX_HTML = '''
             if(!selectedBubble) return;
             selectedBubble.dataset.type = type;
             selectedBubble.className = 'speech-bubble ' + type + ' selected';
+            
+            // Default tail for thought is pos-bl if not set
+            if(type === 'thought') selectedBubble.classList.add('pos-bl');
+            else selectedBubble.classList.add('tail-bottom'); // Default for speech
+            
             selectedBubble.querySelectorAll('.thought-dot').forEach(d=>d.remove());
             if(type === 'thought') { for(let i=1; i<=2; i++){ const d = document.createElement('div'); d.className = `thought-dot thought-dot-${i}`; selectedBubble.appendChild(d); } }
             saveDraft();
         }
         
         function changeFont(font) { if(!selectedBubble) return; selectedBubble.style.fontFamily = font; saveDraft(); }
+        
         function rotateTail() {
             if(!selectedBubble) return;
             const type = selectedBubble.dataset.type;
+            
             if(type === 'speech') {
                 const positions = ['tail-bottom', 'tail-right', 'tail-top', 'tail-left'];
                 let current = 0;
                 positions.forEach((pos, i) => { if(selectedBubble.classList.contains(pos)) current = i; });
                 selectedBubble.classList.remove(positions[current]);
                 selectedBubble.classList.add(positions[(current + 1) % 4]);
+            } 
+            else if (type === 'thought') {
+                // Cycle specifically through the 4 CSS positions we defined
+                const positions = ['pos-bl', 'pos-br', 'pos-tr', 'pos-tl'];
+                let current = 0;
+                positions.forEach((pos, i) => { if(selectedBubble.classList.contains(pos)) current = i; });
+                selectedBubble.classList.remove(positions[current]);
+                selectedBubble.classList.add(positions[(current + 1) % 4]);
             }
             saveDraft();
         }
+        
         function slideTail(v) { if(selectedBubble) { selectedBubble.style.setProperty('--tail-pos', v+'%'); saveDraft(); } }
         
         document.getElementById('bubble-text-color').addEventListener('input', (e) => { if(selectedBubble) { selectedBubble.style.setProperty('--bubble-text-color', e.target.value); saveDraft(); } });