Prajith04 commited on
Commit
f10b985
·
verified ·
1 Parent(s): 1f5e777

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +285 -174
templates/index.html CHANGED
@@ -161,6 +161,64 @@
161
  align-items: stretch;
162
  }
163
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
164
  </style>
165
  </head>
166
  <body>
@@ -192,198 +250,251 @@
192
  </div>
193
  </div>
194
 
195
- <!-- Keep your JavaScript at the bottom (same as before, or I can refactor it too if you want) -->
 
 
 
 
 
 
 
 
 
 
 
196
  <script>
197
- // Store selected symptoms
198
- let selectedSymptoms = [];
199
-
200
- // DOM elements
201
- const searchInput = document.getElementById('symptom-search');
202
- const searchButton = document.getElementById('search-button');
203
- const selectedSymptomsDiv = document.getElementById('selected-symptoms');
204
- const diseasesList = document.getElementById('diseases-list');
205
- const similarList = document.getElementById('similar-list');
206
- const relatedList = document.getElementById('related-list');
207
- const errorElement = document.getElementById('error-notification');
208
-
209
- // Function to show error message
210
- function showError(message) {
211
- errorElement.textContent = message;
212
- errorElement.style.display = 'block';
213
- setTimeout(() => {
214
- errorElement.style.display = 'none';
215
- }, 5000);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
216
  }
217
 
218
- // New function to handle both initial search and updates after selections
219
- async function performSearch(inputSymptom) {
220
- // Clear any previous errors
221
- errorElement.style.display = 'none';
222
-
223
- try {
224
- // Create base URL with inputSymptom if provided, otherwise use first selected symptom
225
- let symptomParam = inputSymptom;
226
- if (!symptomParam && selectedSymptoms.length > 0) {
227
- symptomParam = selectedSymptoms[0];
228
- }
229
-
230
- if (!symptomParam) return; // Exit if no symptom to search
231
-
232
- let url = `${window.location.origin}/search?symptom=${encodeURIComponent(symptomParam)}`;
233
-
234
- // Add remaining selected symptoms to query
235
- if (selectedSymptoms.length > 0) {
236
- selectedSymptoms.forEach((s, index) => {
237
- // Skip the first one if it's the same as symptomParam
238
- if (index === 0 && s === symptomParam) return;
239
- url += `&selected=${encodeURIComponent(s)}`;
240
- });
241
- }
242
-
243
- const response = await fetch(url);
244
-
245
- if (!response.ok) {
246
- throw new Error(`HTTP error! status: ${response.status}`);
247
- }
248
-
249
- const data = await response.json();
250
-
251
- displayResults(data);
252
-
253
- // Clear search input only if this was initiated from the search box
254
- if (inputSymptom) {
255
- searchInput.value = '';
256
- }
257
- } catch (error) {
258
- showError(`Error searching for symptom: ${error.message}. Please try again.`);
259
- console.error('Error fetching data:', error);
260
- }
261
- }
262
 
263
- // Update search function to use the new performSearch function
264
- async function searchSymptoms() {
265
- const symptom = searchInput.value.trim();
266
- if (!symptom) return;
267
- performSearch(symptom);
268
- }
269
 
270
- // Display results
271
- function displayResults(data) {
272
- // Update diseases list
273
- diseasesList.innerHTML = '';
274
- if (!data.matching_diseases || data.matching_diseases.length === 0) {
275
- diseasesList.innerHTML = '<li>No matching diseases found</li>';
276
- } else {
277
- data.matching_diseases.forEach(disease => {
278
- diseasesList.innerHTML += `<li>${escapeHTML(disease)}</li>`;
279
- });
280
- }
281
-
282
- // Update similar symptoms
283
- similarList.innerHTML = '';
284
- if (data.semantic_matches && data.semantic_matches.length > 0) {
285
- data.semantic_matches.forEach(symptom => {
286
- if (!selectedSymptoms.includes(symptom)) {
287
- similarList.innerHTML += `<li class="clickable" onclick="addSymptom('${escapeJS(symptom)}')">${escapeHTML(symptom)}</li>`;
288
- }
289
- });
290
- } else {
291
- similarList.innerHTML = '<li>No similar symptoms found</li>';
292
- }
293
-
294
- // Update related symptoms - sort them alphabetically
295
- relatedList.innerHTML = '';
296
- if (!data.related_symptoms || data.related_symptoms.length === 0) {
297
- relatedList.innerHTML = '<li>No related symptoms found</li>';
298
- } else {
299
- // Sort the related symptoms alphabetically
300
- const sortedSymptoms = [...data.related_symptoms].sort((a, b) => a.localeCompare(b));
301
-
302
- sortedSymptoms.forEach(symptom => {
303
- if (!selectedSymptoms.includes(symptom)) {
304
- relatedList.innerHTML += `<li class="clickable" onclick="addSymptom('${escapeJS(symptom)}')">${escapeHTML(symptom)}</li>`;
305
- }
306
- });
307
- }
308
-
309
- // Update selected symptoms
310
- updateSelectedSymptoms();
311
  }
312
 
313
- // Helper function to escape HTML
314
- function escapeHTML(str) {
315
- return str
316
- .replace(/&/g, '&amp;')
317
- .replace(/</g, '&lt;')
318
- .replace(/>/g, '&gt;')
319
- .replace(/"/g, '&quot;')
320
- .replace(/'/g, '&#39;');
321
- }
322
 
323
- // Helper function to escape strings for JavaScript
324
- function escapeJS(str) {
325
- return str
326
- .replace(/\\/g, '\\\\')
327
- .replace(/'/g, "\\'")
328
- .replace(/"/g, '\\"')
329
- .replace(/\n/g, '\\n')
330
- .replace(/\r/g, '\\r')
331
- .replace(/\t/g, '\\t');
332
  }
333
 
334
- // Add a symptom to the selected list
335
- function addSymptom(symptom) {
336
- if (!selectedSymptoms.includes(symptom)) {
337
- selectedSymptoms.push(symptom);
338
- updateSelectedSymptoms();
339
-
340
- // Instead of calling searchSymptoms which expects input from search box,
341
- // directly make a request with the current selected symptoms
342
- performSearch(null);
343
- }
344
- }
345
 
346
- // Remove a symptom from the selected list
347
- function removeSymptom(symptom) {
348
- selectedSymptoms = selectedSymptoms.filter(s => s !== symptom);
349
- updateSelectedSymptoms();
350
- if (selectedSymptoms.length > 0) {
351
- performSearch(null);
352
- } else {
353
- // Clear results if no symptoms are selected
354
- diseasesList.innerHTML = '<li>Enter a symptom to get started</li>';
355
- similarList.innerHTML = '';
356
- relatedList.innerHTML = '';
357
- }
358
- }
359
 
360
- // Update the selected symptoms display
361
- function updateSelectedSymptoms() {
362
- selectedSymptomsDiv.innerHTML = '';
363
- selectedSymptoms.forEach(symptom => {
364
- const tag = document.createElement('div');
365
- tag.className = 'symptom-tag';
366
- tag.innerHTML = `
367
- ${escapeHTML(symptom)}
368
- <span class="remove-symptom" onclick="removeSymptom('${escapeJS(symptom)}')">×</span>
369
- `;
370
- selectedSymptomsDiv.appendChild(tag);
371
- });
372
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
373
 
374
- // Event listeners
375
- searchButton.addEventListener('click', searchSymptoms);
376
- searchInput.addEventListener('keypress', function(e) {
377
- if (e.key === 'Enter') {
378
- searchSymptoms();
379
- }
380
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
381
 
382
- // Initialize
 
 
 
 
 
 
 
 
 
 
 
 
 
383
  diseasesList.innerHTML = '<li>Enter a symptom to get started</li>';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
384
 
385
- // Paste your exact same JS from earlier here — no changes needed.
386
- // Let me know if you'd like animation when adding/removing tags.
387
  </script>
388
  </body>
389
  </html>
 
161
  align-items: stretch;
162
  }
163
  }
164
+
165
+ /* Modal styles */
166
+ .modal {
167
+ display: none;
168
+ position: fixed;
169
+ z-index: 1;
170
+ left: 0;
171
+ top: 0;
172
+ width: 100%;
173
+ height: 100%;
174
+ overflow: auto;
175
+ background-color: rgba(0,0,0,0.4);
176
+ }
177
+
178
+ .modal-content {
179
+ background-color: #fefefe;
180
+ margin: 15% auto;
181
+ padding: 20px;
182
+ border: 1px solid #888;
183
+ width: 70%;
184
+ border-radius: 8px;
185
+ max-height: 70vh;
186
+ overflow-y: auto;
187
+ }
188
+
189
+ .close {
190
+ color: #aaa;
191
+ float: right;
192
+ font-size: 28px;
193
+ font-weight: bold;
194
+ cursor: pointer;
195
+ }
196
+
197
+ .close:hover,
198
+ .close:focus {
199
+ color: black;
200
+ text-decoration: none;
201
+ }
202
+
203
+ .disease-info-title {
204
+ margin-top: 0;
205
+ color: #4285f4;
206
+ }
207
+
208
+ .loading {
209
+ text-align: center;
210
+ padding: 20px;
211
+ }
212
+
213
+ .disease-clickable {
214
+ cursor: pointer;
215
+ color: #333;
216
+ font-weight: bold;
217
+ }
218
+
219
+ .disease-clickable:hover {
220
+ color: #4285f4;
221
+ }
222
  </style>
223
  </head>
224
  <body>
 
250
  </div>
251
  </div>
252
 
253
+ <!-- Disease Info Modal -->
254
+ <div id="diseaseModal" class="modal">
255
+ <div class="modal-content">
256
+ <span class="close">&times;</span>
257
+ <h3 id="disease-info-title" class="disease-info-title">Disease Information</h3>
258
+ <div id="disease-info-content">
259
+ <div id="loading" class="loading">Loading information...</div>
260
+ <div id="disease-details"></div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
  <script>
266
+ // Store selected symptoms
267
+ let selectedSymptoms = [];
268
+
269
+ // DOM elements
270
+ const searchInput = document.getElementById('symptom-search');
271
+ const searchButton = document.getElementById('search-button');
272
+ const selectedSymptomsDiv = document.getElementById('selected-symptoms');
273
+ const diseasesList = document.getElementById('diseases-list');
274
+ const similarList = document.getElementById('similar-list');
275
+ const relatedList = document.getElementById('related-list');
276
+ const errorElement = document.getElementById('error-notification');
277
+ const modal = document.getElementById('diseaseModal');
278
+ const closeModal = document.getElementsByClassName('close')[0];
279
+ const diseaseTitle = document.getElementById('disease-info-title');
280
+ const diseaseDetails = document.getElementById('disease-details');
281
+ const loadingElement = document.getElementById('loading');
282
+
283
+ // Function to show error message
284
+ function showError(message) {
285
+ errorElement.textContent = message;
286
+ errorElement.style.display = 'block';
287
+ setTimeout(() => {
288
+ errorElement.style.display = 'none';
289
+ }, 5000);
290
+ }
291
+
292
+ // New function to handle both initial search and updates after selections
293
+ async function performSearch(inputSymptom) {
294
+ // Clear any previous errors
295
+ errorElement.style.display = 'none';
296
+
297
+ try {
298
+ // Create base URL with inputSymptom if provided, otherwise use first selected symptom
299
+ let symptomParam = inputSymptom;
300
+ if (!symptomParam && selectedSymptoms.length > 0) {
301
+ symptomParam = selectedSymptoms[0];
302
  }
303
 
304
+ if (!symptomParam) return; // Exit if no symptom to search
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
305
 
306
+ let url = `${window.location.origin}/search?symptom=${encodeURIComponent(symptomParam)}`;
 
 
 
 
 
307
 
308
+ // Add remaining selected symptoms to query
309
+ if (selectedSymptoms.length > 0) {
310
+ selectedSymptoms.forEach((s, index) => {
311
+ // Skip the first one if it's the same as symptomParam
312
+ if (index === 0 && s === symptomParam) return;
313
+ url += `&selected=${encodeURIComponent(s)}`;
314
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
315
  }
316
 
317
+ const response = await fetch(url);
 
 
 
 
 
 
 
 
318
 
319
+ if (!response.ok) {
320
+ throw new Error(`HTTP error! status: ${response.status}`);
 
 
 
 
 
 
 
321
  }
322
 
323
+ const data = await response.json();
 
 
 
 
 
 
 
 
 
 
324
 
325
+ displayResults(data);
 
 
 
 
 
 
 
 
 
 
 
 
326
 
327
+ // Clear search input only if this was initiated from the search box
328
+ if (inputSymptom) {
329
+ searchInput.value = '';
 
 
 
 
 
 
 
 
 
330
  }
331
+ } catch (error) {
332
+ showError(`Error searching for symptom: ${error.message}. Please try again.`);
333
+ console.error('Error fetching data:', error);
334
+ }
335
+ }
336
+
337
+ // Update search function to use the new performSearch function
338
+ async function searchSymptoms() {
339
+ const symptom = searchInput.value.trim();
340
+ if (!symptom) return;
341
+ performSearch(symptom);
342
+ }
343
+
344
+ // Display results
345
+ function displayResults(data) {
346
+ // Update diseases list
347
+ diseasesList.innerHTML = '';
348
+ if (!data.matching_diseases || data.matching_diseases.length === 0) {
349
+ diseasesList.innerHTML = '<li>No matching diseases found</li>';
350
+ } else {
351
+ data.matching_diseases.forEach(disease => {
352
+ diseasesList.innerHTML += `<li class="disease-clickable" onclick="showDiseaseInfo('${escapeJS(disease)}')">${escapeHTML(disease)}</li>`;
353
+ });
354
+ }
355
+
356
+ // Update similar symptoms
357
+ similarList.innerHTML = '';
358
+ if (data.semantic_matches && data.semantic_matches.length > 0) {
359
+ data.semantic_matches.forEach(symptom => {
360
+ if (!selectedSymptoms.includes(symptom)) {
361
+ similarList.innerHTML += `<li class="clickable" onclick="addSymptom('${escapeJS(symptom)}')">${escapeHTML(symptom)}</li>`;
362
+ }
363
+ });
364
+ } else {
365
+ similarList.innerHTML = '<li>No similar symptoms found</li>';
366
+ }
367
+
368
+ // Update related symptoms - sort them alphabetically
369
+ relatedList.innerHTML = '';
370
+ if (!data.related_symptoms || data.related_symptoms.length === 0) {
371
+ relatedList.innerHTML = '<li>No related symptoms found</li>';
372
+ } else {
373
+ // Sort the related symptoms alphabetically
374
+ const sortedSymptoms = [...data.related_symptoms].sort((a, b) => a.localeCompare(b));
375
 
376
+ sortedSymptoms.forEach(symptom => {
377
+ if (!selectedSymptoms.includes(symptom)) {
378
+ relatedList.innerHTML += `<li class="clickable" onclick="addSymptom('${escapeJS(symptom)}')">${escapeHTML(symptom)}</li>`;
379
+ }
 
 
380
  });
381
+ }
382
+
383
+ // Update selected symptoms
384
+ updateSelectedSymptoms();
385
+ }
386
+
387
+ // Helper function to escape HTML
388
+ function escapeHTML(str) {
389
+ return str
390
+ .replace(/&/g, '&amp;')
391
+ .replace(/</g, '&lt;')
392
+ .replace(/>/g, '&gt;')
393
+ .replace(/"/g, '&quot;')
394
+ .replace(/'/g, '&#39;');
395
+ }
396
+
397
+ // Helper function to escape strings for JavaScript
398
+ function escapeJS(str) {
399
+ return str
400
+ .replace(/\\/g, '\\\\')
401
+ .replace(/'/g, "\\'")
402
+ .replace(/"/g, '\\"')
403
+ .replace(/\n/g, '\\n')
404
+ .replace(/\r/g, '\\r')
405
+ .replace(/\t/g, '\\t');
406
+ }
407
+
408
+ // Add a symptom to the selected list
409
+ function addSymptom(symptom) {
410
+ if (!selectedSymptoms.includes(symptom)) {
411
+ selectedSymptoms.push(symptom);
412
+ updateSelectedSymptoms();
413
 
414
+ // Instead of calling searchSymptoms which expects input from search box,
415
+ // directly make a request with the current selected symptoms
416
+ performSearch(null);
417
+ }
418
+ }
419
+
420
+ // Remove a symptom from the selected list
421
+ function removeSymptom(symptom) {
422
+ selectedSymptoms = selectedSymptoms.filter(s => s !== symptom);
423
+ updateSelectedSymptoms();
424
+ if (selectedSymptoms.length > 0) {
425
+ performSearch(null);
426
+ } else {
427
+ // Clear results if no symptoms are selected
428
  diseasesList.innerHTML = '<li>Enter a symptom to get started</li>';
429
+ similarList.innerHTML = '';
430
+ relatedList.innerHTML = '';
431
+ }
432
+ }
433
+
434
+ // Update the selected symptoms display
435
+ function updateSelectedSymptoms() {
436
+ selectedSymptomsDiv.innerHTML = '';
437
+ selectedSymptoms.forEach(symptom => {
438
+ const tag = document.createElement('div');
439
+ tag.className = 'symptom-tag';
440
+ tag.innerHTML = `
441
+ ${escapeHTML(symptom)}
442
+ <span class="remove-symptom" onclick="removeSymptom('${escapeJS(symptom)}')">×</span>
443
+ `;
444
+ selectedSymptomsDiv.appendChild(tag);
445
+ });
446
+ }
447
+
448
+ // Function to show disease information using Groq API
449
+ async function showDiseaseInfo(disease) {
450
+ // Show modal
451
+ modal.style.display = "block";
452
+ diseaseTitle.textContent = disease;
453
+ diseaseDetails.innerHTML = '';
454
+ loadingElement.style.display = 'block';
455
+
456
+ try {
457
+ // Call to backend API to get disease information
458
+ const response = await fetch(`${window.location.origin}/disease-info?name=${encodeURIComponent(disease)}`);
459
+
460
+ if (!response.ok) {
461
+ throw new Error(`HTTP error! status: ${response.status}`);
462
+ }
463
+
464
+ const data = await response.json();
465
+ loadingElement.style.display = 'none';
466
+
467
+ // Format and display the information
468
+ diseaseDetails.innerHTML = data.info;
469
+ } catch (error) {
470
+ loadingElement.style.display = 'none';
471
+ diseaseDetails.innerHTML = `<p class="error">Error getting information: ${error.message}</p>`;
472
+ console.error('Error fetching disease info:', error);
473
+ }
474
+ }
475
+
476
+ // Close the modal when clicking the X
477
+ closeModal.onclick = function() {
478
+ modal.style.display = "none";
479
+ }
480
+
481
+ // Close the modal when clicking outside of it
482
+ window.onclick = function(event) {
483
+ if (event.target == modal) {
484
+ modal.style.display = "none";
485
+ }
486
+ }
487
+
488
+ // Event listeners
489
+ searchButton.addEventListener('click', searchSymptoms);
490
+ searchInput.addEventListener('keypress', function(e) {
491
+ if (e.key === 'Enter') {
492
+ searchSymptoms();
493
+ }
494
+ });
495
 
496
+ // Initialize
497
+ diseasesList.innerHTML = '<li>Enter a symptom to get started</li>';
498
  </script>
499
  </body>
500
  </html>