source/src/components/Progress.jsx

/**
 * Progress Component
 *
 * Displays download progress for model files
 */

export default function Progress({ text, percentage, total }) {
  const formatBytes = (bytes) => {
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
  };

  const progress = percentage || 0;
  const totalSize = total ? formatBytes(total) : '';

  return (
    <div className="w-full mb-3">
      <div className="flex justify-between items-center mb-1">
        <span className="text-sm text-gray-300 truncate flex-1 mr-2">
          {text}
        </span>
        <span className="text-xs text-gray-400 whitespace-nowrap">
          {progress}% {totalSize && `(${totalSize})`}
        </span>
      </div>
      <div className="w-full bg-gray-700 rounded-full h-2">
        <div
          className="bg-blue-500 h-2 rounded-full transition-all duration-300"
          style={{ width: `${progress}%` }}
        />
      </div>
    </div>
  );
}