Spring boot +React集成ChatGPT 智能AI_springboot集成ai

在这里插入代码片import {Button, Input, Radio,Alert,Modal  } from 'antd';
import Marquee from 'react-fast-marquee';
import {ChromeOutlined,WifiOutlined,AimOutlined } from '@ant-design/icons';
import React, {useEffect, useState, useRef} from 'react';
import chatgptPng from '../../static/icon/chatgpt.png'
import meJpg from '../../static/icon/me.jpg'
import './openai.css'
import {sendMsgApi} from "../../services/openai/openaiService";

export default function OpenAi() {

    const [isButtonDisabled, setIsButtonDisabled] = useState(false);
    const [countdown, setCountdown] = useState(20);
    const containerRef = useRef(null);
    const [inputValue, setInputValue] = useState('');
    const [value, setValue] = useState(1);
    const [imgUrl, setImgUrl] = useState("");
    // 聊天数据
    const [chatList, setChatList] = useState([
        {
            headImg: require('../../static/icon/chatgpt.png'),
            name: 'ChatGPT',
            time: new Date().toLocaleTimeString(),
            msg: ' 您好，诗绣智能AI助手为您服务。',
            chatType: 0,
            uid: '1002',
            type: 1
        }
    ])

    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = (url) => {
        setImgUrl("")
        setImgUrl(url)
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const onChange = (e) => {
        setValue(e.target.value);
    };
    useEffect(() => {
        if (isButtonDisabled) {
            const timer = setInterval(() => {
                setCountdown(prevCountdown => prevCountdown - 1);
            }, 1000);

            setTimeout(() => {
                setIsButtonDisabled(false);
                setCountdown(20);
                clearInterval(timer);
            }, 20000);

            return () => {
                clearInterval(timer);
            };
        }
    }, [isButtonDisabled]);

    const handleInputChange = (event) => {
        setInputValue(event.target.value);
    };

    const send = () => {
        if (inputValue.trim() === '') {
            alert('输入框不能为空');
            return;
        }
        setIsButtonDisabled(true);
        const obj = {
            headImg: require('../../static/icon/chatgpt.png'),
            name: '初出茅庐',
            time: new Date().toLocaleTimeString(),
            msg: inputValue,
            chatType: 0,
            uid: '1001'
        }
        let news = chatList.concat(obj)
        setChatList(news)
        setInputValue('')
        sendMsgApi({type: value, question: inputValue}).then((res) => {
            if (res.status_code === 200) {
                const item = {
                    headImg: require('../../static/icon/chatgpt.png'),
                    name: 'ChatGPT',
                    time: new Date().toLocaleTimeString(),
                    msg: res.data,
                    chatType: 0,
                    uid: '1002',
                    type: value === 1 ? 1 : 2
                }
                let concat = news.concat(item);
                setChatList(concat)
                setTimeout(() => {
                    containerRef.current.scrollTop = containerRef.current.scrollHeight;
                }, 0);
            }
        })
        setTimeout(() => {
            containerRef.current.scrollTop = containerRef.current.scrollHeight;
        }, 0);
    }
    return (
        <div className="chatHome">
            <div className="chatLeft">
                <p className="chat-title"><ChromeOutlined   spin /> 诗绣智能AI助手</p>
                <div className="openai-type-class">
                    <p className="tool-a-title"><AimOutlined spin /> AI助手模式切换</p>
                    <Radio.Group onChange={onChange} value={value} style={{ display: 'grid', gridTemplateColumns: 'auto auto' }}>
                        <Radio value={1} style={{ color: 'cornflowerblue' }}>聊天模式</Radio>
                        <Radio value={2} style={{ color: 'cornflowerblue' }}>图片模式</Radio>
                    </Radio.Group>
                </div>
                <p className="tool-a-title"><AimOutlined spin /> 诗绣工具推荐</p>
                <div className="div-tools">
                    <Button className="tools-button" type="primary" onClick={()=>showModal("https://file.tlzcf.vip/img.png")}>
                        诗绣IMG库
                    </Button>
                    <Button className="tools-button" type="primary" onClick={()=>showModal("https://file.tlzcf.vip/gjx.png")}>
                        诗绣工具箱
                    </Button>
                    <Button className="tools-button" type="primary" onClick={()=>showModal("https://file.tlzcf.vip/zl.png")}>
                        王者战力助手
                    </Button>
                    <Button className="tools-button" type="primary" onClick={()=>showModal("https://file.tlzcf.vip/wk.png")}>
                        网课答案助手
                    </Button>
                    <Button className="tools-button" type="primary" onClick={()=>showModal("https://file.tlzcf.vip/ssssss.png")}>
                        诗绣壁纸公众号
                    </Button>
                       <a className="tools-a" target="_blank" href="https://www.tlzcf.vip/app/#/"> 诗绣壁纸网入口 </a>
                </div>
                <div className="chat-auth">
                    <p>今日访问次数为：无限</p>
                    <p>当前有效时间为：长期</p>
                    <div className="chat-kami">
                        <Input className="chat-kami-left" placeholder="请输入授权卡密"/>
                        <Button className="chat-kami-right">验证</Button>
                    </div>
                </div>
            </div>
            <div className="chatRight">
                <p className="chatgpt-title"><img className="chatgpt-png" src={chatgptPng}/> <span
                    className="chatgpt-title-span">Welcome ChatGPT</span></p>
                <div className="chatRight-conent">
                    <div className="chat-conent-text" ref={containerRef}>
                        {chatList && chatList.map(item => (
                                <div className="chat-conent-item">
                                    {item.uid === '1001' &&
                                    <div className="chat-item-right">
                                        <div className="chat-title-item-conent-right">
                                            <div className="chat-title-name-right">
                                                <span>{item.name}</span>
                                                &nbsp;
                                                <span className="chat-title-time">{item.time}</span>
                                            </div>
                                            <img className="chat-title-item-img-right" src={meJpg}/>
                                        </div>
                                        <div className="chat-item-conent-txt-right">
                                            {item.msg}
                                        </div>
                                    </div>
                                    }
                                    {item.uid === '1002' &&
                                    <div className="chat-item-left">
                                        <div className="chat-title-item-conent-left">
                                            <img className="chat-title-item-img-left" src={chatgptPng}/>
                                            <div className="chat-title-name-left">
                                                <span>{item.name}</span>
                                                &nbsp;
                                                <span className="chat-title-time">{item.time}</span>
                                            </div>
                                        </div>
                                        <div className="chat-item-conent-txt-left">
                                            {item.type === 1 && <span dangerouslySetInnerHTML={{__html:item.msg}}></span>}
                                            {item.type === 2 && <img className="item-chatImg" src={item.msg}/>}
                                        </div>
                                    </div>
                                    }
                                </div>
                            )
                        )
                        }
                    </div>
                    <div className="chat-div-button">
                        <Input className="chat-input" value={inputValue} onChange={handleInputChange}/>
                        <Button onClick={() => send()} disabled={isButtonDisabled}
                                className="chat-button">{isButtonDisabled ? `请等待${countdown}秒` : '点击按钮'}</Button>
                    </div>
                    <Alert
                        className="item-alert"
                        banner
                        type="info"
                        icon={<WifiOutlined/>}
                        message={
                            <Marquee speed={60} pauseOnHover gradient={false}>
                                离开家乡以前我以为我想要的是雄心壮志和鹏程万里，后来才发现，我们不断追逐的也不过是饱餐一顿和一个不被闹钟吵醒的清晨。
                            </Marquee>
                        }
                    />
                </div>
            </div>
            <Modal title="工具详情" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}  footer={null}>
                <img className="img-tools" src={imgUrl}/>
            </Modal>
        </div>

    )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214

线上体验地址：http://tlzcf.vip:8679/