Testcomic

Running

App Files Files Community

jhh6576 commited on Nov 27, 2025

Commit

20377b5

verified ·

1 Parent(s): a9d8f9f

Update app_enhanced.py

Browse files

Files changed (1) hide show

app_enhanced.py +40 -67

app_enhanced.py CHANGED Viewed

@@ -522,7 +522,8 @@ class EnhancedComicGenerator:
 <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">
@@ -538,110 +539,79 @@ 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;
-        }
-        .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; }
-        /* <<< USER REQUESTED STYLE #5 "SHARK FIN" (EXPORT FIXED) >>> */
         .speech-bubble.speech {
-            /* Variables defined inline via slider/JS */
             --b: 3em;   /* tail base width */
             --h: 1.8em; /* tail height */
-            --t: 0.6;   /* thickness factor (0 to 1) */
-            --p: var(--tail-pos, 50%);  /* Slider position */
-            --r: 1.2em; /* Border Radius */
-            /* Colors */
             --c: var(--bubble-fill-color, #4ECDC4);
             background: var(--c);
             color: var(--bubble-text-color, #fff);
             padding: 1em;
-            /* The Exact Body Shape from user request */
-            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);
-            position: absolute;
         }
-        /*
-           FIX FOR EXPORTING:
-           We convert the mask into a "RADIAL GRADIENT BACKGROUND".
-           This creates the EXACT same concave curve shape, but it is supported 100% by html2canvas.
-        */
         .speech-bubble.speech:before {
             content: "";
             position: absolute;
             width: var(--b);
             height: var(--h);
-            /* The Magic Gradient that creates the fin shape */
-            background: radial-gradient(100% 100% at 100% 0, transparent calc(var(--t) * 100% - 1px), var(--c) calc(var(--t) * 100%));
             border-bottom-left-radius: 100%;
-            pointer-events: none;
             z-index: 1;
         }
-        /* BOTTOM TAIL (Standard) */
         .speech-bubble.speech.tail-bottom:before {
-            top: 99%; /* 1% overlap to prevent thin line gaps */
-            left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
         }
-        /* TOP TAIL (Flipped) */
         .speech-bubble.speech.tail-top {
-             /* Flip border radius for 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: 99%;
-            left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
             transform: scaleY(-1);
         }
-        /* LEFT TAIL (Rotated) */
         .speech-bubble.speech.tail-left {
             border-radius: var(--r);
         }
         .speech-bubble.speech.tail-left:before {
-            right: 99%;
-            top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
             transform: rotate(90deg);
             transform-origin: top right;
         }
-        /* RIGHT TAIL (Rotated) */
         .speech-bubble.speech.tail-right {
-             border-radius: var(--r);
         }
         .speech-bubble.speech.tail-right:before {
-            left: 99%;
-            top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
             transform: rotate(-90deg);
             transform-origin: top left;
         }
@@ -1090,12 +1060,16 @@ class EnhancedComicGenerator:
             alert(`Starting export of ${pages.length} page(s).`);
             for (let i = 0; i < pages.length; i++) {
                 try {
-                    const canvas = await html2canvas(pages[i], { scale: 2 });
                     const link = document.createElement('a');
                     link.download = `comic-page-${i + 1}.png`;
-                    link.href = canvas.toDataURL('image/png');
                     link.click();
-                } catch (err) { alert(`Failed to export page ${i + 1}.`); }
             }
             // 2. UNFREEZE DIMENSIONS (Restore normal behavior)
@@ -1263,7 +1237,6 @@ class EnhancedComicGenerator:
     </script>
 </body>
 </html>'''
-            # --- CORRECTED INDENTATION ---
             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!")

 <head>
     <meta charset="UTF-8">
     <title>Comic Editor</title>
+    <!-- Use dom-to-image for better mask support on export -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.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">
         .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; 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; }
         .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; }
+        /* <<< USER REQUESTED EXACT CSS (#5 Shape) with Mask >>> */
+        /* NOTE: dom-to-image is required for this to export correctly. */
         .speech-bubble.speech {
             --b: 3em;   /* tail base width */
             --h: 1.8em; /* tail height */
+            --t: .6;    /* thickness */
+            --p: var(--tail-pos, 50%);
+            --r: 1.2em; /* radius */
             --c: var(--bubble-fill-color, #4ECDC4);
             background: var(--c);
             color: var(--bubble-text-color, #fff);
             padding: 1em;
+            position: absolute;
+            border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - (1 - var(--t))*var(--b)/2) min(var(--r),var(--p) - (1 - var(--t))*var(--b)/2)/var(--r);
         }
         .speech-bubble.speech:before {
             content: "";
             position: absolute;
             width: var(--b);
             height: var(--h);
+            background: inherit;
             border-bottom-left-radius: 100%;
             z-index: 1;
+            pointer-events: none;
+            /* The specific mask requested */
+            -webkit-mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0,#0000 99%,#000 101%);
+            mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0,#0000 99%,#000 101%);
         }
+        /* BOTTOM TAIL (Default) */
         .speech-bubble.speech.tail-bottom:before {
+            top: 100%;
+            left: clamp(0%,var(--p) - (1 - var(--t))*var(--b)/2,100% - (1 - var(--t))*var(--b));
         }
+        /* TOP TAIL (Flip Vertical) */
         .speech-bubble.speech.tail-top {
+            border-radius: min(var(--r),var(--p) - (1 - var(--t))*var(--b)/2) min(var(--r),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%,var(--p) - (1 - var(--t))*var(--b)/2,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%,var(--p) - (1 - var(--t))*var(--b)/2,100% - (1 - var(--t))*var(--b));
             transform: rotate(90deg);
             transform-origin: top right;
         }
+        /* RIGHT TAIL (Rotate -90) */
         .speech-bubble.speech.tail-right {
+            border-radius: var(--r);
         }
         .speech-bubble.speech.tail-right:before {
+            left: 100%;
+            top: clamp(0%,var(--p) - (1 - var(--t))*var(--b)/2,100% - (1 - var(--t))*var(--b));
             transform: rotate(-90deg);
             transform-origin: top left;
         }
             alert(`Starting export of ${pages.length} page(s).`);
             for (let i = 0; i < pages.length; i++) {
                 try {
+                    // SWITCHED TO DOM-TO-IMAGE FOR MASK SUPPORT
+                    const dataUrl = await domtoimage.toPng(pages[i]);
                     const link = document.createElement('a');
                     link.download = `comic-page-${i + 1}.png`;
+                    link.href = dataUrl;
                     link.click();
+                } catch (err) {
+                    console.error(err);
+                    alert(`Failed to export page ${i + 1}.`);
+                }
             }
             // 2. UNFREEZE DIMENSIONS (Restore normal behavior)
     </script>
 </body>
 </html>'''
             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!")