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> | |
</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> | |
<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> | |
<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> | |
<button type="submit">Enhance Image</button> | |
</form> | |
<div id="resultContainer"></div> | |
<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); | |
} | |
}); | |
</script> | |
</body> | |
</html> | |