Comment créer un générateur d'images dans React à l'aide de l'API DALL-E

L'intelligence artificielle s'améliore continuellement et peut désormais créer des images étonnantes. Un exemple viral récent dépeint les individus les plus riches et les plus influents du monde vêtus de vêtements déchirés, vivant dans un environnement de bidonville. Ce qui est impressionnant dans les images, c'est le haut niveau de détail capturé à la fois sur les personnes et sur leur environnement.

Des modèles de langage tels que DALL-E et Midjourney alimentent ces capacités de génération d'images, en prenant des descriptions textuelles en entrée et en générant des images captivantes.

Apprenez à intégrer l'API DALL-E d'OpenAI pour générer des images dans une application React.

Génération d'images à l'aide du modèle de langage DALL-E d'OpenAI

Comment le modèle de langage DALL-E génère-t-il réellement des images? Sans creuser trop profondément dans les complexités de la génération d'images IA, DALL-E interprète d'abord les descriptions textuelles qui lui sont fournies comme des entrées à l'aide du traitement du langage naturel (NLP). Il rend ensuite une image réaliste qui correspond étroitement à la description donnée.

Les invites de saisie peuvent inclure des descriptions textuelles d'une personne, d'un objet ou d'une scène. En outre, il peut également inclure des détails tels qu'une couleur, une forme et une taille particulières. Indépendamment de la complexité ou de la simplicité du texte d'entrée, DALL-E générera une image qui correspond étroitement à la description d'entrée.

Il est important de noter que le modèle de langage, tout comme les autres modèles, a été formé sur un grand ensemble de données avec des millions de données d'image pour apprendre à identifier et à générer des images photoréalistes à partir de données contributions.

Premiers pas avec l'API DALL-E d'OpenAI

L'API DALL-E d'OpenAI est disponible pour une utilisation en version bêta publique. Pour intégrer l'API à utiliser dans votre application React, vous aurez besoin d'une clé pour l'API d'OpenAI. Dirigez-vous vers OpenAIet connectez-vous à la page de présentation de votre compte pour récupérer votre clé API.

Une fois connecté, cliquez sur l'icône de profil d'utilisateur dans la section supérieure droite de votre page de présentation. Ensuite, sélectionnez et cliquez sur Afficher les clés API.

Sur la page des paramètres des clés API, cliquez sur le Créer une nouvelle clé secrète, indiquez un nom pour votre clé API et cliquez sur Créer une clé secrète pour générer votre clé API.

Créer un projet React

Exécutez les commandes ci-dessous sur votre terminal pour créer un nouveau projet React localement. Notez que Node.js doit être installé.

Reportez-vous à ces deux articles pour savoir comment installer Node.js sur Windows et comment installer Node.js sur Ubuntu.

Projet mkdir React 
cd React-projet
npx créer-réagir-application image-générateur-application
cd image-generator-app
début npm

Alternativement, au lieu d'utiliser la commande create-react-app, vous pouvez utiliser Vite pour monter votre projet React. Vite est un outil de création conçu pour créer des applications Web rapidement et efficacement.

Intégrez l'API DALL-E d'OpenAI pour générer des images

Une fois que votre application React est opérationnelle, installez la bibliothèque Node.js d'OpenAI pour l'utiliser dans vos applications React.

npm installer openai

Ensuite, dans le répertoire racine de votre dossier de projet, créez un nouveau .env fichier pour contenir votre clé API.

REACT_APP_OPENAI_API_KEY = "CLÉ API"

Vous pouvez trouver le code de ce projet dans ce Référentiel GitHub.

Créer un composant de générateur d'images

Dans le /src répertoire, créez un nouveau dossier, nommez-le Composants, et créez un nouveau fichier à l'intérieur nommé ImageGenerator.js. Ajoutez le code ci-dessous à ce fichier.

Commencez par importer les modules requis :

importer'../App.css'; 
importer { useState } depuis"réagir"; 
importer {Configuration, OpenAIApi} depuis"ouvert";

Le module de configuration configure le client API d'OpenAI pour son utilisation, tandis que le module OpenAIApi fournit des méthodes pour interagir avec l'API d'OpenAI. Ces deux modules permettent d'accéder et d'utiliser les fonctionnalités de DALL-E depuis l'application React.

Ensuite, définissez un composant fonctionnel et ajoutez-y le code suivant :

fonctionGénérateur d'images() {
constante [invite, setPrompt] = useState("");
constante [result, setResult] = useState("");
constante [chargement, setLoading] = useState(FAUX);
constante [placeholder, setPlaceholder] = useState(
"Recherche d'un lion avec des pinceaux peignant la peinture de mona lisa..."
 );
constante configurer = nouveau Configuration({
 apiKey: processus.env. REACT_APP_OPENAI_API_KEY,
 });

constante openai = nouveau OpenAIApi (configuration);

constante générerImage = asynchrone () => {
 setPlaceholder(`Rechercher ${invite}..`);
 setChargement(vrai);
essayer {
constante res = attendre openai.createImage({
 invite: invite,
 n: 1,
 taille: "512x512",
 });
 setChargement(FAUX);
 setResult (res.data.data[0].url);
 } attraper (erreur) {
 setChargement(FAUX);
console.erreur(`Erreur lors de la génération de l'image: ${error.response.data.error.message}`);
 }
 };

Ce code définit un composant fonctionnel React appelé Générateur d'images. Le composant utilise plusieurs variables d'état pour gérer l'invite d'entrée, le résultat de sortie, l'état de chargement et le texte d'espace réservé.

Le composant crée également un configuration objet pour le client API OpenAI, qui inclut la clé API extraite de la variable d'environnement.

L'asynchrone générerImage La fonction s'exécutera lorsque l'utilisateur cliquera sur un bouton, transmettant l'invite de l'utilisateur.

Ensuite, il appelle le openai.createImage méthode pour générer une image basée sur l'invite donnée. Cette méthode renvoie un objet de réponse qui inclut l'URL de l'image générée.

Si l'appel d'API réussit, le code met à jour le résultat variable d'état avec l'URL et définit l'état de chargement sur FAUX. Si l'appel d'API échoue, il définit toujours l'état de chargement sur FAUX, mais enregistre également un message d'erreur dans la console.

Enfin, rendez les éléments React JSX qui composent le composant Générateur d'image.

retour (
"récipient">
 { chargement? (
 <>
Génération d'image... Veuillez patienter...</h3>
 </>
 ): (
 <>
Générer une image à l'aide de l'API Open AI</h2>


 NomClasse="entrée d'application"
 placeholder={placeholder}
 onChange={(e) => setPrompt (e.target.value)}
 lignes="10"
 cols="100"
 />
Générer une image</button>
 { result.length > 0? (
"image-résultat" src={résultat} alt="résultat" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}
exporterdéfaut Générateur d'images

Le code de ce composant restitue conditionnellement différents éléments en fonction de la valeur de chargement état variable.

Si chargement est vrai, il affiche un message de chargement. A l'inverse, si chargement est faux, il montre l'interface principale pour générer une image à l'aide de l'API OpenAI consistant en une zone de texte qui capture les invites de l'utilisateur et un bouton d'envoi.

Le résultat La variable d'état contient l'URL de l'image générée qui est ensuite rendue sur le navigateur.

Mettre à jour le composant App.js

Ajoutez ce code à votre fichier App.js :

importer'./App.css';
importer Générateur d'images depuis'./composant/ImageGenerator';
fonctionApplication() {
retour (

"Application">
"App-header">

 </header>
 </div>
 );
}
exporterdéfaut application ;

Vous pouvez maintenant lancer le serveur de développement pour mettre à jour les modifications et accéder à http://localhost: 3000 avec votre navigateur pour tester la fonctionnalité de génération d'images.

Pour obtenir les meilleurs résultats possibles lors de l'utilisation d'un outil d'IA pour générer une image, assurez-vous de fournir une invite détaillée dans la zone de texte. Cela signifie décrire l'image aussi complètement que possible, sans laisser de détails.

Ce processus s'appelle Prompt Engineering et implique la fourniture d'invites détaillées afin que le modèle de langage puisse produire les meilleurs résultats en fonction des entrées utilisateur fournies.

Compte tenu de la récente augmentation des logiciels d'IA disponibles sur le marché, poursuivre une carrière dans l'ingénierie rapide peut être une opportunité lucrative.

Maximiser la puissance des modèles de langage dans le développement de logiciels

Les outils d'intelligence artificielle alimentés par de grands modèles de langage ont pris d'assaut le domaine du développement de logiciels en raison de leurs fonctionnalités et capacités incroyables.

Ces outils ont le potentiel d'améliorer l'écosystème logiciel actuel en permettant aux développeurs d'intégrer des fonctionnalités d'IA intéressantes qui améliorent l'utilisation de différents produits - l'utilisation de la technologie de l'IA offre une opportunité unique de créer des logiciels de manière innovante façons.