Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Holistic Health Explorer | Advanced Database Integration</title> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <link rel="preload" href="https://cdn.tailwindcss.com" as="script"> | |
| <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌿</text></svg>"> | |
| <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"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| padding-top: 70px; | |
| color: #333; | |
| line-height: 1.6; | |
| } | |
| .header-gradient { | |
| background: linear-gradient(135deg, #2b8a3e 0%, #40c057 100%); | |
| box-shadow: 0 2px 10px rgba(43, 138, 62, 0.1); | |
| } | |
| .health-gradient { | |
| background: linear-gradient(135deg, #f8f9fa 0%, #ebfbee 100%); | |
| } | |
| .floating-element { | |
| animation: float 8s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-15px) rotate(2deg); } | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| border-right: 2px solid #40c057; | |
| width: 0; | |
| animation: typing 3s steps(40, end) forwards, blink-caret .75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #40c057; } | |
| } | |
| .nav-link { | |
| position: relative; | |
| padding: 8px 0; | |
| transition: all 0.2s ease; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background-color: white; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .search-focus { | |
| transition: all 0.3s ease; | |
| } | |
| .search-focus:focus { | |
| transform: scale(1.02); | |
| box-shadow: 0 5px 15px rgba(43, 138, 62, 0.1); | |
| } | |
| .database-badge { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| background-color: #ebfbee; | |
| color: #2b8a3e; | |
| } | |
| .database-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| font-size: 11px; | |
| font-weight: 500; | |
| background-color: #f8f9fa; | |
| color: #495057; | |
| border: 1px solid #dee2e6; | |
| margin-right: 6px; | |
| margin-bottom: 6px; | |
| } | |
| .database-chip i { | |
| margin-right: 4px; | |
| font-size: 10px; | |
| } | |
| .result-card { | |
| transition: all 0.2s ease; | |
| border-left: 3px solid transparent; | |
| } | |
| .result-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.05); | |
| border-left: 3px solid #40c057; | |
| } | |
| .knowledge-graph { | |
| height: 300px; | |
| background-color: #f8f9fa; | |
| border-radius: 8px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .graph-node { | |
| position: absolute; | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: 500; | |
| font-size: 12px; | |
| text-align: center; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .graph-node:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 6px 12px rgba(0,0,0,0.15); | |
| } | |
| .graph-line { | |
| position: absolute; | |
| height: 2px; | |
| background-color: rgba(0,0,0,0.1); | |
| transform-origin: left center; | |
| } | |
| .relevance-badge { | |
| position: absolute; | |
| top: -8px; | |
| right: -8px; | |
| background-color: #ff6b6b; | |
| color: white; | |
| border-radius: 50%; | |
| width: 24px; | |
| height: 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| font-weight: bold; | |
| } | |
| .suggestion-card { | |
| border-left: 4px solid #40c057; | |
| transition: all 0.2s ease; | |
| } | |
| .suggestion-card:hover { | |
| transform: translateX(5px); | |
| } | |
| .database-relation { | |
| position: relative; | |
| padding-left: 20px; | |
| } | |
| .database-relation::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 8px; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 2px; | |
| } | |
| .ncbi-relation::before { background-color: #2b8a3e; } | |
| .pubchem-relation::before { background-color: #1971c2; } | |
| .microbiome-relation::before { background-color: #6741d9; } | |
| .food-relation::before { background-color: #e67700; } | |
| .phytochem-relation::before { background-color: #d6336c; } | |
| @media (max-width: 768px) { | |
| body { | |
| padding-top: 60px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Fixed Navigation Header --> | |
| <header class="fixed top-0 left-0 right-0 z-50 header-gradient text-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex items-center justify-between h-16"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-2"> | |
| <i class="fas fa-leaf text-sm"></i> | |
| </div> | |
| <span class="text-lg font-medium">Health<span class="font-light">Explorer</span></span> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex items-center space-x-6"> | |
| <a href="#" class="nav-link active">Home</a> | |
| <a href="#" class="nav-link">Databases</a> | |
| <a href="#" class="nav-link">Health Insights</a> | |
| <a href="#" class="nav-link">For Practitioners</a> | |
| <a href="#" class="nav-link">Resources</a> | |
| </nav> | |
| <!-- Mobile Menu Button --> | |
| <button class="md:hidden text-white focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <!-- CTA Button --> | |
| <div class="hidden md:block"> | |
| <button class="bg-white text-green-700 px-4 py-1.5 rounded-full text-sm font-medium hover:bg-opacity-90 transition-all"> | |
| <i class="fas fa-user mr-1"></i> My Health | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="health-gradient text-gray-800 pt-16 pb-12 relative overflow-hidden"> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-2/3 mb-8 lg:mb-0"> | |
| <div class="flex flex-wrap items-center mb-3"> | |
| <span class="database-badge px-3 py-1 text-xs mr-3 mb-2"> | |
| <i class="fas fa-database mr-1"></i> 27 Integrated Health Databases | |
| </span> | |
| <span class="database-badge px-3 py-1 text-xs mr-3 mb-2"> | |
| <i class="fas fa-brain mr-1"></i> AI-Powered Cross-References | |
| </span> | |
| </div> | |
| <h1 class="text-2xl md:text-3xl font-light leading-tight mb-3"> | |
| Advanced Health <span class="font-medium">Database Explorer</span><br> | |
| <span class="typewriter inline-block text-xl" aria-live="polite">Cross-Referencing Scientific Research</span> | |
| </h1> | |
| <p class="text-gray-600 mb-6 max-w-lg text-sm"> | |
| Our intelligent system connects research across multiple databases to reveal hidden relationships between nutrition, | |
| microbiome science, herbal medicine, and clinical studies. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3"> | |
| <button class="bg-green-600 text-white px-5 py-2 rounded-full text-sm font-medium hover:bg-green-700 transition-colors flex items-center justify-center focus:outline-none"> | |
| <i class="fas fa-search mr-2" aria-hidden="true"></i> Explore Health Data | |
| </button> | |
| <button class="border border-green-600 text-green-600 px-5 py-2 rounded-full text-sm font-medium hover:bg-green-50 transition-colors flex items-center justify-center focus:outline-none"> | |
| <i class="fas fa-video mr-2" aria-hidden="true"></i> Watch Demo | |
| </button> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/3 flex justify-center"> | |
| <div class="relative floating-element"> | |
| <img src="https://www.svgrepo.com/show/530537/dna.svg" alt="Health DNA" class="w-40 h-40 opacity-90" loading="lazy" style="filter: hue-rotate(60deg);"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Health Search Interface --> | |
| <section class="container mx-auto px-6 -mt-8 relative z-20 mb-16"> | |
| <div class="bg-white rounded-xl shadow-lg p-5"> | |
| <div class="flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-3"> | |
| <div class="flex-1 relative"> | |
| <label for="healthSearchInput" class="sr-only">Search health databases</label> | |
| <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-green-500"> | |
| <i class="fas fa-search" aria-hidden="true"></i> | |
| </div> | |
| <input type="text" id="healthSearchInput" placeholder="Search microbiome, nutrition, herbs, lifestyle..." | |
| class="search-focus w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-green-400 text-sm"> | |
| </div> | |
| <button id="healthSearchButton" class="bg-green-600 hover:bg-green-700 text-white px-5 py-3 rounded-lg font-medium text-sm transition-all flex items-center justify-center focus:outline-none"> | |
| <i class="fas fa-brain mr-2" aria-hidden="true"></i> Find Connections | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-xs text-gray-500 mb-2">Select databases to search:</div> | |
| <div class="flex flex-wrap" id="databaseFilters"> | |
| <label class="database-chip cursor-pointer"> | |
| <input type="checkbox" class="hidden" checked data-db="ncbi"> | |
| <i class="fas fa-dna"></i> NCBI | |
| </label> | |
| <label class="database-chip cursor-pointer"> | |
| <input type="checkbox" class="hidden" checked data-db="pubchem"> | |
| <i class="fas fa-flask"></i> PubChem | |
| </label> | |
| <label class="database-chip cursor-pointer"> | |
| <input type="checkbox" class="hidden" checked data-db="pubmed"> | |
| <i class="fas fa-book-medical"></i> PubMed | |
| </label> | |
| <label class="database-chip cursor-pointer"> | |
| <input type="checkbox" class="hidden" checked data-db="food"> | |
| <i class="fas fa-utensils"></i> FoodData | |
| </label> | |
| <label class="database-chip cursor-pointer"> | |
| <input type="checkbox" class="hidden" checked data-db="phytochem"> | |
| <i class="fas fa-leaf"></i> Phytochemical | |
| </label> | |
| <label class="database-chip cursor-pointer"> | |
| <input type="checkbox" class="hidden" checked data-db="microbiome"> | |
| <i class="fas fa-bacterium"></i> Microbiome | |
| </label> | |
| <label class="database-chip cursor-pointer"> | |
| <input type="checkbox" class="hidden" checked data-db="clinical"> | |
| <i class="fas fa-hospital"></i> Clinical Trials | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Search Results Section (Initially Hidden) --> | |
| <section id="searchResults" class="container mx-auto px-6 mb-16 hidden"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-lg font-medium text-gray-800">Cross-Database Results</h2> | |
| <div class="text-sm text-gray-500"><span id="resultCount">0</span> results across <span id="dbCount">0</span> databases</div> | |
| </div> | |
| <!-- Knowledge Graph Visualization --> | |
| <div class="mb-8"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-medium text-gray-700">Knowledge Graph</h3> | |
| <div class="text-xs text-gray-500">Showing relationships between concepts</div> | |
| </div> | |
| <div class="knowledge-graph" id="knowledgeGraph"> | |
| <!-- Nodes will be dynamically inserted here --> | |
| </div> | |
| </div> | |
| <!-- Results Tabs --> | |
| <div class="mb-6 border-b border-gray-200"> | |
| <div class="flex space-x-4"> | |
| <button class="tab-button px-4 py-2 font-medium text-sm border-b-2 border-green-500 text-green-600" data-tab="all">All Results</button> | |
| <button class="tab-button px-4 py-2 font-medium text-sm text-gray-500 hover:text-gray-700" data-tab="suggestions">AI Suggestions</button> | |
| <button class="tab-button px-4 py-2 font-medium text-sm text-gray-500 hover:text-gray-700" data-tab="microbiome">Microbiome</button> | |
| <button class="tab-button px-4 py-2 font-medium text-sm text-gray-500 hover:text-gray-700" data-tab="nutrition">Nutrition</button> | |
| <button class="tab-button px-4 py-2 font-medium text-sm text-gray-500 hover:text-gray-700" data-tab="herbal">Herbal</button> | |
| </div> | |
| </div> | |
| <!-- Results Grid --> | |
| <div class="grid gap-6" id="resultsContainer"> | |
| <!-- Results will be dynamically inserted here --> | |
| </div> | |
| <!-- AI Suggestions Section --> | |
| <div id="aiSuggestions" class="mt-8 hidden"> | |
| <h3 class="font-medium text-gray-700 mb-4 flex items-center"> | |
| <i class="fas fa-lightbulb text-yellow-500 mr-2"></i> AI-Powered Research Suggestions | |
| </h3> | |
| <div class="grid md:grid-cols-2 gap-4" id="suggestionsContainer"> | |
| <!-- Suggestions will be dynamically inserted here --> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button class="bg-white border border-gray-200 text-gray-700 px-5 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors"> | |
| <i class="fas fa-sync-alt mr-2"></i> Load More Results | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Database Integration Section --> | |
| <section class="bg-gray-50 py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-10"> | |
| <h2 class="text-2xl font-light text-gray-800 mb-3">Intelligent Database <span class="font-medium">Integration</span></h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto text-sm">Our system automatically finds relationships between data across different scientific domains</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6 mb-12"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600 mb-4"> | |
| <i class="fas fa-project-diagram text-xl"></i> | |
| </div> | |
| <h3 class="font-medium text-lg mb-2">Cross-Database Relationships</h3> | |
| <p class="text-gray-600 text-sm mb-4">Automatically identifies connections between compounds, genes, microbiome impacts, and clinical studies.</p> | |
| <div class="database-relation ncbi-relation text-xs text-gray-500 mb-1">NCBI Gene Data → PubChem Compounds</div> | |
| <div class="database-relation pubchem-relation text-xs text-gray-500 mb-1">PubChem → Microbiome Interactions</div> | |
| <div class="database-relation phytochem-relation text-xs text-gray-500">Phytochemicals → Clinical Trial Results</div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mb-4"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| <h3 class="font-medium text-lg mb-2">AI-Powered Suggestions</h3> | |
| <p class="text-gray-600 text-sm mb-4">Machine learning identifies potentially relevant research you might have missed based on your search patterns.</p> | |
| <div class="text-xs text-gray-500 mb-2">Common suggestions include:</div> | |
| <div class="text-xs bg-blue-50 text-blue-700 px-3 py-1 rounded-full inline-block mr-2 mb-2">Related Metabolic Pathways</div> | |
| <div class="text-xs bg-purple-50 text-purple-700 px-3 py-1 rounded-full inline-block mr-2 mb-2">Alternative Compounds</div> | |
| <div class="text-xs bg-green-50 text-green-700 px-3 py-1 rounded-full inline-block">Microbiome Interactions</div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mb-4"> | |
| <i class="fas fa-chart-network text-xl"></i> | |
| </div> | |
| <h3 class="font-medium text-lg mb-2">Visual Knowledge Mapping</h3> | |
| <p class="text-gray-600 text-sm mb-4">Interactive graphs show how different concepts connect across multiple research domains.</p> | |
| <div class="flex items-center text-xs text-gray-500 mb-2"> | |
| <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> | |
| <span>Primary search term</span> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500 mb-2"> | |
| <div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div> | |
| <span>Directly related concepts</span> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <div class="w-3 h-3 bg-orange-500 rounded-full mr-2"></div> | |
| <span>Secondary relationships</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <button class="bg-green-600 text-white px-6 py-2 rounded-full text-sm font-medium hover:bg-green-700 transition-colors"> | |
| <i class="fas fa-database mr-2"></i> View All Database Connections | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-lg font-medium mb-4 flex items-center"> | |
| <i class="fas fa-brain mr-2" aria-hidden="true"></i> HealthExplorer AI | |
| </h3> | |
| <p class="text-gray-400 text-sm"> | |
| Advanced research discovery through intelligent database integration. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-4 text-sm">Research Tools</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Knowledge Graph</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Database Cross-Reference</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">AI Suggestions</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-4 text-sm">Databases</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Molecular Biology</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Nutrition Science</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">Herbal Research</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-4 text-sm">Connect</h4> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" target="_blank" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors focus:outline-none" aria-label="Twitter"> | |
| <i class="fab fa-twitter text-xs" aria-hidden="true"></i> | |
| </a> | |
| <a href="#" target="_blank" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors focus:outline-none" aria-label="LinkedIn"> | |
| <i class="fab fa-linkedin-in text-xs" aria-hidden="true"></i> | |
| </a> | |
| <a href="#" target="_blank" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors focus:outline-none" aria-label="Github"> | |
| <i class="fab fa-github text-xs" aria-hidden="true"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-400 text-sm">[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 text-center text-gray-400 text-xs"> | |
| <p>© 2024 HealthExplorer AI. Advanced research discovery platform.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Extended sample data with cross-database relationships | |
| const sampleResults = [ | |
| { | |
| id: 'res1', | |
| title: "Curcumin's Anti-Inflammatory Mechanisms", | |
| source: "PubMed Central", | |
| year: "2023", | |
| type: "Review Article", | |
| databases: ["PubMed", "PubChem", "Clinical Trials"], | |
| snippet: "Comprehensive review of curcumin's anti-inflammatory mechanisms through NF-κB pathway inhibition and clinical applications in chronic inflammatory conditions.", | |
| link: "https://www.ncbi.nlm.nih.gov/pmc/articles/example", | |
| relevance: 98, | |
| categories: ["herbal", "nutrition"], | |
| related: ["res2", "res3", "res5", "res8"], | |
| compounds: ["Curcumin", "Turmeric"], | |
| pathways: ["NF-κB", "COX-2"], | |
| genes: ["TNF", "IL6"] | |
| }, | |
| { | |
| id: 'res2', | |
| title: "Microbiome Modulation by Curcumin", | |
| source: "Human Microbiome Project", | |
| year: "2022", | |
| type: "Research Study", | |
| databases: ["Microbiome", "NCBI", "PubMed"], | |
| snippet: "Study showing curcumin's impact on gut microbiota diversity and its correlation with reduced systemic inflammation markers in human subjects.", | |
| link: "https://hmpdacc.org/example", | |
| relevance: 95, | |
| categories: ["microbiome", "nutrition"], | |
| related: ["res1", "res4", "res6"], | |
| bacteria: ["Bacteroides", "Lactobacillus"], | |
| metabolites: ["Butyrate"] | |
| }, | |
| { | |
| id: 'res3', | |
| title: "Curcumin Chemical Properties & Bioavailability", | |
| source: "PubChem", | |
| year: "2023", | |
| type: "Chemical Database", | |
| databases: ["PubChem", "FoodData"], | |
| snippet: "Detailed chemical properties, solubility, and known biological activities of curcumin (diferuloylmethane), including bioavailability enhancement methods.", | |
| link: "https://pubchem.ncbi.nlm.nih.gov/compound/curcumin", | |
| relevance: 92, | |
| categories: ["nutrition"], | |
| related: ["res1", "res7"], | |
| solubility: "Lipophilic", | |
| bioavailability: "Low (enhanced with piperine)" | |
| }, | |
| { | |
| id: 'res4', | |
| title: "Traditional Uses of Turmeric", | |
| source: "Dr. Duke's Phytochemical", | |
| year: "2021", | |
| type: "Ethnobotanical Database", | |
| databases: ["Phytochemical", "PubMed"], | |
| snippet: "Documentation of turmeric's traditional uses in Ayurvedic medicine for inflammatory conditions, wound healing, and digestive disorders.", | |
| link: "https://phytochem.nal.usda.gov/example", | |
| relevance: 89, | |
| categories: ["herbal"], | |
| related: ["res1", "res5"], | |
| traditionalUses: ["Inflammation", "Digestion", "Wound Healing"] | |
| }, | |
| { | |
| id: 'res5', | |
| title: "Curcumin Clinical Trials for IBD", | |
| source: "ClinicalTrials.gov", | |
| year: "2022", | |
| type: "Clinical Trial", | |
| databases: ["Clinical Trials", "PubMed"], | |
| snippet: "Randomized controlled trial examining curcumin's effects on inflammatory bowel disease symptoms and biomarkers.", | |
| link: "https://clinicaltrials.gov/example", | |
| relevance: 94, | |
| categories: ["clinical"], | |
| related: ["res1", "res2", "res8"], | |
| conditions: ["Crohn's Disease", "Ulcerative Colitis"], | |
| outcomes: ["Reduced CRP", "Improved symptoms"] | |
| }, | |
| { | |
| id: 'res6', | |
| title: "Gut Microbiota and Inflammation Pathways", | |
| source: "NCBI Gene", | |
| year: "2023", | |
| type: "Genomic Study", | |
| databases: ["NCBI", "Microbiome"], | |
| snippet: "Analysis of how specific gut bacteria influence inflammatory pathways relevant to autoimmune conditions.", | |
| link: "https://www.ncbi.nlm.nih.gov/gene/example", | |
| relevance: 90, | |
| categories: ["microbiome"], | |
| related: ["res2", "res7"], | |
| genes: ["TLR4", "NOD2"], | |
| bacteria: ["E. coli", "B. fragilis"] | |
| }, | |
| { | |
| id: 'res7', | |
| title: "Piperine Enhancement of Curcumin Bioavailability", | |
| source: "FoodData Central", | |
| year: "2021", | |
| type: "Nutrition Study", | |
| databases: ["FoodData", "PubChem"], | |
| snippet: "Study demonstrating how piperine from black pepper enhances curcumin bioavailability by 2000% through metabolic pathway modulation.", | |
| link: "https://fdc.nal.usda.gov/example", | |
| relevance: 93, | |
| categories: ["nutrition"], | |
| related: ["res1", "res3"], | |
| compounds: ["Piperine", "Curcumin"], | |
| mechanism: "Inhibition of glucuronidation" | |
| }, | |
| { | |
| id: 'res8', | |
| title: "Comparative Analysis of Anti-Inflammatory Compounds", | |
| source: "PubMed", | |
| year: "2023", | |
| type: "Meta-Analysis", | |
| databases: ["PubMed", "PubChem", "Clinical Trials"], | |
| snippet: "Systematic comparison of curcumin, resveratrol, and other natural compounds' anti-inflammatory efficacy across clinical studies.", | |
| link: "https://pubmed.ncbi.nlm.nih.gov/example", | |
| relevance: 96, | |
| categories: ["clinical", "nutrition"], | |
| related: ["res1", "res5"], | |
| compounds: ["Curcumin", "Resveratrol", "Quercetin"], | |
| conclusion: "Curcumin shows strongest evidence for chronic inflammation" | |
| }, | |
| { | |
| id: 'res9', | |
| title: "Curcumin Metabolites and Microbiome Interactions", | |
| source: "Microbiome Journal", | |
| year: "2023", | |
| type: "Research Paper", | |
| databases: ["Microbiome", "PubChem"], | |
| snippet: "Identification of specific curcumin metabolites produced by gut bacteria and their anti-inflammatory effects on intestinal epithelium.", | |
| link: "https://microbiomejournal.com/example", | |
| relevance: 91, | |
| categories: ["microbiome"], | |
| related: ["res1", "res2", "res6"], | |
| metabolites: ["Tetrahydrocurcumin", "Hexahydrocurcumin"], | |
| effects: ["Reduced IL-8", "Improved barrier function"] | |
| }, | |
| { | |
| id: 'res10', | |
| title: "Traditional Preparation Methods for Turmeric", | |
| source: "Ethnobotanical Database", | |
| year: "2020", | |
| type: "Cultural Study", | |
| databases: ["Phytochemical", "FoodData"], | |
| snippet: "Analysis of traditional preparation methods that enhance turmeric's bioavailability and therapeutic effects in various cultural practices.", | |
| link: "https://ethnobotany.org/example", | |
| relevance: 87, | |
| categories: ["herbal"], | |
| related: ["res1", "res4", "res7"], | |
| methods: ["Heating with fats", "Combination with pepper"] | |
| } | |
| ]; | |
| // AI Suggestions based on search patterns | |
| const aiSuggestions = [ | |
| { | |
| title: "Explore Related Metabolic Pathways", | |
| description: "Curcumin interacts with multiple inflammatory pathways including NF-κB, COX-2, and LOX. View the complete pathway map.", | |
| icon: "fas fa-project-diagram", | |
| color: "text-blue-500", | |
| action: "View Pathways" | |
| }, | |
| { | |
| title: "Compare with Similar Compounds", | |
| description: "Resveratrol and quercetin share some anti-inflammatory mechanisms with curcumin. See comparative effectiveness data.", | |
| icon: "fas fa-balance-scale", | |
| color: "text-purple-500", | |
| action: "Compare Compounds" | |
| }, | |
| { | |
| title: "Microbiome Interaction Analysis", | |
| description: "View how curcumin metabolites produced by gut bacteria contribute to its systemic effects.", | |
| icon: "fas fa-bacterium", | |
| color: "text-green-500", | |
| action: "Analyze Interactions" | |
| }, | |
| { | |
| title: "Bioavailability Enhancement Methods", | |
| description: "Discover formulations and combinations that significantly improve curcumin absorption.", | |
| icon: "fas fa-chart-line", | |
| color: "text-orange-500", | |
| action: "View Methods" | |
| } | |
| ]; | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Typewriter effect | |
| const phrases = [ | |
| "Cross-Referencing Scientific Research", | |
| "AI-Powered Database Connections", | |
| "Holistic Health Insights", | |
| "Interdisciplinary Research Discovery" | |
| ]; | |
| let currentPhrase = 0; | |
| let currentChar = 0; | |
| let isDeleting = false; | |
| let isEnd = false; | |
| function typeWriter() { | |
| const typewriterElement = document.querySelector('.typewriter'); | |
| if (!typewriterElement) return; | |
| const currentText = phrases[currentPhrase]; | |
| if (isDeleting) { | |
| typewriterElement.textContent = currentText.substring(0, currentChar - 1); | |
| currentChar--; | |
| } else { | |
| typewriterElement.textContent = currentText.substring(0, currentChar + 1); | |
| currentChar++; | |
| } | |
| if (!isDeleting && currentChar === currentText.length) { | |
| isEnd = true; | |
| isDeleting = true; | |
| setTimeout(typeWriter, 2000); | |
| } else if (isDeleting && currentChar === 0) { | |
| isDeleting = false; | |
| currentPhrase = (currentPhrase + 1) % phrases.length; | |
| setTimeout(typeWriter, 500); | |
| } else { | |
| const speed = isDeleting ? 50 : 100; | |
| setTimeout(typeWriter, speed); | |
| } | |
| } | |
| setTimeout(typeWriter, 1000); | |
| // Database filter toggles | |
| const dbFilters = document.querySelectorAll('#databaseFilters input[type="checkbox"]'); | |
| dbFilters.forEach(filter => { | |
| filter.addEventListener('change', function() { | |
| const parent = this.parentElement; | |
| if (this.checked) { | |
| parent.classList.add('bg-blue-50', 'text-blue-700', 'border-blue-200'); | |
| } else { | |
| parent.classList.remove('bg-blue-50', 'text-blue-700', 'border-blue-200'); | |
| } | |
| }); | |
| }); | |
| // Search functionality | |
| document.getElementById('healthSearchButton').addEventListener('click', performSearch); | |
| document.getElementById('healthSearchInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| performSearch(); | |
| } | |
| }); | |
| function performSearch() { | |
| const searchTerm = document.getElementById('healthSearchInput').value.trim(); | |
| if (searchTerm) { | |
| // Show loading state | |
| const searchButton = document.getElementById('healthSearchButton'); | |
| const originalButtonText = searchButton.innerHTML; | |
| searchButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analyzing...'; | |
| searchButton.disabled = true; | |
| // In a real app, this would be API calls to the various databases | |
| // For this demo, we'll use setTimeout to simulate network delay | |
| setTimeout(() => { | |
| // Display results | |
| displayResults(searchTerm); | |
| // Restore button | |
| searchButton.innerHTML = originalButtonText; | |
| searchButton.disabled = false; | |
| }, 1500); | |
| } | |
| } | |
| function displayResults(searchTerm) { | |
| const resultsContainer = document.getElementById('resultsContainer'); | |
| const resultCountElement = document.getElementById('resultCount'); | |
| const dbCountElement = document.getElementById('dbCount'); | |
| const searchResultsSection = document.getElementById('searchResults'); | |
| const aiSuggestionsSection = document.getElementById('aiSuggestions'); | |
| const suggestionsContainer = document.getElementById('suggestionsContainer'); | |
| // Clear previous results | |
| resultsContainer.innerHTML = ''; | |
| suggestionsContainer.innerHTML = ''; | |
| // Filter sample results (in real app, this would be done server-side) | |
| const filteredResults = sampleResults.filter(result => | |
| result.title.toLowerCase().includes(searchTerm.toLowerCase()) || | |
| result.snippet.toLowerCase().includes(searchTerm.toLowerCase()) || | |
| (result.compounds && result.compounds.some(c => c.toLowerCase().includes(searchTerm.toLowerCase()))) | |
| ); | |
| // Count unique databases | |
| const uniqueDBs = new Set(); | |
| filteredResults.forEach(result => { | |
| result.databases.forEach(db => uniqueDBs.add(db)); | |
| }); | |
| // Update result counts | |
| resultCountElement.textContent = filteredResults.length; | |
| dbCountElement.textContent = uniqueDBs.size; | |
| // Display each result | |
| filteredResults.forEach(result => { | |
| const resultElement = document.createElement('div'); | |
| resultElement.className = 'result-card bg-white p-5 rounded-lg shadow-sm border border-gray-100'; | |
| resultElement.innerHTML = ` | |
| <div class="flex justify-between items-start mb-2"> | |
| <div class="font-medium text-gray-800">${result.title}</div> | |
| <div class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">${result.relevance}% relevance</div> | |
| </div> | |
| <div class="text-gray-500 text-xs mb-3">${result.source} • ${result.year} ${result.type}</div> | |
| <div class="flex flex-wrap text-xs mb-3"> | |
| ${result.databases.map(db => | |
| `<span class="database-chip"><i class="fas fa-database"></i> ${db}</span>` | |
| ).join('')} | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">${result.snippet}</p> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| ${result.categories.map(cat => | |
| `<span class="text-xs px-2 py-1 rounded-full ${getCategoryColor(cat)}">${cat}</span>` | |
| ).join('')} | |
| </div> | |
| <a href="${result.link}" target="_blank" class="text-green-600 text-sm font-medium inline-flex items-center"> | |
| View in ${result.databases[0]} <i class="fas fa-external-link-alt ml-1 text-xs"></i> | |
| </a> | |
| `; | |
| resultsContainer.appendChild(resultElement); | |
| }); | |
| // Display AI suggestions | |
| aiSuggestions.forEach(suggestion => { | |
| const suggestionElement = document.createElement('div'); | |
| suggestionElement.className = 'suggestion-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-4'; | |
| suggestionElement.innerHTML = ` | |
| <div class="flex items-start mb-2"> | |
| <div class="${suggestion.color} text-lg mr-3 mt-1"> | |
| <i class="${suggestion.icon}"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">${suggestion.title}</h4> | |
| <p class="text-gray-600 text-sm">${suggestion.description}</p> | |
| </div> | |
| </div> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full mt-2 transition-colors"> | |
| ${suggestion.action} <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| `; | |
| suggestionsContainer.appendChild(suggestionElement); | |
| }); | |
| // Create knowledge graph | |
| createKnowledgeGraph(filteredResults); | |
| // Show results and suggestions sections | |
| searchResultsSection.classList.remove('hidden'); | |
| aiSuggestionsSection.classList.remove('hidden'); | |
| // Scroll to results | |
| searchResultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| function getCategoryColor(category) { | |
| switch(category) { | |
| case 'microbiome': return 'bg-purple-100 text-purple-800'; | |
| case 'nutrition': return 'bg-blue-100 text-blue-800'; | |
| case 'herbal': return 'bg-green-100 text-green-800'; | |
| case 'clinical': return 'bg-orange-100 text-orange-800'; | |
| default: return 'bg-gray-100 text-gray-800'; | |
| } | |
| } | |
| function createKnowledgeGraph(results) { | |
| const graphContainer = document.getElementById('knowledgeGraph'); | |
| graphContainer.innerHTML = ''; | |
| // Create nodes for each result | |
| const nodes = []; | |
| const centerX = graphContainer.offsetWidth / 2; | |
| const centerY = graphContainer.offsetHeight / 2; | |
| const radius = Math.min(centerX, centerY) * 0.8; | |
| // Add main node (search term) | |
| const mainNode = document.createElement('div'); | |
| mainNode.className = 'graph-node bg-green-500'; | |
| mainNode.style.left = `${centerX - 40}px`; | |
| mainNode.style.top = `${centerY - 40}px`; | |
| mainNode.textContent = 'Curcumin'; | |
| nodes.push({ element: mainNode, id: 'main', x: centerX, y: centerY }); | |
| graphContainer.appendChild(mainNode); | |
| // Add result nodes in a circle around main node | |
| const angleStep = (2 * Math.PI) / results.length; | |
| results.forEach((result, index) => { | |
| const angle = index * angleStep; | |
| const x = centerX + radius * Math.cos(angle) - 40; | |
| const y = centerY + radius * Math.sin(angle) - 40; | |
| const node = document.createElement('div'); | |
| node.className = 'graph-node bg-blue-500'; | |
| node.style.left = `${x}px`; | |
| node.style.top = `${y}px`; | |
| node.textContent = result.source.split(' ')[0]; | |
| // Add relevance badge | |
| const badge = document.createElement('div'); | |
| badge.className = 'relevance-badge'; | |
| badge.textContent = result.relevance.toString().charAt(0); | |
| node.appendChild(badge); | |
| nodes.push({ element: node, id: result.id, x: x + 40, y: y + 40 }); | |
| graphContainer.appendChild(node); | |
| // Create line to main node | |
| const line = document.createElement('div'); | |
| line.className = 'graph-line'; | |
| const length = Math.sqrt(Math.pow(x + 40 - centerX, 2) + Math.pow(y + 40 - centerY, 2)); | |
| const lineAngle = Math.atan2(y + 40 - centerY, x + 40 - centerX); | |
| line.style.width = `${length}px`; | |
| line.style.left = `${centerX}px`; | |
| line.style.top = `${centerY}px`; | |
| line.style.transform = `rotate(${lineAngle}rad)`; | |
| graphContainer.appendChild(line); | |
| }); | |
| // Add interactivity to nodes | |
| nodes.forEach(node => { | |
| node.element.addEventListener('click', function() { | |
| // Highlight this node and connected nodes | |
| nodes.forEach(n => { | |
| n.element.style.transform = ''; | |
| n.element.style.zIndex = ''; | |
| }); | |
| this.style.transform = 'scale(1.2)'; | |
| this.style.zIndex = '10'; | |
| // In a real app, this would show details for the selected node | |
| }); | |
| }); | |
| } | |
| // Tab switching functionality | |
| const tabButtons = document.querySelectorAll('.tab-button'); | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| // Remove active state from all buttons | |
| tabButtons.forEach(btn => { | |
| btn.classList.remove('border-b-2', 'border-green-500', 'text-green-600'); | |
| btn.classList.add('text-gray-500'); | |
| }); | |
| // Add active state to clicked button | |
| this.classList.add('border-b-2', 'border-green-500', 'text-green-600'); | |
| this.classList.remove('text-gray-500'); | |
| // In a real app, this would filter the results by category | |
| }); | |
| }); | |
| }); | |
| </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=Neomyst/microbiome-explorer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |