Build a spoken universal translator using Node-RED and Watson AI services

In this tutorial, you will learn how to create a spoken universal translator by using a Node-RED Starter application to connect with these Watson AI services: Speech to Text, Language Translator, and Text to Speech. The Node-RED Starter application includes a Node-RED Node.js web server and a Cloudant database to store the Node-RED flows.

Learning objectives

After completing this tutorial you will be able to:

• Create a Node-RED starter application running in IBM Cloud, create instances of the Watson services, Watson Speech to Text, Watson Text to Speech and Watson Language Translator and connect the services to your Node-Red app.

• Launch and configure the Node-RED visual programming editor.

• Install additional Node-RED nodes and create flows that use the Watson services to create the spoken universal translator.

Prerequisites

This tutorial can be completed using an IBM Cloud account.

• Create an IBM Cloud account
• Log into IBM Cloud

Estimated time

You can complete this tutorial in approximately 15 minutes.

Step 1 – Create a Node-RED Starter Application

Follow these steps to create a Node-RED Starter application in IBM Cloud.

1. Log in to your IBM Cloud account.

2. Click on the Catalog (1).

3. Search for node-red (2).

4. Select the Starter Kits category (3), then select Node-RED Starter (4).

5. Enter a unique name (5) for your application. This name will be part of the application URL (6). If the name is not unique, you will receive an error message and will need to enter another name.

6. The Region (7), Organization (8), and Space (9) fields will be pre-populated with valid options for your IBM Cloud account. If you have a trial or paid account, or if you belong to additional organizations, then you can choose to deploy to any region, organization, and space that is available to you.

7. In the Selected Plan section, choose Lite (10).

8. Click the Create button (11).

The Node-RED Starter application will be provisioned in the IBM Cloud region that was specified. This process is called staging an application. It can take a few minutes for this process to complete.

You do not need to wait for the application to provision and start. You can proceed to the next step.

Step 2 – Create the Watson AI service instances

You can add powerful Watson AI microservices to your application as APIs. These services are accessible through instances that you can manage through credentials. Instead of copying and pasting the credential keys into your app, this tutorial demonstrates how to create and bind these microservices to your Cloud Foundry application. The Node-RED nodes for these services will be easy to configure.

Three Watson AI services are needed to build a universal translator:

• Watson Speech to Text
• Watson Text to Speech

• Watson Language Translator

• Return to the IBM Cloud Catalog. Search for speech, navigate to the AI category.

• Select Speech to Text, and click the Create button.

• Return to the AI category in the IBM Cloud Catalog, and select Text to Speech, and click the Create button.

• Return to the IBM Cloud Catalog, search for translator, navigate to the AI category.

• Select Language Translator, and click the Create button.

Step 3 – Connect the Watson AI Services to the Node-RED Starter Application

In this step, you connect the newly created Watson AI services to your Node-RED Starter application.

1. Return to the IBM Cloud Dashboard, and navigate to the Cloud Foundry Apps section.

2. Select your nodered-universal-translator application. The Applications Details opens.

3. In the left navigation menu, select Connections.

4. Click the Create connection button.

5. Search for the Watson services that you created in the previous step, hover over Speech to Text and press the Connect button.

6. Click the Connect button to auto generate the binding credentials.

   DO NOT RESTAGE the application yet. Click the Cancel button. After you connect all three of the Watson AI service instances, you can restage the application just once.

   Click the Create Connection button again.

7. Search for the speech services, hover over the Text to Speech service, and click the Connect button.

8. Click the Connect button to auto-generate the binding credentials.

   Remember to NOT click the Restage button.

   Click the Create connection button again.

9. Search for the language translator service, hover over the Language Translator service, and click the Connect button.

10. Click the Connect button to auto-generate the binding credentials. Now, finally, you can click the Restage button.

The Cloud Foundry application will now restage and restart.

Step 4 – Launch your Node-RED application and open the Node-RED visual programming editor

Node-RED is an open-source Node.js application that provides a visual programming editor that makes it easy to wire together flows.

The first time you start your Node-RED application, Node-RED helps you set it up and configure the visual programming editor.

1. Once the Green Running icon appears, click the View App URL link.

   A new browser tab opens to the Node-RED start page.

2. Use the setup wizard to secure your editor with a user name and password and to browse and add more nodes. If you forget your user name and password, you can reset the credentials in the Cloudant DB or by setting IBM Cloud environment variables. Click the Finish button to proceed

3. Click the Go to your Node-RED flow editor button to launch the Node-RED flow editor.

4. Click the Person icon in the upper right corner, and Sign in with your new username and password credentials.

   The Node-RED Visual Programming Editor opens with a default flow. On the left side is a palette of nodes that you can drag onto the flow. You can wire nodes together to create a program.

Step 5 – Install Additional Node-RED Nodes

The universal translator that we are building needs both a microphone to record your message and also the ability to play the audio of the translation. Luckily, there are nodes that can be added to the Node-RED palette that add these capabilities.

1. Click the Node-RED Menu, and select Manage palette

2. Select the Install tab, and search for browser-utils. Find the node-red-contrib-browser-utils node, and click the Install button.

3. Search for play-audio, find the node-red-contrib-play-audio node, and click the Install button.

Step 6 – Build the flows for the universal translator

Node-RED allows you to drag and drop Nodes from the left palette onto your flow canvas and wire them together to create programs.

It is quick and easy to create the flows in Node-RED. However, if you want to just import the flows into your Node-RED application, you can get the code from my GitHub repo.

Speech-to-Text flow

First, let’s build the Speech-to-Text flow.

1. Click and drag a microphone node to your flow.

2. Click and drag a Speech to Text node to your flow. Double-click it and select US English.

3. Click and drag a Debug node to your flow. Double-click it and have it output msg.transcription.

4. Wire the nodes together as shown in the screenshot below.

5. Click the red Deploy button.

6. Select the tab to the left of the microphone node and allow your browser access to the microphone on the laptop.

7. Record a message, like “wow this is so much fun!”

Text-to-Speech flow

Now, let’s build the Text-to-Speech flow.

1. Click and drag an Inject node to your flow. Double-click it and change the payload type to a string and type a message.

2. Click and drag a Text to Speech node to your flow. Double-click it and select US English.

3. Click and drag a Change node to your flow.

   The returned audio transcription from the Text to Speech node will be returned as a raw buffer that contains the audio on the msg.speech message. The play-audio node expects the buffer to be passed in on msg.payload so the Change node will reassign the values.

   Double-click the Change node and assign the msg.payload to msg.speech.

4. Click and drag a play-audio node to your flow.

5. Wire the nodes together as shown in the screenshot below.

6. Press the red Deploy button.

7. Select the tab to the left of the Inject node. The audio of the message will play.

Language Translater flow

Our universal translator will use the recorded transcript as the input to the language translator node, and then send the foreign language to the Text to Speech node.

1. Click and drag another Change node to your flow. Double-click it and assign msg.payload to msg.transcription.

2. Click and drag a language translator node to your flow. Double-click it and select English as the Source and Spanish as the Target.

3. Click and drag a Debug node to your flow.

4. Double-click the Text to Speech node, and change the language to Spanish and select a voice.

5. Wire the nodes together as shown in the screenshot.

6. Click the red Deploy button.

Step 7 – Test your universal translator!

Now that you’ve built a universal translator, try it out!

1. Select the tab to the left of the microphone node and allow your browser access to the microphone on the laptop.

2. Record a message.

3. You can view the translations in the Debug tab of Node-RED.

4. Experiment with translations between various languages.

Summary

Congratulations! You created a Node-RED starter application using Watson services in IBM Cloud.