在这里插入代码片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>
<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>
<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:9000/
