s486797/neural_style
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add small image previews

Browse Source
This commit is contained in:
s486797 2024-08-24 13:38:13 +02:00
parent 84eabfae0e
commit 3fa05dd4c5
2 changed files with 56 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
neural_style_app/templates/index.html
View File

@ -28,6 +28,7 @@
border-radius: 10px; border-radius: 10px;
display: inline-block; display: inline-block;
margin-top: 20px; margin-top: 20px;
text-align: center; /* Center-align content inside the form */
} }
label { label {
@ -36,9 +37,16 @@
font-size: 1.2em; font-size: 1.2em;
} }
.file-input-container {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
input[type="file"] { input[type="file"] {
padding: 10px; padding: 10px;
margin-bottom: 20px; margin: 0 20px; /* Spacing between the file input and images */
color: #ffdfba; color: #ffdfba;
background-color: #333; background-color: #333;
border: none; border: none;
@ -80,6 +88,16 @@
border-radius: 10px; border-radius: 10px;
} }
/* Thumbnail preview styles */
.image-preview {
display: inline-block;
width: 100px;
height: 100px;
border: 2px solid #ff7f50;
object-fit: cover;
border-radius: 5px;
}
/* Loading message style */ /* Loading message style */
.loading-message { .loading-message {
font-size: 2em; font-size: 2em;
@ -97,11 +115,15 @@
<body> <body>
<h1>Style Transfer</h1> <h1>Style Transfer</h1>
<form id="upload-form" action="/" method="POST" enctype="multipart/form-data"> <form id="upload-form" action="/" method="POST" enctype="multipart/form-data">
<label for="content_image">Upload Content Image:</label> <div class="file-input-container">
<input type="file" id="content_image" name="content_image" required> <input type="file" id="content_image" name="content_image" required>
<img id="content-preview" class="image-preview" alt="Content Image Preview">
</div>
<label for="style_image">Upload Style Image:</label> <div class="file-input-container">
<input type="file" id="style_image" name="style_image" required> <input type="file" id="style_image" name="style_image" required>
<img id="style-preview" class="image-preview" alt="Style Image Preview">
</div>
<input type="submit" value="Submit"> <input type="submit" value="Submit">
</form> </form>
@ -121,6 +143,35 @@
</div> </div>
<script> <script>
// 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 = '';
}
});
// JavaScript to handle form submission and display the image // JavaScript to handle form submission and display the image
document.getElementById('upload-form').addEventListener('submit', async function(event) { document.getElementById('upload-form').addEventListener('submit', async function(event) {
event.preventDefault(); // Prevent the form from submitting the traditional way event.preventDefault(); // Prevent the form from submitting the traditional way

BIN
neural_style_pytorch/images/sloneczniki.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB