Add AI Functionality to Your App in Minutes with AWS AI Cognitive Services
Tags: javascript, react, machinelearning, aws
Published: 2020-03-10 19:52:53

---
title: Add AI Functionality to Your App in Minutes with AWS AI Cognitive Services
published: true
description: Add AI functionality like audio transcription, text to speech, language translation, computer vision, and natural language understanding to your webapps. Interactive demos included with boilerplate code for standalone components in React!
cover_image: https://pbs.twimg.com/media/ESr9FjzVAAAEAgv?format=jpg&name=medium
tags: javascript, react, machinelearning, aws
---

![](https://github.com/nmwalsh/aws-ai-services-site/raw/master/etc/thumbnail.png)

[AWS AI Service Live Demo Site (no code or sign-in required)](https://ai-service-demos.go-aws.com/)

Artificial intelligence and machine learning offer truly game changing functionality, but you probably didn't need me to tell you that! Concepts like computer vision and natural language understanding help us to unlock additional value from data we already have in sources like pictures, videos, and text. Additionally, AI can help to convert and generate new media, for scenarios like language translation, text to speech audio synthesis, and transcribing audio to text. 

Unfortunately, the process of learning the prerequisite theory, popular machine learning frameworks, and finally integrating this code into existing software, is cumbersome. Don't even get me started on the process of having to gather and clean your own datasets for training a model!

![_Using Amazon Rekognition to detect objects in an image_](https://pbs.twimg.com/media/ESr9FjzVAAAEAgv?format=jpg&name=medium)
_Using Amazon Rekognition to detect objects in an image_

To help you on your journey, AWS has a multitude of services to help empower developers without previous machine learning expertise. In this post, I wanted to cover some of the [fully managed AI APIs](https://aws.amazon.com/machine-learning/ai-services/), which I find are the most actionable for developers looking to implement powerful AI functionality quickly. These services offer a cost-effective, highly accurate, easy to use solution, without having to manage more of the ML pipeline in a custom model solution with a tool like [Amazon SageMaker](https://aws.amazon.com/sagemaker/). If you can use an SDK, you won't have to worry about any ML theory or ops here.

 Some of the biggest benefits of AWS fully managed AI APIs over other self-rolled solutions:

- Extremely high availability, with no need to manage scaling
- Models are crafted and improved over time by AWS AI Applied Scientists. Integrate once, and the endpoints are automatically updated in waves when new versions of the models are launched
- Predictable, value-aligned pricing model (pay per request)
- Very easy to get started with - if you can use an SDK, you can use AWS AI APIs

### Demos:

To see everything on the [live demo site, check it out here](https://ai-service-demos.go-aws.com/).

To power the demos, I used various AWS AI Services to make easily modifiable, standalone React components. Full code samples available here:

{% github nmwalsh/aws-ai-services-site %}

The code samples were built using the minimal requirements wherever possible (I swear, most of the trickery is in the CSS), with the structure following a similar format to `Translate.js`, the most minimal example of the bunch:

```javascript
// Translate.js 
// boilerplate react code above 

// 1. instantiate Translate client
        var Translate = new AWS.Translate({apiVersion: '2017-07-01'});
        let currentComponent = this;

        // 2. call translateText method
        if (!!TranslateParams.Text) {
          Translate.translateText(TranslateParams, function (err, data){
            if (err) {
                // 3a. catch error
                currentComponent.setState({resultMessage: err.message});
                currentComponent.setState({resultTranslation: 'No translation occurred - check the error!'})
            }
            else {
                // 3b. process successful response
                currentComponent.setState({resultTranslation: data.TranslatedText});
                currentComponent.setState({resultMessage: "Text translation successful!"})
            }
            document.getElementById("chck1").checked = true;
        });
      };

    }


    render() {
        let result, translation;
        // 4. If there is a result message from Translate, generate HTML from JSX
        if(this.state.resultMessage !== ''){
          result = <code>{this.state.resultMessage}</code>
          translation = <code>{this.state.resultTranslation}</code>
        }
/* other JSX code below for displaying info in app */
```

_All components available in `src/components/`_

- [Amazon Transcribe](https://ai-service-demos.go-aws.com/transcribe)
    - [Transcribe.js](https://github.com/nmwalsh/aws-ai-services-site/blob/master/src/components/Transcribe.js): Batch async transcription job for custom audio
- [Amazon Polly](https://ai-service-demos.go-aws.com/polly)
    - [Polly.js](https://github.com/nmwalsh/aws-ai-services-site/blob/master/src/components/Polly.js): Text to speech with standard or neural voice engine across all available languages
- [Amazon Comprehend](https://ai-service-demos.go-aws.com/comprehend)
    - [Comprehend.js](https://github.com/nmwalsh/aws-ai-services-site/blob/master/src/components/Comprehend.js): Sentiment, Entity, Key Phrase, and Syntax Token detection
- [Amazon Rekognition](https://ai-service-demos.go-aws.com/rekognition)
    - [Rekognition.js](https://github.com/nmwalsh/aws-ai-services-site/blob/master/src/components/Rekognition.js): Computer vision - object detection in images
- [Amazon Translate](https://ai-service-demos.go-aws.com/translate)
    - [Translate.js](https://github.com/nmwalsh/aws-ai-services-site/blob/master/src/components/Translate.js): Text to text translate

### To clone and install locally:

`git clone https://github.com/nmwalsh/aws-ai-services-site`

`npm install`

`npm start`

`https://localhost:3000`

## Try these services out for free in your own accounts:

The services covered in this demo all have very generous free tiers. At a glance:

| Service            | Description                    | Quantity                       | 
|--------------------|--------------------------------|--------------------------------|
| Amazon Translate   | Text-Text Translation          | 2 million characters/month     |
| Amazon Polly       | Text to Speech                 | 5 million characters/month     |
| Amazon Comprehend  | Natural Language Understanding | 5 million characters/API/month | 
| Amazon Rekognition | Computer Vision                | 5k images/month                | 
| Amazon Transcribe  | Audio to Text Transcription    | 60 minutes/month               |  

For the most up-to-date info on free tier status, check out [the live pricing page here](https://aws.amazon.com/free/).

## Built With

* [AWS AI Services](https://aws.amazon.com/machine-learning/ai-services/) - Fully managed AI services, on a pay-per-use model.
* [AWS Amplify](https://aws.amazon.com/amplify/) - Development toolchain for building and deploying webapps

Another awesome callout here is [Amplify Predictions](https://aws-amplify.github.io/docs/js/predictions), a class of functionality for the Amplify Framework that enables you to easily generate code that achieves similar functionality to what I created, all with a few simple CLI commands! I would highly recommend this, as the autogenerated code will save you significant time for some of the services that would otherwise require writing code to act as connective tissue (storing data to S3 before processing, for example).

## Thanks for reading!

I hope this article and code sample were helpful for you! My goal with this was to offer a way to try AWS AI services for yourselves, with your own data. This way, you can see if these services would be a good fit for your use case - all before writing any of your own code. I'm working on some more demos in this space and would love to hear your thoughts! 

{% twitter 1237092022785167360 %}

For the latest updates on new demos, or to vote on the next one I'll create, follow along [on twitter (@TheNickWalsh)](https://twitter.com/thenickwalsh). Cheers!