​

Руководство по интеграции DeepFilterNet в Miscord

​

🎯 Обзор

1. Браузерные фильтры - базовое качество, минимальная нагрузка
2. RNNoise - хорошее качество, средняя нагрузка
3. DeepFilterNet - отличное качество, высокая нагрузка (НОВОЕ!)

​

📦 Что было сделано

​

1. Установлены зависимости

npm install onnxruntime-web

​

2. Созданы файлы

​

Сервисы:

• frontend/src/services/deepFilterNetProcessor.ts - основной процессор DeepFilterNet
• Обновлен frontend/src/services/audioProcessingService.ts - интеграция с существующей системой

​

UI компоненты:

• frontend/src/components/NoiseSuppressionSettings.tsx - настройки выбора движка
• frontend/src/components/ui/card.tsx - UI компонент карточки
• frontend/src/components/ui/alert.tsx - UI компонент уведомлений

​

Документация:

• frontend/DEEPFILTERNET_INTEGRATION.md - техническая документация
• DEEPFILTERNET_GUIDE_RU.md - это руководство

​

⚠️ ВАЖНО: Требуется модель ONNX

​

Вариант 1: Использовать готовую модель (Рекомендуется)

1. Скачайте предобученную модель DeepFilterNet3 в формате ONNX:
   • Официальный репозиторий: https://github.com/Rikorose/DeepFilterNet/releases
   • Или конвертируйте из PyTorch (см. ниже)
2. Создайте директорию для моделей:
   mkdir -p frontend/public/models
   
3. Поместите файл модели:
   # Скопируйте модель в:
   frontend/public/models/deepfilternet3.onnx
   

​

Вариант 2: Конвертировать модель из PyTorch

# Установите DeepFilterNet
pip install deepfilternet

# Установите зависимости для конвертации
pip install torch onnx

# Скачайте и конвертируйте модель
python -c "
from df import init_df
from df.enhance import enhance, init_df, load_audio, save_audio
import torch

# Загрузка модели
model, df_state, _ = init_df()

# Экспорт в ONNX (упрощенная версия, требует доработки)
dummy_input = torch.randn(1, 1, 480)  # batch, channels, samples
torch.onnx.export(
    model,
    dummy_input,
    'deepfilternet3.onnx',
    input_names=['input'],
    output_names=['output'],
    dynamic_axes={'input': {2: 'samples'}, 'output': {2: 'samples'}}
)
"

# Переместите модель
mv deepfilternet3.onnx frontend/public/models/

​

Вариант 3: Упрощенная модель (для тестирования)

​

🚀 Использование

​

В коде приложения

import { audioProcessingService } from './services/audioProcessingService';
import { NoiseSuppressionSettings } from './components/NoiseSuppressionSettings';

// В компоненте настроек голоса
function VoiceSettings() {
  const handleEngineChange = (engine: NoiseSuppressionEngine) => {
    audioProcessingService.updateConfig({
      noiseSuppressionEngine: engine
    });
    
    // Уведомить пользователя о необходимости переподключения
    alert('Переподключитесь к голосовому каналу для применения изменений');
  };

  return (
    <div>
      <NoiseSuppressionSettings 
        currentEngine="browser"
        onEngineChange={handleEngineChange}
      />
    </div>
  );
}

​

Проверка поддержки

// Проверить поддерживается ли DeepFilterNet на устройстве
const engines = audioProcessingService.getSupportedEngines();
const deepFilterNet = engines.find(e => e.engine === 'deepfilternet');

if (deepFilterNet?.supported) {
  console.log('✅ DeepFilterNet поддерживается');
} else {
  console.log('❌ DeepFilterNet не поддерживается на этом устройстве');
}

​

📊 Сравнение движков

​

🔧 Настройка производительности

​

Оптимизация для слабых устройств

// В deepFilterNetProcessor.ts можно настроить:
ort.env.wasm.numThreads = 2; // Уменьшить количество потоков
ort.env.wasm.simd = false;   // Отключить SIMD если не поддерживается

​

Оптимизация для мощных устройств

ort.env.wasm.numThreads = 8; // Увеличить количество потоков
ort.env.wasm.simd = true;    // Включить SIMD

​

🐛 Решение проблем

​

Модель не загружается

1. Проверьте, что файл модели существует: frontend/public/models/deepfilternet3.onnx
2. Проверьте путь в deepFilterNetProcessor.ts (по умолчанию /models/deepfilternet3.onnx)
3. Убедитесь, что файл доступен через HTTP (проверьте в DevTools → Network)

​

WebAssembly SIMD не поддерживается

• Используйте современный браузер (Chrome 91+, Edge 91+, Firefox 89+)
• Или отключите SIMD: ort.env.wasm.simd = false

​

Высокая нагрузка на CPU

1. Уменьшите количество потоков: ort.env.wasm.numThreads = 2
2. Переключитесь на RNNoise или браузерные фильтры
3. Закройте другие приложения

​

Большая задержка звука

• DeepFilterNet имеет алгоритмическую задержку ~20-30ms
• Для минимальной задержки используйте браузерные фильтры
• Проверьте общую задержку сети (ping)

​

📝 Дальнейшие шаги

​

1. Получение модели

• Скачать готовую модель с GitHub releases
• Конвертировать из PyTorch
• Использовать упрощенную модель для тестирования

​

2. Интеграция в UI

// В AudioSettingsModal.tsx или VoiceSettingsModal.tsx
import { NoiseSuppressionSettings } from './NoiseSuppressionSettings';

<NoiseSuppressionSettings 
  currentEngine={currentEngine}
  onEngineChange={handleEngineChange}
/>

​

3. Сохранение настроек

// Сохранение
localStorage.setItem('noiseSuppressionEngine', engine);

// Загрузка при старте
const savedEngine = localStorage.getItem('noiseSuppressionEngine') as NoiseSuppressionEngine;
if (savedEngine) {
  audioProcessingService.updateConfig({
    noiseSuppressionEngine: savedEngine
  });
}

​

4. Тестирование

• Протестировать на разных устройствах
• Измерить нагрузку на CPU
• Проверить качество шумоподавления
• Протестировать переключение между движками

​

🎓 Дополнительные ресурсы

• DeepFilterNet GitHub
• DeepFilterNet Paper
• ONNX Runtime Web
• WebAssembly SIMD

​

💡 Советы

1. Начните с браузерных фильтров - они работают везде и сразу
2. Переходите на RNNoise - если нужно лучшее качество
3. Используйте DeepFilterNet - только если критически важно максимальное качество
4. Предупреждайте пользователей - о необходимости переподключения при смене движка
5. Мониторьте производительность - добавьте индикатор нагрузки CPU

​

✅ Checklist готовности к продакшену

• Модель ONNX размещена в public/models/
• Компонент настроек добавлен в UI
• Сохранение выбора пользователя реализовано
• Обработка ошибок добавлена
• Уведомления о переподключении работают
• Fallback на браузерные фильтры настроен
• Документация для пользователей создана
• Тестирование на разных устройствах проведено