diff --git a/analysis/INTEGRATION_GUIDE.md b/analysis/INTEGRATION_GUIDE.md new file mode 100644 index 0000000..92b72be --- /dev/null +++ b/analysis/INTEGRATION_GUIDE.md @@ -0,0 +1,402 @@ +# Bicorder Classifier Integration Guide + +## Overview + +This guide explains how to integrate the cluster classification system into the Bicorder web application to provide: + +1. **Real-time cluster prediction** as users fill out diagnostics +2. **Smart form selection** (short vs. long form based on classification confidence) +3. **Visual feedback** showing protocol family positioning + +## Design Philosophy + +**Version-based compatibility**: The model includes a `bicorder_version` field. The classifier checks that versions match. When bicorder.json structure changes: +1. Increment the version number in bicorder.json +2. Retrain the model with `python3 export_model_for_js.py` +3. The new model will have the updated version + +This ensures the web app and model stay in sync without complex backward compatibility. + +## Files + +- `bicorder_model.json` - Trained model parameters (5KB, embed in app) +- `bicorder-classifier.js` - JavaScript implementation +- `bicorder-classifier.d.ts` - TypeScript type definitions + +## Quick Start + +### 1. Copy Model File + +Copy `bicorder_model.json` to your web app's public/static assets: + +```bash +cp bicorder_model.json ../path/to/bicorder/public/ +``` + +### 2. Install Classifier + +Copy the JavaScript module to your source directory: + +```bash +cp bicorder-classifier.js ../path/to/bicorder/src/lib/ +cp bicorder-classifier.d.ts ../path/to/bicorder/src/lib/ +``` + +### 3. Basic Usage + +```javascript +import { loadClassifier } from './lib/bicorder-classifier.js'; + +// Load model once at app startup +const classifier = await loadClassifier('/bicorder_model.json'); + +// As user fills in diagnostic form +function onDimensionChange(dimensionName, value) { + const currentRatings = getCurrentFormValues(); // Your form state + + const result = classifier.predict(currentRatings); + + console.log(`Cluster: ${result.clusterName}`); + console.log(`Confidence: ${result.confidence}%`); + console.log(`Recommend: ${result.recommendedForm} form`); + + updateUI(result); +} +``` + +## Integration Patterns + +### Pattern 1: Progressive Classification Display + +Show classification results as the user fills out the form: + +```javascript +// React/Svelte component example +function DiagnosticForm() { + const [ratings, setRatings] = useState({}); + const [classification, setClassification] = useState(null); + + useEffect(() => { + if (Object.keys(ratings).length > 0) { + const result = classifier.predict(ratings); + setClassification(result); + } + }, [ratings]); + + return ( +
+ Need {assessment.keyDimensionsTotal - assessment.keyDimensionsProvided} more + key dimensions for reliable classification ({assessment.coverage}% complete) +
+