Testcomic

Sleeping

App Files Files Community

jhh6576 commited on Nov 11, 2025

Commit

3803d92

verified ·

1 Parent(s): eff7948

Update app_enhanced.py

Browse files

Files changed (1) hide show

app_enhanced.py +89 -77

app_enhanced.py CHANGED Viewed

@@ -509,13 +509,13 @@ 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 { font-family: 'Comic Neue', cursive; position: absolute; display: flex; justify-content: center; align-items: center; width: 150px; height: 80px; 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; }
         .speech-bubble.speech { background: white; border: 2px solid #333; color: #333; border-radius: 15px; }
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
-        .speech-bubble.reaction { background: #FFD700; border: 3px solid #E53935; color: #D32F2F; font-weight: 900; text-transform: uppercase; width: 180px; clip-path: polygon(0% 25%, 17% 21%, 17% 0%, 31% 16%, 50% 4%, 69% 16%, 83% 0%, 83% 21%, 100% 25%, 85% 45%, 95% 62%, 82% 79%, 100% 97%, 79% 89%, 60% 98%, 46% 82%, 27% 95%, 15% 78%, 5% 62%, 15% 45%); }
         .speech-bubble.narration { background: #FAFAFA; border: 2px solid #BDBDBD; color: #424242; border-radius: 3px; }
         .speech-bubble.idea { background: linear-gradient(180deg,#FFFDD0 0%, #FFF8B5 100%); border: 2px solid #FFA500; color: #6a4b00; border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%; }
         .speech-bubble.speech::after, .speech-bubble.idea::after { content: ''; position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; }
@@ -552,6 +552,8 @@ class EnhancedComicGenerator:
         .color-picker-grid div { text-align: center; }
         .color-picker-grid label { font-size: 11px; }
         .color-picker-grid input[type="color"] { height: 25px; padding: 2px; }
     </style>
 </head>
 <body>
@@ -573,6 +575,10 @@ class EnhancedComicGenerator:
                 <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>
@@ -623,6 +629,7 @@ class EnhancedComicGenerator:
         let currentlySelectedBubble = null;
         let currentlySelectedPanel = null;
         let isPanning = false, panStartX, panStartY, panStartTranslateX, panStartTranslateY;
         function renderComic(data) {
             const container = document.getElementById('comic-pages');
@@ -675,6 +682,12 @@ class EnhancedComicGenerator:
             document.getElementById('bubble-fill-color').addEventListener('input', (e) => {
                 if(currentlySelectedBubble) currentlySelectedBubble.style.backgroundColor = e.target.value;
             });
             document.addEventListener('mousemove', e => { if (isPanning) panImage(e); if (draggedBubble) drag(e); if(isResizing) resizeBubble(e); });
             document.addEventListener('mouseup', e => { if (isPanning) stopPan(e); if (draggedBubble) stopDrag(e); if(isResizing) stopResize(e);});
@@ -686,7 +699,6 @@ class EnhancedComicGenerator:
             bubble.addEventListener('mousedown', e => { e.stopPropagation(); startDrag(e); });
             bubble.addEventListener('click', e => { e.stopPropagation(); selectBubble(bubble); });
-            // Add resize handles
             ['nw', 'ne', 'sw', 'se'].forEach(dir => {
                 const handle = document.createElement('div');
                 handle.className = `resize-handle ${dir}`;
@@ -720,21 +732,7 @@ class EnhancedComicGenerator:
         }
         function applyBubbleType(bubble, type) {
-            bubble.querySelectorAll('.thought-dot').forEach(el => el.remove());
-            let classesToKeep = 'speech-bubble';
-            if (bubble.classList.contains('selected')) classesToKeep += ' selected';
-            if (bubble.classList.contains('flipped')) classesToKeep += ' flipped';
-            if (bubble.classList.contains('flipped-vertical')) classesToKeep += ' flipped-vertical';
-            bubble.className = classesToKeep;
-            bubble.classList.add(type);
-            bubble.dataset.type = type;
-            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);
-                }
-            }
         }
         function changeBubbleType(type) {
@@ -748,13 +746,7 @@ class EnhancedComicGenerator:
         }
         function rotateBubbleTail() {
-            if (!currentlySelectedBubble) { alert("Please select a bubble first."); return; }
-            const isFlippedH = currentlySelectedBubble.classList.contains('flipped');
-            const isFlippedV = currentlySelectedBubble.classList.contains('flipped-vertical');
-            if (!isFlippedH && !isFlippedV) { currentlySelectedBubble.classList.add('flipped'); }
-            else if (isFlippedH && !isFlippedV) { currentlySelectedBubble.classList.add('flipped-vertical'); }
-            else if (isFlippedH && isFlippedV) { currentlySelectedBubble.classList.remove('flipped'); }
-            else { currentlySelectedBubble.classList.remove('flipped-vertical'); }
         }
         function selectPanel(panel) {
@@ -771,11 +763,7 @@ class EnhancedComicGenerator:
         function selectBubble(bubble) {
             if (currentlySelectedBubble) currentlySelectedBubble.classList.remove('selected');
             currentlySelectedBubble = bubble;
-            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');
-            const bubbleControls = [textColorPicker, fillColorPicker, typeSelect, fontSelect];
             if (currentlySelectedBubble) {
                 currentlySelectedBubble.classList.add('selected');
@@ -783,15 +771,19 @@ class EnhancedComicGenerator:
                 currentlySelectedPanel = null;
                 const styles = window.getComputedStyle(currentlySelectedBubble);
-                textColorPicker.value = rgbToHex(styles.color);
-                fillColorPicker.value = rgbToHex(styles.backgroundColor);
-                typeSelect.value = currentlySelectedBubble.dataset.type || 'speech';
-                fontSelect.value = styles.fontFamily.split(',')[0].replace(/"/g, "").replace(/'/g, "").trim();
                 document.getElementById('zoom-slider').disabled = true;
-                bubbleControls.forEach(c => c.disabled = false);
             } else {
-                bubbleControls.forEach(c => c.disabled = true);
             }
         }
@@ -800,7 +792,6 @@ class EnhancedComicGenerator:
             currentlyEditing = bubble;
             const textSpan = bubble.querySelector('.bubble-text');
             const textarea = document.createElement('textarea');
-            // FIX: Preserve height before editing
             const originalHeight = bubble.style.height || `${bubble.offsetHeight}px`;
             bubble.style.height = originalHeight;
@@ -812,7 +803,6 @@ class EnhancedComicGenerator:
                 textSpan.textContent = textarea.value;
                 bubble.removeChild(textarea);
                 textSpan.style.display = '';
-                // FIX: Re-apply height, then set to auto to allow natural flow
                 bubble.style.height = originalHeight;
                 setTimeout(() => { bubble.style.height = 'auto'; }, 0);
                 currentlyEditing = null;
@@ -822,19 +812,11 @@ class EnhancedComicGenerator:
         }
         function startDrag(e) {
-            const bubble = e.target.closest('.speech-bubble');
-            if (!bubble || currentlyEditing) return;
-            draggedBubble = bubble;
-            selectBubble(bubble);
-            const rect = bubble.getBoundingClientRect();
-            offset = { x: e.clientX - rect.left, y: e.clientY - rect.top };
         }
         function drag(e) {
-            if (!draggedBubble) return;
-            const parentRect = draggedBubble.parentElement.getBoundingClientRect();
-            draggedBubble.style.left = `${e.clientX - parentRect.left - offset.x}px`;
-            draggedBubble.style.top = `${e.clientY - parentRect.top - offset.y}px`;
         }
         function stopDrag() { draggedBubble = null; }
@@ -850,10 +832,7 @@ class EnhancedComicGenerator:
                 selectBubble(null);
             }
         }
-        let isResizing = false;
-        let resizeHandle, originalWidth, originalHeight, originalX, originalY, originalMouseX, originalMouseY;
         function startResize(e, dir) {
             e.preventDefault();
             e.stopPropagation();
@@ -875,16 +854,19 @@ class EnhancedComicGenerator:
             const dy = e.clientY - originalMouseY;
             const bubble = currentlySelectedBubble;
-            if (resizeHandle.includes('e')) {
-                bubble.style.width = `${originalWidth + dx}px`;
             }
             if (resizeHandle.includes('w')) {
                 bubble.style.width = `${originalWidth - dx}px`;
                 bubble.style.left = `${originalX + dx}px`;
             }
-            if (resizeHandle.includes('s')) {
-                bubble.style.height = `${originalHeight + dy}px`;
-            }
             if (resizeHandle.includes('n')) {
                 bubble.style.height = `${originalHeight - dy}px`;
                 bubble.style.top = `${originalY + dy}px`;
@@ -921,8 +903,8 @@ class EnhancedComicGenerator:
                     .then(data => {
                         if (data.success) {
                             img.src = `/frames/final/${data.new_filename}?t=${new Date().getTime()}`;
-                            img.style.objectFit = 'contain'; // FIX: Show full image
-                            resetPanelTransform(); // FIX: Reset any old zoom/pan
                         } else { alert('Error replacing image: ' + data.error); }
                         img.style.opacity = '1';
                     })
@@ -939,12 +921,36 @@ class EnhancedComicGenerator:
             // function content...
         }
-        function updateImageTransform(img) {
-            // function content...
         }
         function handleZoom(event) {
-            // function content...
         }
         function resetPanelTransform() {
@@ -954,33 +960,39 @@ class EnhancedComicGenerator:
             img.dataset.translateX = 0;
             img.dataset.translateY = 0;
             document.getElementById('zoom-slider').value = 100;
-            updateImageTransform(img);
         }
         function startPan(event) {
-            // function content...
         }
         function panImage(event) {
-            // function content...
         }
         function stopPan() {
-            // function content...
         }
         function addBubbleToPanel() {
-            if (!currentlySelectedPanel) { alert("Please select a panel first."); return; }
-            const newBubble = createBubbleElement({
-                id: `new-bubble-${Date.now()}`,
-                text: 'New Text...',
-                left: '10%',
-                top: '10%'
-            });
-            currentlySelectedPanel.appendChild(newBubble);
-            initializeBubbleEvents(newBubble);
-            selectBubble(newBubble);
-            editBubbleText(newBubble);
         }
         function gotoTimestamp() {

         .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 { font-family: 'Comic Neue', cursive; position: absolute; display: flex; justify-content: center; align-items: center; width: 150px; height: 80px; min-width: 50px; 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: 14pt; 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; }
         .speech-bubble.speech { background: white; border: 2px solid #333; color: #333; border-radius: 15px; }
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
+        .speech-bubble.reaction { background: #FFD700; border: 3px solid #E53935; color: #D32F2F; font-weight: 900; text-transform: uppercase; width: 180px; height: 180px; clip-path: polygon(0% 25%, 17% 21%, 17% 0%, 31% 16%, 50% 4%, 69% 16%, 83% 0%, 83% 21%, 100% 25%, 85% 45%, 95% 62%, 82% 79%, 100% 97%, 79% 89%, 60% 98%, 46% 82%, 27% 95%, 15% 78%, 5% 62%, 15% 45%); }
         .speech-bubble.narration { background: #FAFAFA; border: 2px solid #BDBDBD; color: #424242; border-radius: 3px; }
         .speech-bubble.idea { background: linear-gradient(180deg,#FFFDD0 0%, #FFF8B5 100%); border: 2px solid #FFA500; color: #6a4b00; border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%; }
         .speech-bubble.speech::after, .speech-bubble.idea::after { content: ''; position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; }
         .color-picker-grid div { text-align: center; }
         .color-picker-grid label { font-size: 11px; }
         .color-picker-grid input[type="color"] { height: 25px; padding: 2px; }
+        .font-size-control { display: grid; grid-template-columns: 1fr auto; gap: 5px; align-items: center; }
+        #font-size-label { font-size: 11px; color: white; text-align: right; }
     </style>
 </head>
 <body>
                 <option value="'Gloria Hallelujah', cursive">Gloria</option>
                 <option value="'Lato', sans-serif">Lato</option>
             </select>
+            <div class="font-size-control">
+                <input type="range" id="font-size-slider" min="8" max="24" value="14" step="1" disabled>
+                <span id="font-size-label">14pt</span>
+            </div>
             <div class="color-picker-grid">
                 <div>
                     <label for="bubble-text-color">Text</label>
         let currentlySelectedBubble = null;
         let currentlySelectedPanel = null;
         let isPanning = false, panStartX, panStartY, panStartTranslateX, panStartTranslateY;
+        let isResizing = false, resizeHandle, originalWidth, originalHeight, originalX, originalY, originalMouseX, originalMouseY;
         function renderComic(data) {
             const container = document.getElementById('comic-pages');
             document.getElementById('bubble-fill-color').addEventListener('input', (e) => {
                 if(currentlySelectedBubble) currentlySelectedBubble.style.backgroundColor = e.target.value;
             });
+            document.getElementById('font-size-slider').addEventListener('input', (e) => {
+                if(currentlySelectedBubble) {
+                    currentlySelectedBubble.style.fontSize = e.target.value + 'pt';
+                    document.getElementById('font-size-label').textContent = e.target.value + 'pt';
+                }
+            });
             document.addEventListener('mousemove', e => { if (isPanning) panImage(e); if (draggedBubble) drag(e); if(isResizing) resizeBubble(e); });
             document.addEventListener('mouseup', e => { if (isPanning) stopPan(e); if (draggedBubble) stopDrag(e); if(isResizing) stopResize(e);});
             bubble.addEventListener('mousedown', e => { e.stopPropagation(); startDrag(e); });
             bubble.addEventListener('click', e => { e.stopPropagation(); selectBubble(bubble); });
             ['nw', 'ne', 'sw', 'se'].forEach(dir => {
                 const handle = document.createElement('div');
                 handle.className = `resize-handle ${dir}`;
         }
         function applyBubbleType(bubble, type) {
+            // function content...
         }
         function changeBubbleType(type) {
         }
         function rotateBubbleTail() {
+            // function content...
         }
         function selectPanel(panel) {
         function selectBubble(bubble) {
             if (currentlySelectedBubble) currentlySelectedBubble.classList.remove('selected');
             currentlySelectedBubble = bubble;
+            const bubbleControls = ['bubble-text-color', 'bubble-fill-color', 'bubble-type-select', 'font-select', 'font-size-slider'];
             if (currentlySelectedBubble) {
                 currentlySelectedBubble.classList.add('selected');
                 currentlySelectedPanel = null;
                 const styles = window.getComputedStyle(currentlySelectedBubble);
+                document.getElementById('bubble-text-color').value = rgbToHex(styles.color);
+                document.getElementById('bubble-fill-color').value = rgbToHex(styles.backgroundColor);
+                document.getElementById('bubble-type-select').value = currentlySelectedBubble.dataset.type || 'speech';
+                document.getElementById('font-select').value = styles.fontFamily.split(',')[0].replace(/"/g, "").replace(/'/g, "").trim();
+                const fontSize = parseInt(styles.fontSize, 10);
+                document.getElementById('font-size-slider').value = fontSize;
+                document.getElementById('font-size-label').textContent = fontSize + 'pt';
                 document.getElementById('zoom-slider').disabled = true;
+                bubbleControls.forEach(id => document.getElementById(id).disabled = false);
             } else {
+                bubbleControls.forEach(id => document.getElementById(id).disabled = true);
             }
         }
             currentlyEditing = bubble;
             const textSpan = bubble.querySelector('.bubble-text');
             const textarea = document.createElement('textarea');
             const originalHeight = bubble.style.height || `${bubble.offsetHeight}px`;
             bubble.style.height = originalHeight;
                 textSpan.textContent = textarea.value;
                 bubble.removeChild(textarea);
                 textSpan.style.display = '';
                 bubble.style.height = originalHeight;
                 setTimeout(() => { bubble.style.height = 'auto'; }, 0);
                 currentlyEditing = null;
         }
         function startDrag(e) {
+            // function content...
         }
         function drag(e) {
+            // function content...
         }
         function stopDrag() { draggedBubble = null; }
                 selectBubble(null);
             }
         }
         function startResize(e, dir) {
             e.preventDefault();
             e.stopPropagation();
             const dy = e.clientY - originalMouseY;
             const bubble = currentlySelectedBubble;
+            if (bubble.classList.contains('reaction')) {
+                const scaleX = (originalWidth + dx) / originalWidth;
+                const scaleY = (originalHeight + dy) / originalHeight;
+                bubble.style.transform = `scale(${Math.max(scaleX, scaleY)})`;
+                return;
             }
+            if (resizeHandle.includes('e')) bubble.style.width = `${originalWidth + dx}px`;
             if (resizeHandle.includes('w')) {
                 bubble.style.width = `${originalWidth - dx}px`;
                 bubble.style.left = `${originalX + dx}px`;
             }
+            if (resizeHandle.includes('s')) bubble.style.height = `${originalHeight + dy}px`;
             if (resizeHandle.includes('n')) {
                 bubble.style.height = `${originalHeight - dy}px`;
                 bubble.style.top = `${originalY + dy}px`;
                     .then(data => {
                         if (data.success) {
                             img.src = `/frames/final/${data.new_filename}?t=${new Date().getTime()}`;
+                            img.style.objectFit = 'contain';
+                            resetPanelTransform();
                         } else { alert('Error replacing image: ' + data.error); }
                         img.style.opacity = '1';
                     })
             // function content...
         }
+        function updateImageTransform(img, translateX, translateY) {
+            const zoom = (img.dataset.zoom || 100) / 100;
+            const panel = img.parentElement;
+            const panelWidth = panel.clientWidth;
+            const panelHeight = panel.clientHeight;
+            const imgWidth = img.naturalWidth * (img.clientHeight / img.naturalHeight);
+            const imgHeight = img.clientHeight;
+            const zoomedWidth = imgWidth * zoom;
+            const zoomedHeight = imgHeight * zoom;
+            const maxTranslateX = Math.max(0, (zoomedWidth - panelWidth) / 2);
+            const maxTranslateY = Math.max(0, (zoomedHeight - panelHeight) / 2);
+            const clampedX = Math.max(-maxTranslateX, Math.min(maxTranslateX, translateX));
+            const clampedY = Math.max(-maxTranslateY, Math.min(maxTranslateY, translateY));
+            img.dataset.translateX = clampedX;
+            img.dataset.translateY = clampedY;
+            img.style.transform = `translateX(${clampedX}px) translateY(${clampedY}px) scale(${zoom})`;
+            img.classList.toggle('pannable', zoom > 1);
         }
         function handleZoom(event) {
+            if (!currentlySelectedPanel) return;
+            const img = currentlySelectedPanel.querySelector('img');
+            img.dataset.zoom = event.target.value;
+            updateImageTransform(img, parseFloat(img.dataset.translateX || 0), parseFloat(img.dataset.translateY || 0));
         }
         function resetPanelTransform() {
             img.dataset.translateX = 0;
             img.dataset.translateY = 0;
             document.getElementById('zoom-slider').value = 100;
+            updateImageTransform(img, 0, 0);
         }
         function startPan(event) {
+            if (event.button !== 0) return;
+            const img = event.target;
+            const zoom = parseFloat(img.dataset.zoom || 100);
+            if (zoom <= 100) return;
+            event.preventDefault();
+            isPanning = true;
+            img.classList.add('panning');
+            panStartX = event.clientX;
+            panStartY = event.clientY;
+            panStartTranslateX = parseFloat(img.dataset.translateX || 0);
+            panStartTranslateY = parseFloat(img.dataset.translateY || 0);
         }
         function panImage(event) {
+            if (!isPanning || !currentlySelectedPanel) return;
+            const img = currentlySelectedPanel.querySelector('img');
+            const newTranslateX = panStartTranslateX + (event.clientX - panStartX);
+            const newTranslateY = panStartTranslateY + (event.clientY - panStartY);
+            updateImageTransform(img, newTranslateX, newTranslateY);
         }
         function stopPan() {
+            if (!isPanning) return;
+            isPanning = false;
+            currentlySelectedPanel?.querySelector('img')?.classList.remove('panning');
         }
         function addBubbleToPanel() {
+            // function content...
         }
         function gotoTimestamp() {