Spaces:
Sleeping
Sleeping
File size: 2,032 Bytes
c869d9f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!-- index.html -->
<!DOCTYPE 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>
/* Style to make the image smaller */
#resultContainer img {
max-width: 100%;
height: auto;
}
</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>
<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>
|