我使用next.js和Openai api-dall·e 3创建了一个图像生成应用。

$ npx create-next-app@最新映像 - 生成器启动 -  typescript✔您想使用eslint吗？ …否 /是✔您想使用尾风CSS吗？ …否 /是✔您想在`src /`目录中的代码吗？ …否 /是✔您想使用应用程序路由器吗？ （推荐）…否 /是✔您想将Turbopack用于“ Next Dev”？ …否 /是✔您想自定义导入别名（`@ /*'默认情况下）？ …否 /是在 /图像生成器启动器中创建一个新的Next.js应用程序。使用NPM。使用模板初始化项目：App -tw安装依赖项： - 反应 -  react -dom-下一个安装DevDepties： -  typescript- @ @type/node- @types/types/react- types/react- @ @type/react- type/ @type/react-doess/react-dom- @tailwindcss/postcss/postcss/postcss -paintcss -eSlint -eslint -eslint -eSlint -slint -eSlint-config-neftige 37 packity 37 packity 33333336在16S中，137个软件包正在寻找资金运行“ NPM基金”，以获取0个漏洞的详细信息，初始化了GIT存储库。成功！创建的图像生成器启动器 /图像生成器启动器

CD图像生成器启动器

OpenAI_API_KEY = SK -... OpenAi_Model = dall-e-3 Openai_image_size = 1024x1024 OpenAi_image_Quality =标准

NPM运行开发

“使用客户端”；从“ react”导入{usestate};从“下一/图像”导入图像；导出默认函数home（）{//用户输入（图像提示符）的状态//用户const [提示，setPrompt] = usestate（“”）输入的图像生成提示符; //存储生成的图像URL //生成的图像const [imageUrl，setImageUrl] = usestate（“”）; //加载指示器状态//加载标志const [加载，setloading] = usestate（false）; //错误消息状态//用于存储错误消息const [错误，setError] = usestate（“”）; //处理映像生成请求//处理图像生成请求const generateImage = async（）=> {if（！strive.trim（））return; //请求之前重置状态//在请求setloading（true）之前初始化状态; seterror（“”）; setImageUrl（“”）;尝试{//将请求发送到内部API //将请求发送到内部API（/api/image）const res =等待fetch（“/api/image”，{方法：“ post”，标题：{“ content-type”：“ application/json”}，“ application/json”}，body：json.stringify（strips}），}，}，}，}，}）; const data =等待res.json（）; if（res.ok && data.imageurl）{setImageUrl（data.imageurl）; } else {setError（data.error ||“无法生成图像。”）; }} catch（e）{console.error（“错误：”，e）; setError（“发生意外错误。”）; }最后{setloading（false）; }};返回 （<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"> {/* 标题 */}<h1 className="text-2xl font-bold text-center text-white"> AI图像发生器</h1>{/ *提示输入/提示输入字段 */}<div className="space-y-2"><label htmlFor="prompt" className="block text-sm font-medium text-gray-300" >输入您的图像提示</label><textarea id="prompt" rows={3} value={prompt} onChange={(e) =>setPrompt(e.target.value)} className="w-full p-3 rounded-lg bg-gray-700 border border-gray-600 text-white focus:outline-none focus:ring-2 focus:ring-green-400 resize-none" placeholder="eg A futuristic cityscape at sunset, digital art" /> </div> {/* Generate Button / Generate button */} <button onClick = {generateImage} disabled = {loading} className =“ W-Full Py-3圆形LG BG-Green-500 Hover：BG-Green-600 Text-Black Font-Semibold disabled disabled：opacity-50 transition-50 transition-transition”> {加载？ “生成...”：“生成映像”} </button> {/ *错误消息/错误显示 */} {error &&（<div className =“ text-red-red-400 text-red-red-sm text-sm text-center”> {error} </div>）}} {/ * <image src = {imageUrl} alt =“生成结果”填充未优化的className =“圆形lg对象 - 符合符号边框灰色-700”/> </div>）} </div> </div> </main>）; }

const [提示，set prompt] = usestate（“”）; const [imageurl，setImageUrl] = usestate（“”）; const [加载，setloading] = usestate（false）; const [error，setError] = usestate（“”）;

const generateImage = async（）=> {if（！strip.trim（））返回; setloading（true）; seterror（“”）; setImageUrl（“”）;尝试{const res =等待fetch（“/api/image”，{方法：“ post”，标题：{“ content-type”：“ application/json”}，body：json.stringify（atrive {strive}），}，}，}）; const data =等待res.json（）; if（res.ok && data.imageurl）{setImageUrl（data.imageurl）; } else {setError（data.error ||“无法生成图像。”）; }} catch（e）{console.error（“错误：”，e）; setError（“发生意外错误。”）; }最后{setloading（false）; }};

<textarea id="prompt" rows={3} value={prompt} onChange={(e) =>setPrompt（e.target.value）} className =“ w-full p-3圆形lg bg-gray-700边界边界边界灰色-600文本 - 白色焦点：列出焦点：ring-2焦点：ring-green-400 resize nosize nosize osize notize osize of-none“ losthorder”占位符= className =“ W-Full Py-3圆形LG BG-Green-500 Hover：BG-Green-600 Text-Black Font-Semibold disabled：opacity-50 Transition”> {加载？ “生成...”：“生成图像”} </button>

{错误 ＆＆ （<div className="text-red-400 text-sm text-center"> {错误}</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/route.ts import {nextrequest，nextresponse}从“ next/server”; //使用OpenAI API //使用OpenAI API Post Handler Export async函数帖子（req：nextrequest）{//从请求正域中解析提示符//从请求const {提示} =等待req.json（）; //验证输入//检查是否指定了提示，如果（！提示）{return nextresponse.json（{error：“需要提示：“需要提示”}，{状态：400}）; }尝试{//从环境变量（带后式值）加载配置//来自环境变量的加载设置（如果不是，默认值）const model = process.env.openai_model || “ dall-e-3”; const size = process.env.openai_image_size || “ 1024x1024”; const质量= process.env.openai_image_quality || “标准”; //将请求发送到OpenAI的图像生成端点//将请求发送到OpenAi的图像生成端点const ands witch = ategat Fetch（“ https：//api.openai.com/v1/images/generations'身体：JSON.STRINGIFY（{模型，// EG，“ dall-e-3”提示符，//用户提示图像生成大小的提示，// eg，“ 1024x1024”质量，// // //“标准”或“ hd” n：1，// // to Generation}的图像}） const data =等待响应.json（）; //如果（data.error）{Console.Error返回API错误，请处理API错误响应//该怎么办（“ OpenAI API错误：”，data.error）;返回nextresponse.json（{error：“图像生成失败”}，{状态：500}）; } //提取生成的图像URL //获取生成的Image const imageUrl = data.data?. [0]？url; //将映像URL返回客户端//返回映像URL返回客户端返回nextresponse.json（{imageurl}）; } catch（error）{//处理意外服务器错误//处理意外的服务器错误console.error（“服务器错误：”，错误）;返回nextresponse.json（{error：“内部服务器错误”}，{状态：500}）; }}}

从“ next/server”导入{nextrequest，nextresponse};导出异步函数帖子（req：nextrequest）{const {stress} =等待req.json（）;

const响应=等待fetch（“ https://api.openai.com/v1/images/generations”，{方法：“ post”，标题：{授权：'bearer $ {process.env.env.openai_api_key} process.env.openai_model ||。 const data =等待响应.json（）;

  if（data.error）{console.error（data.error）;返回nextresponse.json（{error：“图像生成失败”}，{状态：500}）; } const imageUrl = data.data?. [0]？返回nextresponse.json（{imageurl}）; }