Dark theme with proper contrast: white text on black background

app.py

@@ -1,5 +1,5 @@
 """
-Stack X Ultimate Inference — Hugging Face Space
+Stack X Ultimate — Hugging Face Space
 Agentic tool-calling model demo.
 """
 
@@ -8,7 +8,7 @@ import re
 import json
 from datetime import datetime
 
-# ─── Tool Definitions ────────────────────────────────────────────────────────
+# ─── Tools ─────────────────────────────────────────────────────────────────
 
 TOOLS = [
     {
@@ -65,8 +65,6 @@ TOOLS = [
     },
 ]
 
-# ─── Tool Implementations ──────────────────────────────────────────────────
-
 def calculator(expression: str) -> str:
     try:
         cleaned = re.sub(r"[^0-9+\-*/.()% ]", "", expression)
@@ -101,183 +99,232 @@ def run_command(command: str, cwd: str = ".") -> str:
         return f"Error: {e}"
 
 def execute_tool(tool_name: str, tool_args: dict) -> str:
-    fn_map = {
+    fns = {
         "calculator": lambda: calculator(tool_args.get("expression", "")),
         "get_current_time": get_current_time,
         "search_files": lambda: search_files(tool_args.get("path", "."), tool_args.get("pattern", "*")),
         "run_command": lambda: run_command(tool_args.get("command", ""), tool_args.get("cwd", ".")),
     }
-    fn = fn_map.get(tool_name, lambda: f"Unknown tool: {tool_name}")
-    return fn()
+    return fns.get(tool_name, lambda: f"Unknown: {tool_name}")()
 
-# ─── Response Generator ──────────────────────────────────────────────────────
+# ─── Response Logic ──────────────────────────────────────────────────────────
 
 def generate_response(message: str) -> dict:
     msg_lower = message.lower()
 
-    # Calculator
-    calc_kw = ["calculate", "compute", "math", "roi", "compound", "interest", "%", "$"]
-    if any(k in msg_lower for k in calc_kw):
+    if any(k in msg_lower for k in ["calculate", "compute", "math", "roi", "compound", "interest", "%", "$"]):
         expr = re.search(r"[\d+\-*/.()% ]+", message)
-        return {
-            "tool_name": "calculator",
-            "tool_args": {"expression": expr.group().strip() if expr else "0"},
-            "display": f"Calculating: `{message}`"
-        }
+        return {"tool": "calculator", "args": {"expression": expr.group().strip() if expr else "0"}}
 
-    # Time
-    time_kw = ["time", "date", "now", "current"]
-    if any(k in msg_lower for k in time_kw):
-        return {
-            "tool_name": "get_current_time",
-            "tool_args": {},
-            "display": "Fetching current time..."
-        }
+    if any(k in msg_lower for k in ["time", "date", "now", "current"]):
+        return {"tool": "get_current_time", "args": {}}
 
-    # File search
-    file_kw = ["find", "search", "file", "look for", "where is", "list"]
-    if any(k in msg_lower for k in file_kw):
+    if any(k in msg_lower for k in ["find", "search", "file", "look for", "where is", "list"]):
         pattern = re.search(r"\*\.[a-zA-Z]+", message)
-        return {
-            "tool_name": "search_files",
-            "tool_args": {"path": ".", "pattern": pattern.group() if pattern else "*"},
-            "display": f"Searching for files matching your query..."
-        }
+        return {"tool": "search_files", "args": {"path": ".", "pattern": pattern.group() if pattern else "*"}}
 
-    # Command
-    cmd_kw = ["run", "execute", "terminal", "bash", "git ", "ls", "ps ", "docker"]
-    if any(k in msg_lower for k in cmd_kw):
+    if any(k in msg_lower for k in ["run", "execute", "terminal", "bash", "git ", "ls ", "ps ", "docker", "command"]):
         match = re.search(r"`([^`]+)`", message)
         cmd = match.group(1) if match else message.split()[-1]
-        return {
-            "tool_name": "run_command",
-            "tool_args": {"command": cmd, "cwd": "."},
-            "display": f"Running: `{cmd}`"
-        }
+        return {"tool": "run_command", "args": {"command": cmd, "cwd": "."}}
 
-    # No tool
-    return {
-        "tool_name": None,
-        "tool_args": {},
-        "display": None
-    }
+    return {"tool": None, "args": {}}
 
 # ─── Chat Function ───────────────────────────────────────────────────────────
 
 def chat_fn(message, history):
     resp = generate_response(message)
 
-    if resp["tool_name"]:
-        tool_result = execute_tool(resp["tool_name"], resp["tool_args"])
-        call_display = f"🔧 Calling `{resp['tool_name']}`...\n\n```\n{json.dumps(resp['tool_args'], indent=2)}\n```"
-        result_display = f"✅ **{resp['tool_name']}** result:\n\n```\n{tool_result}\n```"
-        return [[resp["display"], call_display], [None, result_display]]
+    if resp["tool"]:
+        result = execute_tool(resp["tool"], resp["args"])
+        call_msg = f"🔧 Calling `{resp['tool']}`...\n\n```json\n{json.dumps(resp['args'], indent=2)}\n```"
+        result_msg = f"✅ **{resp['tool']}** result:\n\n```\n{result}\n```"
+        return [[call_msg, result_msg]]
+
+    return [[message,
+        "Stack X Ultimate is a fine-tuned agentic model that calls tools to answer your questions. "
+        "Try one of the examples below to see it in action!"
+    ]]
+
+# ─── Dark Theme CSS ─────────────────────────────────────────────────────────
+
+DARK_CSS = """
+:root {
+    --background: #0a0a0a;
+    --surface: #111111;
+    --border: #1e1e1e;
+    --text-primary: #ededed;
+    --text-secondary: #a1a1a1;
+    --accent: #a855f7;
+    --accent-hover: #9333ea;
+    --code-bg: #161616;
+}
 
-    return [[message, "Stack X Ultimate is a fine-tuned agentic model that calls tools to answer your questions. Try one of the examples below to see it in action!"], None]
+body, html {
+    background: var(--background) !important;
+    color: var(--text-primary) !important;
+}
 
-# ─── Gradio Interface ────────────────────────────────────────────────────────
+.gradio-container {
+    background: var(--background) !important;
+    border: none !important;
+}
 
-css = """
-/* ─── Background & Base ──────────────────────────────────────────── */
-.gradio-container { background: #ffffff !important; }
-.main { background: #ffffff !important; }
+/* ── Chat area ── */
+.chat-container, . chatbot {
+    background: var(--background) !important;
+}
 
-/* ─── Chat bubbles ────────────────────────────────────────────────── */
+/* ── User bubble ── */
 .user-bubble {
-    background: #f4f4f5 !important;
-    border: 1px solid #d4d4d8 !important;
+    background: #1e1e1e !important;
+    border: 1px solid #2e2e2e !important;
     border-radius: 12px 12px 4px 12px !important;
-    color: #18181b !important;
+    color: #f0f0f0 !important;
     padding: 10px 14px !important;
+    max-width: 80% !important;
 }
+
+/* ── Assistant bubble ── */
 .assistant-bubble {
-    background: #fafafa !important;
-    border: 1px solid #e4e4e7 !important;
+    background: #141414 !important;
+    border: 1px solid #2a2a2a !important;
     border-radius: 12px 12px 12px 4px !important;
-    color: #27272a !important;
+    color: #e0e0e0 !important;
     padding: 10px 14px !important;
+    max-width: 80% !important;
 }
 
-/* ─── Input styling ──────────────────────────────────────────────── */
+/* ── Input box ── */
 #main-input input {
-    background: #ffffff !important;
-    border: 2px solid #e4e4e7 !important;
-    border-radius: 12px !important;
-    color: #18181b !important;
+    background: #111111 !important;
+    border: 1px solid #2a2a2a !important;
+    border-radius: 10px !important;
+    color: #ffffff !important;
     font-size: 1rem !important;
     padding: 12px 16px !important;
 }
 #main-input input:focus {
-    border-color: #7c3aed !important;
+    border-color: var(--accent) !important;
     outline: none !important;
-    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
+    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25) !important;
 }
 
-/* ─── Buttons ────────────────────────────────────────────────────── */
-.gradio-button.primary {
-    background: #7c3aed !important;
+/* ── Send button ── */
+.send-btn {
+    background: var(--accent) !important;
     border: none !important;
     color: white !important;
     border-radius: 10px !important;
     font-weight: 600 !important;
+    transition: background 0.2s ease !important;
 }
-.gradio-button.primary:hover {
-    background: #6d28d9 !important;
+.send-btn:hover {
+    background: var(--accent-hover) !important;
 }
 
-/* ─── Examples ───────────────────────────────────────────────────── */
+/* ── Examples ── */
+.examples-container {
+    background: #0e0e0e !important;
+    border: 1px solid #1e1e1e !important;
+    border-radius: 10px !important;
+    padding: 12px !important;
+}
 .example-btn {
-    background: #f4f4f5 !important;
-    border: 1px solid #d4d4d8 !important;
+    background: #161616 !important;
+    border: 1px solid #2a2a2a !important;
     border-radius: 8px !important;
-    color: #3f3f46 !important;
-    font-size: 0.875rem !important;
+    color: #b0b0b0 !important;
+    font-size: 0.85rem !important;
     padding: 6px 12px !important;
 }
 .example-btn:hover {
-    background: #e4e4e7 !important;
-    color: #18181b !important;
+    background: #1e1e1e !important;
+    color: #ffffff !important;
+    border-color: var(--accent) !important;
 }
 
-/* ─── Stats bar ──────────────────────────────────────────────────── */
-.stats-bar {
-    background: #fafafa !important;
-    border: 1px solid #e4e4e7 !important;
+/* ── Hero ── */
+.hero {
+    background: #0e0e0e !important;
+    border: 1px solid #1e1e1e !important;
     border-radius: 12px !important;
-    padding: 16px !important;
+    padding: 24px !important;
+    text-align: center !important;
+    margin-bottom: 16px !important;
+}
+.hero h1 {
+    font-size: 2rem !important;
+    font-weight: 900 !important;
+    color: #ffffff !important;
+    margin: 0 0 8px 0 !important;
+}
+.hero h1 span {
+    background: linear-gradient(135deg, #a855f7, #6366f1) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+}
+.hero p {
+    color: #909090 !important;
+    font-size: 0.95rem !important;
+    margin: 0 auto !important;
+    max-width: 460px !important;
+}
+
+/* ── Stats bar ── */
+.stats-bar {
     display: flex !important;
     justify-content: center !important;
-    gap: 40px !important;
+    gap: 32px !important;
+    padding: 16px !important;
     margin-bottom: 16px !important;
 }
-.stat-item { text-align: center; }
-.stat-value { font-size: 1.3rem; font-weight: 800; color: #7c3aed; }
-.stat-label { font-size: 0.7rem; color: #71717a; text-transform: uppercase; letter-spacing: 0.05em; }
-
-/* ─── Hero ───────────────────────────────────────────────────────── */
-.hero-text h1 {
-    font-size: 1.8rem !important;
-    font-weight: 900 !important;
-    color: #18181b !important;
-    margin-bottom: 6px !important;
+.stat { text-align: center; }
+.stat-val {
+    font-size: 1.5rem !important;
+    font-weight: 800 !important;
+    color: var(--accent) !important;
+}
+.stat-lbl {
+    font-size: 0.65rem !important;
+    color: #606060 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.08em !important;
 }
-.hero-text p { color: #52525b !important; font-size: 0.95rem !important; max-width: 500px; margin: 0 auto !important; }
 
-/* ─── Tool badges ────────────────────────────────────────────────── */
-.tool-badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
+/* ── Tool badges ── */
+.tool-badges {
+    display: flex !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    flex-wrap: wrap !important;
+    margin-top: 12px !important;
+}
 .tool-badge {
-    background: #f4f4f5 !important;
-    border: 1px solid #d4d4d8 !important;
+    background: #161616 !important;
+    border: 1px solid #2a2a2a !important;
     border-radius: 999px !important;
     padding: 4px 12px !important;
     font-size: 0.75rem !important;
-    color: #52525b !important;
+    color: #888888 !important;
 }
 
-/* ─── Footer ────────────────────────────────────────────────────── */
-.footer { text-align: center; color: #a1a1aa; font-size: 0.75rem; padding: 12px; border-top: 1px solid #e4e4e7; margin-top: 12px; }
+/* ── Footer ── */
+.footer {
+    text-align: center !important;
+    color: #505050 !important;
+    font-size: 0.75rem !important;
+    padding: 14px !important;
+    border-top: 1px solid #1a1a1a !important;
+    margin-top: 16px !important;
+}
+.footer a { color: var(--accent) !important; text-decoration: none !important; }
+.footer a:hover { text-decoration: underline !important; }
 """
 
+# ─── Build UI ───────────────────────────────────────────────────────────────
+
 EXAMPLES = [
     ["Calculate compound interest on $1500 at 7% over 30 years"],
     ["What time is it right now?"],
@@ -287,15 +334,13 @@ EXAMPLES = [
 ]
 
 def build():
-    with gr.Blocks(css=css, title="Stack X Ultimate") as demo:
-        
+    with gr.Blocks(css=DARK_CSS, theme=gr.themes.Default(primary_hue="purple"), title="Stack X Ultimate") as demo:
+
         # ── Hero ──────────────────────────────────────────────────────
         gr.HTML("""
-        <div style="text-align:center; padding: 20px 16px 8px; border-bottom: 1px solid #e4e4e7; margin-bottom: 16px;">
-            <div class="hero-text">
-                <h1>🤖 Stack X Ultimate</h1>
-                <p>Open-source agentic model with tool calling. Try it free — no API key needed.</p>
-            </div>
+        <div class="hero">
+            <h1>🤖 Stack X <span>Ultimate</span></h1>
+            <p>Open-source agentic model with tool calling.<br>Deploy on your own GPU — no API key, no data leaving your server.</p>
             <div class="tool-badges">
                 <span class="tool-badge">🔢 calculator</span>
                 <span class="tool-badge">🕐 get_current_time</span>
@@ -304,13 +349,14 @@ def build():
             </div>
         </div>
         """)
-        
+
         gr.HTML("""
         <div class="stats-bar">
-            <div class="stat-item"><div class="stat-value">3B</div><div class="stat-label">Params</div></div>
-            <div class="stat-item"><div class="stat-value">4-bit</div><div class="stat-label">QLoRA</div></div>
-            <div class="stat-item"><div class="stat-value">V100</div><div class="stat-label">1 GPU</div></div>
-            <div class="stat-item"><div class="stat-value">$0</div><div class="stat-label">API Cost</div></div>
+            <div class="stat"><div class="stat-val">3B</div><div class="stat-lbl">Params</div></div>
+            <div class="stat"><div class="stat-val">Q4</div><div class="stat-lbl">GGUF</div></div>
+            <div class="stat"><div class="stat-val">V100</div><div class="stat-lbl">1 GPU</div></div>
+            <div class="stat"><div class="stat-val">$0</div><div class="stat-lbl">API Cost</div></div>
+            <div class="stat"><div class="stat-val">8K</div><div class="stat-lbl">Context</div></div>
         </div>
         """)
 
@@ -332,7 +378,12 @@ def build():
                 show_label=False,
                 elem_id="main-input",
             )
-            send_btn = gr.Button("Send", scale=1, elem_classes="primary")
+            send_btn = gr.Button("Send →", scale=1, elem_classes="send-btn")
+
+        # ── Events ────────────────────────────────────────────────────
+        msg.submit(chat_fn, [msg, chat], [chat])
+        send_btn.click(chat_fn, [msg, chat], [chat])
+        msg.submit(lambda: "", None, msg)
 
         # ── Examples ────────────────────────────────────────────────────
         gr.Examples(
@@ -342,31 +393,16 @@ def build():
             examples_per_page=5,
         )
 
-        # ── Events ────────────────────────────────────────────────────
-        def respond(message, history):
-            result = chat_fn(message, history)
-            return result
-
-        msg.submit(respond, [msg, chat], [chat])
-        send_btn.click(respond, [msg, chat], [chat])
-        msg.submit(lambda: "", None, msg)
-
-        # ── Footer ─────────────────────────────────────────────────────
+        # ── Footer ──────────────────────────────────────────────────────
         gr.HTML("""
         <div class="footer">
-            🔧 Demo shows tool-calling capability. 
-            <a href="https://huggingface.co/my-ai-stack/Stack-X-Ultimate" style="color:#7c3aed;">Deploy the model</a> · 
-            <a href="https://www.stack-ai.me/contact" style="color:#7c3aed;">Enterprise inquiry</a>
+            🔧 This demo shows tool-calling capability. Fine-tuned model coming soon — 
+            <a href="https://huggingface.co/my-ai-stack/Stack-X-Ultimate">Deploy the model</a> · 
+            <a href="https://www.stack-ai.me/contact">Enterprise inquiry</a>
         </div>
         """)
 
     return demo
 
 if __name__ == "__main__":
-    demo = build()
-    demo.launch(
-        server_name="0.0.0.0",
-        server_port=7860,
-        max_threads=4,
-        show_api=False,
-    )
+    build().launch(server_name="0.0.0.0", server_port=7860, max_threads=4, show_api=False)