Update app_enhanced.py

app_enhanced.py

@@ -12,13 +12,10 @@ import json
 import shutil
 from typing import List
 import traceback
-# <<< MODIFICATION START: Import for parallel processing >>>
 from concurrent.futures import ThreadPoolExecutor
-# <<< MODIFICATION END >>>
 
 
 # --- 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.")
@@ -416,9 +413,7 @@ class EnhancedComicGenerator:
             with open('test1.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]
-            # <<< MODIFICATION START: Reduced default max_frames for speed >>>
             if not self.generate_keyframes_from_moments(self.video_path, key_moments, max_frames=32):
-            # <<< MODIFICATION END >>>
                 raise Exception("Keyframe extraction failed.")
             update_status("Cropping black bars...", 45)
             black_x, black_y, _, _ = black_bar_crop()
@@ -441,7 +436,6 @@ class EnhancedComicGenerator:
             update_status(f"Error: {e}", -1)
             return False
 
-    # <<< MODIFICATION START: Parallelized enhancement functions for speed >>>
     def _enhance_all_images(self, single_image_path=None):
         try:
             enhancer = SimpleColorEnhancer()
@@ -465,11 +459,8 @@ class EnhancedComicGenerator:
                     list(executor.map(enhancer.enhance_single, frame_paths))
         except Exception as e:
             print(f"⚠️ Quality enhancement failed: {e}")
-    # <<< MODIFICATION END >>>
 
-    # <<< MODIFICATION START: Parallelized bubble placement for speed >>>
     def _process_bubble_for_frame(self, frame_file):
-        """Helper function to process a single frame for bubble placement."""
         frame_path = os.path.join(self.frames_dir, frame_file)
         dialogue = self.frame_metadata.get(frame_file, {}).get('dialogue', "")
         try:
@@ -491,11 +482,9 @@ class EnhancedComicGenerator:
             self.frame_metadata = json.load(f)
 
         with ThreadPoolExecutor() as executor:
-            # Map the processing function to each frame file and collect results
             bubbles = list(executor.map(self._process_bubble_for_frame, frame_files))
 
         return bubbles
-    # <<< MODIFICATION END >>>
 
     def _generate_pages(self, bubbles):
         try:
@@ -549,36 +538,67 @@ 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 { 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 { position: absolute; display: flex; justify-content: center; align-items: center; width: 150px; height: 80px; min-width: 50px; min-height: 30px; box-sizing: border-box; z-index: 10; cursor: move; overflow: visible; font-size: 13px; font-weight: bold; text-align: center; font-family: 'Comic Neue', cursive; }
+        .bubble-text { padding: 1em; 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; }
         
-        /* <<< MODIFICATION START: New CSS for 'speech' bubble with curvy tail >>> */
+        /* <<< MODIFICATION START: New Advanced CSS for 'speech' bubble >>> */
         .speech-bubble.speech {
-            /* Use a CSS variable for dynamic color changes from JS */
-            background-color: var(--bubble-fill-color, white);
-            border: 2px solid #333;
-            color: #333;
-            border-radius: 15px;
+            /* Main bubble properties */
+            color: var(--bubble-text-color, #333);
+            font-size: 16px;
+            padding: 0; /* Padding is handled by the bubble-text span now */
+            border-radius: 1.2em;
+            background: var(--bubble-fill-color, white);
+            box-shadow: 0 0 5px rgba(0,0,0,0.2);
+            border: none;
         }
 
-        .speech-bubble.speech::after {
-            content: '';
+        .speech-bubble.speech::before {
+            /* This pseudo-element creates the complex tail */
+            content: "";
             position: absolute;
-            width: 20px;
-            height: 20px;
-            background: var(--bubble-fill-color, white);
-            border-right: 2px solid #333;
-            border-bottom: 2px solid #333;
-            /* The combination of rotate and border-radius creates the curve */
+            background: inherit; /* Inherits the dynamic color from the parent */
+            
+            /* Tail dimensions */
+            width: 3em;   /* base */
+            height: 1.8em; /* height */
+            
+            /* The magic mask that carves the tail shape */
+            -webkit-mask: radial-gradient(calc(0.6 * 100%) 105% at 100% 0, #0000 99%, #000 101%);
+            mask: radial-gradient(calc(0.6 * 100%) 105% at 100% 0, #0000 99%, #000 101%);
+        }
+
+        /* 4-WAY TAIL ROTATION CLASSES */
+        .speech-bubble.speech.tail-bl::before { /* Bottom-Left */
+            bottom: -0.9em;
+            left: 1.5em;
+            transform-origin: bottom left;
+            transform: skewX(30deg) rotate(-10deg);
+            border-bottom-right-radius: 80%;
+        }
+        .speech-bubble.speech.tail-br::before { /* Bottom-Right */
+            bottom: -0.9em;
+            right: 1.5em;
+            transform-origin: bottom right;
+            transform: skewX(-30deg) rotate(10deg) scaleX(-1);
+            border-bottom-left-radius: 80%;
+        }
+        .speech-bubble.speech.tail-tr::before { /* Top-Right */
+            top: -0.9em;
+            right: 1.5em;
+            transform-origin: top right;
+            transform: skewX(30deg) rotate(10deg) scale(-1, -1);
+            border-top-left-radius: 80%;
+        }
+        .speech-bubble.speech.tail-tl::before { /* Top-Left */
+            top: -0.9em;
+            left: 1.5em;
+            transform-origin: top left;
+            transform: skewX(-30deg) rotate(-10deg) scaleY(-1);
+            border-top-right-radius: 80%;
         }
-        
-        /* 4-WAY CURVY TAIL POSITIONING */
-        .speech-bubble.speech.tail-bl::after { bottom: -11px; left: 30px; transform: rotate(45deg); border-radius: 0 0 12px 0; border-left: none; border-top: none;}
-        .speech-bubble.speech.tail-br::after { bottom: -11px; right: 30px; transform: rotate(135deg); border-radius: 0 0 12px 0; border-left: none; border-top: none;}
-        .speech-bubble.speech.tail-tr::after { top: -11px; right: 30px; transform: rotate(225deg); border-radius: 0 0 12px 0; border-left: none; border-top: none;}
-        .speech-bubble.speech.tail-tl::after { top: -11px; left: 30px; transform: rotate(315deg); border-radius: 0 0 12px 0; border-left: none; border-top: none;}
         /* <<< MODIFICATION END >>> */
 
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
@@ -635,7 +655,7 @@ class EnhancedComicGenerator:
             <div class="color-picker-grid">
                 <div>
                     <label for="bubble-text-color">Text</label>
-                    <input type="color" id="bubble-text-color" value="#000000" disabled>
+                    <input type="color" id="bubble-text-color" value="#333333" disabled>
                 </div>
                 <div>
                     <label for="bubble-fill-color">Fill</label>
@@ -730,17 +750,13 @@ class EnhancedComicGenerator:
             document.getElementById('zoom-slider').addEventListener('input', handleZoom);
             
             document.getElementById('bubble-text-color').addEventListener('input', (e) => {
-                if(currentlySelectedBubble) currentlySelectedBubble.style.color = e.target.value;
+                if(currentlySelectedBubble) currentlySelectedBubble.style.setProperty('--bubble-text-color', e.target.value);
             });
-            // <<< MODIFICATION START: Re-enabled fill color picker for all bubble types >>>
             document.getElementById('bubble-fill-color').addEventListener('input', (e) => {
                 if(currentlySelectedBubble) {
-                    // This now works for all bubbles, including the new 'speech' one.
-                    // We use a CSS variable to color the bubble and its pseudo-element tail.
                     currentlySelectedBubble.style.setProperty('--bubble-fill-color', e.target.value);
                 }
             });
-            // <<< MODIFICATION END >>>
 
             document.addEventListener('mousemove', e => { if (isPanning) panImage(e); if (draggedBubble) drag(e); if(isResizing) resizeBubble(e); });
             document.addEventListener('mouseup', e => { if (isPanning) stopPan(e); if (draggedBubble) stopDrag(e); if(isResizing) stopResize(e);});
@@ -773,7 +789,7 @@ class EnhancedComicGenerator:
         }
         
         const rgbToHex = (rgb) => {
-          if (!rgb || !rgb.startsWith('rgb')) return '#000000';
+          if (!rgb || !rgb.startsWith('rgb')) return '#ffffff';
           let sep = rgb.indexOf(",") > -1 ? "," : " ";
           rgb = rgb.substr(4).split(")")[0].split(sep);
           let r = (+rgb[0]).toString(16), g = (+rgb[1]).toString(16), b = (+rgb[2]).toString(16);
@@ -848,15 +864,14 @@ class EnhancedComicGenerator:
                 currentlySelectedPanel = null;
                 
                 const styles = window.getComputedStyle(currentlySelectedBubble);
-                document.getElementById('bubble-text-color').value = rgbToHex(styles.color);
-                
-                // <<< MODIFICATION START: Updated color picker logic >>>
+                const textColorPicker = document.getElementById('bubble-text-color');
+                const currentTextColor = styles.getPropertyValue('--bubble-text-color').trim();
+                textColorPicker.value = currentTextColor ? currentTextColor : rgbToHex(styles.color);
+
                 const fillColorPicker = document.getElementById('bubble-fill-color');
-                fillColorPicker.disabled = false; // Always enabled
-                // Read the value from the CSS variable if it exists, otherwise from the computed style
-                const currentFill = styles.getPropertyValue('--bubble-fill-color').trim();
-                fillColorPicker.value = currentFill ? currentFill : rgbToHex(styles.backgroundColor);
-                // <<< MODIFICATION END >>>
+                fillColorPicker.disabled = false;
+                const currentFillColor = styles.getPropertyValue('--bubble-fill-color').trim();
+                fillColorPicker.value = currentFillColor ? currentFillColor : 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();