Create a GUI Application to Translate Text using Python

5 min readJun 13, 2020

In this article, we are going to discuss the steps for creating a GUI text translator application using python. The Graphic User Interface is designed using HTML along with CSS and the connection between the python program and the HTML page is done using the Python Eel library.

The Eel library requires us to also create a JavaScript file where we have to define the functions that are triggered using onclick events from the HTML page. In our case, these JavaScript functions basically fetch data from the HTML page and passes it on to the python functions. These JS functions also have a callback function associated with them, which helps us to fetch data from the python side and display them on the HTML page.

Along with the Eel library, we would also need the ‘Googletrans’ library which uses the Google Translate Ajax API to translate the input text. The working of the program can be schematically represented as following:

Fig1: Schematic representation of the program

The first step is to install the required libraries, which can be done using pip.

pip install eel
pip install googletrans

We will be using Visual Studio Code for our project, which is files and folders based. Therefore, we create a folder named ‘eel_project’ and inside ‘eel_project’ we create a python file named ‘backend.py’ and another folder named ‘web’. This ‘web’ folder acts as the Front End Directory (Fig1) and contains the following files:

home.html
main.js
style.css, and a picture (pic.jpg) which serves as the background image.

Designing the HTML page

While designing the HTML page, we have to keep in mind the basic information that are needed by the google API to translate the input text. For efficient translation, we need to provide 3 parameters, which are:

The input text that needs to be translated
The source language
The destination language

We would also require a text-area in the page where we would display the output text. To take in the input text and to display the output text, we would be using the ‘<textarea>’ element in HTML. For selecting the source and destination languages, we are using the ‘<select>’ element which would create a drop down list, inside which the ‘<option>’ tags would define the languages. We would also require a button, clicking which would initiate the translation program. The following snippet shows the required HTML elements.

We create a ‘<form>’, inside which we create two ‘text-areas’ with the ids “data” and “output”. The options tag contains the languages inside the drop-down list created by the select tag. We have created two select tags, one for the source language (id = “source”) and one for the destination language (id = “destination”). The elements of the option tags are:

it = Italian 
ar = Arabic 
es = Spanish
pt = Portuguese
fr = French 
en = English

There are plenty of languages available in googletrans, but for this project we are providing six options. Finally, the created button has an onclick event associated with it.

<button class="button1" onclick="inputdata()">TRANSLATE</button>

The JavaScript Part

When we click the button, the “inputdata()” function, which is defined in the JavaScript file, is triggered. This function fetches the input data from the HTML page, stores them as variable and passes them to the python side.

By using the above JavaScript code, we fetch the required data from the HTML side and store them as variables. The variables that need to be passed to the python side are:

var data = The input text 
var srclang = The source language 
var destlang = The destination language

The “translate()” function is defined in the python side and the eel.translate() command calls the python function and passes the above values to it.

The ‘outputText’ is the translated text which is returned by the python function. The callback function “set0utput()” takes this ‘outputText’ and puts it in the HTML <textarea> whose id is “output”.

Therefore, we can see that the JavaScript file works as a connector between the HTML page and the Python program.

The Python Program

In the python program, we need to import the required libraries first.

import eel
from googletrans import Translator

The python code that we want to expose to the HTML side needs to be written under an eel.expose command.

The eel.init(“front-end folder”) and the eel.start(“html page”) commands are required by the eel library to locate the folder where the user interface files are stored and to start the HTML page.

We define the required “translate()” function in the python program, with data, srclang and destlang as its arguments which are provided by the user in the HTML page. The python function returns ‘outputText’ which is fetched by the set0utput() function in the JavaScript file.

The Final Product

In this article, we have not discussed the CSS component of the project as it does not effect the technical aspect and is only done for beautification purpose. However, the entire code is available on my GitHub profile here.

On completion, the final User Interface looks as follows:

By default the eel library uses the chrome browser to run the program. However, this can be changed by using the ‘mode’ option, through which we can specify what browser to use.

Executing the project that we described in this article is a great way to familiarize yourself with the python eel library which is used to create modern looking User Interface in HTML and CSS for python programs.

Summary

In this article we discussed the steps for creating a text translation app in python using the googletrans library. We have used HTML along with CSS for designing the User Interface of the project and have used the python eel library for connecting the python program with the HTML page via JavaScript.