|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Color Restoration</title> |
|
<style> |
|
|
|
#colorized-image img { |
|
max-width: 100%; |
|
height: auto; |
|
} |
|
#original-image img { |
|
max-width: 100%; |
|
height: auto; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
<h1>Color Restoration</h1> |
|
<form action="/upload/" method="post" enctype="multipart/form-data"> |
|
<input type="file" name="file" accept=".jpg, .jpeg, .png" required> |
|
<button type="submit">Upload</button> |
|
</form> |
|
<hr> |
|
<h2>Original Photo</h2> |
|
<div id="original-image"></div> |
|
<hr> |
|
<h2>Colorized Photo</h2> |
|
<div id="colorized-image"></div> |
|
<hr> |
|
<a id="download-link" href="#" download="colorized_image.jpg" style="display:none;">Download Colorized Image</a> |
|
|
|
<script> |
|
function displayOriginalImage(file) { |
|
const reader = new FileReader(); |
|
reader.onload = function(e) { |
|
const originalImageDiv = document.getElementById('original-image'); |
|
originalImageDiv.innerHTML = `<img src="${e.target.result}" alt="Original Image" width="400">`; |
|
} |
|
reader.readAsDataURL(file); |
|
} |
|
|
|
function displayColorizedImage(blob) { |
|
const url = URL.createObjectURL(blob); |
|
const colorizedImageDiv = document.getElementById('colorized-image'); |
|
colorizedImageDiv.innerHTML = `<img src="${url}" alt="Colorized Image" width="400">`; |
|
const downloadLink = document.getElementById('download-link'); |
|
downloadLink.href = url; |
|
downloadLink.style.display = 'block'; |
|
} |
|
|
|
document.querySelector('form').addEventListener('submit', async function(e) { |
|
e.preventDefault(); |
|
const formData = new FormData(this); |
|
const response = await fetch('/upload/', { |
|
method: 'POST', |
|
body: formData |
|
}); |
|
const blob = await response.blob(); |
|
displayOriginalImage(formData.get('file')); |
|
displayColorizedImage(blob); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|
