Reorganize ML noise suppression settings UI
Move the model comparison out of the always-visible Noise Suppression description and into the ML-only sub-settings. Add a compact info card for the selected model (CPU / voice quality / transients / download) plus a collapsible 4-model comparison. Group ML sub-settings into Model, Enhancements, and Test & calibrate sections with clear labels and separators. Fix invented --lt-border-color token and hardcoded rgba background to real TDS tokens. Build the model dropdown and DenoiseTester labels/compare buttons from DENOISE_MODELS so DeepFilterNet 3 is handled correctly. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { Box, Button, Text } from 'folds';
|
||||
import { DenoiseModelId } from '../../../state/settings';
|
||||
import { DENOISE_MODELS } from '../../../utils/lotusDenoiseUtils';
|
||||
import {
|
||||
DenoiseNode,
|
||||
buildGateNode,
|
||||
@@ -307,7 +308,7 @@ export function DenoiseTester({ model, useGate, gateThreshold, nativeNS }: Denoi
|
||||
[stopLive, stopPlayback],
|
||||
);
|
||||
|
||||
const modelLabel = model === 'rnnoise' ? 'RNNoise' : model === 'speex' ? 'Speex' : 'DTLN';
|
||||
const modelLabel = DENOISE_MODELS.find((m) => m.id === model)?.name ?? model;
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="400">
|
||||
@@ -367,6 +368,7 @@ export function DenoiseTester({ model, useGate, gateThreshold, nativeNS }: Denoi
|
||||
{ label: 'RNNoise', model: 'rnnoise' },
|
||||
{ label: 'Speex', model: 'speex' },
|
||||
{ label: 'DTLN', model: 'dtln' },
|
||||
{ label: 'DeepFilterNet', model: 'deepfilternet' },
|
||||
] as const
|
||||
).map((b) => (
|
||||
<Button
|
||||
|
||||
@@ -1240,6 +1240,7 @@ function Calls() {
|
||||
const deafenBind = useKeyBind(setDeafenKey);
|
||||
|
||||
const mlSupported = isMLDenoiseSupported();
|
||||
const selectedDenoiseModel = DENOISE_MODELS.find((m) => m.id === callDenoiseModel);
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="100">
|
||||
@@ -1258,46 +1259,9 @@ function Calls() {
|
||||
<Box direction="Column" gap="200">
|
||||
<Text>
|
||||
Filter background noise from your mic during calls. Browser-native uses the built-in
|
||||
WebRTC suppressor (Google NSNet2).
|
||||
WebRTC suppressor (Google NSNet2). ML runs a dedicated model for stronger removal.
|
||||
</Text>
|
||||
|
||||
<Box direction="Column" gap="100" style={{ overflowX: 'auto' }}>
|
||||
<Box
|
||||
direction="Row"
|
||||
gap="100"
|
||||
style={{ borderBottom: '1px solid var(--lt-border-color)', paddingBottom: '4px' }}
|
||||
>
|
||||
<Box style={{ width: '120px' }}>
|
||||
<Text size="T200">Model</Text>
|
||||
</Box>
|
||||
<Box style={{ width: '80px' }}>
|
||||
<Text size="T200">CPU</Text>
|
||||
</Box>
|
||||
<Box style={{ width: '80px' }}>
|
||||
<Text size="T200">Quality</Text>
|
||||
</Box>
|
||||
<Box grow="Yes">
|
||||
<Text size="T200">Transients</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
{DENOISE_MODELS.map((model) => (
|
||||
<Box key={model.id} direction="Row" gap="100">
|
||||
<Box style={{ width: '120px' }}>
|
||||
<Text size="T200">{model.name}</Text>
|
||||
</Box>
|
||||
<Box style={{ width: '80px' }}>
|
||||
<Text size="T200">{model.cpuUsage}</Text>
|
||||
</Box>
|
||||
<Box style={{ width: '80px' }}>
|
||||
<Text size="T200">{model.voiceQuality}</Text>
|
||||
</Box>
|
||||
<Box grow="Yes">
|
||||
<Text size="T200">{model.transients}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{!mlSupported && (
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="T200" priority="400">
|
||||
@@ -1312,11 +1276,6 @@ function Calls() {
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
{callNoiseSuppression === 'ml' && (
|
||||
<Text size="T200" priority="400">
|
||||
Note: Applying changes requires rejoining the call.
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
after={
|
||||
@@ -1339,73 +1298,174 @@ function Calls() {
|
||||
{callNoiseSuppression === 'ml' && (
|
||||
<Box
|
||||
direction="Column"
|
||||
gap="300"
|
||||
gap="400"
|
||||
style={{
|
||||
padding: '16px',
|
||||
marginTop: '8px',
|
||||
borderTop: '1px solid var(--lt-border-color)',
|
||||
background: 'rgba(0,0,0,0.1)',
|
||||
borderTop: '1px solid var(--border-color)',
|
||||
background: 'var(--bg-card)',
|
||||
}}
|
||||
>
|
||||
<SettingTile
|
||||
title="ML Model"
|
||||
description="Choose the machine learning model to use for noise removal."
|
||||
after={
|
||||
<SettingsSelect<DenoiseModelId>
|
||||
value={callDenoiseModel}
|
||||
onChange={setCallDenoiseModel}
|
||||
options={[
|
||||
{ value: 'rnnoise', label: 'RNNoise' },
|
||||
{ value: 'speex', label: 'Speex (Legacy)' },
|
||||
{ value: 'dtln', label: 'DTLN (beta)' },
|
||||
{ value: 'deepfilternet', label: 'DeepFilterNet 3 (beta)' },
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<SettingTile
|
||||
title="Series Suppression"
|
||||
description="Run the browser's native stationary noise filter before the ML model. Recommended for eliminating fan hum."
|
||||
after={
|
||||
<Switch
|
||||
variant="Primary"
|
||||
value={callDenoiseNativeNS}
|
||||
onChange={setCallDenoiseNativeNS}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<SettingTile
|
||||
title="Noise Gate"
|
||||
description="Hard-cut audio when you aren't speaking to ensure absolute silence between sentences."
|
||||
after={
|
||||
<Switch variant="Primary" value={callDenoiseGate} onChange={setCallDenoiseGate} />
|
||||
}
|
||||
/>
|
||||
|
||||
{callDenoiseGate && (
|
||||
<Box direction="Column" gap="100">
|
||||
<Box direction="Row" justifyContent="SpaceBetween">
|
||||
<Text size="T200">Gate Threshold</Text>
|
||||
<Text size="T200">{callDenoiseGateThreshold} dB</Text>
|
||||
{/* ── Model selection ───────────────────────────────────────── */}
|
||||
<Box direction="Column" gap="200">
|
||||
<Text size="L400">Model</Text>
|
||||
<SettingTile
|
||||
title="ML Model"
|
||||
description="Choose the machine learning model used for noise removal. Heavier models clean more aggressively at a higher CPU cost."
|
||||
after={
|
||||
<SettingsSelect<DenoiseModelId>
|
||||
value={callDenoiseModel}
|
||||
onChange={setCallDenoiseModel}
|
||||
options={DENOISE_MODELS.map((m) => ({ value: m.id, label: m.name }))}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{selectedDenoiseModel && (
|
||||
<Box
|
||||
direction="Column"
|
||||
gap="200"
|
||||
style={{
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--border-color)',
|
||||
background: 'var(--bg-input)',
|
||||
}}
|
||||
>
|
||||
<Text size="T300">{selectedDenoiseModel.name}</Text>
|
||||
<Text size="T200" priority="300">
|
||||
{selectedDenoiseModel.description}
|
||||
</Text>
|
||||
<Box direction="Row" gap="400" wrap="Wrap">
|
||||
{(
|
||||
[
|
||||
{ label: 'CPU', value: selectedDenoiseModel.cpuUsage },
|
||||
{ label: 'Voice quality', value: selectedDenoiseModel.voiceQuality },
|
||||
{ label: 'Transients', value: selectedDenoiseModel.transients },
|
||||
{ label: 'Download', value: selectedDenoiseModel.binarySize },
|
||||
] as const
|
||||
).map((stat) => (
|
||||
<Box key={stat.label} direction="Column" gap="100">
|
||||
<Text size="T200" priority="300">
|
||||
{stat.label}
|
||||
</Text>
|
||||
<Text size="T300">{stat.value}</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
<input
|
||||
type="range"
|
||||
min="-100"
|
||||
max="0"
|
||||
step="1"
|
||||
value={callDenoiseGateThreshold}
|
||||
onChange={(e) => setCallDenoiseGateThreshold(parseInt(e.target.value, 10))}
|
||||
style={{ width: '100%', accentColor: 'var(--accent-orange)' }}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
)}
|
||||
|
||||
<details>
|
||||
<summary style={{ cursor: 'pointer' }}>
|
||||
<Text as="span" size="T200" priority="300">
|
||||
Compare all models
|
||||
</Text>
|
||||
</summary>
|
||||
<Box direction="Column" gap="100" style={{ overflowX: 'auto', marginTop: '8px' }}>
|
||||
<Box
|
||||
direction="Row"
|
||||
gap="100"
|
||||
style={{
|
||||
borderBottom: '1px solid var(--border-color)',
|
||||
paddingBottom: '4px',
|
||||
}}
|
||||
>
|
||||
<Box style={{ width: '160px' }}>
|
||||
<Text size="T200" priority="300">
|
||||
Model
|
||||
</Text>
|
||||
</Box>
|
||||
<Box style={{ width: '80px' }}>
|
||||
<Text size="T200" priority="300">
|
||||
CPU
|
||||
</Text>
|
||||
</Box>
|
||||
<Box style={{ width: '90px' }}>
|
||||
<Text size="T200" priority="300">
|
||||
Quality
|
||||
</Text>
|
||||
</Box>
|
||||
<Box grow="Yes">
|
||||
<Text size="T200" priority="300">
|
||||
Transients
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
{DENOISE_MODELS.map((model) => (
|
||||
<Box key={model.id} direction="Row" gap="100">
|
||||
<Box style={{ width: '160px' }}>
|
||||
<Text size="T200">{model.name}</Text>
|
||||
</Box>
|
||||
<Box style={{ width: '80px' }}>
|
||||
<Text size="T200">{model.cpuUsage}</Text>
|
||||
</Box>
|
||||
<Box style={{ width: '90px' }}>
|
||||
<Text size="T200">{model.voiceQuality}</Text>
|
||||
</Box>
|
||||
<Box grow="Yes">
|
||||
<Text size="T200">{model.transients}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</details>
|
||||
|
||||
<Text size="T200" priority="400">
|
||||
Note: Applying changes requires rejoining the call.
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* ── Enhancement toggles ───────────────────────────────────── */}
|
||||
<Box
|
||||
direction="Column"
|
||||
gap="300"
|
||||
style={{ paddingTop: '12px', borderTop: '1px solid var(--border-color)' }}
|
||||
>
|
||||
<Text size="L400">Enhancements</Text>
|
||||
<SettingTile
|
||||
title="Series Suppression"
|
||||
description="Run the browser's native stationary noise filter before the ML model. Recommended for eliminating fan hum."
|
||||
after={
|
||||
<Switch
|
||||
variant="Primary"
|
||||
value={callDenoiseNativeNS}
|
||||
onChange={setCallDenoiseNativeNS}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<SettingTile
|
||||
title="Noise Gate"
|
||||
description="Hard-cut audio when you aren't speaking to ensure absolute silence between sentences."
|
||||
after={
|
||||
<Switch variant="Primary" value={callDenoiseGate} onChange={setCallDenoiseGate} />
|
||||
}
|
||||
/>
|
||||
|
||||
{callDenoiseGate && (
|
||||
<Box direction="Column" gap="100">
|
||||
<Box direction="Row" justifyContent="SpaceBetween">
|
||||
<Text size="T200">Gate Threshold</Text>
|
||||
<Text size="T200">{callDenoiseGateThreshold} dB</Text>
|
||||
</Box>
|
||||
<input
|
||||
type="range"
|
||||
min="-100"
|
||||
max="0"
|
||||
step="1"
|
||||
value={callDenoiseGateThreshold}
|
||||
onChange={(e) => setCallDenoiseGateThreshold(parseInt(e.target.value, 10))}
|
||||
style={{ width: '100%', accentColor: 'var(--accent-orange)' }}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* ── Test & calibrate ──────────────────────────────────────── */}
|
||||
<Box
|
||||
direction="Column"
|
||||
gap="200"
|
||||
style={{ paddingTop: '8px', borderTop: '1px solid var(--border-color)' }}
|
||||
style={{ paddingTop: '12px', borderTop: '1px solid var(--border-color)' }}
|
||||
>
|
||||
<Text size="L400">Test & calibrate</Text>
|
||||
<Text size="T200" priority="300">
|
||||
|
||||
@@ -2,8 +2,10 @@
|
||||
* Detection utilities for Lotus ML noise suppression (RNNoise).
|
||||
*/
|
||||
|
||||
import { DenoiseModelId } from '../state/settings';
|
||||
|
||||
export type DenoiseModel = {
|
||||
id: string;
|
||||
id: DenoiseModelId;
|
||||
name: string;
|
||||
description: string;
|
||||
cpuUsage: string;
|
||||
|
||||
Reference in New Issue
Block a user