Upload 3 files

index.html

@@ -34,17 +34,42 @@
         </div>
         
         <div class="label-section">
-            <label>Select Categories:</label>
-            <div class="label-grid" id="labelGrid">
-                <!-- Labels will be inserted here dynamically -->
+            <!-- Default Labels -->
+            <div class="default-labels">
+                <label class="label-option">
+                    <input type="checkbox" name="default" value="Normal" checked>
+                    Normal
+                </label>
+                <label class="label-option">
+                    <input type="checkbox" name="default" value="Unspecified">
+                    Unspecified
+                </label>
+                <p class="helper-text">Best Practice is to select Normal since it will compare it to a healthy state.</p>
             </div>
-        </div>
 
+            <!-- Search Container with Show All Button -->
+            <div class="search-container">
+                <div class="search-wrapper">
+                    <input type="text" id="labelSearch" class="search-input" placeholder="Search labels...">
+                    <button id="showAllLabels" class="show-all-btn">Show All</button>
+                </div>
+                <div id="labelDropdown" class="label-dropdown" style="display: none;">
+                    <!-- Labels will be populated here -->
+                </div>
+            </div>
+        </div>
+        
+        <div id="selectedLabelsContainer" class="selected-labels-container">
+            <h3>Selected Labels:</h3>
+            <div id="selectedLabels"></div>
+        </div>
+        
         <div class="preview-section">
-            <img id="imagePreview" src="" alt="Image Preview">
+            <img id="imagePreview" src="" alt="Image Preview" style="display: none;">
             <div class="spinner" id="spinner" style="display: none;">
                 <div class="spinner-inner"></div>
             </div>
+            <p id="defaultPreviewMessage" style="display: block;">No image loaded. Please upload an image or enter a URL.</p>
         </div>
         
         <button onclick="analyzeImage()" id="analyzeBtn">Analyze</button>

script.js

@@ -5,8 +5,8 @@ document.addEventListener('DOMContentLoaded', function() {
         radio.addEventListener('change', toggleInputMethod);
     });
 
-    // Generate labels
-    generateLabelCheckboxes();
+    // Initialize the search and labels functionality
+    initializeSearchAndLabels();
 });
 
 function toggleInputMethod() {
@@ -58,17 +58,26 @@ function previewImage() {
     const fileInput = document.getElementById('fileInput');
     const urlInput = document.getElementById('urlInput');
     const imagePreview = document.getElementById('imagePreview');
+    const defaultPreviewMessage = document.getElementById('defaultPreviewMessage');
 
     if (fileInput.files && fileInput.files[0]) {
         const reader = new FileReader();
         reader.onload = function(e) {
             imagePreview.src = e.target.result;
+            imagePreview.style.display = 'block'; // Show the image
+            defaultPreviewMessage.style.display = 'none'; // Hide the default message
         };
         reader.readAsDataURL(fileInput.files[0]);
         urlInput.value = ''; // Clear URL input
     } else if (urlInput.value) {
         imagePreview.src = urlInput.value;
+        imagePreview.style.display = 'block'; // Show the image
+        defaultPreviewMessage.style.display = 'none'; // Hide the default message
         fileInput.value = ''; // Clear file input
+    } else {
+        // If no image is loaded, show the default message
+        imagePreview.style.display = 'none'; // Hide the image
+        defaultPreviewMessage.style.display = 'block'; // Show the default message
     }
 }
 
@@ -103,11 +112,17 @@ async function analyzeImage() {
     let base64Image;
 
     try {
-        // Get selected labels from checkboxes
-        const selectedLabels = Array.from(document.querySelectorAll('.label-option input[type="checkbox"]:checked'))
+        // Get selected labels from both default checkboxes and selected labels container
+        const defaultLabels = Array.from(document.querySelectorAll('.default-labels input[type="checkbox"]:checked'))
             .map(checkbox => checkbox.value);
+            
+        const selectedLabels = Array.from(document.querySelectorAll('#selectedLabels .selected-label'))
+            .map(label => label.dataset.label);
+
+        // Combine both sets of labels
+        const allSelectedLabels = [...defaultLabels, ...selectedLabels];
 
-        if (selectedLabels.length === 0) {
+        if (allSelectedLabels.length === 0) {
             throw new Error('Please select at least one category');
         }
 
@@ -129,7 +144,7 @@ async function analyzeImage() {
 
         const payload = {
             images: [base64Image],
-            labels: selectedLabels,
+            labels: allSelectedLabels,
             multilabel: false
         };
 
@@ -165,46 +180,197 @@ function displayResults(predictions) {
     predictions.forEach(prediction => {
         resultsDiv.innerHTML += '<h2>Results:</h2>';
         for (const [label, probability] of Object.entries(prediction)) {
+            const percentage = (probability * 100).toFixed(1);
             resultsDiv.innerHTML += `
                 <div class="prediction-result">
-                    <strong>${label}:</strong> 
+                    <strong>${label}:</strong>
                     <div class="progress-bar">
-                        <div class="progress" style="width: ${probability * 100}%"></div>
+                        <div class="progress" style="width: ${percentage}%"></div>
                     </div>
-                    <span>${(probability * 100).toFixed(2)}%</span>
+                    <span>${percentage}%</span>
                 </div>`;
         }
     });
 }
 
-// Define your labels
-const medicalLabels = [
-    'Tumor',
-    'Normal',
-    'Pneumonia',
-    'Fracture',
-    'Edema',
-    'Effusion',
-    'Urtikaria',
-    'Eczema',
-    'Psoriasis'
-    // Add as many labels as you need
-];
-
-// Function to generate label checkboxes
-function generateLabelCheckboxes() {
-    const labelGrid = document.getElementById('labelGrid');
-    labelGrid.innerHTML = ''; // Clear existing labels
-
-    medicalLabels.forEach(label => {
-        const labelElement = document.createElement('label');
-        labelElement.className = 'label-option';
+// Define your labels with categories
+const medicalLabels = {
+    'Others': ['Effusion', 'Edema', 'Scar Tissue', 'Calcification'],
+    'Pulmonology': ['Pneumonia', 'Asthma', 'COPD', 'Tuberculosis', 'Pulmonary Fibrosis', 'Pleural Effusion', 'Pulmonary Edema', 'Lung Nodule', 'Atelectasis', 'Pneumothorax'],
+    'Oncology': ['Tumor', 'Breast Cancer', 'Lung Cancer', 'Prostate Cancer', 'Leukemia', 'Lymphoma', 'Melanoma', 'Colorectal Cancer', 'Glioma', 'Metastasis'],
+    'Orthopedics': ['Fracture', 'Arthritis', 'Osteoporosis', 'Scoliosis', 'Tendonitis', 'Joint Effusion', 'Disc Herniation', 'Osteomyelitis', 'Bursitis', 'Bone Lesion'],
+    'Cardiology': ['Myocardial Infarction', 'Arrhythmia', 'Heart Failure', 'Cardiomegaly', 'Aortic Aneurysm', 'Valvular Heart Disease', 'Coronary Artery Disease', 'Pericardial Effusion', 'Pulmonary Embolism'],
+    'Dermatology': ['Urtikaria', 'Akne', 'Eczema', 'Psoriasis', 'Melanoma', 'Basal Cell Carcinoma', 'Squamous Cell Carcinoma', 'Skin Ulcer', 'Rash'],
+    'Gastroenterology': ['Cirrhosis', 'Hepatitis', 'Ulcer', 'Gastric Cancer', 'Polyp', 'Pancreatitis', 'Cholecystitis', 'Colitis', 'Crohn’s Disease'],
+    'Neurology': ['Stroke', 'Multiple Sclerosis', 'Parkinson’s Disease', 'Alzheimer’s Disease', 'Epilepsy', 'Brain Tumor', 'Hydrocephalus', 'Meningitis', 'Intracranial Hemorrhage'],
+    'Endocrinology': ['Diabetes', 'Thyroid Nodule', 'Goiter', 'Adrenal Tumor', 'Pituitary Adenoma', 'Hyperthyroidism', 'Hypothyroidism', 'Parathyroid Hyperplasia'],
+    'Hematology': ['Anemia', 'Thrombocytopenia', 'Leukemia', 'Lymphoma', 'Hemophilia', 'Polycythemia', 'Sickle Cell Disease'],
+    'Urology': ['Kidney Stone', 'Bladder Cancer', 'Prostate Cancer', 'Urinary Tract Infection', 'Renal Cyst', 'Hydronephrosis'],
+    'Ophthalmology': ['Glaucoma', 'Cataract', 'Retinal Detachment', 'Macular Degeneration', 'Diabetic Retinopathy', 'Conjunctivitis'],
+    'Gynecology': ['Ovarian Cyst', 'Fibroids', 'Endometriosis', 'Breast Cancer', 'Polycystic Ovary Syndrome', 'Cervical Cancer'],
+    'Rheumatology': ['Rheumatoid Arthritis', 'Lupus', 'Scleroderma', 'Ankylosing Spondylitis', 'Gout', 'Sjogren’s Syndrome']
+    // Add more categories and labels as needed
+};
+
+function initializeSearchAndLabels() {
+    // First, remove any existing search containers to prevent duplicates
+    const existingSearchContainers = document.querySelectorAll('.search-container');
+    existingSearchContainers.forEach(container => container.remove());
+
+    // Create search container with show all button
+    const searchContainer = document.createElement('div');
+    searchContainer.className = 'search-container';
+    searchContainer.innerHTML = `
+        <div class="search-wrapper">
+            <input type="text" id="labelSearch" class="search-input" placeholder="Search labels...">
+            <button id="showAllLabels" class="show-all-btn">Show All</button>
+        </div>
+        <div id="labelDropdown" class="label-dropdown" style="display: none;"></div>
+    `;
+
+    // Insert the search container after the default labels
+    const defaultLabels = document.querySelector('.default-labels');
+    if (defaultLabels) {
+        defaultLabels.parentNode.insertBefore(searchContainer, defaultLabels.nextElementSibling);
+    }
+
+    // Set up event listeners
+    const searchInput = document.getElementById('labelSearch');
+    const labelDropdown = document.getElementById('labelDropdown');
+    const showAllButton = document.getElementById('showAllLabels');
+
+    // Show dropdown on focus
+    searchInput.addEventListener('focus', () => {
+        const searchTerm = searchInput.value.trim().toLowerCase();
+        showFilteredResults(searchTerm);
+    });
+
+    // Handle input changes
+    searchInput.addEventListener('input', (e) => {
+        const searchTerm = e.target.value.trim().toLowerCase();
+        if (searchTerm) {
+            showFilteredResults(searchTerm);
+        } else {
+            labelDropdown.style.display = 'none';
+        }
+    });
+
+    // Show all button click handler
+    showAllButton.addEventListener('click', function(e) {
+        e.stopPropagation(); // Prevent event from bubbling up
+        labelDropdown.style.display = 'block';
+        showFilteredResults('');
+        searchInput.value = '';
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!searchInput.contains(e.target) && 
+            !labelDropdown.contains(e.target) && 
+            !showAllButton.contains(e.target)) {
+            labelDropdown.style.display = 'none';
+        }
+    });
+}
+
+function showFilteredResults(searchTerm) {
+    const labelDropdown = document.getElementById('labelDropdown');
+    labelDropdown.innerHTML = '';
+    let hasResults = false;
+
+    // Sort categories alphabetically for better organization
+    const sortedCategories = Object.entries(medicalLabels).sort((a, b) => a[0].localeCompare(b[0]));
+
+    // Loop through all medical labels
+    sortedCategories.forEach(([category, labels]) => {
+        // Always show all labels when searchTerm is empty (Show All button clicked)
+        // Otherwise, filter based on search term
+        const matchingLabels = searchTerm === '' ? 
+            labels.sort() : // Sort labels alphabetically
+            labels.filter(label => label.toLowerCase().includes(searchTerm.toLowerCase()));
+
+        if (matchingLabels.length > 0) {
+            hasResults = true;
+            
+            // Add category header
+            const categoryHeader = document.createElement('div');
+            categoryHeader.className = 'dropdown-category-header';
+            categoryHeader.textContent = category;
+            labelDropdown.appendChild(categoryHeader);
+
+            // Add labels
+            matchingLabels.forEach(label => {
+                const option = document.createElement('div');
+                option.className = 'dropdown-option';
+                
+                const checkbox = document.createElement('input');
+                checkbox.type = 'checkbox';
+                checkbox.id = `${category}-${label}`;
+                checkbox.checked = isLabelSelected(category, label);
+                checkbox.addEventListener('change', () => updateSelectedLabels(category, label));
+
+                const labelText = document.createElement('span');
+                labelText.className = 'label-text';
+                labelText.textContent = label;
+
+                const categoryBadge = document.createElement('span');
+                categoryBadge.className = 'category-badge';
+                categoryBadge.textContent = category;
+
+                option.appendChild(checkbox);
+                option.appendChild(labelText);
+                option.appendChild(categoryBadge);
+                labelDropdown.appendChild(option);
+            });
+        }
+    });
+
+    labelDropdown.style.display = hasResults || searchTerm === '' ? 'block' : 'none';
+}
+
+function isLabelSelected(category, label) {
+    const selectedLabelsContainer = document.getElementById('selectedLabels');
+    return !!selectedLabelsContainer.querySelector(
+        `[data-category="${category}"][data-label="${label}"]`
+    );
+}
+
+function updateSelectedLabels(category, label) {
+    const selectedLabelsContainer = document.getElementById('selectedLabels');
+    const checkbox = document.getElementById(`${category}-${label}`);
+    
+    if (checkbox.checked) {
+        const labelElement = document.createElement('span');
+        labelElement.className = 'selected-label';
+        labelElement.textContent = `${label}`;
+        labelElement.dataset.category = category;
+        labelElement.dataset.label = label;
         
-        labelElement.innerHTML = `
-            <input type="checkbox" value="${label}">
-            <span>${label}</span>
-        `;
+        const categoryBadge = document.createElement('span');
+        categoryBadge.className = 'category-badge';
+        categoryBadge.textContent = category;
         
-        labelGrid.appendChild(labelElement);
-    });
-}
+        const removeButton = document.createElement('span');
+        removeButton.className = 'remove-label';
+        removeButton.innerHTML = '×';
+        removeButton.onclick = () => {
+            labelElement.remove();
+            checkbox.checked = false;
+        };
+        
+        labelElement.appendChild(categoryBadge);
+        labelElement.appendChild(removeButton);
+        selectedLabelsContainer.appendChild(labelElement);
+    } else {
+        const existingLabel = selectedLabelsContainer.querySelector(
+            `[data-category="${category}"][data-label="${label}"]`
+        );
+        if (existingLabel) {
+            existingLabel.remove();
+        }
+    }
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', initializeSearchAndLabels);
+

styles.css

@@ -58,7 +58,17 @@ input[type="text"]:focus {
 }
 
 .label-section {
-    margin-bottom: 30px;
+    margin: 20px 0;
+}
+
+.label-category {
+    margin-bottom: 20px;
+}
+
+.label-category h3 {
+    margin-bottom: 10px;
+    font-size: 18px;
+    color: #1a73e8;
 }
 
 .label-grid {
@@ -86,27 +96,138 @@ input[type="text"]:focus {
     margin-right: 10px;
 }
 
-.preview-section {
-    position: relative;
-    text-align: center;
-    margin: 30px 0;
-    min-height: 200px;
-    border: 2px dashed #e0e0e0;
+.selected-labels-container {
+    margin: 20px 0;
+    padding: 10px;
+    background-color: #f8f9fa;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+}
+
+.selected-labels-container h3 {
+    margin: 0 0 10px;
+    font-size: 16px;
+    color: #1a73e8;
+}
+
+.selected-label {
+    display: inline-block;
+    margin: 4px;
+    padding: 5px 10px;
+    background-color: #e0f7fa;
     border-radius: 12px;
-    padding: 20px;
+    font-size: 14px;
+    color: #00796b;
 }
 
-#imagePreview {
-    max-width: 100%;
-    max-height: 400px;
-    border-radius: 8px;
+.selected-labels-container p {
+    color: #666;
+}
+
+.default-labels {
+    display: flex;
+    gap: 10px;
+    padding: 2px; /* Smaller padding */
 }
 
-button {
+.default-labels .label-option {
+    padding: 2px 5px; /* Smaller padding for individual labels */
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.search-container {
+    position: relative;
+    margin: 20px 0;
+}
+
+.search-input {
     width: 100%;
-    padding: 15px;
+    padding: 12px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 16px;
+}
+
+.search-input:focus {
+    border-color: #1a73e8;
+    outline: none;
+}
+
+.label-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    max-height: 400px;
+    overflow-y: auto;
+    z-index: 1000;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.dropdown-option {
+    padding: 8px 12px 8px 24px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    cursor: pointer;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.dropdown-option:hover {
+    background-color: #f8f9fa;
+}
+
+.dropdown-option:last-child {
+    border-bottom: none;
+}
+
+.label-text {
+    flex: 1;
+}
+
+.category-badge {
+    background-color: #e8f0fe;
+    color: #1a73e8;
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+}
+
+.selected-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background-color: #e8f0fe;
+    border: 1px solid #1a73e8;
+    border-radius: 16px;
+    padding: 4px 12px;
+    margin: 4px;
+    font-size: 14px;
+}
+
+.remove-label {
+    cursor: pointer;
+    color: #1a73e8;
+    font-weight: bold;
+    padding-left: 4px;
+}
+
+.remove-label:hover {
+    color: #1557b0;
+}
+
+/* Analyze Button */
+#analyzeBtn {
+    display: block;
+    width: 200px;
+    margin: 20px auto;
+    padding: 12px 24px;
     background-color: #1a73e8;
-    color: #fff;
+    color: white;
     border: none;
     border-radius: 8px;
     font-size: 16px;
@@ -115,74 +236,137 @@ button {
     transition: background-color 0.3s;
 }
 
-button:hover {
-    background-color: #1565c0;
+#analyzeBtn:hover {
+    background-color: #1557b0;
 }
 
-.results-section {
-    margin-top: 20px;
-    padding: 10px;
-    background-color: #e9ecef;
-    border-radius: 4px;
+#analyzeBtn:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+}
+
+/* Image Preview */
+.preview-section {
+    margin: 20px 0;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#imagePreview {
+    max-width: 100%;
+    max-height: 400px;
+    object-fit: contain;
+    margin: 0 auto;
 }
 
+/* Results Section */
 .prediction-result {
     margin: 10px 0;
     padding: 10px;
-    background: #f8f9fa;
-    border-radius: 4px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
 }
 
 .progress-bar {
-    width: 100%;
-    height: 20px;
-    background: #e9ecef;
-    border-radius: 10px;
-    margin: 5px 0;
+    height: 24px;
+    background-color: #e0e0e0;
+    border-radius: 12px;
     overflow: hidden;
+    margin: 8px 0;
+    flex-grow: 1;
+    margin-right: 10px;
 }
 
 .progress {
     height: 100%;
-    background: #007bff;
+    background-color: #1a73e8;
     transition: width 0.3s ease;
 }
 
-.error-message {
-    color: #dc3545;
-    background-color: #f8d7da;
-    border: 1px solid #f5c6cb;
-    padding: 10px;
-    border-radius: 4px;
+.prediction-result {
+    display: flex;
+    align-items: center;
+    gap: 10px;
     margin: 10px 0;
 }
 
+.prediction-result strong {
+    min-width: 120px;
+}
+
+.prediction-result span {
+    min-width: 80px;
+    text-align: right;
+}
+
+.results-section h2 {
+    color: #1a73e8;
+    font-size: 20px;
+    margin: 20px 0 15px;
+}
+
+/* Add spacing after radio buttons */
 .input-method-selection {
     margin-bottom: 20px;
-    display: flex;
-    gap: 20px;
 }
 
 .radio-label {
+    margin-right: 15px;
+}
+
+/* Style the results section to always show */
+.results-section {
+    min-height: 100px;
+    padding: 15px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    margin-top: 20px;
+}
+
+.results-section:empty::before {
+    content: 'Analysis results will appear here';
+    color: #666;
+    font-style: italic;
+}
+
+.helper-text {
+    color: #666;
+    font-size: 0.9em;
+    margin: 8px 0;
+    font-style: italic;
+}
+
+.search-wrapper {
     display: flex;
+    gap: 10px;
     align-items: center;
-    gap: 8px;
-    cursor: pointer;
-    padding: 8px 16px;
-    border: 2px solid #e0e0e0;
-    border-radius: 8px;
-    transition: all 0.3s;
 }
 
-.radio-label:hover {
-    border-color: #1a73e8;
+.search-input {
+    flex: 1;
 }
 
-.radio-label input[type="radio"] {
-    margin: 0;
+.show-all-btn {
+    padding: 12px 20px;
+    background-color: #1a73e8;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    white-space: nowrap;
 }
 
-.radio-label input[type="radio"]:checked + .radio-label {
-    border-color: #1a73e8;
-    background-color: #f0f7ff;
-}
+.show-all-btn:hover {
+    background-color: #1557b0;
+}
+
+.dropdown-category-header {
+    padding: 8px 12px;
+    background-color: #f0f2f5;
+    font-weight: bold;
+    color: #1a73e8;
+    border-bottom: 1px solid #e0e0e0;
+}