Spaces:
Paused
Paused
File size: 3,687 Bytes
1c72248 |
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 |
import React from 'react';
import useFilesList from '@/hooks/useFilesList';
import Link from 'next/link';
import { Loader2, AlertCircle, Download, Box, Brain } from 'lucide-react';
export default function FilesWidget({ jobID }: { jobID: string }) {
const { files, status, refreshFiles } = useFilesList(jobID, 5000);
const cleanSize = (size: number) => {
if (size < 1024) {
return `${size} B`;
} else if (size < 1024 * 1024) {
return `${(size / 1024).toFixed(1)} KB`;
} else if (size < 1024 * 1024 * 1024) {
return `${(size / (1024 * 1024)).toFixed(1)} MB`;
} else {
return `${(size / (1024 * 1024 * 1024)).toFixed(1)} GB`;
}
};
return (
<div className="col-span-2 bg-gray-900 rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 border border-gray-800">
<div className="bg-gray-800 px-4 py-3 flex items-center justify-between">
<div className="flex items-center space-x-2">
<Brain className="w-5 h-5 text-purple-400" />
<h2 className="font-semibold text-gray-100">Checkpoints</h2>
<span className="px-2 py-0.5 bg-gray-700 rounded-full text-xs text-gray-300">{files.length}</span>
</div>
</div>
<div className="p-2">
{status === 'loading' && (
<div className="flex items-center justify-center py-4">
<Loader2 className="w-5 h-5 text-gray-400 animate-spin" />
</div>
)}
{status === 'error' && (
<div className="flex items-center justify-center py-4 text-rose-400 space-x-2">
<AlertCircle className="w-4 h-4" />
<span className="text-sm">Error loading checkpoints</span>
</div>
)}
{['success', 'refreshing'].includes(status) && (
<div className="space-y-1">
{files.map((file, index) => {
const fileName = file.path.split('/').pop() || '';
const nameWithoutExt = fileName.replace('.safetensors', '');
return (
<a
key={index}
target="_blank"
href={`/api/files/${encodeURIComponent(file.path)}`}
className="group flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-gray-800 transition-all duration-200"
>
<div className="flex items-center space-x-2 min-w-0">
<Box className="w-4 h-4 text-purple-400 flex-shrink-0" />
<div className="flex flex-col min-w-0">
<div className="flex text-sm text-gray-200">
<span className="overflow-hidden text-ellipsis direction-rtl whitespace-nowrap">
{nameWithoutExt}
</span>
</div>
<span className="text-xs text-gray-500">.safetensors</span>
</div>
</div>
<div className="flex items-center space-x-3 flex-shrink-0">
<span className="text-xs text-gray-400">{cleanSize(file.size)}</span>
<div className="bg-purple-500 bg-opacity-0 group-hover:bg-opacity-10 rounded-full p-1 transition-all">
<Download className="w-3 h-3 text-purple-400" />
</div>
</div>
</a>
);
})}
</div>
)}
{['success', 'refreshing'].includes(status) && files.length === 0 && (
<div className="text-center py-4 text-gray-400 text-sm">No checkpoints available</div>
)}
</div>
</div>
);
}
|