Building a user interface with Tkinter

In this section, we will learn how to use the Tkinter library to create a GUI for our text translation application. Tkinter is a standard Python library to create GUIs, and it provides a simple and efficient way to create windows, buttons, text fields, and other graphical elements.

The Text Translator application shown in Figure 6.2 will be designed to have a simple and user-friendly interface. When you run the application, there will be a button labeled Browse and a drop-down menu with a list of languages to translate to:

1. To translate the text, the user can select the language they want to translate to from the drop-down menu.
2. Once the language is selected, the user can click on the Browse button and select the Word file they want to translate.
3. Upon selection, the contents of the file will be translated using the ChatGPT API, and the translated text will be displayed in the large text field in the center of the window. The user can then copy and paste the translated text to use it as needed.

The Text Translator application is designed to be a simple and efficient tool to translate text from one language to another.

Figure 6.2 – The Text Translator application UI

Important note

We do not need to specify the text from which we want to translate, as the ChatGPT language model is designed to automatically recognize the prompt language.

Now that we are clear about the base design, we can bring it to life with Tkinter.

To get started, we’ll need to remove the example code that we previously added to our app.py file. Simply delete all the lines of code containing the example code so that we can start with a clean slate.

Creating a Tkinter window is the next step in building our Text Translator application. You can achieve this by writing the following code in app.py, which initializes a new instance of the Tk class and sets the application window:

from openai import OpenAI
import docx
import tkinter as tk
from tkinter import filedialog
root = tk.Tk()
root.title("Text Translator")
root.configure(bg="white")
header_font = ("Open Sans", 16, "bold")
header = tk.Label(root,
                  text="Text Translator",
                  bg="white",
                  font=header_font,
                  )
header.grid(row=0, column=0, columnspan=2, pady=20)
root.mainloop()

To start building the Tkinter app, we first need to import the necessary libraries. We will use the openai, docx, and tkinter libraries for this project.

Next, we need to create the main window of our application. We will do this using the Tk() method of the tkinter library. We will also give our application a title and set its background color to white.

We can also set a header for our application using the Label() method of tkinter. We can set its text to Text Translator, its background color to white, and its font to Open Sans, with a size of 16 and a bold weight. We will then use the grid() method to place the header in our application window at a specific position by specifying the row and column values, spanning two columns and with a small padding.

We will run our application using the mainloop() method of tkinter. The mainloop() method is an infinite loop used to run the application, listen for events such as button clicks or window resizing, and update the display as needed. It continuously listens for events until the user closes the window or exits the application.

After creating the app window, the next step is to add elements to it. One of those elements will be the Browse button:

browse_button = tk.Button(root, text="Browse",
                          bg="#4267B2", fg="black", relief="flat",
                          borderwidth=0, activebackground="#4267B2",
                          activeforeground="white")
browse_button.config(font=("Arial", 12, "bold"), width=10, height=2)
browse_button.grid(row=1, column=0, padx=20, pady=20)

Important note

It’s important to add all elements before calling the mainloop() method, so they are properly included in the application window. mainloop() should always be the last line in your app.py file.

To create a button widget, you can use the tk.Button() method in the tkinter library. The button is placed in the root window and has the Browse text displayed on it. The bg parameter sets the background color of the button to a dark blue, while fg sets the foreground color to black.

Meanwhile, relief is set to flat to create a flat appearance, and borderwidth is set to 0 to remove the border of the button. We then use the activebackground and activeforeground parameters to set the colors of the button when it is clicked or hovered over.

Under the Browse button, we can create a drop-down menu with a list of languages:

languages = ["Bulgarian", "Hindi", "Spanish", "French"]
language_var = tk.StringVar(root)
language_var.set(languages[0])
language_menu = tk.OptionMenu(root, language_var, *languages)
language_menu.config(font=("Arial", 12), width=10)
language_menu.grid(row=1, column=1, padx=20, pady=20)

The languages list contains a list of languages that the user can select from. You can add any language to that list, and it will be displayed to the users in the drop-down menu.

The language_var variable is created as a StringVar object and set to the first language in the list. The set() method of the language_var object is then used to set its initial value to the first element of the languages list. This is done so that the default value of the language drop-down menu is the first language in the list, which is Bulgarian in this case.

The OptionMenu widget is then created with the language_var variable and the *languages syntax, which unpacks the languages list as individual arguments. This sets the available options for the drop-down menu to the languages in the languages list. Then, we configure and position an options menu widget in the second column of the first row of the application window.

The next step is to add the text field to our GUI. To do this, you can add the following code below the Language menu in your app.py file. This code creates a text field with specific dimensions, colors, and properties, and then places it within the window using grid positioning:

text_field = tk.Text(root, height=20, width=50, bg="white", fg="black",
                     relief="flat", borderwidth=0, wrap="word")
text_field.grid(row=2, column=0, columnspan=2, padx=20, pady=20)
text_field.grid_rowconfigure(0, weight=1)
text_field.grid_columnconfigure(0, weight=1)
root.grid_rowconfigure(2, weight=1)
root.grid_columnconfigure(0, weight=1)
root.grid_columnconfigure(1, weight=1)

This code will add a text field to the GUI window, which will be used to display the ChatGPT translation of the Word document. Here, the Text widget object named text_field is placed inside the root window. The Text widget is used to display and edit text in multiple lines. Then, we use the grid() method to position the Text widget on the GUI. The padx and pady parameters add padding around the widget to create some space between it and other widgets in the window.

You can configure text_field to expand the main window horizontally and vertically, using the grid_rowconfigure() and grid_columnconfigure() methods. This allows the text field to fill up the available space in the window. Then, you can also configure the main window, root, to expand it. These settings ensure that the text field remains centered in the window and fills up the available space.

Once your GUI is finalized, you can launch the application, and confirm that your GUI adheres precisely to the style and attributes shown in Figure 6.2. By selecting the Languages menu with a single click, you can access and choose any language from it.

This is how you can use the Tkinter library to create a GUI for a text translation application. We have created the main window, the header, the Browse button, and the drop-down menu with a list of languages.

Despite having completed your GUI, clicking on the Browse button with a single click will not trigger any action, as it is not yet connected to any active Python function. We will fix that in the next section, where we will create two core functions that are responsible for opening the Microsoft Word file and performing the translation.