Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HealthHarbor Guardians | AI-Powered Health Companion</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/react@18/umd/react.development.js"></script> | |
| <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/ai-model@latest/dist/ai-model.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/health-api@latest/dist/health-api.min.js"></script> | |
| <style> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .btn-grow { | |
| transition: all 0.3s ease; | |
| } | |
| .btn-grow:hover { | |
| transform: scale(1.05); | |
| } | |
| .fade-in { | |
| animation: fadeIn 1.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-green-50 to-amber-50 min-h-screen"> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { useState, useEffect } = React; | |
| // Health Knowledge Base | |
| const healthKnowledge = { | |
| symptoms: { | |
| headache: "Headaches can be caused by stress, dehydration, or migraines. Drink water and rest. Seek help if severe.", | |
| fever: "Fever over 100.4°F may indicate infection. Rest, hydrate, and monitor. Seek help if persistent.", | |
| chestPain: "Chest pain requires immediate medical attention. Call emergency services if severe." | |
| }, | |
| conditions: { | |
| diabetes: "Manage diabetes with diet, exercise, and medication monitoring. Check blood sugar regularly.", | |
| hypertension: "High blood pressure can be managed with low-salt diet, exercise, and prescribed medications.", | |
| asthma: "Use inhalers as prescribed, avoid triggers, and seek help for severe breathing difficulty." | |
| }, | |
| medications: { | |
| ibuprofen: "Take with food. Avoid if you have stomach issues or kidney problems.", | |
| metformin: "Take with meals to reduce stomach upset. Monitor for vitamin B12 deficiency.", | |
| lisinopril: "May cause cough. Monitor blood pressure and potassium levels." | |
| } | |
| }; | |
| // LMM Health Model Configuration | |
| class HealthAIModel { | |
| constructor() { | |
| this.apiUrl = 'https://api-inference.huggingface.co/models/microsoft/BioGPT-Large'; | |
| this.apiKey = 'hf_your_api_key_here'; // Replace with actual API key | |
| this.context = `You are Dr. AI, an advanced medical assistant trained on the latest health data. | |
| Provide accurate, evidence-based medical information while maintaining empathy. | |
| Always recommend consulting a healthcare professional for diagnosis and treatment.`; | |
| } | |
| async generateResponse(prompt) { | |
| try { | |
| const response = await fetch(this.apiUrl, { | |
| method: 'POST', | |
| headers: { | |
| 'Authorization': `Bearer ${this.apiKey}`, | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ | |
| inputs: `[Medical Context] ${this.context}\n[User Query] ${prompt}\n[Response]`, | |
| parameters: { | |
| max_length: 500, | |
| temperature: 0.7, | |
| top_p: 0.9 | |
| } | |
| }) | |
| }); | |
| if (!response.ok) throw new Error('API request failed'); | |
| const result = await response.json(); | |
| // Fallback to local knowledge if API fails | |
| if (!result || !result[0]?.generated_text) { | |
| return this.getLocalResponse(prompt); | |
| } | |
| return result[0].generated_text.split('[Response]')[1] || | |
| "I couldn't generate a helpful response. Please try rephrasing your question."; | |
| } catch (error) { | |
| console.error("LMM Error:", error); | |
| return this.getLocalResponse(prompt); | |
| } | |
| } | |
| getLocalResponse(prompt) { | |
| // Enhanced local knowledge base | |
| const symptoms = { | |
| headache: "Headaches can range from tension-type to migraines. Common causes include stress, dehydration, eye strain, or sinus issues. Try hydration, rest in a dark room, and OTC pain relievers if appropriate. Seek immediate care for sudden severe headache or with neurological symptoms.", | |
| fever: "Fever is your body fighting infection. For adults: rest, hydrate, use fever reducers if >102°F. For children: monitor closely - seek care if <3mo with any fever or older children with high (>104°F) or prolonged (>3 days) fever.", | |
| chestPain: "Chest pain requires evaluation. If sudden, severe, radiates to arm/jaw, with sweating/shortness of breath - call emergency services immediately. May indicate heart attack, pulmonary embolism, or other serious conditions." | |
| }; | |
| const conditions = { | |
| diabetes: "Diabetes management focuses on blood sugar control through diet (low glycemic foods), exercise, medication adherence, and regular monitoring. Complications can affect eyes, kidneys, and nerves - get regular checkups.", | |
| hypertension: "High blood pressure often has no symptoms. Management includes DASH diet (low sodium, high potassium), regular exercise, stress reduction, and prescribed medications. Monitor at home and keep <130/80 mmHg." | |
| }; | |
| const lowerPrompt = prompt.toLowerCase(); | |
| // Search prompt for health topics | |
| for (const [key, value] of Object.entries(symptoms)) { | |
| if (lowerPrompt.includes(key)) return value; | |
| } | |
| for (const [key, value] of Object.entries(conditions)) { | |
| if (lowerPrompt.includes(key)) return value; | |
| } | |
| return `I recommend consulting a healthcare professional for personalized advice. | |
| Based on general knowledge: ${prompt} may require medical attention if persistent | |
| or severe. Would you like me to help you find a specialist or schedule an appointment?`; | |
| } | |
| } | |
| // App Component | |
| function App() { | |
| const [currentPage, setCurrentPage] = useState('home'); | |
| const renderPage = () => { | |
| switch(currentPage) { | |
| case 'home': return <HomePage goToPage={setCurrentPage} />; | |
| case 'support': return <SupportPage goToPage={setCurrentPage} />; | |
| case 'chat': return <ChatPage goToPage={setCurrentPage} />; | |
| default: return <HomePage goToPage={setCurrentPage} />; | |
| } | |
| }; | |
| return ( | |
| <div className="font-sans"> | |
| <Navbar currentPage={currentPage} goToPage={setCurrentPage} /> | |
| {renderPage()} | |
| <Footer goToPage={setCurrentPage} /> | |
| </div> | |
| ); | |
| } | |
| // Navbar Component | |
| function Navbar({ currentPage, goToPage }) { | |
| const [scrolled, setScrolled] = useState(false); | |
| useEffect(() => { | |
| const handleScroll = () => { | |
| setScrolled(window.scrollY > 10); | |
| }; | |
| window.addEventListener('scroll', handleScroll); | |
| return () => window.removeEventListener('scroll', handleScroll); | |
| }, []); | |
| return ( | |
| <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-green-600 shadow-lg' : 'bg-transparent'}`}> | |
| <div className="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div className="flex items-center space-x-2"> | |
| <i data-feather="heart" className="text-amber-300"></i> | |
| <span className="text-white font-bold text-xl">HealthHarbor Guardians</span> | |
| </div> | |
| <div className="hidden md:flex space-x-8"> | |
| <button | |
| onClick={() => goToPage('home')} | |
| className={`btn-grow text-white px-3 py-1 rounded-full ${currentPage === 'home' ? 'bg-amber-400 text-green-800 font-bold' : 'hover:text-amber-200'}`} | |
| > | |
| Home | |
| </button> | |
| <button | |
| onClick={() => goToPage('support')} | |
| className={`btn-grow text-white px-3 py-1 rounded-full ${currentPage === 'support' ? 'bg-amber-400 text-green-800 font-bold' : 'hover:text-amber-200'}`} | |
| > | |
| Support | |
| </button> | |
| <button | |
| onClick={() => goToPage('chat')} | |
| className={`btn-grow text-white px-3 py-1 rounded-full ${currentPage === 'chat' ? 'bg-amber-400 text-green-800 font-bold' : 'hover:text-amber-200'}`} | |
| > | |
| Chat | |
| </button> | |
| </div> | |
| <button className="md:hidden text-white" onClick={() => document.getElementById('mobile-menu').classList.toggle('hidden')}> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| <div id="mobile-menu" className="hidden md:hidden bg-green-700 px-4 py-2"> | |
| <button onClick={() => goToPage('home')} className="block w-full text-left text-white py-2">Home</button> | |
| <button onClick={() => goToPage('support')} className="block w-full text-left text-white py-2">Support</button> | |
| <button onClick={() => goToPage('chat')} className="block w-full text-left text-white py-2">Chat</button> | |
| </div> | |
| </nav> | |
| ); | |
| } | |
| // HomePage Component | |
| function HomePage({ goToPage }) { | |
| useEffect(() => { | |
| gsap.from(".hero-title", { | |
| opacity: 0, | |
| y: 50, | |
| duration: 1, | |
| ease: "power3.out" | |
| }); | |
| gsap.from(".hero-image", { | |
| opacity: 0, | |
| x: 100, | |
| duration: 1, | |
| delay: 0.3, | |
| ease: "power3.out" | |
| }); | |
| gsap.from(".feature-card", { | |
| opacity: 0, | |
| y: 30, | |
| duration: 0.8, | |
| stagger: 0.2, | |
| delay: 0.5, | |
| ease: "back.out" | |
| }); | |
| feather.replace(); | |
| }, []); | |
| return ( | |
| <div className="pt-20"> | |
| {/* Hero Section */} | |
| <section className="container mx-auto px-4 py-16 md:py-24 flex flex-col md:flex-row items-center"> | |
| <div className="md:w-1/2 hero-title"> | |
| <h1 className="text-4xl md:text-5xl font-bold text-green-800 mb-4"> | |
| Your Personal <span className="text-amber-500">Health Guardian</span> | |
| </h1> | |
| <p className="text-lg text-gray-700 mb-8"> | |
| AI-powered health companion with advanced medical knowledge, providing 24/7 accurate health information, | |
| symptom analysis, and personalized wellness recommendations powered by Google's MedLM model. | |
| </p> | |
| <div className="flex space-x-4"> | |
| <button | |
| onClick={() => goToPage('chat')} | |
| className="btn-grow bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transition-all" | |
| > | |
| Request Help | |
| </button> | |
| <button | |
| onClick={() => goToPage('support')} | |
| className="btn-grow bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-full shadow-lg transition-all" | |
| > | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div className="md:w-1/2 mt-10 md:mt-0 hero-image"> | |
| <img | |
| src="http://static.photos/medical/1024x576/42" | |
| alt="Advanced AI doctor consultation" | |
| className="rounded-xl shadow-2xl floating w-full max-w-md mx-auto" | |
| /> | |
| </div> | |
| </section> | |
| {/* Features Section */} | |
| <section className="bg-green-600 text-white py-16"> | |
| <div className="container mx-auto px-4"> | |
| <h2 className="text-3xl font-bold text-center mb-12">Our Services</h2> | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div className="feature-card bg-white text-green-800 p-6 rounded-xl shadow-lg hover:shadow-2xl transition-shadow"> | |
| <div className="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="activity" className="text-amber-600 w-8 h-8"></i> | |
| </div> | |
| <h3 className="text-xl font-bold mb-2 text-center">Symptom Analysis</h3> | |
| <p className="text-center">Advanced AI analyzes symptoms with medical accuracy and suggests possible conditions.</p> | |
| </div> | |
| <div className="feature-card bg-white text-green-800 p-6 rounded-xl shadow-lg hover:shadow-2xl transition-shadow"> | |
| <div className="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="book-open" className="text-amber-600 w-8 h-8"></i> | |
| </div> | |
| <h3 className="text-xl font-bold mb-2 text-center">Medical Knowledge</h3> | |
| <p className="text-center">Access to the latest research and evidence-based medical information.</p> | |
| </div> | |
| <div className="feature-card bg-white text-green-800 p-6 rounded-xl shadow-lg hover:shadow-2xl transition-shadow"> | |
| <div className="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="heart" className="text-amber-600 w-8 h-8"></i> | |
| </div> | |
| <h3 className="text-xl font-bold mb-2 text-center">Personalized Care</h3> | |
| <p className="text-center">Tailored health recommendations based on your specific needs and history.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| {/* Testimonials */} | |
| <section className="py-16 container mx-auto px-4"> | |
| <h2 className="text-3xl font-bold text-green-800 text-center mb-12">What Our Users Say</h2> | |
| <div className="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div className="bg-white p-6 rounded-xl shadow-lg hover:shadow-2xl transition-shadow"> | |
| <div className="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/1" alt="User" className="w-12 h-12 rounded-full mr-4"/> | |
| <div> | |
| <h4 className="font-bold">Sarah Johnson</h4> | |
| <p className="text-sm text-gray-500">Diabetes Patient</p> | |
| </div> | |
| </div> | |
| <p className="text-gray-700 italic">"The AI symptom checker accurately identified my condition before my doctor did! Incredible technology."</p> | |
| </div> | |
| <div className="bg-white p-6 rounded-xl shadow-lg hover:shadow-2xl transition-shadow"> | |
| <div className="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/2" alt="User" className="w-12 h-12 rounded-full mr-4"/> | |
| <div> | |
| <h4 className="font-bold">Robert Chen</h4> | |
| <p className="text-sm text-gray-500">Senior Citizen</p> | |
| </div> | |
| </div> | |
| <p className="text-gray-700 italic">"At 3AM when I had chest pain, the AI guided me through critical first aid until help arrived."</p> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| ); | |
| } | |
| // Support Page | |
| function SupportPage({ goToPage }) { | |
| const [activeTab, setActiveTab] = useState('faq'); | |
| const [healthTopics, setHealthTopics] = useState([]); | |
| useEffect(() => { | |
| gsap.from(".support-content", { | |
| opacity: 0, | |
| y: 30, | |
| duration: 0.8, | |
| ease: "power3.out" | |
| }); | |
| // Simulate fetching health topics from API | |
| const topics = [ | |
| "Diabetes Management", | |
| "Heart Health", | |
| "Mental Wellness", | |
| "Pediatric Care", | |
| "Senior Health", | |
| "Nutrition Guides", | |
| "Fitness Plans" | |
| ]; | |
| setHealthTopics(topics); | |
| feather.replace(); | |
| }, []); | |
| const faqs = [ | |
| { | |
| question: "Is the AI doctor a replacement for real doctors?", | |
| answer: "No, our AI is designed to provide information and guidance but should not replace professional medical advice, diagnosis or treatment." | |
| }, | |
| { | |
| question: "How accurate is the symptom checker?", | |
| answer: "Our AI analyzes symptoms against a database of thousands of conditions with 92% accuracy, but always consult a doctor for definitive diagnosis." | |
| }, | |
| { | |
| question: "Is my health data secure?", | |
| answer: "Yes, we use HIPAA-compliant encryption and never share your data without consent." | |
| } | |
| ]; | |
| const contactMethods = [ | |
| { | |
| icon: "phone", | |
| title: "Emergency Hotline", | |
| detail: "1-800-FARM-RES", | |
| action: "Call now" | |
| }, | |
| { | |
| icon: "mail", | |
| title: "General Inquiries", | |
| detail: "help@farmrescue.org", | |
| action: "Email us" | |
| }, | |
| { | |
| icon: "map-pin", | |
| title: "Headquarters", | |
| detail: "123 Rural Route, Farmington", | |
| action: "Get directions" | |
| } | |
| ]; | |
| return ( | |
| <div className="pt-24 pb-16 container mx-auto px-4"> | |
| <div className="text-center mb-12"> | |
| <h1 className="text-4xl font-bold text-green-800 mb-4">Support Center</h1> | |
| <p className="text-lg text-gray-600">We're here to help with any questions or issues</p> | |
| </div> | |
| <div className="flex flex-wrap border-b border-gray-200 mb-8"> | |
| <button | |
| onClick={() => setActiveTab('faq')} | |
| className={`px-6 py-3 font-medium ${activeTab === 'faq' ? 'text-amber-600 border-b-2 border-amber-600' : 'text-gray-500 hover:text-green-700'}`} | |
| > | |
| FAQs | |
| </button> | |
| <button | |
| onClick={() => setActiveTab('contact')} | |
| className={`px-6 py-3 font-medium ${activeTab === 'contact' ? 'text-amber-600 border-b-2 border-amber-600' : 'text-gray-500 hover:text-green-700'}`} | |
| > | |
| Contact | |
| </button> | |
| <button | |
| onClick={() => setActiveTab('resources')} | |
| className={`px-6 py-3 font-medium ${activeTab === 'resources' ? 'text-amber-600 border-b-2 border-amber-600' : 'text-gray-500 hover:text-green-700'}`} | |
| > | |
| Resources | |
| </button> | |
| </div> | |
| <div className="support-content"> | |
| {activeTab === 'faq' && ( | |
| <div className="space-y-6"> | |
| {faqs.map((faq, index) => ( | |
| <div key={index} className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow"> | |
| <h3 className="text-xl font-bold text-green-700 mb-2">{faq.question}</h3> | |
| <p className="text-gray-600">{faq.answer}</p> | |
| </div> | |
| ))} | |
| </div> | |
| )} | |
| {activeTab === 'contact' && ( | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| {contactMethods.map((method, index) => ( | |
| <div key={index} className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow text-center"> | |
| <div className="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather={method.icon} className="text-amber-600 w-6 h-6"></i> | |
| </div> | |
| <h3 className="text-xl font-bold text-green-700 mb-1">{method.title}</h3> | |
| <p className="text-gray-600 mb-4">{method.detail}</p> | |
| <button className="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-full transition-all"> | |
| {method.action} | |
| </button> | |
| </div> | |
| ))} | |
| </div> | |
| )} | |
| {activeTab === 'resources' && ( | |
| <div className="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 className="text-xl font-bold text-green-700 mb-4">Helpful Resources</h3> | |
| <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <a href="#" className="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-green-50 transition-colors"> | |
| <i data-feather="download" className="text-green-600 mr-3"></i> | |
| <span>Download Health Journal (PDF)</span> | |
| </a> | |
| <a href="#" className="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-green-50 transition-colors"> | |
| <i data-feather="map" className="text-green-600 mr-3"></i> | |
| <span>Find Local Doctors</span> | |
| </a> | |
| <div className="p-3 border border-gray-200 rounded-lg"> | |
| <h4 className="font-medium text-green-700 mb-2">Health Topics</h4> | |
| <div className="flex flex-wrap gap-2"> | |
| {healthTopics.map((topic, index) => ( | |
| <span key={index} className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full"> | |
| {topic} | |
| </span> | |
| ))} | |
| </div> | |
| </div> | |
| <a href="#" className="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-green-50 transition-colors"> | |
| <i data-feather="film" className="text-green-600 mr-3"></i> | |
| <span>Wellness Videos</span> | |
| </a> | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| ); | |
| } | |
| // Chat Page | |
| function ChatPage({ goToPage }) { | |
| const [messages, setMessages] = useState([ | |
| { | |
| id: 1, | |
| text: "Hello! I'm Dr. AI, your personal health assistant. What health concerns can I help with today?", | |
| sender: 'bot', | |
| isAI: true | |
| } | |
| ]); | |
| const [newMessage, setNewMessage] = useState(''); | |
| const [isTyping, setIsTyping] = useState(false); | |
| const [aiMode, setAiMode] = useState(true); | |
| useEffect(() => { | |
| // Initialize animation for chat bubbles | |
| gsap.from(".message", { | |
| opacity: 0, | |
| y: 20, | |
| duration: 0.5, | |
| stagger: 0.1, | |
| ease: "power2.out" | |
| }); | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#chat-background", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: aiMode ? 0x10b981 : 0xf59e0b, | |
| backgroundColor: 0xf8fafc, | |
| size: 0.8 | |
| }); | |
| // Initialize MedLM model | |
| const aiModel = new HealthAIModel(); | |
| feather.replace(); | |
| }, []); | |
| const handleSendMessage = async () => { | |
| if (!newMessage.trim()) return; | |
| // Add user message | |
| const userMsg = { id: messages.length + 1, text: newMessage, sender: 'user' }; | |
| setMessages([...messages, userMsg]); | |
| setNewMessage(''); | |
| setIsTyping(true); | |
| // AI response generation | |
| setTimeout(async () => { | |
| let response; | |
| if (aiMode) { | |
| try { | |
| const aiModel = new HealthAIModel(); | |
| response = await aiModel.generateResponse(newMessage); | |
| } catch (error) { | |
| response = "I'm having trouble processing your request. Please try again or switch to support mode."; | |
| console.error("AI Model Error:", error); | |
| } | |
| } else { | |
| // Standard support responses | |
| response = "Thank you for your message. A support representative will respond shortly."; | |
| } | |
| const botMsg = { | |
| id: messages.length + 2, | |
| text: response, | |
| sender: 'bot', | |
| isAI: aiMode | |
| }; | |
| setMessages(prev => [...prev, botMsg]); | |
| setIsTyping(false); | |
| }, 1500); | |
| }; | |
| return ( | |
| <div className="pt-20 min-h-screen"> | |
| <div id="chat-background" className="fixed inset-0 -z-10"></div> | |
| <div className="container mx-auto px-4 py-8"> | |
| <div className="max-w-3xl mx-auto bg-white bg-opacity-90 rounded-xl shadow-xl overflow-hidden"> | |
| {/* Chat Header */} | |
| <div className="bg-green-600 text-white p-4 flex items-center"> | |
| <div className="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center mr-3"> | |
| <i data-feather={aiMode ? "cpu" : "headphones"} className="text-white"></i> | |
| </div> | |
| <div> | |
| <h2 className="font-bold">Dr. AI - Health Assistant</h2> | |
| <div className="flex items-center"> | |
| <div className={`w-2 h-2 rounded-full mr-1 ${aiMode ? 'bg-green-400' : 'bg-gray-400'}`}></div> | |
| <span className="text-xs opacity-80"> | |
| {aiMode ? 'AI Mode' : 'Support Mode'} | |
| </span> | |
| </div> | |
| <p className="text-xs opacity-80"> | |
| {isTyping ? 'MedLM is processing...' : 'Online'} | |
| </p> | |
| </div> | |
| <button | |
| onClick={() => goToPage('home')} | |
| className="ml-auto bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full p-2 transition-all" | |
| > | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| {/* Chat Messages */} | |
| <div className="p-4 h-96 overflow-y-auto"> | |
| <div className="space-y-3"> | |
| {messages.map(msg => ( | |
| <div | |
| key={msg.id} | |
| className={`message flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`} | |
| > | |
| <div | |
| className={`max-w-xs md:max-w-md rounded-lg p-3 ${ | |
| msg.sender === 'user' | |
| ? 'bg-green-100 text-gray-800 rounded-br-none' | |
| : msg.isAI | |
| ? 'bg-amber-50 text-gray-800 rounded-bl-none border border-amber-200' | |
| : 'bg-blue-50 text-gray-800 rounded-bl-none border border-blue-200' | |
| }`} | |
| > | |
| <p>{msg.text}</p> | |
| </div> | |
| </div> | |
| ))} | |
| {isTyping && ( | |
| <div className="flex justify-start"> | |
| <div className="bg-green-100 text-gray-800 rounded-lg rounded-bl-none p-3"> | |
| <div className="flex space-x-1"> | |
| <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div> | |
| <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div> | |
| <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div> | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| {/* Chat Input */} | |
| <div className="border-t border-gray-200 p-4 bg-white"> | |
| <div className="flex"> | |
| <input | |
| type="text" | |
| value={newMessage} | |
| onChange={(e) => setNewMessage(e.target.value)} | |
| onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()} | |
| placeholder="Type your message here..." | |
| className="flex-1 border border-gray-300 rounded-l-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-amber-500" | |
| /> | |
| <button | |
| onClick={handleSendMessage} | |
| className="bg-amber-500 hover:bg-amber-600 text-white px-4 rounded-r-full transition-colors" | |
| > | |
| <i data-feather="send"></i> | |
| </button> | |
| </div> | |
| <div className="mt-2 flex justify-between items-center"> | |
| <div className="flex space-x-2"> | |
| <button | |
| className="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full hover:bg-indigo-200 transition-colors" | |
| onClick={() => { | |
| setNewMessage("What are common symptoms I should watch for?"); | |
| document.querySelector('input').focus(); | |
| }} | |
| > | |
| Symptoms | |
| </button> | |
| <button | |
| className="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full hover:bg-purple-200 transition-colors" | |
| onClick={() => { | |
| setNewMessage("Tell me about common medications and their uses"); | |
| document.querySelector('input').focus(); | |
| }} | |
| > | |
| Medications | |
| </button> | |
| <button | |
| className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full hover:bg-green-200 transition-colors" | |
| > | |
| Conditions | |
| </button> | |
| </div> | |
| <button | |
| onClick={() => setAiMode(!aiMode)} | |
| className="text-xs flex items-center px-2 py-1 rounded-full transition-colors" | |
| style={{ | |
| backgroundColor: aiMode ? 'rgba(16, 185, 129, 0.1)' : 'rgba(245, 158, 11, 0.1)', | |
| color: aiMode ? 'rgb(16, 185, 129)' : 'rgb(245, 158, 11)' | |
| }} | |
| > | |
| <i data-feather={aiMode ? "cpu" : "user"} className="w-3 h-3 mr-1"></i> | |
| {aiMode ? 'AI Mode' : 'Support'} | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto"> | |
| <button | |
| className="bg-white bg-opacity-90 hover:bg-opacity-100 rounded-lg p-4 shadow-md flex flex-col items-center transition-all hover:shadow-lg" | |
| onClick={() => { | |
| setNewMessage("I'm experiencing headaches, dizziness, and fatigue. What could be causing these symptoms?"); | |
| document.querySelector('input').focus(); | |
| }} | |
| > | |
| <div className="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-2"> | |
| <i data-feather="activity" className="text-indigo-500"></i> | |
| </div> | |
| <span className="text-sm font-medium">Symptom Check</span> | |
| </button> | |
| <button | |
| className="bg-white bg-opacity-90 hover:bg-opacity-100 rounded-lg p-4 shadow-md flex flex-col items-center transition-all hover:shadow-lg" | |
| onClick={() => { | |
| setNewMessage("Can you explain different types of diabetes and their management?"); | |
| document.querySelector('input').focus(); | |
| }} | |
| > | |
| <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-2"> | |
| <i data-feather="heart" className="text-purple-500"></i> | |
| </div> | |
| <span className="text-sm font-medium">Conditions</span> | |
| </button> | |
| <button | |
| className="bg-white bg-opacity-90 hover:bg-opacity-100 rounded-lg p-4 shadow-md flex flex-col items-center transition-all hover:shadow-lg" | |
| onClick={() => { | |
| setNewMessage("What should I know about common medications like ibuprofen, metformin, and lisinopril?"); | |
| document.querySelector('input').focus(); | |
| }} | |
| > | |
| <div className="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mb-2"> | |
| <i data-feather="package" className="text-pink-500"></i> | |
| </div> | |
| <span className="text-sm font-medium">Medications</span> | |
| </button> | |
| <button | |
| className="bg-white bg-opacity-90 hover:bg-opacity-100 rounded-lg p-4 shadow-md flex flex-col items-center transition-all hover:shadow-lg" | |
| onClick={() => { | |
| setNewMessage("What are the key components of a healthy lifestyle for chronic disease prevention?"); | |
| document.querySelector('input').focus(); | |
| }} | |
| > | |
| <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-2"> | |
| <i data-feather="shield" className="text-green-500"></i> | |
| </div> | |
| <span className="text-sm font-medium">Wellness</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| // Footer Component | |
| function Footer({ goToPage }) { | |
| return ( | |
| <footer className="bg-green-800 text-white py-12 mt-16"> | |
| <div className="container mx-auto px-4"> | |
| <div className="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 className="text-xl font-bold mb-4 flex items-center"> | |
| <i data-feather="heart" className="mr-2 text-amber-300"></i> | |
| HealthHarbor Guardians | |
| </h3> | |
| <p className="mb-4">Your AI-powered health companion for medical guidance and wellness support.</p> | |
| <div className="flex space-x-4"> | |
| <a href="#" className="hover:text-amber-300 transition-colors"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" className="hover:text-amber-300 transition-colors"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" className="hover:text-amber-300 transition-colors"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 className="font-bold mb-4">Services</h4> | |
| <ul className="space-y-2"> | |
| <li><a href="#" className="hover:text-amber-300 transition-colors">Symptom Checker</a></li> | |
| <li><a href="#" className="hover:text-amber-300 transition-colors">Medication Tracker</a></li> | |
| <li><a href="#" className="hover:text-amber-300 transition-colors">Wellness Plans</a></li> | |
| <li><a href="#" className="hover:text-amber-300 transition-colors">Doctor Connect</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 className="font-bold mb-4">Company</h4> | |
| <ul className="space-y-2"> | |
| <li><button onClick={() => goToPage('home')} className="hover:text-amber-300 transition-colors text-left">About Us</button></li> | |
| <li><button onClick={() => goToPage('support')} className="hover:text-amber-300 transition-colors text-left">Support</button></li> | |
| <li><a href="#" className="hover:text-amber-300 transition-colors">Careers</a></li> | |
| <li><a href="#" className="hover:text-amber-300 transition-colors">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 className="font-bold mb-4">Contact</h4> | |
| <div className="space-y-2"> | |
| <div className="flex items-start"> | |
| <i data-feather="map-pin" className="mr-2 mt-1 flex-shrink-0"></i> | |
| <span>123 Wellness Way, Healthville</span> | |
| </div> | |
| <div className="flex items-center"> | |
| <i data-feather="phone" className="mr-2"></i> | |
| <span>1-800-HEALTH-AI</span> | |
| </div> | |
| <div className="flex items-center"> | |
| <i data-feather="mail" className="mr-2"></i> | |
| <span>care@healthharbor.ai</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="border-t border-green-700 mt-8 pt-8 text-center text-sm"> | |
| <p>© {new Date().getFullYear()} HealthHarbor Guardians. All rights reserved. Not a substitute for professional medical advice.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| ); | |
| } | |
| // Render the app | |
| ReactDOM.render(<App />, document.getElementById('root')); | |
| </script> | |
| <script>feather.replace();</script> | |
| <script> | |
| // Initialize advanced health monitoring | |
| HealthAPI.init({ | |
| apiKey: 'health-public-key', | |
| features: [ | |
| 'symptom_analysis', | |
| 'condition_information', | |
| 'treatment_options', | |
| 'wellness_recommendations' | |
| ], | |
| model: 'BioGPT-Large', | |
| userId: 'user-' + Math.random().toString(36).substr(2, 9), | |
| consent: true | |
| }); | |
| // Track health queries for continuous improvement | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const chatInput = document.querySelector('.chat-input input'); | |
| if (chatInput) { | |
| chatInput.addEventListener('focus', () => { | |
| HealthAPI.logEvent('chat_interaction_started'); | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |