Update app.py

app.py

@@ -49,166 +49,57 @@ def respond(message, history, system_message, max_tokens, temperature, top_p, se
 
 # Custom CSS for branding with consistent styling and hiding footer
 css = """
-@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&display=swap');
-
-body { 
-    background-color: #f0f5fb; /* Light pastel blue background */
-    font-family: 'Crimson Pro', 'Palatino', serif;
-    max-width: 100%;
-    overflow-x: hidden;
-}
-.gradio-container { 
-    background-color: #FFFFFF; 
-    border-radius: 16px; 
-    box-shadow: 0 3px 10px rgba(0,0,0,0.05); 
-    max-width: 90%;
-    margin: 10px auto;
-}
-.app-header {
-    background: linear-gradient(135deg, #4a90e2, #75c6ef);
-    padding: 15px;
-    border-radius: 16px 16px 0 0;
-    position: relative;
-    color: white;
-    overflow: hidden;
-    border-bottom: 3px solid #e6c200;
+body {
+    background-color: #f0f5fb !important; /* Light pastel blue background */
 }
-.app-header::before {
-    content: "🛡️";
-    position: absolute;
-    font-size: 100px;
-    opacity: 0.1;
-    right: -20px;
-    top: -30px;
-    transform: rotate(15deg);
-}
-.app-title {
-    font-size: 24px;
-    font-weight: 600;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    font-family: 'Crimson Pro', serif;
-}
-.app-title .safe {
-    font-weight: 700;
-    margin-right: 5px;
-}
-.app-title .lm {
-    font-weight: 400;
-    letter-spacing: 1px;
-}
-.app-title .shield {
-    margin-right: 10px;
-    font-size: 22px;
-}
-.app-subtitle {
-    font-size: 14px;
-    opacity: 0.9;
-    margin-top: 5px;
-}
-/* Send and Clear Chat buttons with gold accents */
-button[aria-label="Send"], button[aria-label="Clear Chat"] {
+
+/* Gold button styling */
+.gold-button {
     background: white !important;
     color: #333 !important;
     border: 2px solid #e6c200 !important;
-    border-radius: 8px !important;
-    padding: 8px 16px !important;
-    font-weight: 600 !important;
-    transition: all 0.3s ease !important;
-    font-family: 'Crimson Pro', serif !important;
 }
-button[aria-label="Send"]:hover, button[aria-label="Clear Chat"]:hover {
+.gold-button:hover {
     background: #fff9e6 !important;
-    transform: translateY(-1px) !important;
-    box-shadow: 0 3px 6px rgba(230, 194, 0, 0.2) !important;
+    box-shadow: 0 2px 5px rgba(230, 194, 0, 0.2) !important;
 }
-/* Other buttons remain with blue gradient */
-button:not([aria-label="Send"]):not([aria-label="Clear Chat"]), .gradio-button:not([aria-label="Send"]):not([aria-label="Clear Chat"]) {
-    background: linear-gradient(to right, #4a90e2, #75c6ef) !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 8px !important;
-    padding: 8px 16px !important;
-    font-weight: 600 !important;
-    transition: all 0.3s ease !important;
-    font-family: 'Crimson Pro', serif !important;
-}
-button:not([aria-label="Send"]):not([aria-label="Clear Chat"]):hover, .gradio-button:not([aria-label="Send"]):not([aria-label="Clear Chat"]):hover {
-    transform: translateY(-1px) !important;
-    box-shadow: 0 3px 6px rgba(74, 144, 226, 0.2) !important;
+
+/* Message styling - no backgrounds */
+.message {
+    background-color: transparent !important;
 }
-.gradio-dropdown, .gradio-slider, .gradio-textbox, .gradio-checkbox {
-    border-radius: 8px !important;
-    border: 1px solid #e1e5eb !important;
-    font-family: 'Crimson Pro', serif !important;
+.message p {
+    background-color: transparent !important;
 }
-.model-select {
-    border-left: 3px solid #e6c200 !important;
-    padding-left: 8px !important;
+.message-wrap {
+    background-color: transparent !important;
 }
-/* Clean chat styling without background colors */
-.chatbot .user-message::before {
+
+/* Emoji for messages */
+.user .message::before {
     content: "👤 ";
     font-size: 16px;
+    margin-right: 5px;
 }
-.chatbot .assistant-message::before {
+.bot .message::before {
     content: "🛡️ ";
     font-size: 16px;
+    margin-right: 5px;
 }
-.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;
-}
-/* Remove the blue background behind message text */
-.chatbot .user-message p, .chatbot .assistant-message p {
-    background-color: transparent !important;
-}
-.chatbot .user-message {
-    color: #333333 !important;
-}
-.chatbot .assistant-message {
-    color: #1a73e8 !important;
-}
-#chatbot {
-    height: 400px !important;
-    overflow-y: auto !important;
-    border: 1px solid #e1e5eb !important;
-    border-radius: 8px !important;
-    background-color: #ffffff !important;
-}
-/* Hide Gradio branding and footer */
-footer, .footer {
-    display: none !important;
-}
-.gradio-footer {
-    display: none !important;
-}
-.gradio-container .footer {
-    display: none !important;
-}
-.gradio-container .footer-logo {
-    display: none !important;
-}
-div.gradio-footer {
-    display: none !important;
-}
-.footer-message {
-    display: none !important;
-}
-button[aria-label="Use via API"] {
+
+/* Hide footer */
+footer {
     display: none !important;
 }
+"""
 
 
 
-"""
-
-with gr.Blocks(css=css) as demo:
+with gr.Blocks(theme=gr.themes.Default(
+    primary_hue="blue",
+    secondary_hue="gold",
+    font=["Crimson Pro", "Palatino", "serif"]
+), css=css) as demo:
     # Custom header with branding - removed the hr element
     gr.HTML("""
     <div class="app-header">
@@ -275,7 +166,7 @@ with gr.Blocks(css=css) as demo:
                 )
             
             with gr.Row():
-                clear_button = gr.Button("Clear Chat")
+                clear_button = gr.Button("Clear Chat", variant="secondary", elem_classes=["gold-button"])
     
     # No footer - removed
     gr.HTML('<div style="height: 20px;"></div>')