2

I'm trying to convert Mock-Bot from MS botframework samples (https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.c.cognitive-services-speech-services-js) to use my own Cognitive Services resource. I tried changing region in endpoint but it didn't help me. For the code below I get this error: GET https://westus.tts.speech.microsoft.com/cognitiveservices/voices/list net::ERR_ABORTED 401.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Web Chat: Cognitive Services Speech Services using JavaScript</title>
    <!-- Cognitive Services Speech Services adapter is only available in full bundle -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--
      This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
      https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
    -->
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        margin: 0;
      }

      #webchat {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>Test</h1>
    <div id="webchat" role="main"></div>
    <script>
      // Create a function to fetch the Cognitive Services Speech Services credentials.
      // The async function created will hold expiration information about the token and will return cached token when possible.
      function createFetchSpeechServicesCredentials() {
        let expireAfter = 0;
        let lastResult = {};

        return async () => {
          // Fetch a new token if the existing one is expiring.
          // The following article mentioned the token is only valid for 10 minutes.
          // We will invalidate the token after 5 minutes.
          // https://learn.microsoft.com/en-us/azure/cognitive-services/authentication#authenticate-with-an-authentication-token
          if (Date.now() > expireAfter) {

            const speechServicesTokenRes = await fetch(
              'https://westeurope.api.cognitive.microsoft.com/sts/v1.0/issueToken',
              { method: 'POST', headers: { 'Ocp-Apim-Subscription-Key': 'MyCognitiveServicesSubscriptionKey' } }
            );      
/*
            const speechServicesTokenRes = await fetch(
              'https://webchat-mockbot.azurewebsites.net/speechservices/token',
              { method: 'POST' }
            );         
*/
            lastResult = await speechServicesTokenRes;//.json();
            expireAfter = Date.now() + 300000;
          }

          return lastResult;
        };
      }

      const fetchSpeechServicesCredentials = createFetchSpeechServicesCredentials();

      async function fetchSpeechServicesRegion() {
        return (await fetchSpeechServicesCredentials()).region;
      }

      async function fetchSpeechServicesToken() {
        return (await fetchSpeechServicesCredentials()).token;
      }

      (async function() {
        // In this demo, we are using Direct Line token from MockBot.
        // Your client code must provide either a secret or a token to talk to your bot.
        // Tokens are more secure. To learn about the differences between secrets and tokens.
        // and to understand the risks associated with using secrets, visit https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0

        const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', { method: 'POST', headers: { Authorization: 'Bearer MySecret' }});
        const { token } = await res.json();

        // Create the ponyfill factory function, which can be called to create a concrete implementation of the ponyfill.
        const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
          // We are passing the Promise function to the authorizationToken field.
          // This function will be called every time the token is being used.
          authorizationToken: fetchSpeechServicesToken,

          // In contrast, we are only fetching the region once.
          //region: await fetchSpeechServicesRegion()
        });


        const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
          if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
            // When we receive DIRECT_LINE/CONNECT_FULFILLED action, we will send an event activity using WEB_CHAT/SEND_EVENT
            dispatch({
              type: 'WEB_CHAT/SEND_EVENT',
              payload: {
                name: 'webchat/join',
                value: { language: window.navigator.language }
              }
            });
          }
          return next(action);
        });

        // Pass a Web Speech ponyfill factory to renderWebChat.
        // You can also use your own speech engine given it is compliant to W3C Web Speech API: https://w3c.github.io/speech-api/.
        // For implementor, look at createBrowserWebSpeechPonyfill.js for details.
        window.WebChat.renderWebChat(
          {
            directLine: window.WebChat.createDirectLine({ token }),
            webSpeechPonyfillFactory,
            locale: 'en-US',
            store
          },
          document.getElementById('webchat')
        );

        document.querySelector('#webchat > *').focus();
      })().catch(err => console.error(err));
    </script>
  </body>
</html>

Please help.

Edit: Apparently the error is SyntaxError: Unexpected token e in JSON at position 0.

0

2 Answers 2

2

I'm not certain why the above produces an error, however if I simplify it the error disappears. Try this which worked for me:

let authorizationToken;
let region;
const speechServicesTokenRes = await fetch(
  'https://westus.api.cognitive.microsoft.com/sts/v1.0/issueToken',
  { method: 'POST', headers: { 'Ocp-Apim-Subscription-Key': 'MyCognitiveServicesSubscriptionKey' } }
);

if (speechServicesTokenRes.status === 200) {
  region = 'westeurope',
  authorizationToken = await speechServicesTokenRes.text()
} else {
  return (new Error('error!'))
}

const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory( {
  authorizationToken: authorizationToken,
  region: region
} );

window.WebChat.renderWebChat({
  directLine: directLine,
  webSpeechPonyfillFactory: webSpeechPonyfillFactory
}, document.getElementById('webchat') );

Hope of help!

0

In the code you need to define credentials object with authorizationToken and region properties and pass the object to 'createCognitiveServicesSpeechServicesPonyfillFactory' method.

Sample code:

<div id="webchat" role="main"></div>
<script>
  (async function() {
    let authorizationToken;
    let region;
    const speechServicesTokenRes = await fetch(
      'https://<your-speech-service-region-eg-uksouth>.api.cognitive.microsoft.com/sts/v1.0/issueToken', {
        method: 'POST',
        headers: {
          'Ocp-Apim-Subscription-Key': '<your-speech-api-key>'
        }
      }
    );

    if (speechServicesTokenRes.status === 200) {
      region = '<your-azure-region-eg-uksouth>',
        authorizationToken = await speechServicesTokenRes.text()
    } else {
      return (new Error('error!'))
    }

    const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
      credentials: {
        authorizationToken: authorizationToken,
        region: region
      }
    });

    var dl = window.WebChat.createDirectLine({
      secret: '<your-directline-default-site-secret>'
    });

    window.WebChat.renderWebChat({
      directLine: dl,
      webSpeechPonyfillFactory: webSpeechPonyfillFactory
    }, document.getElementById('webchat'));

  })().catch(err => console.error(err));

</script>

Hope this helps!

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.