Full Stack Machine learning on AWS: Translating Text with AWS Amplify and Amazon Translate

Instructor: [0:01] We'll start by creating a new React app by using create react app.

[0:12] Now, we'll change into the directory and initialize new amplify project by running amplify init. Here, we'll give the project a name, the environment a name, choose our default text editor, and then accept the defaults for the rest of the options.

[0:33] When prompted for the AWS profile, choose the AWS profile that you'd like to use.

[0:42] Next, we'll add authentication by running amplify add auth and accept all of the defaults.

[0:51] Now that authentication has been enabled, we can enable predictions by running amplify app predictions. Here, we'll choose convert as the category and translate text into a different language as the type of conversion.

[1:07] Next, we'll provide a name for the resource, and a target language and a source language. The target and source languages can be provided dynamically as well, but we're setting the base languages here.

[1:22] We'll allow both authenticated and guest users so that unauthenticated users can use our application.

[1:28] To deploy everything, we can now run amplify push.

[1:36] Now that the services have been deployed, we can now open index.js to configure our React application to work with amplify.

[1:44] Here, we'll employ amplify from AWS-amplify, the configuration from AWS-exports file and the Amazon AI predictions provider from AWS-amplify/predictions.

[2:07] Next, we'll configure both amplify as well adding the new amplify Amazon AI predictions provider.

[2:34] Next, we'll open app.js and import useState from React so that we can control the component's state. The Amplify API that we'll use is called Predictions, so we'll go ahead and import Predictions from AWS-amplify at the top of the file.

[2:51] To hold and update the response from the Predictions API, we'll create a variable called response and a function called setResponse. To hold and update the user's text input, we'll create a variable text and a function called updateText.

[3:23] Now, we'll create a function called translate that will call the Predictions API. In this function, we'll call it Predictions.convert, setting translateText as the Prediction's type. We'll then pass in the text as a source and set the response in a variable called data. We can then call set response using the translated text by calling setResponse and passing in data.text.

[4:04] In the UI, we'll create an input with an onChange handler that we'll call updateText passing in the event target value. We'll also set the value of the input to the dynamic text value. To call the translate function, we'll add the new button with an onClick handler set to translate. We can then view the response by setting it within a paragraph tag.

[4:46] Back at the command log, we'll now install AWS-amplify using either NPM or Yarn. We can now test everything out by running npm start.