Get your Chatbot to Speak over 12 Languages with Deepl

One of the great strengths of chatbots is their ability to adapt to each and every user. Chatbots can remember user details, fetch information from third-party API, or ask questions to the user. Being able to speak and understand the user’s language is surely on the top of the list when it comes to adapting the conversation to the user.

In this article we will see how to use translation to get a chatbot to understand the user and have a conversation in his/her language. We’re going to use the Deepl App, available on the CSML Studio.
Note that Deepl is not free but extremely accurate, there is an alternative app that you could use for free : Frengly; although it is free, it is also not even close to Deepl in terms of accuracy. Good news, both Apps work the same way.

Step1: Create a chatbot in one single language

Let’s create a food recipe chatbot in english. We’ll get the recipes from an open API: RecipePuppy. The chatbot is going to ask what sort of dish and what ingredient the user wants in the recipe, and then get the matching dish from the API. Easyyyyyyyyyyy.

start:
  say "Hi, I am the chatbot that find awesome recipes for you!"
  goto dishType

dishType:
  say "What type of dish are you looking for?"
  hold
  remember dType = event
  goto dishIngredient

dishIngredient:
  say "What ingredient would you like in the recipe?"
  hold
  remember dIngredient = event
  say "Ok! Let me find the right recipes for you!"
  goto results

results:
  do response = HTTP("http://www.recipepuppy.com/api/?i={{dIngredient}}&q={{dType}}").get().send()
  do recipes = response.results
  do cards = []
  foreach (recipe, i) in recipes {
    do cards.push(Card(
        title=recipe.title,
        subtitle=recipe.ingredients,
        image_url=recipe.thumbnail,
        buttons=[]))
  }
  say Carousel(
    cards = cards)
  goto end

Step2: Install the Deepl App

Now that we have our chatbot, let’s get started with translation. Installing the Deepl App is the way to go. Head over to the `Functions` menu, find the Deepl App in the list, and install it. Enter your Deepl credentials to finish the installation. The same process can be done for Frengly.

Deepl App in the CSML Development Studio

Done!

Step3: Set the user’s language

When a user first talks to the chatbot, we want to ask this user what’s his/her language in order to switch from english to this language. Let’s add this bit of logic.

First we check if the user language is already known by the chatbot (even if it’s english!), and if it isn’t we want the bot to go to the step `pickLanguage` before saying anything else. This way we can set the user language in memory for further use.

start:
  if (!language) goto pickLanguage
  say "Hi, I am the chatbot that find awesome recipes for you!"
  goto dishType

pickLanguage:
  do availableLang = ["fr", "en", "de", "es", "pt", "it", "jp", "cn", "ru"]
  say Question("What language should we speak?",
    button_type="quick_reply",
    buttons=availableLang)
  hold
  if (!availableLang.find(event)) {
    say "You should click on one of the buttons 🙃"
    goto pickLanguage
  }
  remember language = event
  say "Ok! Let's spreak {{language}}"
  goto start

Step4: Translate the content

Now that we’ve installed the App and know the user language, we need to dynamically translate everything that the chatbot and user say. This way the chatbot will be able to understand when the user asks an “Omelette du fromage” 🤣.

Let’s create a CSML function to wrap the translating logic.

fn translate(from, to, text):
  if (from == to) return text
  do t = Fn("deepl", from=from, to=to, text=text)
  return t.translations[0].text

// Let's check how transltion work in the `dishType` step for instance
dishType:
  // Translating to the user language
  say translate("en", language, "What type of dish are you looking for (tart, stew, ...)?")
  hold
  // Translating user input to english before placing the value in a variable
  remember dType = translate(language, "en", event)
  goto dishIngredient

Click on the chatbot at the bottom right of the screen to see the result!

Here is the chatbot source code: https://github.com/CSML-by-Clevy/recipe-finder

Going further

Here are a few ideas to improve this chatbot:

• Show several recipes with the `Carousel()` component
• Give the opportunity to the user to change his/her language to an other one
• Plug some NLP so the user can pick the language using actual words
• Allow the user to provide more than one ingredient
• Check if the dish types and ingredients exist

Well I guess there are many way to improve the chatbot but at least we’ve got a great base!

Originally published at https://blog.csml.dev on November 16, 2020.