0

我正在研究必须将 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 中创建了回声机器人和语音翻译服务，我想知道这些认知服务是否由 React Web 聊天机器人触发。

4

1 回答 1

0

我已经使用以下代码实现了语音到文本和文本到语音的功能，其中我使用了语音服务小马填充工厂。对于翻译服务，我在 echo bot .Net 应用程序中使用了 Azure Translator 服务。

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, 0, 255, .1)',
    bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
    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;
于 2021-07-06T17:57:33.890 回答