murmuraba
Version:
Real-time audio noise reduction with advanced chunked processing for web applications
15 lines (14 loc) • 2.45 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function VadDisplay({ averageVad, vadData, chunkIndex }) {
if (averageVad === undefined)
return null;
const vadPercentage = averageVad * 100;
const vadLevel = vadPercentage > 70 ? 'high' : vadPercentage > 30 ? 'medium' : 'low';
const peakVad = vadData ? Math.max(...vadData.map(d => d.vad)) : averageVad;
const voiceDetectedPercentage = vadData
? (vadData.filter(d => d.vad > 0.5).length / vadData.length) * 100
: vadPercentage;
return (_jsxs("div", { className: "vad-display", "data-vad-level": vadLevel, children: [_jsxs("div", { className: "vad-display__header", children: [_jsx("span", { className: "vad-display__icon", "aria-hidden": "true", children: "\uD83C\uDFA4" }), _jsx("h4", { className: "vad-display__title", children: "Voice Activity Detection" })] }), _jsx("div", { className: "vad-display__primary", children: _jsxs("div", { className: "vad-display__metric vad-display__metric--featured", children: [_jsx("span", { className: "vad-metric__label", children: "Average VAD" }), _jsx("span", { className: "vad-metric__value vad-metric__value--large", children: averageVad.toFixed(3) }), _jsx("div", { className: "vad-metric__bar", children: _jsx("div", { className: `vad-metric__fill vad-metric__fill--${vadLevel}`, style: { width: `${vadPercentage}%` }, role: "progressbar", "aria-valuenow": vadPercentage, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Voice activity ${vadPercentage.toFixed(1)}%` }) })] }) }), vadData && vadData.length > 0 && (_jsxs("div", { className: "vad-display__secondary", children: [_jsxs("div", { className: "vad-display__metric", children: [_jsx("span", { className: "vad-metric__label", children: "Voice Detected" }), _jsxs("span", { className: "vad-metric__value", children: [voiceDetectedPercentage.toFixed(1), "%"] })] }), _jsxs("div", { className: "vad-display__metric", children: [_jsx("span", { className: "vad-metric__label", children: "Peak VAD" }), _jsx("span", { className: "vad-metric__value", children: peakVad.toFixed(3) })] })] })), _jsx("div", { className: "vad-display__status", children: _jsx("span", { className: `vad-status vad-status--${vadLevel}`, children: vadLevel === 'high' ? '🟢 Strong Voice Activity' :
vadLevel === 'medium' ? '🟡 Moderate Voice Activity' :
'🔴 Low Voice Activity' }) })] }));
}