add client

app.py

@@ -0,0 +1,145 @@
+import os
+import re
+import base64
+from pathlib import Path
+from dotenv import load_dotenv
+import gradio as gr
+from smolagents import ToolCallingAgent, AzureOpenAIModel
+from smolagents.mcp_client import MCPClient
+
+from tools import generate_chart, LAST_CHART, AGENT_STEPS
+from prompt import AGENT_INSTRUCTIONS
+from templates import SIDEBAR_HTML, WELCOME_HTML, INPUT_HTML, FILL_JS, steps_to_html
+
+#  Config 
+
+BASE_DIR = Path(__file__).parent
+load_dotenv(BASE_DIR.parent / ".env")
+
+MCP_SERVER_URL = os.getenv("MCP_SERVER_URL", "https://sitsope-mcp-server-test.hf.space/gradio_api/mcp/sse")
+AZURE_ENDPOINT = os.getenv("AZURE_OPENAI_ENDPOINT", "https://collier-llm.openai.azure.com/")
+AZURE_API_KEY  = os.getenv("AZURE_OPENAI_API_KEY")
+AZURE_API_VER  = os.getenv("AZURE_OPENAI_API_VERSION", "2024-12-01-preview")
+AZURE_MODEL    = os.getenv("AZURE_OPENAI_MODEL", "gpt-4o")
+
+CSS = (BASE_DIR / "style.css").read_text()
+
+#  Agent setup 
+
+mcp_client = MCPClient({"url": MCP_SERVER_URL, "transport": "sse"}, structured_output=False)
+tools = mcp_client.get_tools()
+
+model = AzureOpenAIModel(
+    model_id=AZURE_MODEL,
+    azure_endpoint=AZURE_ENDPOINT,
+    api_key=AZURE_API_KEY,
+    api_version=AZURE_API_VER,
+)
+
+agent = ToolCallingAgent(
+    tools=[*tools, generate_chart],
+    model=model,
+    instructions=AGENT_INSTRUCTIONS,
+)
+
+#  Agent runner 
+
+def run_agent(question: str):
+    LAST_CHART["path"] = None
+    AGENT_STEPS.clear()
+
+    response = agent.run(question)
+
+    if hasattr(agent, "memory") and hasattr(agent.memory, "steps"):
+        for step in agent.memory.steps:
+            tool_name   = getattr(step, "tool_name", None) or getattr(step, "action", None)
+            tool_input  = getattr(step, "tool_arguments", None) or getattr(step, "tool_input", "")
+            observation = getattr(step, "observations", None) or getattr(step, "observation", "")
+            if tool_name and tool_name != "final_answer":
+                input_str = str(tool_input)[:300] + ("…" if len(str(tool_input)) > 300 else "")
+                obs_str   = str(observation)[:500] + ("…" if len(str(observation)) > 500 else "")
+                AGENT_STEPS.append((str(tool_name), input_str, obs_str))
+
+    chart_path = LAST_CHART["path"]
+    if chart_path is None:
+        match = re.search(r"(chart_[^\s]+\.png)", str(response))
+        if match:
+            chart_path = match.group(1)
+
+    return str(response), chart_path
+
+#  Event handlers 
+
+def img_to_base64(path: str) -> str:
+    with open(path, "rb") as f:
+        return base64.b64encode(f.read()).decode()
+
+
+def ask_agent(question: str, history: list):
+    if not question.strip():
+        return history, gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), ""
+
+    response, chart_path = run_agent(question)
+
+    history.append({"role": "user", "content": question})
+    if chart_path and os.path.exists(chart_path):
+        b64 = img_to_base64(chart_path)
+        history.append({"role": "assistant", "content": f"![chart](data:image/png;base64,{b64})"})
+    history.append({"role": "assistant", "content": response})
+
+    steps_html = steps_to_html(AGENT_STEPS)
+
+    return (
+        history,
+        gr.update(visible=False),
+        gr.update(visible=True),
+        gr.update(visible=bool(AGENT_STEPS), value=steps_html),
+        "",
+    )
+
+
+def new_chat(_history):
+    return [], gr.update(visible=True), gr.update(visible=False), gr.update(visible=False, value="")
+
+
+#  Gradio app 
+
+with gr.Blocks(title="SO Data Analyst", fill_height=True) as demo:
+    gr.HTML(f"<script>{FILL_JS}</script>")
+    gr.HTML(SIDEBAR_HTML)
+    new_btn = gr.Button("_", elem_id="new-chat-btn", visible=False)
+
+    with gr.Column(elem_id="main-col"):
+        welcome_html  = gr.HTML(WELCOME_HTML, visible=True)
+        chatbot       = gr.Chatbot(
+            height=None, elem_id="chatbot", show_label=False, visible=False,
+            avatar_images=(None, "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"),
+            layout="bubble", sanitize_html=False,
+        )
+        steps_display = gr.HTML(visible=False, elem_id="steps-box")
+
+        with gr.Column(elem_id="input-bar"):
+            with gr.Group(elem_id="input-container"):
+                question_box = gr.Textbox(
+                    placeholder="Ask anything about the Stack Overflow survey…",
+                    show_label=False, lines=1, max_lines=4, elem_id="msg-box",
+                )
+                gr.HTML(INPUT_HTML)
+            send_btn = gr.Button("↑", variant="primary", elem_id="send-btn", visible=False)
+            gr.HTML('<div id="input-note">Generated content may be inaccurate or false.</div>')
+
+    state = gr.State([])
+
+    outputs = [chatbot, welcome_html, chatbot, steps_display, question_box]
+    send_btn.click(ask_agent, inputs=[question_box, state], outputs=outputs)
+    question_box.submit(ask_agent, inputs=[question_box, state], outputs=outputs)
+    new_btn.click(new_chat, inputs=[state], outputs=[chatbot, welcome_html, chatbot, steps_display])
+
+if __name__ == "__main__":
+    demo.launch(
+        theme=gr.themes.Base(),
+        css=CSS,
+        server_name="0.0.0.0",
+        server_port=int(os.getenv("PORT", 7860)),
+        share=False,
+    )

prompt.py

@@ -0,0 +1,26 @@
+AGENT_INSTRUCTIONS = """
+You are an expert data analyst for Stack Overflow survey data.
+
+!!CRITICAL!! The table name is ALWAYS "surveyData" with capital D and double quotes.
+NEVER use "survey" — it does not exist. ALWAYS write: FROM "surveyData"
+
+Columns in "surveyData":
+- qid      : question identifier (e.g. "QID18")
+- qname    : question code name (e.g. "TechEndorse_1")
+- question : full question text
+- type     : question type (RO = rank order, ...)
+- sub      : sub-category or answer option
+- sq_id    : sub-question index (integer)
+
+When calling get_from_db, the result is a JSON string — a LIST of row dicts.
+
+CHART DECISION — decide autonomously:
+- Call generate_chart whenever data has distributions, counts, rankings, comparisons or proportions.
+- Do NOT wait for the user to ask for a chart — use your own judgment.
+- Use 'bar' for counts/rankings/comparisons, 'pie' for proportions, 'line' for trends.
+
+RESPONSE FORMAT:
+- Start with a short, direct answer (1-2 sentences max).
+- Then, only if useful, add a brief explanation or detail (2-3 sentences max).
+- Never start with preambles like "Based on the data..." — go straight to the answer.
+"""

requirements.txt

@@ -0,0 +1,6 @@
+gradio==6.12.0
+smolagents==1.24.0
+openai==2.24.0
+matplotlib==3.10.8
+seaborn==0.13.2
+python-dotenv==1.0.1

style.css

@@ -0,0 +1,185 @@
+html, body, .gradio-container { height:100% !important; margin:0 !important; padding:0 !important; }
+.gradio-container { max-width:100% !important; }
+footer { display:none !important; }
+.app { padding:0 !important; }
+
+/* ── sidebar  style ── */
+#sidebar {
+    position: fixed; left:0; top:0; bottom:0; width:260px;
+    background:#171717; display:flex; flex-direction:column;
+    padding:8px; box-sizing:border-box; z-index:200;
+}
+.sb-top {
+    display:flex; align-items:center; justify-content:space-between;
+    padding:6px 6px 4px 6px; margin-bottom:4px;
+}
+.sb-logo { color:#fff; font-size:0.95rem; font-weight:600; display:flex; align-items:center; gap:8px; }
+.sb-logo svg { width:18px; height:18px; fill:#fff; flex-shrink:0; }
+.sb-icon-btn {
+    width:36px; height:36px; border-radius:8px; background:transparent;
+    border:none; color:#8e8ea0; cursor:pointer;
+    display:flex; align-items:center; justify-content:center; font-size:1rem;
+}
+.sb-icon-btn:hover { background:#2a2a2a; color:#fff; }
+.sb-new-chat {
+    display:flex; align-items:center; gap:10px;
+    padding:10px 10px; border-radius:10px; cursor:pointer;
+    color:#ececf1; font-size:0.88rem; margin-bottom:8px;
+    border:none; background:transparent; width:100%; text-align:left;
+}
+.sb-new-chat:hover { background:#2a2a2a; }
+.sb-new-chat svg { width:16px; height:16px; stroke:#ececf1; flex-shrink:0; }
+.sb-section-label {
+    color:#8e8ea0; font-size:0.7rem; font-weight:600;
+    letter-spacing:.06em; padding:8px 10px 4px 10px;
+}
+.sb-item {
+    padding:8px 10px; border-radius:8px; cursor:pointer;
+    color:#ececf1; font-size:0.83rem; white-space:nowrap;
+    overflow:hidden; text-overflow:ellipsis;
+}
+.sb-item:hover { background:#2a2a2a; }
+.sb-spacer { flex:1; }
+.sb-divider { border:none; border-top:1px solid #2a2a2a; margin:6px 0; }
+.sb-bottom { padding:4px 0; }
+.sb-user {
+    display:flex; align-items:center; gap:10px;
+    padding:10px; border-radius:10px; cursor:pointer;
+}
+.sb-user:hover { background:#2a2a2a; }
+.sb-avatar {
+    width:32px; height:32px; border-radius:50%;
+    background:#FF9D00; display:flex; align-items:center;
+    justify-content:center; color:#fff; font-size:0.8rem; font-weight:700; flex-shrink:0;
+}
+.sb-username { color:#ececf1; font-size:0.85rem; font-weight:500; }
+.sb-dots { margin-left:auto; color:#8e8ea0; font-size:1rem; }
+
+/* ── main area ── */
+#main-col {
+    display:flex; flex-direction:column; height:100vh;
+    background:#212121 !important; padding:0 !important;
+    margin-left:260px; width:calc(100vw - 260px) !important;
+}
+.gradio-container > .main > .wrap { padding:0 !important; gap:0 !important; }
+
+/* ── welcome screen ── */
+#welcome {
+    flex:1; display:flex; flex-direction:column;
+    align-items:center; justify-content:center; gap:20px;
+    padding-bottom:160px; background:#212121;
+}
+#welcome-logo { font-size:3rem; }
+#welcome-title { font-size:1.5rem; font-weight:700; color:#fff; margin:0; }
+#welcome-sub { font-size:0.88rem; color:#666; margin:0; }
+#pills-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:620px; }
+.pill {
+    background:#2f2f2f; border:1px solid #3a3a3a; border-radius:20px;
+    padding:6px 14px; font-size:0.8rem; color:#bbb; cursor:pointer;
+    transition: background .15s;
+}
+.pill:hover { background:#3a3a3a; border-color:#555; color:#fff; }
+
+/* ── chatbot ── */
+#chatbot {
+    flex:1; overflow-y:auto;
+    border:none !important; border-radius:0 !important;
+    box-shadow:none !important; background:#212121 !important;
+    padding-bottom:160px !important;
+}
+#chatbot > div { max-width:760px; margin:0 auto; padding:16px 8px; background:#212121 !important; }
+#chatbot .bubble-wrap { background:#212121 !important; }
+#chatbot [data-testid="bot"] .prose { color:#e0e0e0 !important; }
+#chatbot [data-testid="user"] .prose { color:#fff !important; }
+#chatbot img { border-radius:10px; max-width:100%; margin-top:8px; }
+
+/* ── reasoning steps ── */
+#steps-box {
+    max-width:760px; margin:0 auto 8px auto; width:100%;
+    background:transparent !important; border:none !important; padding:0 !important;
+}
+.steps-toggle {
+    background:none; border:none; color:#444; font-size:0.7rem;
+    cursor:pointer; padding:2px 0 2px 2px;
+    display:flex; align-items:center; gap:4px; line-height:1;
+}
+.steps-toggle:hover { color:#888; }
+.steps-content {
+    display:none; margin-top:6px; padding:10px 12px;
+    background:#161616; border-radius:7px; border:1px solid #252525;
+    font-size:0.78rem; color:#aaa; overflow-x:auto;
+}
+.steps-content pre {
+    background:#1e1e1e; padding:6px 8px; border-radius:5px;
+    font-size:0.72rem; color:#ccc; overflow-x:auto;
+}
+.step-tool {
+    font-family:monospace; background:#2a2a2a; padding:1px 5px;
+    border-radius:4px; font-size:0.72rem; color:#FF9D00;
+}
+
+/* ── input bar (fixed bottom) ── */
+#input-bar {
+    position:fixed !important;
+    bottom:0; left:260px; right:0;
+    background:linear-gradient(to top, #212121 70%, transparent);
+    padding:20px calc(50% - 390px + 130px) 12px;
+    z-index:100;
+}
+#input-container {
+    display:flex; flex-direction:column;
+    background:#2f2f2f; border:1px solid #424242;
+    border-radius:16px; overflow:hidden;
+    transition:border-color .2s;
+}
+#input-container:focus-within { border-color:#666; }
+#input-container #msg-box { flex:1; background:transparent; border:none !important; box-shadow:none !important; }
+#input-container #msg-box textarea {
+    background:transparent !important; border:none !important;
+    box-shadow:none !important; outline:none !important;
+    color:#ececf1 !important; font-size:0.93rem !important;
+    padding:12px 16px 4px 16px !important; resize:none !important;
+    min-height:44px !important;
+}
+#input-container #msg-box textarea::placeholder { color:#555 !important; }
+#input-bottom {
+    display:flex; align-items:center; justify-content:space-between;
+    padding:4px 10px 8px 10px;
+}
+.input-left { display:flex; align-items:center; gap:8px; }
+.add-btn {
+    width:28px; height:28px; border-radius:50%;
+    background:#3a3a3a; border:1px solid #4a4a4a;
+    color:#888; font-size:1rem; cursor:pointer;
+    display:flex; align-items:center; justify-content:center;
+}
+.add-btn:hover { background:#444; color:#ccc; }
+.mcp-pill {
+    display:flex; align-items:center; gap:5px;
+    background:#3a3a3a; border:1px solid #4a4a4a;
+    border-radius:20px; padding:3px 10px;
+    font-size:0.74rem; color:#aaa; cursor:pointer;
+}
+.mcp-pill:hover { background:#444; }
+.mcp-dot { width:7px; height:7px; border-radius:50%; background:#FF9D00; }
+.input-right { display:flex; align-items:center; gap:6px; }
+.mic-btn {
+    width:32px; height:32px; border-radius:50%;
+    background:transparent; border:none;
+    color:#555; font-size:1rem; cursor:pointer;
+    display:flex; align-items:center; justify-content:center;
+}
+.mic-btn:hover { color:#888; }
+#send-btn { display:none !important; }
+.send-visual-btn {
+    width:32px; height:32px; border-radius:50%;
+    background:#FF9D00; border:none;
+    color:#fff; font-size:1rem; font-weight:700;
+    cursor:pointer; display:flex; align-items:center; justify-content:center;
+    transition:background .15s;
+}
+.send-visual-btn:hover { background:#e68c00; }
+#input-note {
+    text-align:center; font-size:0.68rem; color:#3a3a3a;
+    padding:4px 0 8px 0;
+}

templates.py

@@ -0,0 +1,106 @@
+SUGGESTIONS = [
+    "How many unique questions?",
+    "Sub-options per question",
+    "Questions above average sub-options",
+    "Distribution by question type",
+    "Which question has the most sub-options?",
+    "Percentage of rows per question",
+]
+
+FILL_JS = """
+function fillInput(text) {
+    const ta = document.querySelector('#msg-box textarea');
+    if (!ta) return;
+    const nativeSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set;
+    nativeSetter.call(ta, text);
+    ta.dispatchEvent(new Event('input', { bubbles: true }));
+}
+"""
+
+SIDEBAR_HTML = """
+<div id="sidebar">
+  <div class="sb-top">
+    <div class="sb-logo">
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"/>
+      </svg>
+      SO Analyst
+    </div>
+    <button class="sb-icon-btn" onclick="document.getElementById('new-chat-btn').click()" title="New chat">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M12 5v14M5 12h14"/>
+      </svg>
+    </button>
+  </div>
+
+  <button class="sb-new-chat" onclick="document.getElementById('new-chat-btn').click()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+    </svg>
+    New chat
+  </button>
+
+  <div class="sb-section-label">TODAY</div>
+  <div class="sb-item">Sub-options per question</div>
+  <div class="sb-item">Distribution by question type</div>
+  <div class="sb-item">Questions above average</div>
+
+  <div class="sb-spacer"></div>
+  <hr class="sb-divider">
+
+  <div class="sb-bottom">
+    <div class="sb-user">
+      <div class="sb-avatar">S</div>
+      <span class="sb-username">sitsope</span>
+      <span class="sb-dots">···</span>
+    </div>
+  </div>
+</div>
+"""
+
+WELCOME_HTML = """
+<div id="welcome">
+  <div id="welcome-logo">📊</div>
+  <p id="welcome-title">Stack Overflow Analyst</p>
+  <p id="welcome-sub">Ask anything about the survey data — charts generated automatically.</p>
+  <div id="pills-row">
+    {pills}
+  </div>
+</div>
+""".format(pills="\n".join(
+    f'<span class="pill" onclick="fillInput(\'{s}\')">{s}</span>'
+    for s in SUGGESTIONS
+))
+
+INPUT_HTML = """
+<div id="input-bottom">
+  <div class="input-left">
+    <button class="add-btn">+</button>
+    <div class="mcp-pill"><span class="mcp-dot"></span> MCP (2)</div>
+  </div>
+  <div class="input-right">
+    <button class="mic-btn">🎤</button>
+    <button class="send-visual-btn" onclick="document.getElementById('send-btn').click()">↑</button>
+  </div>
+</div>
+"""
+
+def steps_to_html(agent_steps: list) -> str:
+    if not agent_steps:
+        return ""
+    rows = "".join(f"""
+    <div style="margin-bottom:10px">
+      <span style="font-size:0.72rem;color:#888">Step {i}</span>
+      <span class="step-tool">{name}</span>
+      <pre style="margin:4px 0 2px 0">{inp}</pre>
+      <pre style="margin:0">{obs}</pre>
+    </div>""" for i, (name, inp, obs) in enumerate(agent_steps, 1))
+    return f"""
+    <div>
+      <button class="steps-toggle"
+        onclick="var c=this.nextElementSibling;c.style.display=c.style.display==='block'?'none':'block';
+                 this.querySelector('span').textContent=c.style.display==='block'?'▾':'▸'">
+        · reasoning steps <span>▸</span>
+      </button>
+      <div class="steps-content">{rows}</div>
+    </div>"""

tools.py

@@ -0,0 +1,72 @@
+import re
+import matplotlib.pyplot as plt
+import matplotlib
+matplotlib.use("Agg")
+import seaborn as sns
+sns.set_theme(style="whitegrid", palette="muted")
+from typing import List
+from pathlib import Path
+from smolagents import tool
+
+CHARTS_DIR = Path(__file__).parent / "charts"
+CHARTS_DIR.mkdir(exist_ok=True)
+
+LAST_CHART: dict = {"path": None}
+
+
+@tool
+def generate_chart(
+    labels: List[str],
+    values: List[float],
+    chart_type: str,
+    title: str,
+    xlabel: str = "",
+    ylabel: str = "",
+) -> str:
+    """
+    Generate a bar, pie, or line chart from data and save it as a PNG file.
+    Call this whenever the data contains a distribution, ranking, comparison,
+    count breakdown, or proportion that would be clearer as a visual.
+
+    Args:
+        labels: List of category labels (strings).
+        values: List of numeric values matching each label.
+        chart_type: 'bar' for counts/rankings/comparisons, 'pie' for proportions, 'line' for trends.
+        title: Title displayed on the chart.
+        xlabel: X-axis label (bar / line only).
+        ylabel: Y-axis label (bar / line only).
+
+    Returns:
+        The file path of the saved PNG image.
+    """
+    fig, ax = plt.subplots(figsize=(10, 5))
+
+    if chart_type == "pie":
+        ax.pie(values, labels=labels, autopct="%1.1f%%", startangle=140,
+               colors=sns.color_palette("muted", len(labels)))
+        ax.axis("equal")
+    elif chart_type == "line":
+        sns.lineplot(x=labels, y=values, marker="o", linewidth=2.5, ax=ax)
+        ax.set_xlabel(xlabel)
+        ax.set_ylabel(ylabel)
+        plt.xticks(rotation=45, ha="right")
+    else:
+        sns.barplot(x=labels, y=values, hue=labels, palette="muted", legend=False, ax=ax)
+        ax.set_xlabel(xlabel)
+        ax.set_ylabel(ylabel)
+        plt.xticks(rotation=45, ha="right")
+        for p in ax.patches:
+            ax.annotate(f"{p.get_height():.0f}",
+                        (p.get_x() + p.get_width() / 2, p.get_height()),
+                        ha="center", va="bottom", fontsize=9)
+
+    ax.set_title(title, fontsize=13, fontweight="bold", pad=12)
+    fig.tight_layout()
+
+    safe_title = re.sub(r"[^\w\s-]", "", title[:40]).strip().replace(" ", "_")
+    filename = str(CHARTS_DIR / f"chart_{safe_title}.png")
+    plt.savefig(filename, dpi=150)
+    plt.close()
+
+    LAST_CHART["path"] = filename
+    return f"Chart saved → {filename}"