Construire des interfaces utilisateur pour les applications AI avec Gradio en Python

L'utilité des modèles d'IA d'aujourd'hui est considérablement diminuée sans interfaces utilisateur accessibles. En utilisant Gradio, une bibliothèque d'interface utilisateur Python open source, vous pouvez combler cet écart entre les LLM et les utilisateurs finaux non techniques. Il vous permet de créer des prototypes rapides pour vos projets d'IA et de simplifier leur déploiement à un public plus large.

Ce didacticiel s'adresse aux ingénieurs d'apprentissage automatique qui n'ont généralement aucune expérience de développement Web. Il couvre les bases de Gradio et les concepts de base, la création d'interface pour divers types de modèles d'IA, les fonctionnalités avancées pour UX et l'interactivité, et le déploiement et le partage des meilleures pratiques.

Commençons.

Début avec Gradio

Installation

Nous allons commencer par la création d'un environnement virtuel (de préférence conda):

$ conda create -n gradio_tutorial python=3.9 -y
$ conda activate gradio_tutorial

Ensuite, vous pouvez utiliser PIP pour installer Gradio et ses dépendances:

$ pip install gradio ipykernel

Nous avons également installé le package IPYKERNEL afin que nous puissions afficher les interfaces Gradio directement dans Jupyter Notebooks. Ce processus vous oblige à ajouter l'environnement virtuel que vous avez créé en tant que noyau à Jupyter Lab. Voici la commande pour le faire:

$ ipython kernel install --user --name=gradio_tutorial
$ jupyter lab  # Start the lab

Cela devrait vous permettre de créer un ordinateur portable avec un noyau qui a installé Gradio. Pour vérifier, importez-le sous son alias standard et imprimez sa version:

import gradio as gr
print(gr.__version__)
4.37.1

Concepts de base et terminologie

Nous plongerons dans Gradio en apprenant ses concepts clés et sa terminologie à travers un exemple de «Hello World»:

def greet(name):
   return f"Hello, {name}!"
demo = gr.Interface(
   fn=greet,
   inputs=['text'],
   outputs="text",
)
demo.launch()

Lorsque vous exécutez le code ci-dessus dans une cellule, la sortie sera une petite interface interactive qui renvoie un message de salutation personnalisé:

Gradio tourne autour de quelques concepts clés:

1. Interface : la classe de base pour créer des internes.
2. Composants : éléments d'entrée et de sortie comme les zones de texte, les images et l'audio. Il y a plus de 30 composants intégrés pour l'instant.
3. Fonctions : Python fonctionne qui traite les informations des composants d'entrée et renvoie les résultats à afficher avec les composants de sortie.
4. Lancement : La méthode pour démarrer votre application Gradio.

ci-dessus, nous avons créé une fonction de voeux qui prend et renvoie une entrée de texte. Pour cette raison, les composants d'entrée et de sortie sont spécifiés sous forme de texte à l'intérieur de la classe d'interface.

En fin de compte, nous appelons la méthode de lancement, qui démarre un serveur local. Pour rendre l'interface utilisateur à la disposition de n'importe qui, vous pouvez définir le paramètre de partage sur true. Cela lancera un tunnel SSH et déploiera l'application Gradio sur une page Web publiquement partageable:

demo.launch(share=True)
Running on public URL: https://d638ed5f2ce0044296.gradio.live
This share link expires in 72 hours. For free permanent hosting and GPU upgrades, run gradio deploy from Terminal to deploy to Spaces (https://huggingface.co/spaces)

Composants Gradio

Vous passerez la plupart de votre temps à bricoler dans différents composants et comment les placer sur la page tout en créant des applications Gradio. Alors, examinons de plus près ce que vous avez à votre disposition.

Composants d'entrée et de sortie

Gradio propose un large éventail de composants pour la construction d'interfaces interactives. Ces composants sont généralement divisés en deux catégories: entrée et sortie.

Les composants d'entrée permettent aux utilisateurs de fournir des données au processeur sous-jacent (cela peut être n'importe quelle fonction Python). Certaines entrées courantes sont:

• TextBox
• Image
• Audio
• curseur
• Dropdown

Voici une interface factice qui utilise certains des composants ci-dessus:

$ conda create -n gradio_tutorial python=3.9 -y
$ conda activate gradio_tutorial

Dans cet exemple, la fonction process_inputs nécessite cinq paramètres. Par conséquent, nous devons créer cinq composants d'entrée et les transmettre aux entrées. Bien que le nombre de composants d'entrée doit correspondre au nombre de paramètres de fonction requis, ce n'est pas une règle stricte. Pour éviter les erreurs et les avertissements, définissez des valeurs par défaut pour les paramètres qui ne nécessitent pas d'entrée utilisateur de l'interface utilisateur.

Remarquez comment nous utilisons une classe TextBox pour spécifier le composant d'entrée au lieu d'un texte de chaîne ordinaire comme le premier exemple. Il est toujours recommandé d'utiliser des classes dédiées pour spécifier les composants d'entrée et de sortie pour les rendre personnalisables. Par exemple, toutes les classes de composants ont un attribut d'étiquette utile, tandis que Slider et Dropdown ont des arguments pour spécifier la plage et les options disponibles.

De nombreux composants d'entrée peuvent également être utilisés pour afficher la sortie. Voici quelques scénarios courants:

• Étiquette: pour afficher des résultats de texte ou de classification
• Image: pour afficher des images traitées ou générées
• Audio: pour la lecture audio traitée ou générée
• Plot: pour afficher des graphiques ou des graphiques

comme les entrées, le nombre de composants de sortie doit correspondre au nombre de valeurs renvoyées de la fonction de traitement.

Personnalisation de l'apparence des composants

Gradio vous permet de personnaliser l'apparence de vos composants en fonction de vos besoins. Voici un exemple qui utilise des zones de texte personnalisées:

$ pip install gradio ipykernel

Dans cet exemple, nous avons personnalisé les composants de la zone de texte en spécifiant le nombre de lignes, en ajoutant un espace réservé et un texte d'informations, et en incluant un bouton de copie pour la sortie.

Expérimentez avec différents composants et leurs propriétés pour créer des interfaces qui conviennent le mieux aux exigences de votre application AI. Pour savoir quel type de propriétés vous pouvez changer pour votre composant, vous pouvez visiter ses documents, ou mieux encore, utiliser le? Opérande dans Jupyter Lab après son nom de classe:

Interfaces de construction pour LLMS

Mettons tout ce que nous avons appris ensemble en créant deux interfaces de texte et d'image réelles qui sont alimentées par LLMS.

Tout d'abord, nous construire un traducteur de langue de l'anglais au turc, à l'espagnol ou au chinois:

$ conda create -n gradio_tutorial python=3.9 -y
$ conda activate gradio_tutorial

Initialement, nous définissons une fonction Translate_text. Dans son corps, nous définissons la clé API OpenAI et créons une carte de langue. Ensuite, nous construisons l'invite pour la traduction. Ensuite, à l'intérieur d'un bloc d'essai à l'exception, nous envoyons une demande au point de terminaison ChatCompletion avec une invite système. En fin de compte, nous retournons le premier choix.

Maintenant, nous pouvons construire l'interface:

$ pip install gradio ipykernel

Le code est simple, comme ceux des interfaces antérieures, mais nous introduisons quelques nouvelles propriétés:

• Type Argument des zones de texte Modifiez le champ de saisie de texte en clair vers la saisie du mot de passe, cachant le texte.
• Les arguments de titre et de description de la classe d'interface ajoutent un titre H1 et un sous-titre au centre supérieur de la page.

Voici le résultat:

Vous vous demandez peut-être pourquoi nous demandons la clé de l'API de l'utilisateur dans le cadre de l'application plutôt que de le fournir nous-mêmes. La raison a à voir avec la façon dont Gradio déploie les internes.

Si nous fournissons notre propre clé API en tant que variable d'environnement (qui est une pratique standard), la version publiquement partageable de l'application ne fonctionnerait pas car elle n'aurait pas accès à nos variables d'environnement. Dans la section de déploiement, nous verrons comment résoudre ce problème en déploiement de nos applications dans des espaces HuggingFace.

Créons-nous une autre interface utilisateur pour générer des images:

$ ipython kernel install --user --name=gradio_tutorial
$ jupyter lab  # Start the lab

Nous créons une fonction nommée generate_surrealist_art qui envoie une demande à Dall-E-3 et renvoie l'URL d'image générée à l'aide d'une invite surréaliste. Ensuite, nous allons alimenter cette fonction dans une classe d'interface:

import gradio as gr
print(gr.__version__)
4.37.1

Nous spécifions deux entrées pour la clé API et le concept que nous voulons capturer dans une image surréaliste. Ensuite, nous créons un composant de sortie pour l'image générée avec la classe d'image. Si vous définissez son argument de valeur sur STR, le composant peut télécharger et afficher des images à partir d'URL, ce qui est exactement ce dont nous avons besoin.

Et voici le résultat:

Interfaces de construction pour les modèles ML classiques

Maintenant, créons une interface pour un modèle de régression tabulaire classique. Nous utiliserons l'ensemble de données Diamonds, qui est disponible dans SeaBorn.

Commencez par créer un nouveau répertoire de travail et un nouveau script nommé App.py à l'intérieur. Ensuite, collez le code de ce Github Gist qui charge les données, le traite à l'aide d'un pipeline Scikit-Learn et forme un modèle de régression aléatoire.

L'étape suivante consiste à créer une fonction de traitement qui accepte le même nombre d'entrées qu'il existe des fonctionnalités dans l'ensemble de données Diamonds:

$ conda create -n gradio_tutorial python=3.9 -y
$ conda activate gradio_tutorial

La fonction convertit ces entrées en un dataframe et la transmet à la méthode .prect () du pipeline de modèle formé. En fin de compte, il renvoie une chaîne avec le prix prévu.

Maintenant, la classe d'interface doit correspondre à la signature de cette fonction: neuf composants d'entrée pour le traitement des fonctionnalités et une sortie pour afficher le prix prévu:

$ pip install gradio ipykernel

À l'intérieur de la classe, nous créons trois listes déroulantes pour les fonctionnalités catégorielles. Les options sont remplies des catégories uniques de chaque fonctionnalité. Nous créons également six composants de curseur pour accepter les fonctionnalités numériques. Les plages de curseurs sont déterminées par les valeurs minimales et maximales de chaque fonctionnalité.

Tout ce que nous avons à faire maintenant est d'exécuter le script pour exécuter et déployer l'application:

$ ipython kernel install --user --name=gradio_tutorial
$ jupyter lab  # Start the lab

Voici le résultat:

Pour les meilleures pratiques et les conseils d'optimisation, passez à la section des meilleures pratiques ci-dessous.

Déploiement des applications Gradio

Nous avons déjà vu à quel point il est facile de déployer des applications Gradio en activant un seul argument. Bien sûr, l'inconvénient de cette méthode est que les démos expirent dans les 72 heures. Ainsi, la méthode recommandée de déploiement de Gradio passe par des espaces de câlins. Huggingface a acquis Gradio en 2021, ce qui rend l'intégration entre les deux plates-formes sans couture.

Ainsi, pour ce tutoriel ou toutes les futures applications que vous créez avec Gradio, inscrivez-vous à un compte gratuit sur HuggingFace.co et naviguez vers Settings & GT; Jetons pour générer un jeton d'accès:

Le jeton n'est affiché qu'une seule fois, alors assurez-vous de le stocker dans un endroit sûr.

Avec ce jeton, vous pouvez déployer autant d'applications Gradio que vous le souhaitez avec l'hébergement permanent sur les espaces. Par exemple, nous déploierons le modèle de prédiction des prix du diamant de la section précédente, et vous le trouverez étonnamment facile.

Tout ce que vous avez à faire est de naviguer vers le répertoire avec le script d'interface utilisateur et d'appeler Gradio Deploy sur le terminal:

Le terminal vous guide à travers la conversion de votre script en un espace fonctionnel de la surface. Il demande des détails tels que:

• Le jeton d'accès que vous avez généré
• Titre de l'espace: Cela fera partie de l'URL de l'espace après le déploiement
• le nom du script contenant du code d'interface utilisateur Gradio (app.py par défaut)
• matériel de l'espace; Laissez vide pour utiliser uniquement les processeurs (gratuit)
• Toutes les variables d'environnement que le script utilise (c'est là que vous stockez en toute sécurité les touches API et les secrets d'utilisateur)
• Dépendances - Entrez une par une en appuyant sur Entrée

et le terminal vous présente une liaison d'espace déployée. Voici à quoi il ressemble:

Une autre grande chose à propos de cette méthode de déploiement est que Gradio convertit automatiquement la démo en API REST de travail. Les instructions pour accéder et interroger sont toujours situées en bas:

Donc, en une seule fois, vous avez à la fois l'hébergement interne permanent pour votre application pour les utilisateurs non techniques et une API REST pour vos collègues et amis développeurs.

Pour plus d'options de déploiement et de partage, telles que l'intégration de démos dans les pages Web, l'ajout d'authentification Google aux applications, etc., visitez la section "Partage de votre application" de la documentation de Gradio.

Gradio meilleures pratiques et conseils

Lors du développement d'interfaces utilisateur avec Gradio, suivre les meilleures pratiques peut considérablement améliorer l'expérience utilisateur et la maintenabilité de votre application. Voici quelques recommandations clés:

1. Utilisez des scripts pour l'organisation et la maintenabilité

Organisez des applications Gradio dans les scripts Python pour un meilleur contrôle de version, collaboration et déploiement.

2. Optimiser l'allocation de l'espace pour les composants

Utilisez des outils de dimensionnement et de mise en page appropriés (par exemple, Gr.Column (), Gr.Row ()) pour assurer une interface équilibrée et réactive.

3. Fournir des informations complètes

Utiliser les attributs «info» et «étiqueter» pour donner des instructions et un contexte clairs pour chaque composant.

4. Gérer efficacement les ensembles de fonctionnalités

Pour les modèles avec de nombreuses fonctionnalités, utilisez des entrées de fichiers (CSV, JSON) pour activer les prévisions par lots et simplifier l'interface.

5. Gérer correctement les variables d'environnement

Utilisez Python-Dotenv pour le développement local et définissez des variables dans les espaces de visage étreintes pour le déploiement.

6. Implémenter la gestion des erreurs et la validation

Valider les entrées, fournir des messages d'erreur clairs et utiliser des blocs d'essai à l'exception pour la gestion gracieuse des erreurs.

7. Optimiser les performances

Implémentez la mise en cache, le chargement paresseux pour les grands modèles et utilisez Gr.loadingStatus () pour les tâches de longue durée.

8. Conception de l'accessibilité

Assurer un contraste élevé, fournir du texte alt pour les images et activer la navigation au clavier pour tous les éléments interactifs.

9. Mettre en œuvre une divulgation progressive

Utilisez des accordéons ou des onglets pour organiser des interfaces complexes, révélant des options avancées au besoin.

10. Mettre à jour et maintenir régulièrement

Gardez les dépendances à jour, surveillez les bogues et améliorez en continu en fonction des commentaires des utilisateurs.

11. Levier HuggingFace Resources

Utiliser les outils et les ressources de HuggingFace pour une intégration transparente avec Gradio, y compris les référentiels de modèles et les ensembles de données.

12. Hôte des grands modèles sur HuggingFace Hub

Pour les grands modèles tabulaires, téléchargez sur HuggingFace Hub et chargez directement dans votre script Gradio pour améliorer les performances et réduire les exigences de stockage locales.

13. Utilisez des ensembles de données HuggingFace

Pour les grands ensembles de données, téléchargez sur HuggingFace Hub et accédez-les directement dans votre application Gradio pour rationaliser la gestion des données et améliorer les temps de chargement.

Conclusion et ressources supplémentaires

Dans cet article, nous avons appris les bases de la construction d'interfaces utilisateur pour les applications AI en utilisant Gradio. Nous venons de plonger sous la surface car Gradio offre de nombreuses autres fonctionnalités pour construire des interfaces complexes. Par exemple, l'état d'interface permet à votre application de se souvenir des sorties d'un appel de fonction à un autre. Les interfaces réactives changent dynamiquement l'interface utilisateur dès que l'entrée utilisateur change. Avec des blocs, vous pouvez créer des applications avec des mises en page et des conceptions personnalisées.

De même, consultez ces ressources connexes pour plus de contenu:

• 10 packages Python pour ajouter à votre pile de science des données
• 7 outils d'IA génératifs essentiels pour construire des applications IA hors de propos
• 5 projets que vous pouvez construire avec les modèles Gen AI
• CI / CD pour le cours d'apprentissage automatique

Topicsartificial IntelligenceShon

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!