loading...
Microsoft Azure

Tutorial: Use Azure Cognitive Services to build a translator app hosted on Azure App Service πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’»

abhirockzz profile image Abhishek Gupta ・8 min read

This tutorial will demonstrate the usage of Azure Cognitive Services with the help of a text translation example implemented using a simple Golang app deployed to Azure App Service

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
  • 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 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 applications. It offers capabilities across areas of Vision, Speech, Language, Web Search, and Decision 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 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!

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 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 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 - go ahead and grab a free one if you don't have it already. Also, ensure that you have the Azure CLI 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

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 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 kinds with the 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 SKUs, use az cognitiveservices account list-skus --kind TextTranslation --location $AZURE_LOCATION

documentation for 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

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

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, which I have made available on DockerHub

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 which provides an example of how to use Azure Container Registry 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 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

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 or Azure Kubernetes Service.

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

Posted on Jul 2 by:

abhirockzz profile

Abhishek Gupta

@abhirockzz

Currently working with Kafka, Databases, Azure, Kubernetes and related open source projects

Microsoft Azure

Any language. Any platform.

Discussion

markdown guide