使用 React 的具有音频输入和输出的多语言机器人

问题描述

我正在处理一项要求，我必须将 azure 聊天机器人嵌入到 React 中。我需要启用音频输入和输出功能以及用户语言和翻译的检测。我看过 Microsoft 文档，其中使用语音和翻译服务从服务器端 (C#) 完成此操作。我是 React 的初学者，想知道这是否可以完全通过 React 实现。 下面是我如何从 React 调用 Directline echo bot 的方式。

BotChat.App({
      bot: bot,locale: 'en-us',user: user,directLine: {
        secret: 'XXXXXXXXXXXXXXXXXXXXXX',webSocket: true,},document.getElementById('bot')
  );

由于我已经在 Azure 中创建了 echo bot 和语音翻译服务，我想知道这些认知服务是否由 React Web 聊天机器人触发。

解决方法

我使用以下代码实现了语音转文本和文本转语音，其中我使用了语音服务 pony fill factory。对于翻译服务，我在 echo bot .Net 应用程序中使用了 Azure 翻译服务。

import React,{ useMemo } from 'react';
import ReactWebChat,{ createCognitiveServicesSpeechServicesPonyfillFactory,createDirectLine,createStore } from 'botframework-webchat';
import './App.css';

function App() {

  const store = createStore();

  const directLine = useMemo(() => createDirectLine({ secret: 'YOUR_SECRET_HERE' }),[]);

  const styleOptions = {
    bubbleBackground: 'rgba(0,255,.1)',bubbleFromUserBackground: 'rgba(0,botAvatarInitials: 'Bot',userAvatarInitials: 'Me',hideUploadButton: true,hideSendBox: false,sendTypingIndicator: false
  };

  const webSpeechPonyfillFactory = createCognitiveServicesSpeechServicesPonyfillFactory({
    credentials: {
      region: 'REGION',subscriptionKey: 'YOUR_KEY'
    },speechRecognitionEndpointId: 'YOUR_ENDPOINT',});

  const selectVoice = (voices,activity) => {
    if (activity.locale === 'US') {
      return voices.find(({ name }) => /AlvaroNeural/.test(name));
    } else {
      return voices.find(({ name }) => /NeerjaNeural/.test(name));
    }
  };

  return (
    <div>
      <h1>Custom </h1>
      <ReactWebChat
        store={store}
        directLine={directLine}
        selectVoice={selectVoice}
        webSpeechPonyfillFactory={webSpeechPonyfillFactory}
        styleOptions={styleOptions}
      />
    </div>
  );
}

export default App;