Présentation des composants Streamlit – DZone Web Dev


Au cours des dix mois qui ont suivi la sortie de Streamlit, la communauté a créé plus de 250000 applications pour tout, de analyse des matchs de football à mesurer les organoïdes, et de Suivi COVID-19 à classification des sujets à coup sûr. Inspirés par votre créativité, nous avons ajouté téléchargeurs de fichiers, sélecteurs de couleurs, plages de dates, et d’autres fonctionnalités. Mais à mesure que la complexité du service à la communauté augmentait, nous avons réalisé que nous avions besoin d’un moyen plus évolutif pour développer les fonctionnalités de Streamlit. Nous nous tournons donc vers la meilleure source d’idées de Streamlit: vous!

Aujourd’hui, nous sommes ravis d’annoncer Composants Streamlit, le point culminant d’un projet de plusieurs mois pour permettre à la communauté Streamlit de créer et de partager des fonctionnalités. À partir de la version 0.63 de Streamlit, vous pouvez accéder aux écosystèmes de composants de React, Vue et d’autres frameworks. Créez de nouveaux widgets avec des styles et des comportements personnalisés ou ajoutez de nouvelles visualisations et types de graphiques. Les possibilités sont infinies!

La galerie des composants Streamlit

La première chose à faire est de consulter le Galerie de composants Streamlit pour voir ce que les autres ont créé et partagé.

Chaque composant peut être installé avec une seule ligne de code:

Si vous ne trouvez pas un composant qui vous convient, vous pouvez créer le vôtre!

Construire vos propres composants

Streamlit a un style unique et fonctionnel qui vous permet de créer des expériences riches et interactives en très peu de lignes de code. Par exemple, voyons cette application Streamlit simple:


En regardant ce code, vous pouvez voir que les appels Streamlit sont disponibles en deux versions: composants statiques comme st.markdown sont sans état et n’envoient que des données à le navigateur, alors que composants bidirectionnels comme st.slider avoir un état interne et envoyer des données revenant de le navigateur.

Notre défi était de fournir une API qui embrasse le style fonctionnel de Streamlit tout en capturant ces cas d’utilisation aussi simplement que possible. Il y a quelques mois, deux incroyables ingénieurs Streamlit, Tim Conkling et Henrikh Kantuni, ont relevé ce défi et ont proposé une solution très élégante. Le résultat est le nouveau streamlit.components.v1 package qui comprend trois fonctions. Pour les composants statiques, nous avons ajouté:

  • html(...), qui vous permet de créer des composants à partir de HTML, Javascript et CSS
  • iframe(...) , qui vous permet d’intégrer des sites Web externes

Pour les composants bidirectionnels, nous avons ajouté:

  • declare_component(...), qui vous permet de créer des widgets interactifs qui communiquent de manière bidirectionnelle entre Streamlit et le navigateur.

Voyons comment cela fonctionne!

Commençons par un simple composant statique pour intégrer des extraits de code appelés Github gists dans votre application. Idéalement, l’ajout du composant ne devrait être qu’un seul appel de fonction:

ce qui rendrait l’essentiel comme ceci:

Essentiel

Pour créer un tel composant, nous commençons par importer la bibliothèque Streamlit Components:

Cette déclaration d’importation quelque peu verbeuse a deux objectifs:

  1. Il met à jour l’API des composants afin que les modifications futures n’interrompent pas les composants existants.
  2. Cela nous rappelle que nous commençons à utiliser la magie profonde que nous devrions cacher à l’utilisateur.

Utilisons maintenant le html(...) méthode pour servir l’essentiel:

Cette approche a quelques propriétés impressionnantes. Tout d’abord, c’est vraiment simple et fonctionnel. En fait, ce modèle vous permet de masquer le HTML laid et de l’envelopper dans un joli appel de fonction Pythonic,
github_gist(...). Vous pouvez encapsuler du code dans une fonction et le réutiliser tout au long de votre projet. (Mieux encore, mettez-le dans un package et partagez-le avec la communauté dans la galerie.) Deuxièmement, notez que nous pouvons ajouter du HTML arbitraire dans ce composant –
divs,
spans, et oui,
scripts! Nous pouvons le faire en toute sécurité car le composant est mis en bac à sable dans un
iframe ce qui nous permet d’inclure des scripts externes sans nous soucier des problèmes de sécurité.

Obtenir un widget avec!

Et si vous souhaitez créer un état composant bidirectionnel qui renvoie des informations à Python depuis le navigateur, ou en d’autres termes, un widget? Vous pouvez le faire aussi! Par exemple, créons un composant de compteur:

ce qui crée ceci:

Contre-composant

Notez que ce code suit le style fonctionnel unique de Streamlit et capture le compteur Etat intégré dans le composant. Comment y sommes-nous parvenus? Heureusement, un seul appel de fonction, declare_component, fait tout le travail pour permettre la communication bidirectionnelle avec Streamlit.

Agréable! Sous la capuche, BUILD_PATH pointe vers un composant construit à l’aide de React, Vue ou de toute technologie frontale de votre choix. Pour cet exemple, nous avons décidé d’utiliser React et Typescript en nous donnant cette fonction de rendu:

et ce rappel:


Donezo! Vous avez maintenant créé un composant simple et avec état qui “ressemble à React” sur le site Web et “ressemble à Streamlit” du côté Python. Les informations sont renvoyées à Python en utilisant
Streamlit.setComponentValue(...). Comme nous utilisons React dans ce cas, l’état du composant est stocké dans
this.state. Pour plus de détails sur cet exemple, consultez notre
modèle de composant.

Un avantage appréciable de cette architecture est que vous n’êtes pas limité à React. Vous pouvez utiliser n’importe quel langage ou framework qui compile pour le Web. Voici le même composant de compteur écrit en ClojureScript.

Une autre fonctionnalité intéressante de cette API est que vous pouvez effectuer un rechargement à chaud lorsque vous développez votre composant comme ceci:

Ici le url paramètre vous permet de spécifier un serveur de développement pour le composant créé avec npm run start.

Ce que nous vous avons montré jusqu’à présent ne fait qu’effleurer la surface. Pour plus de détails, veuillez consulter notre documentation.

Partager avec le monde

Avez-vous créé quelque chose de très utile pour la communauté Streamlit? Bien sûr, vous pourriez garder ce super pouvoir pour vous-même, mais ce serait encore plus cool de le partager! Obtenez les commentaires et les éloges de la communauté. Vous pouvez facilement envelopper votre composant dans un package PyPi et soumettez-le à notre galerie en suivant ces instructions.

Essayez-le et dites-nous ce que vous en pensez!

Nous sommes ravis de débloquer pour la communauté une nouvelle façon de plug-and-play dans Streamlit. Les composants Streamlit vous permettent d’écrire des extensions HTML simples ou d’exploiter tout l’écosystème fourni par React, Vue et d’autres frameworks. Vos commentaires stimulent l’innovation dans Streamlit. Veuillez nous dire ce que vous en pensez et ce que vous aimeriez ensuite. Montrez vos nouveaux composants brillants et partagez-les avec le monde entier. Nous avons hâte de voir ce que vous construisez!

Close Menu