| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>EthioDocs Medical AI</title> |
| <style> |
| body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; background-color: #f0f2f5; } |
| .container { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } |
| h1 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; } |
| #input { width: 100%; height: 120px; padding: 15px; border: 2px solid #ddd; border-radius: 10px; font-size: 16px; margin: 15px 0; box-sizing: border-box; } |
| #status { color: #7f8c8d; font-style: italic; margin-bottom: 10px; } |
| button { background: #3498db; color: white; border: none; padding: 12px 25px; cursor: pointer; border-radius: 8px; font-weight: bold; transition: 0.3s; } |
| button:hover { background: #2980b9; } |
| button:disabled { background: #bdc3c7; cursor: not-allowed; } |
| #result { background: #ecf0f1; padding: 20px; border-radius: 10px; margin-top: 20px; white-space: pre-wrap; color: #2c3e50; border-left: 6px solid #3498db; } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>🏥 EthioDocs Medical Assistant</h1> |
| <p>A Grade 10 AI Project by Daniel (WebGPU Powered)</p> |
| |
| <div id="status">Status: Waiting to initialize...</div> |
| <button id="init-btn">Start Medical Engine</button> |
| |
| <hr> |
| |
| <textarea id="input" placeholder="Example: I have a persistent cough and a fever of 38°C. What should I do?"></textarea> |
| <button id="send-btn" disabled>Get Medical Advice</button> |
| |
| <div id="result">The diagnosis will appear here after initialization.</div> |
| </div> |
|
|
| <script type="module"> |
| import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0'; |
| |
| let generator; |
| const status = document.getElementById('status'); |
| const initBtn = document.getElementById('init-btn'); |
| const sendBtn = document.getElementById('send-btn'); |
| |
| initBtn.onclick = async () => { |
| initBtn.disabled = true; |
| status.innerText = "Status: Downloading Model (4.5GB)... This may take 2-5 minutes."; |
| |
| try { |
| |
| generator = await pipeline('text-generation', 'danosethrus/Medical-Qwen-2B-Ethiopia', { |
| device: 'webgpu', |
| }); |
| status.innerText = "Status: ✅ Ready! Model running on your local GPU."; |
| sendBtn.disabled = false; |
| } catch (err) { |
| status.innerText = "Status: ❌ Error. Make sure you're using Chrome/Edge and have WebGPU enabled."; |
| console.error(err); |
| } |
| }; |
| |
| sendBtn.onclick = async () => { |
| const text = document.getElementById('input').value; |
| if(!text) return; |
| |
| status.innerText = "Status: AI is diagnosing..."; |
| const output = await generator(text, { |
| max_new_tokens: 256, |
| temperature: 0.7, |
| do_sample: true |
| }); |
| |
| document.getElementById('result').innerText = output[0].generated_text; |
| status.innerText = "Status: ✅ Ready."; |
| }; |
| </script> |
| </body> |
| </html> |
