Upload 4 files

Dockerfile

@@ -0,0 +1,18 @@
+FROM python:3.11-slim
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+RUN useradd -m -u 1000 user
+USER user
+
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+WORKDIR $HOME/app
+
+COPY --chown=user . $HOME/app
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,11 +1,24 @@
 ---
-title: CSTR
-emoji: 📉
-colorFrom: yellow
-colorTo: green
+title: CS Trivia Agent
+emoji: 🧠
+colorFrom: blue
+colorTo: purple
 sdk: docker
+app_port: 7860
 pinned: false
-license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# CS Trivia Agent
+
+Agentic AI that answers computer science trivia questions with source articles and related images.
+
+- **LLM**: Gemini Flash (free tier) with automatic model fallback
+- **Search**: DuckDuckGo (no API key needed)
+- **Images**: DuckDuckGo image search with smart LLM-generated fallback queries
+- **Frontend**: FastAPI + vanilla HTML/CSS/JS with SSE streaming
+- **Cost**: $0
+
+## Setup
+
+Set `GEMINI_API_KEY` as a secret in your Space settings.
+Get a free key at: https://aistudio.google.com/app/apikey

app.py

@@ -0,0 +1,688 @@
+"""
+CS Trivia Agent — Single-file FastAPI app for HuggingFace Spaces
+=================================================================
+- Uses NEW google-genai SDK
+- Smart image fallback: LLM suggests related people/companies/concepts
+- Source fallback: tries Grokepedia, then shows Wikipedia logo
+- 50 layman-friendly CS trivia questions
+"""
+
+from fastapi import FastAPI
+from fastapi.responses import HTMLResponse, StreamingResponse, JSONResponse
+from google import genai
+from duckduckgo_search import DDGS
+import requests
+from PIL import Image
+from io import BytesIO
+import base64
+import os
+import time
+import json
+import logging
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+app = FastAPI(title="CS Trivia Agent")
+
+# ─── Gemini ───
+GEMINI_API_KEY = os.environ.get("GEMINI_API_KEY", "")
+gemini_client = None
+if GEMINI_API_KEY:
+    gemini_client = genai.Client(api_key=GEMINI_API_KEY)
+
+GEMINI_MODELS = [
+    "gemini-2.5-flash",
+    "gemini-2.0-flash",
+    "gemini-2.5-flash-lite",
+    "gemini-2.0-flash-lite",
+]
+
+# ─── 50 Trivia Questions (all have 1-4 word answers) ───
+PRESET_QUESTIONS = [
+    # Everyday tech origins
+    "What was the first web browser called?",
+    "What does USB stand for?",
+    "What does HTTP stand for?",
+    "What does Wi-Fi actually stand for?",
+    "What does CPU stand for?",
+    "What does GPU stand for?",
+    "What does HTML stand for?",
+    "What does RAM stand for?",
+    "What does SSD stand for?",
+    "What does PDF stand for?",
+    # Famous people
+    "Who invented the World Wide Web?",
+    "Who co-founded Apple with Steve Jobs?",
+    "Who created Facebook?",
+    "Who co-founded Microsoft with Bill Gates?",
+    "Who co-founded Google with Sergey Brin?",
+    "Who created the Linux operating system?",
+    "Who invented the first computer mouse?",
+    "Who is known as the father of AI?",
+    "Who wrote the first computer program ever?",
+    "Who invented copy and paste?",
+    # History & firsts
+    "What was the first programmable computer called?",
+    "What was the first video game console to sell millions?",
+    "What year was the first iPhone released?",
+    "What year was Google founded?",
+    "What was the first computer programming language?",
+    "What company built the first personal computer?",
+    "What year did Wikipedia launch?",
+    "What does the '__(dot) com__' in websites stand for?",
+    "What was the first social media site?",
+    "What country invented the QR code?",
+    # AI & modern tech
+    "What does AI stand for?",
+    "What does GPT stand for in ChatGPT?",
+    "What company created ChatGPT?",
+    "What company created AlphaFold?",
+    "What game did DeepMind's AI famously beat a human at?",
+    "What does VR stand for?",
+    "What company owns Instagram?",
+    "What programming language is most used for AI?",
+    "What does IoT stand for?",
+    "What does API stand for?",
+    # Concepts & fun facts
+    "What number system do computers use?",
+    "What does the term 'bug' in software come from?",
+    "What language is named after a comedy group?",
+    "What does SQL stand for?",
+    "What does CAPTCHA prove you are?",
+    "How many bits are in one byte?",
+    "What does LAN stand for?",
+    "What does URL stand for?",
+    "What planet lost a spacecraft due to a unit conversion bug?",
+    "What does JPEG stand for?",
+    # AI & ML — Key figures
+    "Who is known as the godfather of deep learning?",
+    "Who created the first neural network model in 1943?",
+    "Who invented backpropagation for training neural networks?",
+    "Who led the team that created AlphaGo?",
+    "Who founded OpenAI as its first CEO?",
+    "Who is the CEO of OpenAI as of 2024?",
+    "Who coined the term 'machine learning' in 1959?",
+    "Who invented the transformer architecture used in GPT?",
+    "Who created the Python programming language?",
+    "Who won the 2024 Nobel Prize for AI contributions?",
+    # AI & ML — Key models & systems
+    "What does BERT stand for in Google's AI model?",
+    "What does DALL-E generate from text prompts?",
+    "What AI system beat the world chess champion in 1997?",
+    "What does GAN stand for in machine learning?",
+    "What is the name of Google's AI chatbot?",
+    "What AI model powers Microsoft's Copilot?",
+    "What does LLM stand for in AI?",
+    "What open-source AI model did Meta release?",
+    "What does YOLO stand for in computer vision?",
+    "What AI tool generates music from text prompts by Google?",
+    # AI & ML — Key concepts
+    "What does NLP stand for in AI?",
+    "What does CNN stand for in deep learning?",
+    "What does RNN stand for in deep learning?",
+    "What is the process of training AI with rewards called?",
+    "What does epoch mean in machine learning training?",
+    "What type of AI learns from labeled examples?",
+    "What type of AI finds patterns without labels?",
+    "What does overfitting mean in machine learning?",
+    "What is a dataset split into for testing AI models?",
+    "What does GPU stand for and why is it key for AI?",
+    # AI & ML — Key years & milestones
+    "What year did ChatGPT launch?",
+    "What year did AlphaGo beat Lee Sedol?",
+    "What year was the ImageNet competition breakthrough?",
+    "What year was the original transformer paper published?",
+    "What year did IBM's Watson win Jeopardy?",
+    "What year was TensorFlow first released by Google?",
+    "What year did AlphaFold solve protein folding?",
+    "What year was the term 'artificial intelligence' first coined?",
+    "What year was PyTorch released by Facebook?",
+    "What year did GPT-4 launch?",
+    # AI & ML — Companies & tools
+    "What company makes the H100 GPU chip used for AI?",
+    "What does TPU stand for (Google's AI chip)?",
+    "What company created the Stable Diffusion image model?",
+    "What AI company did Elon Musk start in 2023?",
+    "What is Hugging Face best known for in AI?",
+    "What cloud platform is most popular for training AI models?",
+    "What company created the Claude AI assistant?",
+    "What AI framework did Google release for machine learning?",
+    "What does AutoML do?",
+    "What AI company created the Midjourney image generator?",
+]
+
+
+# ═══════════════════════════════════════════════════════════════
+# AGENT TOOLS
+# ═══════════════════════════════════════════════════════════════
+
+def call_gemini(prompt: str, max_retries: int = 2) -> str:
+    if not gemini_client:
+        return "GEMINI_API_KEY not configured. Add it in Space Settings > Secrets."
+    last_error = ""
+    for model_name in GEMINI_MODELS:
+        for attempt in range(max_retries):
+            try:
+                response = gemini_client.models.generate_content(
+                    model=model_name, contents=prompt,
+                )
+                return response.text.strip()
+            except Exception as e:
+                last_error = str(e)
+                if "429" in last_error or "quota" in last_error.lower() or "rate" in last_error.lower():
+                    wait = min(10 * (attempt + 1), 45)
+                    if attempt < max_retries - 1:
+                        logger.warning(f"Rate limited on {model_name}, retry in {wait}s")
+                        time.sleep(wait)
+                    else:
+                        break
+                else:
+                    break
+    return f"All models failed. Last error: {last_error[:200]}"
+
+
+def tool_search_article(query: str) -> dict:
+    """Search for a source. Falls back to Grokepedia if no non-Wikipedia result."""
+    try:
+        with DDGS() as ddgs:
+            results = list(ddgs.text(f"{query} computer science", max_results=10))
+        # Prefer non-Wikipedia
+        for r in results:
+            url = r.get("href", "")
+            if "wikipedia.org" not in url.lower():
+                return {"title": r.get("title", ""), "url": url, "snippet": r.get("body", "")}
+        # Accept Wikipedia if nothing else
+        if results:
+            r = results[0]
+            return {"title": r.get("title", ""), "url": r.get("href", ""), "snippet": r.get("body", "")}
+    except Exception as e:
+        logger.error(f"Search error: {e}")
+
+    # Fallback: try Grokepedia
+    try:
+        grok_query = query.replace(" ", "+")
+        grok_url = f"https://grokepedia.com/search?q={grok_query}"
+        return {"title": f"Search on Grokepedia: {query}", "url": grok_url, "snippet": ""}
+    except Exception:
+        pass
+
+    return {"title": "No results", "url": "", "snippet": ""}
+
+
+def _get_image_search_queries(question: str, answer: str) -> list[str]:
+    """Use LLM to generate smart image search queries based on Q&A context."""
+    prompt = f"""Given this CS trivia Q&A, suggest 4 short image search queries (2-4 words each) that would find a relevant, interesting image. Include the main topic, a key person involved, a related company/logo, and a related concept or invention.
+
+Question: {question}
+Answer: {answer}
+
+Return ONLY 4 queries, one per line, nothing else:"""
+
+    try:
+        result = call_gemini(prompt)
+        queries = [line.strip().strip("-•*").strip() for line in result.split("\n") if line.strip() and len(line.strip()) < 60]
+        return queries[:4] if queries else [question]
+    except Exception:
+        return [question]
+
+
+def tool_fetch_image(queries: list[str]) -> tuple[str | None, str]:
+    """Try multiple search queries. Returns (base64_data, caption)."""
+    headers = {
+        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 Chrome/120.0.0.0 Safari/537.36",
+        "Accept": "image/webp,image/apng,image/*,*/*;q=0.8",
+    }
+    BLOCKED = ["getty", "alamy", "shutterstock", "istockphoto", "dreamstime",
+               "123rf", "depositphotos", "adobestock", "stock.adobe"]
+
+    def try_dl(img_url):
+        if not img_url or len(img_url) > 2000:
+            return None
+        if any(d in img_url.lower() for d in BLOCKED):
+            return None
+        try:
+            resp = requests.get(img_url, headers=headers, timeout=8, allow_redirects=True)
+            resp.raise_for_status()
+            ct = resp.headers.get("Content-Type", "")
+            if "html" in ct or "json" in ct or len(resp.content) < 1000:
+                return None
+            img = Image.open(BytesIO(resp.content))
+            img.load()
+            if img.mode in ("RGBA", "LA", "PA", "P"):
+                bg = Image.new("RGB", img.size, (255, 255, 255))
+                if "A" in img.mode or (img.mode == "P" and "transparency" in img.info):
+                    img_rgba = img.convert("RGBA")
+                    bg.paste(img_rgba, mask=img_rgba.split()[-1])
+                else:
+                    bg.paste(img.convert("RGB"))
+                img = bg
+            elif img.mode != "RGB":
+                img = img.convert("RGB")
+            if img.size[0] < 80 or img.size[1] < 80:
+                return None
+            if max(img.size) > 512:
+                img.thumbnail((512, 512), Image.LANCZOS)
+            buf = BytesIO()
+            img.save(buf, format="JPEG", quality=85)
+            return f"data:image/jpeg;base64,{base64.b64encode(buf.getvalue()).decode()}"
+        except Exception:
+            return None
+
+    for sq in queries:
+        try:
+            with DDGS() as ddgs:
+                results = list(ddgs.images(sq, max_results=10))
+            for r in results:
+                img = try_dl(r.get("image", "")) or try_dl(r.get("thumbnail", ""))
+                if img:
+                    return img, sq
+        except Exception:
+            continue
+
+    return None, ""
+
+
+def tool_llm_answer(question: str, context: str = "") -> str:
+    prompt = f"""You are a friendly computer science trivia expert explaining things to a curious non-technical person. Answer in 2-3 concise, engaging sentences. Use simple language.
+
+Question: {question}
+{"Additional context: " + context if context else ""}
+
+Answer:"""
+    return call_gemini(prompt)
+
+
+# ═══════════════════════════════════════════════════════════════
+# WIKIPEDIA FALLBACK IMAGE (embedded tiny PNG)
+# ═══════════════════════════════════════════════════════════════
+
+# A small Wikipedia "W" logo placeholder — generated as a simple SVG converted to data URI
+WIKIPEDIA_PLACEHOLDER = "data:image/svg+xml;base64," + base64.b64encode(b'''<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
+<rect width="200" height="200" rx="20" fill="#1a1a2e"/>
+<text x="100" y="85" text-anchor="middle" font-family="Georgia,serif" font-size="72" font-weight="bold" fill="#e2e8f0">W</text>
+<text x="100" y="120" text-anchor="middle" font-family="sans-serif" font-size="14" fill="#64748b">Wikipedia</text>
+<text x="100" y="140" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#475569">No image found</text>
+</svg>''').decode()
+
+
+# ═══════════════════════════════════════════════════════════════
+# API ROUTES
+# ═══════════════════════════════════════════════════════════════
+
+@app.get("/api/questions")
+async def get_questions():
+    numbered = [{"num": i+1, "text": q} for i, q in enumerate(PRESET_QUESTIONS)]
+    return JSONResponse(numbered)
+
+
+@app.get("/api/ask")
+async def ask_question(q: str):
+    def generate():
+        question = q.strip()
+        if not question:
+            yield f"data: {json.dumps({'type': 'error', 'message': 'Empty question'})}\n\n"
+            return
+
+        # Step 1 — Search for source article
+        yield f"data: {json.dumps({'type': 'step', 'step': 1, 'message': 'Searching the web...'})}\n\n"
+        article = tool_search_article(question)
+        src_url = article.get("url", "")
+        src_title = article.get("title", "")
+        snippet = article.get("snippet", "")
+
+        # If no source at all, link to Grokepedia
+        if not src_url:
+            grok_query = question.replace(" ", "+")
+            src_url = f"https://grokepedia.com/search?q={grok_query}"
+            src_title = f"Search Grokepedia: {question[:50]}"
+
+        yield f"data: {json.dumps({'type': 'source', 'title': src_title, 'url': src_url})}\n\n"
+
+        # Step 2 — Generate answer
+        yield f"data: {json.dumps({'type': 'step', 'step': 2, 'message': 'Generating answer with AI...'})}\n\n"
+        answer = tool_llm_answer(question, context=snippet)
+        yield f"data: {json.dumps({'type': 'answer', 'text': answer})}\n\n"
+
+        # Step 3 — Smart image search with LLM-generated fallback queries
+        yield f"data: {json.dumps({'type': 'step', 'step': 3, 'message': 'Finding the best image...'})}\n\n"
+
+        # Ask LLM for smart image queries based on the answer
+        image_queries = _get_image_search_queries(question, answer)
+        image_b64, matched_query = tool_fetch_image(image_queries)
+
+        if image_b64:
+            caption = f"Image: {matched_query}" if matched_query else ""
+            yield f"data: {json.dumps({'type': 'image', 'data': image_b64, 'caption': caption})}\n\n"
+        else:
+            # Final fallback: show Wikipedia placeholder
+            yield f"data: {json.dumps({'type': 'image', 'data': WIKIPEDIA_PLACEHOLDER, 'caption': 'No image found — try Wikipedia for visuals'})}\n\n"
+
+        yield f"data: {json.dumps({'type': 'done'})}\n\n"
+
+    return StreamingResponse(generate(), media_type="text/event-stream")
+
+
+# ═══════════════════════════════════════════════════════════════
+# HTML — embedded directly
+# ═══════════════════════════════════════════════════════════════
+
+INDEX_HTML = """<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>CS Trivia Agent</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #0a0e17;
+    --surface: #111827;
+    --surface2: #1a2235;
+    --border: #1e293b;
+    --accent: #22d3ee;
+    --accent2: #a78bfa;
+    --text: #e2e8f0;
+    --text-dim: #64748b;
+    --success: #34d399;
+    --warn: #fbbf24;
+    --radius: 12px;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'DM Sans', sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+  body::before {
+    content: '';
+    position: fixed;
+    top: -50%; left: -50%;
+    width: 200%; height: 200%;
+    background: radial-gradient(ellipse at 30% 20%, rgba(34,211,238,0.04) 0%, transparent 50%),
+                radial-gradient(ellipse at 70% 80%, rgba(167,139,250,0.04) 0%, transparent 50%);
+    z-index: 0;
+    pointer-events: none;
+  }
+  .container {
+    max-width: 880px;
+    margin: 0 auto;
+    padding: 24px 20px;
+    position: relative;
+    z-index: 1;
+  }
+  .header {
+    text-align: center;
+    padding: 32px 24px;
+    margin-bottom: 28px;
+    background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    position: relative;
+    overflow: hidden;
+  }
+  .header::after {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
+  }
+  .header h1 {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 28px; font-weight: 600;
+    letter-spacing: -0.5px; margin-bottom: 6px;
+  }
+  .header h1 span { color: var(--accent); }
+  .header p { color: var(--text-dim); font-size: 13px; letter-spacing: 0.3px; }
+  .input-area { display: flex; gap: 10px; margin-bottom: 14px; }
+  .input-area input {
+    flex: 1;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 14px 18px;
+    color: var(--text);
+    font-size: 15px;
+    font-family: 'DM Sans', sans-serif;
+    outline: none;
+    transition: border-color 0.2s;
+  }
+  .input-area input:focus { border-color: var(--accent); }
+  .input-area input::placeholder { color: var(--text-dim); }
+  .ask-btn {
+    background: linear-gradient(135deg, #22d3ee, #06b6d4);
+    color: #0a0e17; border: none;
+    border-radius: var(--radius);
+    padding: 14px 28px; font-size: 15px;
+    font-weight: 600; font-family: 'DM Sans', sans-serif;
+    cursor: pointer; transition: all 0.2s; white-space: nowrap;
+  }
+  .ask-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(34,211,238,0.25); }
+  .ask-btn:active { transform: translateY(0); }
+  .ask-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
+  .preset-row { margin-bottom: 24px; }
+  .preset-row select {
+    width: 100%;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 12px 16px;
+    color: var(--text-dim);
+    font-size: 14px;
+    font-family: 'DM Sans', sans-serif;
+    outline: none; cursor: pointer; appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 16px center;
+  }
+  .preset-row select:focus { border-color: var(--accent); }
+  .results { display: none; gap: 20px; margin-top: 8px; }
+  .results.visible { display: grid; grid-template-columns: 1fr 1fr; }
+  .result-left { display: flex; flex-direction: column; gap: 16px; }
+  .card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 20px;
+  }
+  .card-label {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 11px; text-transform: uppercase;
+    letter-spacing: 1.5px; color: var(--accent); margin-bottom: 10px;
+  }
+  .answer-text { font-size: 15px; line-height: 1.65; }
+  .source-link {
+    display: inline-flex; align-items: center; gap: 6px;
+    color: var(--accent2); text-decoration: none;
+    font-size: 14px; line-height: 1.5; word-break: break-word;
+  }
+  .source-link:hover { color: #c4b5fd; }
+  .image-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 16px;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    min-height: 280px; gap: 8px;
+  }
+  .image-card img { max-width: 100%; max-height: 360px; border-radius: 8px; object-fit: contain; }
+  .image-caption {
+    font-size: 11px; color: var(--text-dim);
+    font-family: 'IBM Plex Mono', monospace;
+    text-align: center; margin-top: 4px;
+  }
+  .image-placeholder { color: var(--text-dim); font-size: 13px; text-align: center; }
+  .status-bar { margin-top: 16px; display: none; }
+  .status-bar.visible { display: block; }
+  .steps {
+    display: flex; gap: 6px; align-items: center;
+    padding: 14px 18px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    font-family: 'IBM Plex Mono', monospace; font-size: 13px;
+  }
+  .step-dot {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: var(--border); transition: background 0.3s;
+  }
+  .step-dot.active {
+    background: var(--warn);
+    box-shadow: 0 0 8px rgba(251,191,36,0.4);
+    animation: pulse 1s ease-in-out infinite;
+  }
+  .step-dot.done {
+    background: var(--success);
+    box-shadow: 0 0 6px rgba(52,211,153,0.3);
+    animation: none;
+  }
+  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
+  .step-label { color: var(--text-dim); margin-left: 4px; flex: 1; }
+  .step-label.highlight { color: var(--text); }
+  @media (max-width:700px) {
+    .results.visible { grid-template-columns: 1fr; }
+    .input-area { flex-direction: column; }
+    .ask-btn { width: 100%; }
+    .header h1 { font-size: 22px; }
+  }
+  .shimmer {
+    background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 50%, var(--surface2) 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+    border-radius: 6px; height: 16px; margin-bottom: 8px;
+  }
+  .shimmer:last-child { width: 60%; }
+  @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
+</style>
+</head>
+<body>
+<div class="container">
+  <div class="header">
+    <h1>&#x1f9e0; <span>CS Trivia</span> Agent</h1>
+    <p>Agentic AI &#8212; Gemini Flash &middot; DuckDuckGo Search &amp; Images &middot; Zero paid APIs</p>
+  </div>
+  <div class="input-area">
+    <input type="text" id="questionInput" placeholder="Ask any computer science trivia question..." />
+    <button class="ask-btn" id="askBtn" onclick="askAgent()">Ask Agent</button>
+  </div>
+  <div class="preset-row">
+    <select id="presetSelect">
+      <option value="">&#x1f4cb; Pick a question by number (1-100)...</option>
+    </select>
+  </div>
+  <div class="status-bar" id="statusBar">
+    <div class="steps">
+      <div class="step-dot" id="dot1"></div><span>Search</span>
+      <div class="step-dot" id="dot2"></div><span>Answer</span>
+      <div class="step-dot" id="dot3"></div><span>Image</span>
+      <span style="flex:1"></span>
+      <span class="step-label" id="stepLabel">Starting...</span>
+    </div>
+  </div>
+  <div class="results" id="results">
+    <div class="result-left">
+      <div class="card" id="answerCard">
+        <div class="card-label">&#x1f4a1; Answer</div>
+        <div class="answer-text" id="answerText"></div>
+      </div>
+      <div class="card" id="sourceCard">
+        <div class="card-label">&#x1f4f0; Source</div>
+        <div id="sourceContent"></div>
+      </div>
+    </div>
+    <div class="image-card" id="imageCard">
+      <div class="image-placeholder">Image will appear here</div>
+    </div>
+  </div>
+</div>
+<script>
+const input=document.getElementById('questionInput');
+const btn=document.getElementById('askBtn');
+const presetSelect=document.getElementById('presetSelect');
+const statusBar=document.getElementById('statusBar');
+const results=document.getElementById('results');
+
+fetch('/api/questions').then(r=>r.json()).then(qs=>{
+  qs.forEach(q=>{
+    const o=document.createElement('option');o.value=q.text;
+    o.textContent='#'+q.num+' — '+q.text;
+    presetSelect.appendChild(o);
+  });
+});
+presetSelect.addEventListener('change',()=>{if(presetSelect.value)input.value=presetSelect.value;});
+input.addEventListener('keydown',e=>{if(e.key==='Enter')askAgent();});
+
+function setDot(n,s){document.getElementById('dot'+n).className='step-dot'+(s?' '+s:'');}
+function escapeHtml(s){const d=document.createElement('div');d.textContent=s;return d.innerHTML;}
+
+function askAgent(){
+  const question=input.value.trim();
+  if(!question)return;
+  btn.disabled=true;btn.textContent='Working...';
+  statusBar.classList.add('visible');
+  results.classList.remove('visible');
+  setDot(1,'');setDot(2,'');setDot(3,'');
+  document.getElementById('stepLabel').textContent='Starting...';
+  document.getElementById('stepLabel').className='step-label highlight';
+  document.getElementById('answerText').innerHTML='<div class="shimmer"></div><div class="shimmer"></div><div class="shimmer"></div>';
+  document.getElementById('sourceContent').innerHTML='';
+  document.getElementById('imageCard').innerHTML='<div class="image-placeholder">Searching for image...</div>';
+
+  const es=new EventSource('/api/ask?q='+encodeURIComponent(question));
+  es.onmessage=function(event){
+    const d=JSON.parse(event.data);
+    switch(d.type){
+      case 'step':
+        if(d.step>=1)setDot(1,d.step===1?'active':'done');
+        if(d.step>=2)setDot(2,d.step===2?'active':'done');
+        if(d.step>=3)setDot(3,d.step===3?'active':'done');
+        document.getElementById('stepLabel').textContent=d.message;
+        break;
+      case 'source':
+        results.classList.add('visible');
+        document.getElementById('sourceContent').innerHTML=d.url
+          ?'<a class="source-link" href="'+escapeHtml(d.url)+'" target="_blank" rel="noopener">&#x1f517; '+escapeHtml(d.title||'Source')+'</a>'
+          :'<span style="color:var(--text-dim)">No source found</span>';
+        break;
+      case 'answer':
+        document.getElementById('answerText').textContent=d.text;
+        break;
+      case 'image':
+        var html='';
+        if(d.data){
+          html='<img src="'+d.data+'" alt="Related image" />';
+          if(d.caption) html+='<div class="image-caption">'+escapeHtml(d.caption)+'</div>';
+        } else {
+          html='<div class="image-placeholder">No image available</div>';
+        }
+        document.getElementById('imageCard').innerHTML=html;
+        break;
+      case 'done':
+        setDot(1,'done');setDot(2,'done');setDot(3,'done');
+        document.getElementById('stepLabel').textContent='All steps complete \\u2713';
+        btn.disabled=false;btn.textContent='Ask Agent';
+        es.close();break;
+      case 'error':
+        document.getElementById('answerText').textContent=d.message;
+        btn.disabled=false;btn.textContent='Ask Agent';
+        es.close();break;
+    }
+  };
+  es.onerror=function(){
+    btn.disabled=false;btn.textContent='Ask Agent';
+    document.getElementById('stepLabel').textContent='Connection lost \\u2014 try again';
+    es.close();
+  };
+}
+</script>
+</body>
+</html>"""
+
+
+@app.get("/", response_class=HTMLResponse)
+async def index():
+    return INDEX_HTML

requirements.txt

@@ -0,0 +1,6 @@
+fastapi>=0.110
+uvicorn[standard]>=0.27
+google-genai>=1.0
+duckduckgo-search>=6.0
+Pillow>=10.0
+requests>=2.31