Utilisez Python dans un navigateur Web avec PyScript

Mathieu Chartier Programmation 0 commentaire

Pyscript, le framework pour exécuter du code Python dans du HTML (navigateur)

Pyscript est un framework visant à permettre l'usage de code Python directement dans un navigateur Web. Ainsi, il deviendra possible de créer des applications Web riches à l'aide d'un langage de plus en plus populaire, mais surtout aux usages multiples et poussés. Il s'agit encore d'une version Beta, qui va être encore nettement améliorée et complétée, mais les premiers résultats de Python dans un navigateur sont tout bonnement bluffants.

Pour les fans de Python, sachez que le framework Pyscript a été développé par l'équipe d'Anaconda, dont le PDG et co-fondateur Peter Wang (c'est lui qui a annoncé le projet lors de sa keynote au PyCon US 2022). Pyscript s'appuie sur le projet Pyodide lancé en 2018 par Mozilla (et depuis 2021, le projet est indépendant), dont la base est solide pour utiliser du Python dans un navigateur. En effet, Pyodide a été pensé pour la Data Science (comme Pyscript), dont l'objectif était de combler en partie les limitations de JavaScript en matière d'analyse de données. Il a été créé avec WebAssembly, un langage bas niveau, qui permet d'effectuer des traitements très rapidement, et cpython-emscripten. Il permet notamment d'exécuter des scripts Python dans le navigateur Web, comme le propose le framework Pyscript, et l'usage des paquets Python (via PyPI).

Comment installer Pyscript pour son navigateur Web ?

Difficile de faire plus simple que l'installation du framework Pyscript, puisqu'il s'agit de coller uniquement deux lignes dans une page HTML standard pour charger la librairie Python/JavaScript (car oui, comme souvent, JavaScript est dans les parages ! ^^). Comme décrit ci-dessous, vous avez juste à copier/coller ces deux lignes dans la section <head>...</head> de vos pages Web.

<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css"/>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>

Voilà, c'est installé. Maintenant, il ne nous reste qu'à l'utiliser. Pour ce faire, il existe deux nouvelles balises HTML créées sur mesure pour l'occasion :

  • <py-script>...<py-script> : contient du code Python qui sera exécuté directement dans le navigateur (après un petit chargement nécessaire mais pas dérangeant).
  • <py-repl>...</py-repl> : créé un éditeur de code dans le navigateur, à l'image d'un JSFiddle ou CodePen. Très intéressant pour développer des applications riches utilisant du code Python, ou tout simplement pour faire apprendre Python dans un navigateur, à l'image d'un site comme Codecademy.

Il existe plusieurs attributs à connaître pour aller plus loin avec ces balises, mais l'essentiel tient vraiment dans leur seule présence. Ce qui est intéressant en revanche, c'est bien l'attribut output qui permet de donner l'ID d'un élément HTML d'accueil pour afficher la sortie d'un programme Python. Ainsi, vous pouvez créer un code dont le résultat est déporté dans une autre balise HTML, comme ceci :

<div id="resultat"></div>
<py-script output="resultat">
bonjour = "Bonjour tout le monde"
<!-- Exécute l'affichage dans la balise avec l'ID "resultat" -->
bonjour
</py-script>
Il est possible également d'appeler des scripts relatifs en complément des modules courants, comme ceci (insérez d'éventuels noms de modules puis placez "paths:" avant la liste des scripts à importer) :
<py-env>
- paths:
- ./utils.py
</py-env>

Une troisième (et dernière) balise HTML est à connaître pour être tout-à-fait complet, il s'agit de <py-env>...</py-env> qui s'insère dans le HEAD de la page HTML. Elle fournit l'ensemble des dépendances utiles pour les deux balises évoquées précédemment, notamment les modules Python utiles (si nécessaire). Comme dans la capture ci-dessous (issue d'un exemple fourni dans le Github de Pyscript), cette balise doit être utilisée ainsi (ici avec les modules très connus Matplotlib et Numpy).

<py-env>
- matplotlib
- numpy
</py-env>
On peut aussi faire appel à des scripts relatifs en complément des modules courants, comme ceci :
<py-env>
- paths:
- ./utils.py
</py-env>

Quelles applications pour le framework Pyscript ?

Pyscript n'est pas encore un projet totalement fini et abouti, malgré toutes les promesses que le framework laisse déjà entrevoir. Il s'agit donc de l'utiliser à ce jour avec parcimonie, et surtout en connaissance de cause. La première impression de Pyscript fait penser aux Jupyter Notebooks dans Anaconda, utilisables dans un navigateur et que l'on peut se partager (notamment via Google Colab). Or, Pyscript évite d'une part l'installation des logiciels (Anaconda, Jupyter...) et des modules Python, et permet d'autre part d'interagir avec les langages Web courants, tout en profitant des bénéfices de Python.

L'objectif du framework est de faciliter l'usage de Python dans un navigateur, mais surtout à terme de pouvoir profiter des nombreux atouts du langage en complément des qualités intrinsèques des langages Web, notamment Javascript. Ainsi, il devient possible de faire interagir des modules Python avec des API Javascript ou Web. Attention toutefois à ne pas se méprendre, Pyscript n'est pas Javascript, et n'interagit donc pas directement avec le DOM, la librairie a juste la capacité à interpréter du Python et à communiquer avec Javascript.

Exemples d'usage du framework Pyscript (Python dans un navigateur web avec HTML)

Si l'idée originelle de Pyodide puis Pyscript a été d'aider les Data Scientists, cela vient du fait que les nombreuses analyses sont parfois difficilement partageables avec des profanes de la programmation. Avec ce framework, tout devient possible et il est alors très simple d'exécuter des analyses en direct, ou tout du moins de restituer des résultats en ligne. C'est une excellente initiative, et si le projet arrive totalement à ses fins, nul doute que Pyscript va marquer son empreinte dans l'avenir des frameworks Web...