From 3fa05dd4c59f4e275f43aaa84ad994eb5f21e671 Mon Sep 17 00:00:00 2001 From: s486797 Date: Sat, 24 Aug 2024 13:38:13 +0200 Subject: [PATCH] add small image previews --- neural_style_app/templates/index.html | 61 ++++++++++++++++++-- neural_style_pytorch/images/sloneczniki.jpg | Bin 0 -> 163684 bytes 2 files changed, 56 insertions(+), 5 deletions(-) create mode 100644 neural_style_pytorch/images/sloneczniki.jpg diff --git a/neural_style_app/templates/index.html b/neural_style_app/templates/index.html index 92f32b3..a55975f 100644 --- a/neural_style_app/templates/index.html +++ b/neural_style_app/templates/index.html @@ -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 @@

Style Transfer

- - +
+ + Content Image Preview +
- - +
+ + Style Image Preview +
@@ -121,6 +143,35 @@