Spaces:
Running
Running
| <html lang="en"> | |
| <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"> | |
| <style> | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .message-fade-in { | |
| animation: fadeIn 0.3s ease-out forwards; | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 10px rgba(255, 255, 255, 0.05); | |
| } | |
| .sidebar { | |
| transition: transform 0.3s ease-in-out; | |
| } | |
| .sidebar-hidden { | |
| transform: translateX(-100%); | |
| } | |
| .textarea-auto-resize { | |
| resize: none; | |
| overflow-y: hidden; | |
| } | |
| .markdown-content h1 { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| margin: 1rem 0; | |
| } | |
| .markdown-content h2 { | |
| font-size: 1.25rem; | |
| font-weight: bold; | |
| margin: 0.75rem 0; | |
| } | |
| .markdown-content p { | |
| margin: 0.5rem 0; | |
| } | |
| .markdown-content ul, .markdown-content ol { | |
| margin: 0.5rem 0; | |
| padding-left: 1.5rem; | |
| } | |
| .markdown-content li { | |
| margin: 0.25rem 0; | |
| } | |
| .markdown-content code { | |
| background-color: #2a2a2a; | |
| padding: 0.2rem 0.4rem; | |
| border-radius: 0.25rem; | |
| font-family: monospace; | |
| } | |
| .markdown-content pre { | |
| background-color: #2a2a2a; | |
| padding: 0.75rem; | |
| border-radius: 0.5rem; | |
| overflow-x: auto; | |
| margin: 0.75rem 0; | |
| } | |
| .markdown-content a { | |
| color: #60a5fa; | |
| text-decoration: underline; | |
| } | |
| .markdown-content strong { | |
| font-weight: bold; | |
| } | |
| .markdown-content em { | |
| font-style: italic; | |
| } | |
| .splash-screen { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| background-color: #121212; | |
| } | |
| .dot-flashing { | |
| position: relative; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 5px; | |
| background-color: #f2f2f2; | |
| color: #f2f2f2; | |
| animation: dotFlashing 1s infinite linear alternate; | |
| animation-delay: 0.5s; | |
| } | |
| .dot-flashing::before, .dot-flashing::after { | |
| content: ''; | |
| display: inline-block; | |
| position: absolute; | |
| top: 0; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 5px; | |
| background-color: #f2f2f2; | |
| color: #f2f2f2; | |
| } | |
| .dot-flashing::before { | |
| left: -15px; | |
| animation: dotFlashing 1s infinite alternate; | |
| animation-delay: 0s; | |
| } | |
| .dot-flashing::after { | |
| left: 15px; | |
| animation: dotFlashing 1s infinite alternate; | |
| animation-delay: 1s; | |
| } | |
| @keyframes dotFlashing { | |
| 0% { | |
| background-color: #f2f2f2; | |
| } | |
| 50%, 100% { | |
| background-color: rgba(242, 242, 242, 0.2); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-[#121212] text-[#f2f2f2] h-screen flex flex-col"> | |
| <!-- Splash Screen --> | |
| <div id="splashScreen" class="splash-screen"> | |
| <h1 class="text-3xl font-bold mb-4">NelsonGPT</h1> | |
| <div class="dot-flashing"></div> | |
| </div> | |
| <!-- Main App (initially hidden) --> | |
| <div id="appContainer" class="flex flex-col h-full hidden"> | |
| <!-- Top Bar --> | |
| <div class="bg-[#121212] p-4 border-b border-[#2a2a2a] flex items-center sticky top-0 z-10"> | |
| <button id="menuButton" class="mr-4 text-[#f2f2f2]"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <h1 class="text-xl font-bold">NelsonGPT</h1> | |
| </div> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar sidebar-hidden fixed inset-y-0 left-0 w-64 bg-[#1e1e1e] z-20 overflow-y-auto"> | |
| <div class="p-4 border-b border-[#2a2a2a]"> | |
| <button id="newChatButton" class="w-full bg-[#2a2a2a] hover:bg-[#3a3a3a] text-[#f2f2f2] py-2 px-4 rounded flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> New Chat | |
| </button> | |
| </div> | |
| <div class="p-4 border-b border-[#2a2a2a]"> | |
| <h2 class="font-bold mb-2">Chat History</h2> | |
| <div id="chatHistory" class="space-y-2"> | |
| <!-- Chat history items will be added here --> | |
| </div> | |
| </div> | |
| <div class="p-4 border-b border-[#2a2a2a]"> | |
| <h2 class="font-bold mb-2">Settings</h2> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span>Show Timestamps</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input id="timestampToggle" type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span>Show Citations</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input id="citationToggle" type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <button id="aboutButton" class="text-[#f2f2f2] hover:text-blue-400"> | |
| <i class="fas fa-info-circle mr-2"></i> About NelsonGPT | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Overlay for sidebar --> | |
| <div id="sidebarOverlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-10"></div> | |
| <!-- Chat Container --> | |
| <div id="chatContainer" class="flex-1 overflow-y-auto p-4 space-y-6"> | |
| <!-- Welcome message --> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-[#2a2a2a] flex items-center justify-center mr-3"> | |
| <i class="fas fa-baby text-sm"></i> | |
| </div> | |
| <div class="max-w-[90%] md:max-w-[80%] lg:max-w-[70%] bg-[#212121] glow-effect rounded-lg p-4"> | |
| <div class="markdown-content"> | |
| <h2>Welcome to NelsonGPT</h2> | |
| <p>I'm your evidence-based pediatric medical assistant, powered by the <strong>Nelson Textbook of Pediatrics</strong>.</p> | |
| <p>How can I help you today? Here are some examples:</p> | |
| <ul> | |
| <li>What's the treatment for bronchiolitis in a 6-month-old?</li> | |
| <li>Calculate the amoxicillin dose for a 12kg child</li> | |
| <li>Differential diagnosis for fever and rash in a toddler</li> | |
| </ul> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-2 citation">(Nelson, pg. 1-10)</div> | |
| </div> | |
| </div> | |
| <!-- Messages will be added here dynamically --> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="p-4 border-t border-[#2a2a2a] bg-[#121212] sticky bottom-0"> | |
| <div class="flex items-end"> | |
| <textarea id="messageInput" class="textarea-auto-resize flex-1 bg-[#1e1e1e] text-[#f2f2f2] rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="1" placeholder="Ask a pediatric question..."></textarea> | |
| <button id="sendButton" class="ml-2 w-10 h-10 bg-blue-600 hover:bg-blue-700 disabled:bg-[#2a2a2a] disabled:text-[#5a5a5a] rounded-full flex items-center justify-center transition-colors duration-200" disabled> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-2 text-center"> | |
| NelsonGPT may produce inaccurate information. Always verify with clinical judgment. | |
| </div> | |
| </div> | |
| <!-- About Modal --> | |
| <div id="aboutModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-30 flex items-center justify-center"> | |
| <div class="bg-[#1e1e1e] rounded-lg p-6 max-w-md w-full mx-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">About NelsonGPT</h2> | |
| <button id="closeAboutModal" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="markdown-content"> | |
| <p>NelsonGPT is an evidence-based pediatric medical assistant powered by the <strong>Nelson Textbook of Pediatrics</strong>.</p> | |
| <p>Features:</p> | |
| <ul> | |
| <li>Evidence-based answers grounded in Nelson's content</li> | |
| <li>Drug dose calculator</li> | |
| <li>Symptom analysis and differential diagnosis</li> | |
| <li>Emergency protocols</li> | |
| <li>Citation-aware responses</li> | |
| </ul> | |
| <p>Version: 1.0.0</p> | |
| <p>Developed by Loveable Dev</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Hide splash screen after 2 seconds | |
| setTimeout(() => { | |
| document.getElementById('splashScreen').classList.add('hidden'); | |
| document.getElementById('appContainer').classList.remove('hidden'); | |
| }, 2000); | |
| // Sidebar toggle | |
| const menuButton = document.getElementById('menuButton'); | |
| const sidebar = document.getElementById('sidebar'); | |
| const sidebarOverlay = document.getElementById('sidebarOverlay'); | |
| menuButton.addEventListener('click', () => { | |
| sidebar.classList.toggle('sidebar-hidden'); | |
| sidebarOverlay.classList.toggle('hidden'); | |
| }); | |
| sidebarOverlay.addEventListener('click', () => { | |
| sidebar.classList.add('sidebar-hidden'); | |
| sidebarOverlay.classList.add('hidden'); | |
| }); | |
| // About modal | |
| const aboutButton = document.getElementById('aboutButton'); | |
| const aboutModal = document.getElementById('aboutModal'); | |
| const closeAboutModal = document.getElementById('closeAboutModal'); | |
| aboutButton.addEventListener('click', () => { | |
| aboutModal.classList.remove('hidden'); | |
| }); | |
| closeAboutModal.addEventListener('click', () => { | |
| aboutModal.classList.add('hidden'); | |
| }); | |
| // Auto-resize textarea | |
| const messageInput = document.getElementById('messageInput'); | |
| const sendButton = document.getElementById('sendButton'); | |
| messageInput.addEventListener('input', function() { | |
| this.style.height = 'auto'; | |
| this.style.height = (this.scrollHeight) + 'px'; | |
| // Enable/disable send button based on input | |
| sendButton.disabled = this.value.trim() === ''; | |
| }); | |
| // Send message on Enter (Shift+Enter for new line) | |
| messageInput.addEventListener('keydown', function(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| if (this.value.trim() !== '') { | |
| sendMessage(); | |
| } | |
| } | |
| }); | |
| sendButton.addEventListener('click', sendMessage); | |
| // New chat button | |
| document.getElementById('newChatButton').addEventListener('click', () => { | |
| // Clear chat container except welcome message | |
| const chatContainer = document.getElementById('chatContainer'); | |
| const welcomeMessage = chatContainer.children[0]; | |
| chatContainer.innerHTML = ''; | |
| chatContainer.appendChild(welcomeMessage); | |
| // Close sidebar | |
| sidebar.classList.add('sidebar-hidden'); | |
| sidebarOverlay.classList.add('hidden'); | |
| // Add to chat history | |
| addToChatHistory("New Chat"); | |
| }); | |
| // Function to send message | |
| function sendMessage() { | |
| const message = messageInput.value.trim(); | |
| if (message === '') return; | |
| // Add user message to chat | |
| addMessageToChat('user', message); | |
| // Clear input | |
| messageInput.value = ''; | |
| messageInput.style.height = 'auto'; | |
| sendButton.disabled = true; | |
| // Simulate assistant response after delay | |
| setTimeout(() => { | |
| const assistantResponse = generateResponse(message); | |
| addMessageToChat('assistant', assistantResponse.text, assistantResponse.citation); | |
| }, 1000); | |
| } | |
| // Function to add message to chat | |
| function addMessageToChat(role, content, citation = null) { | |
| const chatContainer = document.getElementById('chatContainer'); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.classList.add('flex', 'items-start', 'message-fade-in'); | |
| if (role === 'user') { | |
| messageDiv.classList.add('justify-end'); | |
| messageDiv.innerHTML = ` | |
| <div class="max-w-[90%] md:max-w-[80%] lg:max-w-[70%] bg-[#2a2a2a] rounded-lg p-4"> | |
| <div class="markdown-content">${content}</div> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-[#2a2a2a] flex items-center justify-center ml-3"> | |
| <i class="fas fa-user text-sm"></i> | |
| </div> | |
| `; | |
| } else { | |
| messageDiv.classList.add('justify-start'); | |
| messageDiv.innerHTML = ` | |
| <div class="w-8 h-8 rounded-full bg-[#2a2a2a] flex items-center justify-center mr-3"> | |
| <i class="fas fa-baby text-sm"></i> | |
| </div> | |
| <div class="max-w-[90%] md:max-w-[80%] lg:max-w-[70%] bg-[#212121] glow-effect rounded-lg p-4"> | |
| <div class="markdown-content">${content}</div> | |
| ${citation ? `<div class="text-xs text-gray-400 mt-2 citation">${citation}</div>` : ''} | |
| </div> | |
| `; | |
| } | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // Add to chat history if it's the first message in the conversation | |
| if (role === 'user' && chatContainer.children.length === 1) { | |
| addToChatHistory(content); | |
| } | |
| } | |
| // Function to add to chat history | |
| function addToChatHistory(content) { | |
| const chatHistory = document.getElementById('chatHistory'); | |
| const historyItem = document.createElement('div'); | |
| historyItem.classList.add('cursor-pointer', 'hover:text-blue-400', 'truncate'); | |
| historyItem.textContent = content.length > 30 ? content.substring(0, 30) + '...' : content; | |
| chatHistory.appendChild(historyItem); | |
| } | |
| // Function to generate response (simulated) | |
| function generateResponse(message) { | |
| // This is a simplified simulation - in a real app, this would call your backend API | |
| const responses = [ | |
| { | |
| text: "The treatment for bronchiolitis in infants is primarily supportive. Key recommendations from Nelson's include:\n\n- **Oxygen therapy** for SpO2 < 90%\n- **Nasal suctioning** as needed\n- **Hydration** with IV fluids if oral intake is inadequate\n- **No routine use** of bronchodilators or corticosteroids\n\nMonitor for signs of respiratory distress and consider hospitalization for high-risk infants.", | |
| citation: "(Nelson, pg. 455-460)" | |
| }, | |
| { | |
| text: "For a 12kg child, the standard amoxicillin dose is:\n\n- **Mild to moderate infection**: 25-50 mg/kg/day divided q12h\n - For 12kg: 150-300mg q12h\n\n- **Severe infection**: 80-90 mg/kg/day divided q12h\n - For 12kg: 480-540mg q12h\n\nAlways confirm dosing with local guidelines and consider renal function.", | |
| citation: "(Nelson, pg. 1205)" | |
| }, | |
| { | |
| text: "Common differential diagnoses for fever and rash in toddlers include:\n\n1. **Viral exanthems** (most common)\n - Roseola\n - Hand-foot-and-mouth disease\n - Fifth disease\n\n2. **Bacterial infections**\n - Scarlet fever\n - Meningococcemia (urgent!)\n\n3. **Allergic reactions**\n - Drug eruptions\n - Urticaria\n\nKey questions:\n- Duration of fever?\n- Rash distribution/pattern?\n- Associated symptoms?", | |
| citation: "(Nelson, pg. 890-895)" | |
| }, | |
| { | |
| text: "The management of febrile seizures includes:\n\n1. **Acute management**\n - Protect from injury\n - Position on side\n - Time the seizure\n - Only use rescue meds if >5 minutes\n\n2. **Evaluation**\n - Focused history and physical\n - Consider LP if <12 months or meningeal signs\n - Routine labs/imaging not needed for simple febrile seizures\n\n3. **Parent education**\n - Recurrence risk ~30%\n - No long-term neurodevelopmental impact", | |
| citation: "(Nelson, pg. 3200-3205)" | |
| } | |
| ]; | |
| // Find the most relevant response based on keywords | |
| const lowerMessage = message.toLowerCase(); | |
| if (lowerMessage.includes('bronchiolitis')) return responses[0]; | |
| if (lowerMessage.includes('amoxicillin') || lowerMessage.includes('dose')) return responses[1]; | |
| if (lowerMessage.includes('fever') && lowerMessage.includes('rash')) return responses[2]; | |
| if (lowerMessage.includes('seizure')) return responses[3]; | |
| // Default response | |
| return { | |
| text: "Thank you for your question. Based on Nelson's Textbook of Pediatrics, I can provide information on pediatric conditions, treatments, and guidelines. Could you please provide more details about the specific clinical scenario you're inquiring about?", | |
| citation: "(Nelson, pg. 1-10)" | |
| }; | |
| } | |
| // Toggle citations based on settings | |
| document.getElementById('citationToggle').addEventListener('change', function() { | |
| const citations = document.querySelectorAll('.citation'); | |
| citations.forEach(citation => { | |
| citation.style.display = this.checked ? 'block' : 'none'; | |
| }); | |
| }); | |
| }); | |
| </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/nelsonbot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |