Spaces:

drzeeIslam
/

nelsonbot

Running

App Files Files Community

drzeeIslam commited on Jul 25, 2025

Commit

58868c5

verified ·

1 Parent(s): b5d2dab

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +461 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Nelsonbot
-emoji: 🏢
-colorFrom: indigo
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: nelsonbot
+emoji: 🐳
+colorFrom: yellow
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,461 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>