VTc1_dockfast

Running

App Files Files Community

Ashrafb commited on Mar 8, 2024

Commit

b8b172f

verified ·

1 Parent(s): 814da2f

Update AB/index.html

Browse files

Files changed (1) hide show

AB/index.html +58 -92

AB/index.html CHANGED Viewed

@@ -219,30 +219,32 @@ 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>
-    <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();
@@ -255,80 +257,44 @@ h1 {
             reader.readAsDataURL(file);
         }
-         // Function to display the processed image
-        function displayResultImage(url) {
-            const resultContainer = document.getElementById('resultContainer');
-            // Create an image element
-            const img = document.createElement('img');
-            // Set the source attribute to the processed image URL
-            img.src = url;
-            // Append the image element to the result container
-            resultContainer.appendChild(img);
-        }
         async function uploadFile() {
             const image_fileInput = document.getElementById('image_file');
-           const resultContainer = document.getElementById('resultContainer');
-  // Check if both source and destination file inputs are empty
-    if (!image_file.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('image_file', image_file.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();
-    const url = URL.createObjectURL(blob); // Retrieve the URL of the processed image
-    displayResultImage(url); // Pass the URL to the displayResultImage function
-} 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>

     </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();
             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>