Créer des sites web Jupyter interactifs avec JupyterLite

AlpOSS 2024

Jérémy Tuloup

https://jtp.io/alposs-2024

Jérémy Tuloup

• Directeur Technique à QuantStack
• Jupyter Distinguished Contributor
• Jupyter Frontends SSC (Steering Software Council) representative
• Contributeur à de nombreux projets Jupyter
• Créateur de JupyterLite

Historique rapide de Jupyter

IPython dans le terminal

REPL: Read Eval Print Loop

Pourquoi les notebooks sont populaires ?

• Le workflow REPL
• Avec en plus:
  • narration
  • mémoire
  • reproductibilité
  • communication

IPython Notebook

Jupyter Notebook

JupyterLab

LIGO

Black Hole M87

L'écosystème Jupyter est très vaste

• Navigating the Jupyter Landscape
  • JupyterCon 2023 (Paris)
  • Jeremy Tuloup, Johan Mabille
  • https://www.youtube.com/watch?v=uWJ0-OPKTxI

JupyterLite

• Tout tourne dans le navigateur web via WebAssembly
• Se base sur la stack Jupyter existante:
  • Les noyaux Pyodide et Xeus exécutent le code dans le navigateur
  • Interfaces web JupyterLab et Jupyter Notebook
  • Voici pour faire des applications web et dashboards

Jupyter

JupyterLite

Jupyter et Python dans le navigateur

• pas de serveur Python
• pas de ligne de commande pour les utilisateurs
• pas besoin d'installer Python et autres paquets
• peut être hébergé comme site statique

Un site Jupyter accessible en quelques secondes

Générateur de site statique

pip install jupyterlite-core

jupyter lite build

Fichiers HTML, CSS, JavaScript, Wasm

├── api
│   └── translations
│       ├── all.json
│       └── en.json
├── bootstrap.js
├── build
│   ├── 9507.1e6cc5d.js
│   ├── 9602.62bf0f1.js
│   ├── 9621.e2e8b5d.js
│   ├── ...
│   ├── repl
│   │   ├── bundle.js
│   ├── retro
│   │   ├── bundle.js
│   ├── schemas
│   │   ├── all.json
│   │   ├── @jupyterlab
│   │   │   ├── application-extension
│   │   │   │   ├── commands.json
│   │   │   │   ├── context-menu.json
│   │   │   │   ├── shell.json
│   │   │   │   └── sidebar.json
│   ├── themes
│   │   └── @jupyterlab
│   │       ├── theme-dark-extension
│   │       │   ├── index.css
│   │       │   └── index.js
...

...
│   │       └── theme-light-extension
│   │           ├── index.css
│   │           └── index.js
├── config-utils.js
├── extensions
│       └── xeus-python-kernel
│           └── static
│               ├── numpy-1.24.2-py310h6d2fff6_0.0.data
│               ├── numpy-1.24.2-py310h6d2fff6_0.0.js
│               ├── python-3.10.2-h_hash_26_cpython.0.data
│               ├── python-3.10.2-h_hash_26_cpython.0.js
│               ├── python_data.js
│               ├── remoteEntry.35b4eac217ec6bf078a4.js
├── lab
│   ├── favicon.ico
│   ├── index.html
│   ├── jupyter-lite.ipynb
│   ├── jupyter-lite.json
│   ├── package.json
│   ├── tree
│   │   └── index.html
│   └── workspaces
│       └── index.html
...

Cas d'usage

<iframe
  src="https://jupyterlite.github.io/demo/repl/index.html?kernel=python&toolbar=1"
  width="100%"
  height="500px"
>
</iframe>

https://github.com/rowanc1/myst-lite

Education

• Capytale: https://capytale.fr
• Paris Saclay: https://jupyter.gitlab.dsi.universite-paris-saclay.fr/tutoriel-jupyter/utiliser.html
• UC Berkeley

Deployez sur GitHub Pages

• https://github.com/jupyterlite/demo

https://jupyterlite.github.io/demo/

Références

• Documentation Jupyter: https://docs.jupyter.org
• Cette présentation:
  • Repo: https://github.com/jtpio/alposs-2024
  • Slides: https://jtp.io/alposs-2024

Merci !