Update app.py

app.py

@@ -1,6 +1,6 @@
 # -*- coding: utf-8 -*-
 """
-FOIA CHAT ASSISTANCE - Text-only chatbot (STT and TTS removed)
+YOUR FOIA CHAT ASSISTANCE - Text-only chatbot (STT and TTS removed)
 Drop this file into your Hugging Face Space (replace existing app.py) or run locally.
 
 Notes:
@@ -65,9 +65,9 @@ class WeeboAssistant:
             "Respond only in English. No long answers.\n"
         )
         # generation defaults tuned for speed (adjust if you need different behavior)
-        self.MAX_NEW_TOKENS = 256   # lowered from 512 for speed
-        self.DO_SAMPLE = False      # greedy = faster; set True if you want sampling
-        self.NUM_BEAMS = 1          # keep 1 for greedy (increase >1 for beam search)
+        self.MAX_NEW_TOKENS = 256    # lowered from 512 for speed
+        self.DO_SAMPLE = False       # greedy = faster; set True if you want sampling
+        self.NUM_BEAMS = 1           # keep 1 for greedy (increase >1 for beam search)
         self._init_models()
 
     def _init_models(self):
@@ -212,10 +212,10 @@ class WeeboAssistant:
         generation_kwargs = dict(
             input_ids=inputs["input_ids"],
             attention_mask=inputs.get("attention_mask", None),
-            max_length=max_length,               # input_len + max_new
-            max_new_tokens=max_new,              # explicit
-            do_sample=self.DO_SAMPLE,            # greedy if False -> faster
-            num_beams=self.NUM_BEAMS,            # keep 1 for speed
+            max_length=max_length,              # input_len + max_new
+            max_new_tokens=max_new,             # explicit
+            do_sample=self.DO_SAMPLE,           # greedy if False -> faster
+            num_beams=self.NUM_BEAMS,           # keep 1 for speed
             streamer=streamer,
             eos_token_id=getattr(self.llm_tokenizer, "eos_token_id", None),
             pad_token_id=getattr(self.llm_tokenizer, "pad_token_id", None),
@@ -259,74 +259,150 @@ def clear_textbox():
     return gr.Textbox.update(value="")
 
 
-# -------------------- Dark UI CSS --------------------
-DARK_CSS = """
-/* Base background & text */
+# -------------------- MODIFIED: Modern Dark UI CSS --------------------
+MODERN_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
+
+:root {
+    --body-bg: linear-gradient(135deg, #10141a 0%, #06090f 100%);
+    --chat-bg: #0b0f19;
+    --border-color: rgba(255, 255, 255, 0.08);
+    --text-color: #E6EEF8;
+    --input-bg: #131926;
+    --user-msg-bg: #1B2336;
+    --bot-msg-bg: #0F1522;
+    --primary-color: #0084ff;
+    --primary-hover: #006fdb;
+    --font-family: 'Poppins', sans-serif;
+}
+
 body, .gradio-container {
-  background: linear-gradient(180deg, #04060a 0%, #0b1220 100%) !important;
-  color: #E6EEF8 !important;
+    background: var(--body-bg) !important;
+    color: var(--text-color) !important;
+    font-family: var(--font-family) !important;
+}
+
+.gradio-container * {
+    font-family: var(--font-family) !important;
 }
 
-/* Header / Markdown text */
 h1, h2, h3, .markdown {
-  color: #E6EEF8 !important;
+    color: var(--text-color) !important;
 }
 
-/* Card backgrounds */
-.gr-block, .gr-box, .gr-row, .gr-column, .gradio-container .container {
-  background-color: transparent !important;
+.gr-block, .gr-box, .gr-row, .gr-column {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
 }
 
-/* Chatbot area */
 .gr-chatbot {
-  background: rgba(10, 14, 22, 0.6) !important;
-  border: 1px solid rgba(255,255,255,0.04) !important;
-  color: #E6EEF8 !important;
+    background: var(--chat-bg) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 12px !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
 }
 
-/* Chat messages - user and assistant bubbles */
-.gr-chatbot .message.user, .gr-chatbot .message.user p {
-  background: linear-gradient(180deg, #0f1724, #0b1220) !important;
-  color: #CFE7FF !important;
-  border: 1px solid rgba(255,255,255,0.04) !important;
+.gr-chatbot .message {
+    border-radius: 8px !important;
+    padding: 12px !important;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
+    border: none !important;
 }
-.gr-chatbot .message.bot, .gr-chatbot .message.bot p {
-  background: linear-gradient(180deg, #071126, #081426) !important;
-  color: #E6EEF8 !important;
-  border: 1px solid rgba(255,255,255,0.03) !important;
+
+.gr-chatbot .message.user {
+    background: var(--user-msg-bg) !important;
+    color: var(--text-color) !important;
 }
+.gr-chatbot .message.bot {
+    background: var(--bot-msg-bg) !important;
+    color: var(--text-color) !important;
+}
+
+.gr-chatbot .message p { margin: 0; }
 
-/* Input textbox and button */
 .gr-textbox, .gr-textbox textarea {
-  background: #071226 !important;
-  color: #E6EEF8 !important;
-  border: 1px solid rgba(255,255,255,0.04) !important;
+    background: var(--input-bg) !important;
+    color: var(--text-color) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 8px !important;
+    transition: all 0.2s ease-in-out;
 }
-.gr-button, .gr-button:hover {
-  background: linear-gradient(180deg, #0b63ff, #0a4ad6) !important;
-  color: white !important;
-  border: none !important;
-  box-shadow: 0 6px 18px rgba(6, 18, 55, 0.5) !important;
+.gr-textbox:focus, .gr-textbox textarea:focus {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 2px rgba(0, 132, 255, 0.3) !important;
 }
 
-/* Small UI tweaks */
-footer, .footer {
-  display: none;
+.gr-button {
+    background: var(--primary-color) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    box-shadow: 0 4px 12px rgba(0, 132, 255, 0.2) !important;
+    transition: all 0.2s ease-in-out !important;
+    font-weight: 500 !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px; /* Space between icon and text */
 }
-.gradio-container * {
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+
+.gr-button:hover {
+    background: var(--primary-hover) !important;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(0, 132, 255, 0.3) !important;
+}
+/* Hide default Gradio button text when we add our own */
+.send-btn span {
+    font-size: 1rem;
+}
+/* Add a send icon to the button */
+.send-btn::before {
+    content: '';
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+footer, .footer {
+    display: none !important;
 }
 """
 
-# -------------------- Gradio UI (dark) --------------------
-with gr.Blocks(css=DARK_CSS, title="YOUR FOIA CHAT ASSISTANCE") as demo:
-    gr.Markdown("# YOUR FOIA CHAT ASSISTANCE")
-    gr.Markdown("Chat (text-based) with the FOIA assistant. Use the box below to type your question.")
+# -------------------- MODIFIED: Gradio UI with Logo --------------------
+with gr.Blocks(css=MODERN_CSS, title="DimChi FOIA Assistant") as demo:
+    # NEW: Centered header with logo
+    with gr.Row():
+        gr.Markdown(
+            """
+            <div style="text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px;">
+                <img src="file/logo.png" alt="DimChi Logo" style="max-width: 120px; margin-bottom: 15px;">
+                <h1 style="margin: 0; font-size: 2.5rem; font-weight: 700;">DimChi FOIA Assistant</h1>
+                <p style="margin: 5px 0 0 0; font-size: 1.1rem; color: #a0b0c0;">Your intelligent chat partner for FOIA inquiries.</p>
+            </div>
+            """
+        )
 
     t2t_chatbot = gr.Chatbot(label="Conversation", bubble_full_width=False, height=520)
+
+    # NEW: Added elem_classes for specific button styling
     with gr.Row():
-        t2t_text_in = gr.Textbox(show_label=False, placeholder="Type your message here...", scale=4, container=False)
-        t2t_submit_btn = gr.Button("Send", variant="primary", scale=1)
+        t2t_text_in = gr.Textbox(
+            show_label=False,
+            placeholder="Type your message here...",
+            scale=4,
+            container=False
+        )
+        t2t_submit_btn = gr.Button(
+            "Send",
+            variant="primary",
+            scale=1,
+            elem_classes="send-btn" # NEW: Class for CSS targeting
+        )
 
     t2t_submit_btn.click(
         fn=t2t_pipeline,
@@ -351,4 +427,5 @@ with gr.Blocks(css=DARK_CSS, title="YOUR FOIA CHAT ASSISTANCE") as demo:
     )
 
 # launch
-demo.queue().launch(debug=True)
+# MODIFIED: Removed debug=True for a cleaner console in production
+demo.queue().launch()