Update app.py

app.py

@@ -13,7 +13,7 @@ class ChatMessage:
     role: str
     content: str
 
-    def to_dict(self):
+    def to_dict__(self):
         """Converts ChatMessage to a dictionary for JSON serialization."""
         return {"role": self.role, "content": self.content}
 
@@ -39,7 +39,7 @@ class XylariaChat:
         self.persistent_memory = {}
 
         # System prompt with more detailed instructions
-        self.system_prompt = """You are a helpful and harmless assistant. You are Xylaria developed by Sk Md Saad Amin not by openai or an other institution. You should think step-by-step."""
+        self.system_prompt = """You are a helpful and harmless assistant. You are Xylaria developed by Sk Md Saad Amin . You should think step-by-step."""
 
     def store_information(self, key, value):
         """Store important information in persistent memory"""
@@ -297,14 +297,14 @@ class XylariaChat:
         }
         /* Image Upload Styling */
         .image-container {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 10px;
+        }
+        .image-upload {
             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 {
@@ -312,20 +312,24 @@ class XylariaChat:
             max-height: 200px;
             border-radius: 8px;
         }
-        .image-buttons {
-            display: flex;
-            gap: 10px;
+        /* Remove clear image buttons */
+        .clear-button {
+            display: none;
         }
-        .image-buttons button {
-            padding: 8px 15px;
-            border-radius: 5px;
-            background-color: #4CAF50;
-            color: white;
-            border: none;
-            cursor: pointer;
+        /* Animate chatbot messages */
+        .chatbot-container .message {
+            opacity: 0;
+            animation: fadeIn 0.5s ease-in-out forwards;
         }
-        .image-buttons button:hover {
-            background-color: #367c39;
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
         """
 
@@ -340,26 +344,22 @@ class XylariaChat:
 
                 # 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")
-                
-                with gr.Accordion("Math Input", open=False):
-                    with gr.Column():
-                        math_ocr_img = gr.Image(
-                            sources=["upload", "webcam"],
-                            type="filepath",
-                            label="Upload Image for math",
-                            elem_classes="image-preview"
-                        )
-                        with gr.Row():
-                            clear_math_ocr_btn = gr.Button("Clear Math Image")
+                    with gr.Row(elem_classes="image-container"):  # Use a Row for side-by-side layout
+                        with gr.Column(elem_classes="image-upload"):
+                            img = gr.Image(
+                                sources=["upload", "webcam"],
+                                type="filepath",
+                                label="Upload Image",
+                                elem_classes="image-preview"
+                            )
+                        with gr.Column(elem_classes="image-upload"):
+                            math_ocr_img = gr.Image(
+                                sources=["upload", "webcam"],
+                                type="filepath",
+                                label="Upload Image for Math OCR",
+                                elem_classes="image-preview"
+                            )
+                        # Removed clear buttons as per requirement
 
                 # Input row with improved layout
                 with gr.Row():
@@ -376,22 +376,6 @@ class XylariaChat:
                     clear = gr.Button("Clear Conversation")
                     clear_memory = gr.Button("Clear Memory")
 
-                # Clear image functionality
-                clear_image_btn.click(
-                    fn=lambda: None,
-                    inputs=None,
-                    outputs=[img],
-                    queue=False
-                )
-
-                # Clear Math OCR image functionality
-                clear_math_ocr_btn.click(
-                    fn=lambda: None,
-                    inputs=None,
-                    outputs=[math_ocr_img],
-                    queue=False
-                )
-
                 # Submit functionality with streaming and image support
                 btn.click(
                     fn=streaming_response,