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

61
neural_style_app/templates/index.html
View File

@ -28,6 +28,7 @@
border-radius: 10px;
display: inline-block;
margin-top: 20px;
text-align: center; /* Center-align content inside the form */
}
label {
@ -36,9 +37,16 @@
font-size: 1.2em;
}
.file-input-container {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
input[type="file"] {
padding: 10px;
margin-bottom: 20px;
margin: 0 20px; /* Spacing between the file input and images */
color: #ffdfba;
background-color: #333;
border: none;
@ -80,6 +88,16 @@
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 {
font-size: 2em;
@ -97,11 +115,15 @@
<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>
<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>
<label for="style_image">Upload Style Image:</label>
<input type="file" id="style_image" name="style_image" required>
<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>
<input type="submit" value="Submit">
</form>
@ -121,6 +143,35 @@
</div>
<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
document.getElementById('upload-form').addEventListener('submit', async function(event) {
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