Creé una aplicación de generación de imágenes usando Next.js y OpenAI API-Dall · E 3 (compatible con CSS CSS)

$ npx create-next-app@Última imagen-generador-starter --Typescript ✔ ¿Le gustaría usar Eslint? … No / sí ✔ ¿Le gustaría usar CSS de viento de cola? … No / sí ✔ ¿Le gustaría su código dentro de un directorio `src /`? ... no / sí ✔ ¿Le gustaría usar el enrutador de aplicaciones? (Recomendado) ... no / sí ✔ ¿Le gustaría usar Turbopack para 'Next Dev`? ... no / sí ✔ ¿Le gustaría personalizar el alias de importación (`@ /*` por defecto)? ... no / sí creando una nueva aplicación Next.js en / Image-Generator-Starter. Usando NPM. Inicialización del proyecto con plantilla: App -tw Instalación de dependencias: - React - React -Dom - Siguiente instalación de DevDependencies: - TypeScript - @types/node - @tipos/react - @tipos/react - @tipos/react -dom - @tailwindcss/postcss - TailWindcss - Eslint - Eslint -Config -next - @eslint/eslint/eslinTrages, agregó 333333333333333333333333333333333333333I 337 paquetes en 16S 137 Los paquetes buscan Financing Ejecutar `Fondo NPM` para obtener detalles de 0 vulnerabilidades inicializadas un repositorio GIT. ¡Éxito! Creado Generator-Generator Starter AT /Image-Generator-Starter

CD Image Generator-Starter

OPERAI_API_KEY = SK -... OPERAI_MODEL = DALL-E-3 OPERAI_IMAGE_SIZE = 1024X1024 OPERAI_IMAGE_QUALity = Standard

NPM Run Dev

"Use el cliente"; import {useState} de "react"; Importar imagen de "Next/Image"; Exportar función predeterminada home () {// estado para la entrada del usuario (indicador de la imagen) // El indicador de generación de imágenes ingresado por el usuario const [indic, setPrompt] = useState (""); // Estado para almacenar URL de imagen generada // URL de la imagen generada const [imageUrl, setImageUrl] = useState (""); // Estado del indicador de carga // Cargando el indicador const [Carga, Stretloading] = useState (falso); // Estado del mensaje de error // para almacenar mensajes de error const [error, setError] = useState (""); // manejar la solicitud de generación de imágenes // Solicitud de generación de imágenes de procesamiento const GenerateImage = async () => {if (! Proltic.trim ()) return; // Restablecer el estado antes de la solicitud // Inicializar el estado antes de la carga de la solicitud de solicitud (true); setError (""); setImageUrl (""); Pruebe {// Envíe la solicitud a la API interna // Enviar solicitud a API interna (/api/image) const res = await fetch ("/api/image", {método: "publicar", encabezados: {"content-type": "application/json"}, cuerpo: json.stringify ({solicit}),}); const data = await res.json (); if (res.ok && data.imageUrl) {setImageUrl (data.imageUrl); } else {setError (data.Error || "Error al generar la imagen"); }} catch (e) {console.error ("Error:", e); setError ("ocurrió un error inesperado"); } Finalmente {setloading (falso); }}; devolver (<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"> {/* Título */}<h1 className="text-2xl font-bold text-center text-white"> Generador de imágenes AI</h1> {/ * Strem Enput/Strem Enput de entrada */}<div className="space-y-2"> <label htmlFor="prompt" className="block text-sm font-medium text-gray-300" >Ingrese su mensaje de imagen</label><textarea id="prompt" rows={3} value={prompt} onChange={(e) => setPrompt (e.target.value)} classname = "w-full p-3 redondeado-lg bg-gray-700 borde de borde-gray-600 text-white focus: outline-non-non focus: ring-2 focus: ring-green-400 resize-none" placeholder = "eg a un button de la ciudad futurista en el sol, el arte digital"/> </div> {/ * Botón de genear}/generar}/generar}/generar}/generar botón} onClick = {GenerateImage} Disabled = {Loading} className = "W-Full Py-3 redondeado-LG BG-Green-500 Hover: BG-Green-600-Black-Black-Semibold Diable: Opacity-50 Transición"> {Carga? "Generación ...": "Generar imagen"} </botón> {/ * Mensaje de error/error Pantalla */} {error && (<div classname = "text-400 text-sm text-center"> {error} </div>)} {/ * imagen de imagen/visual H- [512PX] "> <Image src = {imageUrl} alt =" resultado generado "rellena className no optimizado =" redondeado-lg contenimiento de objeto borde de borde-700 "/> </div>)} </div> </main>); }

const [indic, setPrompt] = useState (""); const [imageUrl, setImageUrl] = useState (""); const [carga, setloading] = useState (falso); const [error, setError] = useState ("");

const GenerateImage = async () => {if (! Proltic.trim ()) return; setloading (verdadero); setError (""); setImageUrl (""); Pruebe {const res = await fetch ("/api/image", {método: "post", encabezados: {"content-type": "application/json"}, body: json.stringify ({pronto}),}); const data = await res.json (); if (res.ok && data.imageUrl) {setImageUrl (data.imageUrl); } else {setError (data.Error || "Error al generar la imagen"); }} catch (e) {console.error ("Error:", e); setError ("ocurrió un error inesperado"); } Finalmente {setloading (falso); }};

<textarea id="prompt" rows={3} value={prompt} onChange={(e) =>setPrompt (e.target.value)} classname = "w-full p-3 redondeado-lg bg-gris-700 borde de borde-gray-600 text-white focus: outline-non focus: ring-2 focus: ring-green-400 resize-non" shitleper = "eg a gat surfing on waves, arte digital" /> <bootin ongcLick = {{{{{{{{{{{{{{{{{{{} {{{{{{{{{{{{{ className = "W-Full Py-3 redondeado-LG BG-Green-500 Hover: BG-Green-600-Black-Black-Black Font-Semibold Desactivado: Opacidad-50 Transición"> {¿Carga? "Generando ...": "Generar imagen"} </boton>

{error && (<div className="text-red-400 text-sm text-center"> {error}</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/ruta.ts import {nextuCeest, nexTResponse} de "Next/Server"; // Publicar controlador para la generación de imágenes utilizando la API de OpenAI // Generar imágenes utilizando el manejador de la API de OpenAI Post Exportar Función Async Post (Req: NexTequest) {// analice el indicador del cuerpo de solicitud // Obtenga el indicador del cuerpo de solicitud const {indic} = await req.json (); // Validar entrada // verifique si el indicador se especifica si (! Ind) {return nextResponse.json ({error: "Se requiere un indicador"}, {estado: 400}); } try {// Cargue la configuración de las variables de entorno (con valores de respaldo) // Cargue la configuración de las variables de entorno (si no, el valor predeterminado) const modelo = proceso.env.openai_model || "Dall-E-3"; const size = process.env.openai_image_size || "1024x1024"; constante const = process.env.openai_image_quality || "estándar"; // Enviar solicitud al punto final de generación de imágenes de OpenAI // Enviar solicitud a la generación de imágenes de OpenAi Respuesta constante = ALEA FETCH ("https://api.openai.com/v1/images/generations", {método: "post", encabezados: {autorización: `bearer $ {process.env.openai_api_key}`, contento ":", Aplicación/jon. }, cuerpo: json.stringify ({modelo, // eg, "dall-e-3" indicador, // indicador del usuario para el tamaño de la generación de imágenes, // eg, "1024x1024" calidad, // "estándar" o "hd" n: 1, // número de imágenes para generar}),}); const data = await respuesta.json (); // manejar la respuesta de error de la API // qué hacer si se devuelve un error de API si (data.error) {console.error ("error de api openai:", data.error); return nextResponse.json ({error: "Falló de generación de imágenes"}, {estado: 500}); } // Extraiga la URL de imagen generada // Obtenga la URL de la imagen generada const imageUrl = data.data? // Devuelve la URL de la imagen al cliente // Devuelve la URL de la imagen al cliente return nextResponse.json ({imageUrl}); } capt (error) {// manejar errores inesperados del servidor // manejar errores de servidor inesperados console.error ("Error del servidor:", error); return nextResponse.json ({Error: "Error de servidor interno"}, {estado: 500}); }}

import {nextuCeest, nexTResponse} de "Next/Server"; Exportar Async Function Post (req: nexTuCeest) {const {pronto} = await req.json ();

const respuesta = await fetch ("https://api.openai.com/v1/images/generations", {método: "post", encabezados: {autorización: `bearer $ {process.env.openai_api_key}`, "Content-type": "Application/JSon",}, Body: JSON.STRINGIFIFY ({Model Process.env.openai_model || const data = await respuesta.json ();

  if (data.error) {console.error (data.error); return nextResponse.json ({error: "Falló de generación de imágenes"}, {estado: 500}); } const imageUrl = data.data? return nexTResponse.json ({imageUrl}); }