Spaces:

Ashrafb
/

Bopbdocke

Paused

App Files Files Community

Ashrafb commited on Apr 11, 2024

Commit

131431b

verified ·

1 Parent(s): 6d3904b

Update static/index1.html

Browse files

Files changed (1) hide show

static/index1.html +195 -126

static/index1.html CHANGED Viewed

@@ -1,19 +1,18 @@
-<!-- index.html -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Image Enhancement</title>
     <style>
-    	body {
     background-color: #121212;
     color: #FFFFFF;
 }
 /* Dark mode for upload buttons */
-.uploadButton {
     background-color: #1E7E34;
 }
@@ -23,7 +22,7 @@
 }
 /* Dark mode for face number inputs */
-input[type="number"] {
     background-color: #333333;
     color: #FFFFFF;
     border: 1px solid #555555;
@@ -39,10 +38,19 @@ button[type="button"]:hover {
     background-color: #2E9E44;
 }
-  /* Style for upload buttons */
 input[type="file"] {
     display: none; /* Hide the default file input */
 }
 .uploadButton {
     background-color: #4CAF50;
@@ -61,7 +69,7 @@ input[type="file"] {
 }
 /* Style for file input labels */
-#uploadForm {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -75,7 +83,6 @@ input[type="file"] {
     cursor: pointer;
     display: block;
     margin: 0 auto;
 }
 .uploadLabel input[type="file"] {
@@ -83,7 +90,7 @@ input[type="file"] {
 }
 /* Style for face number inputs */
-#version #scale {
     padding: 8px;
     Width :50px;
     border: 1px solid #ccc;
@@ -102,6 +109,7 @@ label {
 form > * {
     margin-bottom: 10px;
 }
 /* Style for the swap button */
 button {
     background-image: linear-gradient(
@@ -143,6 +151,24 @@ button {
 button:hover {
     background-color: #45a049;
 }
 h1 {
     text-align: center;
@@ -152,14 +178,14 @@ h1 {
     font-size: 40px; /* Adjust the font size as needed */
 }
-        h2 {
     font-size: 24px; /* Adjust size as needed */
     font-family: 'Barlow Condensed';
     color: #FFFFFF; /* Text color */
     margin-top: 20px; /* Top margin */
     margin-bottom: 10px; /* Bottom margin */
 }
 select {
     width: 150px; /* Adjust width as needed */
     padding: 8px;
@@ -169,6 +195,9 @@ select {
     color: white; /* Text color */
     font-size: 16px;
 }
 /* Style for the scale number input */
 input[type="number"]#scale {
     padding: 8px;
@@ -195,24 +224,32 @@ input[type="number"]#scale:focus {
     color: white; /* Set text color */
 }
-        #resultImage {
-            border: 2px solid blue;
-            width: 265px;
-            height: 300px;
-            display: flex;
-            flex-direction: column;
-            overflow-y: scroll;
-            margin: auto;
-            margin-top: 30px;
-            padding-bottom: 7px;
-            gap: 14px;
-            background: linear-gradient(black , black) padding-box,
-                        linear-gradient(to right, red, blue) border-box;
-            border-radius: 20px;
-            border: 2.5px solid transparent;
-        }
-        #sourceImageContainer, #destinationImageContainer {
             border: 2px solid blue;
             width: 200px;
             height: 200px;
@@ -229,142 +266,174 @@ input[type="number"]#scale:focus {
             border: 2.5px solid transparent;
         }
-        #sourceImage, #destinationImage {
             max-width: 100%;
             height: auto;
             display: block;
             margin: auto;
         }
-        #loadingSpinner {
-            border: 3px solid rgba(255, 255, 255, 0.3);
-            border-radius: 50%;
-            border-top: 5px solid #ffffff;
-            width: 20px;
-            height: 20px;
-            animation: spin 2s linear infinite;
-            position: relative;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            display: none; /* Initially hide the loading spinner */
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-    </style>
 </head>
 <body>
     <h1>Aiconvert.online</h1>
-  <form id="uploadForm" enctype="multipart/form-data">
-    <!-- Label for the file input -->
-    <label for="image" class="uploadLabel">Choose image</label>
-    <!-- Hidden file input -->
-    <input type="file" id="image" name="file" accept="image/*" required onchange="previewImage(event, 'sourceImage')" style="display: none;">
-    <div id="sourceImageContainer">
-        <img id="sourceImage">
-    </div>
-  <br>
-        <label for="version">Select Version:</label>
-        <select id="version" name="version">
-            <option value="v1.2">M1</option>
-            <option value="v1.3">M2</option>
-            <option value="v1.4">M3</option>
-            <!-- Add more options as needed -->
-        </select>
-       <label for="scale">Scale:</label>
-<input type="number" id="scale" name="scale" min="1" value="2"><br>
-        <button type="submit">Enhance Image</button>
     </form>
-     <div id="resultImage">
-    <div id="loadingSpinner">
-        <div id="spinner"></div>
-    </div>
-    <div id="estimatedTime" style="display: none;">Estimated time: 90s</div>
-</div>
     <div id="resultContainer"></div>
 </div>
-    <!-- Placeholder for the result image -->
-<script>
-       function previewImage(event, imageId) {
-    const fileInput = event.target;
-    const file = fileInput.files[0];
-    const reader = new FileReader();
-    reader.onload = function(e) {
-        const image = document.getElementById(imageId);
-        image.src = e.target.result;
     }
-    reader.readAsDataURL(file);
-}
-// Function to handle form submission
-async function handleSubmit(event) {
-    event.preventDefault();
-    const formData = new FormData(this);
-    // Show the loading spinner
-    const loadingSpinner = document.getElementById('loadingSpinner');
-    const spinner = document.getElementById('spinner');
-    const estimatedTime = document.getElementById('estimatedTime');
     loadingSpinner.style.display = 'block';
-    spinner.style.display = 'block';
     estimatedTime.style.display = 'block';
     try {
-        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 imageUrl = URL.createObjectURL(blob);
-            resultImage.innerHTML = `<img src="${imageUrl}" alt="Result Image" style="max-width: 100%;">`;
         } else {
-            // If server error, display the error message
-            const errorMessage = await response.text();
-            resultImage.innerHTML = `<p style="color: white;">Oops! Something went wrong. Please try again later.</p>`;
         }
-        // Hide the loading spinner
-        loadingSpinner.style.display = 'none';
     } catch (error) {
         console.error('Error:', error);
     }
-    // Remove the existing event listener
-    this.removeEventListener('submit', handleSubmit);
-    // Reattach the event listener
-    this.addEventListener('submit', handleSubmit);
 }
-// Add event listener to the form
-document.getElementById('uploadForm').addEventListener('submit', handleSubmit);
-</script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/katex.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100&display=swap" rel="stylesheet">
     <style>
+body {
     background-color: #121212;
     color: #FFFFFF;
 }
 /* Dark mode for upload buttons */
+#upload-form button[type="button"] {
     background-color: #1E7E34;
 }
 }
 /* Dark mode for face number inputs */
+#scale {
     background-color: #333333;
     color: #FFFFFF;
     border: 1px solid #555555;
     background-color: #2E9E44;
 }
+/* Style for upload buttons */
 input[type="file"] {
     display: none; /* Hide the default file input */
 }
+#upload-form label[for="image"] {
+    padding: 10px 20px;
+    background-color: #f44336;
+    color: white;
+    border-radius: 5px;
+    cursor: pointer;
+    display: inline-block;
+    margin: 0 auto;
+}
 .uploadButton {
     background-color: #4CAF50;
 }
 /* Style for file input labels */
+#upload-form {
     display: flex;
     flex-direction: column;
     align-items: center;
     cursor: pointer;
     display: block;
     margin: 0 auto;
 }
 .uploadLabel input[type="file"] {
 }
 /* Style for face number inputs */
+#version, #scale {
     padding: 8px;
     Width :50px;
     border: 1px solid #ccc;
 form > * {
     margin-bottom: 10px;
 }
 /* Style for the swap button */
 button {
     background-image: linear-gradient(
 button:hover {
     background-color: #45a049;
 }
+/* Style for file input */
+#image {
+    display: none; /* Hide the default file input */
+}
+.uploadLabel {
+    padding: 10px 20px;
+    background-color: #f44336;
+    color: white;
+    border-radius: 5px;
+    cursor: pointer;
+    display: inline-block;
+    margin: 0 auto;
+}
+.uploadLabel input[type="file"] {
+    display: none;
+}
 h1 {
     text-align: center;
     font-size: 40px; /* Adjust the font size as needed */
 }
+h2 {
     font-size: 24px; /* Adjust size as needed */
     font-family: 'Barlow Condensed';
     color: #FFFFFF; /* Text color */
     margin-top: 20px; /* Top margin */
     margin-bottom: 10px; /* Bottom margin */
 }
 select {
     width: 150px; /* Adjust width as needed */
     padding: 8px;
     color: white; /* Text color */
     font-size: 16px;
 }
+#version{
+	width :60px;
+	}
 /* Style for the scale number input */
 input[type="number"]#scale {
     padding: 8px;
     color: white; /* Set text color */
 }
+#resultImage {
+    border: 2px solid blue;
+    width: 265px;
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+    margin: auto;
+    margin-top: 30px;
+    padding-bottom: 7px;
+    gap: 14px;
+    background: linear-gradient(black , black) padding-box,
+                linear-gradient(to right, red, blue) border-box;
+    border-radius: 20px;
+    border: 2.5px solid transparent;
+}
+#resultContainer img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: auto;
+}
+   #image-preview {
             border: 2px solid blue;
             width: 200px;
             height: 200px;
             border: 2.5px solid transparent;
         }
+        #sourceImage {
             max-width: 100%;
             height: auto;
             display: block;
             margin: auto;
         }
+#loadingSpinner {
+    border: 3px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top: 3px solid #ffffff;
+    width: 20px;
+    height: 20px;
+    animation: spin 2s linear infinite;
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: none; /* Initially hide the loading spinner */
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+</style>
 </head>
 <body>
     <h1>Aiconvert.online</h1>
+    <form id="upload-form" enctype="multipart/form-data">
+<label for="image">Select image:</label>
+        <input type="file" id="image" accept="image/*" required onchange="previewImage(event)">
+        <div id="image-preview">
+    <img id="sourceImage">
+</div><br>
+        <button type="button" onclick="uploadImage()">Restore Image</button>
     </form>
+ <div id="resultImage">
+    <div id="estimatedTime" style="display: none;">Average estimated time: 240s</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;">`;
+        }
+         async function uploadImage() {
+    const fileInput = document.getElementById('image');
+    // 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);
+    // 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-bopbdocke.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>`;
     }
 }
+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', 1); // 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>