Spaces:

lablab-ai-amd-developer-hackathon
/

rustvital-amd

Running

App Files Files Community

brainworm2024 commited on 2 days ago

Commit

f21e0aa

1 Parent(s): b7e0aa2

Fix UI: switch to plain fetch, works now

Browse files

Files changed (1) hide show

static/index.html +62 -58

static/index.html CHANGED Viewed

@@ -5,16 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>RustVital‑AMD | Zero‑Trust Medical AI</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
     <style>
-        .htmx-indicator { display: none; }
-        .htmx-request .htmx-indicator { display: inline; }
-        .htmx-request.htmx-indicator { display: inline; }
         .pii-highlight { background-color: #fee2e2; padding: 0 2px; border-radius: 3px; font-weight: bold; }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen flex flex-col items-center p-4">
     <div class="max-w-3xl w-full">
         <div id="device-banner" class="bg-purple-100 text-purple-800 px-4 py-2 rounded-lg mb-2 text-sm text-center font-medium"></div>
         <script>
             fetch('/status')
@@ -35,7 +32,7 @@
             <div class="flex flex-col md:flex-row gap-4">
                 <div class="flex-1">
                     <label class="block text-sm font-medium text-gray-700 mb-1">Original Note</label>
-                    <textarea id="patient-note" name="patient_note" rows="5"
                         class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                         placeholder="Enter patient note...">Patient John Smith, 45 yo, chest pain</textarea>
                 </div>
@@ -45,14 +42,9 @@
                 </div>
             </div>
-            <button hx-post="/triage" hx-trigger="click" hx-target="#result" hx-indicator="#spinner"
-                hx-vals='{"patient_note": document.getElementById("patient-note").value, "consent_hash": "abc123"}'
                 class="mt-4 w-full bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 rounded-lg transition flex items-center justify-center gap-2">
-                <span>Start Triage</span>
-                <svg id="spinner" class="htmx-indicator animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-                </svg>
             </button>
         </div>
@@ -64,58 +56,70 @@
             return text.replace(/\[([A-Z_]+)_(\d+)\]/g, '<span class="pii-highlight">[$1_$2]</span>');
         }
-        document.body.addEventListener('htmx:afterOnLoad', function(evt) {
-            if (evt.detail.target.id === 'result' && evt.detail.xhr.status === 200) {
-                try {
-                    const data = JSON.parse(evt.detail.xhr.responseText);
-                    const redactedDiv = document.getElementById('redacted-preview');
-                    redactedDiv.classList.remove('hidden');
-                    document.getElementById('redacted-text').innerHTML = highlightPlaceholders(data.redacted_prompt);
-                    const stepsHtml = data.agent_steps.map(step => `
-                        <div class="flex items-center gap-2 text-sm">
-                            <span class="px-2 py-1 bg-green-100 text-green-700 rounded-full">✅ ${step.name}</span>
-                            <span class="text-gray-500">${step.reasoning} (${step.duration_ms}ms)</span>
-                        </div>
-                    `).join('');
-                    const piiHtml = data.pii_map.map(p => `
-                        <li class="text-sm">🔴 <strong>${p.original}</strong> → <code>${p.placeholder}</code></li>
-                    `).join('');
-                    document.getElementById('result').innerHTML = `
-                        <div class="bg-white rounded-2xl shadow-xl p-6 space-y-4">
-                            <div class="text-sm text-purple-700 bg-purple-50 px-3 py-1 rounded-full inline-block">
-                                ${data.device_info} · Model: Qwen2.5-${data.model_used}
-                            </div>
-                            <div>
-                                <h3 class="font-semibold text-gray-700 mb-2">Agent Progress</h3>
-                                <div class="space-y-1">${stepsHtml}</div>
-                            </div>
-                            <div>
-                                <h3 class="font-semibold text-gray-700">Triage Result</h3>
-                                <div class="bg-purple-50 p-3 rounded-lg text-lg font-medium">${data.triage_result}</div>
-                            </div>
-                            <div>
-                                <h3 class="font-semibold text-gray-700">PII Redaction Map</h3>
-                                <ul class="list-disc list-inside text-sm text-gray-600">${piiHtml}</ul>
-                            </div>
-                            <div>
-                                <h3 class="font-semibold text-gray-700">Redaction Proof (SHA‑256)</h3>
-                                <code class="text-xs bg-gray-100 p-2 rounded block mt-1">${data.redaction_proof}</code>
-                            </div>
-                            <div>
-                                <h3 class="font-semibold text-gray-700">On‑Chain Audit</h3>
-                                <div class="text-sm">
-                                    <p><strong>CID:</strong> <code>${data.cid}</code></p>
-                                    <p><strong>Transaction:</strong> <a href="https://sepolia.basescan.org/tx/${data.transaction_hash}" target="_blank" class="text-purple-600 underline">${data.transaction_hash}</a></p>
-                                </div>
                             </div>
                         </div>
-                    `;
-                } catch(e) {}
             }
-        });
     </script>
 </body>
 </html>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>RustVital‑AMD | Zero‑Trust Medical AI</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
         .pii-highlight { background-color: #fee2e2; padding: 0 2px; border-radius: 3px; font-weight: bold; }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen flex flex-col items-center p-4">
     <div class="max-w-3xl w-full">
+        <!-- Device banner -->
         <div id="device-banner" class="bg-purple-100 text-purple-800 px-4 py-2 rounded-lg mb-2 text-sm text-center font-medium"></div>
         <script>
             fetch('/status')
             <div class="flex flex-col md:flex-row gap-4">
                 <div class="flex-1">
                     <label class="block text-sm font-medium text-gray-700 mb-1">Original Note</label>
+                    <textarea id="patient-note" rows="5"
                         class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                         placeholder="Enter patient note...">Patient John Smith, 45 yo, chest pain</textarea>
                 </div>
                 </div>
             </div>
+            <button onclick="runTriage()"
                 class="mt-4 w-full bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 rounded-lg transition flex items-center justify-center gap-2">
+                Start Triage
             </button>
         </div>
             return text.replace(/\[([A-Z_]+)_(\d+)\]/g, '<span class="pii-highlight">[$1_$2]</span>');
         }
+        async function runTriage() {
+            const note = document.getElementById('patient-note').value;
+            const resultDiv = document.getElementById('result');
+            resultDiv.innerHTML = '<div class="text-center text-purple-500 py-4">Processing...</div>';
+            try {
+                const response = await fetch('/triage', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ patient_note: note, consent_hash: 'abc123' })
+                });
+                if (!response.ok) throw new Error('Server error');
+                const data = await response.json();
+                // Show redacted preview
+                const redactedDiv = document.getElementById('redacted-preview');
+                redactedDiv.classList.remove('hidden');
+                document.getElementById('redacted-text').innerHTML = highlightPlaceholders(data.redacted_prompt);
+                const stepsHtml = data.agent_steps.map(step => `
+                    <div class="flex items-center gap-2 text-sm">
+                        <span class="px-2 py-1 bg-green-100 text-green-700 rounded-full">✅ ${step.name}</span>
+                        <span class="text-gray-500">${step.reasoning} (${step.duration_ms}ms)</span>
+                    </div>
+                `).join('');
+                const piiHtml = data.pii_map.map(p => `
+                    <li class="text-sm">🔴 <strong>${p.original}</strong> → <code>${p.placeholder}</code></li>
+                `).join('');
+                resultDiv.innerHTML = `
+                    <div class="bg-white rounded-2xl shadow-xl p-6 space-y-4">
+                        <div class="text-sm text-purple-700 bg-purple-50 px-3 py-1 rounded-full inline-block">
+                            ${data.device_info} · Model: Qwen2.5-${data.model_used}
+                        </div>
+                        <div>
+                            <h3 class="font-semibold text-gray-700 mb-2">Agent Progress</h3>
+                            <div class="space-y-1">${stepsHtml}</div>
+                        </div>
+                        <div>
+                            <h3 class="font-semibold text-gray-700">Triage Result</h3>
+                            <div class="bg-purple-50 p-3 rounded-lg text-lg font-medium">${data.triage_result}</div>
+                        </div>
+                        <div>
+                            <h3 class="font-semibold text-gray-700">PII Redaction Map</h3>
+                            <ul class="list-disc list-inside text-sm text-gray-600">${piiHtml}</ul>
+                        </div>
+                        <div>
+                            <h3 class="font-semibold text-gray-700">Redaction Proof (SHA‑256)</h3>
+                            <code class="text-xs bg-gray-100 p-2 rounded block mt-1">${data.redaction_proof}</code>
+                        </div>
+                        <div>
+                            <h3 class="font-semibold text-gray-700">On‑Chain Audit</h3>
+                            <div class="text-sm">
+                                <p><strong>CID:</strong> <code>${data.cid}</code></p>
+                                <p><strong>Transaction:</strong> <a href="https://sepolia.basescan.org/tx/${data.transaction_hash}" target="_blank" class="text-purple-600 underline">${data.transaction_hash}</a></p>
                             </div>
                         </div>
+                    </div>
+                `;
+            } catch (e) {
+                resultDiv.innerHTML = `<div class="bg-red-100 text-red-700 p-4 rounded-lg">Error: ${e.message}</div>`;
             }
+        }
     </script>
 </body>
 </html>