Deploy a Cloud Notebook as a Python Web App

Deepnote is a cloud-based Python notebook built for real-time collaboration between data scientists.

In this tutorial, you will use Deepnote and Anvil to deploy a machine learning model as a web app that anyone can use from their browser. Anvil lets you build full-stack web apps with just Python, without writing HTML, CSS, JavaScript, or PHP.

App demo

You will build this app

These are the steps this tutorial will cover:

  1. Get the notebook
  2. Create an Anvil app
  3. Build the UI by adding components
  4. Enable the Uplink
  5. Install the Uplink library
  6. Connect the notebook to the app
  7. Create a callable function
  8. Call the notebook function from the web app
  9. Display the classification result
  10. Publish your app
You do not need any prior experience with Anvil or web development to follow this tutorial.

Step 1 - Get the Notebook

Start with a pre-built image classifier notebook. The notebook uses Hugging Face Transformers to load a pre-trained image classifier into a classifier variable.

Open the notebook in Deepnote and click ‘Duplicate’ to create your own copy.

Open the notebook
Screenshot of the Deepnote cloud notebook

Click “Duplicate” to make a copy of this notebook in your own (free) Deepnote account.

You can also follow along with your own Deepnote notebook.

All right, now you have your notebook ready. Let’s deploy it as a web app!

Step 2 - Create your Anvil app

Log in to Anvil and click ‘Create a new app’. Choose the ‘New M3’ theme and start with a ‘Blank Panel’ Form.

The ‘New M3’ theme may be hidden behind an ‘Advanced’ menu. Click it to expand other themes.
Location of the Create App button

First, name the app. Click the app name at the top of the screen and rename your app.

Rename your app by clicking on the title

Next, change the app’s colour scheme. Choose ‘Theme’ in the Sidebar Menu and then select ‘Colour Scheme’. In the dropdown menu, choose Mykonos Light.

The dropdown menu in the 'Colour Scheme' tab showing the available colour schemes

The colour scheme dropdown

Step 3 - Add your components

We construct the UI by dragging-and-dropping components from the Toolbox. Drop a Card Card icon and a FileLoader Fileloader icon. The FileLoader will let users upload the image they want classified.

Next, add an Image Image icon component, which will display the input image, and a Label Label icon to display the returned classification.

Inside the card, drop a FileLoader Fileloader icon. The FileLoader will let users upload the image they want classified. Centre it, and in the Properties Panel change its appearance to filled.

Next, add an Image Image icon, which will display the input image, and a Text Label icon to display the returned classification. From the Object Palette, change the text’s name to ‘result_text’, centre it, and make it bold.

Anvil Drag and Drop demo

We now have a user interface. Let’s connect the app to the code in our Deepnote notebook.

Step 4 - Enable the Uplink

To connect your app to the notebook, we will use the Anvil Uplink. The Uplink is a Python library that lets your notebook communicate directly with your Anvil app. It allows your app to call functions running inside your notebook as if they were part of the app itself.

In the Anvil Editor, click the blue ‘+’ button in the Sidebar Menu to open the list of available services. Select the Uplink service and click Enable Server Uplink.

Enable Uplink

This will give you a Uplink key. Copy this key – you will use it to connect your notebook.

Step 5 - Install the Uplink Library

Now let’s install the library you’ll need to make that connection.

Back in your Deepnote notebook, add !pip install anvil-uplink to a new code block:

!pip install anvil-uplink

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

Step 6 - Connect the Notebook

Now we can connect the notebook to the Anvil app using the Uplink key.

In a new code block, import the anvil.server module and connect using the Uplink key you copied from Anvil:

import anvil.server

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

Replace "your-uplink-key" with the key you copied in Step 4.

Once this code block runs, the notebook will be connected to your app. Next, let’s create a function your app can call.

Step 7 - Create a callable function

In a new code block, define a function that your app can call to classify an image. Name it classify_image and decorate it with @anvil.server.callable.

import anvil.media

@anvil.server.callable
def classify_image(file):
  with anvil.media.TempFile(file) as f:
    return classifier(f)[0]

This function:

  • receives the uploaded image as an Anvil media object
  • converts it into a temporary file so the model can read it
  • passes it to classifier, which returns results ranked by confidence
  • returns the top prediction, which includes a label and a score

Run all the code blocks from the top to load the model and start listening for calls. Once they’ve run, your notebook is ready to receive calls from your app.

Go back to your Anvil app to call this function when someone uploads an image.

Step 8 - Call a notebook function from the web app

In the Design View of your Anvil app, click the FileLoader component you added earlier, and click on change event -> in the Object Palette. This opens the Code View of the Form and creates an event handler that runs whenever a file is uploaded.

Inside the event handler, delete pass, then use anvil.server.call() to invoke the classify_image function in your notebook, passing in the uploaded file.

@handle("file_loader_1", "change")
def file_loader_1_change(self, file, **event_args):
    """This method is called when a new file is loaded into this FileLoader"""
    classification = anvil.server.call('classify_image', file)

Now let’s display the result in the UI.

Step 9 - Display the classification

Still in the file_loader_1_change event handler, set the text of result_text to display the classification label and its confidence score. Then set image_1’s source to the uploaded file so it appears in the UI.

The file_loader_1_change event handler will look like this:

@handle("file_loader_1", "change")
def file_loader_1_change(self, file, **event_args):
    """This method is called when a new file is loaded into this FileLoader"""
    classification = anvil.server.call('classify_image', file)

    self.result_text.text = f"{classification['label']} ({round(classification['score'], 2)})"
    self.image_1.source = file

We now have an app that takes an image, sends it to the Deepnote notebook, classifies it and displays the result in a web app.

Now we can deploy this app to the internet for everyone to use.

Step 10 - Publish your app

Click the Publish button at the top right of the editor, select ‘Add public URL’, and use the URL provided or enter your own.

Publishing the app

That’s it. Using Anvil, you’ve turned a Deepnote notebook into a web app that anyone can use with just Python.

Your Deepnote notebook must be open and running for the app to work. If the session times out or is closed, calls will fail. For a production app, you should host the model code on a persistent server rather than a notebook.

Clone the App

You can open the source code for the finished Anvil app here:

Clone the finished 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.

Try Anvil

Learn More

Get Started with Anvil

Use our drag and drop app builder to create an app that collects feedback and sends it to you by email, and publish it online, in ten minutes or less.

Nothing but Python required!
Go

A fully-featured customer service ticketing system

See how we built a large-scale, shippable ticketing system with custom designs entirely in Anvil.
Go

Build a Web App with Pandas

In this tutorial, we will walk through the process of building a dashboard using Pandas.
Go

A Guide to Styling Apps with CSS

This guide teaches you the basics of using CSS in Anvil to style your web apps
Go

Building an Online Store using Python

A shop built from the Material Design theme
Go