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}/> <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>&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><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:8679/

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/6478.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

中文调教指南,100个提升ChatGPT输出质量的中文prompts

最近这段时间ChatGPT的风实在是太大了&#xff0c;人工智能带给大家的冲击一波又一波&#xff0c;3月27日&#xff0c;根据高盛&#xff08;Goldman Sachs&#xff09;研究报告显示&#xff0c;以ChatGPT为代表的生成式AI产品&#xff0c;将对美国和欧洲三分之二工作岗位造成影…

Wombat:93%ChatGPT性能,无需RLHF就能对齐人类的语言模型

文 | zzy 文章地址: https://arxiv.org/abs/2304.05302v1 训练代码&#xff1a; https://github.com/GanjinZero/RRHF 模型权重&#xff1a; https://huggingface.co/GanjinZero/wombat-7b-delta 各个大模型的研究测试传送门 阿里通义千问传送门&#xff1a; https://tongyi.…

史诗级的突破,如何让GPT接口调用能绕过4000 tokens 的长度限制

最近很高兴有机会较为全面深入地研究GPT / ChatGPT这一热门技术&#xff0c;学到了不少东西&#xff0c;当然也遇到不少问题&#xff0c;其中一个问题就是&#xff0c;所有的GPT模型&#xff0c;都会有输入输出长度&#xff08;加起来&#xff09;的限制这个问题&#xff0c;就…

小扎、马斯克宣战ChatGPT!Meta和推特组建顶级AI团队,硅谷硝烟四起

【导读】ChatGPT大厂混战&#xff0c;怎能少得了Meta和推特&#xff1f;近日&#xff0c;小扎和马斯克也官宣下场&#xff0c;要做自己的ChatGPT了。 ChatGPT的爆火&#xff0c;直接改变了整个硅谷大厂的格局。 微软的步步出招&#xff0c;倒逼谷歌走出固步自封的境地&#x…

牛逼,玩转 ChatGPT!

ChatGPT是一种由OpenAI开发的人工智能模型&#xff0c;它可以模拟人类的对话交流&#xff0c;对话可以涉及各种话题。使用ChatGPT可以进行各种操作&#xff0c;例如自然语言生成、文本摘要、语言翻译、文本分类、问答系统等。下面是ChatGPT网站的可用链接&#xff0c;由于网络限…

对话冯·诺依曼理论奖得主叶荫宇:ChatGPT于行业智能,更像是全科医生对专科医生|数字思考者50人...

斯坦福大学讲席教授、冯诺依曼理论奖获得者&#xff1a;叶荫宇 ▎ChatGPT包罗万象&#xff0c;更像是一个全科医生&#xff0c;而运筹学以及求解器&#xff0c;则像是专科医生。 作者丨 韩敬娴 本文首发钛媒体APP 国际市场震荡不定&#xff0c;供应链波动剧烈、芯片短缺、碳排限…

开篇词:大模型国内应用落地思考与实践

自从GPT-3发布以来&#xff0c;随着以ChatGPT为首的应用工具一夜爆火&#xff0c;人工智能似乎找到了应用层面的合适出口&#xff0c;让大众、用户和产业&#xff0c;看到了大模型人工智能所具备的应用潜力。 国内外关于大模型的研究层出不群&#xff0c;各大厂都在进行大模型…

关于ChatGPT的一切;CUDA入门之矩阵乘;PyTorch 2.0发布|AI系统前沿动态

1.截止目前&#xff0c;关于ChatGPT的一切 ChatGPT是GPT3的一大飞跃&#xff0c;就像GPT3本身是GPT2的质的飞跃一样。目前&#xff0c;关于ChatGPT的解读内容数量和种类繁多&#xff0c;让人跟上非常困难&#xff0c;容易患错失恐惧症。因此&#xff0c;作者整理了一个笔记&…

ChatGPT也太神奇了

前段时间找了很多chatGPT国内基本上发现都是要收费的&#xff0c;价格贵的太离谱了。好在我再三搜索下找到了一款国内封装过的免费chatGPT&#xff0c;功能还是不错的&#xff0c;就是这回复速度有点慢&#xff0c;其实也不是不能用就是慢

2023财年Q4业绩继续下滑,ChatGPT能驱动英伟达重回巅峰吗?

近年来&#xff0c;全球科创风口不断变换&#xff0c;虚拟货币、元宇宙等轮番登场&#xff0c;不少企业匆忙上台又很快谢幕&#xff0c;但在此期间&#xff0c;有些企业扮演淘金潮中“卖水人”的角色&#xff0c;却也能够见证历史且屹立不倒。不过&#xff0c;这并不意味着其可…

【关于ChatGPT的30个问题】1、ChatGPT是什么?/ By 禅与计算机程序设计艺术

ChatGPT是什么? 目录 ChatGPT是什么? ChatGPT简介及其应用 第一部分:ChatGPT的基本原理

ChatGPT实现原理简析

ChatGPT是OpenAI开发的一款针对对话的语言模型。它的实现原理主要基于Transformer和GPT模型。 Transformer是Google提出的一种注意力机制,它采用Encoder-Decoder结构。Encoder用于对输入的句子进行编码,生成输入的序列表示。Decoder则使用编码序列和目标序列生成的注意力来生成…

ChatGPT批量生成文章软件:创意无限,内容源源不断

ChatGPT是一种基于人工智能技术的自然语言处理模型&#xff0c;它能够生成各种主题的文章。这种软件具有创意无限、内容源源不断的特点&#xff0c;能够满足用户对于大量文章的需求。 方面一&#xff1a;文化艺术 ChatGPT软件可以生成关于文化艺术的文章&#xff0c;包括绘画、…

ChatGPT伪原创文章的应用与发展

ChatGPT是一种基于人工智能技术的自然语言处理模型&#xff0c;它能够生成逼真的、具有上下文连贯性的文本。近年来&#xff0c;ChatGPT在各个领域的应用越来越广泛&#xff0c;其发展潜力也逐渐被人们所认识。本文将从多个方面对ChatGPT的应用与发展进行详细阐述。 ChatGPT在…

ChatGPT原创内容生成器有哪些优缺点

ChatGPT原创内容生成器包括我们的文字、图片和AI视屏生成&#xff0c;原创内容生成器已经在众多行业得到了广泛的使用。随着人工智能技术的发展&#xff0c;原创内容生成器的使用也越来越普及。 ChatGPT原创内容生成器能够自动生成各种形式的文章、报告甚至小说&#xff0c;通…

ChatGPT文章自动发布WordPress

WordPress可以用ChatGPT发文章吗&#xff1f;答案是肯定的&#xff0c;ChatGPT官方有提供api接口&#xff0c;多以目前有很多的SEO工具具有自动文章生成自动发布的功能&#xff0c;使用SEO工具&#xff0c;我们可以通过疑问词和关键词进行文章生成&#xff0c;并定时发布到我们…

chatgpt如何自动发布原创文章(火影智能AI文章伪原创)

ChatGPT作为一个基于 GPT-3.5 接口的AI机器人&#xff0c;并不能自动发布原创文章&#xff0c;它只能在创建和生成文章的过程中提供帮助。 要自动发布原创文章&#xff0c;需要编写脚本或使用可编程自动化工具&#xff0c;将ChatGPT生成的文章与发布平台进行连接。以下是一个简…

ChatGPT自动生成发布原创文章seo营销系统开发

ChatGPT自动生成发布原创文章seo营销系统开发 注&#xff1a;此系统性质为&#xff0c;依据你设置关键词类(你要推广的行业关键词&#xff0c;如我们的关键词可为“小程序开发”&#xff09;&#xff0c;然后系统自动生成发布海量原创文章&#xff0c;以达到搜索引擎收录seo目…

ChatGPT批量生成文章软件:助力创作高效快捷文章

随着人工智能技术的不断发展&#xff0c;ChatGPT批量生成文章软件已经成为了一种强大的创作工具。它能够通过自然语言处理和机器学习算法&#xff0c;快速生成高质量的文章&#xff0c;为创作者提供了高效快捷的创作体验。本文将从随机8-20个方面对ChatGPT批量生成文章软件进行…

Bito:一款 iead/webstorm 神级插件,由 ChatGPT 团队开发,堪称辅助神器

前言&#xff1a; idea(后端)&#xff0c;webstorm(前端)中可以用的一款辅助插件&#xff1a;Bito 个人尝试体验效果&#xff1a; 优点是&#xff1a;可以自动完成一些场景代码。 缺点&#xff1a;太慢了&#xff0c;大部分时间一直转圈 摘取文档&#xff1a; 什么是Bito&…