Spaces:
Sleeping
Sleeping
<!-- index.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; | |
} | |
/* 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>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> | |