app.py

"""
Stack X Ultimate — Hugging Face Space
Gradio 6.0 compatible.
"""

import gradio as gr
import re
import json
from datetime import datetime

# ─── Tools ─────────────────────────────────────────────────────────────────

def calculator(expression: str) -> str:
    try:
        cleaned = re.sub(r"[^0-9+\-*/.()% ]", "", expression)
        return f"Result: {eval(cleaned, {'__builtins__': {}})}"
    except Exception as e:
        return f"Error: {e}"

def get_current_time() -> str:
    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 matching '{pattern}' in '{path}'"
        return f"Found {len(matches)} file(s):\n" + "\n".join(matches[:20])
    except Exception as e:
        return f"Error: {e}"

def run_command(command: str, cwd: str = ".") -> str:
    import subprocess
    try:
        r = subprocess.run(command, shell=True, cwd=cwd, capture_output=True, text=True, timeout=30)
        out = r.stdout.strip() or "(no output)"
        err = r.stderr.strip() if r.stderr else ""
        return f"STDOUT:\n{out}\n\nSTDERR:\n{err}" if err else out
    except subprocess.TimeoutExpired:
        return "Timed out after 30 seconds."
    except Exception as e:
        return f"Error: {e}"

def execute(tool_name: str, tool_args: dict) -> str:
    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", ".")),
    }
    return fns.get(tool_name, lambda: f"Unknown: {tool_name}")()

# ─── Response Logic ──────────────────────────────────────────────────────────

def respond(message: str, history: list):
    msg = message.lower()

    if any(k in msg for k in ["calculate", "compute", "math", "roi", "compound", "interest", "%", "$"]):
        expr = re.search(r"[\d+\-*/.()% ]+", message)
        tool, args = "calculator", {"expression": expr.group().strip() if expr else "0"}
    elif any(k in msg for k in ["time", "date", "now", "current"]):
        tool, args = "get_current_time", {}
    elif any(k in msg for k in ["find", "search", "file", "look for", "where is", "list"]):
        pat = re.search(r"\*\.[a-zA-Z]+", message)
        tool, args = "search_files", {"path": ".", "pattern": pat.group() if pat else "*"}
    elif any(k in msg for k in ["run", "execute", "terminal", "bash", "git ", "ls ", "ps ", "docker"]):
        m = re.search(r"`([^`]+)`", message)
        cmd = m.group(1) if m else message.split()[-1]
        tool, args = "run_command", {"command": cmd, "cwd": "."}
    else:
        return history + [[message, "This is a demo of Stack X Ultimate's tool-calling capability. The fine-tuned model processes your message and decides whether to call a tool. Try one of the examples below! 🔧"]]

    result = execute(tool, args)
    call = f"🔧 Calling `{tool}`...\n\n```json\n{json.dumps(args, indent=2)}\n```"
    res = f"✅ **{tool}** result:\n\n```\n{result}\n```"
    return history + [[call, res]]

# ─── 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",
    "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(title="Stack X Ultimate") as demo:
        gr.Markdown(
            "## 🤖 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`",
            elem_classes="md-block"
        )

        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 →", elem_classes="send-btn")
        gr.HTML('</div>')

        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])
        txt.submit(lambda: "", None, txt)

        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)",
            elem_classes="footer"
        )

    return demo

if __name__ == "__main__":
    demo = build()
    demo.launch(
        server_name="0.0.0.0",
        server_port=7860,
        css=DARK_CSS,
    )