LG

Ceci est une ancienne révision du document !

Table des matières

pyodide
- Présentation
- Exemple d'application

pyodide

Présentation

C'est tout le code javascript généré depuis le runtime python.

Site github Archive v0.16.1 Documentation

Attention, c'est encore un projet dont la viabilité n'est pas encore sûre.

Exemple d'application

L'archive pyodide contient tous les fichiers javascript (*.js) et webassembly (*.data). On voit que certaines dépendances sont énormes (scipy : 170 Mo) et peuvent clairement être rédhibitoires pour une utilisation en ligne.

Les fichiers javascript de pyodide doivent être chargés via le protocole http:// et non pas via file://. Il faut donc charger le fichier index.html via une adresse de type localhost://.../index.html plutôt que file:///C:/.../index.html. Sous Windows, l'utilisation de WampServer est parfaite pour installer rapidement un serveur apache.

Le principe est simple :

On copie le contenu de l'archive pyodide afin d'elle soit accessible via l'URL : http://localhost/pyodide/pyodide.js. Il faut bien mettre toute l'archive, y compris les fichiers .data.
On initialise le chargement de la librairie :

  <head>
      <script type="text/javascript">
          // set the pyodide files URL (packages.json, pyodide.asm.data etc)
          window.languagePluginUrl = '/pyodide/';
      </script>
      <script src="/pyodide/pyodide.js"></script>
  </head>
  <body>
    <script>
      languagePluginLoader;
    </script>
  </body>

Puis, on charge les paquets systèmes (compilés en webassembly) dont on a besoin, soit juste avec le nom, soit avec son URL complet :

<script>
document.getElementById("demo").innerHTML = "Loading!";
languagePluginLoader.then(() => {
    pyodide.loadPackage(['numpy', 'https://localhost/pyodide/matplotlib.js']);
});
</script>

Enfin, on charge dans le système de fichiers interne au navigateur les modules python. Pour cela, on exécute un programme python qui va créer un fichier contenant le module python (ici : angle.py).

Exemple complet :

index.html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      // set the pyodide files URL (packages.json, pyodide.asm.data etc)
      window.languagePluginUrl = '/pyodide/';
    </script>
    <script src="/pyodide/pyodide.js"></script>
  </head>
  <body>
  <p id="demo"></p>
  <script>
    document.getElementById("demo").innerHTML = "Loading!";
    // Charge le runtime python
    languagePluginLoader.then(() => {
      // Charge les dépendences externes
      pyodide.loadPackage('numpy').then(() => {
        // Récupère le module angle.py
        xmlHttp = new XMLHttpRequest();
        xmlHttp.open( 'GET', '/angle.py', true );
        xmlHttp.overrideMimeType("text/plain"); 
 
        // Enregistre le module dans le système local de fichier du navigateur
        xmlHttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            // On enregistre le contenu du fichier angle.py dans une variable JavaScript
            document.source = this.responseText
            // L'enregistrement du fichier se fait via l'exécution d'un script python
            pyodide.runPython(`
import js
 
import sys
sys.path.insert(0, '.')
 
with open("angle.py", "w") as fd:
    fd.write(js.document.source)
`);
 
            // On peut alors importer le module angle
            pyodide.runPython(`import angle`)
            document.getElementById("demo").innerHTML = "import terminé"
          }
        }
        xmlHttp.send('');
      })
    });
  </script> 
  </body>
</html>