Spaces:

Renangi
/

ragbench-rag-eval

Running

App Files Files Community

Renangi commited on 24 days ago

Commit

2f880a0

1 Parent(s): 5e74947

main dot py file added both evaluation and chat

Browse files

Files changed (1) hide show

app/main.py +267 -83

app/main.py CHANGED Viewed

@@ -221,12 +221,11 @@ def health():
 @app.get("/", response_class=HTMLResponse)
 def chat_ui():
-    html = """
-<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <title>RAGBench Chat</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
     * { box-sizing: border-box; }
@@ -238,42 +237,122 @@ def chat_ui():
       color: #111827;
     }
     .app {
-      max-width: 960px;
       margin: 0 auto;
       height: 100vh;
       display: flex;
       flex-direction: column;
       padding: 0.75rem;
     }
     header {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: 0.75rem;
     }
     header h1 {
-      font-size: 1.1rem;
       margin: 0;
     }
     header small {
       color: #6b7280;
-      font-size: 0.75rem;
     }
-    select {
-      padding: 0.3rem 0.5rem;
       border-radius: 999px;
       border: 1px solid #d1d5db;
-      background: white;
       font-size: 0.85rem;
     }
-    .chat-window {
       flex: 1;
       background: white;
       border-radius: 0.75rem;
-      padding: 0.75rem;
-      overflow-y: auto;
       border: 1px solid #e5e7eb;
     }
     .message-row {
       display: flex;
       margin-bottom: 0.5rem;
@@ -281,24 +360,26 @@ def chat_ui():
     .message-row.user {
       justify-content: flex-end;
     }
     .bubble {
-      max-width: 70%;
-      padding: 0.5rem 0.75rem;
       border-radius: 0.75rem;
-      font-size: 0.9rem;
-      line-height: 1.35;
       white-space: pre-wrap;
-      word-wrap: break-word;
     }
     .bubble.user {
       background: #2563eb;
       color: white;
-      border-bottom-right-radius: 0.15rem;
     }
     .bubble.assistant {
       background: #e5e7eb;
       color: #111827;
-      border-bottom-left-radius: 0.15rem;
     }
     .status {
       margin-top: 0.25rem;
@@ -306,7 +387,7 @@ def chat_ui():
       color: #6b7280;
       min-height: 1.1rem;
     }
-    form {
       margin-top: 0.5rem;
       display: flex;
       gap: 0.5rem;
@@ -330,15 +411,19 @@ def chat_ui():
       font-size: 0.9rem;
       font-weight: 500;
       cursor: pointer;
     }
     button:disabled {
       opacity: 0.6;
       cursor: default;
     }
     @media (max-width: 640px) {
-      .app { padding: 0.5rem; }
-      .chat-window { padding: 0.5rem; }
-      .bubble { max-width: 82%; }
     }
   </style>
 </head>
@@ -350,6 +435,7 @@ def chat_ui():
         <small>Select a domain, then start chatting.</small>
       </div>
       <div>
         <select id="domain">
           <option value="biomedical">Biomedical</option>
           <option value="general_knowledge">General knowledge</option>
@@ -360,68 +446,166 @@ def chat_ui():
       </div>
     </header>
-    <div id="chat" class="chat-window"></div>
-    <div id="status" class="status"></div>
-    <form id="chat-form">
-      <textarea id="question" placeholder="Ask a question..."></textarea>
-      <button type="submit">Send</button>
-    </form>
   </div>
-<script>
-  const form = document.getElementById("chat-form");
-  const questionEl = document.getElementById("question");
-  const domainEl = document.getElementById("domain");
-  const chatEl = document.getElementById("chat");
-  const statusEl = document.getElementById("status");
-  function addMessage(role, text) {
-    const row = document.createElement("div");
-    row.className = "message-row " + role;
-    const bubble = document.createElement("div");
-    bubble.className = "bubble " + role;
-    bubble.textContent = text;
-    row.appendChild(bubble);
-    chatEl.appendChild(row);
-    chatEl.scrollTop = chatEl.scrollHeight;
-  }
-  form.addEventListener("submit", async (e) => {
-    e.preventDefault();
-    const question = questionEl.value.trim();
-    if (!question) return;
-    const domain = domainEl.value;
-    addMessage("user", question);
-    questionEl.value = "";
-    statusEl.textContent = "Thinking...";
-    form.querySelector("button").disabled = true;
-    try {
-      const resp = await fetch("/chat", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ domain, question }),
-      });
-      if (!resp.ok) {
-        throw new Error("HTTP " + resp.status);
-      }
-      const data = await resp.json();
-      addMessage("assistant", data.answer || "[No answer returned]");
-      statusEl.textContent = "";
-    } catch (err) {
-      statusEl.textContent = "Error: " + err;
-    } finally {
-      form.querySelector("button").disabled = false;
     }
-  });
-</script>
 </body>
-</html>
-    """
     return HTMLResponse(content=html)

 @app.get("/", response_class=HTMLResponse)
 def chat_ui():
+    html = """<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
+  <title>RAGBench Chat & Evaluation</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
     * { box-sizing: border-box; }
       color: #111827;
     }
     .app {
+      max-width: 1040px;
       margin: 0 auto;
       height: 100vh;
       display: flex;
       flex-direction: column;
       padding: 0.75rem;
+      gap: 0.75rem;
     }
     header {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      gap: 1rem;
     }
     header h1 {
       margin: 0;
+      font-size: 1.3rem;
     }
     header small {
       color: #6b7280;
     }
+    select, input, button, textarea {
+      font-family: inherit;
+    }
+    select, input {
       border-radius: 999px;
       border: 1px solid #d1d5db;
+      padding: 0.25rem 0.6rem;
       font-size: 0.85rem;
+      background: white;
     }
+    .chat-layout {
+      display: flex;
+      flex-direction: column;
       flex: 1;
+      min-height: 0;
+      gap: 0.75rem;
+    }
+    .eval-card {
       background: white;
       border-radius: 0.75rem;
+      padding: 0.75rem 1rem;
+      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+      border: 1px solid #e5e7eb;
+    }
+    .eval-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      gap: 1rem;
+      margin-bottom: 0.5rem;
+    }
+    .eval-header h2 {
+      margin: 0;
+      font-size: 1rem;
+    }
+    .eval-header p {
+      margin: 0;
+      font-size: 0.8rem;
+      color: #6b7280;
+    }
+    .eval-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+      gap: 0.5rem 0.75rem;
+      align-items: end;
+      margin-bottom: 0.5rem;
+    }
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 0.15rem;
+      font-size: 0.8rem;
+    }
+    .field label {
+      color: #4b5563;
+    }
+    .eval-actions {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      flex-wrap: wrap;
+      font-size: 0.8rem;
+    }
+    .eval-status {
+      color: #6b7280;
+      min-height: 1.1rem;
+    }
+    .eval-output {
+      margin-top: 0.35rem;
+      max-height: 180px;
+      overflow: auto;
+      background: #f9fafb;
+      border-radius: 0.5rem;
+      padding: 0.5rem 0.75rem;
+      font-size: 0.75rem;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
       border: 1px solid #e5e7eb;
     }
+    .chat-card {
+      background: white;
+      border-radius: 0.75rem;
+      padding: 0.75rem 1rem;
+      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+      border: 1px solid #e5e7eb;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+    }
+    .chat-window {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      padding-right: 0.25rem;
+    }
     .message-row {
       display: flex;
       margin-bottom: 0.5rem;
     .message-row.user {
       justify-content: flex-end;
     }
+    .message-row.assistant {
+      justify-content: flex-start;
+    }
     .bubble {
+      max-width: 80%;
+      padding: 0.45rem 0.7rem;
       border-radius: 0.75rem;
+      font-size: 0.85rem;
       white-space: pre-wrap;
+      line-height: 1.35;
     }
     .bubble.user {
       background: #2563eb;
       color: white;
+      border-bottom-right-radius: 0.25rem;
     }
     .bubble.assistant {
       background: #e5e7eb;
       color: #111827;
+      border-bottom-left-radius: 0.25rem;
     }
     .status {
       margin-top: 0.25rem;
       color: #6b7280;
       min-height: 1.1rem;
     }
+    form.chat-form {
       margin-top: 0.5rem;
       display: flex;
       gap: 0.5rem;
       font-size: 0.9rem;
       font-weight: 500;
       cursor: pointer;
+      white-space: nowrap;
     }
     button:disabled {
       opacity: 0.6;
       cursor: default;
     }
     @media (max-width: 640px) {
+      .app {
+        padding: 0.75rem 0.5rem;
+      }
+      .bubble {
+        max-width: 100%;
+      }
     }
   </style>
 </head>
         <small>Select a domain, then start chatting.</small>
       </div>
       <div>
+        <label for="domain" style="font-size:0.8rem;color:#4b5563;margin-right:0.25rem;">Domain</label>
         <select id="domain">
           <option value="biomedical">Biomedical</option>
           <option value="general_knowledge">General knowledge</option>
       </div>
     </header>
+    <div class="chat-layout">
+      <section class="eval-card">
+        <form id="eval-form">
+          <div class="eval-header">
+            <div>
+              <h2>RAGBench RAG Evaluation</h2>
+              <p>Use this interface to run /run_domain evaluations against the RAGBench dataset.</p>
+            </div>
+          </div>
+          <div class="eval-grid">
+            <div class="field">
+              <label for="eval-domain">Domain</label>
+              <select id="eval-domain">
+                <option value="biomedical">Biomedical</option>
+                <option value="general_knowledge">General knowledge</option>
+                <option value="customer_support">Customer support</option>
+                <option value="finance">Finance</option>
+                <option value="legal">Legal</option>
+              </select>
+            </div>
+            <div class="field">
+              <label for="eval-k">Top-k documents</label>
+              <input id="eval-k" type="number" min="1" max="10" value="3" />
+            </div>
+            <div class="field">
+              <label for="eval-max-examples">Max examples</label>
+              <input id="eval-max-examples" type="number" min="1" value="5" />
+            </div>
+            <div class="field">
+              <label for="eval-split">Dataset split</label>
+              <input id="eval-split" type="text" value="validation" />
+            </div>
+          </div>
+          <div class="eval-actions">
+            <button type="submit">Run Domain Evaluation</button>
+            <div id="eval-status" class="eval-status"></div>
+          </div>
+          <pre id="eval-output" class="eval-output"></pre>
+        </form>
+      </section>
+      <section class="chat-card">
+        <div id="chat" class="chat-window"></div>
+        <div id="status" class="status"></div>
+        <form id="chat-form" class="chat-form">
+          <textarea id="question" placeholder="Ask a question..."></textarea>
+          <button type="submit">Send</button>
+        </form>
+      </section>
+    </div>
   </div>
+  <script>
+    const form = document.getElementById("chat-form");
+    const questionEl = document.getElementById("question");
+    const domainEl = document.getElementById("domain");
+    const chatEl = document.getElementById("chat");
+    const statusEl = document.getElementById("status");
+    const evalForm = document.getElementById("eval-form");
+    const evalDomainEl = document.getElementById("eval-domain");
+    const evalKEl = document.getElementById("eval-k");
+    const evalMaxExamplesEl = document.getElementById("eval-max-examples");
+    const evalSplitEl = document.getElementById("eval-split");
+    const evalStatusEl = document.getElementById("eval-status");
+    const evalOutputEl = document.getElementById("eval-output");
+    // Keep evaluation domain and chat domain in sync
+    function syncDomains(from, to) {
+      if (!from || !to) return;
+      to.value = from.value;
+    }
+    syncDomains(domainEl, evalDomainEl);
+    if (domainEl && evalDomainEl) {
+      domainEl.addEventListener("change", () => syncDomains(domainEl, evalDomainEl));
+      evalDomainEl.addEventListener("change", () => syncDomains(evalDomainEl, domainEl));
+    }
+    function addMessage(role, text) {
+      const row = document.createElement("div");
+      row.className = "message-row " + role;
+      const bubble = document.createElement("div");
+      bubble.className = "bubble " + role;
+      bubble.textContent = text;
+      row.appendChild(bubble);
+      chatEl.appendChild(row);
+      chatEl.scrollTop = chatEl.scrollHeight;
     }
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      const question = questionEl.value.trim();
+      if (!question) return;
+      addMessage("user", question);
+      questionEl.value = "";
+      statusEl.textContent = "Thinking...";
+      form.querySelector("button").disabled = true;
+      try {
+        const payload = {
+          question: question,
+          domain: domainEl.value || "biomedical",
+        };
+        const resp = await fetch("/chat", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+        if (!resp.ok) {
+          throw new Error("HTTP " + resp.status);
+        }
+        const data = await resp.json();
+        addMessage("assistant", data.answer || "[No answer returned]");
+        statusEl.textContent = "";
+      } catch (err) {
+        statusEl.textContent = "Error: " + err;
+      } finally {
+        form.querySelector("button").disabled = false;
+      }
+    });
+    evalForm.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      evalStatusEl.textContent = "Running evaluation...";
+      evalOutputEl.textContent = "";
+      const payload = {
+        domain: evalDomainEl.value || "biomedical",
+        k: parseInt(evalKEl.value || "3", 10),
+        max_examples: parseInt(evalMaxExamplesEl.value || "5", 10),
+        split: evalSplitEl.value || "validation",
+      };
+      try {
+        const resp = await fetch("/run_domain", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+        if (!resp.ok) {
+          throw new Error("HTTP " + resp.status);
+        }
+        const data = await resp.json();
+        evalStatusEl.textContent = "Done.";
+        evalOutputEl.textContent = JSON.stringify(data, null, 2);
+      } catch (err) {
+        evalStatusEl.textContent = "Error: " + err;
+      }
+    });
+  </script>
 </body>
+</html>"""
     return HTMLResponse(content=html)