Преобразование речи в текст в реальном времени с помощью GCP и Socket.io

Итак, вы хотите транскрибировать звук с вашего микрофона в режиме реального времени с помощью легкодоступного API с хорошим временем отклика?

Вот что нам нужно для этого:
* Angular 14
* Node.js 16 (мы будем использовать Express и TypeScript)
* Socket.io
* Google Speech Библиотека API для Node.js

Настройка серверной части

mkdir server && cd server
npm init -y
npm i -D typescript @tsconfig/node16 concurrently @types/pumpify @types/node @types/express
npx tsc --init
npm i socket.io express

Затем мы открываем файл tsconfig.json, сгенерированный приведенной выше командой. Убедитесь, что это выглядит примерно так:

{   
    "extends": "@tsconfig/node16/tsconfig.json",
    "compilerOptions": 
    {     
        "target": "es5",
        "module": "commonjs",
        "outDir": "dist",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
     },
    "include": ["src"],
    "exclude": ["node_modules"]
}

Давайте настроим TypeScript для отслеживания изменений в коде и перенесем их в JavaScript на лету с помощью concurrently. Добавьте следующий скрипт в свой файл package.json.

"scripts": {
  "dev": "concurrently  \"npx tsc --watch\" \"nodemon -q ./dist/index.js\"
}

Теперь, чтобы запустить сервер, просто запустите npm run dev.

Настройте среду для доступа к Google Cloud Speech API.

Чтобы получить доступ к API преобразования речи в текст, нам нужно установить файл JSON учетной записи службы в качестве переменной среды.
Следуйте инструкциям на этой странице: Перед началом работы | Облачная документация по преобразованию речи в текст | Облако Google

Кодирование файла server.ts

Это базовый шаблон сервера express, который вы можете использовать для запуска.

Следующий шаг — настроить socket.io и добавить несколько прослушивателей событий.

Давайте рассмотрим, что здесь делают прослушиватели событий:

startGoogleCloudStream: как следует из названия, инициализирует класс speechToTextUtils и устанавливает необходимые параметры, которые мы вскоре рассмотрим.

binaryAudioData: получает аудиоданные от внешнего интерфейса в виде двоичных буферов int16. Это обрабатывается функцией receiveData в speechToTextUtils.

endGoogleCloudStream: вызывает вспомогательную функцию, которая отключает все прослушиватели событий и транскрипцию.

У нас есть пара сеттеров, которые помогают нам сохранить экземпляр сокета и конфигурацию запроса.

Метод startRecognitionStream инициализирует облачный речевой клиент с конфигурацией запроса и привязывает speechCallback, который запускается каждый раз, когда API Google возвращает ответ транскрипции.

Мы используем мелок, чтобы выделить временные метки, а транскрипции отображаются красным цветом и зеленым цветом, как только они будут окончательными.

restartTimeoutзапускает метод restartStream, когда таймер достигает примерно 5 минут, так как это максимальный предел непрерывного распознавания, установленный Google для Speech-To-Text API.

Как обрабатывается входной звук? Мы рассмотрим это дальше.

Эта функция receiveData взята из репозитория Github client library узла от Google. Он записывает полученные двоичные фрагменты аудиоданных в streamingRecognize.

По умолчанию у Google есть пятиминутный тайм-аут для любого запроса API распознавания потоковой передачи. Чтобы выполнять транскрипцию дольше этого предела, мы используем эти две функции, представленные в образцах, предоставленных Google.

Крайне важно, чтобы мы удалили все прослушиватели событий, иначе Node взбесится.

Теперь перейдем к фронтенду.

Настройка клиентской части

Запустите эти команды, чтобы настроить угловой проект

mkdir client && cd client
npx ng new speech-to-text --directory=.
npm install @google-cloud/speech socket.io-client

Вы можете настроить файлы app.component по своему усмотрению, но базовый шаблон должен иметь подключение к сокету следующим образом.

Вы можете использовать переменную liveTranscription для вывода транскрипции в виде HTML через привязку данных Angular.

Мы используем AudioContextAPI для обработки звука с микрофона и отправки его на серверную часть через соединение через сокет. Google STT API ожидает звук в 16-битных целых числах, чтобы преобразовать его, нам нужно подключить специальный аудиопроцессор, который будет передискретизировать входной сигнал нашего микрофона.

ПРИМЕЧАНИЕ. Убедитесь, что файл audio-processor.js хранится в папке assets, иначе Angular не обнаружит его.
Поскольку Aаудиопроцессор добавляется как рабочий процесс, он отсоединяется от основного потока выполнения. Итак, мы не можем отправить данные в сокет из файла аудиопроцессора. Вместо этого мы используем встроенную функцию обмена сообщениями для отправки выбранных байтов обратно в служебный файл.

Теперь мы можем отправить звук в сокет.

Используя EventListener, мы можем дождаться отправки расшифрованных строк с сервера и обработать их по своему усмотрению. Распечатать их на экране? Живые субтитры для ваших видео? Все возможно.

Даже что-то вроде этого: Разминка интервью — Расти вместе с Google.

На этом статья заканчивается, ставьте лайки, если вам понравилось❤️

Эта статья должна дать вам краткое изложение подробного кода, представленного здесь: GitHub.

Загляните на мой сайт здесь