<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Transfer</title>
<style>
/* Style the container to ensure it doesn't take up the whole page */
#result-container {
margin-top: 20px;
border: 1px solid #ccc;
padding: 10px;
display: none; /* Hide the container initially */
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Style Transfer</h1>
<form id="upload-form" action="/" method="POST" enctype="multipart/form-data">
<label for="content_image">Upload Content Image:</label>
<input type="file" id="content_image" name="content_image" required><br><br>
<label for="style_image">Upload Style Image:</label>
<input type="file" id="style_image" name="style_image" required><br><br>
<input type="submit" value="Submit">
</form>
<!-- Container for the resulting image -->
<div id="result-container">
<h2>Resulting Image:</h2>
<div id="image-container"></div>
<a href="{{ url_for('visualize') }}">
<button>Visualize Layers</button>
</a>
</div>
<script>
// JavaScript to handle form submission and display the image
document.getElementById('upload-form').addEventListener('submit', async function(event) {
event.preventDefault(); // Prevent the form from submitting the traditional way
const formData = new FormData(this);
const response = await fetch('/', {
method: 'POST',
body: formData
});
if (response.ok) {
const data = await response.json();
const imageElement = document.createElement('img');
imageElement.src = 'data:image/jpeg;base64,' + data.image;
const imageContainer = document.getElementById('image-container');
imageContainer.innerHTML = ''; // Clear any previous image
imageContainer.appendChild(imageElement);
const resultContainer = document.getElementById('result-container');
resultContainer.style.display = 'block'; // Show the container
}
});
</script>
</body>
</html>