Streamlit + stlite : du navigateur au bureau dans un environnement Python avec WASM

En tant que développeurs, nous nous retrouvons parfois dans des situations délicates où les clients ont besoin d’outils d’analyse de données, mais ne sont pas très enthousiastes à l’idée de procéder à des configurations complexes ou d’utiliser des solutions basées dans le Cloud. Qu’il s’agisse du propriétaire d’une petite entreprise qui souhaite garder toutes ses ressources hors ligne, ou du client qui a tout simplement besoin d’informations rapides sans avoir à passer par toutes sortes d’étapes, le recours à une application légère et facile à partager peut faire toute la différence.
Aujourd’hui, nous allons voir comment créer une application Web d’analyse de données relativement simple en utilisant « stlite », un outil astucieux qui vous permet d’exécuter les applications Streamlit directement dans le navigateur ou de les packager en tant qu’applications de bureau avec « stlite/desktop ». Nous utiliserons un ensemble de données financières fictives pour que l’exemple soit intéressant et nous les visualiserons à l’aide de quelques graphiques de base.
Pourquoi stlite ?
Pour commencer, expliquons pourquoi l’outil stlite est si utile. Généralement, l’exécution d’applications Streamlit nécessite la mise en place d’un environnement Python sur un serveur ou une machine locale. Or, avec stlite, tout cela est possible directement dans le navigateur, grâce à WebAssembly. De plus, avec stlite/desktop, vous pouvez packager ces applications en applications de bureau autonomes. Ainsi, que votre client recherche un outil basé sur le Web ou qu’il tienne absolument à utiliser un outil hors ligne, vous pouvez répondre à ses besoins.
Imaginez qu’un client souhaite absolument garder ses ressources hors ligne ou qu’il ait besoin d’une application Web rapide et partageable pour un usage interne. Stlite vous donne la possibilité de répondre à ces deux besoins avec un minimum d’effort.
Création de l’application Web d’analyse des données
Étape 1 : Préparation de l’ensemble de données
Pour cet exemple, nous utiliserons un ensemble de données financières fictives représentant les cours des actions de plusieurs entreprises sur une période donnée. Voici comment vous pouvez utiliser cet ensemble de données dans votre code :
Nous disposons ainsi d’un ensemble de données propre et agréable à manipuler. Passons maintenant à l’affichage de quelques statistiques.
Étape 2 : affichage du récapitulatif des statistiques
Streamlit facilite grandement l’affichage des données et des statistiques. Nous allons utiliser « DataFrame.describe() » pour obtenir un récapitulatif rapide de l’ensemble de données.
Et voilà ! En quelques lignes seulement, nous avons accès à nos données et à quelques statistiques de base.
Étape 3 : visualisation des données
Une application d’analyse de données sans élément visuel n’est pas très pertinente, n’est-ce pas ? Utilisons « matplotlib » pour créer quelques graphiques présentant l’évolution du cours des actions dans le temps et leur répartition.
Étape 4 : déploiement de l’application avec stlite
Maintenant que l’application est prête, découvrons comment l’exécuter dans le navigateur ou en tant qu’application de bureau.
Exécution dans le navigateur avec « stlite »
- Installation de stlite : si, à ce stade, vous vous demandez encore comment l’installer, c’est que vous n’avez pas suivi ! Aucune installation n’est nécessaire. Il suffit de créer un fichier html pour exécuter l’application.
Pour notre petite application, nous pouvons utiliser ce fichier « index.html » en guise de référence :
Comme vous pouvez le voir, j’ai réutilisé le code python de l’application directement dans le fichier html. Je n’ai pas réussi à importer le fichier, donc j’ai copié le contenu, mais faites-moi savoir si vous y arrivez de votre côté ! D’ailleurs, vous n’avez pas besoin de nommer vos fichiers comme je viens de le faire. Vous pouvez toutefois prévoir un peu de temps pour cela si vous souhaitez le faire.
- Exécution de l’application : chargez votre application streamlit en utilisant « stlite » ; elle s’exécutera alors directement dans le navigateur. En d’autres termes, il vous suffit de copier le fichier « index.html » ci-dessus et de l’ouvrir. Vous pouvez également la partager telle quelle. C’est l’idéal quand vous ne voulez pas avoir à gérer la partie côté serveur.
Créer une application de bureau avec « stlite/desktop »
Je vous conseille fortement d’utiliser yarn pour installer les outils nécessaires. npm m’a fait perdre beaucoup de temps inutilement, alors que je n’ai rencontré aucun problème avec yarn. Néanmoins, je vais vous fournir quelques commandes ci-dessous pour les deux outils.
1. Création du package .json : il contiendra les exigences relatives à l’application. Pour cette application, j’ai utilisé ces lignes de code :
Ce code comporte une section « stlite », dans laquelle nous pouvons configurer l’application. Pour plus de détails, veuillez consulter la documentation d’origine.
2. Roulement de tambour final : en gros, voici les quelques commandes que nous allons devoir exécuter :
- « `yarn install« ` ou « `npm install« ` è Nous devons installer les dépendances à partir du fichier package.json ci-dessus.
- « `yarn dump « ` ou « `npm run dump« ` è Cette commande crée un répertoire build qui contient les fichiers de l’application Streamlit copiés, les packages installés, le moteur d’exécution Pyodide, les fichiers de l’application Electron, etc.
- « `yarn serve« ` ou « `npm run serve« ` è Pour obtenir un aperçu de votre application avant de développer l’exécutable.
- « `yarn dist« ` ou « `npm run dist« ` è Dernière étape pour terminer la création du package de l’application dans un répertoire dist.
Résultat : vous disposez d’une application de bureau autonome, idéale à partager avec les clients qui préfèrent garder leurs ressources hors ligne.
Comme quelques images valent mieux qu’un long discours, voyons ce à quoi cela ressemble.
Lors de la toute première exécution, une fenêtre d’installation s’affiche :

Et voici le rendu final :

Dépannage
Il se peut que vous rencontriez un problème lors de la création du package de l’application de bureau. Assurez-vous que le mode développeur est bien activé si vous exécutez les commandes sur une machine Windows.

Passage de flambeau
Et voilà ! Nous avons développé une application Web d’analyse de données simple mais efficace en utilisant stlite.
Que votre client ait besoin d’un outil en ligne rapide ou d’une application de bureau robuste, stlite offre une solution à la fois flexible et légère. C’est le moyen idéal de présenter des informations sans se noyer dans des déploiements complexes.
Alors à vous de jouer : épatez vos clients en développant une puissante application facile à utiliser qui répond à leurs besoins, qu’ils travaillent en ligne ou non.
Liens utiles
