Spaces:

Ashrafb
/

VT3

Running

App Files Files Community

Ashrafb commited on Mar 8, 2024

Commit

e89342c

verified ·

1 Parent(s): 61b6cd2

Update AB/index.html

Browse files

Files changed (1) hide show

AB/index.html +91 -58

AB/index.html CHANGED Viewed

@@ -40,7 +40,7 @@ button[type="button"]:hover {
   /* Style for upload buttons */
 input[type="file"] {
-    display: block ; /* Hide the default file input */
 }
 .uploadButton {
@@ -219,32 +219,30 @@ h1 {
     </style>
 </head>
 <body>
-        <h1>Aiconvert.online</h1>
-    <form id="uploadForm" action="/upload/" method="post" enctype="multipart/form-data">
-        <label for="sourceFile" class="uploadLabel">Choose image</label>
-        <input type="file" id="image_file" name="image_file" accept="image/*" required onchange="previewImage(event, 'sourceImage')"><br>
-        <div id="sourceImageContainer">
-            <img id="sourceImage">
-        </div><br>
-        <label for="top">Top:</label>
-        <input type="number" id="top" name="top" required><br>
-        <label for="bottom">Bottom:</label>
-        <input type="number" id="bottom" name="bottom" required><br>
-        <label for="left">Left:</label>
-        <input type="number" id="left" name="left" required><br>
-        <label for="right">Right:</label>
-        <input type="number" id="right" name="right" required><br>
-        <button type="button" onclick="uploadFile()">Generate</button>
     </form>
     <div id="resultImage">
-        <!-- Add the result image container and loading spinner here -->
     </div>
     <script>
-        function previewImage(event, imageId) {
             const fileInput = event.target;
             const file = fileInput.files[0];
             const reader = new FileReader();
@@ -257,44 +255,79 @@ h1 {
             reader.readAsDataURL(file);
         }
         async function uploadFile() {
-            const image_fileInput = document.getElementById('image_file');
-            const top = document.getElementById('top').value;
-            const bottom = document.getElementById('bottom').value;
-            const left = document.getElementById('left').value;
-            const right = document.getElementById('right').value;
-            const formData = new FormData();
-            // Append the uploaded image and other form data
-            formData.append('image_file', image_fileInput.files[0]);
-            formData.append('top', top);
-            formData.append('bottom', bottom);
-            formData.append('left', left);
-            formData.append('right', right);
-            try {
-                const response = await fetch('/upload/', {
-                    method: 'POST',
-                    body: formData
-                });
-                if (response.ok) {
-                    // If successful response, display the result image
-                    const resultImageContainer = document.getElementById('resultImage');
-                    const resultData = await response.json();
-                    const resultImage = new Image();
-                    resultImage.src = 'data:image/jpeg;base64,' + resultData.result_image;
-                    resultImageContainer.innerHTML = '';
-                    resultImageContainer.appendChild(resultImage);
-                } else {
-                    // If server error, display the error message
-                    const errorMessage = await response.text();
-                    console.error('Error:', errorMessage);
-                }
-            } catch (error) {
-                console.error('Error:', error);
-            }
         }
     </script>
 </body>
 </html>

   /* Style for upload buttons */
 input[type="file"] {
+    display: none; /* Hide the default file input */
 }
 .uploadButton {
     </style>
 </head>
 <body>
+    <h1>Aiconvert.online </h1>
+      <form id="uploadForm" action="/upload/" method="post" enctype="multipart/form-data">
+       <label for="sourceFile" class="uploadLabel">Choose image </label>
+<input type="file" id="sourceFile" name="source_file" accept="image/*" required onchange="previewImage(event, 'sourceImage')"><br>
+<div id="sourceImageContainer">
+    <img id="sourceImage">
+</div><br>
+    <button type="button" onclick="uploadFile()">Generate </button>  <!-- Changed to type="button" and added onclick handler -->
     </form>
     <div id="resultImage">
+    	<div id="estimatedTime" style="display: none;">Estimated time: 120s</div>
+   <div id="loadingSpinner" style="display: none;">
+             <!-- Replace this with your loading spinner HTML/CSS -->
+        </div>
+        <div id="resultContainer">
+    <a id="download-link" href="#" download="colorized_image.jpg" style="display:none;">Download Colorized Image</a>
+    </div>
     </div>
     <script>
+    	 function previewImage(event, imageId) {
             const fileInput = event.target;
             const file = fileInput.files[0];
             const reader = new FileReader();
             reader.readAsDataURL(file);
         }
+         function displayColorizedImage(blob) {
+            const url = URL.createObjectURL(blob);
+          const resultContainer = document.getElementById('resultContainer');
+            resultContainer.innerHTML = `<img src="${url}" alt="Colorized Image" width="400">`;
+            const downloadLink = document.getElementById('download-link');
+            downloadLink.href = url;
+            downloadLink.style.display = 'block';
+        }
         async function uploadFile() {
+            const sourceFileInput = document.getElementById('sourceFile');
+           const resultContainer = document.getElementById('resultContainer');
+  // Check if both source and destination file inputs are empty
+    if (!sourceFileInput.files[0] ) {
+        // Update the result container with the error message
+        resultContainer.innerHTML = "<p>Please upload an image.</p>";
+        return;
+    }
+    // Clear the result container if both images are uploaded
+    resultContainer.innerHTML = "";
+          const formData = new FormData();
+            const fileInput = document.querySelector('input[type="file"]');
+            formData.append('file', fileInput.files[0]);
+      try {
+        // Display loading spinner
+        const loadingSpinner = document.getElementById('loadingSpinner');
+        loadingSpinner.style.display = 'block';
+          const estimatedTime = document.getElementById('estimatedTime');
+            estimatedTime.style.display = 'block';
+          const response = await fetch('/upload/', {
+                method: 'POST',
+                body: formData
+            });
+ if (response.ok) {
+            // If successful response, display the result image
+              const blob = await response.blob();
+            displayColorizedImage(blob);
+        } else {
+            // If server error, display the error message
+            const errorMessage = await response.text();
+            resultContainer.innerHTML = `<p>Oops! Something went wrong. Please try again later. </p>`;
         }
+             // Hide loading spinner after result (or error message) is displayed
+        loadingSpinner.style.display = 'none';
+        estimatedTime.style.display = 'none';
+    } catch (error) {
+        console.error('Error swapping faces:', error);
+        // Hide loading spinner if there's an error
+        const loadingSpinner = document.getElementById('loadingSpinner');
+        loadingSpinner.style.display = 'none';
+        estimatedTime.style.display = 'none';
+    }
+}
     </script>
 </body>
 </html>