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.
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:
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:
- 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>
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”.
The Python Program
In the python program, we need to import the required libraries first.
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.
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.