Create Interactive Tools in Google Colab using Widgets | by Huajing Shi | Towards Data Science

In times full of uncertainty, wouldn’t you wonder what the future holds? Let’s stop worrying and have some fun while learning how to create a user-friendly tool in Python for reading your daily horoscope.
As a coding exercise, I envisioned to create an interactive tool in a Python notebook as shown in the above animation. Users just need to click buttons and then can easily see how different program inputs change the outputs.
The program would be implemented using Google Colab to make it easier to share with end users, especially with those who do not code and don’t have Python installed on their computers. In my previous article, I explained why I choose Google Colab for Python programming.
By creating an immersive, fun experience for users through interactive GUIs, we can transform static codes into tools for exploration, and make Python notebooks come alive.
There is a fun library in Python called PyAztro which provides horoscope information for Sun signs. Once specify a sign name, and day type (“yesterday”, “today” or “tomorrow”), the pyaztro.Aztro() function returns the information associated with the selected sign for that day, including lucky number, lucky color, mood, compatibility with other Sun signs, and a description etc. The daily horoscope read is updated every day at midnight GMT (Greenwich Mean Time), so you get a new read every day!
User can select a Sun Sign (or Star Sign) from a list of Sign images labeled by date range, and click the button associated with the Sign to get the horoscope reading.
The program implementation can be broken down into the following steps:
Install the missing Python libraryGrab horoscope Sign images from the webCreate a variable to hold the horoscope images and the corresponding date rangesGenerate the user interface of the horoscope reading tool
Install the missing Python library
Grab horoscope Sign images from the web
Create a variable to hold the horoscope images and the corresponding date ranges
Generate the user interface of the horoscope reading tool
You can download the Notebook here.
!pip install pyaztro
PyAztro library is not installed in Colab by default, so we need to first install it. To run any command line script in Colab, you need to add a ! at the beginning of the line.
To get the Sign images, we import Image from Python Imaging Library (PIL) and call the Image.open() to create the image objects from image files streamed from a website. The image object received using Image.open(), later can be applied with resize, crop, draw or other image manipulation method calls.
Create a list variable to hold the data of each Sign, including Sign name, image object, and date range.
A list of twelve buttons are created for the twelve Sun Signs. The button widget from ipywidgets (also known as jupyter-widgets or simply widgets) is used to handle mouse clicks. The on_click method of the Button can be used to register function to be called when the button is clicked.
When a button is clicked, the on_button_clicked() function will be called to generate the horoscope reading for the selected Sign from pyaztro.Aztro(). A for loop is used to return Sign reading for each of the three days, i.e., yesterday, today, and tomorrow.
The output widget can capture and display stdout, stderr and rich output generated by IPython. Outputs can be directly appended to or cleared from an output widget. To avoid accumulating outputs after a sequence of button clicking, we need to clear the previous output before displaying the new output. The output widget is the foundation for interact, as it forms the basis of how interact and related methods are implemented.
For the application to look appealing to users, the layout of the components (i.e., images, buttons, and text) of the application is an important factor to consider. To arrange the twelve Sign images, the corresponding date ranges, and the buttons, we use Grid from Colab’s layout widgets that enable redirecting future output to a particular place in the layout. The image objects are resized to to fit into the layout.
This is the interface for this horoscope reading program:
Source code: Google Colab Notebook on GitHub
This article was inspired by “Hidden treasures of Python”