Upload 2 files

app.js

@@ -187,68 +187,84 @@ function buildSpecialtyPct() {
 }
 
 /* ============================================================
-   HUGGING FACE INFERENCE API INTEGRATION
-   Model: pfizer-project-team/binary-segA-vs-segBC
+   CLIENT-SIDE INFERENCE ENGINE (PYODIDE)
+   Model: scikit-learn model loaded directly in browser
    ============================================================ */
 
-const HF_API_URL = "https://api-inference.huggingface.co/models/pfizer-project-team/binary-segA-vs-segBC";
-// Note: If your model is private, you need a token. If it's public, you might not need it, 
-// but it is highly recommended to avoid rate limits.
-const HF_TOKEN = "";
+let pyodideInstance = null;
 
 async function runModelPrediction() {
-    const resultDiv = document.getElementById('prediction-result');
-    const predictBtn = document.getElementById('btn-predict');
-    
-    resultDiv.style.display = 'block';
-    resultDiv.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Running inference on Hugging Face...';
-    predictBtn.disabled = true;
-
-    // ---------------------------------------------------------
-    // CRITICAL FIX: The flattened tensor size is 86 weeks * 65 features
-    // Total expected features per HCP = 5590
-    // ---------------------------------------------------------
-    const TENSOR_WEEKS = 86;
-    const TENSOR_FEATURES = 65;
-    const TOTAL_FEATURES = TENSOR_WEEKS * TENSOR_FEATURES; // 5590
-
-    // Create an array of 5590 zeros to avoid shape mismatch errors
-    const dummyFeatures = new Array(TOTAL_FEATURES).fill(0); 
-
-    // You can inject test values at specific indices if you know them.
-    // For now, we send an array of 5590 zeros.
-    
-    const payload = {
-        "inputs": [dummyFeatures]
-    };
-
-    try {
-        const response = await fetch(HF_API_URL, {
-            method: "POST",
-            headers: {
-                "Authorization": `Bearer ${userHfToken}`,
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify(payload)
-        });
-
-        if (!response.ok) {
-            const errorText = await response.text();
-            throw new Error(`HTTP ${response.status}: ${errorText}`);
-        }
+  const resultDiv = document.getElementById('prediction-result');
+  const predictBtn = document.getElementById('btn-predict');
+
+  // Handle UI state for loading (disable button and show spinner)
+  predictBtn.disabled = true;
+  resultDiv.style.display = 'block';
+  resultDiv.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Initializing Pyodide & loading model (may take a moment)...';
+
+  try {
+    // Initialize Pyodide
+    if (!pyodideInstance) {
+      pyodideInstance = await loadPyodide();
+      // Load the scikit-learn and numpy packages into the browser memory
+      await pyodideInstance.loadPackage(['scikit-learn', 'numpy']);
+    }
+
+    resultDiv.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Downloading model and running inference...';
+
+    // Use Python code (executed via JavaScript) to download the model directly from this URL
+    const pythonCode = `
+import pyodide.http
+import numpy as np
+import joblib
+
+url = "https://huggingface.co/pfizer-project-team/binary-segA-vs-segBC/resolve/main/sklearn_model.joblib"
+
+# In Pyodide, we must use pyfetch to make HTTPS requests
+response = await pyodide.http.pyfetch(url)
+with open("sklearn_model.joblib", "wb") as f:
+    f.write(await response.bytes())
+
+# Load the scikit-learn model
+model = joblib.load("sklearn_model.joblib")
 
-        const data = await response.json();
-        const predictionValue = Array.isArray(data) ? data[0] : JSON.stringify(data);
-        
-        resultDiv.innerHTML = `<i class="fas fa-check-circle" style="color: var(--accent-green);"></i> Model Output: <b>${predictionValue}</b>`;
-        
-    } catch (error) {
-        console.error("HF Inference API Error:", error);
-        resultDiv.innerHTML = `<i class="fas fa-exclamation-triangle" style="color: var(--accent-coral);"></i> Error: ${error.message}`;
-    } finally {
-        predictBtn.disabled = false;
+# The model expects a flattened tensor of exactly 5590 features (86 weeks * 65 features)
+# Create a dummy numpy array of shape (1, 5590) of zeros for the prediction
+dummy_features = np.zeros((1, 5590))
+
+# Run the prediction using model.predict()
+prediction = model.predict(dummy_features)
+int(prediction[0])
+`;
+
+    // Execute python code and wait for result
+    const result = await pyodideInstance.runPythonAsync(pythonCode);
+
+    // Return the result to JS and update UI
+    if (result === 1) {
+      resultDiv.innerHTML = '<i class="fas fa-check-circle" style="color: var(--accent-green);"></i> SEG_B/C (High Potential)';
+    } else {
+      resultDiv.innerHTML = '<i class="fas fa-circle" style="color: var(--text-muted);"></i> SEG_A (Traditionalist)';
     }
+
+  } catch (error) {
+    console.error("Pyodide Client-Side ML Error:", error);
+    resultDiv.innerHTML = `<i class="fas fa-exclamation-triangle" style="color: var(--accent-coral);"></i> Inference Error: ${error.message}`;
+  } finally {
+    // Re-enable the button
+    predictBtn.disabled = false;
+  }
 }
 
 /* Init */
-document.addEventListener('DOMContentLoaded', () => { initTabs(); loadTab('tab-overview'); animateCounters(); });
+document.addEventListener('DOMContentLoaded', () => { 
+  initTabs(); 
+  loadTab('tab-overview'); 
+  animateCounters(); 
+  
+  // Bind live prediction button
+  const predictBtn = document.getElementById('btn-predict');
+  if (predictBtn) {
+    predictBtn.addEventListener('click', runModelPrediction);
+  }
+});

index.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"></script>
 </head>
 
 <body>
@@ -424,112 +425,120 @@
 
     <!-- ==================== TAB 6: UNLABELED OPPORTUNITY ==================== -->
     <div id="tab-opportunity" class="tab-content">
-    
-    <div class="section-header">
-        <div class="section-icon"><i class="fas fa-crosshairs"></i></div>
-        <div>
-            <div class="section-title">Unlabeled HCP Opportunity</div>
-            <div class="section-subtitle">Prioritizing 633 unclassified HCPs for commercial outreach</div>
+
+        <div class="section-header">
+            <div class="section-icon"><i class="fas fa-crosshairs"></i></div>
+            <div>
+                <div class="section-title">Unlabeled HCP Opportunity</div>
+                <div class="section-subtitle">Prioritizing 633 unclassified HCPs for commercial outreach</div>
+            </div>
         </div>
-    </div>
 
-    <div class="grid-2" style="align-items: start; margin-bottom: 24px;">
-        
-        <div>
-            <div class="grid-3" style="margin-bottom: 24px;">
-                <div class="card tier-card tier-1">
-                    <div class="tier-value" style="color:var(--accent-green)">43</div>
-                    <div class="tier-label">Tier 1 — Immediate</div>
-                    <div class="tier-desc">Score &ge; 0.60. Highest prescribing + growth signals.</div>
-                </div>
-                <div class="card tier-card tier-2">
-                    <div class="tier-value" style="color:var(--accent-amber)">22</div>
-                    <div class="tier-label">Tier 2 — Validate</div>
-                    <div class="tier-desc">Score 0.35–0.60. Moderate opportunity, needs validation.</div>
-                </div>
-                <div class="card tier-card tier-3">
-                    <div class="tier-value" style="color:var(--text-muted)">568</div>
-                    <div class="tier-label">Tier 3 — Monitor</div>
-                    <div class="tier-desc">Score &lt; 0.35. Low activity, monitor for emergence.</div>
+        <div class="grid-2" style="align-items: start; margin-bottom: 24px;">
+
+            <div>
+                <div class="grid-3" style="margin-bottom: 24px;">
+                    <div class="card tier-card tier-1">
+                        <div class="tier-value" style="color:var(--accent-green)">39</div>
+                        <div class="tier-label">Tier 1 — Immediate</div>
+                        <div class="tier-desc">Score &ge; 0.60. Highest prescribing + growth signals.</div>
+                    </div>
+                    <div class="card tier-card tier-2">
+                        <div class="tier-value" style="color:var(--accent-amber)">14</div>
+                        <div class="tier-label">Tier 2 — Validate</div>
+                        <div class="tier-desc">Score 0.35–0.60. Moderate opportunity, needs validation.</div>
+                    </div>
+                    <div class="card tier-card tier-3">
+                        <div class="tier-value" style="color:var(--text-muted)">580</div>
+                        <div class="tier-label">Tier 3 — Monitor</div>
+                        <div class="tier-desc">Score &lt; 0.35. Low activity, monitor for emergence.</div>
+                    </div>
                 </div>
-            </div>
 
-            <div class="alert-box alert-warning">
-                <i class="fas fa-exclamation-triangle"></i>
-                <span><strong>Coverage Gap:</strong> 347 of 633 unlabeled HCPs (54.8%) have zero rep visits. Among Tier 1 (high-opportunity) HCPs, many prescribe actively but have never been contacted by a sales representative.</span>
+                <div class="alert-box alert-warning">
+                    <i class="fas fa-exclamation-triangle"></i>
+                    <span><strong>Coverage Gap:</strong> 347 of 633 unlabeled HCPs (54.8%) have zero rep visits. Among
+                        Tier 1 (high-opportunity) HCPs, many prescribe actively but have never been contacted by a sales
+                        representative.</span>
+                </div>
             </div>
-        </div>
 
-        <div class="card" id="inference-card" style="height: 100%;">
-            <div class="chart-title">Live Model Prediction: Segment Classification</div>
-            <div class="chart-container" style="height: auto; padding: 15px 0;">
-                <p style="font-size: 14px; color: var(--text-secondary); margin-bottom: 25px;">
-                    Test the live Hugging Face model (SEG_A vs SEG_BC) with sample HCP data.
-                </p>
-                <button id="btn-predict" class="tab-btn active" style="width: 100%; justify-content: center; border-radius: 8px; padding: 12px;">
-                    <i class="fas fa-brain"></i> Run Live Prediction
-                </button>
-                <div id="prediction-result" style="margin-top: 20px; font-weight: 600; color: var(--pfizer-deep); font-size: 16px; background: var(--bg-active); padding: 12px; border-radius: 8px; display: none;">
+            <div class="card" id="inference-card" style="height: 100%;">
+                <div class="chart-title">Live Model Prediction: Segment Classification</div>
+                <div class="chart-container" style="height: auto; padding: 15px 0;">
+                    <p style="font-size: 14px; color: var(--text-secondary); margin-bottom: 25px;">
+                        Test the live Hugging Face model (SEG_A vs SEG_BC) with sample HCP data.
+                    </p>
+                    <button id="btn-predict"
+                        style="width: 100%; justify-content: center; border-radius: 8px; padding: 12px; background: var(--pfizer-blue); color: white; border: none; cursor: pointer; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; transition: opacity 0.2s;"
+                        onmouseover="this.style.opacity=0.9" onmouseout="this.style.opacity=1">
+                        <i class="fas fa-brain"></i> Run Live Prediction
+                    </button>
+                    <div id="prediction-result"
+                        style="margin-top: 20px; font-weight: 600; color: var(--pfizer-deep); font-size: 16px; background: var(--bg-active); padding: 12px; border-radius: 8px; display: none;">
+                    </div>
                 </div>
             </div>
+
         </div>
-        
-    </div> <div class="grid-2" style="margin-top:24px">
-        <div class="card">
-            <div class="chart-title">Opportunity Score Distribution (633 Unlabeled HCPs)</div>
-            <div class="chart-container" style="height:300px"><canvas id="chart-opp-hist"></canvas></div>
-        </div>
-        <div class="card">
-            <div class="chart-title">Click a red point to identify the HCP below ↓</div>
-            <div class="chart-container" style="height:300px"><canvas id="chart-opp-scatter"></canvas></div>
+        <div class="grid-2" style="margin-top:24px">
+            <div class="card">
+                <div class="chart-title">Opportunity Score Distribution (633 Unlabeled HCPs)</div>
+                <div class="chart-container" style="height:300px"><canvas id="chart-opp-hist"></canvas></div>
+            </div>
+            <div class="card">
+                <div class="chart-title">Click a red point to identify the HCP below ↓</div>
+                <div class="chart-container" style="height:300px"><canvas id="chart-opp-scatter"></canvas></div>
+            </div>
         </div>
-    </div>
 
-    <div id="hcp-detail-panel" class="card" style="margin-top:24px;display:none;border-left:4px solid var(--accent-coral)">
-        <div class="section-header" style="margin-bottom:16px">
-            <div class="section-icon" style="background:#fef2f2;color:var(--accent-coral)">
-                <i class="fas fa-user-md"></i>
+        <div id="hcp-detail-panel" class="card"
+            style="margin-top:24px;display:none;border-left:4px solid var(--accent-coral)">
+            <div class="section-header" style="margin-bottom:16px">
+                <div class="section-icon" style="background:#fef2f2;color:var(--accent-coral)">
+                    <i class="fas fa-user-md"></i>
+                </div>
+                <div>
+                    <div class="section-title" id="hcp-detail-title">HCP Selected</div>
+                    <div class="section-subtitle">Zero rep visits — high opportunity for outreach</div>
+                </div>
             </div>
-            <div>
-                <div class="section-title" id="hcp-detail-title">HCP Selected</div>
-                <div class="section-subtitle">Zero rep visits — high opportunity for outreach</div>
+            <div class="grid-5" id="hcp-detail-grid"></div>
+            <div class="alert-box alert-warning" style="margin-top:16px">
+                <i class="fas fa-bullhorn"></i>
+                <span><strong>Action Required:</strong> This HCP has never been visited by a sales representative yet
+                    shows significant UC prescribing activity. Recommend scheduling an initial detail call.</span>
             </div>
         </div>
-        <div class="grid-5" id="hcp-detail-grid"></div>
-        <div class="alert-box alert-warning" style="margin-top:16px">
-            <i class="fas fa-bullhorn"></i>
-            <span><strong>Action Required:</strong> This HCP has never been visited by a sales representative yet shows significant UC prescribing activity. Recommend scheduling an initial detail call.</span>
-        </div>
-    </div>
 
-</div> ```
+    </div> ```
 
 
-        <!-- ==================== TAB 7: SPECIALTY MIX ==================== -->
-        <div id="tab-specialty" class="tab-content">
-            <div class="section-header">
-                <div class="section-icon"><i class="fas fa-stethoscope"></i></div>
-                <div>
-                    <div class="section-title">Specialty & Demographics</div>
-                    <div class="section-subtitle">HCP specialty distribution across segments</div>
-                </div>
+    <!-- ==================== TAB 7: SPECIALTY MIX ==================== -->
+    <div id="tab-specialty" class="tab-content">
+        <div class="section-header">
+            <div class="section-icon"><i class="fas fa-stethoscope"></i></div>
+            <div>
+                <div class="section-title">Specialty & Demographics</div>
+                <div class="section-subtitle">HCP specialty distribution across segments</div>
             </div>
+        </div>
 
-            <div class="grid-2">
-                <div class="card">
-                    <div class="chart-title">HCPs by Specialty and Segment (Stacked)</div>
-                    <div class="chart-container" style="height:300px"><canvas id="chart-spec-stack"></canvas></div>
-                </div>
-                <div class="card">
-                    <div class="chart-title">Specialty Composition (% within each specialty)</div>
-                    <div class="chart-container" style="height:300px"><canvas id="chart-spec-pct"></canvas></div>
-                </div>
+        <div class="grid-2">
+            <div class="card">
+                <div class="chart-title">HCPs by Specialty and Segment (Stacked)</div>
+                <div class="chart-container" style="height:300px"><canvas id="chart-spec-stack"></canvas></div>
+            </div>
+            <div class="card">
+                <div class="chart-title">Specialty Composition (% within each specialty)</div>
+                <div class="chart-container" style="height:300px"><canvas id="chart-spec-pct"></canvas></div>
             </div>
         </div>
+    </div>
 
 
 
-        <script src="app.js"></script>
+    <script src="app.js"></script>
 </body>
 
 </html>