Full dark CSS: gradient hero, stats bar, styled chat bubbles, purple accents, clickable example buttons

app.py

@@ -76,7 +76,258 @@ def respond(message: str):
     res = f"✅ **{tool}** result:\n\n```\n{result}\n```"
     return [[call, res]]
 
-# ─── Gradio UI ──────────────────────────────────────────────────────────────
+# ─── Dark CSS ─────────────────────────────────────────────────────────────
+
+DARK_CSS = """
+:root {
+    --bg-primary: #080808;
+    --bg-secondary: #0f0f0f;
+    --bg-card: #111111;
+    --border: #1c1c1c;
+    --border-accent: #2e1a4a;
+    --text-primary: #ededed;
+    --text-secondary: #8a8a8a;
+    --text-muted: #4a4a4a;
+    --accent: #a855f7;
+    --accent-bright: #c084fc;
+    --accent-dim: rgba(168, 85, 247, 0.15);
+    --accent-glow: rgba(168, 85, 247, 0.35);
+    --green: #4ade80;
+    --cyan: #22d3ee;
+    --yellow: #facc15;
+    --radius: 12px;
+    --radius-sm: 8px;
+}
+
+/* ── Reset ── */
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body, html {
+    background: var(--bg-primary) !important;
+    color: var(--text-primary) !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
+}
+
+/* ── Gradio container ── */
+.gradio-container {
+    background: var(--bg-primary) !important;
+    max-width: 860px !important;
+    margin: 0 auto !important;
+    border-left: 1px solid var(--border) !important;
+    border-right: 1px solid var(--border) !important;
+    min-height: 100vh !important;
+}
+
+/* ── Markdown / header ── */
+.md-block {
+    background: var(--bg-secondary) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius) !important;
+    padding: 20px 24px !important;
+    margin: 16px !important;
+    text-align: center !important;
+}
+.md-block h2 {
+    font-size: 1.6rem !important;
+    font-weight: 800 !important;
+    color: #fff !important;
+    margin-bottom: 6px !important;
+}
+.md-block h2 span {
+    background: linear-gradient(135deg, var(--accent), #818cf8) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+}
+.md-block p {
+    color: var(--text-secondary) !important;
+    font-size: 0.9rem !important;
+    margin: 4px 0 !important;
+}
+.md-block code {
+    background: var(--accent-dim) !important;
+    color: var(--accent-bright) !important;
+    border-radius: 4px !important;
+    padding: 1px 6px !important;
+    font-size: 0.82rem !important;
+}
+.md-block strong { color: var(--text-primary) !important; }
+
+/* ── Stats row ── */
+.stats {
+    display: flex !important;
+    justify-content: center !important;
+    gap: 0 !important;
+    margin: 0 16px 12px !important;
+    background: var(--bg-card) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius) !important;
+    overflow: hidden !important;
+}
+.stat {
+    flex: 1 !important;
+    text-align: center !important;
+    padding: 12px 8px !important;
+    border-right: 1px solid var(--border) !important;
+}
+.stat:last-child { border-right: none !important; }
+.stat-val {
+    font-size: 1.2rem !important;
+    font-weight: 800 !important;
+    color: var(--accent-bright) !important;
+    display: block !important;
+}
+.stat-lbl {
+    font-size: 0.6rem !important;
+    color: var(--text-muted) !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.08em !important;
+    display: block !important;
+}
+
+/* ── Chatbot ── */
+.chat-container {
+    background: var(--bg-primary) !important;
+    margin: 0 16px !important;
+}
+.chat-message {
+    border-radius: var(--radius) !important;
+    padding: 10px 14px !important;
+    font-size: 0.92rem !important;
+    line-height: 1.5 !important;
+    border: 1px solid var(--border) !important;
+    margin-bottom: 8px !important;
+}
+.chat-message.user {
+    background: #161616 !important;
+    border-color: #262626 !important;
+    color: #e8e8e8 !important;
+}
+.chat-message.bot {
+    background: var(--bg-secondary) !important;
+    color: #d4d4d4 !important;
+}
+.chat-message pre {
+    background: #080808 !important;
+    border: 1px solid #1e1e1e !important;
+    border-radius: var(--radius-sm) !important;
+    padding: 10px 12px !important;
+    font-size: 0.82rem !important;
+    overflow-x: auto !important;
+    margin: 6px 0 !important;
+    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace !important;
+}
+.chat-message code {
+    background: #080808 !important;
+    border: 1px solid #1e1e1e !important;
+    border-radius: 4px !important;
+    padding: 1px 5px !important;
+    font-size: 0.82rem !important;
+    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
+}
+.chat-message .tool-call {
+    color: var(--cyan) !important;
+    font-family: monospace !important;
+}
+.chat-message .tool-result {
+    color: var(--green) !important;
+    font-family: monospace !important;
+}
+
+/* ── Input row ── */
+.input-row {
+    display: flex !important;
+    gap: 10px !important;
+    padding: 12px 16px !important;
+    background: var(--bg-secondary) !important;
+    border-top: 1px solid var(--border) !important;
+    margin-top: 8px !important;
+}
+input[type=text], textarea {
+    background: #0c0c0c !important;
+    border: 1px solid #222222 !important;
+    border-radius: var(--radius) !important;
+    color: #f0f0f0 !important;
+    font-size: 0.95rem !important;
+    padding: 10px 14px !important;
+    flex: 1 !important;
+    outline: none !important;
+    transition: border-color 0.2s !important;
+}
+input[type=text]:focus, textarea:focus {
+    border-color: var(--accent) !important;
+    box-shadow: 0 0 0 3px var(--accent-glow) !important;
+}
+
+/* ── Send button ── */
+.send-btn {
+    background: var(--accent) !important;
+    border: none !important;
+    border-radius: var(--radius) !important;
+    color: #fff !important;
+    font-weight: 700 !important;
+    font-size: 0.9rem !important;
+    padding: 10px 20px !important;
+    cursor: pointer !important;
+    transition: background 0.15s ease, transform 0.1s ease !important;
+    white-space: nowrap !important;
+}
+.send-btn:hover {
+    background: var(--accent-bright) !important;
+    transform: translateY(-1px) !important;
+}
+.send-btn:active {
+    transform: translateY(0) !important;
+}
+
+/* ── Examples ── */
+.examples {
+    margin: 12px 16px !important;
+}
+.examples-label {
+    color: var(--text-muted) !important;
+    font-size: 0.75rem !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.06em !important;
+    margin-bottom: 8px !important;
+    display: block !important;
+}
+.example-btn {
+    display: inline-flex !important;
+    align-items: center !important;
+    background: #0e0e0e !important;
+    border: 1px solid #1e1e1e !important;
+    border-radius: 999px !important;
+    color: #888888 !important;
+    font-size: 0.8rem !important;
+    padding: 5px 12px !important;
+    margin: 0 4px 6px 0 !important;
+    cursor: pointer !important;
+    transition: all 0.15s ease !important;
+    text-decoration: none !important;
+}
+.example-btn:hover {
+    background: #181818 !important;
+    border-color: var(--accent) !important;
+    color: var(--accent-bright) !important;
+}
+
+/* ── Footer ── */
+.footer {
+    text-align: center !important;
+    color: #3a3a3a !important;
+    font-size: 0.72rem !important;
+    padding: 14px 16px !important;
+    border-top: 1px solid var(--border) !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",
@@ -89,19 +340,37 @@ EXAMPLES = [
 def build():
     with gr.Blocks(title="Stack X Ultimate") as demo:
         gr.Markdown(
-            "## 🤖 Stack X Ultimate\n\n"
+            "## 🤖 Stack X <span>Ultimate</span>\n\n"
             "**Open-source agentic model with tool calling.** Deploy on your own GPU — no API key, no data leaving your server.\n\n"
-            "🔢 `calculator` · 🕐 `get_current_time` · 📁 `search_files` · ⚡ `run_command`\n\n"
-            "**3B params · Q4 GGUF · V100 1 GPU · $0 API Cost · 8K context**"
+            "🔢 `calculator` · 🕐 `get_current_time` · 📁 `search_files` · ⚡ `run_command`",
+            elem_classes="md-block"
         )
 
-        chatbot = gr.Chatbot(height=400)
+        gr.HTML("""
+        <div class="stats">
+            <div class="stat"><span class="stat-val">3B</span><span class="stat-lbl">Params</span></div>
+            <div class="stat"><span class="stat-val">Q4</span><span class="stat-lbl">GGUF</span></div>
+            <div class="stat"><span class="stat-val">V100</span><span class="stat-lbl">1 GPU</span></div>
+            <div class="stat"><span class="stat-val">$0</span><span class="stat-lbl">API Cost</span></div>
+            <div class="stat"><span class="stat-val">8K</span><span class="stat-lbl">Context</span></div>
+        </div>
+        """)
+
+        chatbot = gr.Chatbot(height=420)
 
+        gr.HTML('<div class="input-row">')
         with gr.Row():
             txt = gr.Textbox(placeholder="Type a message or try an example below...", lines=1, scale=5)
-            btn = gr.Button("Send →", variant="primary", scale=1)
+            btn = gr.Button("Send →", elem_classes="send-btn")
+        gr.HTML('</div>')
 
-        gr.Examples(EXAMPLES, inputs=[txt], label="Try one of these →")
+        gr.HTML('<div class="examples">')
+        gr.HTML('<span class="examples-label">Try one of these →</span>')
+        for ex in EXAMPLES:
+            gr.HTML(
+                f'<button class="example-btn" onclick="document.querySelector(\'textarea\').value=\'{ex.replace(chr(39), "&#39;")}\'; document.querySelector(\'textarea\').dispatchEvent(new Event(\'input\'))">{ex}</button>'
+            )
+        gr.HTML('</div>')
 
         btn.click(respond, [txt], [chatbot])
         txt.submit(respond, [txt], [chatbot])
@@ -110,11 +379,16 @@ def build():
         gr.Markdown(
             "🔧 Demo shows tool-calling capability. "
             "[Deploy the model](https://huggingface.co/my-ai-stack/Stack-X-Ultimate) · "
-            "[Enterprise inquiry](https://www.stack-ai.me/contact)"
+            "[Enterprise inquiry](https://www.stack-ai.me/contact)",
+            elem_classes="footer"
         )
 
     return demo
 
 if __name__ == "__main__":
     demo = build()
-    demo.launch(server_name="0.0.0.0", server_port=7860, max_threads=4)
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        css=DARK_CSS,
+    )