Spaces:
Sleeping
Sleeping
File size: 7,071 Bytes
654bfe6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 | import React from 'react';
import { Activity, Cpu, Database, Dna, FileText, Sparkles, Layers, ShieldCheck } from 'lucide-react';
interface NavbarProps {
useTissueConditioning: boolean;
onToggleTissueConditioning: () => void;
onOpenAIAdvisor: () => void;
activeTab: 'organ_prediction' | 'model_trainer' | 'explainable_xai' | 'benchmark_sider';
onChangeTab: (tab: 'organ_prediction' | 'model_trainer' | 'explainable_xai' | 'benchmark_sider') => void;
isTraining: boolean;
}
export const Navbar: React.FC<NavbarProps> = ({
useTissueConditioning,
onToggleTissueConditioning,
onOpenAIAdvisor,
activeTab,
onChangeTab,
isTraining
}) => {
return (
<header className="bg-slate-900 border-b border-slate-800 text-slate-100 sticky top-0 z-30 shadow-lg">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
{/* Brand & Badge */}
<div className="flex items-center space-x-3">
<div className="p-2 bg-gradient-to-tr from-indigo-600 via-purple-600 to-pink-600 rounded-xl text-white shadow-md shadow-indigo-900/40">
<Dna className="w-5 h-5 animate-pulse" />
</div>
<div>
<div className="flex items-center space-x-2">
<h1 className="text-lg font-bold tracking-tight bg-gradient-to-r from-white via-slate-100 to-indigo-300 bg-clip-text text-transparent">
EpiADR-Net
</h1>
<span className="text-[10px] bg-indigo-950 text-indigo-300 border border-indigo-700/60 font-mono font-bold px-1.5 py-0.5 rounded uppercase tracking-wider">
v2.1 GTEx V8
</span>
</div>
<p className="text-xs text-slate-400 font-medium">Tissue-Conditioned Zero-Shot Toxicity AI</p>
</div>
</div>
{/* Primary Navigation Tabs */}
<nav className="hidden md:flex items-center space-x-1 bg-slate-950 p-1 rounded-xl border border-slate-800">
<button
onClick={() => onChangeTab('organ_prediction')}
className={`flex items-center space-x-2 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${
activeTab === 'organ_prediction'
? 'bg-indigo-600 text-white shadow-sm'
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-900'
}`}
>
<Activity className="w-4 h-4" />
<span>Organ Safety Profile</span>
</button>
<button
onClick={() => onChangeTab('model_trainer')}
className={`flex items-center space-x-2 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${
activeTab === 'model_trainer'
? 'bg-indigo-600 text-white shadow-sm'
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-900'
}`}
>
<Cpu className="w-4 h-4" />
<span>Train & Finetune Model</span>
{isTraining && (
<span className="w-2 h-2 rounded-full bg-amber-400 animate-ping"></span>
)}
</button>
<button
onClick={() => onChangeTab('explainable_xai')}
className={`flex items-center space-x-2 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${
activeTab === 'explainable_xai'
? 'bg-indigo-600 text-white shadow-sm'
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-900'
}`}
>
<Layers className="w-4 h-4" />
<span>XAI Hotspots</span>
</button>
<button
onClick={() => onChangeTab('benchmark_sider')}
className={`flex items-center space-x-2 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${
activeTab === 'benchmark_sider'
? 'bg-indigo-600 text-white shadow-sm'
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-900'
}`}
>
<Database className="w-4 h-4" />
<span>SIDER 4.1 Benchmarks</span>
</button>
</nav>
{/* Tissue Conditioning Toggle & Gemini AI Advisor */}
<div className="flex items-center space-x-3">
{/* Tissue Conditioning Mode Toggle */}
<button
onClick={onToggleTissueConditioning}
className={`hidden lg:flex items-center space-x-2 px-3 py-1.5 rounded-lg text-xs font-semibold border transition-all ${
useTissueConditioning
? 'bg-emerald-950/80 border-emerald-700 text-emerald-300'
: 'bg-slate-950 border-slate-800 text-slate-400 hover:text-slate-200'
}`}
title="Toggle between GTEx V8 Tissue-Conditioned 16-Head Attention Mode vs Molecule-Only Baseline"
>
<ShieldCheck className={`w-4 h-4 ${useTissueConditioning ? 'text-emerald-400' : 'text-slate-500'}`} />
<span>{useTissueConditioning ? 'Tissue-Conditioned (GTEx V8)' : 'Molecule-Only Baseline'}</span>
</button>
{/* AI Preclinical Safety Advisor */}
<button
onClick={onOpenAIAdvisor}
className="flex items-center space-x-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 hover:opacity-90 text-white text-xs font-bold px-3 py-2 rounded-xl shadow-md transition-all active:scale-95"
>
<Sparkles className="w-4 h-4" />
<span>AI Preclinical Report</span>
</button>
</div>
</div>
{/* Mobile Sub-Nav */}
<div className="md:hidden flex overflow-x-auto p-2 bg-slate-950 border-t border-slate-800 space-x-2 no-scrollbar">
<button
onClick={() => onChangeTab('organ_prediction')}
className={`whitespace-nowrap px-3 py-1 rounded text-xs font-medium ${
activeTab === 'organ_prediction' ? 'bg-indigo-600 text-white' : 'bg-slate-900 text-slate-300'
}`}
>
Organ Profile
</button>
<button
onClick={() => onChangeTab('model_trainer')}
className={`whitespace-nowrap px-3 py-1 rounded text-xs font-medium ${
activeTab === 'model_trainer' ? 'bg-indigo-600 text-white' : 'bg-slate-900 text-slate-300'
}`}
>
Train Model
</button>
<button
onClick={() => onChangeTab('explainable_xai')}
className={`whitespace-nowrap px-3 py-1 rounded text-xs font-medium ${
activeTab === 'explainable_xai' ? 'bg-indigo-600 text-white' : 'bg-slate-900 text-slate-300'
}`}
>
XAI Hotspots
</button>
<button
onClick={() => onChangeTab('benchmark_sider')}
className={`whitespace-nowrap px-3 py-1 rounded text-xs font-medium ${
activeTab === 'benchmark_sider' ? 'bg-indigo-600 text-white' : 'bg-slate-900 text-slate-300'
}`}
>
SIDER 4.1 Set
</button>
</div>
</header>
);
};
|