Транскрипция речи в текст в реальном времени с помощью Azure. Шаг 1: Простое веб-приложение

Обзор

В этом посте вы развернете на своем локальном компьютере простое веб-приложение транскрипции в реальном времени с использованием React (Javascript) и Azure Speech to Text.

Приложение будет использовать микрофон вашего компьютера для захвата аудиовхода, который затем будет транскрибироваться в режиме реального времени с помощью Azure Speech to Text.

Расшифрованный текст будет отображаться на экране вашего компьютера по мере его создания. Вы также сможете скачать транскрипцию в виде текстового файла.

Мы будем использовать код из этого репозитория образцов Azure.

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

Пожалуйста, помните: если вы решите развернуть его на сервере, помните, что вы должны его защитить.

Зачем мы это делаем?

На днях я сказал кое-что, что кто-то в шутку назвал принципом Сильвы: «Отличному ИИ нужен отличный пользовательский интерфейс».

И все разговоры об OpenAI и ChatGPT в наши дни лишь демонстрируют, насколько этот принцип верен.

Посмотрите, например, на сайт ChatGPT. Это чистый, простой, гладкий и очень эффективный. Это просто, а Простота — это высшая степень изощренности (как однажды сказал Леонардо да Винчи).

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

Это обсуждение вдохновило меня (и пару других людей в Microsoft) на демонстрацию того, как легко создать отличный пользовательский интерфейс для демонстрации нашего великолепного ИИ. Наши речевые службы, Azure OpenAI и т. д.

Это будет первый из серии блогов, демонстрирующих отличный пользовательский интерфейс с транскрипцией в реальном времени. Следующие сообщения будут основываться на этом простом решении, добавляя более сложные функции, такие как повышение точности с помощью списков фраз, пользовательских моделей, переводов, вопросов и ответов с помощью ChatGPT и т. д.

Транскрипция в реальном времени

В наши дни транскрипция в реальном времени является неотъемлемой частью многих приложений. Люди хотят говорить со своими устройствами и получать ответы. Когда я прошу у OpenAI порекомендовать ресторан, мне приходится вводить информацию на клавиатуре, и мне кажется, что я беру в руки беспилотный автомобиль, минуя все технологии и управляя им вручную. Медленно и явно старомодно.

Преобразование речи в текст Azure

Azure Speech to Text — это облачное решение, предоставляемое Microsoft Azure, которое позволяет разработчикам преобразовывать речь в текст в режиме реального времени. В нем используются наши проверенные модели на основе трансформаторов, которые расшифровывают речь с высокой точностью и малой задержкой. Azure Speech to Text также поддерживает пользовательские модели и позволяет разработчикам транскрибировать речь на нескольких языках.

Почему девконтейнеры?

Devcontainers — это расширение с открытым исходным кодом, предоставленное Microsoft, которое позволяет разработчикам создавать среду разработки, согласованную на разных платформах.

Devcontainers гарантирует, что все необходимые зависимости будут установлены в среде разработки, что избавит разработчиков от необходимости устанавливать зависимости на свой локальный компьютер.

Если вы никогда раньше не использовали Devcontainer, это будет отличным и простым введением. Вы установите его, просто выполнив следующие шаги.

Начиная

Ладно, хватит разговоров. Давайте приступим к работе.

Предпосылки

Для начала вам потребуется следующее на вашем ПК с Windows/Mac/Linux:

• Visual Studio Code (если у вас его нет, вы можете установить его отсюда)
• Docker Desktop (если у вас его нет, вы можете установить его отсюда)
• Git: (если у вас его нет, вы можете установить его отсюда)

В качестве альтернативы, если вы не хотите ничего устанавливать на свой локальный компьютер, вы можете использовать Github Codespace. github Codespace делает еще один шаг вперед с devcontainer — запускает devcontainer в облаке.

(Вы можете бесплатно начать работу с Codespaces здесь: GitHub Codespaces)

Предоставление Azure Cognitive Services

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

Получив подписку Azure, вам потребуется создать экземпляр Azure Cognitive Services.

Для этого нажмите на эту ссылку Развернуть в Azure и следуйте всем инструкциям.

После завершения развертывания запишите значения «SpeechServiceEndpoint» и «SpeechServiceKey».

Клонировать репозиторий

Если вы еще этого не сделали, клонируйте репозиторий с https://github.com/Azure-Samples/real-time-transcription-simple и откройте его с помощью кода Visual Studio (локально на своем ПК или на Github). Кодовое пространство).

Если вы работаете на своем ПК, вы получите подобное сообщение в правом нижнем углу экрана.

Нажмите Повторно открыть в контейнере, чтобы открыть контейнер разработки.

Это создаст контейнер Docker со всеми необходимыми зависимостями для проекта и перезапустит Visual Studio Code с этим контейнером (и теперь вы используете Devcontainers).

Добавьте свои секреты

После установки и запуска Devcontainer вам необходимо добавить свои секреты в файл .env.

Файл .env содержит учетные данные для службы Azure Speech to Text.

Чтобы добавить свои секреты, выполните следующие действия:

Создайте файл .env. В терминале кода Visual Studio введите следующую команду в терминале кода Visual Studio:

cd webapp 
cp env-template .env

Обновите файл .env, введя учетные данные для Azure Cognitive Services (и, конечно же, сохраните его):

REACT_APP_COG_SERVICE_KEY=<your congnitive service key>
REACT_APP_COG_SERVICE_LOCATION=<your cognitive service region>

Запуск веб-приложения локально

После добавления секретов вы можете запустить веб-приложение, введя следующую команду в терминале Visual Studio Code:

cd webapp 
yarn start

Это запустит веб-приложение на вашем локальном компьютере и перенаправит на него порт 3000.

Теперь вы можете открыть браузер и перейти к http://localhost:3000/

Вы увидите что-то вроде этого:

Нажмите Старт, чтобы начать расшифровку (логотип начнет вращаться, напоминая вам, что вы расшифровываете).

Говорите по-английски в микрофон, и транскрипция будет отображаться в веб-приложении в режиме реального времени.

Нажмите Стоп, чтобы остановить транскрипцию.

Нажмите Экспорт, чтобы загрузить расшифровку.

Под капотом

Приложение использует функцию непрерывного распознавания Azure Speech to Text, которая позволяет службе расшифровывать речь в режиме реального времени по мере ее произнесения.

Волшебство происходит в этом файле: https://github.com/Azure-Samples/real-time-transcription-simple/blob/main/webapp/src/Components/Transcription.js

В этом коде мы определяем конфигурацию речи с помощью следующего кода:

const speechConfig = sdk.SpeechConfig
  .fromSubscription("YourSpeechKey", "YourSpeechRegion");

Чтобы захватить микрофон компьютера, мы используем API мультимедийных служб навигатора. Это делается при первом отображении веб-сайта с помощью этого кода:

const getMedia = async (constraints) => {
  let stream = null
  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints)
    // stream is then passed to the recognizer
  } catch (err) {
    /* handle the error */
    alert(err)
    console.log(err)
  }
}

Мы определяем конфигурацию аудио для чтения потока, определенного выше. Это делается с помощью такого кода:

// configure Azure STT to listen to an audio Stream
const audioConfig = AudioConfig.fromStreamInput(stream)

Затем объединяем все это в один распознаватель:

const recognizer = new sdk.SpeechRecognizer(speechConfig, audioConfig);

И создайте обратные вызовы, когда выполняется непрерывное распознавание:

recognizer.recognizing = (s, e) => {
  // uncomment to debug
  // console.log(`RECOGNIZING: Text=${e.result.text}`)
  setRecognisingText(e.result.text)
  textRef.current.scrollTop = textRef.current.scrollHeight
}
recognizer.recognized = (s, e) => {
  setRecognisingText("")
  if (e.result.reason === sdk.ResultReason.RecognizedSpeech) {
    // uncomment to debug
    // console.log(`RECOGNIZED: Text=${e.result.text}`)
    setRecognisedText((recognisedText) => {
      if (recognisedText === '') {
        return `${e.result.text} `
      }
      else {
        return `${recognisedText}${e.result.text} `
      }
    })
    textRef.current.scrollTop = textRef.current.scrollHeight
  }
  else if (e.result.reason === sdk.ResultReason.NoMatch) {
    console.log("NOMATCH: Speech could not be recognized.")
  }
}
recognizer.canceled = (s, e) => {
  console.log(`CANCELED: Reason=${e.reason}`)
  if (e.reason === sdk.CancellationReason.Error) {
    console.log(`"CANCELED: ErrorCode=${e.errorCode}`)
    console.log(`"CANCELED: ErrorDetails=${e.errorDetails}`)
    console.log("CANCELED: Did you set the speech resource key and region values?")
  }
  recognizer.stopContinuousRecognitionAsync()
}
recognizer.sessionStopped = (s, e) => {
  console.log("\n    Session stopped event.")
  recognizer.stopContinuousRecognitionAsync()
}

Затем, всякий раз, когда мы хотим запустить распознаватель, мы запускаем:

recognizer.startContinuousRecognitionAsync()

И, чтобы остановить его, мы запускаем:

recognizer.stopContinuousRecognitionAsync()

Вы можете найти справочную информацию о том, как это работает, в разделе Azure Speech to Text — использование непрерывного распознавания.

Заключение

И вот что ChatGPT говорит об этой работе:

Таким образом, использование служб транскрипции речи Azure меняет правила игры, когда речь идет об анализе данных с помощью OpenAI.

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

Представьте, например, что мы хотим расшифровать эпизод подкаста и проанализировать настроение говорящих. Такой анализ было бы трудно, если вообще возможно, провести вручную, не тратя уйму времени на прослушивание и ведение заметок. Так что да, транскрипция речи — довольно крутой инструмент, который должен быть в вашем наборе инструментов для анализа данных!

В следующих блогах мы будем использовать OpenAI для извлечения некоторых сведений о транскрипции, добавления перевода в реальном времени и даже использования преобразования текста в речь, чтобы компьютер отвечал вам речью.