Testcomic

Sleeping

App Files Files Community

jhh6576 commited on Nov 27, 2025

Commit

01ee770

verified ·

1 Parent(s): 20377b5

Update app_enhanced.py

Browse files

Files changed (1) hide show

app_enhanced.py +27 -7

app_enhanced.py CHANGED Viewed

@@ -522,8 +522,8 @@ class EnhancedComicGenerator:
 <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">
@@ -539,13 +539,32 @@ 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; 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 */
@@ -1060,8 +1079,8 @@ class EnhancedComicGenerator:
             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;
@@ -1237,6 +1256,7 @@ class EnhancedComicGenerator:
     </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!")

 <head>
     <meta charset="UTF-8">
     <title>Comic Editor</title>
+    <!-- SWAPPED TO html-to-image for PERFECT MASK SUPPORT -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-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; }
+        /* 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 EXACT CSS (#5 Shape) with Mask >>> */
+        /* html-to-image supports CSS masks perfectly */
         .speech-bubble.speech {
             --b: 3em;   /* tail base width */
             alert(`Starting export of ${pages.length} page(s).`);
             for (let i = 0; i < pages.length; i++) {
                 try {
+                    // SWITCHED TO html-to-image FOR BETTER MASK SUPPORT & PIXEL RATIO
+                    const dataUrl = await htmlToImage.toPng(pages[i], { pixelRatio: 3 });
                     const link = document.createElement('a');
                     link.download = `comic-page-${i + 1}.png`;
                     link.href = dataUrl;
     </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!")