Furdockgr1 / static /index.html
Ashrafb's picture
Update static/index.html
38f9a32 verified
raw
history blame
1.87 kB
<!-- 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>
</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>