Spaces:

Prajith04
/

qwendr

Build error

App Files Files Community

Prajith04 commited on Apr 14, 2025

Commit

f10b985

verified ·

1 Parent(s): 1f5e777

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +285 -174

templates/index.html CHANGED Viewed

@@ -161,6 +161,64 @@
         align-items: stretch;
       }
     }
   </style>
 </head>
 <body>
@@ -192,198 +250,251 @@
     </div>
   </div>
-  <!-- Keep your JavaScript at the bottom (same as before, or I can refactor it too if you want) -->
   <script>
-        // Store selected symptoms
-        let selectedSymptoms = [];
-        // DOM elements
-        const searchInput = document.getElementById('symptom-search');
-        const searchButton = document.getElementById('search-button');
-        const selectedSymptomsDiv = document.getElementById('selected-symptoms');
-        const diseasesList = document.getElementById('diseases-list');
-        const similarList = document.getElementById('similar-list');
-        const relatedList = document.getElementById('related-list');
-        const errorElement = document.getElementById('error-notification');
-        // Function to show error message
-        function showError(message) {
-            errorElement.textContent = message;
-            errorElement.style.display = 'block';
-            setTimeout(() => {
-                errorElement.style.display = 'none';
-            }, 5000);
         }
-        // New function to handle both initial search and updates after selections
-        async function performSearch(inputSymptom) {
-            // Clear any previous errors
-            errorElement.style.display = 'none';
-            try {
-                // Create base URL with inputSymptom if provided, otherwise use first selected symptom
-                let symptomParam = inputSymptom;
-                if (!symptomParam && selectedSymptoms.length > 0) {
-                    symptomParam = selectedSymptoms[0];
-                }
-                if (!symptomParam) return; // Exit if no symptom to search
-                let url = `${window.location.origin}/search?symptom=${encodeURIComponent(symptomParam)}`;
-                // Add remaining selected symptoms to query
-                if (selectedSymptoms.length > 0) {
-                    selectedSymptoms.forEach((s, index) => {
-                        // Skip the first one if it's the same as symptomParam
-                        if (index === 0 && s === symptomParam) return;
-                        url += `&selected=${encodeURIComponent(s)}`;
-                    });
-                }
-                const response = await fetch(url);
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-                const data = await response.json();
-                displayResults(data);
-                // Clear search input only if this was initiated from the search box
-                if (inputSymptom) {
-                    searchInput.value = '';
-                }
-            } catch (error) {
-                showError(`Error searching for symptom: ${error.message}. Please try again.`);
-                console.error('Error fetching data:', error);
-            }
-        }
-        // Update search function to use the new performSearch function
-        async function searchSymptoms() {
-            const symptom = searchInput.value.trim();
-            if (!symptom) return;
-            performSearch(symptom);
-        }
-        // Display results
-        function displayResults(data) {
-            // Update diseases list
-            diseasesList.innerHTML = '';
-            if (!data.matching_diseases || data.matching_diseases.length === 0) {
-                diseasesList.innerHTML = '<li>No matching diseases found</li>';
-            } else {
-                data.matching_diseases.forEach(disease => {
-                    diseasesList.innerHTML += `<li>${escapeHTML(disease)}</li>`;
-                });
-            }
-            // Update similar symptoms
-            similarList.innerHTML = '';
-            if (data.semantic_matches && data.semantic_matches.length > 0) {
-                data.semantic_matches.forEach(symptom => {
-                    if (!selectedSymptoms.includes(symptom)) {
-                        similarList.innerHTML += `<li class="clickable" onclick="addSymptom('${escapeJS(symptom)}')">${escapeHTML(symptom)}</li>`;
-                    }
-                });
-            } else {
-                similarList.innerHTML = '<li>No similar symptoms found</li>';
-            }
-            // Update related symptoms - sort them alphabetically
-            relatedList.innerHTML = '';
-            if (!data.related_symptoms || data.related_symptoms.length === 0) {
-                relatedList.innerHTML = '<li>No related symptoms found</li>';
-            } else {
-                // Sort the related symptoms alphabetically
-                const sortedSymptoms = [...data.related_symptoms].sort((a, b) => a.localeCompare(b));
-                sortedSymptoms.forEach(symptom => {
-                    if (!selectedSymptoms.includes(symptom)) {
-                        relatedList.innerHTML += `<li class="clickable" onclick="addSymptom('${escapeJS(symptom)}')">${escapeHTML(symptom)}</li>`;
-                    }
-                });
-            }
-            // Update selected symptoms
-            updateSelectedSymptoms();
         }
-        // Helper function to escape HTML
-        function escapeHTML(str) {
-            return str
-                .replace(/&/g, '&amp;')
-                .replace(/</g, '&lt;')
-                .replace(/>/g, '&gt;')
-                .replace(/"/g, '&quot;')
-                .replace(/'/g, '&#39;');
-        }
-        // Helper function to escape strings for JavaScript
-        function escapeJS(str) {
-            return str
-                .replace(/\\/g, '\\\\')
-                .replace(/'/g, "\\'")
-                .replace(/"/g, '\\"')
-                .replace(/\n/g, '\\n')
-                .replace(/\r/g, '\\r')
-                .replace(/\t/g, '\\t');
         }
-        // Add a symptom to the selected list
-        function addSymptom(symptom) {
-            if (!selectedSymptoms.includes(symptom)) {
-                selectedSymptoms.push(symptom);
-                updateSelectedSymptoms();
-                // Instead of calling searchSymptoms which expects input from search box,
-                // directly make a request with the current selected symptoms
-                performSearch(null);
-            }
-        }
-        // Remove a symptom from the selected list
-        function removeSymptom(symptom) {
-            selectedSymptoms = selectedSymptoms.filter(s => s !== symptom);
-            updateSelectedSymptoms();
-            if (selectedSymptoms.length > 0) {
-                performSearch(null);
-            } else {
-                // Clear results if no symptoms are selected
-                diseasesList.innerHTML = '<li>Enter a symptom to get started</li>';
-                similarList.innerHTML = '';
-                relatedList.innerHTML = '';
-            }
-        }
-        // Update the selected symptoms display
-        function updateSelectedSymptoms() {
-            selectedSymptomsDiv.innerHTML = '';
-            selectedSymptoms.forEach(symptom => {
-                const tag = document.createElement('div');
-                tag.className = 'symptom-tag';
-                tag.innerHTML = `
-                    ${escapeHTML(symptom)}
-                    <span class="remove-symptom" onclick="removeSymptom('${escapeJS(symptom)}')">×</span>
-                `;
-                selectedSymptomsDiv.appendChild(tag);
-            });
         }
-        // Event listeners
-        searchButton.addEventListener('click', searchSymptoms);
-        searchInput.addEventListener('keypress', function(e) {
-            if (e.key === 'Enter') {
-                searchSymptoms();
-            }
         });
-        // Initialize
         diseasesList.innerHTML = '<li>Enter a symptom to get started</li>';
-    // Paste your exact same JS from earlier here — no changes needed.
-    // Let me know if you'd like animation when adding/removing tags.
   </script>
 </body>
 </html>

         align-items: stretch;
       }
     }
+    /* Modal styles */
+    .modal {
+      display: none;
+      position: fixed;
+      z-index: 1;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      background-color: rgba(0,0,0,0.4);
+    }
+    .modal-content {
+      background-color: #fefefe;
+      margin: 15% auto;
+      padding: 20px;
+      border: 1px solid #888;
+      width: 70%;
+      border-radius: 8px;
+      max-height: 70vh;
+      overflow-y: auto;
+    }
+    .close {
+      color: #aaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+      cursor: pointer;
+    }
+    .close:hover,
+    .close:focus {
+      color: black;
+      text-decoration: none;
+    }
+    .disease-info-title {
+      margin-top: 0;
+      color: #4285f4;
+    }
+    .loading {
+      text-align: center;
+      padding: 20px;
+    }
+    .disease-clickable {
+      cursor: pointer;
+      color: #333;
+      font-weight: bold;
+    }
+    .disease-clickable:hover {
+      color: #4285f4;
+    }
   </style>
 </head>
 <body>
     </div>
   </div>
+  <!-- Disease Info Modal -->
+  <div id="diseaseModal" class="modal">
+    <div class="modal-content">
+      <span class="close">&times;</span>
+      <h3 id="disease-info-title" class="disease-info-title">Disease Information</h3>
+      <div id="disease-info-content">
+        <div id="loading" class="loading">Loading information...</div>
+        <div id="disease-details"></div>
+      </div>
+    </div>
+  </div>
   <script>
+    // Store selected symptoms
+    let selectedSymptoms = [];
+    // DOM elements
+    const searchInput = document.getElementById('symptom-search');
+    const searchButton = document.getElementById('search-button');
+    const selectedSymptomsDiv = document.getElementById('selected-symptoms');
+    const diseasesList = document.getElementById('diseases-list');
+    const similarList = document.getElementById('similar-list');
+    const relatedList = document.getElementById('related-list');
+    const errorElement = document.getElementById('error-notification');
+    const modal = document.getElementById('diseaseModal');
+    const closeModal = document.getElementsByClassName('close')[0];
+    const diseaseTitle = document.getElementById('disease-info-title');
+    const diseaseDetails = document.getElementById('disease-details');
+    const loadingElement = document.getElementById('loading');
+    // Function to show error message
+    function showError(message) {
+      errorElement.textContent = message;
+      errorElement.style.display = 'block';
+      setTimeout(() => {
+        errorElement.style.display = 'none';
+      }, 5000);
+    }
+    // New function to handle both initial search and updates after selections
+    async function performSearch(inputSymptom) {
+      // Clear any previous errors
+      errorElement.style.display = 'none';
+      try {
+        // Create base URL with inputSymptom if provided, otherwise use first selected symptom
+        let symptomParam = inputSymptom;
+        if (!symptomParam && selectedSymptoms.length > 0) {
+          symptomParam = selectedSymptoms[0];
         }
+        if (!symptomParam) return; // Exit if no symptom to search
+        let url = `${window.location.origin}/search?symptom=${encodeURIComponent(symptomParam)}`;
+        // Add remaining selected symptoms to query
+        if (selectedSymptoms.length > 0) {
+          selectedSymptoms.forEach((s, index) => {
+            // Skip the first one if it's the same as symptomParam
+            if (index === 0 && s === symptomParam) return;
+            url += `&selected=${encodeURIComponent(s)}`;
+          });
         }
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
         }
+        const data = await response.json();
+        displayResults(data);
+        // Clear search input only if this was initiated from the search box
+        if (inputSymptom) {
+          searchInput.value = '';
         }
+      } catch (error) {
+        showError(`Error searching for symptom: ${error.message}. Please try again.`);
+        console.error('Error fetching data:', error);
+      }
+    }
+    // Update search function to use the new performSearch function
+    async function searchSymptoms() {
+      const symptom = searchInput.value.trim();
+      if (!symptom) return;
+      performSearch(symptom);
+    }
+    // Display results
+    function displayResults(data) {
+      // Update diseases list
+      diseasesList.innerHTML = '';
+      if (!data.matching_diseases || data.matching_diseases.length === 0) {
+        diseasesList.innerHTML = '<li>No matching diseases found</li>';
+      } else {
+        data.matching_diseases.forEach(disease => {
+          diseasesList.innerHTML += `<li class="disease-clickable" onclick="showDiseaseInfo('${escapeJS(disease)}')">${escapeHTML(disease)}</li>`;
+        });
+      }
+      // Update similar symptoms
+      similarList.innerHTML = '';
+      if (data.semantic_matches && data.semantic_matches.length > 0) {
+        data.semantic_matches.forEach(symptom => {
+          if (!selectedSymptoms.includes(symptom)) {
+            similarList.innerHTML += `<li class="clickable" onclick="addSymptom('${escapeJS(symptom)}')">${escapeHTML(symptom)}</li>`;
+          }
+        });
+      } else {
+        similarList.innerHTML = '<li>No similar symptoms found</li>';
+      }
+      // Update related symptoms - sort them alphabetically
+      relatedList.innerHTML = '';
+      if (!data.related_symptoms || data.related_symptoms.length === 0) {
+        relatedList.innerHTML = '<li>No related symptoms found</li>';
+      } else {
+        // Sort the related symptoms alphabetically
+        const sortedSymptoms = [...data.related_symptoms].sort((a, b) => a.localeCompare(b));
+        sortedSymptoms.forEach(symptom => {
+          if (!selectedSymptoms.includes(symptom)) {
+            relatedList.innerHTML += `<li class="clickable" onclick="addSymptom('${escapeJS(symptom)}')">${escapeHTML(symptom)}</li>`;
+          }
         });
+      }
+      // Update selected symptoms
+      updateSelectedSymptoms();
+    }
+    // Helper function to escape HTML
+    function escapeHTML(str) {
+      return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+    }
+    // Helper function to escape strings for JavaScript
+    function escapeJS(str) {
+      return str
+        .replace(/\\/g, '\\\\')
+        .replace(/'/g, "\\'")
+        .replace(/"/g, '\\"')
+        .replace(/\n/g, '\\n')
+        .replace(/\r/g, '\\r')
+        .replace(/\t/g, '\\t');
+    }
+    // Add a symptom to the selected list
+    function addSymptom(symptom) {
+      if (!selectedSymptoms.includes(symptom)) {
+        selectedSymptoms.push(symptom);
+        updateSelectedSymptoms();
+        // Instead of calling searchSymptoms which expects input from search box,
+        // directly make a request with the current selected symptoms
+        performSearch(null);
+      }
+    }
+    // Remove a symptom from the selected list
+    function removeSymptom(symptom) {
+      selectedSymptoms = selectedSymptoms.filter(s => s !== symptom);
+      updateSelectedSymptoms();
+      if (selectedSymptoms.length > 0) {
+        performSearch(null);
+      } else {
+        // Clear results if no symptoms are selected
         diseasesList.innerHTML = '<li>Enter a symptom to get started</li>';
+        similarList.innerHTML = '';
+        relatedList.innerHTML = '';
+      }
+    }
+    // Update the selected symptoms display
+    function updateSelectedSymptoms() {
+      selectedSymptomsDiv.innerHTML = '';
+      selectedSymptoms.forEach(symptom => {
+        const tag = document.createElement('div');
+        tag.className = 'symptom-tag';
+        tag.innerHTML = `
+          ${escapeHTML(symptom)}
+          <span class="remove-symptom" onclick="removeSymptom('${escapeJS(symptom)}')">×</span>
+        `;
+        selectedSymptomsDiv.appendChild(tag);
+      });
+    }
+    // Function to show disease information using Groq API
+    async function showDiseaseInfo(disease) {
+      // Show modal
+      modal.style.display = "block";
+      diseaseTitle.textContent = disease;
+      diseaseDetails.innerHTML = '';
+      loadingElement.style.display = 'block';
+      try {
+        // Call to backend API to get disease information
+        const response = await fetch(`${window.location.origin}/disease-info?name=${encodeURIComponent(disease)}`);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        loadingElement.style.display = 'none';
+        // Format and display the information
+        diseaseDetails.innerHTML = data.info;
+      } catch (error) {
+        loadingElement.style.display = 'none';
+        diseaseDetails.innerHTML = `<p class="error">Error getting information: ${error.message}</p>`;
+        console.error('Error fetching disease info:', error);
+      }
+    }
+    // Close the modal when clicking the X
+    closeModal.onclick = function() {
+      modal.style.display = "none";
+    }
+    // Close the modal when clicking outside of it
+    window.onclick = function(event) {
+      if (event.target == modal) {
+        modal.style.display = "none";
+      }
+    }
+    // Event listeners
+    searchButton.addEventListener('click', searchSymptoms);
+    searchInput.addEventListener('keypress', function(e) {
+      if (e.key === 'Enter') {
+        searchSymptoms();
+      }
+    });
+    // Initialize
+    diseasesList.innerHTML = '<li>Enter a symptom to get started</li>';
   </script>
 </body>
 </html>