Spaces:
Paused
Paused
| <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"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| <style> | |
| body { | |
| background-color: #121212; | |
| color: #FFFFFF; | |
| } | |
| /* Dark mode for upload buttons */ | |
| #upload-form button[type="button"] { | |
| background-color: #1E7E34; | |
| } | |
| /* Dark mode for file input labels */ | |
| #image-label { | |
| background-color: #BF2C25; | |
| } | |
| /* Dark mode for face number inputs */ | |
| #best_max_flavors { | |
| 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 */ | |
| } | |
| #upload-form label[for="image"] { | |
| padding: 10px 20px; | |
| background-color: #f44336; | |
| color: white; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| display: inline-block; | |
| margin: 0 auto; | |
| } | |
| #image-label { | |
| padding: 10px 20px; | |
| background-color: #f44336; | |
| color: white; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| display: inline-block; | |
| margin: 0 auto; | |
| } | |
| .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 */ | |
| #upload-form { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| #image-label { | |
| padding: 10px 20px; | |
| background-color: #f44336; | |
| color: white; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| #image-label input[type="file"] { | |
| display: none; | |
| } | |
| /* Style for face number inputs */ | |
| #mode, #best_max_flavors { | |
| padding: 8px; | |
| 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; | |
| } | |
| /* Style for file input */ | |
| #image { | |
| display: none; /* Hide the default file input */ | |
| } | |
| #image-label { | |
| padding: 10px 20px; | |
| background-color: #f44336; | |
| color: white; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| display: inline-block; | |
| margin: 0 auto; | |
| } | |
| #image-label input[type="file"] { | |
| display: none; | |
| } | |
| 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; | |
| } | |
| #best_max_flavors { | |
| width: 60px; | |
| } | |
| /* Style for the scale number input */ | |
| input[type="number"]#best_max_flavors { | |
| 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"]#best_max_flavors: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 */ | |
| } | |
| #results { | |
| 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; | |
| } | |
| #image-preview { | |
| 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 { | |
| 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); } | |
| } | |
| #results { | |
| position: relative; /* Set position to relative */ | |
| /* Your existing styles */ | |
| } | |
| #copyIcon { | |
| font-size: 24px; /* Adjust the font size as needed */ | |
| position: absolute; | |
| bottom: 10px; /* Adjust the distance from the bottom */ | |
| left: 10px; /* Adjust the distance from the left */ | |
| cursor: pointer; | |
| z-index: 1; | |
| color: rgba(255, 255, 255, 0.7); /* Adjust the opacity value */ | |
| } | |
| #resultContainer { | |
| /* Include padding and border in the total height */ | |
| } | |
| #resultContainer p { | |
| font-size: 14px; /* Adjust the font size as needed */ | |
| text-align: center; /* Center text horizontally */ | |
| margin: 5px 0; /* Add margin for spacing between paragraphs */ | |
| line-height: 1.5; /* Adjust line height for better readability */ | |
| } | |
| </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> | |
| <label for="mode">Select Mode</label> | |
| <select id="mode" required> | |
| <option value="best">Best Mode</option> | |
| <option value="classic">Classic Mode</option> | |
| <option value="fast" selected>Fast Mode</option> | |
| </select><br> | |
| <label for="best_max_flavors">Max Flavors:</label> | |
| <input type="number" id="best_max_flavors" value="4" min="2" max="24"> | |
| <br> | |
| <button type="button" onclick="uploadImage()">Generate Prompt </button> | |
| </form> | |
| <div id="results"> | |
| <div id="estimatedTime" style="display: none;">Estimated time: 90s</div> | |
| <div id="loadingSpinner" style="display: none;"></div> | |
| <i class="far fa-copy" id="copyIcon" onclick="copyTextToClipboard()"></i> | |
| <div id="resultContainer"> | |
| </div> | |
| </div> | |
| <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'); | |
| const versionInput = document.getElementById('mode'); | |
| const scaleInput = document.getElementById('best_max_flavors'); | |
| // 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 = ""; | |
| const formData = new FormData(); | |
| formData.append('file', fileInput.files[0]); | |
| formData.append('mode', versionInput.value); | |
| formData.append('best_max_flavors', scaleInput.value); | |
| // 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('/inference/', { | |
| 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(); // Assuming the response is JSON | |
| resultContainer.innerHTML = '<h2></h2>'; | |
| data.prompt_results.forEach(result => { | |
| resultContainer.innerHTML += '<p>' + result + '</p>'; | |
| }); | |
| } 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>`; | |
| } | |
| } | |
| function copyTextToClipboard() { | |
| const resultContainer = document.getElementById('resultContainer'); | |
| const textToCopy = resultContainer.innerText; | |
| // Create a temporary textarea element to copy the text | |
| const textarea = document.createElement('textarea'); | |
| textarea.value = textToCopy; | |
| document.body.appendChild(textarea); | |
| // Select the text inside the textarea | |
| textarea.select(); | |
| textarea.setSelectionRange(0, 99999); // For mobile devices | |
| // Copy the selected text | |
| document.execCommand('copy'); | |
| // Remove the temporary textarea | |
| document.body.removeChild(textarea); | |
| // Change the copy icon text to "Copied" | |
| const copyIcon = document.getElementById('copyIcon'); | |
| copyIcon.textContent = ' # Copied' ; | |
| copyIcon.style.fontSize = '14px'; | |
| // Revert the copy icon back to "Copy" after 1.5 seconds | |
| setTimeout(() => { | |
| copyIcon.textContent = ''; | |
| }, 1500); | |
| } | |
| </script> | |
| </body> | |
| </html> | |