Update app.py

app.py

@@ -47,67 +47,49 @@ def respond(message, history, system_message, max_tokens, temperature, top_p, se
         print(f"Error calling model API: {e}")
         yield f"Sorry, there was an error: {str(e)}"
 
-# Custom CSS for branding with consistent styling and hiding footer
+# Custom CSS for styling
 css = """
-body {
-    background-color: #f0f5fb !important; /* Light pastel blue background */
+body { 
+    background-color: #f0f5fb; /* Light pastel blue background */
 }
-
-/* Gold button styling */
-.gold-button {
-    background: white !important;
+.gradio-container { 
+    margin: 0 auto;
+}
+/* Simple styling for buttons */
+#send-btn {
+    background-color: white !important;
     color: #333 !important;
     border: 2px solid #e6c200 !important;
 }
-.gold-button:hover {
-    background: #fff9e6 !important;
-    box-shadow: 0 2px 5px rgba(230, 194, 0, 0.2) !important;
-}
-
-/* Message styling - no backgrounds */
-.message {
-    background-color: transparent !important;
-}
-.message p {
-    background-color: transparent !important;
+#send-btn:hover {
+    background-color: #fff9e6 !important;
 }
-.message-wrap {
-    background-color: transparent !important;
-}
-
-/* Emoji for messages */
-.user .message::before {
-    content: "👤 ";
-    font-size: 16px;
-    margin-right: 5px;
+#clear-btn {
+    background-color: white !important;
+    color: #333 !important;
+    border: 2px solid #e6c200 !important;
 }
-.bot .message::before {
-    content: "🛡️ ";
-    font-size: 16px;
-    margin-right: 5px;
+#clear-btn:hover {
+    background-color: #fff9e6 !important;
 }
-
-/* Hide footer */
 footer {
     display: none !important;
 }
+.footer {
+    display: none !important;
+}
 """
 
-
-with gr.Blocks(theme=gr.themes.Default(
-    primary_hue="blue",
-    secondary_hue="yellow", # Using yellow instead of gold which isn't available
-    font=["Crimson Pro", "Palatino", "serif"]
-), css=css) as demo:
-    # Custom header with branding - removed the hr element
+with gr.Blocks(css=css) as demo:
+    # Custom header with branding
     gr.HTML("""
-    <div class="app-header">
-        <h1 class="app-title">
-            <span class="shield">🛡️</span>
-            <span class="safe">Safe</span>
-            <span class="lm">Playground</span>
+    <div style="background: linear-gradient(135deg, #4a90e2, #75c6ef); padding: 15px; border-radius: 16px 16px 0 0; color: white; border-bottom: 3px solid #e6c200;">
+        <h1 style="font-size: 24px; font-weight: 600; margin: 0; display: flex; align-items: center; font-family: 'Palatino', serif;">
+            <span style="margin-right: 10px; font-size: 22px;">🛡️</span>
+            <span style="font-weight: 700; margin-right: 5px;">Safe</span>
+            <span style="font-weight: 400; letter-spacing: 1px;">Playground</span>
         </h1>
-        <p class="app-subtitle">Responsible AI for everyone</p>
+        <p style="font-size: 14px; opacity: 0.9; margin-top: 5px;">Responsible AI for everyone</p>
     </div>
     """)
         
@@ -147,9 +129,7 @@ with gr.Blocks(theme=gr.themes.Default(
             chatbot = gr.Chatbot(
                 label="Conversation", 
                 show_label=True,
-                # Removed avatar_images which may not be supported in some Gradio versions
-            elem_id="chatbot",
-                height=500
+                height=400
             )
             with gr.Row():
                 user_input = gr.Textbox(
@@ -161,14 +141,11 @@ with gr.Blocks(theme=gr.themes.Default(
                 send_button = gr.Button(
                     "Send", 
                     scale=1,
-                    variant="primary"
+                    elem_id="send-btn"
                 )
             
             with gr.Row():
-                clear_button = gr.Button("Clear Chat", variant="secondary", elem_classes=["gold-button"])
-    
-    # No footer - removed
-    gr.HTML('<div style="height: 20px;"></div>')
+                clear_button = gr.Button("Clear Chat", elem_id="clear-btn")
     
     # Fix 1: Correct event handling for the chatbot interface
     def user(user_message, history):
@@ -176,10 +153,13 @@ with gr.Blocks(theme=gr.themes.Default(
         return "", history + [[user_message, None]]
     
     def bot(history, system_message, max_tokens, temperature, top_p, selected_model):
-                    # Get the last user message from history (with error checking)
+        # Ensure there's history
         if not history or len(history) == 0:
             return history
+            
+        # Get the last user message from history
         user_message = history[-1][0]
+        
         # Call respond function with the message
         response_generator = respond(
             user_message, 
@@ -190,12 +170,13 @@ with gr.Blocks(theme=gr.themes.Default(
             top_p, 
             selected_model
         )
+        
         # Update history as responses come in
         for response in response_generator:
             history[-1][1] = response
             yield history
     
-    # Wire up the event chain - use queue=True for the bot responses
+    # Wire up the event chain
     user_input.submit(
         user,
         [user_input, chatbot],
@@ -220,12 +201,11 @@ with gr.Blocks(theme=gr.themes.Default(
         queue=True
     )
     
-    # Clear the chat history - use a proper function instead of lambda
+    # Clear the chat history - using a proper function
     def clear_history():
         return []
     
     clear_button.click(clear_history, None, chatbot, queue=False)
 
 if __name__ == "__main__":
-    # Simple launch without parameters that might not be supported
     demo.launch()