index.html

index.html

@@ -0,0 +1,74 @@
+<!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 {
+                // CALLING YOUR SPECIFIC MODEL
+                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>