Update app.py

app.py

@@ -12,7 +12,7 @@ class XylariaChat:
 
         # Initialize the inference client
         self.client = InferenceClient(
-            model="Qwen/Qwen-32B-Preview",  # Changed model to Qwen/Qwen-32B-Preview to test streaming
+            model="Qwen/Qwen-32B-Preview",
             api_key=self.hf_token
         )
 
@@ -21,7 +21,7 @@ class XylariaChat:
         self.persistent_memory = {}
         self.chat_file_path = "chat_history.txt"  # File to save chats
 
-        # System prompt with more detailed instructions
+        # System prompt
         self.system_prompt = """You are a helpful and harmless AI assistant you are Xylaria 1.4 Senoa, Made by Sk Md Saad Amin you think step by step
 """
 
@@ -114,28 +114,21 @@ class XylariaChat:
 
     def create_interface(self):
         def streaming_response(message, chat_history):
-            # Clear input textbox
             response_stream = self.get_response(message)
 
-            # If it's an error, return immediately
             if isinstance(response_stream, str):
                 return "", chat_history + [[message, response_stream]]
 
-            # Prepare for streaming response
             full_response = ""
             updated_history = chat_history + [[message, ""]]
 
-            # Streaming output
             for chunk in response_stream:
                 if chunk.choices[0].delta.content:
                     chunk_content = chunk.choices[0].delta.content
                     full_response += chunk_content
-
-                    # Update the last message in chat history with partial response
                     updated_history[-1][1] = full_response
                     yield "", updated_history
 
-            # Update conversation history
             self.conversation_history.append(
                 {"role": "user", "content": message}
             )
@@ -143,33 +136,44 @@ class XylariaChat:
                 {"role": "assistant", "content": full_response}
             )
 
-            # Limit conversation history to prevent token overflow
             if len(self.conversation_history) > 10:
                 self.conversation_history = self.conversation_history[-10:]
 
-            self.save_chat()
+            self.save_chat()  # Save after each interaction
 
         def load_chat_interface():
-            """Loads the chat history into the chatbot interface."""
             self.load_chat()
             return self.conversation_history
 
-        # Custom CSS for Inter font and sidebar
+        # Custom CSS for improved colors and styling
         custom_css = """
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
         body, .gradio-container {
             font-family: 'Inter', sans-serif !important;
+            background-color: #f8f8f8; /* Light background */
         }
-        
+
+        /* Chatbot styling */
         .chatbot-container .message {
             font-family: 'Inter', sans-serif !important;
+            padding: 10px 15px;
+            border-radius: 10px;
+            margin-bottom: 8px; /* Add margin between messages */
         }
-        
-        .gradio-container input, 
-        .gradio-container textarea, 
-        .gradio-container button {
-            font-family: 'Inter', sans-serif !important;
+
+        .chatbot-container .user {
+            background-color: #e0f2f7; /* Light blue for user messages */
+            border: 1px solid #a7d9ed; /* Light blue border */
+        }
+
+        .chatbot-container .assistant {
+            background-color: #f0f0f0; /* Light gray for assistant messages */
+            border: 1px solid #d3d3d3; /* Light gray border */
+        }
+
+        .chatbot-container .message-tools {
+            margin-right: 10px; /* Add some space between text and buttons */
         }
 
         /* Sidebar styling */
@@ -181,18 +185,28 @@ class XylariaChat:
             overflow-y: auto;
         }
 
-        #sidebar ul {
-            list-style-type: none;
-            padding: 0;
-        }
-
-        #sidebar li {
-            margin-bottom: 5px;
-        }
         /* Main chat area */
         #main-chat {
             padding: 20px;
         }
+
+        /* Textbox and buttons */
+        .gradio-container input, 
+        .gradio-container textarea, 
+        .gradio-container button {
+            font-family: 'Inter', sans-serif !important;
+            border-radius: 5px; /* Rounded corners */
+        }
+
+        .gradio-container button {
+            background-color: #4CAF50; /* Green button */
+            color: white;
+            transition: background-color 0.2s; /* Smooth transition for hover effect */
+        }
+
+        .gradio-container button:hover {
+            background-color: #3e8e41; /* Darker green on hover */
+        }
         """
 
         # Example prompts
@@ -222,7 +236,7 @@ class XylariaChat:
 
                 # Main chat interface
                 with gr.Column(elem_id="main-chat", scale=3):
-                    # Input row with improved layout (moved txt outside of conditional columns)
+                    # Input row (stays visible)
                     with gr.Row():
                         txt = gr.Textbox(
                             show_label=False,
@@ -231,7 +245,8 @@ class XylariaChat:
                             scale=4
                         )
                         btn = gr.Button("Send", scale=1)
-                    # Show Xylaria and example prompts only on the first page/new chat
+
+                    # Xylaria welcome and example prompts (initially visible)
                     with gr.Column(visible=True) as start_page:
                         gr.Markdown("# Xylaria")
                         with gr.Row():
@@ -242,67 +257,70 @@ class XylariaChat:
                                     outputs=txt
                                 )
 
+                    # Chat interface (initially hidden)
                     with gr.Column(visible=False) as chat_page:
                         chatbot = gr.Chatbot(
                             label="Xylaria 1.4 Senoa",
                             height=500,
-                            show_copy_button=True
+                            show_copy_button=True,
+                            avatar_images=("user.png", "xylaria.png"),  # Replace with your image paths
+                            bubble_full_width=False
                         )
 
                         # Clear history and memory buttons
                         clear = gr.Button("Clear Conversation")
                         clear_memory = gr.Button("Clear Memory")
 
-                    # Toggle between start page and chat page
-                    def toggle_page(choice):
-                        return gr.Column.update(visible=choice == "chat"), gr.Column.update(visible=choice == "start")
-
-                    # Submit functionality with streaming
-                    btn.click(
-                        fn=streaming_response,
-                        inputs=[txt, chatbot],
-                        outputs=[txt, chatbot]
-                    ).then(
-                        fn=lambda: toggle_page("chat"),
-                        inputs=gr.State("chat"),
-                        outputs=[chat_page, start_page]
-                    )
-                    txt.submit(
-                        fn=streaming_response,
-                        inputs=[txt, chatbot],
-                        outputs=[txt, chatbot]
-                    ).then(
-                        fn=lambda: toggle_page("chat"),
-                        inputs=gr.State("chat"),
-                        outputs=[chat_page, start_page]
-                    )
+            # Toggle between start and chat pages
+            def toggle_page(choice):
+                return gr.Column.update(visible=choice == "chat"), gr.Column.update(visible=choice == "start")
+
+            # Submit prompt
+            btn.click(
+                fn=streaming_response,
+                inputs=[txt, chatbot],
+                outputs=[txt, chatbot]
+            ).then(
+                fn=lambda: toggle_page("chat"),
+                inputs=gr.State("chat"),
+                outputs=[chat_page, start_page]
+            )
+            txt.submit(
+                fn=streaming_response,
+                inputs=[txt, chatbot],
+                outputs=[txt, chatbot]
+            ).then(
+                fn=lambda: toggle_page("chat"),
+                inputs=gr.State("chat"),
+                outputs=[chat_page, start_page]
+            )
 
-                    # Clear conversation history
-                    clear.click(
-                        fn=lambda: None,
-                        inputs=None,
-                        outputs=[chatbot],
-                        queue=False
-                    ).then(
-                        fn=lambda: toggle_page("start"),
-                        inputs=gr.State("start"),
-                        outputs=[chat_page, start_page]
-                    )
+            # Clear conversation
+            clear.click(
+                fn=lambda: None,
+                inputs=None,
+                outputs=[chatbot],
+                queue=False
+            ).then(
+                fn=lambda: toggle_page("start"),
+                inputs=gr.State("start"),
+                outputs=[chat_page, start_page]
+            )
 
-                    # Clear persistent memory and reset conversation
-                    clear_memory.click(
-                        fn=self.reset_conversation,
-                        inputs=None,
-                        outputs=[chatbot],
-                        queue=False
-                    ).then(
-                        fn=lambda: toggle_page("start"),
-                        inputs=gr.State("start"),
-                        outputs=[chat_page, start_page]
-                    )
+            # Clear memory
+            clear_memory.click(
+                fn=self.reset_conversation,
+                inputs=None,
+                outputs=[chatbot],
+                queue=False
+            ).then(
+                fn=lambda: toggle_page("start"),
+                inputs=gr.State("start"),
+                outputs=[chat_page, start_page]
+            )
 
-                    # Ensure memory is cleared when the interface is closed
-                    demo.load(self.reset_conversation, None, None)
+            # Load chat history on interface load
+            demo.load(self.reset_conversation, None, None)
 
         return demo
 
@@ -326,7 +344,7 @@ def main():
     chat = XylariaChat()
     interface = chat.create_interface()
     interface.launch(
-        share=False,  # Optional: create a public link
+        share=False,  # Set to True to create a public link
         debug=True   # Show detailed errors
     )