Update static/index.html

static/index.html

@@ -7,55 +7,366 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Image Enhancement</title>
     <style>
-        /* Style to make the image smaller */
-        #resultContainer img {
+    	body {
+    background-color: #121212;
+    color: #FFFFFF;
+}
+
+/* Dark mode for upload buttons */
+.uploadButton {
+    background-color: #1E7E34;
+}
+
+/* Dark mode for file input labels */
+.uploadLabel {
+    background-color: #BF2C25;
+}
+
+/* Dark mode for face number inputs */
+input[type="number"] {
+    background-color: #333333;
+    color: #FFFFFF;
+    border: 1px solid #555555;
+}
+
+/* Dark mode for swap button */
+button[type="button"] {
+    background-color: #1E7E34;
+}
+
+/* Dark mode hover effect for swap button */
+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;
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin-top: 10px;
+    cursor: pointer;
+    border-radius: 5px;
+    margin: auto;
+    margin: 0 auto;
+}
+
+/* Style for file input labels */
+#uploadForm {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.uploadLabel {
+    padding: 10px 20px;
+    background-color: #f44336;
+    color: white;
+    border-radius: 5px;
+    cursor: pointer;
+    display: block;
+    margin: 0 auto;
+    
+}
+
+.uploadLabel input[type="file"] {
+    display: none;
+}
+
+/* Style for face number inputs */
+#version #scale {
+    padding: 8px;
+    Width :50px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    margin-top: 5px;
+    font-size: 16px;
+}
+
+/* Style for labels */
+label {
+    font-weight: bold;
+}
+
+/* Optional: Increase space between elements */
+form > * {
+    margin-bottom: 10px;
+}
+/* Style for the swap button */
+button {
+    background-image: linear-gradient(
+        45deg,
+        hsl(240deg 75% 29%) 0%,
+        hsl(254deg 78% 28%) 6%,
+        hsl(264deg 82% 27%) 13%,
+        hsl(272deg 87% 26%) 19%,
+        hsl(278deg 93% 25%) 25%,
+        hsl(284deg 98% 24%) 31%,
+        hsl(289deg 100% 23%) 37%,
+        hsl(294deg 100% 23%) 44%,
+        hsl(299deg 100% 22%) 50%,
+        hsl(303deg 100% 23%) 56%,
+        hsl(307deg 100% 24%) 63%,
+        hsl(311deg 100% 25%) 69%,
+        hsl(313deg 100% 26%) 75%,
+        hsl(316deg 95% 28%) 81%,
+        hsl(320deg 88% 30%) 87%,
+        hsl(323deg 81% 32%) 94%,
+        hsl(326deg 75% 33%) 100%
+    );
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin-top: 10px;
+    cursor: pointer;
+    border-radius: 5px;
+    display: block;
+    margin: 0 auto;
+    width: 200px;
+}
+
+/* Hover effect for the button */
+button:hover {
+    background-color: #45a049;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 20px;
+    font-family: 'Barlow Condensed';
+    color: pink;
+    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;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #333333; /* Background color */
+    color: white; /* Text color */
+    font-size: 16px;
+}
+/* Style for the scale number input */
+input[type="number"]#scale {
+    padding: 8px;
+    width: 50px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    margin-top: 5px;
+    font-size: 16px;
+    color: white; /* Set text color to white */
+    background-color: #333333; /* Set background color */
+}
+
+/* Optional: Adjust focus styling for the scale number input */
+input[type="number"]#scale:focus {
+    outline: none; /* Remove default outline */
+    border-color: #1E7E34; /* Change border color on focus */
+}
+
+#estimatedTime {
+    display: none;
+    text-align: center; /* Center align the text */
+    margin-top: 10px; /* Add margin to separate it from the spinner */
+    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;
+            display: flex;
+            flex-direction: column;
+            overflow-y: scroll;
+            margin: auto;
+            margin-top: 30px;
+            padding-bottom: 7px;
+            gap: 100px;
+            background: linear-gradient(black , black) padding-box,
+                        linear-gradient(to right, red, blue) border-box;
+            border-radius: 20px;
+            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>Image Enhancement</h1>
-    <form id="uploadForm" enctype="multipart/form-data">
-        <label for="image">Upload Image:</label>
-        <input type="file" id="image" name="file" accept="image/*" required><br><br>
-        
+    <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">v1.2</option>
             <option value="v1.3">v1.3</option>
             <option value="v1.4">v1.4</option>
             <!-- Add more options as needed -->
-        </select><br><br>
+        </select>
         
-        <label for="scale">Select Scale:</label>
-        <select id="scale" name="scale">
-            <option value="2">2x</option>
-            <option value="4">4x</option>
-            <!-- Add more options as needed -->
-        </select><br><br>
+       <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);
+    }
 
-    <script>
-        document.getElementById('uploadForm').addEventListener('submit', async function(event) {
-            event.preventDefault();
-            const formData = new FormData(this);
-            try {
-                const response = await fetch('/upload/', {
-                    method: 'POST',
-                    body: formData
-                });
-                const result = await response.blob();
-                const imageURL = URL.createObjectURL(result);
-                document.getElementById('resultContainer').innerHTML = `<img src="${imageURL}" alt="Enhanced Image">`;
-            } catch (error) {
-                console.error('Error:', error);
-            }
+    document.getElementById('uploadForm').addEventListener('submit', async function(event) {
+    event.preventDefault();
+    const formData = new FormData(this);
+    const fileInput = document.getElementById('image');
+
+    
+
+    // 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
         });
-    </script>
+
+        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);
+    }
+});
+
+// Add event listener to the "Enhance Image" button
+document.querySelector('button[type="submit"]').addEventListener('click', function(event) {
+    const fileInput = document.getElementById('image');
+
+    // Check if file input is empty
+    if (!fileInput.files.length) {
+        // Display message in resultImage container
+        document.getElementById('resultImage').innerHTML = `<p style="color: white;">Please upload an image.</p>`;
+    }
+});
+
+
+</script>
+
 </body>
 </html>