Make a translate app with HuggingFace Transformers

Introduction

We rely on google translate services to help us with translating text from one language to other and I always wanted to develop an app like that and to know how translation works in the backend.

Let’s list down the components which will be there in our translate app.

These are those components -

1. A Multi-language translation model.
2. An API service which takes all the necessary parameters sends those parameters to the model and returns the translated text back as response.
3. A front-end app which provides a GUI to the user to interact with.

An ideal flow will look like user typing a text in the input text, selecting the desired target language and clicking the translate button. Once the button is clicked, we get the request data and send to the API service which eventually passes that to the model and get the results back as a response. The response is then shown into the UI.

The Big Challenge

The ML model is going to be the brain behind our translation app. To train a state-of-the-art model from scratch we would need the following things -

1. Huge amounts of training data containing examples of text in one language and its translation in the other language.
2. Create a neural network model which consists of more than a million parameters.
3. A high end multi-GPU based environment to train that model.
4. Time.

But my goal here is to develop a MVP or a small POC which could help me understand and demonstrate the process of making a translation app and be able to complete this over a weekend.

HuggingFace to the rescue

The solution is that we can use a pre-trained model which is trained for translation tasks and can support multiple languages.

HuggingFace consists of an variety of transformers/pre-trained models. One of the translation models is MBart which was presented by Facebook AI research team in 2020 — Multilingual Denoising Pre-training for Neural Machine Translation.

Great!! Now that we have a pre-trained model in place. Time to put the pieces of the puzzle in the right places.

The Backend

Let’s go through the backend code.

I defined a Translator class which consists of a helper function to perform the translation task.

On init, the MBart pre-trained model and tokenizer objects gets initialized. The translate method takes input text, source language and target language as a parameter.

translator.py

I have used flask which is a python library for creating API endpoints. During runtime it instantiates the Translator class and uses the run_translation function for generating the text translation. I have also used flasgger which is a flask wrapper for Swagger for testing the API endpoints.

Running a tunnel service

The API service can be deployed to Heroku or AWS EC2 instance to make the endpoint accessible over the web. The other option is we can run the service locally and use a tunnel service called ngrok. So, the front-end will be sending all the requests to this tunnel and the only job of this tunnel is to route all requests to our system. This can be done by exposing a particular port which in our case is the default port number 5000 for flask service.

First, we need to register as a user in the ngrok website and get the auth key. Then, download the binaries and run the following command.

ngrok auth <YOUR_AUTH_KEY>

This will create a config for the ngrok service authentication and needs to be done only once. Next, we run another command.

ngrok http <PORT_NUMBER>

This will create a tunnel which can route all request as mentioned before.

The Frontend

If you know html, css, js or if you know Angular or React, you can write a code to create a form which has following components.

1. Input Text box
2. Dropdown to select the source language
3. Dropdown to select the target language
4. Text label to show the response
5. Clear and Submit button

On clicking submit you can bind it with a API call to the endpoint url and get the translated text as response.

I have used AppSmith for developing the frontend. It is a low/no code platform to design front end web applications. Also, it has inbuilt support for saving the data into databases and also use custom APIs to integrate with the front end.

Once you create an app inside of AppSmith you get a canvas where you can drag and drop different elements from widgets, add a new page and connect to a datasource.

AppSmith canvas

Configuring the API to AppSmith. Head to the datasource section and add an API, the following postman window will appear. Add your API endpoint url and mention the request method type as POST. In the body, I am fetching the input text, source language and target language from the HTML widgets which are present in the form. This is done by using a moustache template. (Refer to the screenshot below)

AppSmith API

Now the final step is to bind this API with the onClick method on the submit button.

Add one more text label to show the results. Once the API call is successful the response which is bound to this label will automatically show the translated text here.

Once everything in place, hit deploy button at the top and the app will be ready to use.

Translate Demo

Conclusion

This completes the development of our translate app. If you are interested in reusing this code. You can find this on my Github here.

Thanks for reading this blog.