WebashalarForML commited on
Commit
df5861f
·
verified ·
1 Parent(s): 04342e7

Update static/frontend.html

Browse files
Files changed (1) hide show
  1. static/frontend.html +155 -96
static/frontend.html CHANGED
@@ -1,96 +1,155 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>Health Reports Processor</title>
7
- <style>
8
- body {
9
- font-family: Arial, sans-serif;
10
- margin: 2rem;
11
- max-width: 800px;
12
- }
13
- label {
14
- display: block;
15
- margin-top: 1rem;
16
- font-weight: bold;
17
- }
18
- input, textarea, button {
19
- width: 100%;
20
- padding: 0.5rem;
21
- margin-top: 0.25rem;
22
- box-sizing: border-box;
23
- font-size: 1rem;
24
- }
25
- button {
26
- margin-top: 1rem;
27
- cursor: pointer;
28
- }
29
- pre {
30
- background: #f4f4f4;
31
- padding: 1rem;
32
- overflow-x: auto;
33
- white-space: pre-wrap;
34
- word-wrap: break-word;
35
- border: 1px solid #ccc;
36
- margin-top: 1rem;
37
- }
38
- .error {
39
- color: red;
40
- margin-top: 1rem;
41
- }
42
- </style>
43
- </head>
44
- <body>
45
- <h1>Health Reports Processor</h1>
46
- <form id="reportForm">
47
- <label for="patientId">Patient ID:</label>
48
- <input type="text" id="patientId" name="patientId" required />
49
-
50
- <label for="filenames">Filenames (comma-separated):</label>
51
- <input type="text" id="filenames" name="filenames" placeholder="e.g. cbc.pdf, thyroid.pdf" required />
52
-
53
- <button type="submit">Process Reports</button>
54
- </form>
55
-
56
- <div id="result"></div>
57
-
58
- <script>
59
- const form = document.getElementById('reportForm');
60
- const resultDiv = document.getElementById('result');
61
-
62
- form.addEventListener('submit', async (e) => {
63
- e.preventDefault();
64
- resultDiv.innerHTML = '';
65
-
66
- const patientId = form.patientId.value.trim();
67
- const filenamesRaw = form.filenames.value.trim();
68
- if (!patientId || !filenamesRaw) {
69
- resultDiv.innerHTML = '<p class="error">Please enter both Patient ID and filenames.</p>';
70
- return;
71
- }
72
-
73
- const filenames = filenamesRaw.split(',').map(f => f.trim()).filter(f => f.length > 0);
74
-
75
- try {
76
- const response = await fetch('/process_reports', {
77
- method: 'POST',
78
- headers: { 'Content-Type': 'application/json' },
79
- body: JSON.stringify({ patient_id: patientId, filenames: filenames })
80
- });
81
-
82
- if (!response.ok) {
83
- const errorData = await response.json();
84
- resultDiv.innerHTML = `<p class="error">Error: ${errorData.error || response.statusText}</p>`;
85
- return;
86
- }
87
-
88
- const data = await response.json();
89
- resultDiv.innerHTML = `<h2>Processed Result</h2><pre>${JSON.stringify(data, null, 2)}</pre>`;
90
- } catch (err) {
91
- resultDiv.innerHTML = `<p class="error">Request failed: ${err.message}</p>`;
92
- }
93
- });
94
- </script>
95
- </body>
96
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Health Reports Processor</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 2rem;
11
+ max-width: 800px;
12
+ }
13
+ label {
14
+ display: block;
15
+ margin-top: 1rem;
16
+ font-weight: bold;
17
+ }
18
+ input, textarea, button {
19
+ width: 100%;
20
+ padding: 0.5rem;
21
+ margin-top: 0.25rem;
22
+ box-sizing: border-box;
23
+ font-size: 1rem;
24
+ }
25
+ button {
26
+ margin-top: 1rem;
27
+ cursor: pointer;
28
+ }
29
+ pre {
30
+ background: #f4f4f4;
31
+ padding: 1rem;
32
+ overflow-x: auto;
33
+ white-space: pre-wrap;
34
+ word-wrap: break-word;
35
+ border: 1px solid #ccc;
36
+ margin-top: 1rem;
37
+ }
38
+ .error {
39
+ color: red;
40
+ margin-top: 1rem;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body>
45
+ <h1>Health Reports Processor</h1>
46
+
47
+ <!-- Upload form -->
48
+ <form id="uploadForm" enctype="multipart/form-data">
49
+ <label for="uploadPatientId">Patient ID:</label>
50
+ <input type="text" id="uploadPatientId" name="patient_id" required />
51
+
52
+ <label for="files">Upload Reports:</label>
53
+ <input type="file" id="files" name="files" multiple required />
54
+
55
+ <button type="submit">Upload Reports</button>
56
+ </form>
57
+
58
+ <div id="uploadResult"></div>
59
+
60
+ <hr />
61
+
62
+ <!-- Existing process reports form -->
63
+ <form id="reportForm">
64
+ <label for="patientId">Patient ID:</label>
65
+ <input type="text" id="patientId" name="patientId" required />
66
+
67
+ <label for="filenames">Filenames (comma-separated):</label>
68
+ <input type="text" id="filenames" name="filenames" placeholder="e.g. cbc.pdf, thyroid.pdf" required />
69
+
70
+ <button type="submit">Process Reports</button>
71
+ </form>
72
+
73
+ <div id="result"></div>
74
+
75
+ <script>
76
+ // Upload form
77
+ const uploadForm = document.getElementById('uploadForm');
78
+ const uploadResult = document.getElementById('uploadResult');
79
+
80
+ uploadForm.addEventListener('submit', async (e) => {
81
+ e.preventDefault();
82
+ uploadResult.innerHTML = '';
83
+
84
+ const patientId = document.getElementById('uploadPatientId').value.trim();
85
+ const filesInput = document.getElementById('files');
86
+
87
+ if (!patientId || filesInput.files.length === 0) {
88
+ uploadResult.innerHTML = '<p class="error">Please enter a Patient ID and select at least one file.</p>';
89
+ return;
90
+ }
91
+
92
+ const formData = new FormData();
93
+ formData.append('patient_id', patientId);
94
+ for (let f of filesInput.files) {
95
+ formData.append('files', f);
96
+ }
97
+
98
+ try {
99
+ const response = await fetch('/upload_reports', {
100
+ method: 'POST',
101
+ body: formData
102
+ });
103
+
104
+ if (!response.ok) {
105
+ const errData = await response.json();
106
+ uploadResult.innerHTML = `<p class="error">Error: ${errData.error || response.statusText}</p>`;
107
+ return;
108
+ }
109
+
110
+ const data = await response.json();
111
+ uploadResult.innerHTML = `<h2>Upload Result</h2><pre>${JSON.stringify(data, null, 2)}</pre>`;
112
+ } catch (err) {
113
+ uploadResult.innerHTML = `<p class="error">Upload failed: ${err.message}</p>`;
114
+ }
115
+ });
116
+
117
+ // Process form
118
+ const form = document.getElementById('reportForm');
119
+ const resultDiv = document.getElementById('result');
120
+
121
+ form.addEventListener('submit', async (e) => {
122
+ e.preventDefault();
123
+ resultDiv.innerHTML = '';
124
+
125
+ const patientId = form.patientId.value.trim();
126
+ const filenamesRaw = form.filenames.value.trim();
127
+ if (!patientId || !filenamesRaw) {
128
+ resultDiv.innerHTML = '<p class="error">Please enter both Patient ID and filenames.</p>';
129
+ return;
130
+ }
131
+
132
+ const filenames = filenamesRaw.split(',').map(f => f.trim()).filter(f => f.length > 0);
133
+
134
+ try {
135
+ const response = await fetch('/process_reports', {
136
+ method: 'POST',
137
+ headers: { 'Content-Type': 'application/json' },
138
+ body: JSON.stringify({ patient_id: patientId, filenames: filenames })
139
+ });
140
+
141
+ if (!response.ok) {
142
+ const errorData = await response.json();
143
+ resultDiv.innerHTML = `<p class="error">Error: ${errorData.error || response.statusText}</p>`;
144
+ return;
145
+ }
146
+
147
+ const data = await response.json();
148
+ resultDiv.innerHTML = `<h2>Processed Result</h2><pre>${JSON.stringify(data, null, 2)}</pre>`;
149
+ } catch (err) {
150
+ resultDiv.innerHTML = `<p class="error">Request failed: ${err.message}</p>`;
151
+ }
152
+ });
153
+ </script>
154
+ </body>
155
+ </html>