Update app.py

app.py

@@ -54,9 +54,6 @@ MODEL_NAMES = list(MODELS.keys())
 # Core Chat Logic
 # ----------------------------------------------------------------------
 def generate_response(history, system_message, max_tokens, selected_model):
-    """
-    Generates the response. 
-    """
     if not history:
         return history
         
@@ -78,7 +75,6 @@ def generate_response(history, system_message, max_tokens, selected_model):
             final_system_message = system_message
 
         messages = [{"role": "system", "content": final_system_message}]
-        # Sanitize history 
         api_history = [{"role": m["role"], "content": m["content"]} for m in history]
         messages.extend(api_history)
 
@@ -127,30 +123,33 @@ def user_input(user_message, history):
     return history, ""
 
 # ----------------------------------------------------------------------
-# CSS / Visual System ("The Alabaster Construct")
+# CSS / Visual System ("Alabaster Clean")
 # ----------------------------------------------------------------------
 current_date_display = datetime.now().strftime("%B %d, %Y")
 
 css = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@300;400;600&display=swap');
-
-/* 1. GLOBAL VARIABLES & RESET */
-:root {
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Space+Grotesk:wght@400;600&display=swap');
+
+/* 1. FORCE LIGHT MODE / RESET DARK THEME LEAKS */
+:root, .dark, body, .gradio-container {
+    --body-background-fill: #FAFAFA !important;
+    --body-text-color: #444444 !important;
+    --background-fill-primary: #FFFFFF !important;
+    --background-fill-secondary: #FAFAFA !important;
+    --block-background-fill: #FFFFFF !important;
+    --block-label-text-color: #999999 !important;
+    --input-background-fill: rgba(255, 255, 255, 0.7) !important;
     --bg-core: #FAFAFA;
-    --bg-light: #FFFFFF;
-    --text-primary: #111111;  /* Ink */
-    --text-body: #444444;     /* Graphite */
+    --text-primary: #111111;
+    --text-body: #444444;
     --text-dim: #999999;
-    --border-glass: rgba(0, 0, 0, 0.06);
-    --border-highlight: rgba(0, 0, 0, 0.12);
-    --surface-glass: rgba(255, 255, 255, 0.7);
+    --border-glass: rgba(0, 0, 0, 0.08);
     --font-head: 'Space Grotesk', sans-serif;
     --font-body: 'Inter', sans-serif;
-    --font-mono: 'JetBrains Mono', monospace;
 }
 
-body, .gradio-container {
-    background-color: var(--bg-core) !important;
+/* Force background animation on body */
+body {
     background: radial-gradient(circle at 50% 50%, #FFFFFF 0%, #F2F2F4 100%) !important;
     background-size: 150% 150% !important;
     animation: daylight 25s ease-in-out infinite alternate;
@@ -182,19 +181,16 @@ body, .gradio-container {
     font-weight: 600;
     font-size: 2rem;
     color: var(--text-primary);
-    letter-spacing: -0.04em;
     margin: 0;
 }
 .liquid-header .meta {
-    font-family: var(--font-mono);
-    font-size: 0.75rem;
+    font-family: var(--font-body);
+    font-size: 0.85rem;
     color: var(--text-dim);
     margin-top: 0.5rem;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
 }
 
-/* 4. CHATBOT (The Data Blocks) */
+/* 4. CHATBOT (Clean Paper Look) */
 .gradio-container .chatbot {
     background: transparent !important;
     border: none !important;
@@ -203,120 +199,97 @@ body, .gradio-container {
     overflow-y: auto;
 }
 .message {
-    border-radius: 4px !important;
+    border-radius: 8px !important;
     border: 1px solid var(--border-glass) !important;
-    padding: 1rem !important;
+    padding: 1.2rem !important;
     margin-bottom: 1rem !important;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
 }
-/* User Block */
+/* User Message */
 .message.user {
-    background-color: #F4F4F5 !important; /* Slight Grey Wash */
-    border-left: 2px solid var(--text-dim) !important;
+    background-color: #F4F4F5 !important; /* Light Grey */
+    border-left: none !important;
     justify-content: flex-end;
 }
-/* Bot Block */
+/* Bot Message */
 .message.bot {
-    background-color: #FFFFFF !important;
-    border-left: 2px solid var(--text-primary) !important;
+    background-color: #FFFFFF !important; /* Pure White */
+    border-left: none !important;
 }
 .message * {
     font-family: var(--font-body);
     color: var(--text-body) !important;
-    font-size: 0.95rem !important;
+    font-size: 1rem !important;
     line-height: 1.6 !important;
 }
 
-/* 5. COMMAND BAR (Input) */
+/* 5. INPUT BAR */
 .command-bar textarea {
-    background: var(--surface-glass) !important;
+    background: rgba(255, 255, 255, 0.85) !important;
     backdrop-filter: blur(12px) !important;
     -webkit-backdrop-filter: blur(12px) !important;
-    border: 1px solid var(--border-highlight) !important;
+    border: 1px solid var(--border-glass) !important;
     border-radius: 12px !important;
-    box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
     color: var(--text-primary) !important;
     font-family: var(--font-body) !important;
     padding: 1rem !important;
     font-size: 1rem !important;
-    transition: all 0.2s ease;
 }
 .command-bar textarea:focus {
-    border-color: var(--text-primary) !important;
+    border-color: var(--text-dim) !important;
     background: #FFFFFF !important;
-    box-shadow: 0 12px 40px rgba(0,0,0,0.1) !important;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
 }
 
-/* 6. HUD (Settings Accordion) */
+/* 6. SETTINGS (Simple HUD) */
 .hud-accordion {
     background: transparent !important;
     border: none !important;
     margin-top: 1rem !important;
 }
 .hud-accordion .label-wrap {
-    font-family: var(--font-mono) !important;
-    font-size: 0.7rem !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.1em !important;
+    font-family: var(--font-body) !important;
+    font-size: 0.85rem !important;
     color: var(--text-dim) !important;
-    cursor: pointer;
 }
-/* HUD Inputs */
 .hud-panel {
     border-top: 1px solid var(--border-glass);
     padding-top: 1rem;
 }
-.hud-panel .block {
-    background: transparent !important;
-    border: none !important;
+/* Force white backgrounds on inputs inside settings to kill dark mode leaks */
+.hud-panel input, .hud-panel textarea, .hud-panel .single-select, .hud-panel .wrap {
+    background-color: #FFFFFF !important;
+    color: #000000 !important;
+    border: 1px solid var(--border-glass) !important;
 }
-.hud-panel label span {
-    font-family: var(--font-mono) !important;
-    font-size: 0.7rem !important;
+.hud-panel span {
     color: var(--text-dim) !important;
-    text-transform: uppercase;
-}
-.hud-panel input, .hud-panel textarea, .hud-panel .wrap {
-    background: rgba(255,255,255,0.5) !important;
-    border: 1px solid var(--border-glass) !important;
-    font-family: var(--font-mono) !important;
-    font-size: 0.8rem !important;
-    color: var(--text-primary) !important;
 }
 
-/* 7. BUTTONS & EXAMPLES */
-button.primary-btn {
-    background: var(--text-primary) !important;
-    color: #FFF !important;
-    font-family: var(--font-mono) !important;
-    border-radius: 6px !important;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    font-size: 0.75rem !important;
-}
+/* 7. EXAMPLES */
 .examples-container button {
-    background: #FFF !important;
+    background: #FFFFFF !important;
     border: 1px solid var(--border-glass) !important;
-    font-family: var(--font-body) !important;
-    font-size: 0.85rem !important;
     color: var(--text-body) !important;
-    border-radius: 4px !important;
-    transition: all 0.2s;
+    border-radius: 6px !important;
+    font-size: 0.9rem !important;
+    padding: 0.5rem 1rem !important;
+    margin: 4px !important;
 }
 .examples-container button:hover {
-    border-color: var(--text-primary) !important;
-    transform: translateY(-1px);
+    background-color: #F9FAFB !important;
+    border-color: var(--text-dim) !important;
 }
 
-/* Hide Footer */
 footer { display: none !important; }
 """
 
 header_html = f"""
 <div class="liquid-header">
-    <h1>ALABASTER CONSTRUCT</h1>
+    <h1>AI Workspace</h1>
     <div class="meta">
-        SYSTEM ONLINE • {current_date_display} • SECURE CHANNEL
+        {current_date_display} • Secure Environment
     </div>
 </div>
 """
@@ -325,7 +298,7 @@ header_html = f"""
 # Layout Construction
 # ----------------------------------------------------------------------
 with gr.Blocks(
-    title="Alabaster AI",
+    title="AI Workspace",
     theme=gr.themes.Soft(primary_hue="neutral", radius_size="none"),
     css=css
 ) as demo:
@@ -335,19 +308,19 @@ with gr.Blocks(
         # 1. Header
         gr.HTML(header_html)
 
-        # 2. Chat Area (Data Blocks)
+        # 2. Chat Area
         chatbot = gr.Chatbot(
             type="messages",
             show_label=False,
-            avatar_images=None,
+            avatar_images=None, 
             render_markdown=True,
             elem_id="main-chatbot"
         )
 
-        # 3. Command Bar (Input)
+        # 3. Input Bar
         with gr.Row():
             msg_input = gr.Textbox(
-                placeholder="Enter command or query...",
+                placeholder="Type a message...",
                 label=None,
                 show_label=False,
                 lines=1,
@@ -356,31 +329,31 @@ with gr.Blocks(
                 autofocus=True
             )
 
-        # 4. HUD / Settings (Below Input, Compact)
-        with gr.Accordion("/// SYSTEM PARAMETERS", open=False, elem_classes="hud-accordion"):
+        # 4. Settings (Accordion below input)
+        with gr.Accordion("Settings", open=False, elem_classes="hud-accordion"):
             with gr.Column(elem_classes="hud-panel"):
                 with gr.Row():
                     selected_model = gr.Dropdown(
                         choices=MODEL_NAMES,
                         value=MODEL_NAMES[0],
-                        label="INFERENCE ENGINE",
+                        label="Select Model",
                         interactive=True,
                         scale=2
                     )
                     max_tokens = gr.Slider(
                         minimum=1, maximum=30000, value=4000, step=100, 
-                        label="TOKEN LIMIT",
+                        label="Token Limit",
                         scale=1
                     )
                 with gr.Row():
                     system_message = gr.Textbox(
                         value="Anda adalah asisten AI. Jawab dalam Bahasa Indonesia, di bawah 100 kata. Berikan label yang jelas antara fakta dan inferensi.",
-                        label="PRIME DIRECTIVE (SYSTEM PROMPT)",
-                        lines=1, 
+                        label="System Prompt",
+                        lines=2, 
                         max_lines=3
                     )
 
-        # 5. Examples (Fixed: Wrapped in Column to apply CSS class)
+        # 5. Examples
         with gr.Column(elem_classes="examples-container"):
             gr.Examples(
                 examples=[
@@ -407,7 +380,7 @@ with gr.Blocks(
 if __name__ == "__main__":
     demo.launch(
         auth=gradio_auth, 
-        auth_message="ACCESS CONTROL: IDENTIFY YOURSELF",
+        auth_message="Please login to access the chat interface",
         server_name="0.0.0.0",
         ssr_mode=False,
         server_port=7860,