Search code examples
c#htmlbotframeworkspeech-recognitiondirect-line-botframework

How to create be languages bot in direct line channel


I'm creating a bot using bot framework , in directline channel . have created 2 bots one in english , one in french but my idea is to create just one bot and to call dialog englishluis and frenchluis depending by the users.

My bot is using also speech recognition.

Here is my code for french direct line:

<!DOCTYPE html>
 <html>
<head>
<link href="https://cdn.botframework.com/botframework- 
  webchat/latest/botchat.css" rel="stylesheet" />
   </head>
  <body>
<div id="bot" />
<script src="https://cdn.botframework.com/botframework- 
  webchat/latest/botchat.js"></script>
<script src="https://cdn.botframework.com/botframework- 
    webchat/latest/CognitiveServices.js"></script>
<script>
var speechOptions = {
    speechRecognizer: new CognitiveServices.SpeechRecognizer(
        { locale: 'fr-fr', subscriptionKey: 
    'xxxxxxx' }),

    speechSynthesizer: new CognitiveServices.SpeechSynthesizer(
        {
            subscriptionKey: 'xxxxxxxxxxx',
            gender: CognitiveServices.SynthesisGender.Female,
            voiceName: 'Microsoft Server Speech Text to Speech Voice (fr-FR, 
         HortenseRUS)'
        })
}

var botConnection = new BotChat.DirectLine({
    // secret: 
         "yF0xxxxxxxxxxxxxxM",
    secret: "yBxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    webSocket: true ,

});


  BotChat.App({
        speechOptions: speechOptions,
        botConnection: botConnection,
        user: {
            id: 'userid',
            name: 'User',
        },
        bot: { id: 'botid' },
        resize: 'detect',
        locale: 'fr-FR'

    },
  document.getElementById("bot"));

   function postHelp() {
    botConnection
        .postActivity({
            from: { id: 'userid', name: 'User' },
            name: 'postHelp',
            type: 'message',
            text: 'help'
        })
        .subscribe(function(id) {
            console.log('"postHelp" sent');
        });
};

function welcome() {
    botConnection
        .postActivity({
            from: { id: 'userid', name: 'User' },
            name: 'welcome',
            type: 'event',
            value: 'help'
        })
        .subscribe(function (id) {
            console.log('"welcome" sent');
        });
  }
    </script>
   </body>
    </html>

How to create a function to detect the language from messagecontroller.cs , or if you have any other idea please help me.

Thank you in advance

New code of directline.html

<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.botframework.com/botframework- 
 webchat/latest/botchat.css" rel="stylesheet" />
 </head>
 <div id="bot" />
  <script src="https://cdn.botframework.com/botframework- 
 webchat/latest/botchat.js"></script>
  <script src="https://cdn.botframework.com/botframework- 
  webchat/latest/CognitiveServices.js"></script>
  <script>
   var speechOptions = {
    speechRecognizer: new CognitiveServices.SpeechRecognizer(
        { locale: String.localrec, subscriptionKey: 
   'xxxxxxxxxxxxx' }),

    speechSynthesizer: new CognitiveServices.SpeechSynthesizer(
        {
            subscriptionKey: 'xxxxxxxxxxxxxxxx',
            gender: CognitiveServices.SynthesisGender.Female,
           // voiceName: 'Microsoft Server Speech Text to Speech Voice (fr- 
         FR, HortenseRUS)'
            voiceName: String.localevoice

        })
}

var botConnection = new BotChat.DirectLine({
    // secret: "yxxxxxxxxxxxxxxxM",
    secret: "yxxxxxxxxxxxxxxxxxxx",
    webSocket: true ,

  });


      BotChat.App({
        speechOptions: speechOptions,
        botConnection: botConnection,
        user: {
            id: 'userid',
            name: 'User',
        },
        bot: { id: 'botid' },
        resize: 'detect',
        locale: String.localed

    },
document.getElementById("bot"));

function postHelp() {
    botConnection
        .postActivity({
            from: { id: 'userid', name: 'User' },
            name: 'postHelp',
            type: 'message',
            text: 'help'
        })
        .subscribe(function(id) {
            console.log('"postHelp" sent');
        });
};

function welcome() {
    botConnection
        .postActivity({
            from: { id: 'userid', name: 'User' },
            name: 'welcome',
            type: 'event',
            value: 'help'
        })
        .subscribe(function (id) {
            console.log('"welcome" sent');
        });
}
     var getFirstBrowserLanguage = function () {
var nav = window.navigator,
browserLanguagePropertyKeys = ['language', 'browserLanguage', 
'systemLanguage', 'userLanguage'],
i,
language;

    // support for HTML 5.1 "navigator.languages"
 if (Array.isArray(nav.languages)) {
  for (i = 0; i < nav.languages.length; i++) {
    language = nav.languages[i];
    if (language && language.length) {
      return language;
    }
  }
    }

// support for other well known properties in browsers
for (i = 0; i < browserLanguagePropertyKeys.length; i++) {
  language = nav[browserLanguagePropertyKeys[i]];
  if (language && language.length) {
    return language;
    }
   }

    return null;
   };

  console.log(getFirstBrowserLanguage());

let localed = "";
if ((navigator.languages != undefined) || (navigator.languages == "fr") || 
 getFirstBrowserLanguage() =="fr")
String.localed = 'fr-fr';
  else
String.localed = 'en-US';

    let localrec = "";
  if ((navigator.languages != undefined) || (navigator.languages == "fr") || 
  getFirstBrowserLanguage() =="fr")
String.localrec = 'fr-fr';
else
String.localrec = null;


function getVoice(localevoice) {
if (locale.startsWith('fr'))
    return 'Microsoft Server Speech Text to Speech Voice (fr-FR, 
      HortenseRUS)';
else
    return 'Microsoft Server Speech Text to Speech Voice (en-US, ZiraRUS)';
  }

let localevoice = "";
if ((navigator.languages != undefined) || (navigator.languages == "fr") || 
 (getFirstBrowserLanguage() =="fr")  || (navigator.languages[0] == "fr") || 
    (navigator.language == "fr") || (navigator.userLanguage == "fr" ))// IE 
            <= 10

    String.localevoice = 'Microsoft Server Speech Text to Speech Voice (fr- 
           FR, HortenseRUS)';
      else
    String.localevoice = 'Microsoft Server Speech Text to Speech Voice (en- 
                   US, 
         ZiraRUS)';



   </script>
      </body>
     </html>

Now the problem is that bot can understand that bonjour is for frenchdialog and hello or other words in english call englishdialog. But when i start to speech , bot in frenchdialog read words as it was in english. I can't find the problem in my code


Solution

  • You can check the activity's .Locale property in the message controller, and load a different dialog based on it:

    if (activity.Locale.StartsWith("fr"))
        await Conversation.SendAsync(activity, () => new FrenchLuisDialog());
    else
        await Conversation.SendAsync(activity, () => new EnglishLuisDialog());
    

    And in the page hosting the webchat control, retrieve locale from the navigator and use it to set the speech recognizer, choose the voice, and set locale for BotChat.App:

    <script>
    
    function getVoice(locale) {
        if (locale.startsWith('fr'))
            return 'Microsoft Server Speech Text to Speech Voice (fr-FR, HortenseRUS)';
        else
            return 'Microsoft Server Speech Text to Speech Voice (en-US, ZiraRUS)';
    }
    
    let locale = "";
    if (navigator.languages != undefined)
        locale = navigator.languages[0];
    else
        locale = navigator.language;
    
    
    var speechOptions = {
        speechRecognizer: new CognitiveServices.SpeechRecognizer(
            {locale: locale, subscriptionKey:'xxxxxxx' }),
    
        speechSynthesizer: new CognitiveServices.SpeechSynthesizer(
            {
                subscriptionKey: 'xxxxxxxxxxx',
                gender: CognitiveServices.SynthesisGender.Female,
                voiceName: getVoice(locale)
            })
    }
    
    var botConnection = new BotChat.DirectLine({
        secret: "yBxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        webSocket: true ,
    
    });
    
    
      BotChat.App({
            speechOptions: speechOptions,
            botConnection: botConnection,
            user: {
                id: 'userid',
                name: 'User',
            },
            bot: { id: 'botid' },
            resize: 'detect',
          locale: locale
    
        },
      document.getElementById("bot"));
    

    ...