Spaces:
Sleeping
Sleeping
| import React from 'react' | |
| export default function GenerationProgress({ model, progress, isGenerating }) { | |
| if (!isGenerating) return null | |
| return ( | |
| <div className="py-3"> | |
| {model === 'ace-step' && ( | |
| <div className="space-y-1.5"> | |
| <div className="flex items-center justify-between text-xs"> | |
| <span className="text-gray-400">Generating with ACE-Step...</span> | |
| {progress?.step && progress?.totalSteps && ( | |
| <span className="font-mono text-accent-400"> | |
| Step {progress.step}/{progress.totalSteps} | |
| </span> | |
| )} | |
| </div> | |
| <div className="h-1.5 rounded-full bg-white/[0.06] overflow-hidden"> | |
| <div | |
| className="h-full bg-accent-500 rounded-full transition-all duration-300" | |
| style={{ | |
| width: progress?.step && progress?.totalSteps | |
| ? `${(progress.step / progress.totalSteps) * 100}%` | |
| : '60%', | |
| animation: (!progress?.step) ? 'pulse 2s ease-in-out infinite' : 'none', | |
| }} | |
| /> | |
| </div> | |
| <span className="text-[10px] text-gray-600"> | |
| {progress?.estimateSeconds | |
| ? `~${progress.estimateSeconds}s remaining` | |
| : 'XL Turbo: ~20-60s depending on duration'} | |
| </span> | |
| </div> | |
| )} | |
| {model === 'musicgen' && ( | |
| <div className="space-y-1.5"> | |
| <span className="text-xs text-gray-400">Generating with MusicGen...</span> | |
| <div className="h-1.5 rounded-full bg-white/[0.06] overflow-hidden"> | |
| <div | |
| className="h-full bg-accent-500 rounded-full" | |
| style={{ | |
| width: '100%', | |
| animation: 'pulse 2s ease-in-out infinite', | |
| opacity: 0.7, | |
| }} | |
| /> | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| ) | |
| } | |