Update app.py

app.py

@@ -4,7 +4,7 @@ from huggingface_hub import InferenceClient
 # Define available models (update with your actual model IDs)
 model_list = {
     "Safe LM": "HuggingFaceH4/zephyr-7b-beta",  # Replace with your Safe LM model ID
-    "Zephyr Beta": "HuggingFaceH4/zephyr-7b-beta",
+    "Baseline 1": "HuggingFaceH4/zephyr-7b-beta",
     "Another Model": "HuggingFaceH4/zephyr-7b-beta"
 }
 
@@ -47,45 +47,50 @@ 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 blue, teal and gold accents
+# Custom CSS for branding with lighter blue background, Palatino font
 css = """
+@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
+
 body { 
-    background-color: #f5f7fa; 
-    font-family: 'Inter', 'Segoe UI', sans-serif;
+    background-color: #f8fafd; 
+    font-family: 'Palatino', 'EB Garamond', 'Times New Roman', serif;
+    max-width: 100%;
+    overflow-x: hidden;
 }
 .gradio-container { 
     background-color: #FFFFFF; 
     border-radius: 16px; 
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
-    max-width: 95%;
-    margin: 20px auto;
+    box-shadow: 0 3px 10px rgba(0,0,0,0.05); 
+    max-width: 90%;
+    margin: 10px auto;
 }
 .app-header {
-    background: linear-gradient(135deg, #0a76d8, #36b3c2);
-    padding: 20px;
+    background: linear-gradient(135deg, #4a90e2, #75c6ef);
+    padding: 15px;
     border-radius: 16px 16px 0 0;
     position: relative;
     color: white;
     overflow: hidden;
 }
 .app-header::before {
-    content: "🔒";
+    content: "🛡️";
     position: absolute;
-    font-size: 120px;
+    font-size: 100px;
     opacity: 0.1;
     right: -20px;
     top: -30px;
     transform: rotate(15deg);
 }
 .app-title {
-    font-size: 28px;
-    font-weight: 800;
+    font-size: 24px;
+    font-weight: 600;
     margin: 0;
     display: flex;
     align-items: center;
+    font-family: 'Palatino', serif;
 }
 .app-title .safe {
-    font-weight: 900;
+    font-weight: 800;
     margin-right: 5px;
 }
 .app-title .lm {
@@ -94,7 +99,7 @@ body {
 }
 .app-title .shield {
     margin-right: 10px;
-    font-size: 24px;
+    font-size: 22px;
 }
 .app-subtitle {
     font-size: 14px;
@@ -102,37 +107,54 @@ body {
     margin-top: 5px;
 }
 .golden-accent {
-    border-top: 3px solid #e6c200;
+    border-top: 2px solid #e6c200;
     margin: 0;
 }
 button, .gradio-button {
-    background: linear-gradient(to right, #0a76d8, #36b3c2) !important;
+    background: linear-gradient(to right, #4a90e2, #75c6ef) !important;
     color: white !important;
     border: none !important;
-    border-radius: 12px !important;
-    padding: 10px 20px !important;
+    border-radius: 8px !important;
+    padding: 8px 16px !important;
     font-weight: 600 !important;
     transition: all 0.3s ease !important;
+    font-family: 'Palatino', serif !important;
 }
 button:hover, .gradio-button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 8px rgba(10, 118, 216, 0.3) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 3px 6px rgba(74, 144, 226, 0.2) !important;
 }
 .gradio-dropdown, .gradio-slider, .gradio-textbox, .gradio-checkbox {
-    border-radius: 12px !important;
+    border-radius: 8px !important;
     border: 1px solid #e1e5eb !important;
+    font-family: 'Palatino', serif !important;
 }
 .model-select {
-    border-left: 4px solid #e6c200 !important;
-    padding-left: 10px !important;
+    border-left: 3px solid #e6c200 !important;
+    padding-left: 8px !important;
+}
+.chatbot .assistant-message::before {
+    content: "🛡️ ";
+}
+.chatbot .user-message {
+    background-color: #f0f7ff !important;
+    border-radius: 8px !important;
+}
+.chatbot .assistant-message {
+    background-color: #ebf5f7 !important;
+    border-radius: 8px !important;
+}
+#chatbot {
+    height: 400px !important;
+    overflow-y: auto !important;
 }
 .footer {
-    text-align: center;
-    color: #666;
-    font-size: 12px;
-    margin-top: 20px;
-    padding: 10px;
+    display: none;
 }
+#component-0 {
+    max-width: 100%;
+}
+
 """
 
 with gr.Blocks(css=css) as demo:
@@ -140,7 +162,7 @@ with gr.Blocks(css=css) as demo:
     gr.HTML("""
     <div class="app-header">
         <h1 class="app-title">
-            <span class="shield">🔒</span>
+            <span class="shield">🛡️</span>
             <span class="safe">Safe</span>
             <span class="lm">Playground</span>
         </h1>
@@ -205,12 +227,8 @@ with gr.Blocks(css=css) as demo:
             with gr.Row():
                 clear_button = gr.Button("Clear Chat")
     
-    # Footer with branding
-    gr.HTML("""
-    <div class="footer">
-        <p>Safe Playground™ | Responsible AI Technology | © 2025</p>
-    </div>
-    """)
+    # No footer - removed
+    gr.HTML('<div style="height: 20px;"></div>')
     
     # Fix 1: Correct event handling for the chatbot interface
     def user(user_message, history):