Update app_enhanced.py

app_enhanced.py

@@ -73,10 +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>
-    <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 {
             background-color: #fdf6e3;
@@ -542,31 +538,12 @@ 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; }
-        
-        /* General Bubble Container */
-        .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; 
-        }
+        .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: 0.8em; word-wrap: break-word; position: relative; z-index: 5; }
         .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) >>> */
+        /* <<< FIXED "SHARK FIN" TAIL USING BORDER-RADIUS (EXPORT SAFE) >>> */
         .speech-bubble.speech {
             --bubble-fill-color: #4ECDC4;
             --bubble-text-color: #ffffff;
@@ -576,101 +553,63 @@ class EnhancedComicGenerator:
             background: var(--bubble-fill-color);
             color: var(--bubble-text-color);
             border: 2px solid var(--bubble-border-color);
-            border-radius: 15px;
+            border-radius: 12px;
             padding: 1em;
             position: absolute;
         }
 
-        /* 
-           We use two pseudo-elements:
-           :before -> The outer border (Outline)
-           :after  -> The inner color (Fill)
-           Shape Logic: Round one corner of a square to create the Shark Fin curve.
-        */
-
-        .speech-bubble.speech:before, 
-        .speech-bubble.speech:after {
+        .speech-bubble.speech:before {
             content: "";
             position: absolute;
-            width: 20px;
-            height: 20px;
-            pointer-events: none;
-        }
-
-        /* --- BOTTOM TAIL --- */
-        .speech-bubble.speech.tail-bottom:after {
+            width: 22px; height: 22px;
             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);
+            /* The Curve Trick: Square with one rounded corner */
+            border-bottom-right-radius: 100%;
+            
+            /* Optional border simulation if needed, but flat is safer for exact shape match */
             z-index: 1;
         }
 
-        /* --- TOP TAIL --- */
-        .speech-bubble.speech.tail-top:after {
-            background: var(--bubble-fill-color);
-            border-top-left-radius: 20px; 
-            top: -13px;
+        /* BOTTOM TAIL */
+        .speech-bubble.speech.tail-bottom:before {
+            top: 95%; /* Slight overlap */
             left: var(--tail-pos);
-            transform: translateX(-50%) rotate(45deg);
-            z-index: 2;
+            transform: translateX(-50%) rotate(45deg) skew(15deg);
+            border: 2px solid var(--bubble-border-color);
+            border-top: 0; border-left: 0;
         }
+
+        /* TOP TAIL */
         .speech-bubble.speech.tail-top:before {
-            background: var(--bubble-border-color);
-            border-top-left-radius: 22px;
-            width: 24px; height: 24px;
-            top: -16px;
+            bottom: 95%;
             left: var(--tail-pos);
-            transform: translateX(-50%) rotate(45deg);
-            z-index: 1;
+            border-top-left-radius: 100%;
+            border-bottom-right-radius: 0;
+            transform: translateX(-50%) rotate(45deg) skew(15deg);
+            border: 2px solid var(--bubble-border-color);
+            border-bottom: 0; border-right: 0;
         }
 
-        /* --- 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;
+        /* LEFT TAIL */
+        .speech-bubble.speech.tail-left:before {
+            right: 95%;
             top: var(--tail-pos);
-            transform: translateY(-50%) rotate(45deg);
-            z-index: 1;
+            border-bottom-left-radius: 100%;
+            border-bottom-right-radius: 0;
+            transform: translateY(-50%) rotate(45deg) skew(15deg);
+            border: 2px solid var(--bubble-border-color);
+            border-top: 0; border-right: 0;
         }
 
-        /* --- 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;
+        /* RIGHT TAIL */
+        .speech-bubble.speech.tail-right:before {
+            left: 95%;
             top: var(--tail-pos);
-            transform: translateY(-50%) rotate(45deg);
-            z-index: 1;
+            border-top-right-radius: 100%;
+            border-bottom-right-radius: 0;
+            transform: translateY(-50%) rotate(45deg) skew(15deg);
+            border: 2px solid var(--bubble-border-color);
+            border-bottom: 0; border-left: 0;
         }
 
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }