Spaces:
Running
Running
| "use client"; | |
| import { COLORS, VizFrame } from "./common"; | |
| function waveformPath(bars: number, w: number, h: number) { | |
| const mid = h / 2; | |
| return Array.from({ length: bars }, (_, i) => { | |
| const x = 4 + (i / (bars - 1)) * (w - 8); | |
| const y = mid + Math.sin(i * 0.35) * (h * 0.35) * (0.5 + 0.5 * Math.sin(i * 0.12)); | |
| return `${i === 0 ? "M" : "L"} ${x} ${y}`; | |
| }).join(" "); | |
| } | |
| function fftPath(bars: number, w: number, h: number) { | |
| const base = h - 4; | |
| return Array.from({ length: bars }, (_, i) => { | |
| const x = 4 + (i / (bars - 1)) * (w - 8); | |
| const peak1 = Math.exp(-((i - 8) ** 2) / 18) * (h - 12); | |
| const peak2 = Math.exp(-((i - 22) ** 2) / 30) * (h - 12) * 0.5; | |
| const peak3 = Math.exp(-((i - 38) ** 2) / 40) * (h - 12) * 0.25; | |
| const y = base - Math.max(peak1, peak2, peak3, 2); | |
| return `${i === 0 ? "M" : "L"} ${x} ${y}`; | |
| }).join(" "); | |
| } | |
| const VIEW_W = 300; | |
| const VIEW_H = 70; | |
| export function AudioSpectrogramViz() { | |
| const bars = 44; | |
| const melRows = 10; | |
| return ( | |
| <VizFrame fit="fill" caption="time domain → frequency (FFT) → log-mel spectrogram (F, T)"> | |
| <div className="flex h-full flex-col gap-2 p-3"> | |
| <div className="flex flex-1 flex-col justify-center rounded border border-stroke bg-surface px-2 py-1.5"> | |
| <div className="mb-1 flex items-baseline justify-between"> | |
| <span className="font-mono text-[9px] uppercase text-muted">waveform (T,)</span> | |
| <span className="font-mono text-[8px] text-muted">amplitude vs time</span> | |
| </div> | |
| <svg viewBox={`0 0 ${VIEW_W} ${VIEW_H}`} preserveAspectRatio="none" className="h-10 w-full"> | |
| <line x1={4} y1={VIEW_H / 2} x2={VIEW_W - 4} y2={VIEW_H / 2} stroke={COLORS.stroke} strokeWidth={0.5} /> | |
| <path d={waveformPath(56, VIEW_W, VIEW_H)} fill="none" stroke={COLORS.accent} strokeWidth={1.75} /> | |
| {Array.from({ length: 12 }).map((_, i) => { | |
| const x = 8 + i * ((VIEW_W - 16) / 11); | |
| const y = VIEW_H / 2 + Math.sin(i * 0.8) * 20; | |
| return <circle key={i} cx={x} cy={y} r={2} fill={COLORS.red} />; | |
| })} | |
| </svg> | |
| <p className="mt-1 text-[8px] text-muted">sample rate f_s · amplitude sampled at regular intervals</p> | |
| </div> | |
| <div className="flex justify-center font-mono text-[10px] text-muted">↓ FFT</div> | |
| <div className="flex flex-1 flex-col justify-center rounded border border-stroke bg-surface px-2 py-1.5"> | |
| <div className="mb-1 flex items-baseline justify-between"> | |
| <span className="font-mono text-[9px] uppercase text-muted">FFT magnitude</span> | |
| <span className="font-mono text-[8px] text-muted">Hz</span> | |
| </div> | |
| <svg viewBox={`0 0 ${VIEW_W} ${VIEW_H}`} preserveAspectRatio="none" className="h-10 w-full"> | |
| <path d={fftPath(bars, VIEW_W, VIEW_H)} fill="none" stroke={COLORS.green} strokeWidth={1.75} /> | |
| </svg> | |
| <p className="mt-1 text-[8px] text-muted">fundamental + harmonics + noise floor</p> | |
| </div> | |
| <div className="flex justify-center font-mono text-[10px] text-muted">↓ mel filterbank · log</div> | |
| <div className="flex flex-1 flex-col justify-center rounded border border-stroke bg-surface px-2 py-1.5"> | |
| <div className="mb-1 flex items-baseline justify-between"> | |
| <span className="font-mono text-[9px] uppercase text-muted">log-mel (F, T)</span> | |
| <span className="font-mono text-[8px] text-muted">input to model</span> | |
| </div> | |
| <div className="grid w-full gap-px" style={{ gridTemplateColumns: `repeat(${bars}, 1fr)` }}> | |
| {Array.from({ length: bars * melRows }).map((_, i) => { | |
| const row = Math.floor(i / bars); | |
| const col = i % bars; | |
| const v = (Math.sin(col * 0.25 + row * 0.5) + 1) / 2; | |
| return ( | |
| <div key={i} className="h-2.5 w-full" style={{ backgroundColor: `rgba(10,102,194,${0.12 + v * 0.75})` }} /> | |
| ); | |
| })} | |
| </div> | |
| <p className="mt-1 text-[8px] text-muted">STFT → mel filterbank → log scale · standard classifier input</p> | |
| </div> | |
| </div> | |
| </VizFrame> | |
| ); | |
| } | |