Update static/index.html

static/index.html

@@ -316,68 +316,145 @@ input[type="number"]#scale:focus {
         <button type="button" onclick="uploadImage()">Enhance Image</button>
     </form>
 
-    <div id="resultImage">
-        <div id="estimatedTime" style="display: none;">Estimated time: 90s</div>
-        <div id="loadingSpinner" style="display: none;"></div>
-        <div id="resultContainer"></div>
-    </div>
+ <div id="resultImage">
+    <div id="estimatedTime" style="display: none;">Estimated time: 90s</div>
+    <div id="loadingSpinner" style="display: none;"></div>
+    <div id="resultContainer"></div>
+    
+</div>
+<button id="downloadButton" style="display: block ;" onclick="downloadResultImage()">Download </button>
 
     <script>
-        function previewImage(event) {
-            const file = event.target.files[0];
-            const imagePreview = document.getElementById('image-preview');
-            imagePreview.innerHTML = `<img src="${URL.createObjectURL(file)}" alt="Uploaded Image" style="max-width: 300px; max-height: 300px;">`;
-        }
+function previewImage(event) {
+    const file = event.target.files[0];
+    const imagePreview = document.getElementById('image-preview');
+    const uploadButton = document.querySelector('button');
+
+    // Check if file size is larger than 500 MB (500 * 1024 * 1024 bytes)
+    if (file.size > 1000 * 1024) {
+        imagePreview.innerHTML = `<p style="color: white;">Please upload an image smaller than 1000 KB.</p>`;
+        uploadButton.disabled = true; // Disable the button
+        return;
+    }
+    
+    // If file size is within limit, enable the button and display image preview
+    imagePreview.innerHTML = `<img src="${URL.createObjectURL(file)}" alt="Uploaded Image" style="max-width: 300px; max-height: 300px;">`;
+    uploadButton.disabled = false; // Enable the button
+}
+
+
 
         async function uploadImage() {
-            const fileInput = document.getElementById('image');
-            const versionInput = document.getElementById('version');
-            const scaleInput = document.getElementById('scale');
-
-            // Check if the file input is empty
-            if (!fileInput.files[0]) {
-                document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Please upload an image.</p>`;
-                return;
-            }
+    const fileInput = document.getElementById('image');
+    const versionInput = document.getElementById('version');
+    const scaleInput = document.getElementById('scale');
+
+    // Check if the file input is empty
+    if (!fileInput.files[0]) {
+        document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Please upload an image.</p>`;
+        return;
+    }
+
+    // Clear the result container
+    document.getElementById('resultContainer').innerHTML = "";
+
+    // Compress the image to 500 KB before sending
+    const compressedFile = await compressImage(fileInput.files[0]);
+
+    const formData = new FormData();
+    formData.append('file', compressedFile);
+    formData.append('version', versionInput.value);
+    formData.append('scale', scaleInput.value);
+
+    // Display loading spinner
+    const loadingSpinner = document.getElementById('loadingSpinner');
+    loadingSpinner.style.display = 'block';
+    const estimatedTime = document.getElementById('estimatedTime');
+    estimatedTime.style.display = 'block';
+    try {
+        const response = await fetch('https://ashrafb-furdockgrtest.hf.space/upload/', {
+            method: 'POST',
+            body: formData
+        });
+
+        // Hide loading spinner
+        loadingSpinner.style.display = 'none';
+        estimatedTime.style.display = 'none';
+        if (response.ok) {
+            const resultContainer = document.getElementById('resultContainer');
+            const data = await response.json();
+            const sketchImage = document.createElement('img');
+            sketchImage.style.maxWidth = '100%'; // Adjust this value as needed
+            sketchImage.style.maxHeight = '100%'; // Adjust this value as needed
+            sketchImage.src = data.sketch_image_base64;
+            resultContainer.appendChild(sketchImage);
+        } else {
+            document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Oops! Something went wrong. Please try again later.</p>`;
+        }
+    } catch (error) {
+        console.error('Error:', error);
+        document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Oops! Something went wrong. Please try again later.</p>`;
+    }
+}
 
-            // Clear the result container
-            document.getElementById('resultContainer').innerHTML = "";
-            
-            const formData = new FormData();
-            formData.append('file', fileInput.files[0]);
-            formData.append('version', versionInput.value);
-            formData.append('scale', scaleInput.value);
-            
-            // Display loading spinner
-            const loadingSpinner = document.getElementById('loadingSpinner');
-            loadingSpinner.style.display = 'block';
-            const estimatedTime = document.getElementById('estimatedTime');
-            estimatedTime.style.display = 'block';
-            try {
-                const response = await fetch('/upload/', {
-                    method: 'POST',
-                    body: formData
-                });
-
-                // Hide loading spinner
-                loadingSpinner.style.display = 'none';
-                estimatedTime.style.display = 'none';
-                if (response.ok) {
-                    const resultContainer = document.getElementById('resultContainer');
-                    const data = await response.json();
-                    const sketchImage = document.createElement('img');
-                    sketchImage.style.maxWidth = '100%'; // Adjust this value as needed
-                    sketchImage.style.maxHeight = '100%'; // Adjust this value as needed
-                    sketchImage.src = data.sketch_image_base64;
-                    resultContainer.appendChild(sketchImage);
+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 = 800;
+                const maxHeight = 600;
+                let width = img.width;
+                let height = img.height;
+
+                if (width > height) {
+                    if (width > maxWidth) {
+                        height *= maxWidth / width;
+                        width = maxWidth;
+                    }
                 } else {
-                    document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Oops! Something went wrong. Please try again later.</p>`;
+                    if (height > maxHeight) {
+                        width *= maxHeight / height;
+                        height = maxHeight;
+                    }
                 }
-            } catch (error) {
-                console.error('Error:', error);
-                document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Oops! Something went wrong. Please try again later.</p>`;
+
+                // 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 downloadResultImage() {
+    const resultImage = document.getElementById('resultContainer').querySelector('img');
+    const link = document.createElement('a');
+    link.href = resultImage.src;
+    link.download = 'result_image.png';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}
+
     </script>
 </body>
 </html>