Update app_enhanced.py

app_enhanced.py

@@ -14,6 +14,7 @@ from typing import List
 import traceback
 
 # --- ROBUST IMPORTS WITH FALLBACKS ---
+# (Assuming these modules have a method to process a single image, e.g., enhance_single)
 try:
     from backend.keyframes.keyframes import black_bar_crop
     print("✅ Black bar cropping module loaded.")
@@ -28,9 +29,8 @@ try:
 except Exception as e:
     print(f"⚠️ Could not load SimpleColorEnhancer: {e}. This feature will be SKIPPED.")
     class SimpleColorEnhancer:
-        def enhance_batch(self, *args, **kwargs):
-            print("-> Skipping simple color enhancement (module not loaded).")
-            pass
+        def enhance_batch(self, *args, **kwargs): print("-> Skipping simple color enhancement (module not loaded).")
+        def enhance_single(self, *args, **kwargs): print("-> Skipping simple color enhancement (module not loaded).")
 
 try:
     from backend.quality_color_enhancer import QualityColorEnhancer
@@ -38,9 +38,9 @@ try:
 except Exception as e:
     print(f"⚠️ Could not load QualityColorEnhancer: {e}. This feature will be SKIPPED.")
     class QualityColorEnhancer:
-        def batch_enhance(self, *args, **kwargs):
-            print("-> Skipping quality color enhancement (module not loaded).")
-            pass
+        def batch_enhance(self, *args, **kwargs): print("-> Skipping quality color enhancement (module not loaded).")
+        def enhance_single(self, *args, **kwargs): print("-> Skipping quality color enhancement (module not loaded).")
+
 
 try:
     from backend.class_def import bubble, panel, Page
@@ -306,14 +306,14 @@ class EnhancedComicGenerator:
             cap.release()
             if not ret or frame is None:
                 return {"success": False, "message": f"No frame at {target_time:.2f}s."}
+            
             new_path = os.path.join(self.frames_dir, frame_filename)
             cv2.imwrite(new_path, frame)
             
-            # <<< MODIFICATION START: Apply enhancements to the new frame for consistency >>>
+            # Apply the same enhancements to the new frame to maintain style consistency
             print(f"🎨 Applying enhancements to the new frame: {frame_filename}")
             self._enhance_all_images(single_image_path=new_path)
             self._enhance_quality_colors(single_image_path=new_path)
-            # <<< MODIFICATION END >>>
 
             if isinstance(frame_to_time[frame_filename], dict):
                 frame_to_time[frame_filename]['time'] = target_time
@@ -343,14 +343,14 @@ class EnhancedComicGenerator:
             ret, frame = cap.read()
             cap.release()
             if not ret or frame is None: return {"success": False, "message": f"Could not retrieve frame at {timestamp_seconds:.2f}s."}
+            
             new_path = os.path.join(self.frames_dir, frame_filename)
             cv2.imwrite(new_path, frame)
-            
-            # <<< MODIFICATION START: Apply enhancements to the new frame for consistency >>>
+
+            # Apply enhancements to the new frame from the specific timestamp
             print(f"🎨 Applying enhancements to the new frame from timestamp: {frame_filename}")
             self._enhance_all_images(single_image_path=new_path)
             self._enhance_quality_colors(single_image_path=new_path)
-            # <<< MODIFICATION END >>>
 
             with open(metadata_path, 'r') as f: frame_to_time = json.load(f)
             if frame_filename in frame_to_time:
@@ -437,20 +437,42 @@ class EnhancedComicGenerator:
             update_status(f"Error: {e}", -1)
             return False
 
+    # <<< MODIFICATION START: Made enhancement functions process single files efficiently >>>
     def _enhance_all_images(self, single_image_path=None):
-        target_dir = self.frames_dir
-        if single_image_path: target_dir = os.path.dirname(single_image_path)
-        if not os.path.exists(target_dir): return
+        """Enhances images. If single_image_path is provided, only enhances that file."""
         try:
-            SimpleColorEnhancer().enhance_batch(target_dir)
-        except Exception as e: print(f"❌ Simple enhancement failed: {e}")
+            enhancer = SimpleColorEnhancer()
+            if single_image_path and os.path.exists(single_image_path):
+                # Assumes the enhancer class has a method for single images.
+                # If it doesn't, this will gracefully fail or you can implement a fallback.
+                enhancer.enhance_single(single_image_path)
+            elif not single_image_path:
+                enhancer.enhance_batch(self.frames_dir)
+        except Exception as e:
+            print(f"❌ Simple enhancement failed: {e}. Falling back to batch processing.")
+            # Fallback for safety if enhance_single doesn't exist
+            try:
+                SimpleColorEnhancer().enhance_batch(self.frames_dir)
+            except Exception as e2:
+                 print(f"❌ Fallback simple enhancement also failed: {e2}")
 
     def _enhance_quality_colors(self, single_image_path=None):
-        target_dir = self.frames_dir
-        if single_image_path: target_dir = os.path.dirname(single_image_path)
+        """Enhances images with a quality model. If single_image_path is provided, only enhances that file."""
         try:
-            QualityColorEnhancer().batch_enhance(target_dir)
-        except Exception as e: print(f"⚠️ Quality enhancement failed: {e}")
+            enhancer = QualityColorEnhancer()
+            if single_image_path and os.path.exists(single_image_path):
+                # Assumes the enhancer class has a method for single images.
+                enhancer.enhance_single(single_image_path)
+            elif not single_image_path:
+                enhancer.batch_enhance(self.frames_dir)
+        except Exception as e:
+            print(f"⚠️ Quality enhancement failed: {e}. Falling back to batch processing.")
+            # Fallback for safety if enhance_single doesn't exist
+            try:
+                QualityColorEnhancer().batch_enhance(self.frames_dir)
+            except Exception as e2:
+                print(f"⚠️ Fallback quality enhancement also failed: {e2}")
+    # <<< MODIFICATION END >>>
 
     def _create_ai_bubbles_from_moments(self, black_x, black_y):
         bubbles, frame_files = [], sorted([f for f in os.listdir(self.frames_dir) if f.endswith('.png')])
@@ -502,7 +524,6 @@ class EnhancedComicGenerator:
 
     def _copy_template_files(self):
         try:
-            # <<< MODIFICATION START: Updated CSS rules for a longer bubble tail >>>
             template_html = '''<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -524,30 +545,50 @@ class EnhancedComicGenerator:
         .panel img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.1s ease-out; }
         .panel img.pannable { cursor: grab; }
         .panel img.panning { cursor: grabbing; }
-        .speech-bubble { font-family: 'Comic Neue', cursive; position: absolute; display: flex; justify-content: center; align-items: center; width: 150px; height: 80px; min-width: 50px; min-height: 30px; box-sizing: border-box; padding: 8px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 10; cursor: move; overflow: visible; font-size: 13px; font-weight: bold; text-align: center; }
+        .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; padding: 8px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 10; cursor: move; overflow: visible; font-size: 13px; font-weight: bold; text-align: center; font-family: 'Comic Neue', cursive; }
         .bubble-text { padding: 2px; word-wrap: break-word; }
         .speech-bubble.selected { outline: 2px dashed #4CAF50; }
         .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); font: inherit; text-align: center; resize: none; padding: 8px; z-index: 102; }
-        .speech-bubble.speech { background: white; border: 2px solid #333; color: #333; border-radius: 15px; }
+        
+        /* <<< MODIFICATION START: New CSS for 'speech' bubble type >>> */
+        .speech-bubble.speech {
+            color: #fff;
+            font-size: 16px;
+            text-align: center;
+            padding: 1em;
+            /* Remove standard border/background to allow gradient to show */
+            border: none;
+            background: none;
+            border-radius: 0;
+            /* Gradient background applied via border-image */
+            border-image: fill 0 linear-gradient(30deg, #4ECDC4, #6A4A3C);
+        }
+
+        /* Generic tail for all bubbles */
+        .speech-bubble::after, .speech-bubble.idea::after { content: ''; position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; }
+        
+        /* Specific tail for the new 'speech' bubble style */
+        .speech-bubble.speech::after {
+            border-top: 20px solid #6A4A3C; /* Long tail, color matches one end of the gradient */
+        }
+        
+        /* 4-WAY TAIL POSITIONING CLASSES for .speech bubbles */
+        .speech-bubble.speech.tail-bl::after { bottom: -19px; left: 20px; transform: rotate(0deg); }
+        .speech-bubble.speech.tail-br::after { bottom: -19px; right: 20px; transform: rotate(0deg); }
+        .speech-bubble.speech.tail-tr::after { top: -19px; right: 20px; transform: rotate(180deg); }
+        .speech-bubble.speech.tail-tl::after { top: -19px; left: 20px; transform: rotate(180deg); }
+        /* <<< MODIFICATION END >>> */
+
         .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; 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%); }
         .speech-bubble.narration { background: #FAFAFA; border: 2px solid #BDBDBD; color: #424242; border-radius: 3px; }
         .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%; }
-        .speech-bubble.speech::after, .speech-bubble.idea::after { content: ''; position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; }
-        /* <<< CSS MODIFICATION: Made bubble tail longer >>> */
-        .speech-bubble.speech::after { border-top: 20px solid #333; bottom: -19px; left: 20px; }
-        .speech-bubble.idea::after { border-top: 20px solid #FFA500; bottom: -19px; left: 20px; }
+        .speech-bubble.idea::after { border-top: 10px solid #FFA500; bottom: -9px; left: 20px; }
+        
         .speech-bubble.thought::after { 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; }
-        .speech-bubble.flipped.speech::after, .speech-bubble.flipped.idea::after { left: auto; right: 20px; }
-        .speech-bubble.flipped.thought .thought-dot-1 { left: auto; right: 15px; }
-        .speech-bubble.flipped.thought .thought-dot-2 { left: auto; right: 5px; }
-        /* <<< CSS MODIFICATION: Adjusted vertically flipped tail position >>> */
-        .speech-bubble.flipped-vertical.speech::after, .speech-bubble.flipped-vertical.idea::after { bottom: auto; top: -19px; transform: rotate(180deg); }
-        .speech-bubble.flipped-vertical.thought .thought-dot-1 { bottom: auto; top: -20px; }
-        .speech-bubble.flipped-vertical.thought .thought-dot-2 { bottom: auto; top: -32px; }
         .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; }
@@ -691,7 +732,12 @@ class EnhancedComicGenerator:
                 if(currentlySelectedBubble) currentlySelectedBubble.style.color = e.target.value;
             });
             document.getElementById('bubble-fill-color').addEventListener('input', (e) => {
-                if(currentlySelectedBubble) currentlySelectedBubble.style.backgroundColor = e.target.value;
+                if(currentlySelectedBubble) {
+                     // The new speech bubble uses a gradient, so standard fill color is disabled for it.
+                    if (currentlySelectedBubble.dataset.type !== 'speech') {
+                        currentlySelectedBubble.style.backgroundColor = e.target.value;
+                    }
+                }
             });
 
             document.addEventListener('mousemove', e => { if (isPanning) panImage(e); if (draggedBubble) drag(e); if(isResizing) resizeBubble(e); });
@@ -737,13 +783,19 @@ class EnhancedComicGenerator:
 
         function applyBubbleType(bubble, type) {
             bubble.querySelectorAll('.thought-dot').forEach(el => el.remove());
+            // Preserve essential classes
             let classesToKeep = 'speech-bubble';
             if (bubble.classList.contains('selected')) classesToKeep += ' selected';
-            if (bubble.classList.contains('flipped')) classesToKeep += ' flipped';
-            if (bubble.classList.contains('flipped-vertical')) classesToKeep += ' flipped-vertical';
+            
             bubble.className = classesToKeep;
             bubble.classList.add(type);
             bubble.dataset.type = type;
+
+            if (type === 'speech') {
+                 // Set initial tail position for speech bubbles
+                bubble.classList.add('tail-bl');
+                bubble.dataset.tailPos = '0';
+            }
             if (type === 'thought') {
                 for (let i = 1; i <= 2; i++) {
                     const dot = document.createElement('div');
@@ -763,15 +815,29 @@ class EnhancedComicGenerator:
             currentlySelectedBubble.style.fontFamily = font;
         }
         
+        // <<< MODIFICATION START: Rewritten 4-way tail rotation function >>>
         function rotateBubbleTail() {
             if (!currentlySelectedBubble) { alert("Please select a bubble first."); return; }
-            const isFlippedH = currentlySelectedBubble.classList.contains('flipped');
-            const isFlippedV = currentlySelectedBubble.classList.contains('flipped-vertical');
-            if (!isFlippedH && !isFlippedV) { currentlySelectedBubble.classList.add('flipped'); }
-            else if (isFlippedH && !isFlippedV) { currentlySelectedBubble.classList.add('flipped-vertical'); }
-            else if (isFlippedH && isFlippedV) { currentlySelectedBubble.classList.remove('flipped'); }
-            else { currentlySelectedBubble.classList.remove('flipped-vertical'); }
+            // This function now only works for the 'speech' type which has the new tail logic
+            if (currentlySelectedBubble.dataset.type !== 'speech') {
+                alert("Tail rotation is only available for the 'Speech' bubble type.");
+                return;
+            }
+
+            const positions = ['tail-bl', 'tail-br', 'tail-tr', 'tail-tl'];
+            let currentPos = parseInt(currentlySelectedBubble.dataset.tailPos || 0);
+
+            // Remove current position class
+            currentlySelectedBubble.classList.remove(positions[currentPos]);
+
+            // Get next position, cycling back to 0
+            let nextPos = (currentPos + 1) % positions.length;
+
+            // Add new position class and update data attribute
+            currentlySelectedBubble.classList.add(positions[nextPos]);
+            currentlySelectedBubble.dataset.tailPos = nextPos;
         }
+        // <<< MODIFICATION END >>>
         
         function selectPanel(panel) {
             document.querySelectorAll('.panel.selected').forEach(p => p.classList.remove('selected'));
@@ -792,7 +858,15 @@ class EnhancedComicGenerator:
                 
                 const styles = window.getComputedStyle(currentlySelectedBubble);
                 document.getElementById('bubble-text-color').value = rgbToHex(styles.color);
-                document.getElementById('bubble-fill-color').value = rgbToHex(styles.backgroundColor);
+                
+                const fillColorPicker = document.getElementById('bubble-fill-color');
+                if (currentlySelectedBubble.dataset.type === 'speech') {
+                    fillColorPicker.disabled = true; // Disable fill for gradient bubble
+                } else {
+                    fillColorPicker.disabled = false;
+                    fillColorPicker.value = rgbToHex(styles.backgroundColor);
+                }
+
                 document.getElementById('bubble-type-select').value = currentlySelectedBubble.dataset.type || 'speech';
                 document.getElementById('font-select').value = styles.fontFamily.split(',')[0].replace(/"/g, "").replace(/'/g, "").trim();
 
@@ -1069,7 +1143,6 @@ class EnhancedComicGenerator:
     </script>
 </body>
 </html>'''
-            # <<< MODIFICATION END >>>
             with open(os.path.join(self.output_dir, 'page.html'), 'w', encoding='utf-8') as f:
                 f.write(template_html)
             print("📄 Template files copied successfully!")