Update templates/index.html

templates/index.html

@@ -225,95 +225,83 @@
     {% else %}
     {% endif %}
 
-    <script>
-        document.addEventListener("DOMContentLoaded", () => {
-            const slider = document.getElementById("alphaSlider");
-            const morphedImg = document.getElementById("morphed");
-            const alphaDisplay = document.getElementById("alphaValue");
-        
-            slider.addEventListener("input", () => {
-                let alpha = parseFloat(slider.value);
-                alphaDisplay.textContent = alpha.toFixed(2);
-        
-                fetch("/morph_ajax", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ alpha: alpha })
-                })
-                .then(res => res.json())
-                .then(data => {
-                    if (data.filename) {
-                        morphedImg.src = `/tmp/${data.filename}?t=${data.ts}`;
-                    }
-                })
-                .catch(err => console.error(err));
-            });
-        });
-        </script>
+    
         
 
-    <script>
-        const imgEl = document.getElementById('morphed');
-        imgEl.src = `/tmp/${data.filename}?t=${data.ts}`;
-        const generate100Button = document.querySelector('button[value="generate100"]');
-        const loadingDiv = document.getElementById('loading');
-        generate100Button.addEventListener('click', function() {
-            loadingDiv.style.display = 'block';
-            console.log('Generate 100 clicked');
-        });
-        const batchImages = document.querySelectorAll('.row-cols-md-5 img');
-        if (batchImages.length === 0) {
-            loadingDiv.style.display = 'none';
-            console.log('No batch images to load');
-        } else {
-            let loadedCount = 0;
-            batchImages.forEach((img, index) => {
-                img.addEventListener('load', () => {
-                    loadedCount++;
-                    console.log(`Image ${index} loaded`);
-                    if (loadedCount === batchImages.length) {
-                        loadingDiv.style.display = 'none';
-                        console.log('All batch images loaded');
-                    }
-                });
-                img.addEventListener('error', () => {
-                    loadedCount++;
-                    console.log(`Image ${index} failed to load: ${img.src}`);
-                    img.style.display = 'none';
-                    if (loadedCount === batchImages.length) {
-                        loadingDiv.style.display = 'none';
-                        console.log('All batch images processed (some failed)');
-                    }
-                });
-            });
-
+<script>
+document.addEventListener("DOMContentLoaded", () => {
+    const slider = document.getElementById("alphaSlider");
+    const morphedImg = document.getElementById("morphed");
+    const alphaDisplay = document.getElementById("alphaValue");
+    const morphBtn = document.getElementById("morph-btn");
 
-        }
-    </script>
+    // Slider: live morphing
+    slider.addEventListener("input", () => {
+        let alpha = parseFloat(slider.value);
+        alphaDisplay.textContent = alpha.toFixed(2);
 
+        fetch("/morph_ajax", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ alpha: alpha })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if (data.filename) {
+                morphedImg.src = `/tmp/${data.filename}?t=${data.ts}`;
+            }
+        })
+        .catch(err => console.error("Morph fetch error:", err));
+    });
 
-<script>
-        document.getElementById("morph-btn").addEventListener("click", function () {
-        const slider = document.getElementById("alphaSlider");  // correct id
+    // Reset morph to α=0.5
+    morphBtn.addEventListener("click", () => {
         slider.value = 0.5;
-        document.getElementById("alphaValue").textContent = "0.50";  // correct id
+        alphaDisplay.textContent = "0.50";
 
         fetch("/morph_ajax", {
             method: "POST",
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify({ alpha: 0.5 })
         })
-        .then(response => response.json())
+        .then(res => res.json())
         .then(data => {
             if (data.filename) {
-                const morphedImg = document.getElementById("morphed");
                 morphedImg.src = `/tmp/${data.filename}?t=${data.ts}`;
             }
         })
         .catch(err => console.error("Morph reset error:", err));
     });
 
-    </script>
+    // Batch generation spinner
+    const generate100Button = document.querySelector('button[value="generate100"]');
+    const loadingDiv = document.getElementById("loading");
+
+    generate100Button.addEventListener("click", () => {
+        loadingDiv.style.display = "block";
+        console.log("Generate 100 clicked");
+
+        let loadedCount = 0;
+        const batchImages = document.querySelectorAll('.row-cols-md-5 img');
+        batchImages.forEach((img, index) => {
+            img.addEventListener("load", () => {
+                loadedCount++;
+                if (loadedCount === batchImages.length) {
+                    loadingDiv.style.display = "none";
+                }
+            });
+            img.addEventListener("error", () => {
+                loadedCount++;
+                img.style.display = "none";
+                if (loadedCount === batchImages.length) {
+                    loadingDiv.style.display = "none";
+                }
+            });
+        });
+    });
+});
+</script>
+
     
 
 </div>