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 (
        

            

                
 诗绣智能AI助手
                

                    
 AI助手模式切换
                    
                        聊天模式
                        图片模式
                    
                
                
 诗绣工具推荐
                

                    showModal("https://file.tlzcf.vip/img.png")}>
                        诗绣IMG库
                    
                    showModal("https://file.tlzcf.vip/gjx.png")}>
                        诗绣工具箱
                    
                    showModal("https://file.tlzcf.vip/zl.png")}>
                        王者战力助手
                    
                    showModal("https://file.tlzcf.vip/wk.png")}>
                        网课答案助手
                    
                    showModal("https://file.tlzcf.vip/ssssss.png")}>
                        诗绣壁纸公众号
                    
                        诗绣壁纸网入口 
                
                

                    
今日访问次数为：无限
                    
当前有效时间为：长期
                    

                        
                        验证
                    
                
            
            

                
 Welcome ChatGPT
                

                    

                        {chatList && chatList.map(item => (
                                

                                    {item.uid === '1001' &&
                                    

                                        

                                            

                                                {item.name}
                                                 
                                                {item.time}
                                            
                                            
                                        
                                        

                                            {item.msg}
                                        
                                    
                                    }
                                    {item.uid === '1002' &&
                                    

                                        

                                            
                                            

                                                {item.name}
                                                 
                                                {item.time}
                                            
                                        
                                        

                                            {item.type === 1 && }
                                            {item.type === 2 && }
                                        
                                    
                                    }
                                
                            )
                        )
                        }
                    
                    

                        
                         send()} disabled={isButtonDisabled}
                                className="chat-button">{isButtonDisabled ? `请等待${countdown}秒` : '点击按钮'}
                    
                    }
                        message={
                            
                                离开家乡以前我以为我想要的是雄心壮志和鹏程万里，后来才发现，我们不断追逐的也不过是饱餐一顿和一个不被闹钟吵醒的清晨。
                            
                        }
                    />
                
            
            
                
            
        

    )
}

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