DEV Community: Meredydd Luff

Turn a Jupyter Notebook into a Web App

Meredydd Luff — Tue, 04 May 2021 16:14:27 +0000

Let’s say you’re a data scientist, and you’ve been asked to solve a problem. Of course, what you really want is to build an interactive tool, so your colleagues can solve the problem themselves!

In this tutorial, I'll show you how to take a machine-learning model in a Jupyter notebook, and turn it into a web application using the Anvil Uplink.

Here's what we'll do:

Set up a Jupyter notebook
Connect it to an Anvil app
Make a user interface

Setting up the Jupyter Notebook

We'll start with a pre-existing Jupyter Notebook containing a classification model that distinguishes between cats and dogs. You give it an image and it scores it as ‘cat’ or ‘dog’.

(Thanks to Uysim Ty for sharing it on Kaggle.)

Connecting to the Uplink

We'll use the Anvil Uplink to connect a Jupyter Notebook to Anvil. It’s a library you can pip install on your computer or wherever your Notebook is running.

It allows you to:

call functions in your Jupyter Notebook from your Anvil app
call functions in your Anvil app from your Juypter Notebook - store data in your Anvil app from your Jupyter Notebook
use the Anvil server library inside your Jupyter Notebook

It works for any Python process - this happens to be a Jupyter Notebook, but it could be an ordinary Python script, a Flask app, even the Python REPL!

To connect our notebook, we'll first need to enable the Uplink in the Anvil IDE.

This gives us a key that we can then use in our code.

We then need to pip install the Uplink library on the machine the Jupyter Notebook is running on:

pip install anvil-uplink

By adding the following lines to our Jupyter notebook, we can connect it to our Anvil app:

import anvil.server

anvil.server.connect('<YOUR-UPLINK-KEY>')

Now we can do anything in our Jupyter Notebook that we can do in an Anvil Server Module - call Anvil server functions, store data in Data Tables, and define server functions to be called from other parts of the app.

Loading an image into the Notebook

We'll load an image into the Jupyter Notebook by making an anvil.server.callable function in the Jupyter Notebook. It will classify the input image as either a cat or a dog.

import anvil.media

@anvil.server.callable
def classify_image(file):
   with anvil.media.TempFile(file) as filename:
      img = load_img(filename)

We’re passing the image in as an Anvil Media object, which we then write to a temporary file.

The load_img function loads the file into Pillow, a Python imaging library.

Then we can do a bit of post-processing of the image to get it into a format that the model likes:

    # Inside the classify_image function

    img = img.resize((128, 128), resample=PIL.Image.BICUBIC)
    arr = img_to_array(img)
    arr = np.expand_dims(arr, axis=0)
    arr /= 255

Then we can just pass it into our model and return the result:

    # Inside the classify_image function

    score = model.predict(arr)
    return ('dog' if score < 0.5 else 'cat', float(score))

Building a User Interface

We can drag-and-drop components to create a User Interface. It consists of a FileLoader to upload the images, an Image to display them, and a Label to display the classification.

Making the UI call the Notebook

Now we need to write some Python code that runs in the browser so the app responds when an image is loaded in.

We can define an event handler that triggers when the FileLoader gets a new file:

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

    self.result_lbl.text = "%s (%0.2f)" % (result, score)
    self.image_1.source = file

The first line calls the classify_image function in the Jupyter Notebook, passing in the image file.

Then we display the result (cat or dog) and the score (0 to 1; completely dog or completely cat).

We also put the image file into the Image component so that the user can see their cat or dog (or other cat-or-dog-like image) and decide if they agree with the result.

Your app is already published at a private URL, but we can give it a public URL. You can check out this finished app at https://cat-or-dog.anvil.app.

Check out the whole tutorial:

7 Great Plotting Libraries for Python - Compared (with guides for each)

Meredydd Luff — Thu, 25 Mar 2021 17:56:22 +0000

How do I make plots in Python?

This question used to have a simple answer: Matplotlib was the only way. Nowadays, Python is the language of Data Science and there’s a lot more choice. Which should you use?

This guide will help you decide. I’ll show you how to use seven Python plotting libraries, with a bonus in-depth guide for each library!

I've also packaged an example for each library as an Anvil app, showing how to build web-based data apps with nothing but Python. All these libraries are available in Anvil’s Server Modules, and Plotly works directly in Anvil’s front-end Python code too! Click through to the in-depth guides for sample code.

The most popular Python plotting libraries are Matplotlib, Plotly, Seaborn, and Bokeh. I’ve also included some underrated gems that you should definitely consider: Altair, with its expressive API, and Pygal, with its beautiful SVG output. We’ll also look at the very convenient plotting API provided by Pandas.

Our Example Plot

Each of these libraries takes a slightly different approach. To compare them, I'm going to make the same plot with each library, and show you the source code. I’ve chosen a grouped bar chart of British election results since 1966. Here it is:

I compiled a dataset of British election history from Wikipedia: the number of seats in the UK parliament won by the Conservative, Labour, and Liberal parties (broadly defined) in each election from 1966 to 2019, plus the number of seats won by ‘others’. You can download it as a CSV file here.

1. Matplotlib

Matplotlib is the oldest Python plotting library, and it’s still the most popular. It was created in 2003 as part of the SciPy Stack, an open-source scientific computing library similar to Matlab.

Matplotlib gives you precise control over your plots – for example, you can define the individual x-position of each bar in your barplot. I’ve written a more detailed guide to Matplotlib, and you can find it here.

    import matplotlib.pyplot as plt
    import numpy as np
    from votes import wide as df

    # Initialise a figure. subplots() with no args gives one plot.
    fig, ax = plt.subplots()

    # A little data preparation
    years = df['year']
    x = np.arange(len(years))

    # Plot each bar plot. Note: manually calculating the 'dodges' of the bars
    ax.bar(x - 3*width/2, df['conservative'], width, label='Conservative', color='#0343df')
    ax.bar(x - width/2, df['labour'], width, label='Labour', color='#e50000')
    ax.bar(x + width/2, df['liberal'], width, label='Liberal', color='#ffff14')
    ax.bar(x + 3*width/2, df['others'], width, label='Others', color='#929591')

    # Customise some display properties
    ax.set_ylabel('Seats')
    ax.set_title('UK election results')
    ax.set_xticks(x)    # This ensures we have one tick per year, otherwise we get fewer
    ax.set_xticklabels(years.astype(str).values, rotation='vertical')
    ax.legend()

    # Ask Matplotlib to show the plot
    plt.show()

Full Guide & Example Code: Plotting in Matplotlib >

Seaborn

Seaborn is an abstraction layer on top of Matplotlib - it gives you a really neat interface to make a wide range of useful plot types very easily.

It doesn’t compromise on power, though! Seaborn gives you escape hatches to access the underlying Matplotlib objects, so you still have complete control. You can check out a more detailed guide to Seaborn here.

Here’s our election-results plot in Seaborn. You can see that the code is a lot simpler than the raw Matplotlib.

    import seaborn as sns
    from votes import long as df

    # Some boilerplate to initialise things
    sns.set()
    plt.figure()

    # This is where the actual plot gets made
    ax = sns.barplot(data=df, x="year", y="seats", hue="party", palette=['blue', 'red', 'yellow', 'grey'], saturation=0.6)

    # Customise some display properties
    ax.set_title('UK election results')
    ax.grid(color='#cccccc')
    ax.set_ylabel('Seats')
    ax.set_xlabel(None)
    ax.set_xticklabels(df["year"].unique().astype(str), rotation='vertical')

    # Ask Matplotlib to show it
    plt.show()

Full Guide & Example Code: Plotting in Seaborn >

Plotly

Plotly is a plotting ecosystem that includes a Python plotting library. There are three different interfaces to it:

an object-oriented interface
an imperative interface that allows you to specify your plot using JSON-like data structures
and a high-level interface similar to Seaborn called Plotly Express.

Plotly plots are designed to be embedded in web apps. At its core, Plotly is actually a JavaScript library! It uses D3 and stack.gl to draw the plots.

You can build Plotly libraries in other languages by passing JSON to the JavaScript library. The official Python and R libraries do just that. At Anvil, we ported the Python Plotly API to run in the web browser.

Here’s the election results plot in Plotly:

import plotly.graph_objects as go
    from votes import wide as df

    #  Get a convenient list of x-values
    years = df['year']
    x = list(range(len(years)))

    # Specify the plots
    bar_plots = [
        go.Bar(x=x, y=df['conservative'], name='Conservative', marker=go.bar.Marker(color='#0343df')),
        go.Bar(x=x, y=df['labour'], name='Labour', marker=go.bar.Marker(color='#e50000')),
        go.Bar(x=x, y=df['liberal'], name='Liberal', marker=go.bar.Marker(color='#ffff14')),
        go.Bar(x=x, y=df['others'], name='Others', marker=go.bar.Marker(color='#929591')),
    ]

    # Customise some display properties
    layout = go.Layout(
        title=go.layout.Title(text="Election results", x=0.5),
        yaxis_title="Seats",
        xaxis_tickmode="array",
        xaxis_tickvals=list(range(27)),
        xaxis_ticktext=tuple(df['year'].values),
    )

    # Make the multi-bar plot
    fig = go.Figure(data=bar_plots, layout=layout)

    # Tell Plotly to render it
    fig.show()

Full Guide & Example Code: Plotting with Plotly >

Bokeh

Bokeh (pronounced “BOE-kay”) specialises in building interactive plots, so this example doesn’t show it off to its best. Check out this extended guide to Bokeh, where we add some custom tooltips! Like Plotly, Bokeh’s plots are designed to be embedded in web apps - it outputs its plots as HTML files.

Here are the election results plotted in Bokeh:

from bokeh.io import show, output_file
    from bokeh.models import ColumnDataSource, FactorRange, HoverTool
    from bokeh.plotting import figure
    from bokeh.transform import factor_cmap
    from votes import long as df

    # Specify a file to write the plot to
    output_file("elections.html")

    # Tuples of groups (year, party)
    x = [(str(r[1]['year']), r[1]['party']) for r in df.iterrows()]
    y = df['seats']

    # Bokeh wraps your data in its own objects to support interactivity
    source = ColumnDataSource(data=dict(x=x, y=y))

    # Create a colourmap
    cmap = {
        'Conservative': '#0343df',
        'Labour': '#e50000',
        'Liberal': '#ffff14',
        'Others': '#929591',
    }
    fill_color = factor_cmap('x', palette=list(cmap.values()), factors=list(cmap.keys()), start=1, end=2)

    # Make the plot
    p = figure(x_range=FactorRange(*x), width=1200, title="Election results")
    p.vbar(x='x', top='y', width=0.9, source=source, fill_color=fill_color, line_color=fill_color)

    # Customise some display properties
    p.y_range.start = 0
    p.x_range.range_padding = 0.1
    p.yaxis.axis_label = 'Seats'
    p.xaxis.major_label_orientation = 1
    p.xgrid.grid_line_color = None

Full Guide & Example Code: Plotting with Bokeh >

Altair

Altair is based on a declarative plotting language (or ‘visualisation grammar’) called Vega. This means a well-thought-through API that scales well for complex plots, saving you from getting lost in nested-for-loop hell.

As with Bokeh, Altair outputs its plots as HTML files. Check out the extended guide to Altair here.

Here’s how our election results plot looks in Altair. Note how expressively the actual plot is specified, with just six lines of Python:

import altair as alt
    from votes import long as df

    # Set up the colourmap
    cmap = {
        'Conservative': '#0343df',
        'Labour': '#e50000',
        'Liberal': '#ffff14',
        'Others': '#929591',
    }

    # Cast years to strings
    df['year'] = df['year'].astype(str)

    # Here's where we make the plot
    chart = alt.Chart(df).mark_bar().encode(
        x=alt.X('party', title=None),
        y='seats',
        column=alt.Column('year', sort=list(df['year']), title=None),
        color=alt.Color('party', scale=alt.Scale(domain=list(cmap.keys()), range=list(cmap.values())))
    )

    # Save it as an HTML file.
    chart.save('altair-elections.html')

Full Guide & Example Code: Plotting with Plotly >

Pygal

Pygal focuses on visual appearance. It produces SVG plots by default, so you can zoom them forever – or print them out – without them getting pixellated. Pygal plots also come with some good interactivity features built-in, making Pygal another underrated candidate if you’re looking to embed plots in a web app.

Here's the election results plot in Pygal:

 import pygal
    from pygal.style import Style
    from votes import wide as df

    # Define the style
    custom_style = Style(
        colors=('#0343df', '#e50000', '#ffff14', '#929591')
        font_family='Roboto,Helvetica,Arial,sans-serif',
        background='transparent',
        label_font_size=14,
    )

    # Set up the bar plot, ready for data
    c = pygal.Bar(
        title="UK Election Results",
        style=custom_style,
        y_title='Seats',
        width=1200,
        x_label_rotation=270,
    )

    # Add four data sets to the bar plot
    c.add('Conservative', df['conservative'])
    c.add('Labour', df['labour'])
    c.add('Liberal', df['liberal'])
    c.add('Others', df['others'])

    # Define the X-labels
    c.x_labels = df['year']

    # Write this to an SVG file
    c.render_to_file('pygal.svg')

Full Guide & Example Code: Plotting with PyGal >

Pandas

Pandas is an extremely popular Data Science library for Python. It allows you to do all sorts of data manipulation scalably, but it also has a convenient plotting API. Because it operates directly on data frames, our Pandas example is the most concise code snippet in this article – even shorter than the Seaborn one!

The Pandas API is a wrapper around Matplotlib, so you can also use the underlying Matplotlib API to get fine-grained control of your plots.

Here’s the plot in Pandas. The code is beautifully concise!

    from matplotlib.colors import ListedColormap
    from votes import wide as df

    cmap = ListedColormap(['#0343df', '#e50000', '#ffff14', '#929591'])

    ax = df.plot.bar(x='year', colormap=cmap)

    ax.set_xlabel(None)
    ax.set_ylabel('Seats')
    ax.set_title('UK election results')

    plt.show()

Full Guide & Example Code: Plotting with Pandas >

Plotting with Anvil

Anvil is a system for building full-stack web apps with nothing but Python – no JavaScript required!

You can use any of the libraries I’ve talked about in this article to make plots in Anvil, and display them in the web browser. It’s great for building dashboards:

In each of the in-depth guides to Matplotlib, Plotly, Seaborn, Bokeh, Altair, and Pygal, you’ll find an example web application you can open and edit in Anvil, showing you how to use each of these Python plotting libraries.

You can also find Anvil-specific advice in the Anvil plotting guide. It tells you how to use plots from each of the libraries mentioned in this article in your Anvil app, including the fully front-end Python version of Plotly.

Getting Photos from Mars with the NASA API

Meredydd Luff — Wed, 03 Mar 2021 11:58:08 +0000

Get the Latest Mars Photos, on the Web and In Your Inbox

Everyone's waiting on the next photos from Perseverance, NASA's latest Mars rover. I'll show you how to use NASA's API to get the latest images as soon as they arrive - and send them straight to your inbox!

We don't need our own Deep Space Network -- NASA provides a public API for all of its Mars rovers. So I wrote an app to fetch the latest photos from Perseverance, and its older sibling Curiosity.

I built the web app with Anvil, which means I could build everything in Python -- that includes the "front-end" parts (displaying images, choosing your rovers, entering your email address, and so on), as well as the "back-end" (accessing NASA's APIs and sending out emails).

Take a look:

See the latest photos from all the Mars rovers, and get an email as soon as new ones arrive.

Getting the Photos

According to the API docs, you can get all Perseverance's latest photos from this URL:

https://api.nasa.gov/mars-photos/api/v1/rovers/perseverance/latest_photos?api_key=DEMO_KEY

The photos arrive as an array of JSON objects, describing everything about a photo. That includes which of the rover's cameras took it, the sol (and Earth date) of the photo, as well as a URL to download the image itself. Here's one:

{
    "id": 804712,
    "sol": 2,
    "earth_date": "2021-02-20", 
    "camera": {
        "id": 40,
        "name": "MCZ_RIGHT",
        "full_name": "Mast Camera Zoom - Right",
        "rover_id": 8
    },
    "img_src": "https://mars.nasa.gov/mars2020-raw-images/pub/ods/surface/sol/00002/ids/fdr/browse/zcam/ZRF_0002_0667131195_000FDR_N0010052AUT_04096_0260LUJ01_1200.jpg",
    "rover": {
        "id": 8,
        "name": "Perseverance",
        "landing_date": "2021-02-18",
        "launch_date": "2020-07-30",
        "status": "active"
    }
}

Displaying the Photos

The first thing to build is a web app that displays a random photo. I used Anvil's drag and drop designer to set up an Image component, and some Labels to display information about the photo.

Then I wrote a server function to retrieve a photo. It started off really simple:

@anvil.server.callable
def get_photo():
  resp = requests.get(f"https://api.nasa.gov/mars-photos/api/v1/rovers/perseverance/latest_photos?api_key={API_KEY}").json()
  return random.choice(resp['latest_photos'])

Now I can call it from my Python code that's running in the web browser, and display the photo in our UI:

Of course, the most recent image might not be the most interesting. What's more, there is more than one rover on Mars, and they send back images on their own schedules. So I expanded the app to look backwards through time until it can find at least 50 photos from each rover, then send them all to the front end, which shuffles them when the user clicks a button. (You can see how this works in the source code.)

Sending Automatic Emails

Of course, I could see all these photos on NASA's website if I wanted. I want to know when we get new photos! Specifically, I want to get them by email. We'll need two new features for this: Scheduled Tasks, to check for new photos, and the Email Service, to send them out. Plus, of course, a database table to store the email addresses:

Every 10 minutes, the Scheduled Task collects the latest photos from every rover:

@anvil.server.background_task
def send_photos():
  latest_photos = {
    rover: anvil.http.request(f"https://api.nasa.gov/mars-photos/api/v1/rovers/{rover}/latest_photos?api_key={API_KEY}", json=True)["latest_photos"]
    for rover in ROVERS
  }

  # ...

Then we look through every subscriber, and compare the date of our last email to them with the earth_date of the most recent photos. If the photos are more recent, we pick one and send it as an email attachment, using anvil.email.send(). The emails are grouped by day, so we will never send more than one email a day to any subscriber.

The actual logic for this is a little cumbersome, but if you want to see it in more detail then you can check out the full source code:

Source Code

You can open the app in the Anvil editor and see its source code here (requires a free Anvil account):

Open Source Code >>

Or you can check out the app again, now that you know how it works:

See the latest photos from all the Mars rovers, and get an email as soon as new ones arrive.

If you can think of something else cool to do with the Mars rover images, or NASA's APIs, please put it in the comments, or tweet it to me @meredydd!

More about 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 >>

See tutorials >>

12 Reasons to use Python, not JS, for Front End Web Development

Meredydd Luff — Tue, 16 Feb 2021 16:51:56 +0000

Why Python Beats HTML+JS for Web Development

Web development is pretty unwieldy. You need to master JS and HTML and CSS and Python (or Rails or Node) and a ton of frameworks.

We love Python because of its motto: Simple is better than complex. So what would web development look like, if it were 100% Python -- even the front end? We built it, and it's called Anvil.

Here are 12 reasons why building your front-end and back-end in Python is so great:

1. Your UI components are all Python objects.

Running Python in the browser means you can modify your UI components in Python. Drag and drop them onto the page to build the user interface, then set their properties and call events on them from Python code.

Building the UI for a feedback form. Check out the tutorial!

2. Call server-side functions from the browser

In traditional web-dev, calling from the browser to the web server is a pain. You have to set up a URL route, smush all your data into JSON, set up the AJAX request, asynchronously get a response...so much work!

With Anvil, you just call a function. Add a decorator to any function, then just call the function from browser code. Pass Python objects as arguments; return Python objects. Job done.

3. The database is built-in

Setting up and maintaining a database is a drag. So Anvil has a built-in database. Design your data tables graphically, then query or update rows with Python. (Can you return a lazy paginated query response to the browser, as a Python object? Of course you can! That would be dozens of lines of code in most web frameworks.)

A Data Table in Anvil

4. Connect your code running anywhere

Anvil is "serverless" - your code is automatically hosted in the cloud. But what if you want to run code on your computer? Just use the Uplink!

Got a Jupyter notebook? Call it from the web!
Got a local database? Write a local script to query it, then call it from the web!

Connecting a Google Colab notebook to a web app

5. Binary data is easier to handle

"Uploading a file" is basic functionality. So it must be simple in every web framework. Right? Surprise! Handling binary data -- like files, images, or PDFs -- is remarkably difficult in a traditional JS app. (If you're feeling mean, try saying 'enctype="multipart/form-data"' to a seasoned web developer. Watch them shiver.)

But Anvil makes it easy. All binary data (pictures, uploaded files, etc.) is represented as a Python object! You can pass binary data as an argument to a server function. You can store it in a Data Table. You can use it with Anvil components. For example, rendering and downloading a PDF is literally this simple:

# In a server module:
@anvil.server.callable
def get_pdf():
  return anvil.pdf.render_form('Form1')

# In the browser:
pdf = anvil.server.call('get_pdf')
download(pdf)

6. User authentication comes built-in

Building user authentication is tedious, but deadly if you get it wrong! Half of the OWASP vulnerabilities are "ways you can get authentication wrong".

Anvil's built in User Service handles signup, login, and user permissions for you, out of the box. It takes one line of Python code to present your users with a signup form with email validation -- just call anvil.users.login_with_form().

As well as email login, Anvil supports Google, Microsoft, Facebook, and SAML SSO. (What about two-factor authentication? Of course it works.)

7. Email support is built-in too

Send an email with one line of code. Receive emails with one line of code! It's all built in with Anvil's Email service.

Building an app to receive email is so simple, we did it in a 4-minute video:

8. PDF generation is also built-in

Did someone say "batteries included"? Create PDF documents with our drag-n-drop editor, then render and download them with a Python call.

9. Use your favorite Python packages

One of the best features of Python is the numerous packages available. With the Full Python runtime, you have access to a long list of your favorite Python libraries to build your web apps.

10. You can still build HTTP APIs

Want to build an HTTP API, so non-Anvil apps can interface with your service? Creating HTTP endpoints is nearly as simple as making functions you can call from the browser. Check out this tutorial.

Or just watch Bridget build and deploy a JSON API in 20 seconds:

Creating and deploying a working JSON API in 20 seconds.

11. One-click integrations

Your Anvil app can easily connect to services from Google, Microsoft, Facebook, Stripe and more. Log your users in using Google, Microsoft and Facebook Single Sign-Ons, take payments with Stripe, or display interactive Google Maps.

12. Easy encrypted storage

You don't want to leave passwords lying around in your source code. The App Secrets service provides easy-to-use encrypted storage of sensitive data, like passwords or encryption keys.

Learn to store encrypted data with another 4-minute tutorial:

Get Simple. Keep the Power.

Anvil gives you all the power of Python, and none of the complexity of traditional web frameworks. If you're a Python developer, you can build full-stack web apps without needing anything else.

And if you do want to tweak something with HTML, CSS or JavaScript, there's always an escape hatch! Use a Javascript library from Python code, or style your app with HTML CSS.

Don't get locked in.

Anvil's runtime is open source, so you can take your app and deploy it anywhere. You don't even need our editor to create an Anvil app!

Start Building

Anvil is free is to use, so you can start building right away! Start with a tutorial to get acquainted with Anvil or check out the documentation to learn about some of Anvil's other features.

Try Anvil >>

Cracker Jokes as a Service with Python

Meredydd Luff — Wed, 23 Dec 2020 15:56:22 +0000

Christmas crackers from the local supermarket often have the worst jokes. We say, 'there must be a better way'. Save up your favourite jokes this Christmas and hear the sound of guffaws 🤣 , not the silence of cringing faces 😬 .

It's database-backed, it's on the Web, it's in Python...and we didn't have to write a line of Javascript -- yep, we used Anvil:

Canvas Component

The anvil Canvas component gives us access to the browser's drawing APIs, along with easy mouse events -- so that seemed like the perfect way to build this app:

def draw_background(self):
    img = URLMedia('_/theme/cracker.png')
    c = self.canvas
    m = self.margin
    c.draw_image(img, m, 0, c.get_width() - 2*m, c.get_height())

def canvas_mouse_up(self, x, y, button, **event_args):
    """This method is called when a mouse button is pressed on this component"""
    if (x < self.margin):
        self.idx = (self.idx - 1) % len(self.jokes)
    elif x > self.w - self.margin:
        self.idx = (self.idx + 1) % len(self.jokes)
    self.write_joke()

Batteries Included

Anvil's Python in the browser comes with Python's batteries included philosophy, from your favourite python libraries to f-strings.

import itertools
import textwrap
import random


class TellJokes(TellJokesTemplate):

    def __init__(self, **properties):
        self.init_components(**properties)

        self.jokes = list(app_tables.crackers.search())
        self.idx = 0
        self.QorA = itertools.cycle('QA') # switch between Q and A
        self.margin = 80
        self.laughing = '🤣😂😹😆🙈'
        self.text = 'Click To Start Telling Jokes 🎅'

    def write_joke(self, text=None):
        if text is None:
            QorA = next(self.QorA)
            text = f"{QorA}. {self.jokes[self.idx][QorA]}"
            if QorA is 'A':
                text += ' ' + random.choice(self.laughing) # add a random laugh emoji

        # wrap lines for readability
        wrapped_text = textwrap.wrap(text, int(self.canvas.get_width() - 2*self.margin)/35)))
        ...

Share the laughter

I used the Anvil Data Tables service to create a database, then built a UI with a DataGrid component. Now I can send the app to the family -- let's hope they come up with some better jokes than I did 🙄 .

View the source code

Want to play with the app yourself? Check out the source code:

Open source code >>

Drawing 3D Models in the Browser - with Python!

Meredydd Luff — Fri, 18 Dec 2020 10:18:32 +0000

A 3D Christmas Tree in the Browser - With Nothing But Python

Good news: It's time to decorate the tree!

Bad news: Nobody will see it inside my house this year.

So I'm putting up a virtual one, in 3D.

Even more good news: I can do it all with nothing but Python!

Anvil lets me build web apps with Python. And I can use three.js, the browser-based 3D engine - without writing any Javascript at all! That's because Anvil lets you use Javascript libraries from Python.

Here's what the finished app looks like:

Try it yourself >>

If you're feeling impatient, you can just grab the source code - or read on to find out how it works.

How I built it

1. Setup

Driving a Javascript library in Anvil is easy. First, I included the library in my Native Libraries:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js"></script>

Now I can open my Python code and import the three.js library into Python, with from anvil.js.window import THREE.

I'm making my tree out of three ConeGeometry objects -- although they're Javascript objects, we can construct them straight from Python. Here's the Python code that actually builds the tree:

# Import the three.js library from Javascript-land:
from anvil.js.window import THREE

for i in range(3):
  geom = THREE.ConeGeometry(1, 1-0.2*i, 32)
  cone = THREE.Mesh(geom, green_tree)
  cone.position.y = i
  self.scene.add(cone)

And voila: A tree -- in my browser, built with Python:

2. Time to decorate!

Now, a tree on its own isn't very interesting, so it's time to add some baubles. I'm adding spheres of random colours along the outside of each cone.

So, for each cone, we do some trigonometry - we'll walk round the cone, adding baubles at random intervals. Remember that a cone is wider at the bottom than at the top, so we use Python's random.triangular() to pick lower positions more often:

      bauble_geom = THREE.SphereGeometry(0.1)
      theta = 0
      while theta < 2*math.pi:

          # Move a bit further round the tree
          theta += random.triangular(0, 0.5, 1);
          # How far down the cone? (0=top point, 1=bottom edge)
          fh = random.triangular(0.3, 0.9, 0.9)
          # What's the radius of the cone, this far down?
          d = fh*r

          # What colour?
          material = THREE.MeshLambertMaterial({ 'color': f"hsl({random()*360}, 100%, 50%)" })
          bauble = THREE.Mesh(bauble_geom, material)

          # Hang it on the tree
          bauble.position.set(d*math.sin(theta), cone_base + (1-fh)*h, d*math.cos(theta))
          cone.add(bauble)

3. Making it interactive

A Christmas tree is a personal expression, and everyone wants to customise theirs. So I've used Anvil's drag-and-drop UI designer to build a little control panel, and wire up the dropdowns to control the construction of the tree:

Sharing it with the world

Time to publish my app and share it with the world! You can open it here:

https://3d-tree.anvil.app

And you can get the whole source code here:

Source code >>

Happy decorating! And if you enjoyed this, you should check out the rest of the Anvil Advent Calendar. We're building a web app a day with nothing but Python -- every day until Christmas!

Python objects speak for themselves

Meredydd Luff — Wed, 02 Dec 2020 00:00:00 +0000

(Hat-tip to my former colleague Shaun for this one!)

Introspection in Python

Let’s investigate how you can use built-in Python tools to both:

find out exactly what any module can do, and
find out exactly how Python will execute your code.

This makes debugging Python code much easier than in other languages I’ve used. You can ask any object what it does and what data it holds - and this is built in to the language!

Here’s a very basic Python class:

class Vehicle():
  """A really simple class to represent vehicles."""

  def __init__ (self, wheels=4, colour='red'):
    self.wheels = wheels
    self.colour = colour

  def repaint(self, colour=None):
    """Change the colour of this vehicle."""
    self.colour = colour

If I import this class and run dir on it, I can see everything it does:

>>> v = Vehicle()
>>> # Let's see what's in my vehicle...
>>> dir(v)
[' __class__', ' __delattr__', ' __dict__', ' __dir__', ' __doc__', ' __eq__', 
' __format__', ' __ge__', ' __getattribute__', ' __gt__', ' __hash__', 
' __init__', ' __init_subclass__', ' __le__', ' __lt__', ' __module__', 
' __ne__', ' __new__', ' __reduce__', ' __reduce_ex__', ' __repr__', 
' __setattr__', ' __sizeof__', ' __str__', ' __subclasshook__', ' __weakref__', 
'colour', 'repaint', 'wheels']

I can see the method and attributes I gave the class: repaint, colour and wheels. Not only that, but dir also tells me about all the built-in methods that my class has inherited from Python’s object class, such as __eq__ and__str__. These all start and end with a d ouble under score so we refer to them as ‘dunder’ methods. Let’s try one:

>>> # I wonder what this method does...
>>> v. __dict__
{'wheels': 4, 'colour': 'red'}

So my simple class automatically has a method to get its attributes in a dictionary ¹! I didn’t know that… but I found it out just by introspecting my object using dir.

Forensic programming

If something isn’t very well documented in a library you’re using, don’t worry! You can inspect the objects the library provides and work things out for yourself.

Imagine you want to make an HTTP GET request. You’ve been recommended the requests librarybut let’s pretend you can’t make head or tail of the documentation ². So, you try importing it and running dir on it:

>>> import requests
>>> # So, what does this library give me?
>>> dir(requests)
['ConnectTimeout', 'ConnectionError', 'DependencyWarning', 'FileModeWarning', 
'HTTPError', 'NullHandler', 'PreparedRequest', 'ReadTimeout', 'Request', 
'RequestException', 'RequestsDependencyWarning', 'Response', 'Session', 
'Timeout', 'TooManyRedirects', 'URLRequired', ' __author__', ' __author_email__', 
' __build__', ' __builtins__', ' __cached__', ' __cake__', ' __copyright__', 
' __description__', ' __doc__', ' __file__', ' __license__', ' __loader__', 
' __name__', ' __package__', ' __path__', ' __spec__', ' __title__', ' __url__', 
' __version__', '_check_cryptography', '_internal_utils', 'adapters', 'api', 
'auth', 'certs', 'chardet', 'check_compatibility', 'codes', 'compat', 
'cookies', 'delete', 'exceptions', 'get', 'head', 'hooks', 'logging', 
'models', 'options', 'packages', 'patch', 'post', 'put', 'request', 'session', 
'sessions', 'status_codes', 'structures', 'urllib3', 'utils', 'warnings']
>>> # Quite a lot!

There’s a lot there! Looks like there’s a method named get, maybe that will make a GET request for us? Let’s see if it’s callable:

>>> callable(requests.get)
True

Great! But how do we call it? We’ll use a brilliant built-in module named inspect to tell us. It can tell us the signature of any function or method we might be thinking of calling:

>>> import inspect
>>> # What parameters does requests.get accept?
>>> inspect.signature(requests.get)
<Signature (url, params=None, **kwargs)>

There’s a positional argument called url, and an optional keyword argument named params. The url argument is obvious. Let’s try making a request to an API that returns Bertrand Russell quotes (what else?):

>>> requests.get("https://bertrand.anvil.app/_/api/quote")
<Response [200]>

Ok… so I’ve got a response. I guess 200 is an HTTP 200 OK status, meaning it worked. But how do I get my quote? One more use of dir and I see that my response has a text attribute:

>>> requests.get("https://bertrand.anvil.app/_/api/quote").text
'Everything is vague to a degree you do not realize till you have tried to make it precise.'

Amazing! We’ve worked out how to use the Python requests library using nothing but our wits and Python’s built-in introspection tools.

Incidentally, I spotted something strange when I ran dir(requests). What is requests. __cake__? Maybe it ‘bakes’ a response into something I can store on disk? Maybe it’s got something to do with browser cookies? Let’s find out:

>>> # What's this?
>>> requests. __cake__'✨ 🍰 ✨'
>>> # I see.

So we’ve seen how Python’s introspection can help you figure out precisely how to use a library, even when that library contains undocumented methods.

Let’s get even more introspective. Python can gaze into its innards and see all the way through to its very guts. It can tell you all the details of how it compiles and executes your code.

Extreme introspection

Not only will Python objects tell you what they do, but Python can tell you exactly how it plans to do it. When Python executes your code, it does it in (at least) three steps, and you can find out the exact details of each of them.

How Python understands code

The first step is parsing. Python takes the raw characters of your code and turns it into a structure that represents the meaning of the text. The long string of characters is translated into tokens that are organised into a tree - an abstract syntax tree (AST). Take a simple Python statement:

x = 4 + 8

The abstract syntax tree looks like this:

What the Python parser sees when you tell it x = 4 + 8

This is something that must occur in all programming languages except assembly code, but not all give you such easy access to their innards as Python does. Python ships with a module you can run on your code to see the abstract syntax tree it generates from your code. It’s called ast (here is it in the Python docs).

We can get the AST for our simple statement like so:

>>> import ast
>>> tree = ast.parse('x = 4 + 8')

Let’s use our introspection skills to explore that object. We run dir on it and see that there’s a body attribute:

>>> tree.body
[<_ast.Assign object at 0x1024a8470>]

The body of the AST is a list of all the Python statements in the code. Our program only has one Python statement, the assignment statement x = 4 + 8. That’s why tree contains one statement, named Assign.

Let’s see what’s inside the assignment. Using dir tells us it has things called targets and value. I bet targets are the things being assigned to (x in our case) and value are the things being assigned (so for us that’s 4 + 8). We’ll check targets first:

>>> tree.body[0].targets[0].id
'x'

Just as we expected. Now let’s look at value:

>>> tree.body[0].value
<_ast.BinOp object at 0x1014e3128>

It’s a BinOp object - a binary operator, meaning an operator that takes two arguments. That must be our + operator! We run dir again to see what it does, and it looks like we want to see the op attribute:

>>> tree.body[0].value.op
<_ast.Add object at 0x1014d3978>

Yep, just as we expected - Add is clearly the token representing the + operator. Where are the 4 and 8? They’re in the BinOp, which has left and right attributes:

>>> tree.body[0].value.left.n
4
>>> tree.body[0].value.right.n
8

So we have the entire AST we sketched out before, represented by Python objects in a nested structure that reflects the structure of the tree!

How ast expresses x = 4 + 8

How Python executes code

So Python turns the characters that make up our code into an AST representing the meaning of the code, and it gives us the ast module to inspect that for ourselves. But there’s more to executing the code than this. The standard Python implementation (CPython) compiles your lovingly hand-crafted Python code into a form of assembly language - Python Bytecode - that runs on a virtual machine. This is how Python can ‘write once, run anywhere’. The virtual machine is compiled for various different types of computer, and the bytecode that runs on it is completely universal.

Just as with ast, Python has a standard library module called dis that can show you the bytecode generated from a given Python program. You can pass in a Python object such as a function, or you can pass in a Python program as a string:

>>> from dis import dis
>>> dis('x = 4 + 8')
  1 0 LOAD_CONST 0 (12)
              2 STORE_NAME 0 (x)
              4 LOAD_CONST 1 (None)
              6 RETURN_VALUE

Since this is an extremely simple Python program, it’s not hard to understand the bytecode. The first line loads a constant onto the Python virtual machine’s memory stack:

  1 0 LOAD_CONST 0 (12)

The value of that constant is included in the actual bytecode, and there’s a little optimisation here. The addition has already been carried out! The compiler has converted the 4 + 8 into 12 so the VM doesn’t need to do that at runtime.

The next instruction is our assignment operator (the =). It instructs the VM to define a symbol x and store the value at position 0 in it. This means it can refer to x later on in the code:

              2 STORE_NAME 0 (x)

The compiler appears to be a little stupid here. Doesn’t it realise that this is the end of the code, and there is no ‘later on’? In fact, our tiny program x = 4 + 8 is a Python module, so the bytecode keeps track of the label x in case any other modules want to import it.

There are two more instructions that we might not have expected to see. First, None is loaded onto the stack. Next, the RETURN_VALUE instruction is called.

              4 LOAD_CONST 1 (None)
              6 RETURN_VALUE

We didn’t tell it to return None!? But all Python functions and modules do this by default, so these phantom instructions have appeared in order to enforce that useful consistency.

The final stage

I said there were (at least) three stages to running a Python program. We’ve discussed the first two, and Python gives you absolutely precise introspection tools to pick them apart exactly.

If you inspect the ASTs and bytecode your hand-written code generates from time to time, you might develop a better intuition for writing your code in a more efficient way. As a wise man once said:

Everything is vague to a degree you do not realize till you have tried to make it precise.

(I’m sure I’ve read that somewhere before.)

We haven’t yet discussed the third stage of running a Python program. We’ve got as far as the bytecode, but how does it get executed? The Python VM interprets it, reading it line-by-line and executing equivalent instructions on the physical machine you’re running it on.

We saw how you can find out exactly how the first two steps of the process work. The third step is no different, but it’s not so easy! You would have to read the CPython source code and understand how the CPython VM works. I think I’ll leave that one for another time.

But seriously…

If you’re intersted in understanding the inner workings of Python, you could get involved with CPython development. It’s an extremely well-managed open-source project with a very comprehensive developer guide. A great way to get started is to try fixing something from the list of ‘easy’ issues- that’ll still be a challenge but they’re picked out to be possible to figure out as a beginner.

Another way to contribute to core Python is to work on a compiler other than the CPython reference implementation. These projects typically have more room to make your mark than something as giant as CPython. A good example is the Python-to-JavaScript compiler named Skuplt, used by Anvil to run Python in the web browser. Skulpt is an active open-source project that welcomes new contributors.

Contribute to Skulpt >>

And if you want to see Skulpt in action, try building something in Anvil:

Build something in Anvil >>

[1]: Incidentally, this code did not convert my object to a dictionary, the dictionary already exists and it’s where Python stores the object’s attributes. Retrieving values from Python dictionaries is really fast, so they are used as the mechanism for getting attributes from objects. ^return)

[2]: The documentation of requests is actually very good, and the requests library itself is a work of genius. In fact, API is so well-designed that it makes a neat example of learning by introspection, which is why I’ve used it here! ^[return]

Generate PDFs with Python using Anvil

Meredydd Luff — Fri, 13 Nov 2020 10:56:32 +0000

PDFs Made Easy

Generating PDF documents in Python can be a pain, with lots of janky dependencies and HTML generation. I'm going to show you a much easier way with nothing but Python!

Using Anvil, the pure-Python full-stack web app tool, generating a PDF document is easy:

Design a page in Anvil's drag-and-drop designer
Render it to PDF with one function call
Download it in the browser, or send it by email, or store it in a database, or...

In this tutorial, we'll build a simple web app where users can register for an event and download their ticket as a PDF. Follow along with the tutorial, or clone and try out the finished app:

Open the App in Anvil >>

Completely new to Anvil? You might want to try one of our 'Start Here' tutorials

Step 1 - Design your PDF

First, let's design a Form that we want to convert to a PDF ticket. Add a new Blank Panel Form to the app and rename it 'Ticket'.

We can design our Form however we like. To make the Form look like a ticket, I've added a Card with a dotted border and a Label that says 'ADMIT ONE'. We should also add Labels to display the user's name (name_label) and the date of the event (date_label):

We should change the __init__ of the Ticket Form so that it takes strings called name and date as arguments and displays them on the labels we just created. Switch to Code View in the Form Editor and change the __init__ function of our Ticket class so it looks something like this:

class Ticket(TicketTemplate):
  def __init__(self, name, date, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    self.name_label.text = name
    self.date_label.text = date

Step 2 - Create the user interface

Let's now build a UI so that users can generate and download the ticket as a PDF. We'll design a simple registration page for users to put in their name and email address and choose the date of the event they will attend.

Switch to Form1 in the App Browser. We need two TextBoxes so users can fill in their name and email address and two Labels for these. We'll name the TextBoxes name_box and email_box. We'll also need a DropDown named date_dropdown so that users can choose the date of the event.

We should populate the items property of our DropDown with a few dates. Each item in the DropDown should be on a separate line. We can also include a placeholder that says 'choose date'.

Finally, let's add a Button called register_button, so users can register and download their PDF ticket. Let's add a click event for this Button that just displays our PDF form, so we can see what it will look like when it's downloaded.

  def register_button_click(self, **event_args):
    """This method is called when the button is clicked"""
    name = self.name_box.text
    date = self.date_dropdown.selected_value
    open_form('Ticket', name, date)

Now, run the app! Fill in a name, select a date and click REGISTER to see with the ticket looks like.

Step 3 - Render and download the PDF

Our ticket is looking good! Now let's turn it into a PDF. Rather than displaying the Ticket form in the browser, we'll define a server function to render it as a PDF document.

We can only generate a PDF from Server code, so we'll first need to add a Server Module to our app. We define a function which calls anvil.pdf.render_form(). This method returns a Media object, which means we can pass it back to the browser, download it or send it as an email attachment. We also need to decorate our fuction with @anvil.server.callable so we can call the function from client code.

Here's what our server code looks like:

import anvil.pdf

@anvil.server.callable
def create_pdf(name, date):
    pdf = anvil.pdf.render_form('Ticket', name, date)
    return pdf

Let's call this function from the registration form then download the generated PDF. We use anvil.server.call() to call our server function and generate the PDF, and anvil.media.download() to save it. The click event should now look like this:

  def register_button_click(self, **event_args):
    """This method is called when the button is clicked"""
    name = self.name_box.text
    date = self.date_dropdown.selected_value

    pdf = anvil.server.call('create_pdf', name, date)
    anvil.media.download(pdf)

That's all we need to do to render a Form as a PDF. And we can download it with just one line of code!

Let's test it out. Run the app again, fill in the form and click REGISTER. This time, the ticket will download.

Step 4 - Send your PDF as an email attachment

Once we've rendered our Form as a PDF, it's easy to send an email with the document attached.

We first need to add the Email Service to our app. In the App Browser, click the + next to SERVICES and click on Email. To test out the app, we can check Test Mode so that all emails are redirected to us.

We can then write a function in the Server Module which calls create_pdf and then sends the rendered PDF as an email attachment:

@anvil.server.callable
def send_pdf_email(email, name, date):
  pdf = create_pdf(name, date)
  anvil.email.send(
    from_address='no-reply',
    from_name='Events', 
    to=email, 
    subject='Your Ticket',
    text='Thanks for registering!. Your ticket is attached to this email.',
    attachments=pdf
  )
  return pdf

Note: To avoid being used for Spam, by default anvil.email.send() sends all email to the app owner (ie you) if you're using the Free plan. You can deliver email to other people by configuring an SMTP server in the Email service (SendGrid's Free plan works great for this), or by upgrading to a paid Anvil plan.

Now let's modify the register_button_click method in Form1 so that it calls the send_pdf_email function we just wrote. Since send_pdf_email returns the rendered PDF, we just need to swap it with create_pdf and pass in email:

  def register_button_click(self, **event_args):
    """This method is called when the button is clicked"""
    name = self.name_box.text
    date = self.date_dropdown.selected_value
    email = self.email_box.text

    pdf = anvil.server.call('send_pdf_email', email, name, date)
    anvil.media.download(pdf)

We can now run the app again and our PDF ticket will be emailed to us. As long as we are in Test Mode, the ticket will always be emailed us no matter what email address we type in.

Step 5 - Check the input

We want to make sure that the user has actually filled in the registration form, so let's add in a check before we generate the PDF ticket. We'll alert the user if they haven't filled the form, but if they have, we'll tell them that their ticket will be downloaded and emailed to them:

 def register_button_click(self, **event_args):
    """This method is called when the button is clicked"""
    name = self.name_box.text
    email = self.email_box.text
    date = self.date_dropdown.selected_value

    if name and email and date:
      alert(f'Thanks for registering! Your ticket is downloading and will be sent to {email}.')

      pdf = anvil.server.call('send_pdf_email', email, name, date)
      anvil.media.download(pdf)

    else:
        alert('You have not completed all required fields')

Try running the app again, but this time, leave at least one of the TextBoxes blank.

Step 6 - Optional: Set the PDF filename

Our app now generates, downloads and emails a PDF attachment when a user registers for our event. However, the PDF is called 'print.pdf' when we download it, which isn't very descriptive. If we want to specify settings for our PDF document, we can use PDFRender(). Let's modify our create_pdf function and specify a filename using PDFRenderer().

First add from anvil.pdf import PDFRenderer to the top of the Server code then modify the create_pdf function:

import anvil.pdf
from anvil.pdf import PDFRenderer

@anvil.server.callable
def create_pdf(name, date):
    pdf = PDFRenderer(filename=f'{name} Ticket.pdf').render_form('Ticket', name, date)
    return pdf

Now when our ticket is downloaded, it will have a more useful name.

Step 7 - Run the finished app

We've now created a simple app which converts an Anvil form to a downloadable PDF and sends it as an email attachment. Let's test out the finished app.

That's it!

Your app is already live on the internet. Go to Publish App in the Gear Menu for details.

You can check out the finished app here:

Open the Finished App in Anvil >>

What's Next?

If you thought this was cool, check out the rest of Anvil!

Head to the Anvil Learning Centre for more tutorials, or head to our examples page to see how to build some complex apps in Anvil.

Deploy a Machine Learning Model as a Web App with Anvil and Deepnote

Meredydd Luff — Fri, 06 Nov 2020 17:25:34 +0000

Prefer watching to reading? This tutorial is also on YouTube:

Deploying Data Science with nothing but Python

Deepnote is a seriously slick Python notebook, hosted in the cloud, with incredible real-time collaboration. It's great for working with other data scientists. But what happens when you want to share your project with non-programmers? They need an easy-to-use interface -- so you need to deploy what you've built.

Anvil lets you build full-featured web apps entirely in Python (no HTML or JS required) -- and you can connect it to external notebooks.

Follow along as we use Deepnote and Anvil to deploy a machine learning model as a web app -- a web app anyone can use!

We're going to build this app -- and it's going to be easy!

Step 0 - Get the notebook

In this example, we're going to start with an image classifier that can tell the difference between cats and dogs. Believe it or not, getting this notebook running in the cloud is the easy part! Just open the notebook in Deepnote and click Duplicate:

Open the notebook >>

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

All right, we have a notebook. Let's deploy it as a web app!

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.

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

Step 2 - Add your components

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

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

Select the Label we just added and, in the components properties, change the name to 'results_lbl'. Then add a spacer component above the label to centre the label against the image.

Now we have a user interface, let's connect our app to the code in our Jupyter notebook.

Step 3 - Enable the Uplink

From the IDE, let's enable the Uplink. 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 Deepnote notebook.

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

Step 4 - Install the Uplink Library in our Deepnote notebook

It's time to connect our notebook to Anvil!

The first thing we need to do is install the anvil-uplink library. Let's add !pip install anvil-uplink to our notebook:

!pip install anvil-uplink

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

Step 5 - 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.

Run the cell. You should see output like this:

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

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 6 - Creating a callable function

In a new cell, let's define a function we can call from our app to classify an image. We'll call it classify_image, and decorate it with @anvil.server.callable so we can call it from the web.

The image will be passed to our classify_image function as an Anvil media object. We'll write it to a temporary file and load it into it into Pillow.

Our notebook already has a function, get_prediction(), for putting the Pillow image through the classifier. We'll call that function and return the results in two parts: the numerical score, and then the classification. We'll say anything scoring less than 0.5 is a 'dog', and anything else is a 'cat'.

Here is how our finished cell should look:

import anvil.media

@anvil.server.callable
def classify_image(file):
  with anvil.media.TempFile(file) as f:
    img = load_img(f)

  score = get_prediction(img)

  return score, 'dog' if score < 0.5 else 'cat'

Our notebook is now ready to classify images! Let's go back into our Anvil app and call that classify_image function when someone uploads an image.

Step 7 - Calling notebook functions from the web

In the design view of our Anvil app, double click the FileLoader component we added earlier. It will take us to the code view and add a function that runs whenever a file is uploaded.

In the function, type anvil.server.callable() and pass it the name of our notebook function 'classify_image'. Then pass it the uploaded file as the argument to our notebook function. (Anvil will take care of transmitting the data.)

We can then create two variables, score and cls, and set them to the two values returned by classify_image:

Step 8 - Displaying our classification

We've got the results -- it's time to show them on the screen!

Still in our file_loader_1_change function, let's display the classification as text on our Label, and display the uploaded image on the Image component.

We set the text of results_lbl to include both the classification and the score returned by our model:

self.results_lbl.text = f"{cls} ({score:.1f})"

Then set the source of image_1 to the uploaded file:

self.image_1.source = file

The finished function will look like this:

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

    self.result_lbl.text = f"{classification} ({score})"
    self.image_1.source = file

We now have an app that takes an image, sends it to our Deepnote notebook, classifies it and returns the results to our app. It's all in the cloud, and all in Python!

All we need to do now is deploy our app to the internet for everyone to use.

Step 9 - Publishing our app

From the IDE, open the Gear menu in the top left of the IDE, then select Publish app and then Share via public link. Choose a URL and click "Apply":

That's it -- we've deployed a machine learning model as a web app, with Deepnote hosting the notebook and Anvil hosting the web app. Best of all, we didn't need anything but Python!

Clone the App

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

Clone the finished Anvil app >>

And you can duplicate our Deepnote notebook from the link below:

Open the finished notebook >>

New to Anvil?

If you haven't seen it before, Anvil makes web development accessible: Build fully featured webs apps painlessly, without JavaScript, HTML or CSS - just Python.

The runtime platform is open source, and the online IDE is free, so you can try it out at https://anvil.works.

Why We Open Sourced the Anvil App Server

Meredydd Luff — Wed, 20 May 2020 00:00:00 +0000

Why Open Source?

A little while ago, we open-sourced the Anvil App Server. The community reaction has been great, even a little overwhelming (yes, every reply to that announcement really did land in my inbox!). We’ve already incorporated a bunch of that feedback into our version 1.2 release. But we keep getting asked, “ Why did you open-source such a core part of your product? “

Why do this at all?

Anvil is a tool that makes it as simple as possible to build a web app. We do that by enabling you to build the whole application in one language, Python.

Yes, really. All of these, for a simple web app.

If you want to build a web application today, it’s a mess. Even for the simplest application, you’ll need to know HTML, Javascript, CSS, Python, SQL, React, Redux, Bootstrap, Sass, Webpack…and that’s a simple app. (Trust me, it gets way worse.)

But even then, you’re not done! You need to know all about Git, about AWS, about how to secure a Linux system, how to set up a database…and then you’re on call to keep it all running. Forever.

Or…you could use Anvil. Build your UI with a drag-and-drop designer, write all your logic in Python, and we’ll take care of the rest. We replace that whole teetering stack with “just write Python”. (Intrigued? We’ve got tutorials.)

Simple hosting is part of that.

The web platform is broken , and Anvil is our attempt to fix it. And, because there is so much complexity in deploying a web app, a cloud-hosted service was the best way to provide the simplicity we want. That way, you can build your app in the Anvil Editor, and make it live on the Internet with one click.

But we kept hearing from people who said, “that’s great, but…”

”…but I need to run this on an offshore platform without reliable internet access”
”…but I want to package my app into an IoT device I sell”
or simply, ”…but if I’m putting my eggs in this basket, how can I be sure I can still run my app in ten years’ time?”

These are all good points! A cloud service isn’t the right solution for everyone. If we want to serve these users, there’s got to be some way for them to get their apps out of Anvil and run them locally, under their own complete control.

Open Source: Escape hatch, not an ejector seat

We believe in escape hatches, not ejector seats. At conferences, we sometimes get asked, “can I export this as a Flask+JS app?”. Sure, it would be possible – we could generate a server package, compile the client-side Python to Javascript, and spit out a classic web app. But it would have serious drawbacks, because:

Not a comfy ride.

Code generation is an ejector seat. Generated code is better than nothing – at least you can edit it! But the moment you edit that code, you lose all the benefits of the system that generated it. If you’re using Anvil because of its drag-and-drop editor and Python in the browser, why should our locally-hosted users have to use vim and Javascript?

So we did it the right way: we open-sourced Anvil’s runtime engine. It’s the same code that serves your app in our hosted service, and it represents your app the same way. You can edit your code with a text editor, run it, then git push it back into our online IDE. It’s not an ejector seat: there’s no explosive transition. It’s an escape hatch: you can climb out, and climb right back in.

What about our business model?

Anvil was never meant to be one of those enterprise low-code systems that charge you $20/mo for each person who uses your app. Anvil is a developer tool. The apps you develop are yours. Enabling you to run them on a Raspberry Pi is cool, but it doesn’t change our business model.

We’re doing what we always were: We make and sell a development tool that makes it drastically simpler to build web applications. We provide hosting for Anvil apps. We offer the entire development-and-hosting platform on-site for enterprise customers. And, of course, we offer a free plan so that everyone can use Anvil for hobby or educational purposes – or to start building something and see how it goes.

We’ve open-sourced the Anvil App Server for the (relatively small) number of people who need it, and to provide the ultimate insurance policy. Sure, you can build an app with vim and host it yourself, without even registering an account with us (we’ve got docs to show you how!). But the Anvil Editor is the world’s easiest way to build a web app, and our hosted service is the easiest way to deploy it – so that’s what we expect most of our users to continue doing. And you can build with confidence, knowing that the open-source code is right there if you need it.

Try it yourself

If our development philosophy resonates with you, why not try Anvil yourself?

Go on – it’s free, and now it’s open source too:

Try Anvil

Read a tutorial