File size: 2,843 Bytes
7c447a5 |
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 |
// src/components/validators/ModelValidator.tsx
import { useEffect } from 'react';
import { Loader, CheckCircle, XCircle, ExternalLink } from 'lucide-react';
import { useHFModelValidator } from '../../hooks/useHFValidators';
export default function ModelValidator({
modelId,
type,
}: {
modelId: string;
type: 'language' | 'scorer';
}) {
const { loading, result, validate } = useHFModelValidator();
useEffect(() => {
validate(modelId, type);
}, [modelId, type, validate]);
if (!modelId?.includes('/')) return null;
return (
<div className="mt-3">
{loading && (
<div className="flex items-center gap-2 p-3 bg-yellow-50 rounded-lg">
<Loader className="w-4 h-4 text-yellow-600 animate-spin" />
<span className="text-sm text-yellow-800">Validating Model...</span>
</div>
)}
{!!result && !loading && (
<div className={`p-3 rounded-lg ${result.isValid ? 'bg-green-50' : 'bg-red-50'}`}>
<div className="flex items-start gap-2">
{result.isValid ? (
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5" />
) : (
<XCircle className="w-4 h-4 text-red-600 mt-0.5" />
)}
<div className="flex-1">
{result.isValid ? (
<>
<p className="text-sm font-medium text-green-800">✅ Model Verification Sucessful</p>
<div className="mt-2 space-y-1 text-xs text-green-700">
<p>
<strong>Author: </strong>
{result.modelInfo.author}
</p>
<p>
<strong>Download: </strong>
{result.modelInfo.downloads.toLocaleString()}
</p>
{!!result.modelInfo.pipeline_tag && (
<p>
<strong>Task: </strong>
{result.modelInfo.pipeline_tag}
</p>
)}
</div>
<a
href={`https://huggingface.co/${modelId}`}
target="_blank"
rel="noreferrer"
className="inline-flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 mt-2"
>
<ExternalLink className="w-3 h-3" />
<span>View on Hugging Face</span>
</a>
</>
) : (
<>
<p className="text-sm font-medium text-red-800">❌ Model Verification Failed</p>
<p className="text-xs text-red-700 mt-1">{result.error}</p>
</>
)}
</div>
</div>
</div>
)}
</div>
);
}
|