scratch_chat_assisstance_2

Running

App Files Files Community

WebashalarForML commited on Aug 23

Commit

9808fe5

verified ·

1 Parent(s): 4fd5a44

Update static/frontend.html

Browse files

Files changed (1) hide show

static/frontend.html +127 -129

static/frontend.html CHANGED Viewed

@@ -2,154 +2,152 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Health Reports Processor</title>
   <style>
-    body {
-      font-family: Arial, sans-serif;
-      margin: 2rem;
-      max-width: 800px;
-    }
-    label {
-      display: block;
-      margin-top: 1rem;
-      font-weight: bold;
-    }
-    input, textarea, button {
-      width: 100%;
-      padding: 0.5rem;
-      margin-top: 0.25rem;
-      box-sizing: border-box;
-      font-size: 1rem;
-    }
-    button {
-      margin-top: 1rem;
-      cursor: pointer;
-    }
-    pre {
-      background: #f4f4f4;
-      padding: 1rem;
-      overflow-x: auto;
-      white-space: pre-wrap;
-      word-wrap: break-word;
-      border: 1px solid #ccc;
-      margin-top: 1rem;
-    }
-    .error {
-      color: red;
-      margin-top: 1rem;
-    }
   </style>
 </head>
 <body>
-  <h1>Health Reports Processor</h1>
-  <!-- Upload form -->
-  <form id="uploadForm" enctype="multipart/form-data">
-    <label for="uploadPatientId">Patient ID:</label>
-    <input type="text" id="uploadPatientId" name="patient_id" required />
-    <label for="files">Upload Reports:</label>
-    <input type="file" id="files" name="files" multiple required />
-    <button type="submit">Upload Reports</button>
-  </form>
-  <div id="uploadResult"></div>
-  <hr />
-  <!-- Existing process reports form -->
-  <form id="reportForm">
-    <label for="patientId">Patient ID:</label>
-    <input type="text" id="patientId" name="patientId" required />
-    <label for="filenames">Filenames (comma-separated):</label>
-    <input type="text" id="filenames" name="filenames" placeholder="e.g. cbc.pdf, thyroid.pdf" required />
-    <button type="submit">Process Reports</button>
-  </form>
-  <div id="result"></div>
   <script>
-    // Upload form
-    const uploadForm = document.getElementById('uploadForm');
-    const uploadResult = document.getElementById('uploadResult');
-    uploadForm.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      uploadResult.innerHTML = '';
-      const patientId = document.getElementById('uploadPatientId').value.trim();
-      const filesInput = document.getElementById('files');
-      if (!patientId || filesInput.files.length === 0) {
-        uploadResult.innerHTML = '<p class="error">Please enter a Patient ID and select at least one file.</p>';
-        return;
-      }
-      const formData = new FormData();
-      formData.append('patient_id', patientId);
-      for (let f of filesInput.files) {
-        formData.append('files', f);
-      }
-      try {
-        const response = await fetch('/upload_reports', {
-          method: 'POST',
-          body: formData
-        });
-        if (!response.ok) {
-          const errData = await response.json();
-          uploadResult.innerHTML = `<p class="error">Error: ${errData.error || response.statusText}</p>`;
-          return;
-        }
-        const data = await response.json();
-        uploadResult.innerHTML = `<h2>Upload Result</h2><pre>${JSON.stringify(data, null, 2)}</pre>`;
-      } catch (err) {
-        uploadResult.innerHTML = `<p class="error">Upload failed: ${err.message}</p>`;
-      }
     });
-    // Process form
-    const form = document.getElementById('reportForm');
-    const resultDiv = document.getElementById('result');
-    form.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      resultDiv.innerHTML = '';
-      const patientId = form.patientId.value.trim();
-      const filenamesRaw = form.filenames.value.trim();
-      if (!patientId || !filenamesRaw) {
-        resultDiv.innerHTML = '<p class="error">Please enter both Patient ID and filenames.</p>';
-        return;
       }
-      const filenames = filenamesRaw.split(',').map(f => f.trim()).filter(f => f.length > 0);
       try {
-        const response = await fetch('/process_reports', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ patient_id: patientId, filenames: filenames })
         });
-        if (!response.ok) {
-          const errorData = await response.json();
-          resultDiv.innerHTML = `<p class="error">Error: ${errorData.error || response.statusText}</p>`;
-          return;
-        }
-        const data = await response.json();
-        resultDiv.innerHTML = `<h2>Processed Result</h2><pre>${JSON.stringify(data, null, 2)}</pre>`;
       } catch (err) {
-        resultDiv.innerHTML = `<p class="error">Request failed: ${err.message}</p>`;
       }
-    });
   </script>
 </body>
 </html>

 <html lang="en">
 <head>
   <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Patient Assistant Chat</title>
   <style>
+    /* your existing styles here */
+    :root { --bg:#0f172a; --panel:#111827; --soft:#1f2937; --text:#e5e7eb; --muted:#9ca3af; --accent:#22c55e; }
+    * { box-sizing: border-box; }
+    body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); }
+    .app { max-width: 900px; margin: 0 auto; padding: 20px; }
+    .card { background: var(--panel); border: 1px solid #242b3a; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
+    .header { padding: 16px 20px; border-bottom: 1px solid #242b3a; display: flex; align-items: center; gap: 12px; }
+    .badge { background: #0b3b26; color: #8bf2c0; padding: 6px 10px; border-radius: 999px; font-weight: 600; font-size: 12px; letter-spacing: .3px; }
+    .row { display:flex; gap:12px; align-items:center; flex-wrap: wrap; }
+    label { font-size: 13px; color: var(--muted); }
+    input[type="text"] { background: var(--soft); color: var(--text); border: 1px solid #2b3346; padding: 10px 12px; border-radius: 10px; min-width: 200px; outline: none; }
+    input[type="text"]:focus { border-color: #374462; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
+    button { background: var(--accent); color: #052e19; border: none; padding: 10px 14px; border-radius: 10px; font-weight: 700; cursor: pointer; }
+    button.secondary { background: #334155; color: #dbeafe; }
+    button:disabled { opacity: .6; cursor: not-allowed; }
+    .chat { height: 420px; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: #0b1220; }
+    .msg { max-width: 80%; padding: 10px 12px; border-radius: 12px; border: 1px solid #1f2937; white-space: pre-wrap; word-break: break-word; }
+    .user   { align-self: flex-end; background: #0b3b26; border-color: #14532d; }
+    .assist { align-self: flex-start; background: #111827; border-color: #1f2937; }
+    .composer { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px; border-top: 1px solid #242b3a; background: #0b1220; }
+    .composer input { width: 100%; }
+    .state { padding: 12px 16px; border-top: 1px dashed #243044; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; color: #cbd5e1; background: #0b1220; }
+    details > summary { cursor: pointer; }
+    .small { font-size: 12px; color: var(--muted); }
   </style>
 </head>
 <body>
+  <div class="app">
+    <div class="card">
+      <div class="header">
+        <span class="badge">Patient Assistant</span>
+        <div class="row" style="gap:8px;">
+          <label for="pid">Patient ID</label>
+          <input id="pid" type="text" placeholder="e.g. 1234" />
+          <button id="savePid">Save</button>
+          <span id="status" class="small">Disconnected</span>
+        </div>
+      </div>
+      <div id="chat" class="chat"></div>
+      <div class="composer">
+        <input id="message" type="text" placeholder="Type your message…" />
+        <button id="send">Send</button>
+      </div>
+      <div class="state">
+        <details>
+          <summary>Agent State (from backend)</summary>
+          <pre id="stateView">{}</pre>
+        </details>
+      </div>
+    </div>
+    <p class="small" style="margin-top:10px; opacity:.8">
+      Configure your Node API URL in the script below (defaults to <code>/chat</code> on the same origin).
+    </p>
+  </div>
   <script>
+    const NODE_CHAT_ENDPOINT = "/chat";
+    const chatEl = document.getElementById("chat");
+    const pidEl = document.getElementById("pid");
+    const savePidBtn = document.getElementById("savePid");
+    const msgEl = document.getElementById("message");
+    const sendBtn = document.getElementById("send");
+    const statusEl = document.getElementById("status");
+    const stateView = document.getElementById("stateView");
+    let chatHistory = [];
+    let patientState = {};
+    // Load saved patient id from localStorage
+    pidEl.value = localStorage.getItem("patient_id") || "";
+    updateStatus();
+    savePidBtn.addEventListener("click", () => {
+      localStorage.setItem("patient_id", pidEl.value.trim());
+      updateStatus();
+      msgEl.focus();
     });
+    sendBtn.addEventListener("click", onSend);
+    msgEl.addEventListener("keydown", (e) => { if (e.key === "Enter") onSend(); });
+    function updateStatus() {
+      const pid = (pidEl.value || "").trim();
+      statusEl.textContent = pid ? `Patient ${pid}` : "No patient selected";
+    }
+    function renderChat() {
+      chatEl.innerHTML = "";
+      for (const m of chatHistory) {
+        const div = document.createElement("div");
+        div.className = `msg ${m.role === "user" ? "user" : "assist"}`;
+        div.textContent = `${m.role === "user" ? "You" : "Assistant"}: ${m.content}`;
+        chatEl.appendChild(div);
       }
+      chatEl.scrollTop = chatEl.scrollHeight;
+    }
+    async function onSend() {
+      const patient_id = (pidEl.value || "").trim();
+      const message = (msgEl.value || "").trim();
+      if (!patient_id) { alert("Please enter Patient ID"); return; }
+      if (!message) return;
+      chatHistory.push({ role: "user", content: message });
+      renderChat();
+      msgEl.value = "";
+      sendBtn.disabled = true;
       try {
+        const res = await fetch(NODE_CHAT_ENDPOINT, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ patient_id, chat_history: chatHistory, patient_state: patientState })
         });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const data = await res.json();
+        const reply = data.assistant_reply || "(no reply)";
+        patientState = data.updated_state || patientState;
+        chatHistory.push({ role: "assistant", content: reply });
+        renderChat();
+        stateView.textContent = JSON.stringify(patientState, null, 2);
       } catch (err) {
+        chatHistory.push({ role: "assistant", content: `Error: ${err.message}` });
+        renderChat();
+      } finally {
+        sendBtn.disabled = false;
       }
+    }
+    // Initial greeting
+    chatHistory.push({ role: "assistant", content: "Hello! I am your patient assistant. Set your Patient ID and ask your question." });
+    renderChat();
   </script>
 </body>
 </html>