Update app_enhanced.py

app_enhanced.py

@@ -476,11 +476,9 @@ class EnhancedComicGenerator:
             os.makedirs(self.output_dir, exist_ok=True)
             pages_data = []
             for page in pages:
-                # Ensure __dict__ is called on objects, not already-dicts from fallback
                 panels = [p.__dict__ if hasattr(p, '__dict__') else p for p in page.panels]
-                bubbles = [b.__dict__ if hasattr(b, '__dict__') else b for b in page.bubbles]
-                pages_data.append({'panels': panels, 'bubbles': bubbles})
-
+                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()
@@ -496,8 +494,11 @@ class EnhancedComicGenerator:
     <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: Arial, sans-serif; }
+        body { margin: 0; padding: 20px; background: #f0f0f0; font-family: 'Lato', sans-serif; }
         .comic-container { max-width: 1200px; margin: 0 auto; }
         .comic-page { background: white; width: 600px; height: 400px; box-shadow: 0 0 10px rgba(0,0,0,0.1); box-sizing: content-box; position: relative; overflow: hidden; border: 1px solid #333; padding: 10px; }
         .comic-grid { display: grid; grid-template-columns: 285px 285px; grid-template-rows: 185px 185px; gap: 10px; width: 100%; height: 100%; }
@@ -508,7 +509,7 @@ 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: auto; height: auto; min-width: 50px; max-width: 220px; min-height: 30px; box-sizing: border-box; padding: 8px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 10; cursor: move; overflow: visible; font-size: 13px; font-weight: bold; text-align: center; }
+        .speech-bubble { font-family: 'Comic Neue', cursive; position: absolute; display: flex; justify-content: center; align-items: center; width: auto; height: auto; min-width: 50px; max-width: 220px; min-height: 30px; box-sizing: border-box; padding: 8px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 10; cursor: move; overflow: visible; font-size: 13px; font-weight: bold; text-align: center; }
         .bubble-text { padding: 2px; 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; }
@@ -560,6 +561,12 @@ class EnhancedComicGenerator:
             <select id="bubble-type-select" onchange="changeBubbleType(this.value)" disabled>
                 <option value="speech">Speech</option><option value="thought">Thought</option><option value="reaction">Reaction</option><option value="narration">Narration</option><option value="idea">Idea</option>
             </select>
+            <select id="font-select" onchange="changeFont(this.value)" disabled>
+                <option value="'Comic Neue', cursive">Comic Neue</option>
+                <option value="'Bangers', cursive">Bangers</option>
+                <option value="'Gloria Hallelujah', cursive">Gloria</option>
+                <option value="'Lato', sans-serif">Lato</option>
+            </select>
             <div class="color-picker-grid">
                 <div>
                     <label for="bubble-text-color">Text</label>
@@ -572,6 +579,7 @@ class EnhancedComicGenerator:
             </div>
             <button onclick="rotateBubbleTail()" class="secondary-button">🔄 Rotate Tail</button>
             <button onclick="addBubbleToPanel()" class="action-button">💬 Add Bubble</button>
+            <button onclick="deleteBubble()" class="reset-button">🗑️ Delete Bubble</button>
         </div>
         <div class="control-group">
             <label>Panel Tools (Select Panel):</label>
@@ -726,6 +734,11 @@ class EnhancedComicGenerator:
             applyBubbleType(currentlySelectedBubble, type);
         }
         
+        function changeFont(font) {
+            if (!currentlySelectedBubble) return;
+            currentlySelectedBubble.style.fontFamily = font;
+        }
+        
         function rotateBubbleTail() {
             if (!currentlySelectedBubble) { alert("Please select a bubble first."); return; }
             const isFlippedH = currentlySelectedBubble.classList.contains('flipped');
@@ -749,6 +762,7 @@ class EnhancedComicGenerator:
             document.getElementById('bubble-type-select').disabled = true;
             document.getElementById('bubble-text-color').disabled = true;
             document.getElementById('bubble-fill-color').disabled = true;
+            document.getElementById('font-select').disabled = true;
         }
 
         function selectBubble(bubble) {
@@ -757,6 +771,7 @@ class EnhancedComicGenerator:
             const textColorPicker = document.getElementById('bubble-text-color');
             const fillColorPicker = document.getElementById('bubble-fill-color');
             const typeSelect = document.getElementById('bubble-type-select');
+            const fontSelect = document.getElementById('font-select');
 
             if (currentlySelectedBubble) {
                 currentlySelectedBubble.classList.add('selected');
@@ -768,10 +783,18 @@ class EnhancedComicGenerator:
                 fillColorPicker.value = rgbToHex(styles.backgroundColor);
 
                 typeSelect.value = currentlySelectedBubble.dataset.type || 'speech';
+                fontSelect.value = styles.fontFamily.split(',')[0].replace(/"/g, "'");
+
                 document.getElementById('zoom-slider').disabled = true;
                 textColorPicker.disabled = false;
                 fillColorPicker.disabled = false;
                 typeSelect.disabled = false;
+                fontSelect.disabled = false;
+            } else {
+                textColorPicker.disabled = true;
+                fillColorPicker.disabled = true;
+                typeSelect.disabled = true;
+                fontSelect.disabled = true;
             }
         }
         
@@ -812,6 +835,18 @@ class EnhancedComicGenerator:
 
         function stopDrag() { draggedBubble = null; }
 
+        function deleteBubble() {
+            if (!currentlySelectedBubble) {
+                alert("Please select a bubble to delete.");
+                return;
+            }
+            if (confirm("Are you sure you want to delete this bubble?")) {
+                currentlySelectedBubble.remove();
+                currentlySelectedBubble = null;
+                selectBubble(null); // Deselect and disable controls
+            }
+        }
+
         function clearSavedState() {
             if (confirm("Reset all edits?")) {
                 localStorage.removeItem('comicEditorState');