L’intelligence artificielle ne cesse de s’améliorer et peut désormais créer des images étonnantes. Un exemple viral récent montre les personnes les plus riches et les plus influentes du monde dans des vêtements déchirés, vivant dans un bidonville. Ce qui est impressionnant dans ces images, c’est le niveau de détail élevé des personnes et de leur environnement.
Des modèles linguistiques 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.
Découvrez comment 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 des images ? Sans trop s’attarder sur les complexités de la génération d’images par l’IA, DALL-E interprète d’abord les descriptions textuelles qui lui sont fournies en tant qu’entrées à l’aide du traitement du langage naturel (NLP). Il restitue 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, elles peuvent également inclure des détails tels qu’une couleur, une forme ou une taille particulière. Quelle que soit la complexité ou la simplicité du texte saisi, DALL-E génère une image qui correspond étroitement à la description saisie.
Il est important de noter que le modèle linguistique, tout comme les autres modèles, a été entraîné sur un vaste ensemble de données comprenant des millions d’images afin d’apprendre à identifier et à générer des images photoréalistes à partir de données d’entrée données.
Démarrer avec l’API DALL-E d’OpenAI
L’API DALL-E d’OpenAI est disponible en version bêta publique. Pour intégrer l’API dans votre application React, vous aurez besoin d’une clé pour l’API d’OpenAI. Rendez-vous sur le site d’OpenAI et connectez-vous à la page d’aperçu de votre compte pour obtenir votre clé API.
Une fois connecté, cliquez sur l’icône du profil utilisateur en haut à droite de votre page d’aperçu. Ensuite, sélectionnez et cliquez sur Voir les clés API.
Sur la page de paramétrage des clés API, cliquez sur le bouton Créer une nouvelle clé secrète indiquez un nom pour votre clé API et cliquez sur le bouton Créer une clé secrète pour générer votre clé API.
Créer un projet React
Exécutez les commandes ci-dessous dans votre terminal pour créer un nouveau projet React localement. Notez que Node.js doit être installé.
Consultez ces deux articles pour savoir comment installer Node.js sur Windows et comment installer Node.js sur Ubuntu.
mkdir React-project
cd React-project
npx create-react-app image-generator-app
cd image-generator-app
npm start
Au lieu d’utiliser la commande create-react-app, vous pouvez utiliser Vite pour configurer votre projet React. Vite est un outil de construction conçu pour créer des applications web rapidement et efficacement.
Intégrer 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 install openai
Ensuite, dans le répertoire racine de votre dossier de projet, créez un nouveau fichier .env pour contenir votre clé API.
REACT_APP_OPENAI_API_KEY = "API KEY"
Vous pouvez trouver le code de ce projet dans ce dépôt GitHub.
Créer un composant générateur d’images
Dans la section /src créez un nouveau dossier, nommez-le composantset créez un nouveau fichier à l’intérieur nommé ImageGenerator.js. Ajoutez le code ci-dessous à ce fichier.
Commencez par importer les modules nécessaires :
import '../App.css';
import { useState } from "react";
import { Configuration, OpenAIApi } from "openai";
Le module Configuration configure le client API d’OpenAI pour l’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 :
function ImageGenerator() {
const [prompt, setPrompt] = useState("");
const [result, setResult] = useState("");
const [loading, setLoading] = useState(false);
const [placeholder, setPlaceholder] = useState(
"Search for a lion with Paint Brushes painting the mona lisa painting..."
);
const configuration = new Configuration({
apiKey: process.env.REACT_APP_OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
const generateImage = async () => {
setPlaceholder(`Search ${prompt}..`);
setLoading(true);
try {
const res = await openai.createImage({
prompt: prompt,
n: 1,
size: "512x512",
});
setLoading(false);
setResult(res.data.data[0].url);
} catch (error) {
setLoading(false);
console.error(`Error generating image: ${error.response.data.error.message}`);
}
};
Ce code définit un composant fonctionnel React appelé ImageGenerator. 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’insertion.
Le composant crée également un configuration pour le client OpenAI API, qui inclut la clé API récupérée dans la variable d’environnement.
La fonction asynchrone générerImage s’exécutera lorsque l’utilisateur cliquera sur un bouton, en transmettant l’invite de l’utilisateur.
Ensuite, elle appelle la fonction openai.createImage La méthode openai.createImage permet de générer une image sur la base de l’invite donnée. Cette méthode renvoie un objet de réponse qui comprend l’URL de l’image générée.
Si l’appel à l’API aboutit, le code met à jour le fichier résultat avec l’URL, et définit le statut de chargement à faux. Si l’appel à l’API échoue, l’état de chargement est toujours fixé à fauxmais affiche également un message d’erreur dans la console.
Enfin, rendez les éléments React JSX qui composent le composant Image generator.
return (
<div className="container">
{ loading ? (
<>
<h3>Generating image... Please Wait...</h3>
</>
) : (
<>
<h2>Generate an Image using Open AI API</h2>
<textarea
className="app-input"
placeholder={placeholder}
onChange={(e) => setPrompt(e.target.value)}
rows="10"
cols="100"
/>
<button onClick={generateImage}>Generate an Image</button>
{ result.length > 0 ? (
<img className="result-image" src={result} alt="result" />
) : (
<>
</>
)}
</>
)}
</div>
)
}
export default ImageGenerator
Le code de ce composant effectue un rendu conditionnel de différents éléments en fonction de la valeur de l’attribut chargement variable d’état.
Si chargement est vrai, il affiche un message de chargement. Inversement, si chargement est faux, il montre l’interface principale de génération d’une image à l’aide de l’API OpenAI, composée d’une zone de texte qui capture les invites de l’utilisateur et d’un bouton de soumission.
L’interface résultat La variable d’état contient l’URL de l’image générée qui sera ensuite affichée dans le navigateur.
Mise à jour du composant App.js
Ajoutez ce code à votre fichier App.js :
import './App.css';
import ImageGenerator from './component/ImageGenerator';
function App() {
return (
<div className="App">
<header className="App-header">
<ImageGenerator />
</header>
</div>
);
}
export default App;
Vous pouvez maintenant démarrer le serveur de développement pour mettre à jour les modifications et naviguer vers http://localhost:3000 avec votre navigateur pour tester la fonctionnalité de génération d’images.
Pour obtenir les meilleurs résultats possibles lorsque vous utilisez 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 qu’il faut décrire l’image de la manière la plus complète possible, sans omettre aucun détail.
Ce processus, appelé ingénierie des invites, consiste à fournir des invites détaillées afin que le modèle de langage puisse produire les meilleurs résultats sur la base des données fournies par l’utilisateur.
Compte tenu de l’essor récent des logiciels d’IA disponibles sur le marché, une carrière dans l’ingénierie des messages-guides peut s’avérer lucrative.
Maximiser la puissance des modèles de langage dans le développement de logiciels
Les outils d’IA alimentés par de grands modèles de langage ont pris d’assaut le domaine du développement logiciel en raison de leurs incroyables caractéristiques et capacités.
Ces outils ont le potentiel d’améliorer l’écosystème logiciel actuel en permettant aux développeurs d’intégrer des fonctions d’IA intéressantes qui améliorent l’utilisation de différents produits – l’utilisation de la technologie de l’IA offre une occasion unique de créer des logiciels de manière innovante.
