Spaces:

mobadara
/

precision-diagnostics-xai

Sleeping

App Files Files Community

mobadara commited on Jun 1

Commit

e78cf24

1 Parent(s): ed483bc

implemented the dashboard

Browse files

Files changed (7) hide show

frontend/index.html +45 -3
frontend/public/apple-touch-icon.svg +6 -0
frontend/public/manifest.json +23 -0
frontend/public/social-preview.png +0 -0
frontend/public/sw.js +40 -0
frontend/src/Dashboard.jsx +260 -15
frontend/src/LoginScreen.jsx +1 -1

frontend/index.html CHANGED Viewed

@@ -1,13 +1,55 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>frontend</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>

 <!doctype html>
 <html lang="en">
   <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="description" content="Pneumonia Vision AI — diagnostic assistance using explainable AI for chest X-rays." />
+    <meta name="robots" content="index,follow" />
+    <!-- Mobile / PWA -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="Pneumonia Vision AI" />
+    <meta name="theme-color" content="#0b5cff" />
+    <link rel="manifest" href="/manifest.json" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.svg" sizes="180x180" />
+    <link rel="icon" href="/apple-touch-icon.svg" sizes="180x180" />
+    <!-- Social / SEO -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Pneumonia Vision AI" />
+    <meta property="og:description" content="Explainable AI for chest X-ray diagnosis and triage." />
+    <meta property="og:url" content="/" />
+    <meta property="og:image" content="/social-preview.png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Pneumonia Vision AI" />
+    <meta name="twitter:description" content="Explainable AI for chest X-ray diagnosis and triage." />
+    <title>Pneumonia Vision AI</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+          navigator.serviceWorker.register('/sw.js')
+            .then(reg => console.log('Service worker registered:', reg))
+            .catch(err => console.warn('SW registration failed:', err));
+        });
+      }
+      // Capture install prompt for later use
+      window.deferredPrompt = null;
+      window.addEventListener('beforeinstallprompt', (e) => {
+        e.preventDefault();
+        window.deferredPrompt = e;
+        console.log('beforeinstallprompt captured; call window.deferredPrompt.prompt() to show install dialog.');
+      });
+    </script>
   </body>
 </html>

frontend/public/apple-touch-icon.svg ADDED Viewed

frontend/public/manifest.json ADDED Viewed

	@@ -0,0 +1,23 @@

+{
+  "name": "Pneumonia Vision AI",
+  "short_name": "PneumoniaAI",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#0b5cff",
+  "description": "Explainable AI-assisted chest X-ray triage and diagnostics.",
+  "icons": [
+    {
+      "src": "/apple-touch-icon.svg",
+      "sizes": "180x180",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/social-preview.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}

frontend/public/social-preview.png ADDED Viewed

frontend/public/sw.js ADDED Viewed

	@@ -0,0 +1,40 @@

+const CACHE_NAME = 'pneumonia-ai-v1';
+const PRECACHE_URLS = [
+  '/',
+  '/index.html',
+  '/manifest.json',
+  '/apple-touch-icon.svg',
+  '/favicon.svg',
+  '/social-preview.png'
+];
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then(cache => cache.addAll(PRECACHE_URLS))
+  );
+  self.skipWaiting();
+});
+self.addEventListener('activate', event => {
+  event.waitUntil(
+    caches.keys().then(keys => Promise.all(
+      keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k))
+    ))
+  );
+  self.clients.claim();
+});
+self.addEventListener('fetch', event => {
+  if (event.request.method !== 'GET') return;
+  event.respondWith(
+    caches.match(event.request).then(response => {
+      if (response) return response;
+      return fetch(event.request).then(networkRes => {
+        return caches.open(CACHE_NAME).then(cache => {
+          cache.put(event.request, networkRes.clone());
+          return networkRes;
+        });
+      }).catch(() => caches.match('/index.html'));
+    })
+  );
+});

frontend/src/Dashboard.jsx CHANGED Viewed

@@ -1,34 +1,279 @@
-import React from 'react';
 import { useAuth } from './useAuth';
-import { LogOut, Activity } from 'lucide-react';
 export default function Dashboard() {
     const { user, logout } = useAuth();
     return (
-        <div className="min-h-screen bg-gray-50">
-            {/* Top Navigation Bar */}
             <nav className="bg-navy text-white p-4 shadow-md flex justify-between items-center">
                 <div className="flex items-center gap-3">
                     <Activity className="w-6 h-6 text-trust-cyan" />
-                    <span className="font-bold tracking-wide">DEBUTRON LAB</span>
                 </div>
                 <div className="flex items-center gap-6">
-                    <span className="text-sm text-gray-200">Welcome, {user?.name}</span>
-                    <button
-                        onClick={logout}
-                        className="flex items-center gap-2 hover:text-red-300 transition-colors text-sm font-medium"
-                    >
                         <LogOut className="w-4 h-4" /> Logout
                     </button>
                 </div>
             </nav>
-            {/* Main Content Area */}
-            <main className="max-w-7xl mx-auto p-6 mt-8">
-                <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-12 text-center">
-                    <h2 className="text-2xl font-semibold text-navy mb-2">Diagnostic Engine Active</h2>
-                    <p className="text-gray-500">The main X-Ray upload interface will go here.</p>
                 </div>
             </main>
         </div>

+import React, { useState, useRef } from 'react';
+import axios from 'axios';
 import { useAuth } from './useAuth';
+import { LogOut, Activity, UploadCloud, XCircle, CheckCircle2, AlertTriangle, Loader2, ThumbsUp, ThumbsDown } from 'lucide-react';
 export default function Dashboard() {
     const { user, logout } = useAuth();
+    // UI State
+    const [dragActive, setDragActive] = useState(false);
+    const [selectedFile, setSelectedFile] = useState(null);
+    const [previewUrl, setPreviewUrl] = useState(null);
+    // API State
+    const [loading, setLoading] = useState(false);
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState(null);
+    // Feedback State
+    const [feedbackStatus, setFeedbackStatus] = useState(null); // null, 'loading', 'success', 'error'
+    const inputRef = useRef(null);
+    // --- Drag and Drop Handlers ---
+    const handleDrag = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.type === "dragenter" || e.type === "dragover") {
+            setDragActive(true);
+        } else if (e.type === "dragleave") {
+            setDragActive(false);
+        }
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragActive(false);
+        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+            processFile(e.dataTransfer.files[0]);
+        }
+    };
+    const handleChange = (e) => {
+        e.preventDefault();
+        if (e.target.files && e.target.files[0]) {
+            processFile(e.target.files[0]);
+        }
+    };
+    const processFile = (file) => {
+        if (!file.type.startsWith("image/")) {
+            setError("Please upload a valid image file (JPEG/PNG).");
+            return;
+        }
+        setError(null);
+        setResult(null);
+        setFeedbackStatus(null);
+        setSelectedFile(file);
+        setPreviewUrl(URL.createObjectURL(file));
+    };
+    const clearSelection = () => {
+        setSelectedFile(null);
+        setPreviewUrl(null);
+        setResult(null);
+        setError(null);
+        setFeedbackStatus(null);
+        if (inputRef.current) inputRef.current.value = "";
+    };
+    // --- API Integration ---
+    const analyzeXRay = async () => {
+        if (!selectedFile) return;
+        setLoading(true);
+        setError(null);
+        setFeedbackStatus(null);
+        const formData = new FormData();
+        formData.append("file", selectedFile);
+        try {
+            const API_URL = import.meta.env.VITE_API_URL || "http://localhost:8000";
+            const response = await axios.post(`${API_URL}/api/v1/predict`, formData, {
+                headers: { "Content-Type": "multipart/form-data" }
+            });
+            setResult(response.data);
+        } catch (err) {
+            console.error("API Error:", err);
+            setError("Failed to connect to the diagnostic engine. Is the Hugging Face space running?");
+        } finally {
+            setLoading(false);
+        }
+    };
+    // --- A/B Testing Feedback Loop ---
+    const submitFeedback = async (isAgree) => {
+        if (!result?.record_id) return;
+        setFeedbackStatus('loading');
+        try {
+            const API_URL = import.meta.env.VITE_API_URL || "http://localhost:8000";
+            // If the doctor agrees, override is FALSE. If they disagree, override is TRUE.
+            const payload = {
+                physician_override: !isAgree,
+                notes: isAgree ? "Agreed with AI" : "Physician disagreed with AI diagnosis"
+            };
+            await axios.put(`${API_URL}/api/v1/override/${result.record_id}`, payload);
+            setFeedbackStatus('success');
+        } catch (err) {
+            console.error("Feedback Error:", err);
+            setFeedbackStatus('error');
+        }
+    };
     return (
+        <div className="min-h-screen bg-gray-50 font-sans">
             <nav className="bg-navy text-white p-4 shadow-md flex justify-between items-center">
                 <div className="flex items-center gap-3">
                     <Activity className="w-6 h-6 text-trust-cyan" />
+                    <span className="font-bold tracking-wide">PNEUMONIA VISION AI</span>
                 </div>
                 <div className="flex items-center gap-6">
+                    <span className="text-sm text-gray-200">Dr. {user?.name.replace('Dr. ', '')}</span>
+                    <button onClick={logout} className="flex items-center gap-2 hover:text-red-300 transition-colors text-sm font-medium">
                         <LogOut className="w-4 h-4" /> Logout
                     </button>
                 </div>
             </nav>
+            <main className="max-w-5xl mx-auto p-6 mt-8">
+                <div className="mb-8">
+                    <h1 className="text-3xl font-bold text-navy">Diagnostic Workbench</h1>
+                    <p className="text-gray-500 mt-2">Upload a pediatric chest X-Ray for automated pneumonia screening.</p>
+                </div>
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                    {/* Left Column: Upload & Preview */}
+                    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex flex-col h-full">
+                        <h2 className="text-lg font-semibold text-gray-800 mb-4">Patient Scan</h2>
+                        {!previewUrl ? (
+                            <div
+                                className={`flex-1 relative border-2 border-dashed rounded-xl p-12 flex flex-col items-center justify-center transition-all ${dragActive ? 'border-trust-cyan bg-blue-50' : 'border-gray-300 bg-gray-50 hover:bg-gray-100'}`}
+                                onDragEnter={handleDrag}
+                                onDragLeave={handleDrag}
+                                onDragOver={handleDrag}
+                                onDrop={handleDrop}
+                            >
+                                <input
+                                    ref={inputRef}
+                                    type="file"
+                                    accept="image/*"
+                                    onChange={handleChange}
+                                    className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                                />
+                                <UploadCloud className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+                                <p className="text-gray-600 font-medium">Drag & Drop X-Ray image here</p>
+                                <p className="text-gray-400 text-sm mt-1">or click to browse files</p>
+                            </div>
+                        ) : (
+                            <div className="flex-1 relative rounded-xl overflow-hidden border border-gray-200 bg-black flex justify-center items-center">
+                                <img src={previewUrl} alt="X-Ray Preview" className="max-h-full max-w-full object-contain" />
+                                <button
+                                    onClick={clearSelection}
+                                    className="absolute top-2 right-2 p-1.5 bg-black/50 text-white rounded-full hover:bg-red-500 transition-colors"
+                                >
+                                    <XCircle className="w-6 h-6" />
+                                </button>
+                            </div>
+                        )}
+                        {error && (
+                            <div className="mt-4 p-3 bg-red-50 text-critical-red flex items-center gap-2 rounded-md border border-red-100 text-sm">
+                                <AlertTriangle className="w-5 h-5 flex-shrink-0" />
+                                <span>{error}</span>
+                            </div>
+                        )}
+                        <button
+                            onClick={analyzeXRay}
+                            disabled={!selectedFile || loading}
+                            className={`w-full mt-6 py-3 rounded-lg font-semibold text-white transition-all flex justify-center items-center gap-2 ${!selectedFile || loading ? 'bg-gray-300 cursor-not-allowed' : 'bg-clinical-teal hover:bg-teal-800 shadow-md'}`}
+                        >
+                            {loading ? (
+                                <><Loader2 className="w-5 h-5 animate-spin" /> Analyzing Scan...</>
+                            ) : (
+                                "Run AI Diagnostics"
+                            )}
+                        </button>
+                    </div>
+                    {/* Right Column: AI Results */}
+                    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex flex-col h-full">
+                        <h2 className="text-lg font-semibold text-gray-800 mb-4">AI Analysis Report</h2>
+                        {!result && !loading ? (
+                            <div className="flex-1 flex flex-col items-center justify-center text-gray-400">
+                                <Activity className="w-16 h-16 mb-4 opacity-20" />
+                                <p>Awaiting scan data...</p>
+                            </div>
+                        ) : loading ? (
+                            <div className="flex-1 flex flex-col items-center justify-center text-clinical-teal">
+                                <div className="w-16 h-16 border-4 border-teal-100 border-t-clinical-teal rounded-full animate-spin mb-4"></div>
+                                <p className="font-medium animate-pulse">Running DenseNet121 Inference...</p>
+                            </div>
+                        ) : result && (
+                            <div className="animate-in fade-in slide-in-from-bottom-4 duration-500 flex flex-col h-full">
+                                {/* Status Badge */}
+                                <div className={`flex items-center gap-3 p-4 rounded-lg mb-6 ${result.prediction === 'PNEUMONIA' ? 'bg-red-50 border border-red-100' : 'bg-green-50 border border-green-100'}`}>
+                                    {result.prediction === 'PNEUMONIA' ? (
+                                        <AlertTriangle className="w-8 h-8 text-critical-red" />
+                                    ) : (
+                                        <CheckCircle2 className="w-8 h-8 text-surgical-mint" />
+                                    )}
+                                    <div>
+                                        <p className="text-sm font-medium text-gray-500 uppercase tracking-wider">Detection Result</p>
+                                        <h3 className={`text-2xl font-bold ${result.prediction === 'PNEUMONIA' ? 'text-critical-red' : 'text-surgical-mint'}`}>
+                                            {result.prediction}
+                                        </h3>
+                                    </div>
+                                    <div className="ml-auto text-right">
+                                        <p className="text-sm text-gray-500">Confidence</p>
+                                        <p className="text-xl font-bold text-gray-800">{(result.confidence * 100).toFixed(1)}%</p>
+                                    </div>
+                                </div>
+                                {/* Heatmap Image */}
+                                <div className="mb-6">
+                                    <p className="text-sm font-medium text-gray-700 mb-2">Grad-CAM Explainability Heatmap</p>
+                                    <div className="rounded-xl overflow-hidden border border-gray-200 bg-black flex justify-center items-center h-56">
+                                        <img src={result.heatmap_url} alt="AI Heatmap" className="max-h-full max-w-full object-contain" />
+                                    </div>
+                                </div>
+                                {/* The New Feedback Loop */}
+                                <div className="mt-auto border-t border-gray-100 pt-4">
+                                    <p className="text-sm font-medium text-gray-700 mb-3 text-center">Do you agree with this AI diagnosis?</p>
+                                    {feedbackStatus === 'success' ? (
+                                        <div className="flex items-center justify-center gap-2 py-2 px-4 bg-green-50 text-surgical-mint rounded-lg border border-green-100">
+                                            <CheckCircle2 className="w-5 h-5" />
+                                            <span className="font-medium">Feedback recorded. Thank you.</span>
+                                        </div>
+                                    ) : (
+                                        <div className="flex gap-4 justify-center">
+                                            <button
+                                                onClick={() => submitFeedback(true)}
+                                                disabled={feedbackStatus === 'loading'}
+                                                className="flex-1 flex items-center justify-center gap-2 py-2.5 px-4 border border-green-200 bg-green-50 text-green-700 rounded-lg hover:bg-green-100 transition-colors font-semibold disabled:opacity-50"
+                                            >
+                                                <ThumbsUp className="w-4 h-4" /> Agree
+                                            </button>
+                                            <button
+                                                onClick={() => submitFeedback(false)}
+                                                disabled={feedbackStatus === 'loading'}
+                                                className="flex-1 flex items-center justify-center gap-2 py-2.5 px-4 border border-red-200 bg-red-50 text-red-700 rounded-lg hover:bg-red-100 transition-colors font-semibold disabled:opacity-50"
+                                            >
+                                                <ThumbsDown className="w-4 h-4" /> Disagree
+                                            </button>
+                                        </div>
+                                    )}
+                                    {feedbackStatus === 'error' && (
+                                        <p className="text-xs text-critical-red mt-2 text-center">Failed to connect to database.</p>
+                                    )}
+                                </div>
+                                <div className="mt-4 text-xs text-gray-400 font-mono text-center">
+                                    Record ID: {result.record_id}
+                                </div>
+                            </div>
+                        )}
+                    </div>
                 </div>
             </main>
         </div>

frontend/src/LoginScreen.jsx CHANGED Viewed

@@ -21,7 +21,7 @@ export default function LoginScreen() {
                     <div className="bg-navy p-3 rounded-full mb-4">
                         <Activity className="text-white w-8 h-8" />
                     </div>
-                    <h2 className="text-2xl font-bold text-navy">DEBUTRON LAB</h2>
                     <p className="text-gray-500 text-sm mt-1">Precision Diagnostics Portal</p>
                 </div>

                     <div className="bg-navy p-3 rounded-full mb-4">
                         <Activity className="text-white w-8 h-8" />
                     </div>
+                    <h2 className="text-2xl font-bold text-navy">PNEUMONIA VISION AI</h2>
                     <p className="text-gray-500 text-sm mt-1">Precision Diagnostics Portal</p>
                 </div>