Update static/index.html

static/index.html

@@ -31,182 +31,181 @@
       
 
   <script>
+    
     document.addEventListener("DOMContentLoaded", function() {
-    const form = document.getElementById("remakeai-form");
-    const fileInput = document.getElementById('file');
-    const fileNameSpan = document.getElementById('file-name');
-    const progressBar = document.getElementById('progress-bar');
-    const progressContainer = document.querySelector('.progress-container');
-    const resultDiv = document.querySelector(".result");
-
-    let simulatedProgressInterval;
-    let simulatedProgress = 0;
-
-    fileInput.addEventListener('change', function() {
-        fileNameSpan.textContent = this.files[0].name;
-    });
+        const form = document.getElementById("remakeai-form");
+        const fileInput = document.getElementById('file');
+        const fileNameSpan = document.getElementById('file-name');
+        const progressBar = document.getElementById('progress-bar');
+        const progressContainer = document.querySelector('.progress-container');
+        const resultDiv = document.querySelector(".result");
+
+        let simulatedProgressInterval;
+        let simulatedProgress = 0;
+
+        fileInput.addEventListener('change', function() {
+            fileNameSpan.textContent = this.files[0].name;
+        });
 
-    form.addEventListener("submit", async function(event) {
-        event.preventDefault();
+        form.addEventListener("submit", async function(event) {
+            event.preventDefault();
 
-        const file = fileInput.files[0];
-        const compressedFile = await compressImage(file);
+            const file = fileInput.files[0];
+            const compressedFile = await compressImage(file);
 
-        const formData = new FormData();
-        formData.append('file', compressedFile, file.name);
-        
-        // Reset and show the progress bar
-        progressBar.style.width = '0%';
-        progressContainer.style.display = 'block';
-        simulatedProgress = 0;
-
-        // Clear previous result
-        resultDiv.innerHTML = '';
-
-        const xhr = new XMLHttpRequest();
-        xhr.open("POST", "/upload/", true);
-        xhr.responseType = 'blob'; // Ensure the response is treated as a Blob
-
-        xhr.upload.onprogress = function(event) {
-            if (event.lengthComputable) {
-                const percentComplete = (event.loaded / event.total) * 100;
-                updateProgressBar(percentComplete);
-            }
-        };
-
-        xhr.onloadstart = function() {
-            // Start simulating progress during backend processing
-            simulateBackendProcessingProgress();
-        };
-
-        xhr.onload = function() {
-            clearInterval(simulatedProgressInterval); // Stop simulation
-            if (xhr.status === 200) {
-                const resultBlob = xhr.response;
-                const resultURL = URL.createObjectURL(resultBlob);
-
-                const originalURL = URL.createObjectURL(file);
-
-                // Debugging: Check the URLs and Blob objects
-                console.log("Original URL:", originalURL);
-                console.log("Result URL:", resultURL);
-                console.log("Result Blob:", resultBlob);
-
-                resultDiv.innerHTML = `
-                    <h2>Result</h2>
-                    <div class="result-images">
-                        <img src="${originalURL}" alt="Original Image" class="result-image">
-                        <span class="arrow">↓</span>
-                        <img src="${resultURL}" alt="Result Image" class="result-image">
-                    </div>
-                `;
-
-                // Create and append the download button
-                const downloadButton = document.createElement('a');
-                downloadButton.href = resultURL;
-                downloadButton.download = 'result.jpg';
-                downloadButton.textContent = 'Download Result';
-                downloadButton.className = 'btn-download';
-                resultDiv.appendChild(downloadButton);
-
-                updateProgressBar(100);
-            } else {
-                resultDiv.innerHTML = `<p class="error-message">Error: ${xhr.statusText}</p>`;
-                updateProgressBar(0);
-            }
+            const formData = new FormData();
+            formData.append('file', compressedFile, file.name);
+            
+            // Reset and show the progress bar
+            progressBar.style.width = '0%';
+            progressContainer.style.display = 'block';
+            simulatedProgress = 0;
+
+            // Clear previous result
+            resultDiv.innerHTML = '';
+
+            const xhr = new XMLHttpRequest();
+            xhr.open("POST", "/upload/", true);
+            xhr.responseType = 'json'; // Ensure the response is treated as JSON
+
+            xhr.upload.onprogress = function(event) {
+                if (event.lengthComputable) {
+                    const percentComplete = (event.loaded / event.total) * 100;
+                    updateProgressBar(percentComplete);
+                }
+            };
 
-            setTimeout(() => {
-                progressContainer.style.display = 'none';
-            }, 1000);
-        };
+            xhr.onloadstart = function() {
+                // Start simulating progress during backend processing
+                simulateBackendProcessingProgress();
+            };
 
-        xhr.onerror = function() {
-            clearInterval(simulatedProgressInterval); // Stop simulation
-            resultDiv.innerHTML = `<p class="error-message">Error: Network Error</p>`;
-            updateProgressBar(0);
+            xhr.onload = function() {
+                clearInterval(simulatedProgressInterval); // Stop simulation
+                if (xhr.status === 200) {
+                    const response = xhr.response;
 
-            setTimeout(() => {
-                progressContainer.style.display = 'none';
-            }, 1000);
-        };
+                    if (response.error) {
+                        resultDiv.innerHTML = `<p class="error-message">${response.error}</p>`;
+                    } else {
+                        const originalURL = URL.createObjectURL(file);
+                        const sketchImageBase64 = response.sketch_image_base64;
+
+                        resultDiv.innerHTML = `
+                            <h2>Result</h2>
+                            <div class="result-images">
+                                <img src="${originalURL}" alt="Original Image" class="result-image">
+                                <span class="arrow">↓</span>
+                                <img src="${sketchImageBase64}" alt="Sketch Image" class="result-image">
+                            </div>
+                        `;
+
+                        // Create and append the download button
+                        const downloadButton = document.createElement('a');
+                        downloadButton.href = sketchImageBase64;
+                        downloadButton.download = 'result.jpg';
+                        downloadButton.textContent = 'Download Result';
+                        downloadButton.className = 'btn-download';
+                        resultDiv.appendChild(downloadButton);
+
+                        updateProgressBar(100);
+                    }
+                } else {
+                    resultDiv.innerHTML = `<p class="error-message">Error: ${xhr.statusText}</p>`;
+                    updateProgressBar(0);
+                }
 
-        xhr.send(formData);
-    });
+                setTimeout(() => {
+                    progressContainer.style.display = 'none';
+                }, 1000);
+            };
 
-    async function compressImage(file) {
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onload = function(event) {
-                const img = new Image();
-                img.src = event.target.result;
-                img.onload = function() {
-                    const canvas = document.createElement('canvas');
-                    const ctx = canvas.getContext('2d');
-                    // Calculate the new dimensions to resize the image while maintaining aspect ratio
-                    const maxWidth = 1000;
-                    const maxHeight = 1000;
-                    let width = img.width;
-                    let height = img.height;
-                    if (width > height) {
-                        if (width > maxWidth) {
-                            height *= maxWidth / width;
-                            width = maxWidth;
-                        }
-                    } else {
-                        if (height > maxHeight) {
-                            width *= maxHeight / height;
-                            height = maxHeight;
+            xhr.onerror = function() {
+                clearInterval(simulatedProgressInterval); // Stop simulation
+                resultDiv.innerHTML = `<p class="error-message">Error: Network Error</p>`;
+                updateProgressBar(0);
+
+                setTimeout(() => {
+                    progressContainer.style.display = 'none';
+                }, 1000);
+            };
+
+            xhr.send(formData);
+        });
+
+        async function compressImage(file) {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = function(event) {
+                    const img = new Image();
+                    img.src = event.target.result;
+                    img.onload = function() {
+                        const canvas = document.createElement('canvas');
+                        const ctx = canvas.getContext('2d');
+                        // Calculate the new dimensions to resize the image while maintaining aspect ratio
+                        const maxWidth = 1000;
+                        const maxHeight = 1000;
+                        let width = img.width;
+                        let height = img.height;
+                        if (width > height) {
+                            if (width > maxWidth) {
+                                height *= maxWidth / width;
+                                width = maxWidth;
+                            }
+                        } else {
+                            if (height > maxHeight) {
+                                width *= maxHeight / height;
+                                height = maxHeight;
+                            }
                         }
+                        // Set the canvas dimensions
+                        canvas.width = width;
+                        canvas.height = height;
+                        // Draw the image on the canvas with the new dimensions
+                        ctx.drawImage(img, 0, 0, width, height);
+                        // Convert canvas content to a blob
+                        canvas.toBlob((blob) => {
+                            resolve(blob);
+                        }, 'image/jpeg', 0.7); // Adjust quality as needed (0.7 is 70% quality)
                     }
-                    // Set the canvas dimensions
-                    canvas.width = width;
-                    canvas.height = height;
-                    // Draw the image on the canvas with the new dimensions
-                    ctx.drawImage(img, 0, 0, width, height);
-                    // Convert canvas content to a blob
-                    canvas.toBlob((blob) => {
-                        resolve(blob);
-                    }, 'image/jpeg', 0.7); // Adjust quality as needed (0.7 is 70% quality)
                 }
-            }
-            // Read the file as data URL
-            reader.readAsDataURL(file);
-        });
-    }
-
-    function updateProgressBar(percentComplete) {
-        progressBar.style.width = percentComplete + '%';
-        updateProgressBarColor(percentComplete);
-    }
-
-    function updateProgressBarColor(percentComplete) {
-        const startColor = "#ff0000"; // Red
-        const endColor = "#0056b3"; // Blue
-        const currentColor = interpolateColor(startColor, endColor, percentComplete / 100);
-        progressBar.style.backgroundColor = currentColor;
-    }
-
-    function interpolateColor(color1, color2, factor) {
-        const result = color1.slice(1).match(/.{2}/g).map((hex, i) => {
-            return Math.round(parseInt(hex, 16) * (1 - factor) + parseInt(color2.slice(1).match(/.{2}/g)[i], 16) * factor);
-        });
-        return `#${result.map(val => val.toString(16).padStart(2, '0')).join('')}`;
-    }
-
-    function simulateBackendProcessingProgress() {
-        simulatedProgressInterval = setInterval(() => {
-            simulatedProgress += 1; // Increment progress by 1%
-            if (simulatedProgress < 90) { // Cap the simulated progress at 90%
-                updateProgressBar(simulatedProgress);
-            } else {
-                clearInterval(simulatedProgressInterval); // Stop simulation at 90%
-            }
-        }, 200); // Update every 200ms
-    }
-});
-  </script>
-
-  
+                // Read the file as data URL
+                reader.readAsDataURL(file);
+            });
+        }
+
+        function updateProgressBar(percentComplete) {
+            progressBar.style.width = percentComplete + '%';
+            updateProgressBarColor(percentComplete);
+        }
+
+        function updateProgressBarColor(percentComplete) {
+            const startColor = "#ff0000"; // Red
+            const endColor = "#0056b3"; // Blue
+            const currentColor = interpolateColor(startColor, endColor, percentComplete / 100);
+            progressBar.style.backgroundColor = currentColor;
+        }
+
+        function interpolateColor(color1, color2, factor) {
+            const result = color1.slice(1).match(/.{2}/g).map((hex, i) => {
+                return Math.round(parseInt(hex, 16) * (1 - factor) + parseInt(color2.slice(1).match(/.{2}/g)[i], 16) * factor);
+            });
+            return `#${result.map(val => val.toString(16).padStart(2, '0')).join('')}`;
+        }
+
+        function simulateBackendProcessingProgress() {
+            simulatedProgressInterval = setInterval(() => {
+                simulatedProgress += 1; // Increment progress by 1%
+                if (simulatedProgress < 90) { // Cap the simulated progress at 90%
+                    updateProgressBar(simulatedProgress);
+                } else {
+                    clearInterval(simulatedProgressInterval); // Stop simulation at 90%
+                }
+            }, 200); // Update every 200ms
+        }
+    });
+</script>
+        
    <style>
 
    .ai-tool-container body{
@@ -376,4 +375,4 @@
     background-color: #218838;
      }
     </style>
-</div>
+</div>