J'ai créé une application de génération d'images en utilisant Next.js et Openai API-DALL · E 3 (Tailwind CSS compatible)

$ npx create-next-app @ Dernier Image-Generator-Starter --TypeScript ✔ Souhaitez-vous utiliser Eslint? … Non / Oui ✔ Souhaitez-vous utiliser CSS à vent arrière? … Non / Oui ✔ Souhaitez-vous votre code dans un répertoire `src /`? … Non / Oui ✔ Souhaitez-vous utiliser l'application Router? (recommandé)… Non / Oui ✔ Souhaitez-vous utiliser Turbopack pour `Next Dev`? … Non / Oui ✔ Souhaitez-vous personnaliser l'alias d'importation (`@ / *` par défaut)? … Non / Oui Création d'une nouvelle application Next.js dans / Image-Generator-Starter. Utilisation de NPM. Initialisation du projet avec modèle: App-TW Installation des dépendances: - React - React-Dom - Ensuite, installation de DevDependces: - TypeScript - @ Types / Node - @ Types / React - @ Types / React - @ Types / React-Dom - @ TailWindCSSS - Les packages 337 dans les packages 16S 137 recherchent un financement Run «NPM Fund» pour les détails trouvés 0 vulnérabilités initialisées un référentiel GIT. Succès! Créé d'image-generator-starter at / Image-Generator-Starter

CD-Generator-Starter

Openai_api_key = sk -... openai_model = dall-e-3 openai_image_size = 1024x1024 openai_image_quality = standard

NPM Run Dev

"Utiliser le client"; import {UseState} de "réact"; Importez l'image à partir de "Suivant / Image"; Exporter la fonction default home () {// État pour l'entrée de l'utilisateur (invite d'image) // L'invite de génération d'image entrée par l'utilisateur const [invite, setPrompt] = UseState (""); // État pour stocker URL d'image généré // URL de l'image générée const [imageUrl, setimageUrl] = useState (""); // Chargement Indicateur State // Chargement Flag const [Chargement, setLoading] = UseState (false); // État du message d'erreur // pour le stockage des messages d'erreur const [error, setError] = useState (""); // Gire la demande de génération d'images // Traitement de la demande de génération d'images const GenerateImage = async () => {if (! Prompt.trim ()) return; // Réinitialiser l'état avant la demande // Initialiser l'état avant la demande de chargement de demande (true); SetError (""); setImageUrl (""); try {// Envoyer une demande à API interne // Envoi de la demande à API interne (/ api / image) const res = wait fetch ("/ api / image", {méthode: "post", en-têtes: {"contenu-type": "application / json"}, body: json.stringify ({prompt}),}); const data = attendre res.json (); if (res.ok && data.imageUrl) {setImageUrl (data.imageUrl); } else {setError (data.error || "n'a pas réussi à générer de l'image."); }} catch (e) {console.error ("erreur:", e); SetError ("Une erreur inattendue s'est produite."); } enfin {setLoading (false); }}; retour (<main className="min-h-screen bg-gray-900 text-gray-100 flex items-center justify-center px-4 py-8"><div className="w-full max-w-xl bg-gray-800 rounded-xl shadow-lg p-6 space-y-6"> {/* Titre */}<h1 className="text-2xl font-bold text-center text-white"> Générateur d'images AI</h1> {/ * Champ d'entrée d'invite / invite * /}<div className="space-y-2"> <label htmlFor="prompt" className="block text-sm font-medium text-gray-300" >Entrez votre invite d'image</label><textarea id="prompt" rows={3} value={prompt} onChange={(e) => setPrompt (e.target.value)} classname = "w-full p-3 arrondi-lg bg-gray-700 bordure bordure-gray-600 text-blanc focus: sort-none focus: ring-2 focus: ring-green-400 redimensider-none" lisholder = "eg a futuristic Cityscape at Sunset, numérique art" /> </v> {générer un bouton de soleil / jans <Button OnClick = {GenerateImage} Disabled = {Loading} className = "W-Full Py-3 Roundd-LG BG-Green-500 Hover: BG-Green-600 Text-Black Font-Semibold Disabled: Opacity-50 Transition"> {Chargement? "Génération ...": "Générer l'image"} </ Button> {/ * Message d'erreur / affichage d'erreur * /} {error && (<div classname = "text-red-400 text-sm text-center"> {error} </ div>)} {/ * Image affiche / Image affiche * /} {imageurl && (<div classname = "MT-4 RELALATIF W-ul h- [512px] "> <image src = {imageUrl} alt =" résultat généré "remplir classname non optimisé =" bordure de bordure d'objet à la bordure-700 "/> </ div>)} </div> </-main>); }

const [invite, setPrompt] = USESTate (""); const [imageUrl, setimageUrl] = useState (""); const [chargement, setLoading] = useState (false); const [error, setError] = useState ("");

const generateImage = async () => {if (! prompt.trim ()) return; setLoading (true); SetError (""); setImageUrl (""); essayez {const res = attend fetch ("/ api / image", {méthode: "post", en-têtes: {"contenu-type": "application / json"}, body: json.stringify ({prompt}),}); const data = attendre res.json (); if (res.ok && data.imageUrl) {setImageUrl (data.imageUrl); } else {seterror (data.error || "n'a pas réussi à générer de l'image."); }} catch (e) {console.error ("erreur:", e); SetError ("Une erreur inattendue s'est produite."); } enfin {setLoading (false); }};

<textarea id="prompt" rows={3} value={prompt} onChange={(e) =>setPrompt (e.target.value)} className = "w-full p-3 arrondi-lg bg-gray-700 bordure bordure-gray-600 text-blanc focus: sort-none focus: ring-2 focus: ring-green-400 redimensider-none" lisholder = "eg a catfing on waves, digital art" /> <bouton on onclick =} Disabled = {Loading} className = "W-Full Py-3 Round-lg BG-Green-500 Hover: BG-Green-600 Text-Black Font-Semibold Disabled: Opacity-50 Transition"> {Chargement? "Génération ...": "Générer l'image"} </ Button>

{erreur && (<div className="text-red-400 text-sm text-center"> {erreur}</div> )} {imageurl && ( <div className="mt-4 relative w-full h-[512px]"><Image src={imageUrl} alt="Generated result" layout="fill" className="rounded-lg object-contain border border-gray-700" /></div> )}

// src / app / api / image / root.ts import {nexTequest, nexTResponse} depuis "next / server"; // POST HANDER POUR GÉNÉRATION D'IMAGE À l'aide de l'OpenAI API // Générez des images à l'aide de la fonction Async de fonction API OpenAI API Export Async (req: nexTequest) {// analyser l'invite du corps de la demande // Obtenez l'invite du corps de demande const {invite} = attend req.json (); // valider l'entrée // Vérifiez si l'invite est spécifiée si (! Invite) {return nexTResponse.json ({error: "invite est requis"}, {status: 400}); } essayez {// Charger la configuration à partir des variables d'environnement (avec des valeurs de secours) // Chargement des paramètres à partir des variables d'environnement (sinon, la valeur par défaut) const Model = process.env.openai_model || "Dall-E-3"; const size = process.env.openai_image_size || "1024x1024"; const Quality = process.env.openai_image_quality || "standard"; // Envoi de la demande à la génération d'images d'OpenAI d'image // Envoi de la demande à la génération d'image d'image d'image Const Response = Await Fetch ("https://api.openai.com/v1/images/generations", {méthode: "Post", en-tête: {Autorisation: `Bearer $ {process.env.openai_api_key}` " corps: json.stringify ({modèle, // par exemple, invite "dall-e-3", // invite de l'utilisateur pour la taille de la génération d'images, // par exemple, "1024x1024" qualité, // "standard" ou "hd" n: 1, // nombre d'images à générer}),}); const data = attendre réponse.json (); // Gérer la réponse d'erreur de l'API // Que faire si une erreur de l'API est renvoyée if (data.error) {console.error ("Erreur de l'API OpenAI:", data.error); return nexTResponse.json ({error: "la génération d'images a échoué"}, {status: 500}); } // Extraire l'URL d'image générée // Obtenez l'URL de l'image générée const imageUrl = data.data?.ord // Renvoie l'URL de l'image au client // Renvoie l'URL de l'image au client return nexTResponse.json ({imageUrl}); } catch (error) {// Gire les erreurs de serveur inattendues // Gire les erreurs de serveur inattendues console.error ("Erreur du serveur:", erreur); return nexTResponse.json ({error: "Erreur du serveur interne"}, {status: 500}); }}

import {nexTeQuest, nexTResponse} depuis "next / server"; Exporter la fonction asynchrone post (req: nexTeQuest) {const {inside} = attendre req.json ();

const Response = Await Fetch ("https://api.openai.com/v1/images/generations", {méthode: "Post", en-têtes: {autorisation: `Bearer $ {process.env.openai_api_key}`, "Content-Type": "application / json",}, body: json.stringify ({model: process.env.openai_model || const data = attendre réponse.json ();

  if (data.error) {Console.Error (data.Error); return nexTResponse.json ({error: "la génération d'images a échoué"}, {status: 500}); } const imageUrl = data.data?.orth return nexTResponse.json ({imageUrl}); }