Aujourd’hui, des individus et des entreprises ont d\u00e9velopp\u00e9 et form\u00e9 plusieurs mod\u00e8les d’IA pour qu’ils accomplissent certaines t\u00e2ches mieux que les humains en temps r\u00e9el. Parmi les innombrables applications de l’IA, la g\u00e9n\u00e9ration d’images par l’IA est un domaine particuli\u00e8rement int\u00e9ressant.<\/p>\n
Ce que vous construisez<\/h2>\n
Ce guide explique comment cr\u00e9er une application React qui s’int\u00e8gre de mani\u00e8re transparente \u00e0 l’API OpenAI DALL-E<\/a> via un backend Node.js<\/a> et g\u00e9n\u00e8re des images captivantes \u00e0 partir d’invites textuelles.<\/p>\n Pour suivre ce projet, vous devez avoir :<\/p>\n OpenAI API est une plateforme bas\u00e9e sur le cloud qui donne aux d\u00e9veloppeurs<\/a> l’acc\u00e8s aux mod\u00e8les d’IA pr\u00e9-entra\u00een\u00e9s d’OpenAI, tels que DALL-E et GPT-3 (nous avons utilis\u00e9 ce mod\u00e8le pour construire un clone de ChatGPT<\/a> avec le code dans ce d\u00e9p\u00f4t Git<\/a>). Il permet aux d\u00e9veloppeurs d’ajouter \u00e0 leurs programmes des fonctions d’IA telles que le r\u00e9sum\u00e9, la traduction, la g\u00e9n\u00e9ration d’images et la modification, sans avoir \u00e0 d\u00e9velopper et \u00e0 entra\u00eener leurs mod\u00e8les.<\/p>\n Pour utiliser l’API OpenAI, cr\u00e9ez un compte \u00e0 l’aide de votre compte Google ou de votre adresse e-mail sur le site web OpenAI<\/a> et obtenez une cl\u00e9 API. Pour g\u00e9n\u00e9rer une cl\u00e9 API, cliquez sur Personnel<\/strong> dans le coin sup\u00e9rieur droit du site web, puis s\u00e9lectionnez Voir les cl\u00e9s API<\/strong>.<\/p>\n Cliquez sur le bouton Cr\u00e9er une nouvelle cl\u00e9 secr\u00e8te<\/strong> et enregistrez la cl\u00e9<\/a> quelque part. Vous l’utiliserez dans cette application pour interagir avec l’API DALL-E de l’OpenAI.<\/p>\n Vous pouvez cr\u00e9er une application React \u00e0 partir de z\u00e9ro et d\u00e9velopper votre propre interface, ou vous pouvez utiliser notre mod\u00e8le de d\u00e9marrage Git<\/a> en suivant ces \u00e9tapes :<\/p>\n Une fois l’installation termin\u00e9e, vous pouvez lancer le projet sur votre ordinateur local en lan\u00e7ant la commande Dans ce projet, nous avons ajout\u00e9 toutes les d\u00e9pendances n\u00e9cessaires \u00e0 votre application React. Voici un aper\u00e7u de ce qui a \u00e9t\u00e9 install\u00e9 :<\/p>\n Au c\u0153ur de votre application React se trouve le dossier src<\/strong>. C’est l\u00e0 que se trouve le code JavaScript essentiel pour Webpack. Comprenons les fichiers et les dossiers du dossier src<\/strong>:<\/p>\n Dans ce dossier, le fichier index.js<\/strong> d\u00e9finit deux fonctions r\u00e9utilisables. La premi\u00e8re fonction randomise la s\u00e9lection des invites d\u00e9crivant les diff\u00e9rentes images qui peuvent \u00eatre g\u00e9n\u00e9r\u00e9es.<\/p>\n La seconde fonction g\u00e8re le t\u00e9l\u00e9chargement des images g\u00e9n\u00e9r\u00e9es en tirant parti de la d\u00e9pendance de file-saver<\/strong>. Ces deux fonctions ont \u00e9t\u00e9 cr\u00e9\u00e9es dans un souci de modularit\u00e9 et d’efficacit\u00e9, et elles peuvent \u00eatre import\u00e9es dans des composants en cas de besoin.<\/p>\n Dans le code ci-dessus, la d\u00e9pendance uuid<\/strong> donne \u00e0 chaque fichier image g\u00e9n\u00e9r\u00e9 un identifiant unique, afin qu’ils n’aient pas le m\u00eame nom de fichier.<\/p>\n Il s’agit de petits blocs de code s\u00e9par\u00e9s pour faciliter la maintenance et la compr\u00e9hension de votre code. Pour ce projet, trois composants ont \u00e9t\u00e9 cr\u00e9\u00e9s : Header.jsx<\/strong>, Footer.jsx<\/strong> et Form.jsx<\/strong>. Le composant principal est le composant Form, dans lequel les donn\u00e9es sont re\u00e7ues et transmises au fichier App.jsx<\/strong> avec la fonction Dans le composant Form, un \u00e9tat est cr\u00e9\u00e9 pour stocker et mettre \u00e0 jour l’invite. En outre, une fonction vous permet de cliquer sur une ic\u00f4ne al\u00e9atoire pour g\u00e9n\u00e9rer des invites al\u00e9atoires. Cela est possible gr\u00e2ce \u00e0 la fonction C’est dans ce fichier que r\u00e9side la majeure partie du code. Tous les composants sont rassembl\u00e9s ici. Il y a \u00e9galement une zone d\u00e9sign\u00e9e pour afficher l’image g\u00e9n\u00e9r\u00e9e. Si aucune image n’a encore \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9e, une image de remplacement (image de pr\u00e9visualisation) est affich\u00e9e.<\/p>\n Dans ce fichier, deux \u00e9tats sont g\u00e9r\u00e9s :<\/p>\n En outre, la fonction utilitaire Maintenant que vous avez compris les fichiers de d\u00e9marrage et que vous avez configur\u00e9 votre projet. Commen\u00e7ons \u00e0 g\u00e9rer la logique de cette application.<\/p>\n Pour exploiter les capacit\u00e9s de l’API DALL-E d’OpenAI, vous utiliserez Node.js pour \u00e9tablir un serveur. Au sein de ce serveur, vous cr\u00e9erez une route POST. Cette route sera charg\u00e9e de recevoir le texte d’invite envoy\u00e9 par votre application React et de l’utiliser pour g\u00e9n\u00e9rer une image.<\/p>\n Pour commencer, installez les d\u00e9pendances n\u00e9cessaires dans votre r\u00e9pertoire de projet en ex\u00e9cutant la commande suivante :<\/p>\n De plus, installez les d\u00e9pendances suivantes en tant que d\u00e9pendances dev. Ces outils vous aideront \u00e0 configurer votre serveur Node.js<\/a>:<\/p>\n Les d\u00e9pendances install\u00e9es sont expliqu\u00e9es comme ci-dessous :<\/p>\n Une fois les installations r\u00e9ussies, cr\u00e9ez un fichier server.js<\/strong> \u00e0 la racine de votre projet. C’est l\u00e0 que sera stock\u00e9 tout le code de votre serveur.<\/p>\n Dans le fichier server.js<\/strong>, importez les biblioth\u00e8ques<\/a> que vous venez d’installer et instanciez-les :<\/p>\n Dans le code ci-dessus, vous importez les biblioth\u00e8ques n\u00e9cessaires. Ensuite, cr\u00e9ez une instance de l’application Express \u00e0 l’aide de Ensuite, une instance de la classe OpenAI est cr\u00e9\u00e9e en utilisant votre cl\u00e9 API OpenAI. Cr\u00e9ez un fichier .env<\/strong> \u00e0 la racine de votre projet et ajoutez votre cl\u00e9 API en utilisant la variable Vous avez maintenant configur\u00e9 votre fichier server.js.<\/strong> Cr\u00e9ons une route POST que vous pouvez utiliser dans votre application React pour interagir avec ce serveur :<\/p>\n Dans ce code, la route est d\u00e9finie sur Ensuite, la m\u00e9thode Apr\u00e8s avoir g\u00e9n\u00e9r\u00e9 l’image, vous extrayez les donn\u00e9es de l’image de la r\u00e9ponse et les stockez dans la variable En cas d’erreur au cours de ce processus, le code contenu dans le bloc Le serveur est maintenant pr\u00eat ! Sp\u00e9cifions la commande qui sera utilis\u00e9e pour ex\u00e9cuter notre serveur dans le fichier package.json de l’objet Maintenant, lorsque vous lancez Dans le fichier App.jsx<\/strong>, vous allez cr\u00e9er une fonction Dans la fonction Dans le code ci-dessus, vous v\u00e9rifiez si le param\u00e8tre Ensuite, utilisez la m\u00e9thode Une fois que l’\u00e9tat Voici \u00e0 quoi ressemblera votre fichier App.jsx<\/strong> complet :<\/p>\n Jusqu’\u00e0 pr\u00e9sent, vous avez r\u00e9ussi \u00e0 construire une application React qui interagit avec Node.js, ce qui en fait une application compl\u00e8te. D\u00e9ployons maintenant cette application sur Kinsta.<\/p>\n Tout d’abord, configurez le serveur pour qu’il serve les fichiers statiques g\u00e9n\u00e9r\u00e9s pendant le processus de construction de l’application React. Pour cela, importez le module Lorsque vous ex\u00e9cutez la commande Avant de d\u00e9ployer votre code sur le fournisseur Git que vous avez choisi (Bitbucket<\/a>, GitHub<\/a> ou GitLab<\/a>), n’oubliez pas de modifier l’URL de requ\u00eate HTTP dans votre fichier App.jsx<\/strong>. Remplacez Enfin, dans votre fichier package.json<\/strong>, ajoutez une commande de script pour le serveur Node.js qui sera utilis\u00e9 pour le d\u00e9ploiement :<\/p>\n Ensuite, poussez votre code vers votre fournisseur Git pr\u00e9f\u00e9r\u00e9 et d\u00e9ployez votre d\u00e9p\u00f4t sur Kinsta en suivant les \u00e9tapes suivantes :<\/p>\n![\"G\u00e9n\u00e9rateur](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/09\/ai-image-generator-demo.gif\")
Pr\u00e9-requis<\/h3>\n
\n
Qu’est-ce que l’API OpenAI DALL-E ?<\/h2>\n
![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/09\/create-openai-api-secret-key.jpg\")
Configuration de l’environnement de d\u00e9veloppement<\/h2>\n
\n
git checkout starter-files<\/code>.<\/li>\nnpm install<\/code>.<\/li>\n<\/ol>\nnpm run start<\/code>. Le projet est alors disponible \u00e0 l’adresse http:\/\/localhost:3000\/<\/a>.<\/p>\n![\"Interface](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/09\/ai-image-generator-ui.jpg\")
Comprendre les fichiers du projet<\/h3>\n
\n
\n
Comprendre le dossier Utils<\/h4>\n
import { randomPrompts } from '..\/data';\n\nexport const getRandomPrompt = () => {\n const randomIndex = Math.floor(Math.random() * randomPrompts.length);\n const randomPrompt = randomPrompts[randomIndex];\n\n return randomPrompt;\n}<\/code><\/pre>\nimport FileSaver from 'file-saver';\nimport { v4 as uuidv4 } from 'uuid';\n\nexport async function downloadImage(photo) {\n const _id = uuidv4();\n FileSaver.saveAs(photo, `download-${_id}.jpg`);\n}<\/code><\/pre>\nComprendre les composants<\/h4>\n
generateImage<\/code> ajout\u00e9e en tant qu’\u00e9v\u00e8nement onClick<\/code> au bouton Generate Image<\/strong>.<\/p>\nhandleRandomPrompt<\/code>, qui utilise la fonction getRandomPrompt<\/code> que vous avez d\u00e9j\u00e0 configur\u00e9e. Lorsque vous cliquez sur l’ic\u00f4ne, elle r\u00e9cup\u00e8re une invite al\u00e9atoire et la met \u00e0 jour dans l’\u00e9tat :<\/p>\nconst handleRandomPrompt = () => {\n const randomPrompt = getRandomPrompt();\n setPrompt(randomPrompt)\n}<\/code><\/pre>\nComprendre le fichier App.jsx<\/h4>\n
\n
isGenerating<\/code>: Ceci permet de savoir si une image est en train d’\u00eatre g\u00e9n\u00e9r\u00e9e. Par d\u00e9faut, il est d\u00e9fini sur false.<\/li>\ngeneratedImage<\/code>: Cet \u00e9tat stocke des informations sur l’image qui a \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9e.<\/li>\n<\/ul>\ndownloadImage<\/code> est import\u00e9e, ce qui vous permet de d\u00e9clencher le t\u00e9l\u00e9chargement de l’image g\u00e9n\u00e9r\u00e9e lorsque vous cliquez sur le bouton Download <\/strong>:<\/p>\n<button\n className=\"btn\"\n onClick={() => downloadImage(generatedImage.photo)}\n><\/code><\/pre>\nG\u00e9n\u00e9rer des images avec l’API DALL-E d’OpenAI<\/h2>\n
npm i express cors openai<\/code><\/pre>\nnpm i -D dotenv nodemon<\/code><\/pre>\n\n
\/\/ Import the necessary libraries\nconst express = require('express');\nconst cors = require('cors');\nrequire('dotenv').config();\nconst OpenAI = require('openai');\n\n\/\/ Create an instance of the Express application\nconst app = express();\n\n\/\/ Enable Cross-Origin Resource Sharing (CORS)\napp.use(cors());\n\n\/\/ Configure Express to parse JSON data and set a data limit\napp.use(express.json({ limit: '50mb' }));\n\n\/\/ Create an instance of the OpenAI class and provide your API key\nconst openai = new OpenAI({\n apiKey: process.env.OPENAI_API_KEY,\n});\n\n\/\/ Define a function to start the server\nconst startServer = async () => {\n app.listen(8080, () => console.log('Server started on port 8080'));\n};\n\n\/\/ Call the startServer function to begin listening on the specified port\nstartServer();<\/code><\/pre>\nconst app = express();<\/code>. Ensuite, activez CORS. Ensuite, Express est configur\u00e9 pour traiter les donn\u00e9es JSON entrantes, en sp\u00e9cifiant une limite de taille de donn\u00e9es de 50mb<\/code>.<\/p>\nOPENAI_API_KEY<\/code>. Enfin, vous d\u00e9finissez une fonction asynchrone startServer<\/code> et l’appelez pour mettre le serveur en mouvement.<\/p>\napp.post('\/api', async (req, res) => {\n try {\n const { prompt } = req.body;\n const response = await openai.images.generate({\n prompt,\n n: 1,\n size: '1024x1024',\n response_format: 'b64_json',\n });\n const image = response.data[0].b64_json;\n res.status(200).json({ photo: image });\n } catch (error) {\n console.error(error);\n }\n});<\/code><\/pre>\n\/api<\/code>, et elle est con\u00e7ue pour g\u00e9rer les requ\u00eates POST entrantes. Dans la fonction de rappel de la route, vous recevez les donn\u00e9es envoy\u00e9es par votre application React \u00e0 l’aide de req.body<\/code> – en particulier la valeur prompt<\/code>.<\/p>\nimages.generate<\/code> de la biblioth\u00e8que OpenAI est invoqu\u00e9e. Cette m\u00e9thode prend l’invite fournie et g\u00e9n\u00e8re une image en r\u00e9ponse. Des param\u00e8tres tels que n<\/code> d\u00e9terminent le nombre d’images \u00e0 g\u00e9n\u00e9rer (ici, une seule), size<\/code> sp\u00e9cifie les dimensions de l’image et response_format<\/code> indique le format dans lequel la r\u00e9ponse doit \u00eatre fournie (b64_json<\/code> dans ce cas).<\/p>\nimage<\/code>. Ensuite, vous renvoyez une r\u00e9ponse JSON \u00e0 l’application React avec les donn\u00e9es de l’image g\u00e9n\u00e9r\u00e9e, en d\u00e9finissant le statut HTTP \u00e0 200<\/code> (indiquant le succ\u00e8s) \u00e0 l’aide de res.status(200).json({ photo: image })<\/code>.<\/p>\ncatch<\/code> est ex\u00e9cut\u00e9, en enregistrant l’erreur dans la console pour le d\u00e9bogage.<\/p>\nscripts<\/code>:<\/p>\n\"scripts\": {\n \"dev:frontend\": \"react-scripts start\",\n \"dev:backend\": \"nodemon server.js\",\n \"build\": \"react-scripts build\",\n},<\/code><\/pre>\nnpm run dev:backend<\/code>, votre serveur d\u00e9marrera sur http:\/\/localhost:8080\/,<\/a> tandis que si vous lancez npm run dev:frontend<\/code>, votre application React d\u00e9marrera sur http:\/\/localhost:3000\/. Assurez-vous que les deux s’ex\u00e9cutent dans des terminaux diff\u00e9rents.<\/p>\nEffectuer des requ\u00eates HTTP depuis React vers le serveur Node.js<\/h2>\n
generateImage<\/code> qui est d\u00e9clench\u00e9e lorsque le bouton Generate Image<\/strong> est cliqu\u00e9 dans le composant Form.jsx<\/strong>. Cette fonction accepte deux param\u00e8tres : prompt<\/code> et setPrompt<\/code> du composant Form.jsx<\/strong>.<\/p>\ngenerateImage<\/code>, envoyez une requ\u00eate HTTP POST au serveur Node.js :<\/p>\nconst generateImage = async (prompt, setPrompt) => {\n if (prompt) {\n try {\n setIsGenerating(true);\n const response = await fetch(\n 'http:\/\/localhost:8080\/api',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify({\n prompt,\n }),\n }\n );\n const data = await response.json();\n setGeneratedImage({\n photo: `data:image\/jpeg;base64,${data.photo}`,\n altText: prompt,\n });\n } catch (err) {\n alert(err);\n } finally {\n setPrompt('');\n setIsGenerating(false);\n }\n } else {\n alert('Please provide proper prompt');\n }\n};<\/code><\/pre>\nprompt<\/code> a une valeur, puis vous d\u00e9finissez l’\u00e9tat isGenerating<\/code> \u00e0 true<\/code> puisque l’op\u00e9ration commence. Cela fera appara\u00eetre le chargeur \u00e0 l’\u00e9cran car dans le fichier App.jsx<\/strong>, nous avons ce code qui contr\u00f4le l’affichage du chargeur :<\/p>\n{isGenerating && (\n <div> className=\"loader-comp\">\n <img src={Loader} alt=\"\" className='loader-img' \/>\n <\/div>\n)}<\/code><\/pre>\nfetch()<\/code> pour faire une requ\u00eate POST au serveur en utilisant http:\/\/localhost:8080\/api<\/a> – c’est la raison pour laquelle nous avons install\u00e9 CORS car nous interagissons avec une API sur une autre URL. Nous utilisons l’invite comme corps du message. Extrayez ensuite la r\u00e9ponse renvoy\u00e9e par le serveur Node.js et mettez-la \u00e0 l’\u00e9tat generatedImage<\/code>.<\/p>\ngeneratedImage<\/code> a une valeur, l’image est affich\u00e9e :<\/p>\n{generatedImage.photo ? (\n <img\n src={generatedImage.photo}\n alt={generatedImage.altText}\n className=\"imgg ai-img\"\n \/>\n) : (\n <img\n src={preview}\n alt=\"preview\"\n className=\"imgg preview-img\"\n \/>\n)}<\/code><\/pre>\nimport { Form, Footer, Header } from '.\/components';\nimport preview from '.\/assets\/preview.png';\nimport Loader from '.\/assets\/loader-3.gif'\nimport { downloadImage } from '.\/utils';\nimport { useState } from 'react';\n\nconst App = () => {\n const [isGenerating, setIsGenerating] = useState(false);\n const [generatedImage, setGeneratedImage] = useState({\n photo: null,\n altText: null,\n });\n\n const generateImage = async (prompt, setPrompt) => {\n if (prompt) {\n try {\n setIsGenerating(true);\n const response = await fetch(\n 'http:\/\/localhost:8080\/api',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify({\n prompt,\n }),\n }\n );\n const data = await response.json();\n setGeneratedImage({\n photo: `data:image\/jpeg;base64,${data.photo}`,\n altText: prompt,\n });\n } catch (err) {\n alert(err);\n } finally {\n setPrompt('');\n setIsGenerating(false);\n }\n } else {\n alert('Please provide proper prompt');\n }\n };\n\n return (\n <div className='container'>\n <Header \/>\n <main className=\"flex-container\">\n <Form generateImage={generateImage} prompt={prompt} \/>\n <div className=\"image-container\">\n {generatedImage.photo ? (\n <img\n src={generatedImage.photo}\n alt={generatedImage.altText}\n className=\"imgg ai-img\"\n \/>\n ) : (\n <img\n src={preview}\n alt=\"preview\"\n className=\"imgg preview-img\"\n \/>\n )}\n {isGenerating && (\n <div className=\"loader-comp\">\n <img src={Loader} alt=\"\" className='loader-img' \/>\n <\/div>\n )}\n <button\n className=\"btn\"\n onClick={() => downloadImage(generatedImage.photo)}\n >\n Download\n <\/button>\n <\/div>\n <\/main>\n <Footer \/>\n <\/div>\n );\n};\n\nexport default App;<\/code><\/pre>\nD\u00e9ployez votre application compl\u00e8te sur Kinsta<\/h2>\n
path<\/code> et utilisez-le pour servir les fichiers statiques :<\/p>\nconst path = require('path');\n\napp.use(express.static(path.resolve(__dirname, '.\/build')));<\/code><\/pre>\nnpm run build && npm run dev:backend<\/code>, votre application React compl\u00e8te se chargera \u00e0 l’adresse http:\/\/localhost:8080\/. C’est parce que l’application React est compil\u00e9e dans des fichiers statiques<\/a> dans le dossier build<\/strong>. Ces fichiers sont ensuite incorpor\u00e9s dans votre serveur Node.js en tant que r\u00e9pertoire statique. Par cons\u00e9quent, lorsque vous ex\u00e9cutez votre serveur Node, l’application sera accessible.<\/p>\nhttp:\/\/localhost:8080\/api<\/code> par \/api<\/code>, car l’URL sera pr\u00e9c\u00e9d\u00e9e d’un ast\u00e9risque.<\/p>\n\"scripts\": {\n \/\/ \u2026\n \"start\": \"node server.js\",\n},<\/code><\/pre>\n