Spaces:

Ashrafb
/

VT3

Running

App Files Files Community

Ashrafb commited on Mar 8, 2024

Commit

80824b5

verified ·

1 Parent(s): 23d0106

Update AB/index.html

Browse files

Files changed (1) hide show

AB/index.html +15 -319

AB/index.html CHANGED Viewed

@@ -3,331 +3,27 @@
 <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 */
-.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;
-}
-/* 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: inline-block;
-}
-.uploadLabel input[type="file"] {
-    display: none;
-}
-/* Style for face number inputs */
-input[type="number"] {
-    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[type="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; /* Change display property to block */
-    margin: 0 auto;
-    Width :200px;
-}
-/* Hover effect for the swap button */
-button[type="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 */
-}
-        #resultImage {
-            border: 2px solid blue;
-            width: 269px;
-            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: 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="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.onload = function(e) {
-                const image = document.getElementById(imageId);
-                image.src = e.target.result;
-            }
-            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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Upload Image</title>
 </head>
 <body>
+    <h1>Upload Image</h1>
+    <form action="/upload/" method="post" enctype="multipart/form-data">
+        <label for="file">Select Image:</label><br>
+        <input type="file" id="file" name="file" accept="image/*" required><br><br>
+        <label for="top">Top:</label><br>
+        <input type="number" id="top" name="top" value="200" required><br><br>
+        <label for="bottom">Bottom:</label><br>
+        <input type="number" id="bottom" name="bottom" value="200" required><br><br>
+        <label for="left">Left:</label><br>
+        <input type="number" id="left" name="left" value="200" required><br><br>
+        <label for="right">Right:</label><br>
+        <input type="number" id="right" name="right" value="200" required><br><br>
+        <button type="submit">Upload and Process Image</button>
+    </form>
 </body>
 </html>