Spaces:
Running
Running
File size: 3,228 Bytes
158211c a874986 10ac650 a874986 10ac650 a874986 10ac650 a874986 484ef72 a874986 |
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 |
import { Zap, MessageSquare } from 'lucide-react';
interface HeaderProps {
isConnected: boolean;
feedbackStats?: {
total: number;
correct: number;
incorrect: number;
} | null;
}
export function Header({ isConnected, feedbackStats }: HeaderProps) {
return (
<header className="bg-white border-b border-dark-border px-8 py-4 shadow-sm">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-nvidia-green/10 border border-nvidia-green/20">
<Zap className="w-5 h-5 text-nvidia-green" />
</div>
<div>
<h1 className="text-xl font-semibold text-text-primary tracking-tight">
Fetal<span className="text-nvidia-green">CLIP</span>
</h1>
<p className="text-text-muted text-xs">
Foundation model for zero-shot fetal ultrasound analysis
</p>
</div>
</div>
<div className="flex items-center gap-5">
{/* Feedback counter */}
{feedbackStats && feedbackStats.total > 0 && (
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-dark-input border border-dark-border">
<MessageSquare className="w-3.5 h-3.5 text-accent-blue" />
<span className="text-xs text-text-secondary">
<span className="text-green-600 font-medium">{feedbackStats.correct}</span>
<span className="text-text-muted mx-1">/</span>
<span className="text-red-500 font-medium">{feedbackStats.incorrect}</span>
</span>
{feedbackStats.total >= 5 && (
<span className="text-xs text-text-muted">
({Math.round(feedbackStats.correct / feedbackStats.total * 100)}%)
</span>
)}
</div>
)}
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-dark-input border border-dark-border">
<div
className={`w-2 h-2 rounded-full transition-colors ${
isConnected
? 'bg-nvidia-green shadow-[0_0_8px_rgba(118,185,0,0.5)]'
: 'bg-red-500 animate-pulse'
}`}
/>
<span className="text-xs text-text-secondary">
{isConnected ? 'Model Ready' : 'Connecting...'}
</span>
</div>
<a
href="https://huggingface.co/numansaeed/fetalclip-model"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1.5 text-sm text-accent-blue hover:text-accent-blue-hover transition-colors"
>
<span>🤗</span>
<span>Model Hub</span>
</a>
<a
href="https://arxiv.org/abs/2502.14807"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1.5 text-sm text-accent-blue hover:text-accent-blue-hover transition-colors"
>
<span>📄</span>
<span>Paper</span>
</a>
</div>
</div>
</header>
);
}
|