DEV Community

Microsoft Azure profile image Abhishek Gupta
Abhishek Gupta for Microsoft Azure

Posted on

Tutorial: Use Azure Cognitive Services to build a translator app hosted on Azure App Service 👨‍💻👩‍💻

#tutorial #beginners #showdev #azure

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)
Enter fullscreen mode Exit fullscreen mode

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)
})
....
Enter fullscreen mode Exit fullscreen mode

Finally, the HTTP server is started

http.ListenAndServe(":"+port, nil)
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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)
    }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

{
"key1": "42d9a082a4242edbaffd42487db8d2ec",
"key2": "2f2ce290b0ae4c42a428b7e6ebe34242"
}
Enter fullscreen mode Exit fullscreen mode

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'}]"
Enter fullscreen mode Exit fullscreen mode

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"
      }
    ]
  }
]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode




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
Enter fullscreen mode Exit fullscreen mode




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 😃😃

Top comments (1)

Collapse
 
ctm8788 profile image
ctm8788 •

Hi @abhirockzz ,
Great tutorial! Would you be able to update/add to it on the topic of translating Documents?

Read next

techtobe101 profile image

Jenkins CI/CD Freestyle Project: A Comprehensive Guide

Tech Tobé -

osalumense profile image

Understanding Type Annotations in TypeScript

Stephen Akugbe -

paulund profile image

How to debug axios requests

Paulund -

mikeyoung44 profile image

InternLM-XComposer2-4KHD: A Pioneering Large Vision-Language Model Handling Resolutions from 336 Pixels to 4K HD

Mike Young -