Spaces:
Sleeping
Sleeping
File size: 10,112 Bytes
ad0e57a 85a1bee ad0e57a f165f0b ad0e57a 85a1bee ad0e57a 85a1bee ad0e57a 85a1bee ad0e57a 85a1bee f165f0b 85a1bee ad0e57a 85a1bee ad0e57a | 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 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | "use client";
import { useEffect, useState } from "react";
import { Mic2, Drum, Activity, Music, Cpu, FileAudio } from "lucide-react";
export default function ExtractionFlowDiagram({ isProcessing, progress }: { isProcessing: boolean, progress: number }) {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) return null;
return (
<div className="w-full relative flex flex-col items-center justify-between bg-[#050505] rounded-3xl border border-[#27272a] overflow-hidden my-8 p-4 py-10 md:p-12 min-h-[400px] md:min-h-[500px]">
{/* Dynamic Background Glows */}
<div className="absolute top-[15%] left-1/2 -translate-x-1/2 w-32 h-32 bg-cyan-500/10 rounded-full blur-[50px]"></div>
<div className="absolute top-[50%] left-1/2 -translate-x-1/2 w-48 h-48 bg-orange-500/10 rounded-full blur-[60px]"></div>
<style dangerouslySetInnerHTML={{__html: `
@keyframes dashFlow {
0% { stroke-dashoffset: 100; }
100% { stroke-dashoffset: 0; }
}
.animated-line {
stroke-dasharray: 8 8;
animation: dashFlow ${isProcessing ? '1s' : '4s'} linear infinite;
}
.neon-glow-cyan { box-shadow: 0 0 15px rgba(6, 182, 212, 0.4), inset 0 0 10px rgba(6, 182, 212, 0.2); }
.neon-glow-orange { box-shadow: 0 0 15px rgba(249, 115, 22, 0.4), inset 0 0 10px rgba(249, 115, 22, 0.2); }
.neon-glow-green { box-shadow: 0 0 15px rgba(16, 185, 129, 0.4), inset 0 0 10px rgba(16, 185, 129, 0.2); }
.neon-glow-purple { box-shadow: 0 0 15px rgba(168, 85, 247, 0.4), inset 0 0 10px rgba(168, 85, 247, 0.2); }
.neon-glow-yellow { box-shadow: 0 0 15px rgba(234, 179, 8, 0.4), inset 0 0 10px rgba(234, 179, 8, 0.2); }
`}} />
{/* SVG CONNECTING LINES */}
<svg className="absolute inset-0 w-full h-full pointer-events-none z-0" preserveAspectRatio="none">
<defs>
<linearGradient id="grad-cyan-orange" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#06b6d4" />
<stop offset="100%" stopColor="#f97316" />
</linearGradient>
{/* Orange to Green */}
<linearGradient id="grad-o-g" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#f97316" /><stop offset="100%" stopColor="#10b981" />
</linearGradient>
{/* Orange to Cyan */}
<linearGradient id="grad-o-c" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#f97316" /><stop offset="100%" stopColor="#06b6d4" />
</linearGradient>
{/* Orange to Purple */}
<linearGradient id="grad-o-p" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#f97316" /><stop offset="100%" stopColor="#a855f7" />
</linearGradient>
{/* Orange to Yellow */}
<linearGradient id="grad-o-y" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#f97316" /><stop offset="100%" stopColor="#eab308" />
</linearGradient>
</defs>
{/* Level 1 to Level 2 */}
<path d="M 50% 15% L 50% 50%" fill="none" stroke="url(#grad-cyan-orange)" strokeWidth="2" className={isProcessing ? "animated-line" : ""} opacity={0.6} />
{isProcessing && <path d="M 50% 15% L 50% 50%" fill="none" stroke="#fff" strokeWidth="2" className="animated-line" style={{ filter: 'drop-shadow(0 0 5px #fff)' }} opacity={0.8} />}
{/* Level 2 to Level 3 (Vocals) */}
<path d="M 50% 50% C 50% 65%, 12.5% 70%, 12.5% 85%" fill="none" stroke="url(#grad-o-g)" strokeWidth="2" className={isProcessing ? "animated-line" : ""} opacity={0.6} />
{isProcessing && <path d="M 50% 50% C 50% 65%, 12.5% 70%, 12.5% 85%" fill="none" stroke="#10b981" strokeWidth="2" className="animated-line" style={{ filter: 'drop-shadow(0 0 5px #10b981)' }} opacity={0.8} />}
{/* Level 2 to Level 3 (Drums) */}
<path d="M 50% 50% C 50% 65%, 37.5% 70%, 37.5% 85%" fill="none" stroke="url(#grad-o-c)" strokeWidth="2" className={isProcessing ? "animated-line" : ""} opacity={0.6} />
{isProcessing && <path d="M 50% 50% C 50% 65%, 37.5% 70%, 37.5% 85%" fill="none" stroke="#06b6d4" strokeWidth="2" className="animated-line" style={{ filter: 'drop-shadow(0 0 5px #06b6d4)' }} opacity={0.8} />}
{/* Level 2 to Level 3 (Bass) */}
<path d="M 50% 50% C 50% 65%, 62.5% 70%, 62.5% 85%" fill="none" stroke="url(#grad-o-p)" strokeWidth="2" className={isProcessing ? "animated-line" : ""} opacity={0.6} />
{isProcessing && <path d="M 50% 50% C 50% 65%, 62.5% 70%, 62.5% 85%" fill="none" stroke="#a855f7" strokeWidth="2" className="animated-line" style={{ filter: 'drop-shadow(0 0 5px #a855f7)' }} opacity={0.8} />}
{/* Level 2 to Level 3 (Other) */}
<path d="M 50% 50% C 50% 65%, 87.5% 70%, 87.5% 85%" fill="none" stroke="url(#grad-o-y)" strokeWidth="2" className={isProcessing ? "animated-line" : ""} opacity={0.6} />
{isProcessing && <path d="M 50% 50% C 50% 65%, 87.5% 70%, 87.5% 85%" fill="none" stroke="#eab308" strokeWidth="2" className="animated-line" style={{ filter: 'drop-shadow(0 0 5px #eab308)' }} opacity={0.8} />}
</svg>
{/* NODES LAYER */}
<div className="z-10 w-full h-full flex flex-col items-center justify-between pointer-events-none min-h-[300px] md:min-h-[400px]">
{/* TOP NODE */}
<div className="flex flex-col items-center mt-2">
<div className="border border-cyan-500 rounded-xl px-4 py-2 md:px-6 md:py-3 bg-[#0a0a0a]/90 backdrop-blur-sm neon-glow-cyan flex flex-col items-center min-w-[140px] md:min-w-[180px]">
<span className="text-cyan-400 font-mono font-bold text-xs md:text-sm tracking-wider flex items-center gap-2">
<FileAudio className="w-4 h-4" /> INPUT_AUDIO
</span>
<span className="text-gray-400 font-mono text-[10px] md:text-xs mt-1">.wav / .mp3</span>
</div>
</div>
{/* MIDDLE NODE */}
<div className="flex flex-col items-center relative my-auto">
<div className={`border border-orange-500 rounded-xl px-4 py-3 md:px-8 md:py-4 bg-[#0a0a0a]/90 backdrop-blur-sm ${isProcessing ? 'neon-glow-orange scale-105' : 'border-orange-500/50'} transition-all duration-500 flex flex-col items-center min-w-[180px] md:min-w-[250px]`}>
<span className={`font-mono font-bold text-xs md:text-base tracking-wider flex items-center gap-2 ${isProcessing ? 'text-orange-400' : 'text-orange-400/70'}`}>
<Cpu className={`w-4 h-4 md:w-5 md:h-5 ${isProcessing ? 'animate-pulse' : ''}`} />
TARGET(engine)
</span>
<span className="text-gray-400 font-mono text-[10px] md:text-xs mt-1">{isProcessing ? `processing.invoke(${progress}%)` : 'engine.ready()'}</span>
</div>
</div>
{/* BOTTOM NODES */}
<div className="w-full flex justify-around mt-auto relative z-10 gap-1 md:gap-4 px-1">
<div className={`flex flex-col items-center border border-emerald-500 rounded-xl py-2 px-1 md:px-4 bg-[#0a0a0a]/90 backdrop-blur-sm ${isProcessing ? 'neon-glow-green' : 'border-emerald-500/50'} flex-1 max-w-[80px] md:max-w-[120px]`}>
<span className={`font-mono font-bold text-[9px] md:text-sm tracking-wider flex flex-col md:flex-row items-center gap-1 md:gap-2 ${isProcessing ? 'text-emerald-400' : 'text-emerald-400/70'}`}>
<Mic2 className="w-3 h-3 md:w-4 md:h-4" /> Vocals
</span>
{isProcessing && <div className="w-[80%] h-1 bg-emerald-500/20 rounded-full mt-2 overflow-hidden"><div className="h-full bg-emerald-500 w-full animate-pulse"></div></div>}
</div>
<div className={`flex flex-col items-center border border-cyan-500 rounded-xl py-2 px-1 md:px-4 bg-[#0a0a0a]/90 backdrop-blur-sm ${isProcessing ? 'neon-glow-cyan' : 'border-cyan-500/50'} flex-1 max-w-[80px] md:max-w-[120px]`}>
<span className={`font-mono font-bold text-[9px] md:text-sm tracking-wider flex flex-col md:flex-row items-center gap-1 md:gap-2 ${isProcessing ? 'text-cyan-400' : 'text-cyan-400/70'}`}>
<Drum className="w-3 h-3 md:w-4 md:h-4" /> Drums
</span>
{isProcessing && <div className="w-[80%] h-1 bg-cyan-500/20 rounded-full mt-2 overflow-hidden"><div className="h-full bg-cyan-500 w-full animate-pulse" style={{animationDelay: '0.2s'}}></div></div>}
</div>
<div className={`flex flex-col items-center border border-purple-500 rounded-xl py-2 px-1 md:px-4 bg-[#0a0a0a]/90 backdrop-blur-sm ${isProcessing ? 'neon-glow-purple' : 'border-purple-500/50'} flex-1 max-w-[80px] md:max-w-[120px]`}>
<span className={`font-mono font-bold text-[9px] md:text-sm tracking-wider flex flex-col md:flex-row items-center gap-1 md:gap-2 ${isProcessing ? 'text-purple-400' : 'text-purple-400/70'}`}>
<Activity className="w-3 h-3 md:w-4 md:h-4" /> Bass
</span>
{isProcessing && <div className="w-[80%] h-1 bg-purple-500/20 rounded-full mt-2 overflow-hidden"><div className="h-full bg-purple-500 w-full animate-pulse" style={{animationDelay: '0.4s'}}></div></div>}
</div>
<div className={`flex flex-col items-center border border-yellow-500 rounded-xl py-2 px-1 md:px-4 bg-[#0a0a0a]/90 backdrop-blur-sm ${isProcessing ? 'neon-glow-yellow' : 'border-yellow-500/50'} flex-1 max-w-[80px] md:max-w-[120px]`}>
<span className={`font-mono font-bold text-[9px] md:text-sm tracking-wider flex flex-col md:flex-row items-center gap-1 md:gap-2 ${isProcessing ? 'text-yellow-400' : 'text-yellow-400/70'}`}>
<Music className="w-3 h-3 md:w-4 md:h-4" /> Other
</span>
{isProcessing && <div className="w-[80%] h-1 bg-yellow-500/20 rounded-full mt-2 overflow-hidden"><div className="h-full bg-yellow-500 w-full animate-pulse" style={{animationDelay: '0.6s'}}></div></div>}
</div>
</div>
</div>
</div>
);
}
|