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.
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
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:
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)
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.
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:
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:
comme les entrées, le nombre de composants de sortie doit correspondre au nombre de valeurs renvoyées de la fonction de traitement.
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:
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:
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:
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.
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:
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.
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:
Organisez des applications Gradio dans les scripts Python pour un meilleur contrôle de version, collaboration et déploiement.
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.
Utiliser les attributs «info» et «étiqueter» pour donner des instructions et un contexte clairs pour chaque composant.
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.
Utilisez Python-Dotenv pour le développement local et définissez des variables dans les espaces de visage étreintes pour le déploiement.
Valider les entrées, fournir des messages d'erreur clairs et utiliser des blocs d'essai à l'exception pour la gestion gracieuse des erreurs.
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.
Assurer un contraste élevé, fournir du texte alt pour les images et activer la navigation au clavier pour tous les éléments interactifs.
Utilisez des accordéons ou des onglets pour organiser des interfaces complexes, révélant des options avancées au besoin.
Gardez les dépendances à jour, surveillez les bogues et améliorez en continu en fonction des commentaires des utilisateurs.
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.
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.
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.
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:
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
