feat: Flask web UI + README

README.md

@@ -1 +1,54 @@
-# glitch-squad-biomedical-assistant
+# Glitch Squad Biomedical Assistant
+
+A biomedical AI research assistant that retrieves live literature from PubMed and synthesises responses using a LangGraph ReAct agent powered by Llama 3.2.
+
+Built for the AMD Developer Hackathon 2026.
+
+---
+
+## What It Does
+
+You type a biomedical research question. The agent autonomously searches PubMed for relevant abstracts, reasons over the retrieved literature, and returns a synthesised answer with PMID citations.
+
+---
+
+## Tech Stack
+
+| Component | Technology |
+|---|---|
+| LLM | Llama 3.2 via Ollama (local) / Mistral 7B on AMD MI300X (cloud) |
+| Agent Framework | LangGraph prebuilt ReAct agent |
+| Literature Retrieval | BioPython Entrez / NCBIPubMed API |
+| Web Framework | Flask |
+| Frontend | HTML, CSS, JavaScript |
+| Runtime | Python 3.12, WSL2 Ubuntu 24.04 |
+
+---
+
+## How To Run Locally
+
+### Prerequisites
+- Python 3.12
+- Ollama installed
+- llama3.2 model pulled: `ollama pull llama3.2`
+
+### Setup
+
+    git clone https://github.com/azlaan428/glitch-squad-biomedical-assistant.git
+    cd glitch-squad-biomedical-assistant
+    python3 -m venv _venv
+    source venv/bin/activate
+    pip install -r requirements.txt
+
+### Run
+
+    ollama serve &
+    python app.py
+
+Open your browser at http://localhost:5000
+
+---
+
+## Team
+
+**Glitch Squad** -- Ziauddin University, Karachi, Pakistan

agent/agent.py

@@ -4,6 +4,7 @@ sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
 from langchain_core.tools import Tool
 from langchain_ollama import ChatOllama
 from langgraph.prebuilt import create_react_agent
+from langchain_core.messages import SystemMessage
 from retrieval.pubmed import fetch_pubmed
 
 
@@ -23,10 +24,20 @@ pubmed_tool = Tool(
     )
 )
 
+SYSTEM_PROMPT = """You are a biomedical research assistant. When given a question:
+1. Use the PubMedSearch tool to retrieve relevant literature
+2. Read the retrieved abstracts carefully
+3. Answer the user's specific question directly based on what the abstracts say
+4. Cite the PMID numbers of the papers you reference
+5. Do not summarise unrelated papers — only answer what was asked"""
+
+def build_agent():
+    llm = ChatOllama(model="llama3.2", temperature=0)
+    return create_react_agent(llm, [pubmed_tool], prompt=SYSTEM_PROMPT)
+
 if __name__ == "__main__":
     print("Connecting to Ollama...")
-    llm = ChatOllama(model="llama3.2", temperature=0)
-    agent = create_react_agent(llm, [pubmed_tool])
+    agent = build_agent()
     query = "What ML methods are used for epilepsy seizure detection?"
     print(f"\nQuery: {query}\n")
     result = agent.invoke({"messages": [{"role": "user", "content": query}]})

app.py

@@ -0,0 +1,35 @@
+import sys, os
+sys.path.append(os.path.dirname(os.path.abspath(__file__)))
+
+from flask import Flask, render_template, request, jsonify
+from agent.agent import build_agent
+
+app = Flask(__name__)
+agent_executor = None
+
+def get_agent():
+    global agent_executor
+    if agent_executor is None:
+        agent_executor = build_agent()
+    return agent_executor
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+@app.route("/query", methods=["POST"])
+def query():
+    data = request.get_json()
+    user_query = data.get("query", "").strip()
+    if not user_query:
+        return jsonify({"error": "Empty query"}), 400
+    try:
+        agent = get_agent()
+        result = agent.invoke({"messages": [{"role": "user", "content": user_query}]})
+        response = result["messages"][-1].content
+        return jsonify({"response": response})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+if __name__ == "__main__":
+    app.run(debug=True, port=5000)

static/script.js

@@ -0,0 +1,49 @@
+async function submitQuery() {
+    const input = document.getElementById('queryInput');
+    const btn = document.getElementById('submitBtn');
+    const statusBar = document.getElementById('statusBar');
+    const statusText = document.getElementById('statusText');
+    const responseBox = document.getElementById('responseBox');
+    const responseText = document.getElementById('responseText');
+
+    const query = input.value.trim();
+    if (!query) return;
+
+    btn.disabled = true;
+    responseBox.classList.add('hidden');
+    statusBar.classList.remove('hidden');
+    statusText.textContent = 'Retrieving PubMed literature...';
+
+    try {
+        const res = await fetch('/query', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ query: query })
+        });
+
+        const data = await res.json();
+        statusBar.classList.add('hidden');
+
+        if (data.error) {
+            responseText.textContent = 'Error: ' + data.error;
+        } else {
+            responseText.textContent = data.response;
+        }
+
+        responseBox.classList.remove('hidden');
+
+    } catch (err) {
+        statusBar.classList.add('hidden');
+        responseText.textContent = 'Network error: ' + err.message;
+        responseBox.classList.remove('hidden');
+    } finally {
+        btn.disabled = false;
+    }
+}
+
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        submitQuery();
+    }
+});

static/style.css

@@ -0,0 +1,153 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #0a0a0f;
+    color: #e0e0e0;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    width: 100%;
+    max-width: 860px;
+    padding: 40px 24px;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 48px;
+}
+
+header h1 {
+    font-size: 2.8rem;
+    font-weight: 700;
+    color: #00c896;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+}
+
+header .subtitle {
+    font-size: 1rem;
+    color: #888;
+    margin-top: 8px;
+    letter-spacing: 1px;
+}
+
+.search-box {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+textarea {
+    width: 100%;
+    padding: 16px;
+    background: #12121a;
+    border: 1px solid #2a2a3a;
+    border-radius: 8px;
+    color: #e0e0e0;
+    font-size: 1rem;
+    resize: vertical;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+textarea:focus {
+    border-color: #00c896;
+}
+
+button {
+    align-self: flex-end;
+    padding: 12px 32px;
+    background: #00c896;
+    color: #0a0a0f;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+button:hover {
+    background: #00a87e;
+}
+
+button:disabled {
+    background: #2a2a3a;
+    color: #555;
+    cursor: not-allowed;
+}
+
+.status-bar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 24px;
+    padding: 14px 18px;
+    background: #12121a;
+    border: 1px solid #2a2a3a;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    color: #888;
+}
+
+.spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid #2a2a3a;
+    border-top-color: #00c896;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    flex-shrink: 0;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.response-box {
+    margin-top: 32px;
+    padding: 28px;
+    background: #12121a;
+    border: 1px solid #2a2a3a;
+    border-radius: 8px;
+}
+
+.response-box h2 {
+    font-size: 1rem;
+    color: #00c896;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 16px;
+}
+
+#responseText {
+    font-size: 0.97rem;
+    line-height: 1.8;
+    color: #d0d0d0;
+    white-space: pre-wrap;
+}
+
+.hidden {
+    display: none;
+}
+
+footer {
+    text-align: center;
+    margin-top: 48px;
+    font-size: 0.8rem;
+    color: #444;
+}
+.disclaimer {
+    margin-top: 6px;
+    color: #555;
+    font-size: 0.75rem;
+}

templates/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Glitch Squad Biomedical Assistant</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Glitch Squad</h1>
+            <p class="subtitle">Biomedical AI Research Assistant</p>
+        </header>
+
+        <main>
+            <div class="search-box">
+                <textarea id="queryInput" placeholder="Ask a biomedical research question..." rows="3"></textarea>
+                <button id="submitBtn" onclick="submitQuery()">Search Literature</button>
+            </div>
+
+            <div id="statusBar" class="status-bar hidden">
+                <span class="spinner"></span>
+                <span id="statusText">Retrieving PubMed literature...</span>
+            </div>
+
+            <div id="responseBox" class="response-box hidden">
+                <h2>Research Summary</h2>
+                <div id="responseText"></div>
+            </div>
+        </main>
+
+        <footer>
+            <p>Powered by LangGraph + Llama 3.2 + PubMed &mdash; AMD Developer Hackathon 2026</p>
+            <p class="disclaimer">This is an AI model and may make mistakes. Always verify responses against primary sources.</p>
+        </footer>
+    </div>
+    <script src="/static/script.js"></script>
+</body>
+</html>