Update app.py

app.py

@@ -95,21 +95,21 @@ def chat_with_assistant(message, history):
 
     return response.content[0].text.strip()
 
-# CSS for an ISP-looking style
+# CSS for a blue-themed style
 isp_theme = gr.themes.Default().set(
-    body_background_fill="#F0F8FF",  # Light blue background
+    body_background_fill="#E6F3FF",  # Light blue background
     block_background_fill="#FFFFFF",  # White for input blocks
-    block_title_text_color="#00008B",  # Dark blue for text
-    block_label_background_fill="#FFD700",  # Yellow for labels
+    block_title_text_color="#003366",  # Dark blue for text
+    block_label_background_fill="#B8D8FF",  # Light blue for labels
     input_background_fill="#FFFFFF",  # White for input fields
-    button_primary_background_fill="#FF1493",  # Pink/Magenta for primary buttons
-    button_primary_background_fill_hover="#FF69B4",  # Lighter pink for hover
+    button_primary_background_fill="#0066CC",  # Medium blue for primary buttons
+    button_primary_background_fill_hover="#0052A3",  # Darker blue for hover
     button_primary_text_color="#FFFFFF",  # White text on buttons
-    button_secondary_background_fill="#FFD700",  # Yellow for secondary buttons
-    button_secondary_background_fill_hover="#FFA500",  # Orange for hover
-    button_secondary_text_color="#00008B",  # Dark blue text for secondary buttons
+    button_secondary_background_fill="#B8D8FF",  # Light blue for secondary buttons
+    button_secondary_background_fill_hover="#99C2FF",  # Slightly darker blue for hover
+    button_secondary_text_color="#003366",  # Dark blue text for secondary buttons
     block_border_width="1px",
-    block_border_color="#00008B",  # Dark blue border
+    block_border_color="#0066CC",  # Medium blue border
 )
 
 # Custom CSS for logo positioning and disclaimer footer
@@ -121,17 +121,42 @@ custom_css = """
     width: 100px;
     height: auto;
 }
-
 #disclaimer-footer {
     width: 100%;
-    background-color: #F0F8FF;
-    color: #00008B;
+    background-color: #B8D8FF;
+    color: #003366;
     text-align: center;
     padding: 10px 0;
     font-size: 14px;
-    border-top: 1px solid #00008B;
+    border-top: 1px solid #0066CC;
     margin-top: 20px;
 }
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+.title {
+    color: #003366;
+    margin-bottom: 10px;
+}
+.chatbot {
+    border: 1px solid #0066CC;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 15px;
+}
+.button-row {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 15px;
+}
+.examples-section {
+    background-color: #B8D8FF;
+    padding: 10px;
+    border-radius: 5px;
+    margin-top: 15px;
+}
 """
 
 # Environment variables
@@ -141,22 +166,37 @@ assistant_logo = os.getenv('LOGO')
 
 # Gradio interface using Blocks
 with gr.Blocks(theme=isp_theme, css=custom_css) as iface:
-    with gr.Row():
-        logo_html = f"""
-        <img id='logo-img' src='{assistant_logo}' alt='Assistant Logo' onerror="this.style.display='none';document.getElementById('logo-error').style.display='block';">
-        <div id='logo-error' style='display:none;'>Logo not found</div>
-        """
-        gr.HTML(logo_html)
-        gr.Markdown(f"# {assistant_title}", elem_classes="title")
+    with gr.Column(elem_classes="container"):
+        with gr.Row():
+            logo_html = f"""
+            <img id='logo-img' src='{assistant_logo}' alt='Assistant Logo' onerror="this.style.display='none';document.getElementById('logo-error').style.display='block';">
+            <div id='logo-error' style='display:none;'>Logo not found</div>
+            """
+            gr.HTML(logo_html)
+            gr.Markdown(f"# {assistant_title}", elem_classes="title")
+        
         gr.Markdown("Chat with a Historical Figure")
-    
-    chatbot = gr.Chatbot(
-        height=500, 
-        avatar_images=(None, assistant_avatar)
-    )
-    msg = gr.Textbox(placeholder="Type your message here...", container=False, scale=7)
-    clear = gr.ClearButton([msg, chatbot], value="Clear")
-    undo = gr.Button("Delete Previous")
+        
+        chatbot = gr.Chatbot(
+            height=500,
+            avatar_images=(None, assistant_avatar),
+            elem_classes="chatbot"
+        )
+        
+        msg = gr.Textbox(placeholder="Type your message here...", container=False, scale=7)
+        
+        with gr.Row(elem_classes="button-row"):
+            submit = gr.Button("Submit", variant="primary")
+            clear = gr.ClearButton([msg, chatbot], value="Clear", variant="secondary")
+            undo = gr.Button("Delete Previous", variant="secondary")
+        
+        gr.Examples(
+            examples=["Why were you called the Sun King?", "How well is France doing economically during your reign?"],
+            inputs=msg,
+            elem_classes="examples-section"
+        )
+        
+        gr.HTML("<div id='disclaimer-footer'>You are chatting with an AI assistant. Make sure to evaluate the accuracy of its answers.</div>")
 
     def user(user_message, history):
         return "", history + [[user_message, None]]
@@ -174,13 +214,9 @@ with gr.Blocks(theme=isp_theme, css=custom_css) as iface:
     msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False).then(
         bot, chatbot, chatbot
     )
-    undo.click(delete_previous, chatbot, chatbot)
-
-    gr.Examples(
-        examples=["Why were you called the Sun King?", "How well is France doing economically during your reign?"],
-        inputs=msg
+    submit.click(user, [msg, chatbot], [msg, chatbot], queue=False).then(
+        bot, chatbot, chatbot
     )
-
-    gr.Markdown("You are chatting with an AI assistant. Make sure to evaluate the accuracy of its answers.")
+    undo.click(delete_previous, chatbot, chatbot)
 
 iface.launch(auth=(username, password))