当前位置：首页 > news >正文

从零实现一个GPT 【React + Express】--- 【4】实现文生图的功能

news 2025/7/12 7:04:26

摘要

这是本系列的第四篇文章，在之前的三篇文章，我们主要实现了对话的功能。通过使用SSE和GPT模型，完成了一个能够自由对话的产品。

在之前的文章里，我们同时也处理了markdown和代码的格式。对话方面就告一段落，后续我们就要针对特定的功能去实现了，而这一篇，主要来实现一下文生图的功能。

使用dall-e-3模型

之前我们在做对话的时候，使用的模型是gpt-3.5-turbo，但是gpt-3.5-turbo模型是不支持文生图的功能的。所以这里我们要使用一个新的模型dall-e-3。dall-e-3是OpenAI开发的第三代文本到图像生成模型。

之前我们做对话的时候，就是调用模型，然后再通过SSE将内容返回给前端。而这次，调用dall-e-3模型会更简单，只需要将对应的query传给模型，模型会返回一个图片的url，至于图片的存储都不需要我们去管。

这么简单的情况下，我们就来直接实现后端部分。

这里我们在router下新建一个picture路由，用来实现我们文生图的接口：


// routers/picture.jsvar express = require('express');
var router = express.Router();
const OpenAi = require('openai');
require('dotenv').config();
const cors = require('cors'); // 引入 corsconst client = new OpenAi({apiKey: process.env.OPENAI_API_KEY, // 使用环境变量加载 API 密钥baseURL: 'https://api.chatanywhere.tech/v1',
})router.use(cors());/* GET users listing. */router.post('/picture', async function(req, res) {const { message } = req.body;console.log(message);const imageRes = await client.images.generate({prompt: message,n: 1,size: '1024x1024',model: 'dall-e-3',});console.log(imageRes.data[0])res.json({code: 0,msg: '生成成功',data: imageRes.data[0].url,cardId: Date.now()});res.end();
});module.exports = router;

很简单的一个post请求，设置好模型的参数然后把url返回即可，最后在app.js引入。

到这里我们的后端在本篇就实现完了，具体的提交可以看下面：

https://github.com/TeacherXin/gpt-xin-server/commit/7b29b485a21de243c90faa5757c6d94d2a6eda09

前端部分

有了接口，我们就可以实现前端功能了，首先我们在输入框的下面增加一个技能选择，这里的UI我就不贴代码了：

在这里插入图片描述

当选中的图像生成这个技能，并且发送query的时候，我们就调用picture这个接口，所以我们需要将是否选中技能这个状态也保存下来：

// src/page/components/SkillList/store.tsimport { create } from 'zustand';interface SkillStore {selectedSkill: 'picture' | '';setSelectedSkill: (skill: 'picture' | '') => void;
}export const useSkillStore = create<SkillStore>((set) => ({selectedSkill: '',setSelectedSkill: (skill) => set({ selectedSkill: skill }),
}))

现在呢，我们的dialogCard，就不一定是文本类型了。所以我们加一个isPicture属性，用来决定是否是图片类型。


// src/page/components/DialogCardList/store.tsinterface DialogCard {question: string;answer: string;cardId: string;isPicture?: boolean;
}

如果是图片类型，我们的answer就是代表图片地址的url。

现在我们就可以实现生成图片的send方法了：


// src/page/components/DialogInput/index.tsxconst sendDataByPicture = (message: string) => {inputStore.setInputValue('');dialogCardListStore.addDialogCard({question: message,answer: '',cardId: '',isPicture: true,});inputStore.setInputLoading(true);axios.post('http://localhost:3002/picture', {message}, {signal: controller.signal}).then(res => {if (res.data.data && res.data.code === 0) {const { data, cardId } = res.data;dialogCardListStore.changeLastAnswer(data);dialogCardListStore.changeLastId(cardId);inputStore.setInputLoading(false);}})
}

发送完query后，先在dialogCardList里加入一个isPicture的card，然后等响应来了之后，在更新answer和id。

更新数据之后，我们现在修改我们的视图层：

{dialogCardListStore.dialogCardList.map((item, index) => {return (<div className={styles.dialogCard} key={item.cardId}><div className={styles.question}><p>{item.question}</p></div>{item.isPicture ? (<div key={item.cardId} className={styles.pictureItem}>{dialogInputStore.inputLoading && index === dialogCardListStore.dialogCardList.length - 1 ?<Spin className={styles.spin} /> :<img src={item.answer} alt="" />}</div>) : (<div className={styles.answer}><ReactMarkDown components={{ code: getCode }}>{item.answer}</ReactMarkDown></div>)}</div>);
})}