Testcomic

Sleeping

App Files Files Community

jhh6576 commited on Nov 26, 2025

Commit

21b5267

verified ·

1 Parent(s): 52d0958

Update app_enhanced.py

Browse files

Files changed (1) hide show

app_enhanced.py +83 -497

app_enhanced.py CHANGED Viewed

@@ -77,459 +77,6 @@ INDEX_HTML = '''
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&family=Gloria+Hallelujah&family=Lato&display=swap" rel="stylesheet">
-    <style>
-        body {
-            background-color: #fdf6e3;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            color: #3d3d3d;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            margin: 0;
-        }
-        .container {
-            max-width: 500px;
-            width: 100%;
-            padding: 40px;
-            background-color: #ffffff;
-            border-radius: 12px;
-            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
-            text-align: center;
-        }
-        h1 {
-            color: #2c3e50;
-            margin-bottom: 30px;
-            font-weight: 600;
-        }
-        .file-input { display: none; }
-        .file-label {
-            display: block;
-            padding: 15px 25px;
-            background-color: #2c3e50;
-            color: white;
-            border-radius: 8px;
-            cursor: pointer;
-            font-size: 16px;
-            font-weight: 500;
-            transition: background-color 0.3s ease, transform 0.2s ease;
-        }
-        .file-label:hover {
-            background-color: #34495e;
-            transform: translateY(-2px);
-        }
-        #file-name {
-            display: block;
-            margin-top: 15px;
-            font-style: italic;
-            color: #7f8c8d;
-        }
-        .submit-btn {
-            width: 100%;
-            padding: 15px;
-            border: none;
-            border-radius: 8px;
-            background-color: #e67e22;
-            color: white;
-            font-size: 18px;
-            font-weight: bold;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-            margin-top: 20px;
-        }
-        .submit-btn:hover { background-color: #d35400; }
-        .loading-container {
-            display: none;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
-        .loader {
-            width: 120px;
-            height: 20px;
-            border-radius: 20px;
-            background:
-                radial-gradient(circle 10px, #e67e22 100%, transparent 0),
-                radial-gradient(circle 10px, #e67e22 100%, transparent 0),
-                radial-gradient(circle 10px, #e67e22 100%, transparent 0);
-            background-size: 20px 20px;
-            background-position: 0px 50%, 50px 50%, 100px 50%;
-            background-repeat: no-repeat;
-            animation:-ball 2s infinite linear;
-        }
-        @keyframes -ball {
-            0%   {background-position: 0px 50%   ,50px 50%  ,100px 50%}
-            16%  {background-position: 0px 0%    ,50px 50%  ,100px 50%}
-            33%  {background-position: 0px 100%  ,50px 0%    ,100px 50%}
-            50%  {background-position: 0px 50%   ,50px 100%  ,100px 0%}
-            66%  {background-position: 0px 50%   ,50px 50%   ,100px 100%}
-            83%  {background-position: 0px 50%   ,50px 50%   ,100px 50%}
-            100% {background-position: 0px 50%   ,50px 50%   ,100px 50%}
-        }
-        #status-text {
-            margin-top: 25px;
-            color: #34495e;
-            font-weight: 500;
-            font-size: 18px;
-        }
-        #final-message {
-            display: none;
-            font-size: 20px;
-            font-weight: bold;
-            color: #27ae60;
-        }
-    </style>
-</head>
-<body>
-    <div class="container" id="main-container">
-        <div id="upload-view">
-            <h1>🎬 Movie to Comic Generator</h1>
-            <form id="upload-form">
-                <label for="file-upload" class="file-label">Choose Video File</label>
-                <input id="file-upload" class="file-input" type="file" name="file" onchange="updateFileName(this)">
-                <span id="file-name">No file selected</span>
-                <button class="submit-btn" type="submit">Generate Comic</button>
-            </form>
-        </div>
-        <div class="loading-container" id="loading-view">
-            <div class="loader"></div>
-            <p id="status-text">Starting...</p>
-            <p id="final-message">✅ Generation Complete! Opening your comic...</p>
-        </div>
-    </div>
-    <script>
-        let statusInterval;
-        function updateFileName(input) {
-            const fileNameSpan = document.getElementById('file-name');
-            if (input.files && input.files.length > 0) {
-                fileNameSpan.textContent = input.files[0].name;
-            } else {
-                fileNameSpan.textContent = 'No file selected';
-            }
-        }
-        async function checkStatus() {
-            try {
-                const response = await fetch('/status');
-                const data = await response.json();
-                const statusText = document.getElementById('status-text');
-                statusText.textContent = data.message;
-                if (data.progress >= 100) {
-                    clearInterval(statusInterval);
-                    document.querySelector('.loader').style.display = 'none';
-                    statusText.style.display = 'none';
-                    document.getElementById('final-message').style.display = 'block';
-                    setTimeout(() => {
-                        window.open('/comic', '_blank');
-                    }, 1500);
-                } else if (data.progress < 0) {
-                    clearInterval(statusInterval);
-                    statusText.textContent = "An error occurred. Please check the logs.";
-                    statusText.style.color = '#e74c3c';
-                    document.querySelector('.loader').style.display = 'none';
-                }
-            } catch (error) {
-                console.error("Error fetching status:", error);
-                document.getElementById('status-text').textContent = "Error checking status. Retrying...";
-            }
-        }
-        document.getElementById('upload-form').addEventListener('submit', async function(event) {
-            event.preventDefault();
-            const fileInput = document.getElementById('file-upload');
-            if (!fileInput.files || fileInput.files.length === 0) {
-                alert("Please select a video file first.");
-                return;
-            }
-            document.getElementById('upload-view').style.display = 'none';
-            document.getElementById('loading-view').style.display = 'flex';
-            const formData = new FormData();
-            formData.append('file', fileInput.files[0]);
-            try {
-                const response = await fetch('/uploader', {
-                    method: 'POST',
-                    body: formData
-                });
-                if (!response.ok) {
-                    throw new Error('Upload failed!');
-                }
-                statusInterval = setInterval(checkStatus, 2000);
-            } catch (error) {
-                console.error("Upload error:", error);
-                document.getElementById('status-text').textContent = "Failed to start generation. Please try again.";
-            }
-        });
-    </script>
-</body>
-</html>
-'''
-os.makedirs('video', exist_ok=True)
-os.makedirs('frames/final', exist_ok=True)
-os.makedirs('output', exist_ok=True)
-def update_status(message, progress):
-    status_file = os.path.join('output', 'status.json')
-    with open(status_file, 'w') as f:
-        json.dump({'message': message, 'progress': progress}, f)
-class EnhancedComicGenerator:
-    def __init__(self):
-        self.video_path = 'video/uploaded.mp4'
-        self.frames_dir = 'frames/final'
-        self.output_dir = 'output'
-        self.apply_comic_style = False
-        self.video_fps = None
-    def cleanup_generated(self):
-        print("🧹 Performing full cleanup...")
-        if os.path.isdir(self.frames_dir): shutil.rmtree(self.frames_dir)
-        if os.path.isdir(self.output_dir): shutil.rmtree(self.output_dir)
-        if os.path.isdir('temp'): shutil.rmtree('temp')
-        if os.path.exists('test1.srt'): os.remove('test1.srt')
-        os.makedirs(self.frames_dir, exist_ok=True)
-        os.makedirs(self.output_dir, exist_ok=True)
-        print("✅ Cleanup complete.")
-    def regenerate_frame(self, frame_filename, direction):
-        try:
-            if not self.video_fps:
-                return {"success": False, "message": "Video FPS not found."}
-            metadata_path = 'frames/frame_metadata.json'
-            if not os.path.exists(metadata_path):
-                return {"success": False, "message": "Frame metadata missing."}
-            with open(metadata_path, 'r') as f:
-                frame_to_time = json.load(f)
-            if frame_filename not in frame_to_time:
-                return {"success": False, "message": "Panel not linked to video."}
-            current_time = frame_to_time[frame_filename]['time'] if isinstance(frame_to_time[frame_filename], dict) else frame_to_time[frame_filename]
-            frame_duration = 1.0 / self.video_fps
-            target_time = current_time + frame_duration if direction == 'forward' else current_time - frame_duration
-            target_time = max(0, target_time)
-            cap = cv2.VideoCapture(self.video_path)
-            if not cap.isOpened(): return {"success": False, "message": "Cannot open video."}
-            cap.set(cv2.CAP_PROP_POS_MSEC, target_time * 1000)
-            ret, frame = cap.read()
-            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)
-            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)
-            if isinstance(frame_to_time[frame_filename], dict):
-                frame_to_time[frame_filename]['time'] = target_time
-            else:
-                frame_to_time[frame_filename] = target_time
-            with open(metadata_path, 'w') as f: json.dump(frame_to_time, f, indent=2)
-            message = f"Adjusted {direction} to {target_time:.3f}s"
-            print(f"✅ {message}")
-            return {"success": True, "message": message, "new_filename": frame_filename}
-        except Exception as e:
-            traceback.print_exc()
-            return {"success": False, "message": str(e)}
-    def get_frame_at_timestamp(self, frame_filename, timestamp_seconds):
-        try:
-            metadata_path = 'frames/frame_metadata.json'
-            if not os.path.exists(metadata_path): return {"success": False, "message": "Frame metadata missing."}
-            cap = cv2.VideoCapture(self.video_path)
-            if not cap.isOpened(): return {"success": False, "message": "Cannot open video."}
-            fps = cap.get(cv2.CAP_PROP_FPS)
-            if fps == 0: fps = 25
-            duration = int(cap.get(cv2.CAP_PROP_FRAME_COUNT)) / fps
-            if timestamp_seconds < 0 or timestamp_seconds > duration:
-                cap.release()
-                return {"success": False, "message": f"Timestamp must be between 0 and {duration:.2f}s."}
-            cap.set(cv2.CAP_PROP_POS_MSEC, timestamp_seconds * 1000)
-            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)
-            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)
-            with open(metadata_path, 'r') as f: frame_to_time = json.load(f)
-            if frame_filename in frame_to_time:
-                if isinstance(frame_to_time[frame_filename], dict):
-                    frame_to_time[frame_filename]['time'] = timestamp_seconds
-                else:
-                    frame_to_time[frame_filename] = timestamp_seconds
-                with open(metadata_path, 'w') as f: json.dump(frame_to_time, f, indent=2)
-            message = f"Jumped to timestamp {timestamp_seconds:.3f}s"
-            print(f"✅ {message}")
-            return { "success": True, "message": message }
-        except Exception as e:
-            traceback.print_exc()
-            return {"success": False, "message": str(e)}
-    def generate_keyframes_from_moments(self, video_path, key_moments, max_frames=32):
-        try:
-            cap = cv2.VideoCapture(video_path)
-            if not cap.isOpened(): raise Exception("Cannot open video for keyframe extraction")
-            fps, total_frames = self.video_fps, int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
-            duration = total_frames / fps
-            key_moments.sort(key=lambda x: x['start'])
-            if len(key_moments) > max_frames: pass # Simplified sampling
-            frame_metadata, frame_count = {}, 0
-            for i, moment in enumerate(key_moments):
-                update_status(f"Extracting frame {i+1}/{len(key_moments)}...", 25 + int(20 * (i / len(key_moments))))
-                frame_time = (moment['start'] + moment['end']) / 2
-                if frame_time > duration: continue
-                frame_number = int(frame_time * fps)
-                cap.set(cv2.CAP_PROP_POS_FRAMES, frame_number)
-                ret, frame = cap.read()
-                if ret:
-                    frame_filename = f"frame_{frame_count:04d}.png"
-                    frame_path = os.path.join(self.frames_dir, frame_filename)
-                    cv2.imwrite(frame_path, frame)
-                    frame_metadata[frame_filename] = { 'time': frame_time, 'dialogue': moment['text'], 'start': moment['start'], 'end': moment['end'] }
-                    frame_count += 1
-            cap.release()
-            with open(os.path.join('frames', 'frame_metadata.json'), 'w') as f:
-                json.dump(frame_metadata, f, indent=2)
-            print(f"✅ Extracted {frame_count} keyframes from video")
-            return True
-        except Exception as e:
-            print(f"❌ Error extracting keyframes: {e}")
-            return False
-    def generate_comic(self):
-        start_time = time.time()
-        try:
-            update_status("Cleaning up...", 0)
-            self.cleanup_generated()
-            update_status("Analyzing video...", 5)
-            cap = cv2.VideoCapture(self.video_path)
-            if not cap.isOpened(): raise Exception("Cannot open video to get FPS.")
-            self.video_fps = cap.get(cv2.CAP_PROP_FPS)
-            if self.video_fps == 0: self.video_fps = 25
-            cap.release()
-            print(f"✅ Video FPS detected: {self.video_fps:.2f}")
-            update_status("Generating subtitles (this may take a while)...", 10)
-            get_real_subtitles(self.video_path)
-            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]
-            if not self.generate_keyframes_from_moments(self.video_path, key_moments, max_frames=32):
-                raise Exception("Keyframe extraction failed.")
-            update_status("Cropping black bars...", 45)
-            black_x, black_y, _, _ = black_bar_crop()
-            update_status("Enhancing images (in parallel)...", 50)
-            self._enhance_all_images()
-            self._enhance_quality_colors()
-            update_status("Placing speech bubbles (in parallel)...", 75)
-            bubbles = self._create_ai_bubbles_from_moments(black_x, black_y)
-            update_status("Assembling comic pages...", 90)
-            pages = self._generate_pages(bubbles)
-            update_status("Saving final comic...", 95)
-            self._save_results(pages)
-            execution_time = (time.time() - start_time) / 60
-            print(f"✅ Comic generation completed in {execution_time:.2f} minutes")
-            update_status("Complete!", 100)
-            return True
-        except Exception as e:
-            print(f"❌ Comic generation failed: {e}")
-            traceback.print_exc()
-            update_status(f"Error: {e}", -1)
-            return False
-    def _enhance_all_images(self, single_image_path=None):
-        try:
-            enhancer = SimpleColorEnhancer()
-            if single_image_path:
-                enhancer.enhance_single(single_image_path)
-            else:
-                frame_paths = [os.path.join(self.frames_dir, f) for f in os.listdir(self.frames_dir) if f.endswith('.png')]
-                with ThreadPoolExecutor() as executor:
-                    list(executor.map(enhancer.enhance_single, frame_paths))
-        except Exception as e:
-            print(f"❌ Simple enhancement failed: {e}")
-    def _enhance_quality_colors(self, single_image_path=None):
-        try:
-            enhancer = QualityColorEnhancer()
-            if single_image_path:
-                enhancer.enhance_single(single_image_path)
-            else:
-                frame_paths = [os.path.join(self.frames_dir, f) for f in os.listdir(self.frames_dir) if f.endswith('.png')]
-                with ThreadPoolExecutor() as executor:
-                    list(executor.map(enhancer.enhance_single, frame_paths))
-        except Exception as e:
-            print(f"⚠️ Quality enhancement failed: {e}")
-    def _process_bubble_for_frame(self, frame_file):
-        frame_path = os.path.join(self.frames_dir, frame_file)
-        dialogue = self.frame_metadata.get(frame_file, {}).get('dialogue', "")
-        try:
-            faces = face_detector.detect_faces(frame_path)
-            lip_x, lip_y = face_detector.get_lip_position(frame_path, faces[0]) if faces else (-1, -1)
-            bubble_x, bubble_y = ai_bubble_placer.place_bubble_ai(frame_path, (lip_x, lip_y))
-            return bubble(bubble_offset_x=bubble_x, bubble_offset_y=bubble_y, lip_x=lip_x, lip_y=lip_y, dialog=dialogue, emotion='normal')
-        except Exception as e:
-            print(f"-> Could not place bubble for {frame_file}: {e}. Using default.")
-            return bubble(bubble_offset_x=50, bubble_offset_y=20, lip_x=-1, lip_y=-1, dialog=dialogue, emotion='normal')
-    def _create_ai_bubbles_from_moments(self, black_x, black_y):
-        frame_files = sorted([f for f in os.listdir(self.frames_dir) if f.endswith('.png')])
-        metadata_path = 'frames/frame_metadata.json'
-        if not os.path.exists(metadata_path):
-            return [bubble(dialog="") for _ in frame_files]
-        with open(metadata_path, 'r') as f:
-            self.frame_metadata = json.load(f)
-        with ThreadPoolExecutor() as executor:
-            bubbles = list(executor.map(self._process_bubble_for_frame, frame_files))
-        return bubbles
-    def _generate_pages(self, bubbles):
-        try:
-            from backend.fixed_12_pages_800x1080 import generate_12_pages_800x1080
-            return generate_12_pages_800x1080(sorted([f for f in os.listdir(self.frames_dir) if f.endswith('.png')]), bubbles)
-        except ImportError:
-            pages, frame_files = [], sorted([f for f in os.listdir(self.frames_dir) if f.endswith('.png')])
-            num_pages = (len(frame_files) + 3) // 4
-            for i in range(num_pages):
-                start, end = i*4, (i+1)*4
-                page_panels = [panel(image=f) for f in frame_files[start:end]]
-                page_bubbles = bubbles[start:end]
-                if page_panels: pages.append(Page(panels=page_panels, bubbles=page_bubbles))
-            return pages
-    def _save_results(self, pages):
-        try:
-            os.makedirs(self.output_dir, exist_ok=True)
-            pages_data = []
-            for page in pages:
-                panels = [p.__dict__ if hasattr(p, '__dict__') else p for p in page.panels]
-                bubbles_data = [b.__dict__ if hasattr(b, '__dict__') else b for b in page.bubbles]
-                pages_data.append({'panels': panels, 'bubbles': bubbles_data})
-            with open(os.path.join(self.output_dir, 'pages.json'), 'w', encoding='utf-8') as f:
-                json.dump(pages_data, f, indent=2)
-            self._copy_template_files()
-            print("✅ Results saved successfully!")
-        except Exception as e:
-            print(f"Save results failed: {e}")
-    def _copy_template_files(self):
-        try:
-            template_html = '''<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Comic Editor</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&family=Gloria+Hallelujah&family=Lato&display=swap" rel="stylesheet">
     <style>
         body { margin: 0; padding: 20px; background: #f0f0f0; font-family: 'Lato', sans-serif; }
         .comic-container { max-width: 1200px; margin: 0 auto; }
@@ -566,75 +113,114 @@ class EnhancedComicGenerator:
         .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; }
-        /* <<< ROBUST BORDER-BASED SHARK FIN TAIL >>> */
         .speech-bubble.speech {
-            --bubble-fill-color: #4ECDC4; /* Default fill */
             --bubble-text-color: #ffffff;
             --tail-pos: 50%;
             background: var(--bubble-fill-color);
             color: var(--bubble-text-color);
-            border-radius: 12px;
             padding: 1em;
             position: absolute;
         }
-        /* The Tail Pseudo-Element using BORDERS (Export Safe) */
-        .speech-bubble.speech:before {
             content: "";
             position: absolute;
-            width: 0;
-            height: 0;
-            border-style: solid;
             pointer-events: none;
-            /* Shark Fin Shape: Right Angled Triangle logic */
-            /* This creates a solid triangle that works in html2canvas */
         }
-        /* BOTTOM TAIL */
         .speech-bubble.speech.tail-bottom:before {
-            /* Triangle pointing down */
-            border-width: 25px 20px 0 0;
-            border-color: var(--bubble-fill-color) transparent transparent transparent;
-            top: 100%;
             left: var(--tail-pos);
-            transform: translateX(-50%); /* Center the tip horizontally */
         }
-        /* TOP TAIL */
         .speech-bubble.speech.tail-top:before {
-            /* Triangle pointing up */
-            border-width: 0 20px 25px 0;
-            border-color: transparent transparent var(--bubble-fill-color) transparent;
-            bottom: 100%;
             left: var(--tail-pos);
-            transform: translateX(-50%);
         }
-        /* LEFT TAIL */
-        .speech-bubble.speech.tail-left:before {
-            /* Triangle pointing left */
-            border-width: 0 25px 20px 0;
-            border-color: transparent var(--bubble-fill-color) transparent transparent;
-            right: 100%;
             top: var(--tail-pos);
-            transform: translateY(-50%);
         }
-        /* RIGHT TAIL */
         .speech-bubble.speech.tail-right:before {
-            /* Triangle pointing right */
-            border-width: 20px 25px 0 0;
-            border-color: var(--bubble-fill-color) transparent transparent transparent;
-            left: 100%;
             top: var(--tail-pos);
-            transform: translateY(-50%) rotate(90deg); /* Rotate standard triangle */
-            transform-origin: top left;
         }
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
@@ -1066,7 +652,7 @@ class EnhancedComicGenerator:
             const pages = document.querySelectorAll('.comic-page');
             if (pages.length === 0) return alert("No pages found.");
-            // 1. FREEZE DIMENSIONS BEFORE EXPORT (Prevents size reset bug)
             const bubbles = document.querySelectorAll('.speech-bubble');
             bubbles.forEach(b => {
                 const rect = b.getBoundingClientRect();
@@ -1089,7 +675,7 @@ class EnhancedComicGenerator:
                 } catch (err) { alert(`Failed to export page ${i + 1}.`); }
             }
-            // 2. UNFREEZE DIMENSIONS (Restore normal behavior)
             bubbles.forEach(b => {
                 b.style.minWidth = '50px';
                 b.style.minHeight = '30px';

     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&family=Gloria+Hallelujah&family=Lato&display=swap" rel="stylesheet">
     <style>
         body { margin: 0; padding: 20px; background: #f0f0f0; font-family: 'Lato', sans-serif; }
         .comic-container { max-width: 1200px; margin: 0 auto; }
         .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; }
+        /* <<< EXPORT-SAFE CURVED TAIL (NO MASKS) >>> */
         .speech-bubble.speech {
+            --bubble-fill-color: #4ECDC4;
             --bubble-text-color: #ffffff;
+            --bubble-border-color: #333333;
             --tail-pos: 50%;
             background: var(--bubble-fill-color);
             color: var(--bubble-text-color);
+            border: 2px solid var(--bubble-border-color);
+            border-radius: 15px;
             padding: 1em;
             position: absolute;
         }
+        /*
+           We use two pseudo-elements:
+           :before -> The outer border (Outline)
+           :after  -> The inner color (Fill)
+           Shape Logic:
+           We create a square and round ONE corner to 100%.
+           This creates a perfect "Shark Fin" curve that is export-safe.
+        */
+        .speech-bubble.speech:before,
+        .speech-bubble.speech:after {
             content: "";
             position: absolute;
+            width: 20px;
+            height: 20px;
             pointer-events: none;
         }
+        /* --- BOTTOM TAIL --- */
+        .speech-bubble.speech.tail-bottom:after {
+            background: var(--bubble-fill-color);
+            border-bottom-right-radius: 20px; /* The Curve */
+            bottom: -13px; /* Overlap slightly to hide gap */
+            left: var(--tail-pos);
+            transform: translateX(-50%) rotate(45deg);
+            z-index: 2; /* On top of border */
+        }
         .speech-bubble.speech.tail-bottom:before {
+            background: var(--bubble-border-color);
+            border-bottom-right-radius: 22px;
+            width: 24px; height: 24px; /* Slightly larger for border effect */
+            bottom: -16px;
             left: var(--tail-pos);
+            transform: translateX(-50%) rotate(45deg);
+            z-index: 1;
         }
+        /* --- TOP TAIL --- */
+        .speech-bubble.speech.tail-top:after {
+            background: var(--bubble-fill-color);
+            border-top-left-radius: 20px;
+            top: -13px;
+            left: var(--tail-pos);
+            transform: translateX(-50%) rotate(45deg);
+            z-index: 2;
+        }
         .speech-bubble.speech.tail-top:before {
+            background: var(--bubble-border-color);
+            border-top-left-radius: 22px;
+            width: 24px; height: 24px;
+            top: -16px;
             left: var(--tail-pos);
+            transform: translateX(-50%) rotate(45deg);
+            z-index: 1;
         }
+        /* --- RIGHT TAIL --- */
+        .speech-bubble.speech.tail-right:after {
+            background: var(--bubble-fill-color);
+            border-top-right-radius: 20px;
+            right: -13px;
             top: var(--tail-pos);
+            transform: translateY(-50%) rotate(45deg);
+            z-index: 2;
         }
         .speech-bubble.speech.tail-right:before {
+            background: var(--bubble-border-color);
+            border-top-right-radius: 22px;
+            width: 24px; height: 24px;
+            right: -16px;
+            top: var(--tail-pos);
+            transform: translateY(-50%) rotate(45deg);
+            z-index: 1;
+        }
+        /* --- LEFT TAIL --- */
+        .speech-bubble.speech.tail-left:after {
+            background: var(--bubble-fill-color);
+            border-bottom-left-radius: 20px;
+            left: -13px;
+            top: var(--tail-pos);
+            transform: translateY(-50%) rotate(45deg);
+            z-index: 2;
+        }
+        .speech-bubble.speech.tail-left:before {
+            background: var(--bubble-border-color);
+            border-bottom-left-radius: 22px;
+            width: 24px; height: 24px;
+            left: -16px;
             top: var(--tail-pos);
+            transform: translateY(-50%) rotate(45deg);
+            z-index: 1;
         }
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
             const pages = document.querySelectorAll('.comic-page');
             if (pages.length === 0) return alert("No pages found.");
+            // 1. FREEZE DIMENSIONS BEFORE EXPORT
             const bubbles = document.querySelectorAll('.speech-bubble');
             bubbles.forEach(b => {
                 const rect = b.getBoundingClientRect();
                 } catch (err) { alert(`Failed to export page ${i + 1}.`); }
             }
+            // 2. UNFREEZE DIMENSIONS
             bubbles.forEach(b => {
                 b.style.minWidth = '50px';
                 b.style.minHeight = '30px';