在这里插入代码片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}/> <spanclassName="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> <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> <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><AlertclassName="item-alert"bannertype="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:9000/
