Create index2.html

static/index2.html

@@ -0,0 +1,79 @@
+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;
+    }
+
+    // Check if the file size is above 1500 KB
+    if (fileInput.files[0].size > 1500 * 1024) {
+        // Display loading spinner and estimated time
+        const loadingSpinner = document.getElementById('loadingSpinner');
+        loadingSpinner.style.display = 'block';
+        const estimatedTime = document.getElementById('estimatedTime');
+        estimatedTime.style.display = 'block';
+
+        // Hide loading spinner and estimated time after 30 seconds
+        setTimeout(() => {
+            loadingSpinner.style.display = 'none';
+            estimatedTime.style.display = 'none';
+
+            // Display uploaded image after 30 seconds
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                const resultContainer = document.getElementById('resultContainer');
+                const uploadedImage = document.createElement('img');
+                uploadedImage.src = e.target.result;
+                uploadedImage.style.maxWidth = '100%'; // Adjust this value as needed
+                uploadedImage.style.maxHeight = '100%'; // Adjust this value as needed
+                resultContainer.innerHTML = ''; // Clear previous content
+                resultContainer.appendChild(uploadedImage);
+            };
+            reader.readAsDataURL(fileInput.files[0]);
+        }, 30000);
+
+        return;
+    }
+
+    // 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('https://ashrafb-furdockgr1.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>`;
+    }
+}