| |
| 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> |
| ); |
| } |
|
|
