Update app.py

app.py

@@ -223,7 +223,7 @@ class XylariaChat:
             if len(self.conversation_history) > 10:
                 self.conversation_history = self.conversation_history[-10:]
 
-        # Custom CSS for Inter font
+        # Custom CSS for Inter font and improved styling
         custom_css = """
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
@@ -240,6 +240,43 @@ class XylariaChat:
         .gradio-container button {
             font-family: 'Inter', sans-serif !important;
         }
+
+        /* Image Upload Styling */
+        .image-container {
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            padding: 10px;
+            margin-bottom: 10px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+            background-color: #f8f8f8;
+        }
+
+        .image-preview {
+            max-width: 200px;
+            max-height: 200px;
+            border-radius: 8px;
+        }
+
+        .image-buttons {
+            display: flex;
+            gap: 10px;
+        }
+
+        .image-buttons button {
+            padding: 8px 15px;
+            border-radius: 5px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            cursor: pointer;
+        }
+
+        .image-buttons button:hover {
+            background-color: #367c39;
+        }
         """
 
         with gr.Blocks(theme='soft', css=custom_css) as demo:
@@ -249,28 +286,28 @@ class XylariaChat:
                     label="Xylaria 1.4 Senoa",
                     height=500,
                     show_copy_button=True,
-
                 )
 
-                # Input row with improved layout and image upload
+                # Enhanced Image Upload Section
+                with gr.Accordion("Image Input", open=False):
+                    with gr.Column() as image_container:  # Use a Column for the image container
+                        img = gr.Image(
+                            sources=["upload", "webcam"],
+                            type="filepath",
+                            label="",  # Remove label as it's redundant
+                            elem_classes="image-preview",  # Add a class for styling
+                        )
+                        with gr.Row():
+                            clear_image_btn = gr.Button("Clear Image")
+
+                # Input row with improved layout
                 with gr.Row():
                     with gr.Column(scale=4):
                         txt = gr.Textbox(
-                            show_label=False, 
-                            placeholder="Type your message...", 
+                            show_label=False,
+                            placeholder="Type your message...",
                             container=False
                         )
-
-                        # Image upload as a separate button
-                        with gr.Row():
-                            img = gr.Image(
-                                sources=["upload", "webcam"], 
-                                type="filepath", 
-                                label="Upload Image",
-                                visible=False
-                            )
-                            upload_btn = gr.Button("Upload Image")
-                    
                     btn = gr.Button("Send", scale=1)
 
                 # Clear history and memory buttons
@@ -278,44 +315,45 @@ class XylariaChat:
                     clear = gr.Button("Clear Conversation")
                     clear_memory = gr.Button("Clear Memory")
 
-            # Image upload toggle
-            upload_btn.click(
-                fn=lambda: gr.update(visible=True), 
-                inputs=None, 
-                outputs=[img]
-            )
+                # Clear image functionality
+                clear_image_btn.click(
+                    fn=lambda: None,
+                    inputs=None,
+                    outputs=[img],
+                    queue=False
+                )
 
-            # Submit functionality with streaming and image support
-            btn.click(
-                fn=streaming_response, 
-                inputs=[txt, chatbot, img], 
-                outputs=[txt, chatbot, img]
-            )
-            txt.submit(
-                fn=streaming_response, 
-                inputs=[txt, chatbot, img], 
-                outputs=[txt, chatbot, img]
-            )
+                # Submit functionality with streaming and image support
+                btn.click(
+                    fn=streaming_response,
+                    inputs=[txt, chatbot, img],
+                    outputs=[txt, chatbot, img]
+                )
+                txt.submit(
+                    fn=streaming_response,
+                    inputs=[txt, chatbot, img],
+                    outputs=[txt, chatbot, img]
+                )
 
-            # Clear conversation history
-            clear.click(
-                fn=lambda: None, 
-                inputs=None, 
-                outputs=[chatbot],
-                queue=False
-            )
+                # Clear conversation history
+                clear.click(
+                    fn=lambda: None,
+                    inputs=None,
+                    outputs=[chatbot],
+                    queue=False
+                )
 
-            # Clear persistent memory and reset conversation
-            clear_memory.click(
-                fn=self.reset_conversation,
-                inputs=None,
-                outputs=[chatbot],
-                queue=False
-            )
+                # Clear persistent memory and reset conversation
+                clear_memory.click(
+                    fn=self.reset_conversation,
+                    inputs=None,
+                    outputs=[chatbot],
+                    queue=False
+                )
+
+                # Ensure memory is cleared when the interface is closed
+                demo.load(self.reset_conversation, None, None)
 
-            # Ensure memory is cleared when the interface is closed
-            demo.load(self.reset_conversation, None, None)
-        
         return demo
 
 # Launch the interface