Update static/script.js

static/script.js

@@ -100,7 +100,6 @@ function handleFileSelect(e) {
         uploadFile(file);
     }
 }
-
 async function uploadFile(file) {
     const formData = new FormData();
     formData.append('file', file);
@@ -110,12 +109,15 @@ async function uploadFile(file) {
     document.getElementById('uploadProgress').classList.remove('hidden');
     
     try {
+        console.log('📤 Uploading file...');
+        
         const response = await fetch('/api/upload', {
             method: 'POST',
             body: formData
         });
         
         const data = await response.json();
+        console.log('📥 Upload response:', data);
         
         if (!response.ok) {
             throw new Error(data.error || 'Upload failed');
@@ -125,30 +127,42 @@ async function uploadFile(file) {
         sessionId = data.session_id;
         currentResults = data.results;
         
-        console.log('Session ID:', sessionId);
-        console.log('Results:', currentResults);
+        console.log('✅ Session ID:', sessionId);
+        console.log('✅ Results count:', currentResults.length);
         
         showToast(`✓ Found ${data.count} lab results!`, 'success');
         
-        // Generate explanations
-        await generateExplanations();
-        
-        // Display results
+        // IMPORTANT: Show results immediately with template explanations
+        console.log('🎨 Displaying results with template explanations...');
         displayResults();
         
         // Scroll to results
         setTimeout(() => {
-            document.getElementById('results').scrollIntoView({ 
-                behavior: 'smooth' 
-            });
+            const resultsEl = document.getElementById('results');
+            if (resultsEl) {
+                resultsEl.scrollIntoView({ behavior: 'smooth' });
+                console.log('📍 Scrolled to results section');
+            }
         }, 500);
         
+        // Then fetch AI explanations in background
+        console.log('🤖 Fetching AI explanations...');
+        await generateExplanations();
+        
+        // Update display with AI explanations
+        console.log('🔄 Updating with AI explanations...');
+        displayResults();
+        
+        showToast('✓ AI explanations loaded!', 'success');
+        
     } catch (error) {
+        console.error('❌ Upload error:', error);
         showToast(error.message, 'error');
         resetUploadArea();
     }
 }
 
+
 async function generateExplanations() {
     showLoading('Generating AI explanations... (10-20 seconds)');
     
@@ -190,16 +204,22 @@ async function generateExplanations() {
         hideLoading();
     }
 }
-
 function displayResults() {
     const resultsSection = document.getElementById('results');
     const container = document.getElementById('resultsContainer');
     
+    console.log('🎯 displayResults() called');
+    console.log('📊 currentResults:', currentResults);
+    console.log('💬 explanations:', explanations);
+    
     if (!currentResults || currentResults.length === 0) {
-        container.innerHTML = '<p class="empty-message">No results found</p>';
+        console.log('❌ No results to display');
+        container.innerHTML = '<p style="text-align:center;color:#94a3b8;padding:3rem;">No results found</p>';
         return;
     }
     
+    console.log(`✅ Displaying ${currentResults.length} results`);
+    
     // Show results section
     resultsSection.classList.remove('hidden');
     
@@ -211,12 +231,20 @@ function displayResults() {
     
     // Create result cards
     currentResults.forEach((result, index) => {
-        const card = createResultCard(result, index);
-        container.appendChild(card);
+        console.log(`📝 Creating card ${index + 1}: ${result.test_name} (${result.status})`);
+        try {
+            const card = createResultCard(result, index);
+            container.appendChild(card);
+            console.log(`  ✅ Card added to DOM`);
+        } catch (error) {
+            console.error(`  ❌ Error creating card:`, error);
+        }
     });
     
     // Reset upload area
     resetUploadArea();
+    
+    console.log('✅ All results displayed successfully');
 }
 
 function updateSummaryStats() {
@@ -238,15 +266,40 @@ function updateSummaryStats() {
 }
 
 function createResultCard(result, index) {
+    console.log(`  Creating card for: ${result.test_name}`);
+    
     const card = document.createElement('div');
     card.className = 'result-card';
     card.style.setProperty('--i', index + 1);
     
-    const statusClass = `status-${result.status}`;
-    const explanation = explanations && explanations[result.test_name] 
-        ? explanations[result.test_name] 
-        : 'Explanation is being generated. Click "Ask Questions" to learn more about this result.';
+    // Determine status class and color
+    const statusClass = `status-${result.status || 'unknown'}`;
+    let statusColor = '#64748b'; // gray for unknown
+    if (result.status === 'normal') statusColor = '#10b981';
+    if (result.status === 'high') statusColor = '#ef4444';
+    if (result.status === 'low') statusColor = '#f59e0b';
+    
+    // Get explanation
+    let explanation = '';
+    
+    if (explanations && explanations[result.test_name]) {
+        explanation = explanations[result.test_name];
+        console.log(`  ✅ Using AI explanation (${explanation.length} chars)`);
+    } else {
+        console.log(`  ⚠️ No AI explanation yet, using template`);
+        // Template explanation based on status
+        if (result.status === 'normal') {
+            explanation = `✅ <strong>Good news!</strong> Your ${result.test_name} level of ${result.value} ${result.unit} is within the normal range (${result.reference_range}).<br><br>This indicates healthy levels. Keep up your current health habits!`;
+        } else if (result.status === 'high') {
+            explanation = `⚠️ Your ${result.test_name} level of ${result.value} ${result.unit} is <strong>above</strong> the normal range (${result.reference_range}).<br><br>This may require attention. Please consult your healthcare provider to discuss these results and any necessary steps.`;
+        } else if (result.status === 'low') {
+            explanation = `⚠️ Your ${result.test_name} level of ${result.value} ${result.unit} is <strong>below</strong> the normal range (${result.reference_range}).<br><br>This may require attention. Please consult your healthcare provider to discuss these results and any necessary steps.`;
+        } else {
+            explanation = `Your ${result.test_name} result is ${result.value} ${result.unit}.<br><br>Reference range: ${result.reference_range}<br><br>Please discuss this result with your healthcare provider for proper interpretation.`;
+        }
+    }
     
+    // Build card HTML
     card.innerHTML = `
         <div class="result-header">
             <div>
@@ -255,15 +308,16 @@ function createResultCard(result, index) {
             </div>
             <div class="result-value-container">
                 <div class="result-value">${escapeHtml(result.value)} ${escapeHtml(result.unit)}</div>
-                <span class="result-status ${statusClass}">${result.status}</span>
+                <span class="result-status ${statusClass}" style="background: ${statusColor}20; color: ${statusColor}; border: 2px solid ${statusColor};">${result.status || 'unknown'}</span>
             </div>
         </div>
         <div class="result-explanation">
-            <strong>💡 What does this mean?</strong>
-            <p>${escapeHtml(explanation)}</p>
+            <strong>💡 What does this mean?</strong><br><br>
+            <div style="line-height: 1.8;">${explanation}</div>
         </div>
     `;
     
+    console.log(`  ✅ Card HTML created`);
     return card;
 }
 
@@ -460,6 +514,7 @@ function showToast(message, type = 'info') {
 
 // ===== UTILITY FUNCTIONS =====
 function escapeHtml(text) {
+    if (!text) return '';
     const div = document.createElement('div');
     div.textContent = text;
     return div.innerHTML;