Spaces:
Running
Running
File size: 4,011 Bytes
66b6851 | 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 | import React from 'react';
import type { SpectralDetail } from '../../services/audioService';
interface SpectrogramViewProps {
spectralDetail: SpectralDetail;
aiScore: number;
}
interface Band {
label: string;
key: keyof SpectralDetail;
range: string;
invert?: boolean; // true = lower value = more AI
maxVal: number;
}
const BANDS: Band[] = [
{ label: 'HF Energy', key: 'hf_energy_ratio', range: '6–8 kHz', invert: false, maxVal: 0.25 },
{ label: 'Mel Smoothness', key: 'mel_frame_diff', range: 'Full Band', invert: false, maxVal: 5.0 },
{ label: 'MFCC Δ Std', key: 'mfcc_delta_std', range: 'Cepstral', invert: false, maxVal: 10.0 },
{ label: 'Flatness Var', key: 'flatness_variance', range: 'Full Band', invert: false, maxVal: 0.015},
{ label: 'Centroid Var', key: 'centroid_variance', range: 'Spectral', invert: false, maxVal: 0.005},
];
const SpectrogramView: React.FC<SpectrogramViewProps> = ({ spectralDetail, aiScore }) => {
const isAI = aiScore > 60;
return (
<div className="p-4 rounded-xl border border-[var(--panel-border)] bg-[var(--bg-secondary)]">
<div className="flex items-center justify-between mb-4">
<h5 className="text-sm font-semibold text-[var(--text-primary)]">
Spectral Fingerprint
</h5>
<span
className="text-xs px-2 py-1 rounded-md font-semibold"
style={{
background: isAI ? 'var(--accent-red-transparent)' : 'var(--accent-green-transparent)',
color: isAI ? 'var(--accent-red)' : 'var(--accent-green)',
border: `1px solid ${isAI ? 'var(--accent-red-border)' : 'var(--accent-green-border)'}`,
}}
>
{isAI ? 'Vocoder Signature' : 'Natural Spectrum'}
</span>
</div>
{/* Pseudo-spectrogram frequency bands */}
<div className="space-y-2">
{BANDS.map(({ label, key, range, maxVal }) => {
const rawVal = spectralDetail[key] as number | undefined;
const val = rawVal ?? 0;
const pct = Math.min(100, Math.max(0, (val / maxVal) * 100));
// Low values on invert=false metrics = suspicious
const suspicion = 100 - pct;
const isSuspicious = suspicion > 65;
const barColor = isSuspicious
? 'var(--accent-orange)'
: pct > 60
? '#00E5CC'
: 'var(--accent-yellow)';
return (
<div key={String(key)}>
<div className="flex justify-between text-xs font-medium mb-1 text-[var(--text-secondary)]">
<span>{label}</span>
<span style={{ color: isSuspicious ? 'var(--accent-orange)' : 'var(--text-muted)' }}>
{typeof rawVal === 'number' ? rawVal.toFixed(4) : '—'} <span className="opacity-50">/ {range}</span>
</span>
</div>
<div className="h-2 bg-[var(--panel-border)] rounded-full overflow-hidden relative">
{/* Background gradient showing expected human range */}
<div
className="absolute top-0 left-[40%] w-[40%] h-full bg-white/5 border-x border-white/10"
/>
<div
className="h-full rounded-full transition-all duration-700"
style={{
width: `${pct}%`,
background: `linear-gradient(90deg, ${barColor}88, ${barColor})`,
}}
/>
</div>
</div>
);
})}
</div>
<p className="text-xs text-[var(--text-secondary)] mt-4 leading-relaxed">
{isAI
? 'Frequency distribution shows neural vocoder characteristics — reduced high-frequency content and over-smoothed transitions.'
: 'Frequency distribution shows natural acoustic properties — normal high-frequency energy and realistic spectral variation.'}
</p>
</div>
);
};
export default SpectrogramView;
|