| <!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> |
|
|
