Beginner Tutorial


Turning Amazon Lex Responses into Text


15 minutes

Posted on: March 5, 2019

Learn Sumerian
Turning Amazon Lex Responses into Text

Tags

text-to-speech
host
polly
lex
chatbot
bot

In this tutorial you will learn about:


In this tutorial, we will build upon what we created in the the Using Dialogue Component and Amazon Lex to Build a Chatbot tutorial, to create closed captioning for our chatbot. More specifically, we will use HTML to display the Lex responses.

Though we used Cristine as our host in the previous tutorial, we will be using Fiona in this tutorial.

You’ll learn about:

  • Dialogue component
  • State Machine
  • Scripting

Prerequisites

Before you begin, be sure you complete the Using Dialogue Component and Amazon Lex to Build a Chatbot tutorial. Make sure you created the appropriate CloudFormation stack with the Cognito Identity Pool ID inserted in your scene. To learn more about this step, see the AWS Configuration tutorial.

Step 1: Add an HTML Entity

Because most of the work has been completed in the previous tutorial, we will pick up where we left off. In this step, we will add an HTML entity that will display the Lex response.

  1. Click Create Entity above the canvas, and select the </> entity (HTML).

  2. With the HTML Entity select, navigate to the Inspector panel and click Open in Editor.

  3. This will open up the Text Editor. Copy and paste the following HTML into the editor:

         <style>
     	/*
     	 * Place your styles here. Beware that CSS styles affect all
     	 * HTML elements in the page so you need to provide appropriate
     	 * classes or IDs to identify the elements being styled.
     	 */
    
     	.my-paragraph {
     		font-size: 16px;
     		padding: 10px;
     		border-radius: 3px;
     		margin: 0;
     		font-family: sans-serif;
     	}
     </style>
    
     <p class="my-paragraph">
     	This is HTML
     </p>
    
     <!-- Note:
      + It is not recommended to use <script> tags directly. Consider using the Script Component instead.
     -->
    

    Note: The only difference between the default HTML and the HTML provided above, is that we have removed the following background value information: “background: #fefefe;”. The reason is because text with a transparent background simply looks cleaner. Additionally, you can change “This is HTML” to whatever you prefer.

    Make sure to click Save!

  4. Return to the Sumerian editor. With the HTML entity selected, move the entity to be positioned above the Host. We will use the Translation values (0, 2, 0).

Your scene should now look something like this:

Step 2: Update State Machine and Add a Script

In this step, we will update the State Machine behavior with an Execute Script action. We will then add a script that will convert the Lex response data into text to be displayed in the HTML entity. We will be updating the ChatBot behavior created in the last tutorial. However, feel free to update the TypeBot behavior. This is the behavior that allows users to chat with the Lex bot using keyboard input.

  1. Open the scene you created in the previous tutorial.

  2. Open your ChatBot behavior.

  3. Select the Play Response state.

  4. Add a new action. Search for and add the Execute Script action.

  5. To create and add a new script, click the + button.

  6. Select the Custom script from the list of options.

  7. Click the edit button (i.e. pencil icon) to open up the Text Editor to create a new script.

  8. The Text Editor is now open with a new script, named “Script”. Change the name of the script by hovering over the Script. This will display an edit button. Change the name to “lexResponseToHTML”.

  9. Replace the script with the following:

     'use strict';
    
     // The sumerian object can be used to access Sumerian engine
     // types.
     //
     /* global sumerian */
    
     // Called when play mode starts.
     //
     function setup(args, ctx) {
     	// Set text on the argument entity by default. If it wasn't set, use the entity containing the script
     	ctx.htmlEntity = args.htmlEntity || ctx.entity;
    
     	// Make sure Html component exists
     	if (!ctx.htmlEntity.hasComponent('HtmlComponent')) {
     		throw(`Cannot add text to entity ${ctx.htmlEntity.name}. Entity does not have an Html Component.`);
     	}
    
     	// Make sure the selector isn't empty
     	if (!args.selector) {
     		throw(`Cannot add text to entity ${ctx.htmlEntity.name}. No selector provided.`);
     	}
    
     	// Clear the text by default
     	setHtmlText(ctx.htmlEntity, args.selector, '');
     }
    
     function setHtmlText(entity, selector, text) {
     	// Get elements with selector
     	const elements = entity.htmlComponent.domElement.querySelectorAll(selector);
    
     	// Failure transition if no elements found
     	if (elements.length === 0) {
     		console.error(`Cannot add text to entity ${entity.name}. No elements with selector ${selector}`);
     		return false;
     	}
    
     	// Set the text
     	for (const element of elements) {
     		element.innerText = text;
     	}
    
     	return true;
     }
    
     // When used in a ScriptAction, called when a state is entered.
     // Use ctx.transitions.success() to trigger the On<State>Success transition
     // and ctx.transitions.failure() to trigger the On<State>Failure transition
     function enter(args, ctx) {
     	// Failure transition if Html component doesn't exist
     	if (!ctx.htmlEntity) {
     		ctx.transitions.failure();
     		return;
     	}
    
     	// Failure transition if no selector
     	if (!args.selector) {
     		ctx.transitions.failure();
     		return;
     	}
    
     	// Set text with Lex response success
     	if (setHtmlText(ctx.htmlEntity, args.selector, ctx.entity.getData('lexResponse'))) {
     		ctx.transitions.success();
     	}
    
     	// Set text with Lex response failuer
     	else {
     		ctx.transitions.failure();
     	}
     }
    
     // When used in a ScriptAction, called when a state is exited.
     //
     function exit(args, ctx) {
     	// Clear the text
     	setHtmlText(ctx.htmlEntity, args.selector, '');
     }
    
     // Called when play mode stops.
     //
     function cleanup(args, ctx) {
     }
    
     // Defines script parameters.
     //
     var parameters = [
     	{type: 'entity', key: 'htmlEntity', name: 'Html Entity (optional)', description: 'Entity containing the Html Component (optional). If none is provided, the enity containing this script will be used.'},
     	{type: 'string', key: 'selector', name: 'Html element selector', default: 'p', description: 'Name of the selector for the Html element to set text on.'},
     ];
    

    Note: To better understand what is happening in this script, see the comments included!

  10. Save your script and return to the Sumerian editor.

  11. With the Play Response state still selected in the ChatBot State Machine behavior, add the character p to HTML Element Selector.

  12. In the Entities panel, click and drag the HTML entity into the HTML entity drop input (on the Play response state).

Now you can test your scene. The Lex response data should appear as text above the Host.

Now publish and share your scene!

You’ve learned how to use the Dialogue component in conjunction with the State Machine and Amazon Lex. If you used an example Lex bot, now try creating a custom bot.

To learn more, see the following tutorials:

Back to Tutorials

© 2019 Amazon Web Services, Inc or its affiliates. All rights reserved.