Add Mistral context QA demo

Dockerfile.dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+ENV PORT=7860
+CMD uvicorn main:app --host 0.0.0.0 --port $PORT

main.py

@@ -0,0 +1,86 @@
+import os
+import requests
+from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from pydantic import BaseModel
+
+HF_API_TOKEN = os.getenv("HF_API_TOKEN")
+MODEL_ID = "mistralai/Mistral-7B-Instruct-v0.3"
+API_URL = f"https://api-inference.huggingface.co/models/{MODEL_ID}"
+
+if HF_API_TOKEN is None:
+    raise RuntimeError("HF_API_TOKEN environment variable is not set.")
+
+HEADERS = {"Authorization": f"Bearer {HF_API_TOKEN}"}
+
+app = FastAPI()
+
+# static + templates
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
+
+class ChatRequest(BaseModel):
+    context: str
+    question: str
+
+
+@app.get("/", response_class=HTMLResponse)
+async def home(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+
+@app.post("/chat")
+async def chat_endpoint(payload: ChatRequest):
+    context = payload.context.strip()
+    question = payload.question.strip()
+
+    if not context or not question:
+        return JSONResponse({"answer": "Please provide both context and a question."})
+
+    # Build an instruct-style prompt
+    prompt = f"""[INST] You are a helpful assistant that answers questions ONLY using the given context. 
+If the answer cannot be found in the context, say you don't know and do not hallucinate.
+
+Context:
+{context}
+
+Question:
+{question}
+
+Answer concisely based only on the context.[/INST]"""
+
+    try:
+        resp = requests.post(
+            API_URL,
+            headers=HEADERS,
+            json={
+                "inputs": prompt,
+                "parameters": {
+                    "max_new_tokens": 256,
+                    "temperature": 0.2,
+                },
+            },
+            timeout=60,
+        )
+        resp.raise_for_status()
+        data = resp.json()
+
+        # data is usually a list with {"generated_text": "..."}
+        generated = data[0].get("generated_text", "")
+
+        # In many TGI backends, generated_text contains prompt + completion.
+        # Try to cut off the prompt part if present.
+        if generated.startswith(prompt):
+            answer = generated[len(prompt) :].strip()
+        else:
+            answer = generated.strip()
+
+        return {"answer": answer}
+    except Exception as e:
+        return JSONResponse(
+            {"answer": f"Error calling model: {e}"},
+            status_code=500,
+        )

requirements.txt

@@ -0,0 +1,4 @@
+fastapi
+uvicorn[standard]
+jinja2
+requests

static/app.js

@@ -0,0 +1,68 @@
+let currentContext = "";
+
+const contextText = document.getElementById("contextText");
+const setContextBtn = document.getElementById("setContextBtn");
+const contextStatus = document.getElementById("contextStatus");
+
+const chatBox = document.getElementById("chatBox");
+const questionInput = document.getElementById("questionInput");
+const sendBtn = document.getElementById("sendBtn");
+
+setContextBtn.addEventListener("click", () => {
+  currentContext = contextText.value.trim();
+  if (!currentContext) {
+    contextStatus.textContent = "Context is empty.";
+    contextStatus.className = "status status-warn";
+  } else {
+    contextStatus.textContent = "Context set. You can start asking questions.";
+    contextStatus.className = "status status-ok";
+  }
+});
+
+function appendMessage(text, who) {
+  const div = document.createElement("div");
+  div.className = who === "user" ? "msg user-msg" : "msg bot-msg";
+  div.textContent = text;
+  chatBox.appendChild(div);
+  chatBox.scrollTop = chatBox.scrollHeight;
+}
+
+async function sendQuestion() {
+  const question = questionInput.value.trim();
+  if (!question) return;
+  if (!currentContext) {
+    appendMessage("Please set the context first.", "bot");
+    return;
+  }
+
+  appendMessage(question, "user");
+  questionInput.value = "";
+
+  appendMessage("Thinking...", "bot");
+  const thinkingBubble = chatBox.lastChild;
+
+  try {
+    const res = await fetch("/chat", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        context: currentContext,
+        question: question
+      })
+    });
+
+    const data = await res.json();
+    thinkingBubble.textContent = data.answer || "No answer returned.";
+  } catch (err) {
+    console.error(err);
+    thinkingBubble.textContent = "Error contacting the backend.";
+  }
+}
+
+sendBtn.addEventListener("click", sendQuestion);
+questionInput.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    sendQuestion();
+  }
+});

static/style.css

@@ -0,0 +1,108 @@
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #0b1020;
+  color: #f5f5f5;
+  margin: 0;
+}
+
+.container {
+  max-width: 900px;
+  margin: 40px auto;
+  padding: 24px;
+  background: #141b2f;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 1.9rem;
+}
+
+.subtitle {
+  color: #c0c6e0;
+}
+
+textarea {
+  width: 100%;
+  background: #0d1324;
+  color: #f5f5f5;
+  border: 1px solid #2c3554;
+  border-radius: 8px;
+  padding: 10px;
+  resize: vertical;
+}
+
+button {
+  margin-top: 8px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: none;
+  background: #4c6fff;
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+button:hover {
+  background: #3453e6;
+}
+
+.status {
+  font-size: 0.9rem;
+  margin-top: 4px;
+}
+
+.status-ok {
+  color: #8be48b;
+}
+
+.status-warn {
+  color: #ffce56;
+}
+
+.chat-box {
+  margin-top: 10px;
+  border-radius: 8px;
+  background: #0d1324;
+  border: 1px solid #2c3554;
+  padding: 10px;
+  max-height: 350px;
+  overflow-y: auto;
+}
+
+.msg {
+  margin-bottom: 8px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  font-size: 0.95rem;
+}
+
+.user-msg {
+  background: #3453e6;
+  align-self: flex-end;
+}
+
+.bot-msg {
+  background: #1f2840;
+}
+
+.system-msg {
+  font-size: 0.9rem;
+  color: #a3abcd;
+}
+
+.chat-input-row {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.chat-input-row input {
+  flex: 1;
+  padding: 8px;
+  border-radius: 8px;
+  border: 1px solid #2c3554;
+  background: #0d1324;
+  color: #f5f5f5;
+}

templates/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Mistral Context QA Demo</title>
+    <link rel="stylesheet" href="/static/style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>Mistral Context QA Demo</h1>
+      <p class="subtitle">
+        Paste a paragraph in the context box, then ask questions about it in the chat below.
+      </p>
+
+      <h2>Context</h2>
+      <textarea
+        id="contextText"
+        rows="6"
+        placeholder="Paste any article, paragraph, or documentation here..."
+      ></textarea>
+      <button id="setContextBtn">Set / Update Context</button>
+      <p id="contextStatus" class="status"></p>
+
+      <h2>Chat</h2>
+      <div id="chatBox" class="chat-box">
+        <div class="system-msg">
+          Paste some context above, then ask me a question about it!
+        </div>
+      </div>
+
+      <div class="chat-input-row">
+        <input
+          type="text"
+          id="questionInput"
+          placeholder="Ask a question about the context..."
+        />
+        <button id="sendBtn">Send</button>
+      </div>
+    </div>
+
+    <script src="/static/app.js"></script>
+  </body>
+</html>