J'ai créé une application de génération d'images en utilisant Next.js et Openai API-DALL

L'URL a été copiée!

Avez-vous déjà voulu intégrer génération d'images récemment parlée

Dans cet article, nous vous montrerons comment créer une application de génération d'images simples à l'aide de Next.js (Router de l'App) , de Tailwind CSS et d'Openai Generation Image Generation API (DALL · E 3)

ceux qui trouvent un peu de tracas d'écrire un code vous-même ou
de vouloir un modèle avec une interface utilisateur qui fonctionne rapidement, nous vendons également des modèles sur les plates-formes .

Les modèles introduits dans cet article sont maintenant en vente!

Ce modèle d'interface utilisateur de chatbot est disponible à la vente sur plusieurs plates-formes.

La structure est parfaite pour ceux qui veulent essayer quelque chose qui fonctionne en premier, "Je veux l'utiliser tout de suite sans construire un environnement" ou "Je veux vérifier l'intégralité du code".

Acheter sur gumroad acheter sur note

Vous pouvez également consulter d'autres modèles à partir de chaque page:

Note de gumroad

table des matières

À propos de la technologie utilisée

Cette application de génération d'images est construite sur les technologies suivantes:

Next.js (configuration du routeur de l'application): Un cadre basé sur React vous permet de créer des pages unifiées et des itinéraires API. J'utilise une configuration de routeur d'application à partir de SRC / App
CSS du vent arrière: Un framework CSS d'abord utilitaire qui vous permet d'organiser efficacement vos conceptions à l'aide de classes. Créez rapidement une interface utilisateur réactive et simple
API OpenAI (génération d'images): Utilisez
d'Openai / V1 / Images / Generations Le modèle (par exemple Dall-E-3 ), la taille de l'image, la qualité d'image, etc. peuvent être modifiés de manière flexible à l'aide de .env
Routes API + récupérer: La communication API client et OpenAI est relayée du côté serveur via
/ API / Image dans next.js. Le côté client a une configuration simple qui publie simplement en utilisant fetch ("/ api / image")

Créer une clé API OpenAI

Cette fois, nous utiliserons l'API OpenAI, nous devrons donc créer une clé API OpenAI.
Vous serez redirigé vers les touches API dans le tableau de bord API OpenAI. Sélectionnez "Créer une nouvelle clé secrète".

Vous pouvez avoir le projet sélectionné comme vous le souhaitez et sélectionner les autorisations en fonction du modèle que vous souhaitez utiliser, ou sélectionnez tout pour le générer.

Une fois la création terminée, une chaîne commençant par "sk-" sera créée, nous l'utiliserons donc après cela.
Faites attention à ne pas laisser partir cette clé.

Construction environnementale

Tout d'abord, préparez un environnement de développement pour next.js.

Créer un projet

Je vais créer un projet.
Fondamentalement, je pense que c'est bien de tout laisser aux valeurs par défaut, mais c'est bien tant que vous pouvez le changer au besoin.
(Ce projet utilise Tailwind CSS, il est donc préférable de le définir sur oui. La valeur par défaut est oui.)

$ 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

Si "Success! Création d'image-generator-starter at / Image-Generator-Starter" apparaît, la création de projet est terminée.
Une fois que vous avez créé le projet, déplacez le répertoire.

CD-Generator-Starter

Définir la touche API Openai

Créez un .env dans la racine

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

Brève description:

Openai_api_key : clé privée pour accéder à l'API de génération d'images Openai (obtenu à partir de l'écran de gestion OpenAI)
Openai_model : modèle de génération d'images à utiliser. Actuellement, Dall-E-3 est spécifié (les futures mises à jour sont également prises en charge)
Openai_image_size : la taille de l'image à générer (par exemple 1024x1024 ). Peut être modifié au besoin
Openai_image_quality : qualité d'image. Vous pouvez choisir Standard ou HD HD est de haute qualité mais peut prendre beaucoup de temps)

Démarrer le serveur de développement

L'exécution de la commande suivante lancera le modèle:

NPM Run Dev

Implémentation de l'interface utilisateur (écran de génération d'images)

L'interface utilisateur de génération d'images est organisée en
src / app / page.tsx Le montant total du code source est le suivant:

"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>); }

Gestion de l'état du message

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

Brève description:

Invite : maintient la description de la génération d'images (invite) entrée par l'utilisateur
ImageUrl : garde l'URL de l'image générée
Chargement : indique l'état d'attendre la réponse de l'API
Erreur : maintient les messages à afficher lorsqu'une erreur se produit

Traitement de transmission de génération d'images et appel API

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); }};

Brève description:

Envoyer l'invite entrée / API / Image
Lorsque l'image est renvoyée de l'API OpenAI, définissez l'URL et elle sera affichée à l'écran.
Si une erreur se produit, un message sera affiché

Formulaire d'entrée et boutons (Tailwind CSS)

<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>

Brève description:

Entrez la description de l'image dans la zone du texte
Cliquez sur le bouton pour démarrer la génération d'images ( le bouton est désactivé pendant le chargement
CSS Tailwind le rend simple et facile à utiliser

Affichage de l'image, erreur, chargement d'affichage

{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> )}

Brève description:

S'il y a une erreur
Si une image est générée, elle sera affichée de manière responsable à l'écran ( optimisée à l'aide de Suivant / Image

Implémentation côté serveur (Intégration API OpenAI)

Le processus de génération d'images est que le client envoie une demande à
/ API / image puis les relais et les réponses sont retournés à l'API de chat d'Openai sur le serveur.

La quantité totale de code source côté serveur est la suivante:

// 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}); }}

Configuration de base de `la route.ts`

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

Brève description:

Il s'agit d'un itinéraire API limité aux post-post
Vous recevez invite envoyée du côté client

Demandes d'API OpenAI

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 ();

Brève description:

Charge dynamiquement des touches API , des noms de modèles , des tailles d'image et une qualité d'image à partir des variables d'environnement
l'API de génération d'images OpenAI ( / v1 / images / générations ) et envoyez une demande de génération d'images.
N: 1 est la spécification selon laquelle "une seule feuille sera générée".

Traitement de la réponse et gestion des erreurs

  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}); }

Brève description:

Si l'API OpenAI échoue, l'erreur est sortie vers la console et revient avec une erreur de 500.
Si l'URL de l'image est renvoyée avec succès, elle sera renvoyée au client ( ImageUrl ).

[Bonus] choses à noter

Veuillez gérer
avec .env afin de ne jamais les publier Si le problème se produit, désactivez-le ou réédition sur l'écran de gestion OpenAI
Le nom du modèle, la taille de l'image et la qualité de l'image sont conçus
pour être commutés dynamiquement avec .env Veuillez s'adapter en fonction de l'objectif et du coût (par exemple, la HD est une qualité supérieure et un coût plus élevé que la norme
La période de stockage de l'image et les temps de disponibilité peuvent être limités , donc si nécessaire, envisagez de concevoir pour effectuer un traitement de stockage immédiatement après l'acquisition.

Chèque d'opération

Passons à une vérification rapide de son opération!

Lorsque vous ouvrez "LocalHost: 3000" dans votre navigateur, l'écran suivant apparaîtra.

Essayez d'entrer "un chat mignon".

Après avoir attendu un moment, une image de chat mignonne a été générée et affichée!
Il s'affiche également sans aucun problème en japonais!

Informations sur les ventes de modèles

L'interface utilisateur du chatbot introduit dans cet article est également vendue comme un modèle qui peut être utilisé à des fins commerciales

Pourquoi vendre des modèles?

Nous avons préparé cela à ceux qui subissent les besoins suivants:

"Même si vous suivez les étapes, l'environnement ne fonctionne pas ..."
"Je veux juste commencer par un échantillon en mouvement."
"J'ai regardé mon blog et je l'ai trouvé utile, donc je voudrais l'acheter dans le but de soutenir et de faire un don."

Même ceux qui n'ont pas l'habitude de développer le jeu peuvent démarrer et l'essayer rapidement avec un minimum d'effort

Exemples d'utilisation du modèle (idées de personnalisation)

Ce modèle est parfait à des fins de développement personnel et d'apprentissage.
Par exemple, nous vous recommandons de modifier et d'étendre ce qui suit:

Ajout du préprocesseur pour traduire l'entrée invite l'anglais
Élargi pour permettre le téléchargement et enregistrer et partager les images générées sur SNS
Ajouter une fonction de gestion de l'histoire (invite la plus récente + image) localement
Personnalisez les couleurs et les conceptions du thème pour faire vos propres spécifications
Ajouter un traitement pour enregistrer automatiquement les images sur S3 etc. du côté serveur

C'est également une bonne pratique de l'essayer sur une base de "série" pour la programmation des débutants.

Ce qui est inclus dans le modèle

contient
tout le code source du projet que nous avons introduit ici Par conséquent, vous n'avez pas à créer ou à configurer votre propre projet à partir de zéro, et vous pouvez le démarrer immédiatement .

Implémentation de l'interface utilisateur à l'aide de next.js (routeur de l'application)
Implémentation côté serveur avec intégration API
Structure du code propre avec des commentaires
Simple et facile à améliorer la conception en utilisant le vent arrière CSS
Fichiers de configuration de démarrage Docker ( dockerfile , docker-compose.yml )

* Pour exécuter, un environnement d'exécution de base tel que node.js et docker est requis.

Les modèles introduits dans cet article sont maintenant en vente!

Acheter sur gumroad acheter sur note

Vous pouvez également consulter d'autres modèles à partir de chaque page:

Note de gumroad

résumé

Cette fois, nous avons introduit comment créer application de génération d'images à l'aide d' Openai API x next.js.

Les points clés de cet article sont les suivants:

L'API d'image d'Openai vous permet de créer des fonctions de génération d'images avec juste un peu de code
NEXT.JS App Router + Tailwind CSS facilite l'élargissement et la personnalisation de l'interface utilisateur
À l'aide de modèles, ignorer la construction et la configuration de l'environnement et vérifier l'opération immédiatement.

Ce modèle est parfait pour
le prototypage et les kits de démarrage de développement personnel Il est également recommandé pour ceux qui souhaitent transformer rapidement leurs idées en réalité ou pour apprendre et vérifier l'API OpenAI.

Partagez si vous le souhaitez!

L'URL a été copiée!

Qui a écrit cet article

Taku

Ceci est un blog que j'ai commencé à étudier la sécurité de l'information. En tant que nouvel employé, je serais heureux si vous pouviez regarder avec un cœur large.
Il y a aussi Teech Lab, qui est l'occasion d'étudier le plaisir en programmation, donc si vous êtes intéressé par le développement de logiciels, assurez-vous de jeter un œil!