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

摘要

这是本系列的第四篇文章,在之前的三篇文章,我们主要实现了对话的功能。通过使用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路由,用来实现我们文生图的接口:

js 复制代码
// routers/picture.js

var express = require('express');
var router = express.Router();
const OpenAi = require('openai');
require('dotenv').config();
const cors = require('cors'); // 引入 cors

const 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引入。

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

github.com/TeacherXin/...

前端部分

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

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

js 复制代码
// src/page/components/SkillList/store.ts

import { 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属性,用来决定是否是图片类型。

js 复制代码
// src/page/components/DialogCardList/store.ts

interface DialogCard {
    question: string;
    answer: string;
    cardId: string;
    isPicture?: boolean;
}

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

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

js 复制代码
// src/page/components/DialogInput/index.tsx

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

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

js 复制代码
{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>
    );
})}

更多详细的前端代码可以查看下面的提交记录:

github.com/TeacherXin/...

最后,我们可以看下实现的效果:

相关推荐
樱花开了几轉8 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A8 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6668 小时前
React与Rudex的合奏
前端·react.js·前端框架
若梦plus8 小时前
React之react-dom中的dom-server与dom-client
前端·react.js
若梦plus8 小时前
react-router-dom中的几种路由详解
前端·react.js
讨厌吃蛋黄酥13 小时前
React样式冲突终结者:CSS模块化+Vite全链路实战指南🔥
前端·javascript·react.js
Alchemist0113 小时前
React复习:基础组件+组件通信
react.js
tianchang14 小时前
React Hook 解析(一):useCallback 与 useMemo
前端·react.js
一颗奇趣蛋15 小时前
React- useMemo & useCallback
前端·react.js
樱花开了几轉16 小时前
React中的合成事件解释和理解
前端·javascript·react.js