在這里插入代碼片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("");
// 聊天數(shù)據(jù)
const [chatList, setChatList] = useState([
{
headImg: require('../../static/icon/chatgpt.png'),
name: 'ChatGPT',
time: new Date().toLocaleTimeString(),
msg: ' 您好，詩繡智能AI助手為您服務(wù)。',
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")}>
王者戰(zhàn)力助手
</Button>
<Button className="tools-button" type="primary" onClick={()=>showModal("https://file.tlzcf.vip/wk.png")}>
網(wǎng)課答案助手
</Button>
<Button className="tools-button" type="primary" onClick={()=>showModal("https://file.tlzcf.vip/ssssss.png")}>
詩繡壁紙公眾號
</Button>
<a className="tools-a" target="_blank" > 詩繡壁紙網(wǎng)入口 </a>
</div>
<div className="chat-auth">
<p>今日訪問次數(shù)為：無限</p>
<p>當(dāng)前有效時間為：長期</p>
<div className="chat-kami">
<Input className="chat-kami-left" placeholder="請輸入授權(quán)卡密"/>
<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}>
離開家鄉(xiāng)以前我以為我想要的是雄心壯志和鵬程萬里，后來才發(fā)現(xiàn)，我們不斷追逐的也不過是飽餐一頓和一個不被鬧鐘吵醒的清晨。
</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/
文章來源地址http://www.zghlxwxcb.cn/news/detail-522403.html
文章來源：http://www.zghlxwxcb.cn/news/detail-522403.html
到了這里，關(guān)于Spring boot +React集成ChatGPT 智能AI的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
