Tutorial: Use Azure Cognitive Services to build a translator app hosted on Azure App Service 👨‍💻👩‍💻
Tags: tutorial, beginners, showdev, azure
Published: 2019-10-11 12:24:55

This tutorial will demonstrate the usage of [Azure Cognitive Services](https://azure.microsoft.com/services/cognitive-services/?WT.mc_id=devto-blog-abhishgu) with the help of a text translation example implemented using a simple [Golang](https://golang.org) app deployed to [Azure App Service](https://azure.microsoft.com/services/app-service/?WT.mc_id=devto-blog-abhishgu)

![](https://thepracticaldev.s3.amazonaws.com/i/74qoolkvnelatq0t5mkl.png)

You will:

- Get an overview of Azure Cognitive and Azure App Service capabilities
- Walk through a simple yet practical example of how to use [Cognitive Translator Text API](https://docs.microsoft.com/azure/cognitive-services/translator/translator-info-overview?WT.mc_id=devto-blog-abhishgu)
- Learn how to setup, configure Cognitive Service and App Service along with application deployment

> I would love to have your feedback and suggestions 😃 Just [tweet/DM](https://twitter.com/abhi_tweeter) or drop a comment!

## Overview

Here is a quick overview of the Azure services which are being used.

### Azure Cognitive Services

Azure Cognitive Services enable developers to build intelligent [AI and Machine Learning powered](https://docs.microsoft.com/azure/cognitive-services/cognitive-services-and-machine-learning?WT.mc_id=devto-blog-abhishgu) applications. It offers capabilities across areas of [Vision](https://azure.microsoft.com/services/cognitive-services/directory/vision/?WT.mc_id=devto-blog-abhishgu), [Speech](https://azure.microsoft.com/services/cognitive-services/directory/speech/?WT.mc_id=devto-blog-abhishgu), [Language](https://azure.microsoft.com/services/cognitive-services/directory/lang/?WT.mc_id=devto-blog-abhishgu), [Web Search](https://azure.microsoft.com/services/cognitive-services/directory/search/?WT.mc_id=devto-blog-abhishgu), and [Decision](https://azure.microsoft.com/services/cognitive-services/directory/decision/?WT.mc_id=devto-blog-abhishgu) available in the form of SDKs and APIs, thereby making AI/ML more accessible for developers at large.

We will be using the [Translator Text API](https://docs.microsoft.com/azure/cognitive-services/translator/translator-info-overview?WT.mc_id=devto-blog-abhishgu) in this example, which allows you to add multi-language user experiences in more than 60 languages, and can be used on any hardware platform with any operating system for text-to-text language translation.

> Azure Cognitive Services are also available in the form of [Docker containers](https://docs.microsoft.com/azure/cognitive-services/cognitive-services-container-support?WT.mc_id=devto-blog-abhishgu)!

### Azure App Service

Azure App Service enables you to build and host web apps, mobile back ends, and RESTful APIs in the programming language of your choice without managing infrastructure. [You can use it on Linux](https://docs.microsoft.com/azure/app-service/containers/app-service-linux-intro?WT.mc_id=devto-blog-abhishgu) to host web apps natively on Linux for supported application stacks with support for built-in Docker images for [multiple languages such as Node.js, Java, Python](https://docs.microsoft.com/azure/app-service/containers/app-service-linux-intro?WT.mc_id=devto-blog-abhishgu#languages) etc. Although we are using Golang for the sample app, we can still host it on App Service since it supports custom Docker images as well!

## Pre-requisites

You will need a [Microsoft Azure account](https://docs.microsoft.com/azure/?WT.mc_id=devto-blog-abhishgu) - go ahead and [grab a free one](https://azure.microsoft.com/free/?WT.mc_id=devto-blog-abhishgu) if you don't have it already. Also, ensure that you have the [Azure CLI](https://docs.microsoft.com/cli/azure/install-azure-cli?view=azure-cli-latest&WT.mc_id=devto-blog-abhishgu) installed (should be quick!)

## Code walkthrough...

Before we actually go through the process of setup and deployment, let's take a moment to skim through the application logic

> the code is available on [GitHub](https://github.com/abhirockzz/azure-cognitive-translateapp)

The application has two parts:

- Frontend: using which a user can enter the text to be translated in a specific language
- Backend: a Go API which accepts the request for translation, invokes the Azure Cognitive Services APIs and returns the response back to the user

> UI from [this tutorial](https://docs.microsoft.com/azure/cognitive-services/translator/tutorial-build-flask-app-translation-synthesis?WT.mc_id=devto-blog-abhishgu) was repurposed for this example

The Go backend provides a simple HTTP server. We register an HTTP handler for the UI

    uiHandler := http.FileServer(http.Dir("ui"))
	http.Handle("/", uiHandler)

Another handler which serves the translate request (only relevant portions of the code have been shown for brevity sake)

    ....
    http.HandleFunc(translateRoute, func(w http.ResponseWriter, r *http.Request) {
		var userReq request
		err := json.NewDecoder(r.Body).Decode(&userReq)
		response, err := translateText(userReq.Text, userReq.ToLang)
		err = json.NewEncoder(w).Encode(&response)
	})
    ....

Finally, the HTTP server is started

	http.ListenAndServe(":"+port, nil)

The `translateText` function is responsible for invoking the Text Translator API. This is where the Translator Text API in invoked. The API endpoint is a combination of 

- the base endpoint passed as env variable (`https://api.cognitive.microsofttranslator.com`), 
- a suffix (`/translate?api-version=3.0"`) and 
- target language code (e.g. `en` for english) which is added as a query parameter (`to`) 

> e.g. `https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&to=de`. 

The request body is a simple JSON payload which contains the text to be translated

    func translateText(text, toLang string) (translateAPIResponse, error) {
        ....
        cognitiveServiceEndpoint := baseEndpoint + endpointSuffix + "&to=" + toLang
        reqBody := `[{'Text':'` + text + `'}]`
        req, err := http.NewRequest(http.MethodPost, cognitiveServiceEndpoint, strings.NewReader(reqBody))

        req.Header.Add(subscriptionKeyHeader, subscriptionKey)
        req.Header.Add("Content-Type", "application/json")

        res, err := http.DefaultClient.Do(req)

        var result translateAPIResponse
        err = json.NewDecoder(res.Body).Decode(&result)
        return result, nil
    }

The required environment variables for Cognitive Service subscription keys and API Endpoint are checked in the `init()` function in order to fail fast if they are not configured

    func init() {
        subscriptionKey = os.Getenv(subscriptionKeyEnvVar)
        if "" == subscriptionKey {
            log.Fatalf("Please set the %s environment variable", subscriptionKeyEnvVar)
        }
        baseEndpoint = os.Getenv(endpointEnvVar)
        if "" == baseEndpoint {
            log.Fatalf("Please set the %s environment variable", endpointEnvVar)
        }
    }

Now that you have an overview of the basic logic, let's get all of this up and running. We will start by setting up the Azure Cognitive Service.

## Azure Cognitive Services setup

Create a new Azure Resource group to try out this demo app.

    export AZURE_RESOURCE_GROUP=[to be filled]
    export AZURE_LOCATION=[to be filled e.g. southeastasia]

    az group create --name $AZURE_RESOURCE_GROUP --location $AZURE_LOCATION

You should see a response similar to below

    {
        "id": "/subscriptions/1234564b-6705-4cc2-b8ea-9a9036f8b42d/resourceGroups/foobar-resource-group",
        "location": "southeastasia",
        "managedBy": null,
        "name": "foobar-resource-group",
        "properties": {
            "provisioningState": "Succeeded"
        },
        "tags": null,
        "type": null
    }

To create a Cognitive Services account, you will require:

- `kind` of service you want to use - Since we are using Translate Text service, we will choose `TextTranslation`

> find the list of available Cognitive Service `kind`s with the [`az cognitiveservices account list-kinds`](https://docs.microsoft.com/cli/azure/cognitiveservices/account?view=azure-cli-latest&WT.mc_id=devto-blog-abhishgu#az-cognitiveservices-account-list-kinds)

- `SKU` (pricing tier) you want - you can use the free tier SKU (`F0`) for this example. To find the exhaustive list of `SKU`s, use `az cognitiveservices account list-skus --kind TextTranslation --location $AZURE_LOCATION`

> documentation for [`az cognitiveservices account list-skus`](https://docs.microsoft.com/cli/azure/cognitiveservices/account?view=azure-cli-latest&WT.mc_id=devto-blog-abhishgu#az-cognitiveservices-account-list-skus)

Set the required env variables

    export COGNITIVE_SERVICE_KIND=TextTranslation
    export COGNITIVE_SERVICE_SKU=F0
    export COGNITIVE_SERVICE_ACCOUNT_NAME=[to be filled e.g. text-translation-service]

To create an account

    az cognitiveservices account create \
        --name $COGNITIVE_SERVICE_ACCOUNT_NAME \
        --resource-group $AZURE_RESOURCE_GROUP \
        --kind $COGNITIVE_SERVICE_KIND \
        --sku $COGNITIVE_SERVICE_SKU \
        --location $AZURE_LOCATION \
        --yes

> documentation for [az cognitiveservices account create](https://docs.microsoft.com/cli/azure/cognitiveservices/account?view=azure-cli-latest&WT.mc_id=devto-blog-abhishgu#az-cognitiveservices-account-create)


You need the keys for your Cognitive Service resource to be able to authenticate to it.

    az cognitiveservices account keys list \
        --name $COGNITIVE_SERVICE_ACCOUNT_NAME \
        --resource-group $AZURE_RESOURCE_GROUP

You should get two keys as a JSON response - you can use either of them

    {
    "key1": "42d9a082a4242edbaffd42487db8d2ec",
    "key2": "2f2ce290b0ae4c42a428b7e6ebe34242"
    }

Please note that these subscription keys include sensitive information and you should not share them. They should be stored securely and regenerated regularly.

> documentation for [`az cognitiveservices account keys list`](https://docs.microsoft.com/cli/azure/cognitiveservices/account/keys?view=azure-cli-latest&WT.mc_id=devto-blog-abhishgu#az-cognitiveservices-account-keys-list)

### Sanity check

Before proceeding further, just check to see if the Cognitive Service setup is working properly. All you need is a way to access the Cognitive Service REST API. I am using `curl` in this case to test conversion for the text `Hello World` to German (`de`)

    export COGNITIVE_SERVICE_API_KEY=[fill in the API/subscription key obtained earlier]

    curl -X POST "https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&to=de" -H "Ocp-Apim-Subscription-Key: $COGNITIVE_SERVICE_API_KEY" -H "Content-Type: application/json" -d "[{'Text':'Hello World'}]"

> `https://api.cognitive.microsofttranslator.com` is the base HTTP endpoint for the translate API

You should see this JSON response with `"text": "Hallo Welt"` which is the translated response

```
[
  {
    "detectedLanguage": {
      "language": "en",
      "score": 1
    },
    "translations": [
      {
        "text": "Hallo Welt",
        "to": "de"
      }
    ]
  }
]
```

## Build a Docker image for the translation app

> This step is optional. You can use the pre-built image [`abhirockzz/azure-translate`](https://hub.docker.com/r/abhirockzz/azure-translate), which I have made available on [DockerHub](https://hub.docker.com)

You can use the Dockerfile to build your own image and push it to a Docker registry (public/private) of your choice.

    docker build -t [REPOSITORY_NAME/YOUR_DOCKER_IMAGE:TAG] .
    //e.g.
    docker build -t [abhirockzz/azure-translate:latest] .

    //login to your registry
    docker login

    //push image to registry
    docker push [REPOSITORY_NAME/YOUR_DOCKER_IMAGE:TAG]

> [Here is a tutorial](https://docs.microsoft.com/azure/app-service/containers/tutorial-custom-docker-image?WT.mc_id=devto-blog-abhishgu) which provides an example of how to use [Azure Container Registry](https://azure.microsoft.com/services/container-registry/?WT.mc_id=devto-blog-abhishgu) with Azure Web App 

## Setup and deploy to Azure App Service

It's time to deploy our app to the cloud - let's quickly do that using Azure App service. Start by creating an App Service Plan which defines a set of compute resources for our web app to run. 

> Refer to [the documentation](https://docs.microsoft.com/azure/app-service/overview-hosting-plans?toc=%2fazure%2fapp-service%2fcontainers%2ftoc.json&WT.mc_id=devto-blog-abhishgu) for details on App Service plans

The plan is associated with a `SKU` - just like Cognitive Services, you need to choose a `SKU` (pricing tier) for App Service as well. We will use a small tier (`B1`) for this example.

> Accepted values are `B1, B2, B3, D1, F1, FREE, P1V2, P2V2, P3V2, PC2, PC3, PC4, S1, S2, S3, SHARED`

    export APP_SERVICE_PLAN_NAME=[to be filled e.g. my-appsvc-plan]
    export APP_SERVICE_SKU=B1

    az appservice plan create --name $APP_SERVICE_PLAN_NAME --resource-group $AZURE_RESOURCE_GROUP --sku $APP_SERVICE_SKU --is-linux

> documentation for [`az appservice plan create`](https://docs.microsoft.com/cli/azure/appservice/plan?view=azure-cli-latest&WT.mc_id=devto-blog-abhishgu#az-appservice-plan-create)

Deploy the application

    export APP_NAME=[to be filled e.g. translateapp]
    export APP_DOCKER_IMAGE=[to be filled e.g. abhirockzz/azure-translate]
    export COGNITIVE_TRANSLATOR_TEXT_SUBSCRIPTION_KEY=[Cognitive Translator text API key obtained previously]
    export COGNITIVE_TRANSLATOR_API_BASE_ENDPOINT=https://api.cognitive.microsofttranslator.com
    az webapp create --resource-group $AZURE_RESOURCE_GROUP --plan $APP_SERVICE_PLAN_NAME --name $APP_NAME --deployment-container-image-name $APP_DOCKER_IMAGE

    //add the environment variables required by the application
    az webapp config appsettings set --resource-group $AZURE_RESOURCE_GROUP --name $APP_NAME --settings COGNITIVE_TRANSLATOR_TEXT_SUBSCRIPTION_KEY=$COGNITIVE_TRANSLATOR_TEXT_SUBSCRIPTION_KEY COGNITIVE_TRANSLATOR_API_BASE_ENDPOINT=$COGNITIVE_TRANSLATOR_API_BASE_ENDPOINT

## Try some translations!

You should be able to access your web app using a browser. Simply navigate to `https://[APP_NAME].azurewebsites.net/` e.g. `https://translateapp.azurewebsites.net/`

It's straightforward to use the app. Simply enter the text you want to translate and choose the target language from the **Translate to:** dropdown menu. If all goes well, you should see the result under **Translated text:** !

### Once you're done....

Delete the resource group to remove all the associated resources create for Cognitive Services and Azure App Service

    az group delete --name $AZURE_RESOURCE_GROUP --yes --no-wait


## Takeaway

This was a simple app, but the key thing to understand is that intelligent AI/ML driven apps are just a bunch of API calls away, thanks to Azure Cognitive Servies which provides a plethora of capabilities such as Decision, Language, Search, Speech and Vision ! We used Azure App Service to host the app, but you're free to choose options such as [Azure Container Instances](https://docs.microsoft.com/azure/container-instances/?WT.mc_id=devto-blog-abhishgu) or [Azure Kubernetes Service](https://docs.microsoft.com/azure/aks/?WT.mc_id=devto-blog-abhishgu).

That's all for this article but stay tuned for more! If you found it useful, please like and follow 😃😃

![](https://media.giphy.com/media/93fsZ7rI488L908x0T/giphy-downsized.gif)