Spaces:
Sleeping
Sleeping
| import React, { useRef, useState, useEffect } from 'react' | |
| export default function GenerationOutput({ | |
| sessionId, | |
| generationResult, | |
| onRegenerate, | |
| onUseAsSource, | |
| onPlaySection, | |
| }) { | |
| const audioRef = useRef(null) | |
| const [isPlaying, setIsPlaying] = useState(false) | |
| const [currentTime, setCurrentTime] = useState(0) | |
| const [duration, setDuration] = useState(0) | |
| const [abSource, setAbSource] = useState('generated') | |
| const [downloadFormat, setDownloadFormat] = useState('wav') | |
| const [audioSrc, setAudioSrc] = useState(null) | |
| const [loadError, setLoadError] = useState(false) | |
| // Only set the audio src when we get a NEW generation result | |
| useEffect(() => { | |
| if (generationResult && sessionId) { | |
| setAudioSrc(`/api/stem/${sessionId}/_continuation?format=wav&v=${Date.now()}`) | |
| setIsPlaying(false) | |
| setCurrentTime(0) | |
| setDuration(0) | |
| setAbSource('generated') | |
| setLoadError(false) | |
| } else { | |
| setAudioSrc(null) | |
| } | |
| }, [generationResult, sessionId]) | |
| const handleTimeUpdate = () => { | |
| if (audioRef.current) setCurrentTime(audioRef.current.currentTime) | |
| } | |
| const handleLoadedMetadata = () => { | |
| if (audioRef.current) setDuration(audioRef.current.duration) | |
| } | |
| const handleEnded = () => setIsPlaying(false) | |
| // Stop retrying on error — clear the src so the browser doesn't loop | |
| const handleError = () => { | |
| setLoadError(true) | |
| setIsPlaying(false) | |
| } | |
| const togglePlay = () => { | |
| if (!audioRef.current || loadError) return | |
| if (isPlaying) { | |
| audioRef.current.pause() | |
| setIsPlaying(false) | |
| } else { | |
| audioRef.current.play().catch(() => setIsPlaying(false)) | |
| setIsPlaying(true) | |
| } | |
| } | |
| const handleSeek = (e) => { | |
| if (!audioRef.current || !duration) return | |
| const rect = e.currentTarget.getBoundingClientRect() | |
| const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)) | |
| audioRef.current.currentTime = pct * duration | |
| } | |
| const formatTime = (t) => { | |
| const m = Math.floor(t / 60) | |
| const s = Math.floor(t % 60).toString().padStart(2, '0') | |
| return `${m}:${s}` | |
| } | |
| const handleDownload = () => { | |
| if (!sessionId) return | |
| const url = `/api/stem/${sessionId}/_continuation?format=${downloadFormat}` | |
| const a = document.createElement('a') | |
| a.href = url | |
| a.download = `generation.${downloadFormat}` | |
| a.click() | |
| } | |
| // Don't render anything until we have a generation result | |
| if (!generationResult) return null | |
| return ( | |
| <div className="space-y-3 pt-3 border-t border-white/[0.06]"> | |
| {/* Only mount <audio> when we have a valid src */} | |
| {audioSrc && !loadError && ( | |
| <audio | |
| ref={audioRef} | |
| src={audioSrc} | |
| preload="auto" | |
| onTimeUpdate={handleTimeUpdate} | |
| onLoadedMetadata={handleLoadedMetadata} | |
| onEnded={handleEnded} | |
| onError={handleError} | |
| /> | |
| )} | |
| {loadError && ( | |
| <div className="text-xs text-red-400 bg-red-500/10 rounded px-3 py-2"> | |
| Audio playback unavailable — session may have expired. Try generating again. | |
| </div> | |
| )} | |
| {/* A/B Toggle */} | |
| <div className="flex gap-1.5"> | |
| <button | |
| onClick={() => setAbSource('generated')} | |
| className={`px-3 py-1 rounded text-xs font-medium transition-all ${ | |
| abSource === 'generated' | |
| ? 'bg-accent-500/20 text-accent-400 border border-accent-500/30' | |
| : 'bg-white/[0.04] text-gray-500 border border-transparent hover:bg-white/[0.06]' | |
| }`} | |
| > | |
| Seed + Generated | |
| </button> | |
| <button | |
| onClick={() => { | |
| setAbSource('seed') | |
| if (audioRef.current) { audioRef.current.pause(); setIsPlaying(false) } | |
| if (onPlaySection) onPlaySection() | |
| }} | |
| className={`px-3 py-1 rounded text-xs font-medium transition-all ${ | |
| abSource === 'seed' | |
| ? 'bg-accent-500/20 text-accent-400 border border-accent-500/30' | |
| : 'bg-white/[0.04] text-gray-500 border border-transparent hover:bg-white/[0.06]' | |
| }`} | |
| > | |
| Seed Only | |
| </button> | |
| </div> | |
| {/* Playback controls */} | |
| {!loadError && ( | |
| <div className="space-y-2"> | |
| <div className="flex items-center gap-3"> | |
| <button | |
| onClick={togglePlay} | |
| disabled={abSource === 'seed'} | |
| className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors text-white text-sm ${ | |
| abSource === 'seed' ? 'bg-gray-700 cursor-not-allowed' : 'bg-accent-500 hover:bg-accent-400' | |
| }`} | |
| > | |
| {isPlaying ? '⏸' : '▶'} | |
| </button> | |
| <div | |
| className="flex-1 h-1.5 rounded-full bg-white/[0.06] cursor-pointer" | |
| onClick={handleSeek} | |
| > | |
| <div | |
| className="h-full bg-accent-500 rounded-full transition-all" | |
| style={{ width: duration ? `${(currentTime / duration) * 100}%` : '0%' }} | |
| /> | |
| </div> | |
| <span className="text-xs font-mono text-gray-400 w-16 text-right"> | |
| {formatTime(currentTime)} / {formatTime(duration)} | |
| </span> | |
| </div> | |
| </div> | |
| )} | |
| {/* Metadata */} | |
| <div className="flex flex-wrap gap-2 text-[10px]"> | |
| <span className="px-2 py-0.5 rounded bg-white/[0.04] text-gray-500"> | |
| Model: {generationResult.model || 'unknown'} | |
| </span> | |
| <span className="px-2 py-0.5 rounded bg-white/[0.04] text-gray-500"> | |
| Duration: {generationResult.duration_seconds?.toFixed(1)}s | |
| </span> | |
| <span className="px-2 py-0.5 rounded bg-white/[0.04] text-gray-500"> | |
| Generated in {generationResult.generation_time_seconds?.toFixed(1)}s | |
| </span> | |
| </div> | |
| {/* Action buttons */} | |
| <div className="flex items-center gap-2"> | |
| <button | |
| onClick={onRegenerate} | |
| className="px-3 py-1.5 rounded-lg bg-white/[0.06] hover:bg-white/[0.1] text-xs text-gray-300 transition-colors" | |
| > | |
| Regenerate | |
| </button> | |
| <button | |
| onClick={onUseAsSource} | |
| className="px-3 py-1.5 rounded-lg bg-white/[0.06] hover:bg-white/[0.1] text-xs text-gray-300 transition-colors" | |
| > | |
| Use as Source | |
| </button> | |
| {/* Download */} | |
| <div className="ml-auto flex items-center gap-1"> | |
| <select | |
| value={downloadFormat} | |
| onChange={e => setDownloadFormat(e.target.value)} | |
| className="bg-surface-elevated border border-white/[0.06] rounded px-1.5 py-1 text-[10px] text-gray-400 focus:outline-none" | |
| > | |
| <option value="wav">.wav</option> | |
| <option value="flac">.flac</option> | |
| </select> | |
| <button | |
| onClick={handleDownload} | |
| className="px-2 py-1 rounded bg-white/[0.06] hover:bg-white/[0.1] text-[10px] text-gray-400 transition-colors" | |
| > | |
| Download | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| ) | |
| } | |