| |
| import { useEffect } from 'react'; |
| import { Loader, CheckCircle, XCircle, ExternalLink } from 'lucide-react'; |
| import { useHFDatasetValidator } from '../../hooks/useHFValidators'; |
|
|
| export default function DatasetValidator({ datasetId }: { datasetId: string }) { |
| const { loading, result, validate } = useHFDatasetValidator(); |
|
|
| useEffect(() => { |
| validate(datasetId); |
| }, [datasetId, validate]); |
|
|
| if (!datasetId?.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 Dataset...</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">✅ Dataset Verification Successful</p> |
| <div className="mt-2 space-y-1 text-xs text-green-700"> |
| <p> |
| <strong>Author: </strong> |
| {result.datasetInfo.author} |
| </p> |
| <p> |
| <strong>Download: </strong> |
| {result.datasetInfo.downloads.toLocaleString()} |
| </p> |
| {!!result.datasetInfo.task_categories?.length && ( |
| <p> |
| <strong>Task: </strong> |
| {result.datasetInfo.task_categories.join(', ')} |
| </p> |
| )} |
| <p> |
| <strong>Description: </strong> |
| {result.datasetInfo.description.slice(0, 100)}... |
| </p> |
| </div> |
| <a |
| href={`https://huggingface.co/datasets/${datasetId}`} |
| 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">❌ Dataset Verification Failed</p> |
| <p className="text-xs text-red-700 mt-1">{result.error}</p> |
| </> |
| )} |
| </div> |
| </div> |
| </div> |
| )} |
| </div> |
| ); |
| } |
|
|
