Spring boot +React集成ChatGPT 智能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>

    )
}

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