Putting a web front-end on a Google Colab notebook

Let’s say you’re a data scientist, and you’ve been asked to classify iris flowers based on their measurements (using the famous iris dataset). You’ve written some code in a Colab notebook that solves the problem; however, what you really want is to build an interactive tool, so people can classify the flowers themselves!

In this short tutorial, we are going to build an interactive tool for people to classify iris flowers by connecting a web app to a Colab notebook. The web app will collect the iris measurements from the user, send the data to our Colab notebook, where it will be classified, and then send the classification back to our web app to display to the user.

For this tutorial you will need to know basic Python and have an understanding of how to use Google Colab notebooks.

Let’s get started.

Step 1 - Create your Anvil app

Creating web apps with Anvil is simple. No need to wrestle with HTML, CSS, JavaScript or PHP. We can do everything in Python.

Log in to Anvil and click ‘New Blank App’. Choose the Material Design theme.

First, name the app. Click on the name at the top of the screen and give it a name.

Step 2 - Design your page

To classify the species of iris a flower comes from, we need to collect several measurements, so let’s design the user interface for entering that data.

We construct the UI by dragging-and-dropping components from the Toolbox. Let’s start by dropping a Card into our form – this will be a neat container for the other components. Then let’s add a Label and a TextBox into the card component:

Next we will set up the label and TextBox components to collect enter the sepal length. Select the Label we just added and, in the properties panel on the right, change the text to ‘Sepal length: ‘. Then select the TextBox we added and change the name to sepal_length, and the placeholder text to ‘(cm)’.

Repeat this process adding labels and text boxes for the other parameters we need: sepal width, petal length and petal width. This will capture all the information we need to classify each iris flower.

Next, let’s add a Button to run the classifier. Name it categorise_button and change the text to ‘Categorise’. Clicking this button will trigger a Python function to send the iris measurements to our Colab notebook. (We’ll set that up in a moment.)

Finally, let’s add a Label where we’ll display our results. Put it below the button, call it species_label and untick the visible tick box in the properties panel so it doesn’t appear immediately. In step 3 we will create an event handler function that makes the label visible, and uses it to display data returned from our Colab notebook.

Our app should now look like this:

In the next step we will add some code to control what happens when a user pushes the Categorise button.

Step 3 - Add a button click event

We want our categorise_button to do something when it’s clicked, so let’s add a click event.

With the button selected, go to the bottom of the properties panel. Then click the blue button with two arrows in it next to the click event box. This will open our code view and create a function called categorise_button_click(). From now on, every time the button is clicked by a user, this function will be called.

We want to call a function in our Google Colab notebook, and pass it the measurements the user has entered into our web app. When the notebook returns our answer, we’ll display it as text on the species_label:

To do this we add the following:

def categorise_button_click(self, **event_args):
    """This method is called when the button is clicked"""
    # Call the google colab function and pass it the iris measurements
    iris_category = anvil.server.call('predict_iris', 
                                self.sepal_length.text,
                                self.sepal_width.text,
                                self.petal_length.text,
                                self.petal_width.text)
    # If a category is returned set our species 
    if iris_category:
      self.species_label.visible = True
      self.species_label.text = "The species is " + iris_category.capitalize()

Now we have a basic UI and functionality, let’s connect our app to the code in our Google Colab notebook.

Step 4 - Enable the Uplink

From the IDE, let’s enable the Uplink. This gives us everything we need to connect our web app to our Colab notebook. Open the Gear menu in the top left of the IDE, then select Uplink and then Enable the Anvil Server Uplink:

This will then give us an Uplink key we can use in our Google Colab notebook, to connect to this app.

Now let’s install the Uplink in our Colab environment, and connect our script using the key we just created.

Step 5 - Install the Uplink Library in our Colab Environment

In the next few steps, we will be connecting a Colab notebook to the web app we have built. For simplicity, I’ve created a notebook that already handles the iris classification for us. Make a copy of the following notebook to follow along:

The first thing we need to do is install the anvil-uplink library in our Colab environment. Let’s add !pip install anvil-uplink to the top of our notebook.

!pip install anvil-uplink

The ! operator tells our notebook that this line is a command line script and not Python code.

Step 6 - Connecting our Script

Now that the Uplink library will be installed when we start our notebook, we can connect our notebook in the same way as any other Uplink script.

Start by importing the anvil.server module:

import anvil.server

Then connect to the Uplink:

anvil.server.connect("your-uplink-key")

Replace “your-uplink-key” with the Uplink key from your app.

That’s it! When we run our notebook, it will now connect to our web app via the Uplink. Next, let’s create a function we can call from our Anvil app.

Step 7 - Creating a callable function

With a classification model built and trained, we can create a function that takes our iris data and returns the name of the iris species. Let’s create a predict_iris function and add @anvil.server.callable so it is available to call from our app.

@anvil.server.callable
def predict_iris(sepal_length, sepal_width, petal_length, petal_width):
  classification = knn.predict([[sepal_length, sepal_width, petal_length, petal_width]])
  return iris.target_names[classification][0]

Finally at the end of our notebook we will call the wait_forever() function. This keeps our notebook running and allows our app to call functions indefinitely.

anvil.server.wait_forever()

Run the notebook. You should see output like this:

Connecting to wss://anvil.works/uplink
Anvil websocket open
Authenticated OK

Step 8 - Publishing our app

Now we have our app and script connected, all we have to do is publish our app for our colleagues to use.

From the IDE, open the Gear menu in the top left of the IDE, then select Publish app and then Share via public link. Enter your desired URL and then click apply.

That’s it, our notebook is now connected to our Anvil app and anyone with access to your web app can now interact with code in your Google Colab notebook.

Clone the App

For those of you who want to see the source code for this app:

New to Anvil?

If you’re new here, welcome! Anvil is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks – just build it all in Python.

Yes – Python that runs in the browser. Python that runs on the server. Python that builds your UI. A drag-and-drop UI editor. We even have a built-in Python database, in case you don’t have your own.

Why not have a play with the app builder? It’s free! Click here to get started: