What is Node-RED?

Node-RED is a low-code programming environment for event-driven applications. It's a programming tool for wiring together hardware devices, APIs, and online services in new and interesting ways.

At the core of Node-RED is Node.js a JavaScript runtime environment built on Chrome's V8 JavaScript engine. Top 5 reasons to use Node-RED can be found here.

Let's build a spoken universal translator using Node-RED and Watson AI services

We will build a universal translator by using a Node-RED Starter application to connect with those Watson AI services:

• Speech to Text
• Language Translator
• 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.

We will learn how to:

• Create a Node-RED starter app running in IBM Cloud. Create instances of the Watson services: Speech to Text, Text to Speech, and Language Translator and how to connect those 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 app can be completed using an IBM Cloud Lite account.

Create an IBM Cloud account
Log into IBM Cloud

Step 1 – Let's create a Node-RED Starter App

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

3. Search for node-red

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

5. Enter a unique name for your application, it will be part of the application URL :
   

6. The Region, Organization, and Space fields will be pre-populated with valid options for your IBM Cloud account. I have a Lite account and I just accepted the defaults.

7. In the Selected Plan section, choose Lite.

8. Click the Create button.

The Node-RED Starter application will be provisioned in the IBM Cloud region that was specified. This process is called staging an application.

Step 2 – Let's create the Watson AI service instances

You can add Watson AI microservices to your application as APIs, through instances that you can manage through credentials. We will create and bind these microservices to your Cloud Foundry application. There are three Watson AI services, all available in the IBM Cloud Lite tier, needed to build a universal translator:

• Watson Speech to Text
• Watson Text to Speech
• Watson Language Translator

In IBM Cloud Catalog search for speech and 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:

In IBM Cloud Catalog, search for a translator, navigate to the AI category, select Language Translator, and click the Create button, I already had the one:

Step 3 – Let's connect the Watson AI Services to the Node-RED Starter Application

1. In IBM Cloud Dashboard navigate to the Apps section and select Node-RED universal-translator (your apps unique name):

The Applications Details opens, search for the Watson services that you created in the previous step and press the Connect button. Once it's connected you will have those Services ( Speech to Text, Text to Speech, and Language Translator ) connected like this:

Step 4 – Launch your Node-RED app 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 the Node-RED app, it will help you configure the visual programming editor. Once the Green Running icon appears, click the View App URL link, a new browser tab opens to the Node-RED start page:

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

Use the setup wizard to secure your editor with a user name and password and to browse and add more nodes. Click the Finish button to proceed:

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

Click the Person icon in the upper right corner, and Sign in with your new username and password credentials and you will get a screen like this:

The Node-RED Visual Programming Editor has a left side with a palette of nodes that you can drag onto the flow and wire nodes together to create a program.

Step 5 – Let's install Additional Node-RED Nodes

The universal translator that we are building needs a microphone to record your message and the ability to play the audio of the translation. We can add nodes to the Node-RED palette that add these capabilities, such a great thing!

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

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

1. 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.

Speech-to-Text flow

Click and drag a microphone node to your flow.

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

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

Wire the nodes together as shown in the screenshot below.

Click the red Deploy button.

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

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 and 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, 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 Deploy button (the red one).
7. Select the tab to the left of the Inject node. The audio of the message will play.

Language Translator flow

The universal translator will use the recorded transcript as the input to the language translator node, and 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 like this:
   

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

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

2. Double-click the Text to Speech node, and change the language to Spanish and select a voice (here I clicked and tried Croatian language but it was not available, doesn’t show it on the list and I'll stick with Spanish)

This is how your final flow should look like:

Finally, click the Deploy button (the red one) on the right top corner!

Final Step – let's test universal translator

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

You can follow the process and view the translations in the Debug tab of Node-RED:

Full documentation and more details on how to build Node-RED starter application using Watson services in IBM Cloud can be found here

To connect please check my Github, LinkedIn or Twitter.

Thank you for reading!