Transformer un bloc-notes Google Colab en une application Web - Avec juste Python

Table of Contents

1. 🌼 Introduction
2. 📚 Prérequis
3. 🖥️ Étape 1 - Créer l'interface utilisateur de l'application
4. 🐍 Étape 2 - Écrire le code Python côté client
5. 🔗 Étape 3 - Connecter l'application au notebook et écrire la fonction de prédiction
6. 🌐 Étape 4 - Déployer l'application en un clic
7. 🌍 Étape 5 - Héberger le modèle en ligne avec Anvil
8. 🎉 Conclusion
9. 🔍 Ressources recommandées
10. ❓ FAQ

🌼 Introduction

Lorsque vous êtes un scientifique des données, il arrive souvent que vous soyez chargé de classer des fleurs d'iris en fonction de leurs mesures. Vous avez déjà écrit du code dans un bloc-notes Google Colab qui résout le problème, mais vous voulez vraiment créer un outil interactif permettant aux utilisateurs de classer eux-mêmes les fleurs d'iris. Avec Amber, vous pouvez créer votre application web entièrement en Python, sans avoir à vous battre avec HTML, CSS, JavaScript ou l'hébergement web. Dans ce tutoriel, vous devrez connaître les bases de Python et savoir comment utiliser les blocs-notes Google Colab. Nous allons créer notre application en cinq étapes. Tout d'abord, nous allons créer l'interface utilisateur de l'application. Ensuite, nous écrirons du code Python côté client pour définir le comportement de l'interface utilisateur. Ensuite, nous connecterons notre application à notre bloc-notes et écrirons une fonction pour prédire l'espèce de l'iris. Ensuite, nous déploierons notre application en deux clics et choisirons une URL. Enfin, nous hébergerons notre modèle en ligne avec Anvil.

📚 Prérequis

Avant de commencer, vous devez connaître les bases de Python et avoir une compréhension de l'utilisation des blocs-notes Google Colab. Assurez-vous d'avoir également un compte Anvil pour suivre ce tutoriel.

🖥️ Étape 1 - Créer l'interface utilisateur de l'application

La première chose dont nous avons besoin est une interface utilisateur pour notre application. Commençons par nous connecter à Amber et créer une nouvelle application vide. Vous pouvez renommer l'application en "Classificateur d'iris". Pour classer l'espèce d'une fleur d'iris, nous devons collecter plusieurs mesures. Concevons l'interface utilisateur pour collecter ces données.

Nous construisons l'interface utilisateur en faisant glisser et déposer des composants de la boîte à outils. Commençons par ajouter une carte dans notre formulaire, cela servira de conteneur pour les autres composants. Ensuite, configurons les composants de libellé et de zone de texte pour que les utilisateurs puissent entrer la longueur du sépale de la fleur qu'ils veulent classer.

Sélectionnez le label que nous venons d'ajouter et dans le panneau de propriétés à droite, changez le texte en "Longueur du sépale". Changez le rôle en "invite de saisie" et dans la section texte, alignez le texte à droite. Ensuite, sélectionnez la zone de texte que nous venons d'ajouter et changez le nom du composant en "longueur_du_sépale". Réglez le texte de l'espace réservé sur "centimètres" et changez l'alignement du texte sur "Centre". Enfin, pour notre zone de texte, changeons son type en "nombre" pour n'autoriser que des nombres à être saisis.

Répétez ce processus en ajoutant des libellés et des zones de texte pour les autres paramètres dont nous avons besoin : largeur_du_sépale, longueur_du_pétale et largeur_du_pétale. Cela permettra de capturer toutes les informations dont nous avons besoin pour classer chaque fleur d'iris.

Ensuite, ajoutons un bouton pour exécuter le classificateur. Faites glisser un composant bouton depuis la boîte à outils en bas de notre carte. Sous le panneau de propriétés, nous changerons son nom en "bouton_classer" et son texte en "Classer". En cliquant sur ce bouton, une fonction Python sera déclenchée pour envoyer les mesures de l'iris à notre bloc-notes Colab. Nous créerons cette fonction à l'étape 2.

Pour finir, ajoutons un libellé où nous afficherons nos résultats. Placez-le en dessous du bouton, donnez-lui le nom "libellé_espèce" et décochez la case "visible". Centrez le texte et changez son rôle en "titre". Plus tard, nous créerons une fonction qui rendra le libellé visible et changera son texte en fonction de la classification renvoyée par notre bloc-notes Google Colab.

Passons à l'étape suivante et écrivons du code Python côté client pour faire réagir le bouton lorsqu'il est cliqué.

🐍 Étape 2 - Écrire le code Python côté client

Sélectionnez le bouton dans le concepteur et, dans le panneau des propriétés à droite, faites défiler jusqu'en bas. Cliquez sur le chevron à côté de la case "événement clic". Cela ouvrira la vue du code et créera une fonction pour nous. À partir de maintenant, chaque fois que le bouton est cliqué par l'utilisateur, cette fonction "bouton_classer_click" sera appelée.

Nous voulons que la fonction "bouton_classer_click" appelle la fonction "prédire_iris" de notre bloc-notes Colab. Nous créerons la fonction "prédire_iris" dans notre bloc-notes à l'étape 3. Nous utiliserons "anvil.server.call" et passerons le nom de la fonction "prédire_iris" en tant que premier argument.

Nous voulons également transmettre les mesures que l'utilisateur a saisies dans notre application web. La fonction "prédire_iris" aura quatre arguments : longueur_du_sépale, largeur_du_sépale, longueur_du_pétale et largeur_du_pétale. Nous les obtiendrons à partir de la propriété "texte" des zones de texte que nous avons ajoutées précédemment.

Enfin, si une catégorie d'iris est renvoyée, nous voulons changer le libellé_espèce pour qu'il soit visible et définir sa propriété sur la catégorie.

Avec notre interface utilisateur construite, connectons notre application à notre bloc-notes et créons la fonction de prédiction.

🔗 Étape 3 - Connecter l'application au notebook et écrire la fonction de prédiction

Pour connecter notre application web à notre bloc-notes, nous utiliserons "Uplink". "Uplink" facilite la connexion de notre application web à du code Python n'importe où sur le web. Sélectionnez l'icône "+" dans le menu latéral et ajoutez "Uplink". Ensuite, sélectionnez "enable server Uplink". Cela nous donnera une clé "Uplink" que nous pourrons utiliser dans notre bloc-notes Google Colab pour nous connecter à cette application.

Maintenant, installons "Uplink" dans notre environnement Colab et connectons notre script en utilisant la clé que nous avons copiée précédemment. Pour simplifier, j'ai créé un bloc-notes qui gère la classification des iris pour nous. Vous pouvez obtenir votre propre exemplaire de ce bloc-notes en suivant le lien dans la description.

Dans le bloc-notes exemple, j'ai écrit du code qui construit et entraîne un modèle de classification très simple à l'Aide de l'ensemble de données intégré des iris de "scikit-learn" et de l'algorithme des k plus proches voisins. Comment cela fonctionne dépasse le cadre de ce tutoriel, mais "Towards Data Science" a un article utile dont j'ai mis le lien dans la description si vous recherchez plus d'informations.

Avec notre bloc-notes ouvert, ajoutons "pip install anvil-uplink" dans la première cellule pour installer "anvil-uplink" dans notre environnement Colab. Ensuite, importons le module "anvil.server.com" et appelons la fonction "anvil.server.connect", en lui passant la clé "Uplink" que nous avons copiée plus tôt.

C'est tout ! Lorsque nous exécutons notre cellule, elle se connecte à notre application web.

Enfin, définissons la fonction "prédire_iris", qui sera appelée lors du clic sur le bouton_classer. Nous devons ajouter le "décorateur annotée" "anvil.server.callable" à la fonction pour qu'elle puisse être appelée depuis notre application. À l'intérieur de la fonction, nous utiliserons "knn.predict" pour obtenir la classification des fleurs d'iris, puis nous renverrons le nom de l'espèce d'iris à partir des données iris que nous avons chargées plus tôt.

Enfin, à la fin de notre bloc-notes, nous appellerons la fonction "await anvil.server.wait_forever". Cela permet de maintenir notre bloc-notes en cours d'exécution plus longtemps afin que notre application puisse appeler des fonctions.

Exécutez le bloc-notes. Vous devriez voir une sortie confirmant que la connexion a été établie.

Maintenant, notre script rapide est connecté, tout ce que nous avons à faire est de publier notre application pour que d'autres puissent l'utiliser. Cliquez sur le bouton "Publier" en haut à droite de l'éditeur, puis sélectionnez "Publier cette application" et utilisez l'URL publique fournie ou entrez votre propre URL.

Voilà, notre modèle est maintenant déployé en ligne pour que tout le monde puisse l'utiliser.

🌐 Étape 4 - Déployer l'application en un clic

Notre application a un dernier problème : les blocs-notes Colab ferment au bout d'un certain temps. Cela signifie que notre modèle ne sera pas disponible 24h/24 et que notre application s'arrêtera de fonctionner.

Il existe deux façons de résoudre ce problème. Premièrement, nous pouvons héberger le modèle sur notre propre ordinateur et connecter notre application au modèle en utilisant "Uplink". Il y a un tutoriel complet lié dans la description qui vous montre comment faire cela gratuitement.

La deuxième solution consiste à déployer notre modèle en ligne avec Anvil. C'est la solution la plus simple pour déployer à la fois notre application et notre modèle. L'hébergement du modèle en ligne nécessite un compte payant. Laissez-moi vous montrer rapidement comment cela fonctionne.

Commençons par retourner dans notre bloc-notes Colab, dans la cellule qui construit et entraîne le modèle de classification des iris. Importons la bibliothèque "joblib" et le module "files" de Google Colab. Ensuite, utilisons "joblib.dump" pour créer un objet représentant notre modèle. Nous nommerons notre objet "knn_sk_model". Ensuite, nous pouvons télécharger l'objet en tant que fichier en utilisant "files.download". Exécutez la cellule pour télécharger le modèle sur votre ordinateur.

Maintenant, revenons à notre application Anvil et ajoutons le service "data files". Sélectionnez l'icône "+" dans le menu latéral et ajoutez "data files". Ici, nous pouvons télécharger notre modèle en tant que fichier, et il sera accessible dans notre code serveur de l'application.

Avec notre modèle téléchargé, nous devons configurer l'environnement du serveur pour inclure tous les packages dont nous avons besoin pour l'exécuter. Commencez par sélectionner l'icône des paramètres dans le menu latéral et ouvrez les "versions Python". Ensuite, dans le menu déroulant des versions Python, sélectionnez "Python 3.10". Sous les "packages de base", sélectionnez "modifier directement requirements.txt". Enfin, collez la liste suivante de packages requise dans la zone de texte. La liste se trouve dans la description de la vidéo. Utilisez une copie.

Avec notre environnement de serveur configuré, il est temps de commencer à utiliser notre modèle. Commençons par ajouter un module serveur à notre application en cliquant sur "ajouter un module serveur" dans le navigateur de l'application.

Dans le haut de notre module serveur, importons la bibliothèque "joblib" dont nous avons besoin pour charger notre modèle, ainsi que "load_iris" du jeu de données intégré de "sklearn". Nous avons fait ces imports dans notre bloc-notes Colab, faisons-les aussi ici. Définissons ensuite la fonction "classer_iris" qui prendra les mesures de la fleur en entrée.

Dans la fonction "classer_iris", nous chargerons notre modèle reconstruit en utilisant "joblib.load". Nous obtiendrons le chemin du fichier du modèle sur le disque en utilisant "data.files['knn_sk_model']". Ensuite, nous retournerons notre classification en utilisant le même code que celui que nous avons utilisé dans notre bloc-notes Colab.

Et voilà ! Si nous visitons l'URL de notre application et que nous saisissons des mesures d'iris, notre application utilisera notre modèle d'apprentissage automatique déployé en ligne avec Anvil.

Anvil est gratuit à utiliser. Rendez-vous sur anvil.works dès aujourd'hui pour commencer. Si vous avez trouvé cette vidéo utile, n'hésitez pas à liker et à vous abonner pour plus de contenu Anvil. Merci de nous avoir regardé !

🎉 Conclusion

Dans ce tutoriel, nous avons appris comment créer une application web pour classer les fleurs d'iris en utilisant Amber et Anvil. Nous avons créé une interface utilisateur avec les mesures requises, connecté notre application à un bloc-notes Colab et déployé notre modèle en ligne avec Anvil. Maintenant, vous pouvez construire votre propre application web pour classifier les fleurs d'iris en utilisant Python !

🔍 Ressources recommandées

• Article Towards Data Science sur les k plus proches voisins

❓ FAQ

1. Q : Quelles sont les compétences requises pour suivre ce tutoriel ?

   • R : Vous devez connaître les bases de Python et savoir comment utiliser les blocs-notes Google Colab.

2. Q : Est-ce que Anvil est gratuit à utiliser ?

   • R : Oui, Anvil est gratuit à utiliser.

3. Q : Puis-je héberger le modèle sur mon propre ordinateur au lieu de l'héberger en ligne avec Anvil ?

   • R : Oui, vous pouvez héberger le modèle sur votre propre ordinateur et le connecter à votre application en utilisant "Uplink". Un tutoriel est lié dans la description pour vous montrer comment faire cela gratuitement.

4. Q : Est-ce que mes utilisateurs peuvent accéder à mon application en permanence ?

   • R : Cela dépend de la méthode de déploiement que vous choisissez. Les blocs-notes Colab se ferment au bout d'un certain temps, tandis qu'Anvil offre un hébergement en ligne qui vous permet de rendre votre application disponible en permanence.

5. Q : Puis-je personnaliser davantage l'interface utilisateur de mon application ?

   • R : Oui, avec Anvil, vous pouvez personnaliser l'interface utilisateur de votre application en utilisant HTML, CSS et JavaScript si vous le souhaitez.

6. Q : Puis-je utiliser ce tutoriel pour classer d'autres types de fleurs au lieu des iris ?

   • R : Oui, vous pouvez utiliser ce tutoriel comme point de départ pour classer d'autres types de fleurs. Il vous suffit de modifier les paramètres et d'adapter le modèle en conséquence.

7. Q : Y a-t-il des ressources supplémentaires sur l'apprentissage automatique que je peux consulter ?

   • R : Oui, il existe de nombreux cours en ligne, tutoriels et articles de blog sur l'apprentissage automatique. Certains sites populaires pour apprendre l'apprentissage automatique sont Coursera, Udemy et Kaggle.

8. Q : Comment puis-je mettre à jour mon modèle une fois qu'il est déployé en ligne avec Anvil ?

   • R : Pour mettre à jour votre modèle déployé en ligne avec Anvil, vous pouvez simplement téléverser une nouvelle version de votre modèle à travers le service "data files".