Spaces:
Running
Running
Here is your upgraded and precision-enhanced version of the prompt, transformed into a maximally detailed engineering blueprint request that will produce much longer, richer output when pasted into ChatGPT: Act like a senior full-stack developer, AI systems architect, and healthcare software compliance expert. You specialize in building clinical-grade AI interfaces using Retrieval Augmented Generation (RAG), structured agent workflows, and progressive web application (PWA) technologies. You have deep experience with React, Tailwind, LangChain, LangGraph, Supabase (pgvector), and clinical user experience design. You are now tasked with producing a fully detailed, production-ready system architecture and implementation plan for “NelsonGPT” — a PWA that functions as an AI-powered pediatric medical assistant. This app will replicate the ChatGPT mobile experience but is specifically tailored for pediatric clinicians, residents, and students. It integrates structured RAG pipelines using the Nelson Textbook of Pediatrics as its core evidence base and supports real-time clinical tools like dosage calculators and emergency lookups. Follow this structured, step-by-step instruction set: Step 1 - App Identity, Value Proposition & Clinical Use Case Mapping - Define NelsonGPT's brand identity, tagline, and key differentiators from general AI assistants. - Identify its primary clinical audience segments: pediatricians, residents, interns, final-year med students. - List and elaborate on its top 5 use cases, including: 1. Symptom-to-diagnosis reasoning 2. Weight-based pediatric drug dosage guidance 3. Emergency protocol retrieval (e.g., neonatal resuscitation, anaphylaxis) 4. Developmental milestone tracking 5. Growth chart interpretation Step 2 - UI/UX Architecture & Dark Mode Interface Design - Describe the full React + Tailwind UI hierarchy for a mobile-first, fullscreen app replicating the ChatGPT layout. - Include: - Sticky top navbar with logo, dropdown model selector - Central scrollable chat window (supports markdown, citation toggles) - Bottom persistent tab bar with 4 icons: New Chat, History, Settings, About - Chat interface with rounded input, paper plane icon, microphone placeholder - Smooth typing animation and assistant message fade-in - Toggle switches for timestamps and inline citation view - Apply the dark mode theme palette exactly: - Background: #1e1e1e - Chat container: #121212 - User message bubble: #2a2a2a - Assistant messages: glowing dark gray - Text: #f2f2f2 - Code blocks: dark slate with syntax highlighting (Prism.js or Shiki) Step 3 - PWA Capabilities & App Shell Optimization - Define how `vite-plugin-pwa` will be used to generate the manifest and register service workers. - Create full `manifest.json` with name, short_name, theme_color, icons, and `"display": "standalone"`. - Implement a custom `service-worker.js` for: - Pre-caching static assets - Cache-first for assets, network-first for API - Offline fallback (graceful degraded UI) - Design a loading splash screen with bold NelsonGPT text (centered), sans-serif font, minimal animation, and no logos. Step 4 - Backend & AI Stack Integration (LangChain + LangGraph) - Describe how user queries flow through the stack: 1. React frontend collects query 2. Embedding generated via Hugging Face model 3. Query matched with Supabase vector DB (pgvector extension) 4. LangChain fetches top 3–5 textbook chunks 5. LangGraph routes query through a multi-node workflow 6. Gemini (optional) re-ranks or validates context 7. Mistral LLM generates output 8. Response is returned with inline citations (e.g., “Nelson, pg. 455”) - Illustrate the full LangGraph state diagram including: - Entry node - Retrieval node - Prompt construction node - Generation node - Post-processing/validation node - Exit/response node Step 5 - Frontend Tool Interfaces for Medical Tasks - Architect frontend access for each specialized tool using modal or floating panels: - Dose calculator: weight input + age dropdown → dose result - Emergency protocol lookup: fast search UI with semantic expansion - Milestone search: age or domain (motor, language) based filter - Symptom checker: autocomplete fields, optional structured follow-up - Describe how LangChain tools will be called on backend via router functions based on tool invocation intent. Step 6 - Stack, Frameworks, and Build System - Use: - React 19 + TypeScript + Tailwind CSS - ShadCN UI for dialog, input, popover - react-markdown (preferred) with remark-gfm for tables - Prism.js or Shiki for code rendering - Vite + vite-plugin-pwa for builds - Bun + npm for dual package management - Supabase for auth, vector DB, metadata storage, chat logs - pgvector for embedding storage + ANN search Step 7 - Database & Schema Design - Provide SQL DDL for the following tables: - `nelson_book_of_pediatrics` → id, title, section, page, chunk_text, embedding (vector), token_count, keywords - `pediatric_medical_resource` → id, category, title, link, reference_notes - `chat_sessions` → id, user_id, created_at, title - `chat_messages` → id, session_id, role, content, citation_links, timestamp - Explain Supabase RLS setup and JWT-based access control Step 8 - Developer Setup & Environment - Include `.env.example` with: - `SUPABASE_URL`, `SUPABASE_KEY`, `MISTRAL_API_KEY`, `HF_EMBEDDING_MODEL`, `NEXT_PUBLIC_APP_NAME` - Detail the local bootstrap process: 1. Clone repo 2. Install deps 3. Run Supabase locally or connect to hosted project 4. Load textbook chunks via CLI script 5. Start Vite dev server - Implement auto-scroll on new chat message, typing indicator, and retry button for failed generations. Step 9 - End-to-End Simulation - Walk through this query: “What are the common treatments for otitis media in toddlers?” 1. Query embedded 2. Semantic match retrieves Nelson content from pgvector 3. Top 3 chunks inserted into LangChain system prompt 4. Mistral generates response 5. Citations are added 6. UI renders markdown response with citation toggles enabled Step 10 - Advanced Suggestions - Add hooks for: - Future EMR integration - Growth percentile visualizer - Multilingual support - Web speech API (voice queries) - Telemedicine support - Recommend strategies for hallucination prevention, clinical safety checks, and GDPR-compliant storage Take a deep breath and work on this problem step-by-step. - Initial Deployment
6002c17 verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NelsonGPT - Pediatric Medical Assistant</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="manifest" href="/manifest.json"> | |
| <meta name="theme-color" content="#1e1e1e"> | |
| <style> | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .message-fade { | |
| animation: fadeIn 0.3s ease-out forwards; | |
| } | |
| .typing-indicator::after { | |
| content: "..."; | |
| animation: typing 1.5s infinite; | |
| } | |
| @keyframes typing { | |
| 0% { content: "."; } | |
| 33% { content: ".."; } | |
| 66% { content: "..."; } | |
| } | |
| .code-block { | |
| background-color: #2d3748; | |
| border-radius: 0.375rem; | |
| padding: 1rem; | |
| font-family: monospace; | |
| overflow-x: auto; | |
| } | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .tooltip-text { | |
| visibility: hidden; | |
| opacity: 0; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background-color: #333; | |
| color: white; | |
| padding: 0.5rem; | |
| border-radius: 0.375rem; | |
| transition: opacity 0.3s; | |
| width: max-content; | |
| max-width: 200px; | |
| font-size: 0.875rem; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 h-screen flex flex-col"> | |
| <!-- App Header --> | |
| <header class="bg-gray-800 py-3 px-4 flex items-center justify-between sticky top-0 z-10"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-green-500 flex items-center justify-center"> | |
| <i class="fas fa-child text-white"></i> | |
| </div> | |
| <h1 class="font-bold text-lg">NelsonGPT</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button id="model-selector" class="flex items-center space-x-1 bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg text-sm"> | |
| <span>Mistral-7B</span> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </button> | |
| <div id="model-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-gray-700 rounded-lg shadow-lg z-20"> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-600 rounded-t-lg">Mistral-7B</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-600">Gemini-Pro</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-600 rounded-b-lg">Claude-3</a> | |
| </div> | |
| </div> | |
| <button id="settings-btn" class="text-gray-300 hover:text-white"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Chat Area --> | |
| <main class="flex-1 overflow-y-auto bg-gray-900 p-4 space-y-4" id="chat-container"> | |
| <!-- Welcome Message --> | |
| <div class="message-fade bg-gray-800 rounded-xl p-4 max-w-3xl mx-auto"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-green-500 flex items-center justify-center flex-shrink-0"> | |
| <i class="fas fa-child text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">NelsonGPT</h3> | |
| <div class="prose prose-invert max-w-none mt-1"> | |
| <p>Hello! I'm NelsonGPT, your AI-powered pediatric medical assistant. How can I help you today?</p> | |
| <p class="mt-2">Here are some things I can do:</p> | |
| <ul class="list-disc pl-5 mt-1"> | |
| <li>Provide evidence-based pediatric guidance</li> | |
| <li>Calculate medication dosages</li> | |
| <li>Explain developmental milestones</li> | |
| <li>Assist with emergency protocols</li> | |
| <li>Interpret growth charts</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sample Message --> | |
| <div class="message-fade bg-gray-700 rounded-xl p-4 max-w-3xl ml-auto"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center flex-shrink-0"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">You</h3> | |
| <div class="prose prose-invert max-w-none mt-1"> | |
| <p>What's the recommended treatment for otitis media in a 2-year-old?</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sample Response --> | |
| <div class="message-fade bg-gray-800 rounded-xl p-4 max-w-3xl mx-auto"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-green-500 flex items-center justify-center flex-shrink-0"> | |
| <i class="fas fa-child text-white"></i> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="font-bold">NelsonGPT</h3> | |
| <button class="text-xs text-gray-400 hover:text-white flex items-center"> | |
| <i class="fas fa-quote-right mr-1"></i> | |
| <span>Citations</span> | |
| </button> | |
| </div> | |
| <div class="prose prose-invert max-w-none mt-1"> | |
| <p>For acute otitis media in a 2-year-old, the recommended first-line treatment is:</p> | |
| <ul class="list-disc pl-5 mt-1"> | |
| <li><strong>Amoxicillin</strong>: 80-90 mg/kg/day divided into 2 doses (max 3 g/day) for 10 days</li> | |
| <li><strong>Alternative</strong> (if penicillin allergy): Cefdinir (14 mg/kg/day in 1-2 doses) or Azithromycin (10 mg/kg on day 1, then 5 mg/kg/day for 4 days)</li> | |
| </ul> | |
| <p class="mt-2">Watchful waiting for 48-72 hours may be appropriate for mild cases in otherwise healthy children.</p> | |
| <div class="mt-3 p-3 bg-gray-700 rounded-lg"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-info-circle mt-1 mr-2 text-blue-400"></i> | |
| <div> | |
| <p class="text-sm">For a 12 kg child, the amoxicillin dose would be approximately 480-540 mg/day (240-270 mg per dose).</p> | |
| <button class="mt-2 text-sm text-blue-400 hover:text-blue-300 flex items-center"> | |
| <i class="fas fa-calculator mr-1"></i> | |
| <span>Open Dose Calculator</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-3 text-xs text-gray-400 flex items-center"> | |
| <i class="fas fa-book mr-1"></i> | |
| <span>Nelson Textbook of Pediatrics, 21st Ed. (Pg. 1456-1458)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Typing Indicator --> | |
| <div id="typing-indicator" class="hidden bg-gray-800 rounded-xl p-4 max-w-3xl mx-auto"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-green-500 flex items-center justify-center flex-shrink-0"> | |
| <i class="fas fa-child text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">NelsonGPT</h3> | |
| <div class="mt-1 text-gray-300 typing-indicator">Thinking</div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Input Area --> | |
| <div class="bg-gray-800 p-4 sticky bottom-0"> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="relative"> | |
| <textarea | |
| id="message-input" | |
| class="w-full bg-gray-700 text-white rounded-xl pl-4 pr-12 py-3 focus:outline-none focus:ring-2 focus:ring-green-500 resize-none" | |
| placeholder="Ask about pediatric conditions, treatments, or calculations..." | |
| rows="1" | |
| ></textarea> | |
| <button id="send-btn" class="absolute right-3 bottom-3 text-gray-400 hover:text-green-500"> | |
| <i class="fas fa-paper-plane text-xl"></i> | |
| </button> | |
| <button id="voice-btn" class="absolute right-12 bottom-3 text-gray-400 hover:text-blue-500 tooltip"> | |
| <i class="fas fa-microphone text-xl"></i> | |
| <span class="tooltip-text">Voice input (coming soon)</span> | |
| </button> | |
| </div> | |
| <div class="flex justify-between items-center mt-2 text-xs text-gray-500"> | |
| <div> | |
| <button class="hover:text-gray-300 mr-3"> | |
| <i class="fas fa-eraser mr-1"></i> | |
| <span>Clear</span> | |
| </button> | |
| <button class="hover:text-gray-300"> | |
| <i class="fas fa-history mr-1"></i> | |
| <span>History</span> | |
| </button> | |
| </div> | |
| <div> | |
| <button class="hover:text-gray-300"> | |
| <i class="fas fa-shield-alt mr-1"></i> | |
| <span>For educational use only</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Navigation --> | |
| <nav class="bg-gray-800 border-t border-gray-700 flex justify-around py-2"> | |
| <button class="flex flex-col items-center p-2 text-green-500"> | |
| <i class="fas fa-comment-medical text-xl"></i> | |
| <span class="text-xs mt-1">Chat</span> | |
| </button> | |
| <button class="flex flex-col items-center p-2 text-gray-400 hover:text-white"> | |
| <i class="fas fa-calculator text-xl"></i> | |
| <span class="text-xs mt-1">Tools</span> | |
| </button> | |
| <button class="flex flex-col items-center p-2 text-gray-400 hover:text-white"> | |
| <i class="fas fa-book-medical text-xl"></i> | |
| <span class="text-xs mt-1">Resources</span> | |
| </button> | |
| <button class="flex flex-col items-center p-2 text-gray-400 hover:text-white"> | |
| <i class="fas fa-user-md text-xl"></i> | |
| <span class="text-xs mt-1">Profile</span> | |
| </button> | |
| </nav> | |
| <!-- Tools Modal --> | |
| <div id="tools-modal" class="hidden fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4"> | |
| <div class="bg-gray-800 rounded-xl max-w-md w-full max-h-[90vh] overflow-y-auto"> | |
| <div class="p-4 border-b border-gray-700 flex justify-between items-center"> | |
| <h3 class="font-bold text-lg">Clinical Tools</h3> | |
| <button id="close-tools" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 space-y-4"> | |
| <div class="bg-gray-700 rounded-lg p-4 hover:bg-gray-600 transition cursor-pointer"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center"> | |
| <i class="fas fa-pills text-blue-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Dosage Calculator</h4> | |
| <p class="text-sm text-gray-400">Weight-based pediatric medication dosing</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-4 hover:bg-gray-600 transition cursor-pointer"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-red-900 flex items-center justify-center"> | |
| <i class="fas fa-ambulance text-red-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Emergency Protocols</h4> | |
| <p class="text-sm text-gray-400">Quick access to resuscitation guidelines</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-4 hover:bg-gray-600 transition cursor-pointer"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-green-900 flex items-center justify-center"> | |
| <i class="fas fa-baby text-green-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Milestone Tracker</h4> | |
| <p class="text-sm text-gray-400">Developmental progress by age</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-4 hover:bg-gray-600 transition cursor-pointer"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center"> | |
| <i class="fas fa-chart-line text-purple-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Growth Charts</h4> | |
| <p class="text-sm text-gray-400">Plot and interpret growth metrics</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const messageInput = document.getElementById('message-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const chatContainer = document.getElementById('chat-container'); | |
| const typingIndicator = document.getElementById('typing-indicator'); | |
| const modelSelector = document.getElementById('model-selector'); | |
| const modelDropdown = document.getElementById('model-dropdown'); | |
| const toolsModal = document.getElementById('tools-modal'); | |
| const closeTools = document.getElementById('close-tools'); | |
| const voiceBtn = document.getElementById('voice-btn'); | |
| // Auto-resize textarea | |
| messageInput.addEventListener('input', function() { | |
| this.style.height = 'auto'; | |
| this.style.height = (this.scrollHeight) + 'px'; | |
| }); | |
| // Toggle model dropdown | |
| modelSelector.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| modelDropdown.classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', function() { | |
| modelDropdown.classList.add('hidden'); | |
| }); | |
| // Send message | |
| sendBtn.addEventListener('click', sendMessage); | |
| messageInput.addEventListener('keydown', function(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| function sendMessage() { | |
| const message = messageInput.value.trim(); | |
| if (!message) return; | |
| // Add user message to chat | |
| addMessageToChat('user', message); | |
| messageInput.value = ''; | |
| messageInput.style.height = 'auto'; | |
| // Show typing indicator | |
| typingIndicator.classList.remove('hidden'); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // Simulate AI response after delay | |
| setTimeout(() => { | |
| typingIndicator.classList.add('hidden'); | |
| addMessageToChat('assistant', getSampleResponse(message)); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| }, 1500); | |
| } | |
| function addMessageToChat(role, content) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message-fade ${role === 'user' ? 'bg-gray-700 ml-auto' : 'bg-gray-800 mx-auto'} rounded-xl p-4 max-w-3xl`; | |
| const messageHTML = ` | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-8 h-8 rounded-full ${role === 'user' ? 'bg-gray-600' : 'bg-gradient-to-r from-blue-500 to-green-500'} flex items-center justify-center flex-shrink-0"> | |
| <i class="fas ${role === 'user' ? 'fa-user' : 'fa-child'} text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">${role === 'user' ? 'You' : 'NelsonGPT'}</h3> | |
| <div class="prose prose-invert max-w-none mt-1"> | |
| ${role === 'user' ? `<p>${content}</p>` : formatAssistantResponse(content)} | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| messageDiv.innerHTML = messageHTML; | |
| chatContainer.appendChild(messageDiv); | |
| } | |
| function formatAssistantResponse(content) { | |
| // In a real app, this would parse markdown and add proper formatting | |
| return `<p>${content}</p> | |
| <div class="mt-3 text-xs text-gray-400 flex items-center"> | |
| <i class="fas fa-book mr-1"></i> | |
| <span>Nelson Textbook of Pediatrics, 21st Ed. (Pg. 1234-1235)</span> | |
| </div>`; | |
| } | |
| function getSampleResponse(query) { | |
| const lowerQuery = query.toLowerCase(); | |
| if (lowerQuery.includes('otitis media')) { | |
| return `For acute otitis media in children, the recommended first-line treatment is amoxicillin (80-90 mg/kg/day divided BID for 10 days). Alternatives for penicillin allergy include cefdinir or azithromycin. Pain management with ibuprofen or acetaminophen is also important. Consider watchful waiting for mild cases in children over 2 years.`; | |
| } else if (lowerQuery.includes('asthma') || lowerQuery.includes('wheezing')) { | |
| return `For acute asthma exacerbation in children:\n\n1. <strong>Mild</strong>: Inhaled SABA (albuterol 2-4 puffs q4-6h PRN)\n2. <strong>Moderate</strong>: SABA + oral prednisone (1-2 mg/kg/day for 3-5 days)\n3. <strong>Severe</strong>: Continuous SABA + IV steroids + consider magnesium sulfate\n\nAlways assess for signs of respiratory distress and provide oxygen if needed.`; | |
| } else if (lowerQuery.includes('fever') && lowerQuery.includes('infant')) { | |
| return `For infants with fever:\n\n- <strong>0-28 days</strong>: Full sepsis workup and hospitalization\n- <strong>29-60 days</strong>: CBC, blood culture, UA, CSF studies if ill-appearing\n- <strong>61-90 days</strong>: Clinical judgement, consider testing if high-risk\n\nAntipyretics (acetaminophen 10-15 mg/kg q4-6h) for comfort. Always evaluate for source and signs of serious bacterial infection.`; | |
| } else if (lowerQuery.includes('dose') || lowerQuery.includes('dosage')) { | |
| return `I can help calculate medication dosages. Please provide:\n\n1. Medication name\n2. Patient weight\n3. Age (if relevant)\n\nFor example: "What's the amoxicillin dose for a 15 kg 3-year-old?"\n\n<button class="mt-2 px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm flex items-center"> | |
| <i class="fas fa-calculator mr-2"></i> | |
| <span>Open Dose Calculator</span> | |
| </button>`; | |
| } else { | |
| return `I found this information about "${query}" in the Nelson Textbook of Pediatrics:\n\nPediatric management typically involves... (this would be the actual AI-generated response with citations in a production environment).\n\nWould you like me to provide more specific details about any aspect?`; | |
| } | |
| } | |
| // Tools modal | |
| document.querySelectorAll('[class*="fa-calculator"]').forEach(btn => { | |
| btn.addEventListener('click', function(e) { | |
| if (e.target.tagName === 'I' || e.target.tagName === 'SPAN') { | |
| toolsModal.classList.remove('hidden'); | |
| } | |
| }); | |
| }); | |
| closeTools.addEventListener('click', function() { | |
| toolsModal.classList.add('hidden'); | |
| }); | |
| // PWA installation prompt | |
| window.addEventListener('beforeinstallprompt', (e) => { | |
| // Prevent the mini-infobar from appearing on mobile | |
| e.preventDefault(); | |
| // Stash the event so it can be triggered later | |
| deferredPrompt = e; | |
| // Show install button (we could add this to UI) | |
| console.log('PWA installation available'); | |
| }); | |
| // Register service worker | |
| if ('serviceWorker' in navigator) { | |
| window.addEventListener('load', () => { | |
| navigator.serviceWorker.register('/service-worker.js').then( | |
| (registration) => { | |
| console.log('ServiceWorker registration successful'); | |
| }, | |
| (err) => { | |
| console.log('ServiceWorker registration failed: ', err); | |
| } | |
| ); | |
| }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=drzeeIslam/my" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |