Testcomic

Running

App Files Files Community

jhh6576 commited on Nov 26, 2025

Commit

376a726

verified ·

1 Parent(s): 111bba5

Update app_enhanced.py

Browse files

Files changed (1) hide show

app_enhanced.py +56 -500

app_enhanced.py CHANGED Viewed

@@ -73,455 +73,6 @@ INDEX_HTML = '''
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Movie to Comic Generator</title>
-    <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>
@@ -562,90 +113,95 @@ 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; }
-        /* <<< EXPORT-SAFE VARIANT #85 (Using Border-Radius Tricks) >>> */
         /*
-           Since html2canvas does NOT support CSS masks, we replicate the
-           "Shark Fin" shape using carefully crafted border-radius geometry.
-           This looks identical but renders perfectly on export.
         */
         .speech-bubble.speech {
             --bubble-fill-color: #4ECDC4;
             --bubble-text-color: #ffffff;
-            /* The Main Body Bubble Variables */
-            --b: 3em;   /* Tail base */
-            --h: 1.8em; /* Tail height */
-            --t: 0.6;   /* Thickness */
-            --p: var(--tail-pos, 50%);
-            --r: 1.2em; /* Radius */
             background: var(--bubble-fill-color);
             color: var(--bubble-text-color);
             padding: 1em;
             position: absolute;
-            /* Replicate the bubble body shape from the user CSS */
             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);
         }
-        /* The Tail Pseudo-Element (Using Geometric Border Radius) */
         .speech-bubble.speech:before {
             content: "";
             position: absolute;
-            width: var(--b);
-            height: var(--h);
-            background: var(--bubble-fill-color); /* Same as body */
             pointer-events: none;
-            /* This shape mimics the Shark Fin: Square with one rounded corner */
-            border-bottom-left-radius: 100%;
-            /* Optional: Use clip-path to clean up edges if needed, but this shape is pure */
         }
         /* BOTTOM TAIL */
         .speech-bubble.speech.tail-bottom:before {
-            top: 100%; /* Attach to bottom */
-            /* Exact positioning calc from user CSS */
-            left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
-            /* No rotation needed for bottom-left curve look */
         }
-        /* TOP TAIL (Flip Vertical) */
-        .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);
         }
-        /* LEFT TAIL (Rotate 90) */
-        .speech-bubble.speech.tail-left {
-            border-radius: var(--r);
-        }
         .speech-bubble.speech.tail-left:before {
-            right: 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: right top;
         }
-        /* RIGHT TAIL (Rotate -90) */
-        .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: left top;
         }
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
@@ -875,7 +431,7 @@ class EnhancedComicGenerator:
                 bubble.dataset.tailPos = '0';
             }
             if (type === 'thought') {
-                for (let i = 1; i <= 2; i++) {
                     const dot = document.createElement('div');
                     dot.className = `thought-dot thought-dot-${i}`;
                     bubble.appendChild(dot);

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Movie to Comic Generator</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>
         .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; }
+        /* <<< THIN "SHARK FIN" TAIL (EXPORT SAFE) >>> */
         /*
+           We replicate the visual result of the Mask CSS using a "Crescent Shadow" trick.
+           This creates the thin, curved thorn shape using box-shadow on a rounded element,
+           which IS supported by html2canvas (unlike masks).
         */
         .speech-bubble.speech {
             --bubble-fill-color: #4ECDC4;
             --bubble-text-color: #ffffff;
+            --bubble-border-color: #333333; /* Only used if borders enabled */
+            --tail-pos: 50%;
+            /* The original variables from your CSS */
+            --b: 3em;   /* base */
+            --h: 1.8em; /* height */
+            --t: .6;    /* thickness */
+            --r: 1.2em; /* radius */
             background: var(--bubble-fill-color);
             color: var(--bubble-text-color);
             padding: 1em;
             position: absolute;
+            /* The exact border-radius logic from your CSS */
             border-radius: var(--r) var(--r)
+                           min(var(--r), calc(100% - var(--tail-pos) - (1 - var(--t)) * var(--b) / 2))
+                           min(var(--r), calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2))
                            / var(--r);
         }
         .speech-bubble.speech:before {
             content: "";
             position: absolute;
             pointer-events: none;
+            /*
+               CRESCENT TRICK:
+               1. Create a transparent box.
+               2. Round one corner significantly.
+               3. Use box-shadow to "paint" the shape outside the transparent box.
+               This creates a sharp, thin, concave curve exactly like the mask.
+            */
+            width: 1.5em; /* Controls fin thinness width */
+            height: 1.8em; /* Controls fin height */
+            background: transparent;
+            z-index: 1;
         }
         /* BOTTOM TAIL */
         .speech-bubble.speech.tail-bottom:before {
+            top: 90%; /* Slight overlap to seal gap */
+            /* Exact placement logic */
+            left: clamp(0%, calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
+            /* The Crescent Shape Construction */
+            border-radius: 0 0 100% 0; /* Bottom-right curve */
+            box-shadow: inset -10px -10px 0px -2px var(--bubble-fill-color); /* The Fin */
+            transform: rotate(-10deg); /* Angle it slightly for the style */
+            transform-origin: top left;
         }
+        /* TOP TAIL (Reflected) */
         .speech-bubble.speech.tail-top:before {
+            bottom: 90%;
+            left: clamp(0%, calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
+            border-radius: 0 100% 0 0;
+            box-shadow: inset -10px 10px 0px -2px var(--bubble-fill-color);
+            transform: rotate(10deg);
+            transform-origin: bottom left;
         }
+        /* LEFT TAIL */
         .speech-bubble.speech.tail-left:before {
+            right: 90%;
+            top: clamp(0%, calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
+            border-radius: 0 0 0 100%;
+            box-shadow: inset 10px -10px 0px -2px var(--bubble-fill-color);
+            transform: rotate(10deg);
+            transform-origin: top right;
         }
+        /* RIGHT TAIL */
         .speech-bubble.speech.tail-right:before {
+            left: 90%;
+            top: clamp(0%, calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
+            border-radius: 0 0 100% 0;
+            box-shadow: inset -10px -10px 0px -2px var(--bubble-fill-color);
+            transform: rotate(-10deg);
+            transform-origin: top left;
         }
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
                 bubble.dataset.tailPos = '0';
             }
             if (type === 'thought') {
+                for (let i = 2; i <= 2; i++) {
                     const dot = document.createElement('div');
                     dot.className = `thought-dot thought-dot-${i}`;
                     bubble.appendChild(dot);