Update app.py

app.py

@@ -47,13 +47,13 @@ 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 lighter blue background, Palatino font
+# Custom CSS for branding with consistent styling
 css = """
-@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&display=swap');
 
 body { 
-    background-color: #f8fafd; 
-    font-family: 'Palatino', 'EB Garamond', 'Times New Roman', serif;
+    background-color: #ffffff; 
+    font-family: 'Crimson Pro', 'Palatino', serif;
     max-width: 100%;
     overflow-x: hidden;
 }
@@ -71,6 +71,7 @@ body {
     position: relative;
     color: white;
     overflow: hidden;
+    border-bottom: 3px solid #e6c200;
 }
 .app-header::before {
     content: "🛡️";
@@ -87,14 +88,14 @@ body {
     margin: 0;
     display: flex;
     align-items: center;
-    font-family: 'Palatino', serif;
+    font-family: 'Crimson Pro', serif;
 }
 .app-title .safe {
-    font-weight: 800;
+    font-weight: 700;
     margin-right: 5px;
 }
 .app-title .lm {
-    font-weight: 300;
+    font-weight: 400;
     letter-spacing: 1px;
 }
 .app-title .shield {
@@ -106,10 +107,6 @@ body {
     opacity: 0.9;
     margin-top: 5px;
 }
-.golden-accent {
-    border-top: 2px solid #e6c200;
-    margin: 0;
-}
 button, .gradio-button {
     background: linear-gradient(to right, #4a90e2, #75c6ef) !important;
     color: white !important;
@@ -118,7 +115,7 @@ button, .gradio-button {
     padding: 8px 16px !important;
     font-weight: 600 !important;
     transition: all 0.3s ease !important;
-    font-family: 'Palatino', serif !important;
+    font-family: 'Crimson Pro', serif !important;
 }
 button:hover, .gradio-button:hover {
     transform: translateY(-1px) !important;
@@ -127,38 +124,65 @@ button:hover, .gradio-button:hover {
 .gradio-dropdown, .gradio-slider, .gradio-textbox, .gradio-checkbox {
     border-radius: 8px !important;
     border: 1px solid #e1e5eb !important;
-    font-family: 'Palatino', serif !important;
+    font-family: 'Crimson Pro', serif !important;
 }
 .model-select {
     border-left: 3px solid #e6c200 !important;
     padding-left: 8px !important;
 }
+/* Clean chat styling without background colors */
+.chatbot .user-message::before {
+    content: "👤 ";
+    font-size: 16px;
+}
 .chatbot .assistant-message::before {
     content: "🛡️ ";
+    font-size: 16px;
+}
+.chatbot .user-message, .chatbot .assistant-message {
+    background-color: transparent !important;
+    border-radius: 0 !important;
+    padding: 10px !important;
+    border-bottom: 1px solid #f0f0f0 !important;
+    font-family: 'Crimson Pro', serif !important;
+    font-size: 16px !important;
 }
 .chatbot .user-message {
-    background-color: #f0f7ff !important;
-    border-radius: 8px !important;
+    color: #333333 !important;
 }
 .chatbot .assistant-message {
-    background-color: #ebf5f7 !important;
-    border-radius: 8px !important;
+    color: #1a73e8 !important;
 }
 #chatbot {
     height: 400px !important;
     overflow-y: auto !important;
+    border: 1px solid #e1e5eb !important;
+    border-radius: 8px !important;
+    background-color: #ffffff !important;
 }
-.footer {
-    display: none;
+/* Footer hiding */
+.footer, #footer, .gradio-footer, #component-38, #component-39 {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    width: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    opacity: 0 !important;
 }
-#component-0 {
-    max-width: 100%;
+/* Hide Gradio branding */
+.gradio-container > div:last-child {
+    display: none !important;
 }
+.gradio-container .footer-logo, .gradio-container footer {
+    display: none !important;
+}
+
 
 """
 
 with gr.Blocks(css=css) as demo:
-    # Custom header with branding
+    # Custom header with branding - removed the hr element
     gr.HTML("""
     <div class="app-header">
         <h1 class="app-title">
@@ -168,7 +192,6 @@ with gr.Blocks(css=css) as demo:
         </h1>
         <p class="app-subtitle">Responsible AI for everyone</p>
     </div>
-    <hr class="golden-accent">
     """)
         
     with gr.Row():
@@ -287,4 +310,16 @@ with gr.Blocks(css=css) as demo:
     clear_button.click(clear_history, None, chatbot, queue=False)
 
 if __name__ == "__main__":
-    demo.launch()
+    # Launch with custom footer_html to remove the "Built with Gradio" text
+    demo.launch(
+        show_api=False,  # Hide the API button
+        share=False,     # Don't create a public link
+        debug=False,     # Hide debug info
+        enable_queue=True,
+        show_error=True,
+        favicon_path=None,
+        height="auto",
+        width="100%",
+        # Empty footer to hide "Built with Gradio"
+        footer_html=""
+    )