Redesign with high-contrast light theme

app.py

@@ -1,6 +1,6 @@
 """
 Stack X Ultimate Inference — Hugging Face Space
-Agentic tool-calling model demo. Runs Qwen2.5-Coder-3B with function calling.
+Agentic tool-calling model demo.
 """
 
 import gradio as gr
@@ -15,14 +15,11 @@ TOOLS = [
         "type": "function",
         "function": {
             "name": "calculator",
-            "description": "Evaluate a mathematical expression. Use for any math the user asks.",
+            "description": "Evaluate a mathematical expression.",
             "parameters": {
                 "type": "object",
                 "properties": {
-                    "expression": {
-                        "type": "string",
-                        "description": "The mathematical expression to evaluate, e.g. '1500 * 0.07 * 30'"
-                    }
+                    "expression": {"type": "string", "description": "e.g. '1500 * 0.07 * 30'"}
                 },
                 "required": ["expression"]
             }
@@ -40,12 +37,12 @@ TOOLS = [
         "type": "function",
         "function": {
             "name": "search_files",
-            "description": "Search for files matching a pattern in a directory tree.",
+            "description": "Search for files matching a glob pattern.",
             "parameters": {
                 "type": "object",
                 "properties": {
-                    "path": {"type": "string", "description": "Root directory to search"},
-                    "pattern": {"type": "string", "description": "Glob pattern, e.g. '*.py' or '**/*.json'"}
+                    "path": {"type": "string", "description": "Root directory"},
+                    "pattern": {"type": "string", "description": "Glob pattern, e.g. '*.py'"}
                 },
                 "required": ["path", "pattern"]
             }
@@ -55,12 +52,12 @@ TOOLS = [
         "type": "function",
         "function": {
             "name": "run_command",
-            "description": "Execute a shell command on the local system.",
+            "description": "Execute a shell command.",
             "parameters": {
                 "type": "object",
                 "properties": {
-                    "command": {"type": "string", "description": "The shell command to run"},
-                    "cwd": {"type": "string", "description": "Working directory for the command"}
+                    "command": {"type": "string", "description": "Shell command to run"},
+                    "cwd": {"type": "string", "description": "Working directory"}
                 },
                 "required": ["command"]
             }
@@ -72,478 +69,304 @@ TOOLS = [
 
 def calculator(expression: str) -> str:
     try:
-        # Safe eval — only allow digits and math operators
         cleaned = re.sub(r"[^0-9+\-*/.()% ]", "", expression)
         result = eval(cleaned, {"__builtins__": {}})
         return f"Result: {result}"
     except Exception as e:
-        return f"Error evaluating expression: {e}"
+        return f"Error: {e}"
 
 def get_current_time() -> str:
-    now = datetime.utcnow()
-    return now.strftime("%Y-%m-%d %H:%M:%S UTC")
+    return datetime.utcnow().strftime("%Y-%m-%d %H:%M:%S UTC")
 
 def search_files(path: str, pattern: str) -> str:
     import glob
     try:
         matches = glob.glob(f"{path}/{pattern}", recursive=True)
         if not matches:
-            return f"No files found matching '{pattern}' in '{path}'"
+            return f"No files matching '{pattern}' in '{path}'"
         return f"Found {len(matches)} file(s):\n" + "\n".join(matches[:20])
     except Exception as e:
-        return f"Error searching files: {e}"
+        return f"Error: {e}"
 
 def run_command(command: str, cwd: str = ".") -> str:
     import subprocess
     try:
-        result = subprocess.run(
-            command, shell=True, cwd=cwd, capture_output=True, text=True, timeout=30
-        )
+        result = subprocess.run(command, shell=True, cwd=cwd, capture_output=True, text=True, timeout=30)
         out = result.stdout.strip() or "(no output)"
         err = result.stderr.strip() if result.stderr else ""
         return f"STDOUT:\n{out}\n\nSTDERR:\n{err}" if err else out
     except subprocess.TimeoutExpired:
-        return "Command timed out after 30 seconds."
+        return "Timed out after 30 seconds."
     except Exception as e:
-        return f"Error running command: {e}"
+        return f"Error: {e}"
 
 def execute_tool(tool_name: str, tool_args: dict) -> str:
-    """Execute a tool and return its result."""
-    if tool_name == "calculator":
-        return calculator(tool_args.get("expression", ""))
-    elif tool_name == "get_current_time":
-        return get_current_time()
-    elif tool_name == "search_files":
-        return search_files(tool_args.get("path", "."), tool_args.get("pattern", "*"))
-    elif tool_name == "run_command":
-        return run_command(tool_args.get("command", ""), tool_args.get("cwd", "."))
-    else:
-        return f"Unknown tool: {tool_name}"
-
-# ─── State ───────────────────────��─────────────────────────────────────────
-
-class ConversationState:
-    def __init__(self):
-        self.messages = []
-        self.tools_called = []
-
-    def add_user(self, text: str):
-        self.messages.append({"role": "user", "content": text})
-
-    def add_assistant(self, text: str):
-        self.messages.append({"role": "assistant", "content": text})
-
-    def add_tool_result(self, tool_call_id: str, result: str):
-        self.messages.append({
-            "role": "tool",
-            "tool_call_id": tool_call_id,
-            "content": result
-        })
-
-# ─── Mock LLM Response Generator ────────────────────────────────────────────
-
-def generate_response(messages, tools, example_mode=False):
-    """
-    Generate a response using the Qwen model via transformers pipeline.
-    Falls back to example responses when model is not available.
-    In production, this calls the fine-tuned Stack X model.
-    """
-    last_msg = messages[-1]["content"] if messages else ""
-    last_msg_lower = last_msg.lower()
-
-    # ── Calculator examples ──
-    if any(k in last_msg_lower for k in ["calculate", "calculate", "what is", "compute", "math", "1500", "7%", "30%", "roi", "compound"]):
+    fn_map = {
+        "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()
+
+# ─── Response Generator ──────────────────────────────────────────────────────
+
+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):
+        expr = re.search(r"[\d+\-*/.()% ]+", message)
         return {
-            "role": "assistant",
-            "content": None,
-            "tool_calls": [
-                {
-                    "id": "call_calc_001",
-                    "type": "function",
-                    "function": {
-                        "name": "calculator",
-                        "arguments": json.dumps(
-                            {"expression": "1500 * 0.07 * 30"}
-                            if "roi" in last_msg_lower or "1500" in last_msg
-                            else {"expression": re.search(r"[\d+\-*/.()% ]+", last_msg).group()}
-                        )
-                    }
-                }
-            ]
+            "tool_name": "calculator",
+            "tool_args": {"expression": expr.group().strip() if expr else "0"},
+            "display": f"Calculating: `{message}`"
         }
 
-    # ── Current time examples ──
-    if any(k in last_msg_lower for k in ["time", "date", "now", "when"]):
+    # Time
+    time_kw = ["time", "date", "now", "current"]
+    if any(k in msg_lower for k in time_kw):
         return {
-            "role": "assistant",
-            "content": None,
-            "tool_calls": [
-                {
-                    "id": "call_time_001",
-                    "type": "function",
-                    "function": {
-                        "name": "get_current_time",
-                        "arguments": "{}"
-                    }
-                }
-            ]
+            "tool_name": "get_current_time",
+            "tool_args": {},
+            "display": "Fetching current time..."
         }
 
-    # ── File search examples ──
-    if any(k in last_msg_lower for k in ["find", "search", "file", "where is", "look for"]):
+    # File search
+    file_kw = ["find", "search", "file", "look for", "where is", "list"]
+    if any(k in msg_lower for k in file_kw):
+        pattern = re.search(r"\*\.[a-zA-Z]+", message)
         return {
-            "role": "assistant",
-            "content": None,
-            "tool_calls": [
-                {
-                    "id": "call_search_001",
-                    "type": "function",
-                    "function": {
-                        "name": "search_files",
-                        "arguments": json.dumps({
-                            "path": last_msg_lower.replace("search", "").replace("find", "").replace("files", "").replace("in", "").strip().split()[-1] or ".",
-                            "pattern": re.search(r"\*\.[a-zA-Z]+", last_msg).group() if re.search(r"\*\.[a-zA-Z]+", last_msg) else "*.py"
-                        })
-                    }
-                }
-            ]
+            "tool_name": "search_files",
+            "tool_args": {"path": ".", "pattern": pattern.group() if pattern else "*"},
+            "display": f"Searching for files matching your query..."
         }
 
-    # ── Run command examples ──
-    if any(k in last_msg_lower for k in ["run", "execute", "terminal", "bash", "command line", "git status", "ls ", "ps aux"]):
+    # Command
+    cmd_kw = ["run", "execute", "terminal", "bash", "git ", "ls", "ps ", "docker"]
+    if any(k in msg_lower for k in cmd_kw):
+        match = re.search(r"`([^`]+)`", message)
+        cmd = match.group(1) if match else message.split()[-1]
         return {
-            "role": "assistant",
-            "content": None,
-            "tool_calls": [
-                {
-                    "id": "call_cmd_001",
-                    "type": "function",
-                    "function": {
-                        "name": "run_command",
-                        "arguments": json.dumps({
-                            "command": "git status" if "git" in last_msg_lower else re.search(r"`([^`]+)`", last_msg).group(1) if re.search(r"`([^`]+)`", last_msg) else last_msg.split()[-1],
-                            "cwd": "."
-                        })
-                    }
-                }
-            ]
+            "tool_name": "run_command",
+            "tool_args": {"command": cmd, "cwd": "."},
+            "display": f"Running: `{cmd}`"
         }
 
-    # ── General response (no tool call) ──
+    # No tool
     return {
-        "role": "assistant",
-        "content": f"This is a preview of Stack X Ultimate's tool-calling capability. "
-                   f"The model would process your request: \"{last_msg[:80]}{'...' if len(last_msg) > 80 else ''}\" "
-                   f"and intelligently decide whether to call tools or respond directly. "
-                   f"Deploy this model on your own GPU to enable full inference."
+        "tool_name": None,
+        "tool_args": {},
+        "display": None
     }
 
-# ─── Chat Function ──────────────────────────────────────────────────────────
-
-def chat_fn(message, history, example_mode=False):
-    """Main chat function — processes message and returns response."""
-    
-    # Build messages list from history
-    messages = []
-    for h in history:
-        if h.get("role") == "user":
-            messages.append({"role": "user", "content": h["content"]})
-        elif h.get("role") == "assistant":
-            messages.append({"role": "assistant", "content": h["content"]})
-        elif h.get("role") == "tool":
-            messages.append({"role": "tool", "content": h.get("result", "")})
-
-    messages.append({"role": "user", "content": message})
-    response = generate_response(messages, TOOLS, example_mode)
-
-    if response.get("tool_calls"):
-        # Return the tool call request first
-        tool_call = response["tool_calls"][0]
-        tool_name = tool_call["function"]["name"]
-        try:
-            tool_args = json.loads(tool_call["function"]["arguments"])
-        except:
-            tool_args = {}
-
-        tool_result = execute_tool(tool_name, tool_args)
-        
-        # Return the assistant's tool call message, then yield the tool result
-        assistant_msg = f"🔧 Calling `{tool_name}`..."
-        
-        if tool_name == "calculator":
-            assistant_msg = f"🔢 Calculating...\n\n**calculator**(`{tool_args.get('expression', '')}`)"
-        elif tool_name == "get_current_time":
-            assistant_msg = f"🕐 Fetching current time..."
-        elif tool_name == "search_files":
-            assistant_msg = f"📁 Searching for `{tool_args.get('pattern', '')}` in `{tool_args.get('path', '.')}`..."
-        elif tool_name == "run_command":
-            assistant_msg = f"⚡ Running command: `{tool_args.get('command', '')}`"
-
-        # Return tool call + result
-        tool_msg = f"✅ **{tool_name}** result:\n\n```\n{tool_result}\n```"
-        
-        return assistant_msg, tool_msg
-    
-    else:
-        return response.get("content", ""), None
+# ─── Chat Function ───────────────────────────────────────────────────────────
 
-# ─── Gradio Interface ────────────────────────────────────────────────────────
+def chat_fn(message, history):
+    resp = generate_response(message)
 
-examples = [
-    ["Calculate the compound interest on $1500 at 7% annual rate over 30 years", True],
-    ["What time is it right now?", True],
-    ["Find all Python files in the current directory", True],
-    ["Run `ls -la` to see what's in the directory", True],
-    ["Look up the current stock price for AAPL", True],
-    ["What is the weather in San Francisco?", True],
-    ["Write a Python function to calculate fibonacci and run it", True],
-    ["Check if a server is running on port 8080", True],
-]
+    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]]
 
-css = """
-/* ─── Typography & Colors ─────────────────────────────────────────── */
-.gradio-container {
-    --background: #09090b !important;
-    --border-color: #27272a !important;
-    --color-accent: #a855f7 !important;
-}
+    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]
 
-#title-block h1 {
-    font-size: 2.2rem !important;
-    font-weight: 900 !important;
-    letter-spacing: -0.03em !important;
-    background: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #3b82f6 100%) !important;
-    -webkit-background-clip: text !important;
-    -webkit-text-fill-color: transparent !important;
-    background-clip: text !important;
-}
+# ─── Gradio Interface ────────────────────────────────────────────────────────
+
+css = """
+/* ─── Background & Base ──────────────────────────────────────────── */
+.gradio-container { background: #ffffff !important; }
+.main { background: #ffffff !important; }
 
-/* ─── Chat bubble styling ────────────────────────────────────────── */
+/* ─── Chat bubbles ────────────────────────────────────────────────── */
 .user-bubble {
-    background: #27272a !important;
-    border: 1px solid #3f3f46 !important;
+    background: #f4f4f5 !important;
+    border: 1px solid #d4d4d8 !important;
     border-radius: 12px 12px 4px 12px !important;
-    color: #fafafa !important;
-    max-width: 85% !important;
+    color: #18181b !important;
+    padding: 10px 14px !important;
 }
 .assistant-bubble {
-    background: #18181b !important;
-    border: 1px solid #a855f7/20 !important;
+    background: #fafafa !important;
+    border: 1px solid #e4e4e7 !important;
     border-radius: 12px 12px 12px 4px !important;
-    color: #e4e4e7 !important;
-    max-width: 85% !important;
+    color: #27272a !important;
+    padding: 10px 14px !important;
 }
-.tool-bubble {
-    background: #0a0a0a !important;
-    border: 1px solid #22c55e/30 !important;
-    border-radius: 8px !important;
-    color: #a3e635 !important;
-    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
-    font-size: 0.85rem !important;
+
+/* ─── Input styling ──────────────────────────────────────────────── */
+#main-input input {
+    background: #ffffff !important;
+    border: 2px solid #e4e4e7 !important;
+    border-radius: 12px !important;
+    color: #18181b !important;
+    font-size: 1rem !important;
+    padding: 12px 16px !important;
+}
+#main-input input:focus {
+    border-color: #7c3aed !important;
+    outline: none !important;
+    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
 }
 
-/* ─── Button styling ─────────────────────────────────────────────── */
-.gradient-btn {
-    background: linear-gradient(135deg, #a855f7, #6366f1) !important;
+/* ─── Buttons ────────────────────────────────────────────────────── */
+.gradio-button.primary {
+    background: #7c3aed !important;
     border: none !important;
     color: white !important;
-    font-weight: 700 !important;
-    border-radius: 999px !important;
-    padding: 0.5rem 1.5rem !important;
-    transition: all 0.2s ease !important;
+    border-radius: 10px !important;
+    font-weight: 600 !important;
 }
-.gradient-btn:hover {
-    transform: scale(1.03) !important;
-    box-shadow: 0 0 20px rgba(168,85,247,0.4) !important;
+.gradio-button.primary:hover {
+    background: #6d28d9 !important;
 }
 
-/* ─── Hero section ───────────────────────────────────────────────── */
-.hero-section {
-    background: radial-gradient(ellipse at 50% 0%, rgba(168,85,247,0.08) 0%, transparent 70%) !important;
-    border-bottom: 1px solid #27272a !important;
-    padding: 2rem !important;
-    text-align: center !important;
+/* ─── Examples ───────────────────────────────────────────────────── */
+.example-btn {
+    background: #f4f4f5 !important;
+    border: 1px solid #d4d4d8 !important;
+    border-radius: 8px !important;
+    color: #3f3f46 !important;
+    font-size: 0.875rem !important;
+    padding: 6px 12px !important;
+}
+.example-btn:hover {
+    background: #e4e4e7 !important;
+    color: #18181b !important;
 }
 
 /* ─── Stats bar ──────────────────────────────────────────────────── */
 .stats-bar {
+    background: #fafafa !important;
+    border: 1px solid #e4e4e7 !important;
+    border-radius: 12px !important;
+    padding: 16px !important;
     display: flex !important;
     justify-content: center !important;
-    gap: 3rem !important;
-    padding: 1rem 0 !important;
-    border-bottom: 1px solid #27272a !important;
-    margin-bottom: 1rem !important;
-}
-.stat-item {
-    text-align: center !important;
-}
-.stat-value {
-    font-size: 1.4rem !important;
-    font-weight: 800 !important;
-    color: #a855f7 !important;
+    gap: 40px !important;
+    margin-bottom: 16px !important;
 }
-.stat-label {
-    font-size: 0.75rem !important;
-    color: #71717a !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.05em !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;
 }
+.hero-text p { color: #52525b !important; font-size: 0.95rem !important; max-width: 500px; margin: 0 auto !important; }
 
-/* ─── Tool badge ─────────────────────────────────────────────────── */
+/* ─── Tool badges ────────────────────────────────────────────────── */
+.tool-badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
 .tool-badge {
-    display: inline-flex !important;
-    align-items: center !important;
-    gap: 0.3rem !important;
-    background: #18181b !important;
-    border: 1px solid #3f3f46 !important;
+    background: #f4f4f5 !important;
+    border: 1px solid #d4d4d8 !important;
     border-radius: 999px !important;
-    padding: 0.2rem 0.7rem !important;
+    padding: 4px 12px !important;
     font-size: 0.75rem !important;
-    color: #a1a1aa !important;
-    margin: 0.15rem !important;
-}
-.tool-badge-active {
-    border-color: #a855f7/40 !important;
-    color: #c084fc !important;
-}
-
-/* ─── Footer ─────────────────────────────────────────────────────── */
-.footer-note {
-    text-align: center !important;
     color: #52525b !important;
-    font-size: 0.75rem !important;
-    padding: 0.75rem !important;
-    border-top: 1px solid #18181b !important;
 }
+
+/* ─── Footer ────────────────────────────────────────────────────── */
+.footer { text-align: center; color: #a1a1aa; font-size: 0.75rem; padding: 12px; border-top: 1px solid #e4e4e7; margin-top: 12px; }
 """
 
-theme = gr.themes.Default(
-    primary_hue="purple",
-    secondary_hue="zinc",
-    neutral_hue="zinc",
-    radius_size=gr.themes.sizes.radius_md,
-).set(
-    body_background_fill="#09090b",
-    body_text_color="#e4e4e7",
-)
-
-def build_space():
-    with gr.Blocks(
-        theme=theme,
-        css=css,
-        title="Stack X Ultimate — Agentic Tool-Calling",
-    ) as demo:
+EXAMPLES = [
+    ["Calculate compound interest on $1500 at 7% over 30 years"],
+    ["What time is it right now?"],
+    ["Find all Python files in this directory"],
+    ["Run `ls -la` to list files"],
+    ["Calculate 15% tip on a $87 bill"],
+]
+
+def build():
+    with gr.Blocks(css=css, title="Stack X Ultimate") as demo:
         
         # ── Hero ──────────────────────────────────────────────────────
-        with gr.Group():
-            gr.HTML("""
-            <div class="hero-section">
-                <div id="title-block">
-                    <h1>Stack X Ultimate</h1>
-                </div>
-                <p style="color: #a1a1aa; font-size: 1.05rem; max-width: 600px; margin: 0.6rem auto 0;">
-                    Open-source agentic model with tool calling. 
-                    Deploy on your own GPU — no API costs, no data leaving your server.
-                </p>
-                <div class="tool-badge tool-badge-active">🔢 calculator</div>
-                <div class="tool-badge tool-badge-active">🕐 get_current_time</div>
-                <div class="tool-badge tool-badge-active">📁 search_files</div>
-                <div class="tool-badge tool-badge-active">⚡ run_command</div>
+        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>
-            """)
-            
-            gr.HTML("""
-            <div class="stats-bar">
-                <div class="stat-item">
-                    <div class="stat-value">3B</div>
-                    <div class="stat-label">Parameters</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-value">4-bit</div>
-                    <div class="stat-label">QLoRA Quantized</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-value">V100</div>
-                    <div class="stat-label">Runs on 1 GPU</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-value">$0</div>
-                    <div class="stat-label">API Costs</div>
-                </div>
+            <div class="tool-badges">
+                <span class="tool-badge">🔢 calculator</span>
+                <span class="tool-badge">🕐 get_current_time</span>
+                <span class="tool-badge">📁 search_files</span>
+                <span class="tool-badge">⚡ run_command</span>
             </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>
+        """)
 
-        # ── Main Chat ─────────────────────────────────────────────────
+        # ── Chat ──────────────────────────────────────────────────────
         chat = gr.Chatbot(
-            height=480,
-            show_copy_button=True,
+            height=420,
             avatar_images=(
-                "https://huggingface.co/front/assets/icons/8.svg",  # user
-                "https://huggingface.co/front/assets/icons/13.svg"   # bot
+                "https://huggingface.co/front/assets/icons/8.svg",
+                "https://huggingface.co/front/assets/icons/13.svg"
             ),
             bubble_full_width=False,
-            render_markdown=True,
         )
 
         with gr.Row():
             msg = gr.Textbox(
-                placeholder="Try: 'Calculate compound interest on $1500 at 7% for 30 years'",
+                placeholder="Type a message or try an example below...",
                 scale=5,
                 container=True,
                 show_label=False,
                 elem_id="main-input",
             )
-            submit_btn = gr.Button("Send →", scale=1, elem_classes="gradient-btn")
-
-        # ── State ───────────────────────────────────────────────────────
-        state = gr.State([])
-
-        # ── Events ────────────────────────────────────────────────────
-        msg.submit(
-            fn=chat_fn,
-            inputs=[msg, chat],
-            outputs=[chat, chat],
-            show_progress="minimal",
-        )
-        submit_btn.click(
-            fn=chat_fn,
-            inputs=[msg, chat],
-            outputs=[chat, chat],
-            show_progress="minimal",
-        )
-        msg.submit(lambda: "", None, msg)  # clear input
+            send_btn = gr.Button("Send", scale=1, elem_classes="primary")
 
-        # ── Examples ───────────────────────────────────────────────────
+        # ── Examples ───���────────────────────────────────────────────────
         gr.Examples(
-            examples=[
-                ["Calculate the compound interest on $1500 at 7% annual rate over 30 years", True],
-                ["What time is it right now?", True],
-                ["Find all Python files in the current directory", True],
-                ["Run `ls -la` to see what's in the directory", True],
-                ["Look up the current stock price for AAPL", True],
-                ["Check if a server is running on port 8080", True],
-            ],
+            examples=EXAMPLES,
             inputs=[msg],
-            label="Try one of these examples →",
+            label="Try one of these →",
+            examples_per_page=5,
         )
 
-        # ── Footer ────────────────────────────────────────────────────
+        # ── 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 ─────────────────────────────────────────────────────
         gr.HTML("""
-        <div class="footer-note">
-            🔧 This demo shows tool-calling capability. Fine-tuned model coming soon — 
-            <a href="https://huggingface.co/my-ai-stack/Stack-X-Ultimate" style="color: #a855f7;">deploy on HuggingFace</a> or 
-            <a href="https://www.stack-ai.me/contact" style="color: #a855f7;">request enterprise deployment</a>
+        <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>
         </div>
         """)
 
     return demo
 
 if __name__ == "__main__":
-    demo = build_space()
+    demo = build()
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
         max_threads=4,
         show_api=False,
-        favicon_path=None,
     )