Spaces:

mupparajuk31
/

imagechatbot

Sleeping

App Files Files Community

Update templates/index.html

by shaikKaif - opened Jan 5, 2025

base: refs/heads/main

←

from: refs/pr/1

Discussion Files changed

+88

-86

Files changed (1) hide show

templates/index.html +88 -86

templates/index.html CHANGED Viewed

@@ -179,37 +179,44 @@
             background-color: #25d366;
             border-radius: 4px;
         }
-        .output-image-container{
             background-color: #e4e6eb; /* Light gray color for bot messages */
             color: #333;
             border-top-left-radius: 0;
             align-self: flex-start;
             display: flex;
             justify-content: space-between;
         }
-        .output-image-container img{
-            width: 50%;
             height: auto;
         }
-        .sample{
-            width: 10px;
-            position: absolute;
         }
-.download-button {
-    margin-top: 10px;
-    padding: 10px 15px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 14px;
-}
-.download-button:hover {
-    background-color: #0056b3;
 }
     </style>
 </head>
 <body>
@@ -221,13 +228,12 @@
             {% if image_url %}
             <div class="chat-bubble user">Image uploaded successfully!</div>
             <div class="output-image-container">
-    		<img src="{{ image_url }}" class="uploaded-image" alt="Uploaded Image">
-   		<a href="{{ image_url }}" download>
-        		<button class="download-button">Download</button>
-    		</a>
-    		<div class="sample"></div>
-    		<img src="{{ input_image_url }}" class="uploaded-image" alt="Uploaded Image">
-	</div>
             <div class="chat-bubble bot">
                 Would you like to generate a caption or ask a question about the image?
@@ -247,19 +253,19 @@
             {% endif %}
             {% if similar_images %}
-<div class="similar-images-container">
-    <div class="chat-bubble bot">Here are some similar images:</div>
-    <div id="similar-images-list" class="row">
-        {% for img_url in similar_images %}
-            <div class="col-md-3 mb-3 similar-image" style="display: {{ 'block' if loop.index <= 4 else 'none' }};">
-                <img src="{{ img_url }}" class="img-fluid" alt="Similar Image">
             </div>
-        {% endfor %}
-    </div>
-    <button id="toggle-button" class="btn btn-primary mt-3">Show More</button>
-</div>
-{% endif %}
-</div>
         <div class="chat-footer">
             {% if not image_url %}
@@ -278,7 +284,6 @@
                     <button type="submit" class="btn btn-primary">Upload Image</button>
                 </form>
             </div>
             {% else %}
             <div class="message-container">
                 <form action="{{ url_for('process_image') }}" method="POST">
@@ -301,69 +306,66 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
     <script>
         $(document).ready(function () {
-            // Hide all forms initially
             $('#caption-form').hide();
             $('#vqa-form').hide();
             // Show caption form when "Generate Caption" button is clicked
             $('#generate-caption').click(function() {
                 $('#caption-form').show();
                 $('#vqa-form').hide();
             });
             // Show VQA form when "Ask a Question" button is clicked
             $('#ask-question').click(function() {
                 $('#vqa-form').show();
                 $('#caption-form').hide();
             });
             // Hide the "Please enter a question" alert once an answer is displayed
             {% if answer %}
                 $('.alert-info').hide();
             {% endif %}
         });
-        $(document).ready(function () {
-        // Event listener for the file input change
-        $('#file').on('change', function () {
-            var file = this.files[0];
-            if (file) {
-                // Display the file name
-                $('#file-name').text("Selected file: " + file.name);
-                // Create an object URL for the image and display it as a preview
-                var reader = new FileReader();
-                reader.onload = function (e) {
-                    $('#preview-img').attr('src', e.target.result).show();
-                };
-                reader.readAsDataURL(file);
-            } else {
-                $('#file-name').text("");  // Reset file name if no file is selected
-                $('#preview-img').hide();  // Hide preview if no file is selected
-            }
-        });
-    });
-    $(document).ready(function () {
-    const similarImages = $('.similar-image'); // All similar images
-    const toggleButton = $('#toggle-button');
-    let isExpanded = false; // Track state of visibility
-    // Click event for "Show More" / "Show Less"
-    toggleButton.on('click', function () {
-        if (isExpanded) {
-            // Collapse to show only the first 4 images
-            similarImages.slice(4).hide();
-            toggleButton.text('Show More');
-        } else {
-            // Expand to show all images
-            similarImages.show();
-            toggleButton.text('Show Less');
-        }
-        isExpanded = !isExpanded; // Toggle state
-    });
-});
     </script>
 </body>
-</html>

             background-color: #25d366;
             border-radius: 4px;
         }
+        .output-image-container {
             background-color: #e4e6eb; /* Light gray color for bot messages */
             color: #333;
             border-top-left-radius: 0;
             align-self: flex-start;
             display: flex;
             justify-content: space-between;
+            gap: 10px;
         }
+        .output-image-container img {
+            width: 48%; /* Allow images to be side-by-side */
             height: auto;
         }
+        .download-button {
+            margin-top: 10px;
+            padding: 10px 15px;
+            background-color: #02ca59;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 14px;
         }
+        .download-button:hover {
+            background-color: #00b34e;
+        }
+        #preview-img {
+    max-width: 300px; /* Adjust the max-width to limit the size */
+    max-height: 300px; /* Optional: add max height to limit the height */
+    display: none;
+    margin-bottom: 3px;
+    border-radius: 20px;
+    object-fit: contain; /* Ensures the image maintains its aspect ratio */
 }
     </style>
 </head>
 <body>
             {% if image_url %}
             <div class="chat-bubble user">Image uploaded successfully!</div>
             <div class="output-image-container">
+                <img src="{{ image_url }}" class="uploaded-image" alt="Uploaded Image">
+                <img src="{{ input_image_url }}" class="uploaded-image" alt="Enhanced Image">
+            </div>
+            <a href="{{ input_image_url }}" download>
+                <button class="download-button">Download Enhanced Image</button>
+            </a>
             <div class="chat-bubble bot">
                 Would you like to generate a caption or ask a question about the image?
             {% endif %}
             {% if similar_images %}
+            <div class="similar-images-container">
+                <div class="chat-bubble bot">Here are some similar images:</div>
+                <div id="similar-images-list" class="row">
+                    {% for img_url in similar_images %}
+                        <div class="col-md-3 mb-3 similar-image" style="display: {{ 'block' if loop.index <= 4 else 'none' }};">
+                            <img src="{{ img_url }}" class="img-fluid" alt="Similar Image">
+                        </div>
+                    {% endfor %}
+                </div>
+                <button id="toggle-button" class="btn btn-primary mt-3">Show More</button>
             </div>
+            {% endif %}
+        </div>
         <div class="chat-footer">
             {% if not image_url %}
                     <button type="submit" class="btn btn-primary">Upload Image</button>
                 </form>
             </div>
             {% else %}
             <div class="message-container">
                 <form action="{{ url_for('process_image') }}" method="POST">
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
     <script>
         $(document).ready(function () {
+            // Initially hide the forms for Caption and VQA
             $('#caption-form').hide();
             $('#vqa-form').hide();
             // Show caption form when "Generate Caption" button is clicked
             $('#generate-caption').click(function() {
                 $('#caption-form').show();
                 $('#vqa-form').hide();
             });
             // Show VQA form when "Ask a Question" button is clicked
             $('#ask-question').click(function() {
                 $('#vqa-form').show();
                 $('#caption-form').hide();
             });
             // Hide the "Please enter a question" alert once an answer is displayed
             {% if answer %}
                 $('.alert-info').hide();
             {% endif %}
+            // File input change listener for image preview and file name
+            $('#file').on('change', function () {
+                var file = this.files[0];
+                if (file) {
+                    // Display the file name
+                    $('#file-name').text("Selected file: " + file.name);
+                    // Create an object URL for the image and display it as a preview
+                    var reader = new FileReader();
+                    reader.onload = function (e) {
+                        $('#preview-img').attr('src', e.target.result).show();
+                    };
+                    reader.readAsDataURL(file);
+                } else {
+                    $('#file-name').text("");  // Reset file name if no file is selected
+                    $('#preview-img').hide();  // Hide preview if no file is selected
+                }
+            });
+            // Similar images functionality: Toggle between "Show More" and "Show Less"
+            const similarImages = $('.similar-image'); // All similar images
+            const toggleButton = $('#toggle-button');
+            let isExpanded = false; // Track state of visibility
+            // Click event for "Show More" / "Show Less"
+            toggleButton.on('click', function () {
+                if (isExpanded) {
+                    // Collapse to show only the first 4 images
+                    similarImages.slice(4).hide();
+                    toggleButton.text('Show More');
+                } else {
+                    // Expand to show all images
+                    similarImages.show();
+                    toggleButton.text('Show Less');
+                }
+                isExpanded = !isExpanded; // Toggle state
+            });
         });
     </script>
 </body>
+</html>