2024-08-10 15:25:51 +02:00
|
|
|
<!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>
|
2024-08-23 12:18:28 +02:00
|
|
|
/* General page styles */
|
|
|
|
|
body {
|
|
|
|
|
font-family: 'Courier New', Courier, monospace; /* Artsy font */
|
|
|
|
|
background-image: url('/static/sciana.jpg'); /* Background image */
|
|
|
|
|
background-size: cover;
|
|
|
|
|
color: #ff7f50;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
|
margin-top: 50px;
|
|
|
|
|
font-size: 5em;
|
|
|
|
|
color: #ff7f50; /* Soft color for the header */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
form {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
display: inline-block;
|
2024-08-10 15:25:51 +02:00
|
|
|
margin-top: 20px;
|
2024-08-24 13:38:13 +02:00
|
|
|
text-align: center; /* Center-align content inside the form */
|
2024-08-23 12:18:28 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
label {
|
|
|
|
|
display: block;
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
font-size: 1.2em;
|
|
|
|
|
}
|
|
|
|
|
|
2024-08-24 13:38:13 +02:00
|
|
|
.file-input-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
2024-08-23 12:18:28 +02:00
|
|
|
input[type="file"] {
|
2024-08-10 15:25:51 +02:00
|
|
|
padding: 10px;
|
2024-08-24 13:38:13 +02:00
|
|
|
margin: 0 20px; /* Spacing between the file input and images */
|
2024-08-24 13:38:32 +02:00
|
|
|
color: #45392c;
|
2024-08-23 12:18:28 +02:00
|
|
|
background-color: #333;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type="submit"], #visualize-btn {
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
font-size: 1.2em;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
background-color: #ff7f50;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
transition: background-color 0.3s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type="submit"]:hover, #visualize-btn:hover {
|
|
|
|
|
background-color: #ff6347; /* Slightly darker color on hover */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Style the container for the result and visualization */
|
|
|
|
|
#result-container {
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
border: 1px solid #ffdfba;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
|
|
|
border-radius: 10px;
|
2024-08-10 15:25:51 +02:00
|
|
|
display: none; /* Hide the container initially */
|
2024-08-23 12:18:28 +02:00
|
|
|
max-width: 80%;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
2024-08-10 15:25:51 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
height: auto;
|
2024-08-23 12:18:28 +02:00
|
|
|
border-radius: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2024-08-24 13:38:13 +02:00
|
|
|
/* Thumbnail preview styles */
|
|
|
|
|
.image-preview {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 100px;
|
|
|
|
|
border: 2px solid #ff7f50;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
2024-08-23 12:18:28 +02:00
|
|
|
/* Loading message style */
|
|
|
|
|
.loading-message {
|
|
|
|
|
font-size: 2em;
|
|
|
|
|
color: #ff7f50;
|
|
|
|
|
display: none; /* Hidden by default */
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#visualization-container {
|
|
|
|
|
margin-top: 20px;
|
2024-08-10 15:25:51 +02:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-08-24 13:38:32 +02:00
|
|
|
<h1>Neural Style Transfer for images</h1>
|
2024-08-10 15:25:51 +02:00
|
|
|
<form id="upload-form" action="/" method="POST" enctype="multipart/form-data">
|
2024-08-24 13:38:13 +02:00
|
|
|
<div class="file-input-container">
|
|
|
|
|
<input type="file" id="content_image" name="content_image" required>
|
|
|
|
|
<img id="content-preview" class="image-preview" alt="Content Image Preview">
|
|
|
|
|
</div>
|
2024-08-10 15:25:51 +02:00
|
|
|
|
2024-08-24 13:38:13 +02:00
|
|
|
<div class="file-input-container">
|
|
|
|
|
<input type="file" id="style_image" name="style_image" required>
|
|
|
|
|
<img id="style-preview" class="image-preview" alt="Style Image Preview">
|
|
|
|
|
</div>
|
2024-08-10 15:25:51 +02:00
|
|
|
|
|
|
|
|
<input type="submit" value="Submit">
|
|
|
|
|
</form>
|
|
|
|
|
|
2024-08-23 12:18:28 +02:00
|
|
|
<!-- Loading message after submitting the form -->
|
|
|
|
|
<div id="loading-message" class="loading-message">Processing images, please wait...</div>
|
|
|
|
|
|
2024-08-10 15:25:51 +02:00
|
|
|
<!-- Container for the resulting image -->
|
|
|
|
|
<div id="result-container">
|
|
|
|
|
<h2>Resulting Image:</h2>
|
|
|
|
|
<div id="image-container"></div>
|
2024-08-11 20:26:57 +02:00
|
|
|
<button id="visualize-btn">Visualize Layers</button>
|
2024-08-23 12:18:28 +02:00
|
|
|
|
|
|
|
|
<!-- Loading message when visualizing layers -->
|
|
|
|
|
<div id="visualize-loading-message" class="loading-message">Generating visualization, please wait...</div>
|
2024-08-11 20:26:57 +02:00
|
|
|
<div id="visualization-container"></div> <!-- Container for the visualization -->
|
2024-08-10 15:25:51 +02:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
2024-08-24 13:38:13 +02:00
|
|
|
// JavaScript to handle image previews
|
|
|
|
|
document.getElementById('content_image').addEventListener('change', function(event) {
|
|
|
|
|
const contentPreview = document.getElementById('content-preview');
|
|
|
|
|
const file = event.target.files[0];
|
|
|
|
|
if (file) {
|
|
|
|
|
const reader = new FileReader();
|
|
|
|
|
reader.onload = function(e) {
|
|
|
|
|
contentPreview.src = e.target.result;
|
|
|
|
|
};
|
|
|
|
|
reader.readAsDataURL(file);
|
|
|
|
|
} else {
|
|
|
|
|
contentPreview.src = '';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('style_image').addEventListener('change', function(event) {
|
|
|
|
|
const stylePreview = document.getElementById('style-preview');
|
|
|
|
|
const file = event.target.files[0];
|
|
|
|
|
if (file) {
|
|
|
|
|
const reader = new FileReader();
|
|
|
|
|
reader.onload = function(e) {
|
|
|
|
|
stylePreview.src = e.target.result;
|
|
|
|
|
};
|
|
|
|
|
reader.readAsDataURL(file);
|
|
|
|
|
} else {
|
|
|
|
|
stylePreview.src = '';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2024-08-10 15:25:51 +02:00
|
|
|
// 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
|
|
|
|
|
|
2024-08-23 12:18:28 +02:00
|
|
|
// Show the loading message
|
|
|
|
|
const loadingMessage = document.getElementById('loading-message');
|
|
|
|
|
loadingMessage.style.display = 'block';
|
|
|
|
|
|
2024-08-10 15:25:51 +02:00
|
|
|
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
|
2024-08-23 12:18:28 +02:00
|
|
|
|
|
|
|
|
// Hide the loading message
|
|
|
|
|
loadingMessage.style.display = 'none';
|
2024-08-10 15:25:51 +02:00
|
|
|
}
|
|
|
|
|
});
|
2024-08-11 20:26:57 +02:00
|
|
|
|
|
|
|
|
// JavaScript to handle visualization button click
|
|
|
|
|
document.getElementById('visualize-btn').addEventListener('click', async function() {
|
2024-08-23 12:18:28 +02:00
|
|
|
// Show the loading message
|
|
|
|
|
const visualizeLoadingMessage = document.getElementById('visualize-loading-message');
|
|
|
|
|
visualizeLoadingMessage.style.display = 'block';
|
|
|
|
|
|
2024-08-11 20:26:57 +02:00
|
|
|
const response = await fetch('/visualize');
|
|
|
|
|
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
const visualizationContainer = document.getElementById('visualization-container');
|
|
|
|
|
visualizationContainer.innerHTML = await response.text(); // Display the plot
|
2024-08-23 12:18:28 +02:00
|
|
|
|
|
|
|
|
// Hide the loading message
|
|
|
|
|
visualizeLoadingMessage.style.display = 'none';
|
2024-08-11 20:26:57 +02:00
|
|
|
}
|
|
|
|
|
});
|
2024-08-10 15:25:51 +02:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
