Simple Demos

This is designed to take a simple static html website (like this one) and turn any code it finds into interactive editors. This page is intended to be a demo of that functionality so is more descriptive and uses jupyterlite.

For additional, very static and more specific, html examples, see the table at the bottom of the page.

Configuration

thebe can be configured by adding a script tag to your web page with an options object, that will be loaded by the `bootstrap` function.

By default this demo used the pyodide WASM kernel with jupyterlite but you can also configure it to use a local jupyter server or the mybinder.org service.

Configuration for jupyterlite is simply:

<‍script type="text/x-thebe-config">
  {
    useBinder: false,
    useJupyterLite: true,
    mountActivateWidget: true,
    mountStatusWidget: true,
  }
<‍/script>

Thebe's Default UI

By adding the following tags to the page, once loaded, thebe will add default UI elements to the page (these are customisable by css).

  <‍div class="thebe-activate"><‍/div>
  <‍div class="thebe-status"><‍/div>

These should appear below 👇

The following code snippet has been marked as <‍pre data-executable="true" data-language="python"><‍/pre> meaning thebe will turn it into an editor when activated!

Note: this is quite a lot of code, thanks because it's producing the excellent Lorentz Attractor plot - taken from the ipywidgets documentation.

%pip install ipywidgets

import numpy as np
import matplotlib.pyplot as plt
%matplotlib inline

from ipywidgets import interact, interactive
from IPython.display import clear_output, display, HTML

import numpy as np
from scipy import integrate

from matplotlib import pyplot as plt
from mpl_toolkits.mplot3d import Axes3D
from matplotlib.colors import cnames
from matplotlib import animation

def solve_lorenz(
  N=10, angle=0.0, max_time=4.0, 
  sigma=10.0, beta=8./3, rho=28.0):

    fig = plt.figure()
    ax = fig.add_axes([0, 0, 1, 1], projection='3d')
    ax.axis('off')

    # prepare the axes limits
    ax.set_xlim((-25, 25))
    ax.set_ylim((-35, 35))
    ax.set_zlim((5, 55))
    
    def lorenz_deriv(x_y_z, t0, sigma=sigma, beta=beta, rho=rho):
        """Compute the time-derivative of a Lorenz system."""
        x, y, z = x_y_z
        return [sigma * (y - x), x * (rho - z) - y, x * y - beta * z]

    # Choose random starting points, uniformly distributed from -15 to 15
    np.random.seed(1)
    x0 = -15 + 30 * np.random.random((N, 3))

    # Solve for the trajectories
    t = np.linspace(0, max_time, int(250*max_time))
    x_t = np.asarray([integrate.odeint(lorenz_deriv, x0i, t)
                      for x0i in x0])
    
    # choose a different color for each trajectory
    colors = plt.cm.viridis(np.linspace(0, 1, N))

    for i in range(N):
        x, y, z = x_t[i,:,:].T
        lines = ax.plot(x, y, z, '-', c=colors[i])
        plt.setp(lines, linewidth=2)

    ax.view_init(30, angle)
    plt.show()

    return t, x_t

w = interactive(solve_lorenz, angle=(0.,360.), max_time=(0.1, 4.0), 
                N=(0,50), sigma=(0.0,50.0), rho=(0.0,50.0))
display(w)

Other static examples

Follow the links in the table to check out minimal examples of thebe in different configurations, in each case "view source" to see how each is configured.

demo	description
Running on a local jupyter server	simple plots
	ipywidgets examples
	math rendering
Using JupyterLite with the pyodide kernel	simple plots
Using JupyterLite with the pyodide kernel	ipywidget examples
Running on mybinder.org	simple Plots
Running on mybinder.org	ipywidgets examples

Running a local jupyter server

Some of the demos require you to run a jupyter server on your machine, which is pretty easy if you are a regular jupyter user.

If needed, setup a new virtual environment using the requirements.txt file here.

python -m venv thebe-env
source thebe-env/bin/activate
python -m pip install -r requirements.txt
python -m pip install jupyterlab

Then start a jupyter server using the command:

jupyter lab --NotebookApp.token=test-secret --NotebookApp.allow_origin='*'