File size: 9,182 Bytes
e93bfbd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MedicalAI Web Demo</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f4f8; color: #1a202c; padding: 2rem; }
.container { max-width: 800px; margin: 0 auto; }
h1 { font-size: 1.75rem; margin-bottom: 0.25rem; }
.subtitle { color: #4a5568; margin-bottom: 2rem; }
.card { background: #fff; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.card h2 { font-size: 1.1rem; margin-bottom: 1rem; color: #2b6cb0; }
label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem; color: #2d3748; }
input[type="file"], textarea, input[type="text"] { width: 100%; padding: 0.625rem; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.9rem; }
textarea { resize: vertical; min-height: 60px; font-family: inherit; }
button { background: #2b6cb0; color: #fff; border: none; padding: 0.625rem 1.5rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; margin-top: 0.75rem; }
button:hover { background: #2c5282; }
button:disabled { opacity: 0.6; cursor: not-allowed; }
.result { margin-top: 1rem; padding: 1rem; background: #f7fafc; border-radius: 8px; border: 1px solid #e2e8f0; min-height: 40px; white-space: pre-wrap; }
.result .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #718096; margin-bottom: 0.25rem; }
.result .value { font-size: 1rem; }
.badge { display: inline-block; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 4px; font-weight: 600; }
.badge.online { background: #c6f6d5; color: #22543d; }
.badge.offline { background: #fed7d7; color: #822727; }
.row { display: flex; gap: 1rem; align-items: flex-end; }
.row > * { flex: 1; }
.status-bar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.preview img { max-width: 100%; max-height: 240px; border-radius: 8px; margin-top: 0.5rem; }
.code { background: #1a202c; color: #e2e8f0; padding: 1rem; border-radius: 8px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.8rem; overflow-x: auto; }
.loading { display: inline-block; width: 16px; height: 16px; border: 2px solid #e2e8f0; border-top-color: #2b6cb0; border-radius: 50%; animation: spin 0.6s linear infinite; margin-right: 0.5rem; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
</style>
</head>
<body>
<div class="container">
<h1>MedicalAI Web Demo</h1>
<p class="subtitle">Connect your website to the MedicalAI API server</p>
<div class="status-bar" style="margin-bottom:1.5rem;">
<span id="healthBadge" class="badge offline">Checking API...</span>
<span id="modelInfo" style="font-size:0.85rem;color:#718096;"></span>
</div>
<div class="card">
<h2>Radiology Caption</h2>
<p style="font-size:0.85rem;color:#718096;margin-bottom:1rem;">Upload a chest X-ray and get an AI-generated radiology report.</p>
<label for="visionFile">X-ray Image</label>
<input type="file" id="visionFile" accept="image/*" />
<div id="visionPreview" class="preview"></div>
<button id="visionBtn" disabled>Analyze</button>
<div id="visionResult" class="result"><span style="color:#a0aec0;">Upload an image and click Analyze.</span></div>
</div>
<div class="card">
<h2>Symptom Check</h2>
<p style="font-size:0.85rem;color:#718096;margin-bottom:1rem;">Upload an X-ray with patient symptoms for diagnosis.</p>
<div class="row">
<div>
<label for="symptomFile">X-ray Image</label>
<input type="file" id="symptomFile" accept="image/*" />
<div id="symptomPreview" class="preview"></div>
</div>
<div>
<label for="symptoms">Symptoms / Clinical Indication</label>
<textarea id="symptoms" placeholder="e.g., shortness of breath, cough, fever..."></textarea>
</div>
</div>
<button id="symptomBtn" disabled>Diagnose</button>
<div id="symptomResult" class="result"><span style="color:#a0aec0;">Upload an image and enter symptoms.</span></div>
</div>
<div class="card">
<h2>How to connect your website</h2>
<p style="font-size:0.85rem;color:#718096;margin-bottom:1rem;">Use <code>fetch()</code> from JavaScript to call the API server running on your machine.</p>
<div class="code">// Example: Radiology Caption
const form = new FormData();
form.append('file', imageFile);
const res = await fetch('http://YOUR_SERVER:8000/api/vision', {
method: 'POST',
body: form,
});
const data = await res.json();
console.log(data.caption);
// Example: Symptom Check
const form2 = new FormData();
form2.append('file', imageFile);
form2.append('symptoms', 'cough, fever');
const res2 = await fetch('http://YOUR_SERVER:8000/api/symptom-check', {
method: 'POST',
body: form2,
});
const data2 = await res2.json();
console.log(data2.diagnosis, data2.confidence);</div>
</div>
</div>
<script>
const API_BASE = 'http://127.0.0.1:8000';
async function checkHealth() {
const badge = document.getElementById('healthBadge');
const info = document.getElementById('modelInfo');
try {
const res = await fetch(`${API_BASE}/health`);
if (!res.ok) throw new Error('Not OK');
const data = await res.json();
badge.className = 'badge online';
badge.textContent = 'API Online';
info.textContent = `Device: ${data.device} · Model: ${data.model_source}`;
document.getElementById('visionBtn').disabled = false;
document.getElementById('symptomBtn').disabled = false;
} catch {
badge.className = 'badge offline';
badge.textContent = 'API Offline';
info.textContent = 'Start the API server: python quantization.py --mode serve-api';
}
}
checkHealth();
function previewImage(input, previewId) {
const preview = document.getElementById(previewId);
preview.innerHTML = '';
if (input.files && input.files[0]) {
const img = document.createElement('img');
img.src = URL.createObjectURL(input.files[0]);
preview.appendChild(img);
}
}
document.getElementById('visionFile').addEventListener('change', function() {
previewImage(this, 'visionPreview');
});
document.getElementById('symptomFile').addEventListener('change', function() {
previewImage(this, 'symptomPreview');
});
async function callEndpoint(endpoint, fileInput, extraFields, resultId) {
const btn = resultId === 'visionResult' ? 'visionBtn' : 'symptomBtn';
const btnEl = document.getElementById(btn);
const resultEl = document.getElementById(resultId);
if (!fileInput.files || !fileInput.files[0]) {
resultEl.innerHTML = '<span style="color:#e53e3e;">Please select an image.</span>';
return;
}
btnEl.disabled = true;
btnEl.innerHTML = '<span class="loading"></span> Analyzing...';
resultEl.innerHTML = '<span class="loading"></span> Running inference...';
const form = new FormData();
form.append('file', fileInput.files[0]);
for (const [key, val] of Object.entries(extraFields)) {
form.append(key, val);
}
try {
const res = await fetch(`${API_BASE}${endpoint}`, { method: 'POST', body: form });
const data = await res.json();
if (!res.ok) throw new Error(data.detail || 'Request failed');
if (endpoint === '/api/vision') {
resultEl.innerHTML = `<div><div class="label">Radiology Caption</div><div class="value">${data.caption}</div><div style="font-size:0.75rem;color:#a0aec0;margin-top:0.5rem;">${data.inference_time_ms} ms</div></div>`;
} else {
resultEl.innerHTML = `<div><div class="label">Diagnosis</div><div class="value">${data.diagnosis}</div><div style="margin-top:0.5rem;"><span class="label">Confidence</span> <span class="value">${(data.confidence * 100).toFixed(1)}%</span></div><div style="font-size:0.75rem;color:#a0aec0;margin-top:0.5rem;">${data.inference_time_ms} ms</div></div>`;
}
} catch (err) {
resultEl.innerHTML = `<span style="color:#e53e3e;">Error: ${err.message}</span>`;
} finally {
btnEl.disabled = false;
btnEl.textContent = endpoint === '/api/vision' ? 'Analyze' : 'Diagnose';
}
}
document.getElementById('visionBtn').addEventListener('click', () => {
callEndpoint('/api/vision', document.getElementById('visionFile'), {}, 'visionResult');
});
document.getElementById('symptomBtn').addEventListener('click', () => {
const symptoms = document.getElementById('symptoms').value || 'No symptoms provided';
callEndpoint('/api/symptom-check', document.getElementById('symptomFile'), { symptoms }, 'symptomResult');
});
</script>
</body>
</html>
|