Update templates/index.html

templates/index.html

@@ -6,7 +6,6 @@
 <title>🖼️ Image Enhancement & Damage Repair</title>
 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet" />
 <style>
-  /* (Include your styling from before or similar) */
   body {
     font-family: 'Poppins', sans-serif;
     background: #f5f7fa;
@@ -18,7 +17,6 @@
     flex-direction: column;
     align-items: center;
   }
-  /* Simplified styles for brevity */
   form {
     background: white;
     padding: 25px 30px;
@@ -214,45 +212,29 @@
       submitBtn.disabled = true;
 
       try {
-        const response = await fetch('/', {
+        const response = await fetch('/upload', {
           method: 'POST',
           body: formData
         });
 
-        if (!response.ok) {
-          alert('Upload failed. Please try again.');
-          setControlsEnabled(false);
-          submitBtn.textContent = 'Upload & Process';
-          return;
-        }
-
-        const text = await response.text();
-
-        // Parse returned HTML to extract URLs from img src and anchors
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(text, 'text/html');
-
-        const origSrc = doc.getElementById('originalImg')?.src;
-        const maskSrc = doc.getElementById('maskImg')?.src;
-        const repairedSrc = doc.getElementById('repairedImg')?.src;
-
-        if (!origSrc || !maskSrc || !repairedSrc) {
-          alert('Failed to get processed images from server response.');
+        const json = await response.json();
+        if (json.error) {
+          alert('Upload error: ' + json.error);
           setControlsEnabled(false);
           submitBtn.textContent = 'Upload & Process';
           return;
         }
 
-        currentFilename = origSrc.split('/').pop();
+        currentFilename = json.original_image.split('/').pop();
 
         // Show images and enable controls
-        originalImg.src = origSrc;
-        maskImg.src = maskSrc;
-        repairedImg.src = repairedSrc;
+        originalImg.src = json.original_image;
+        maskImg.src = json.mask_image;
+        repairedImg.src = json.repaired_image;
 
-        downloadOriginal.href = origSrc;
-        downloadMask.href = maskSrc;
-        downloadRepaired.href = repairedSrc;
+        downloadOriginal.href = json.original_image;
+        downloadMask.href = json.mask_image;
+        downloadRepaired.href = json.repaired_image;
 
         imagesContainer.style.display = 'grid';
         setControlsEnabled(true);
@@ -290,46 +272,60 @@
           body: JSON.stringify(data)
         });
 
-        if (!response.ok) {
-          const err = await response.json();
-          alert('Processing error: ' + (err.error || 'Unknown error'));
+        const json = await response.json();
+
+        if (json.error) {
+          alert('Processing error: ' + json.error);
           submitBtn.disabled = false;
           submitBtn.textContent = 'Upload & Process';
           return;
         }
 
-        const json = await response.json();
-
         // Cache bust URLs to force reload
         function cacheBust(url) {
           const sep = url.includes('?') ? '&' : '?';
-          return url + sep + 'cb=' + new Date().getTime();
+          return url + sep + 't=' + new Date().getTime();
         }
 
         maskImg.src = cacheBust(json.mask_image);
         repairedImg.src = cacheBust(json.repaired_image);
-        downloadMask.href = maskImg.src;
-        downloadRepaired.href = repairedImg.src;
+
+        downloadMask.href = json.mask_image;
+        downloadRepaired.href = json.repaired_image;
+
+        submitBtn.disabled = false;
+        submitBtn.textContent = 'Upload & Process';
 
       } catch (e) {
-        alert('Network or server error.');
-      } finally {
+        alert('Error during processing: ' + e.message);
         submitBtn.disabled = false;
         submitBtn.textContent = 'Upload & Process';
       }
     }
 
-    [thresholdInput, gammaInput, denoiseSelect, stylizeCheckbox].forEach(el => {
-      el.addEventListener('change', updateImages);
-      if (el.type === 'range') {
-        el.addEventListener('input', updateImages);
-      }
-    });
+    // Hook parameter inputs to updateImages with debounce
+    function debounce(func, wait) {
+      let timeout;
+      return function(...args) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(this, args), wait);
+      };
+    }
 
-    // Prevent form submit (handled by file input change)
-    uploadForm.addEventListener('submit', (e) => {
+    const debouncedUpdate = debounce(updateImages, 700);
+
+    thresholdInput.addEventListener('input', debouncedUpdate);
+    gammaInput.addEventListener('input', debouncedUpdate);
+    denoiseSelect.addEventListener('change', debouncedUpdate);
+    stylizeCheckbox.addEventListener('change', debouncedUpdate);
+
+    // Form submit fallback (for accessibility)
+    uploadForm.addEventListener('submit', e => {
       e.preventDefault();
+      if (!fileInput.files.length) return alert('Please select a file first.');
+      updateImages();
     });
+
   })();
 </script>
 </body>