Spaces:

WebashalarForML
/

health_dac_assist

Paused

App Files Files Community

WebashalarForML commited on Aug 23

Commit

df5861f

verified ·

1 Parent(s): 04342e7

Update static/frontend.html

Browse files

Files changed (1) hide show

static/frontend.html +155 -96

static/frontend.html CHANGED Viewed

@@ -1,96 +1,155 @@
-<!DOCTYPE html>
-<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>
-  <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>
-    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>

+<!DOCTYPE html>
+<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>