位置: IT常识 - 正文

js调用gpt3.5(支持流回显、高频功能)(js调用函数的几种方法)

编辑:rootadmin
js调用gpt3.5(支持流回显、高频功能)

推荐整理分享js调用gpt3.5(支持流回显、高频功能)(js调用函数的几种方法),希望有所帮助,仅作参考,欢迎阅读内容。

js调用gpt3.5(支持流回显、高频功能)(js调用函数的几种方法)

文章相关热门搜索词:js调用js,js调用go,调用js函数,grpc js 调用,js调用go,js调用get请求,js调用js,js调用go,内容如对您有帮助,希望把文章链接给更多的朋友!

参考链接:直接在前端调用 GPT-3 API

效果图: 查看在线demo(要梯子)

注意: 1. 需要apiKey,自用安全,不要给别人 2. 需要梯子 3. 选择稳定、人少的代理ip 4. 不要频繁切换ip,防止封号 5. api调用上限高,请遵守openAI审核政策 [doge]

<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>ChatGPT Web Example</title></head><body> <div id="chatgpt_demo_container"></div></body><!-- Load React. --><!-- Note: when deploying, replace "development.js" with "production.min.js". --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script><!-- Load our React component. --><script type="text/babel"> // openAI接口文档 https://platform.openai.com/docs/guides/chat const e = React.createElement; class RootComponent extends React.Component { state = { endpoint: "https://api.openai.com/v1/chat/completions", apiKey: localStorage.getItem("localApiKey") || "", model: "gpt-3.5-turbo", temperature: 0.7, max_tokens: 1000, overTime: 30000, historyMessageNum: undefined, historyMessage: [], prompts: [{ role: "system", content: "" }], nextPrompts: [], question: "", loading: false, controller: null, conversationId: localStorage.getItem("localConversionId") || "conversion1", conversationIds: ["conversion1", "conversion2", "conversion3"], }; constructor(props) { super(props); } addMessage(text, sender) { let historyMessage = this.state.historyMessage; if ( sender !== "assistant" || historyMessage[historyMessage.length - 1].role !== "assistant" ) { historyMessage = [ ...this.state.historyMessage.filter( (v) => ["system", "user", "assistant"].includes(v.role) && v.content !== "" ), { role: sender, content: text, time: Date.now() }, ]; } else { historyMessage[historyMessage.length - 1].content += text; } this.setState({ historyMessage }); setTimeout(() => { this.scrollToBottom(sender !== "assistant"); }, 0); } editMessage(idx) { this.stopStreamFetch(); this.state.question = this.state.historyMessage[idx].content; const historyMessage = this.state.historyMessage.slice(0, idx); this.setState({ historyMessage }); } stopStreamFetch = () => { if (this.state.controller) { this.state.controller.abort("__ignore"); } }; regenerateStreamFetch = () => { this.stopStreamFetch(); if ( this.state.historyMessage.length && this.state.historyMessage[this.state.historyMessage.length - 1].role !== "user" ) this.setState({ historyMessage: this.state.historyMessage.slice(0, -1), }); setTimeout(() => { this.handleSearch(true); }, 0); }; async getResponseFromAPI(text) { const controller = new AbortController(); this.setState({ controller }); const signal = controller.signal; const timeout = setTimeout(() => { controller.abort(); }, this.state.overTime); const messages = [ ...this.state.historyMessage, { role: "user", content: text }, ] .filter( (v) => ["system", "user", "assistant"].includes(v.role) && v.content ) .map((v) => ({ role: v.role, content: v.content })) .slice(-this.state.historyMessageNum - 1); // 上文消息 const response = await fetch(this.state.endpoint, { signal, method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${this.state.apiKey}`, }, body: JSON.stringify({ model: this.state.model, messages: this.state.prompts .concat( messages, this.state.nextPrompts.length ? this.state.nextPrompts : [] ) .filter((v) => v), max_tokens: this.state.max_tokens, n: 1, stop: null, temperature: this.state.temperature, stream: true, }), }); clearTimeout(timeout); if (!response.ok) { const { error } = await response.json(); throw new Error(error.message || error.code); } const reader = response.body.getReader(); const decoder = new TextDecoder("utf-8"); const stream = new ReadableStream({ start(controller) { return pump(); function pump() { return reader.read().then(({ done, value }) => { // When no more data needs to be consumed, close the stream if (done) { controller.close(); return; } // Enqueue the next data chunk into our target stream // 'data: {"id":"chatcmpl-705I7nqSPYDvCTBv3OdNMatVEI85o","object":"chat.completion.chunk","created":1680254695,"model":"gpt-3.5-turbo-0301","choices":[{"delta":{"role":"assistant"},"index":0,"finish_reason":null}]}\n\ndata: {"id":"chatcmpl-705I7nqSPYDvCTBv3OdNMatVEI85o","object":"chat.completion.chunk","created":1680254695,"model":"gpt-3.5-turbo-0301","choices":[{"delta":{"content":"ä½ "},"index":0,"finish_reason":null}]}\n\n' // 'data: {"id":"chatcmpl-705I7nqSPYDvCTBv3OdNMatVEI85o","object":"chat.completion.chunk","created":1680254695,"model":"gpt-3.5-turbo-0301","choices":[{"delta":{"content":"好"},"index":0,"finish_reason":null}]}\n\n' // 'data: {"id":"chatcmpl-705I7nqSPYDvCTBv3OdNMatVEI85o","object":"chat.completion.chunk","created":1680254695,"model":"gpt-3.5-turbo-0301","choices":[{"delta":{"content":"ï¼\x81"},"index":0,"finish_reason":null}]}\n\n' // '[DONE]\n\n' let text = ""; const str = decoder.decode(value); const strs = str.split("data: ").filter((v) => v); for (let i = 0; i < strs.length; i++) { const val = strs[i]; if (val.includes("[DONE]")) { controller.close(); return; } const data = JSON.parse(val); data.choices[0].delta.content && (text += data.choices[0].delta.content); } controller.enqueue(text); return pump(); }); } }, }); return new Response(stream); } handleSearch(regenerateFlag) { const input = this.state.question; if (!regenerateFlag) { if (!input) { alert("请输入问题"); return; } this.addMessage(input, "user"); this.setState({ question: "" }); } this.state.loading = true; // 使用 OpenAI API 获取 ChatGPT 的回答 this.getResponseFromAPI(input) .then(async (response) => { if (!response.ok) { const error = await response.json(); throw new Error(error.error); } const data = response.body; if (!data) throw new Error("No data"); const reader = data.getReader(); let done = false; while (!done) { const { value, done: readerDone } = await reader.read(); if (value) { this.addMessage(value, "assistant"); this.scrollToBottom(); } done = readerDone; } }) .catch((error) => { if (this.state.controller.signal.reason === "__ignore") { return; } console.log('-------------error', this.state.controller.signal, this.state.controller.signal.reason, error, error.name, error.message); this.addMessage( error.name === "AbortError" ? "Network Error" : error.message, "warning" ); }) .finally(() => { this.setState({ loading: false }); }); } handleChangePromots = () => { const input = prompt( `请输入你的前置引导词`, this.state.prompts[0].content || `e.g. CR: Capacity and Role(能力与角色)。你希望 ChatGPT 扮演怎样的角色。I: Insight(洞察力),背景信息和上下文。S: Statement(指令),你希望 ChatGPT 做什么。P: Personality(个性),你希望 ChatGPT 以什么风格或方式回答你。` ); if (input != null) { const prompts = this.state.prompts; prompts[0].content = input; this.setState({ prompts }); } }; handleChangeMessageNum = () => { const input = prompt( `请设置携带的上文消息条数。条数越多,回答的关联性越强。条数越少,生成的内容越随机。如果携带信息超过上限,请减少条数。`, this.state.historyMessageNum ); if (input != null) { const num = Number(input); if (isNaN(num) || num < 0) return alert("请输入合法数字"); this.setState({ historyMessageNum: num }); } }; handleChangeApiKey = () => { const input = prompt(`请输入你的apiKey`, this.state.apiKey); if (input != null) { this.setState({ apiKey: input }); } }; handleChangeNextPrompts = () => { const input = prompt( `请输入你的后置诱导的问答,中间用"///"分开`, this.state.nextPrompts.map((v) => v.content).join("///") || "e.g. 好的,但我需要先向你申请权限并且得到免责
本文链接地址:https://www.jiuchutong.com/zhishi/300300.html 转载请保留说明!

上一篇:端午假期整理了仿天猫H5 APP项目vue.js+express+mongo(端午假期干什么)

下一篇:vue3 响应式对象的 api 详解(vue3响应式对象数组)

  • 如何提高百度更新收录频率(百度提高排名的方法)

    如何提高百度更新收录频率(百度提高排名的方法)

  • word文档文本效果在哪(word文档文本效果怎么设置)

    word文档文本效果在哪(word文档文本效果怎么设置)

  • 12306的订单怎么删除(12306的订单怎么在携程上看)

    12306的订单怎么删除(12306的订单怎么在携程上看)

  • 探探看不到对方个人信息(探探看不到对方的动态是不是被拉黑了)

    探探看不到对方个人信息(探探看不到对方的动态是不是被拉黑了)

  • 一体充电宝怎么拆开(一体式充电宝)

    一体充电宝怎么拆开(一体式充电宝)

  • wifi已连接但无法上网(wifi已连接但无法上网需登录认证)

    wifi已连接但无法上网(wifi已连接但无法上网需登录认证)

  • 什么是电子签约(什么是电子签约账号)

    什么是电子签约(什么是电子签约账号)

  • 苹果11视频有回音什么原因(苹果11视频有回音怎么解决)

    苹果11视频有回音什么原因(苹果11视频有回音怎么解决)

  • 手机屏幕脱胶要换屏吗(手机屏幕脱胶要多久好)

    手机屏幕脱胶要换屏吗(手机屏幕脱胶要多久好)

  • 探探发消息前面有个箭头(探探发信息有个箭头啥意思)

    探探发消息前面有个箭头(探探发信息有个箭头啥意思)

  • p20尺寸(p20尺寸大小多少厘米)

    p20尺寸(p20尺寸大小多少厘米)

  • 荣耀v30什么时候上线(荣耀v30什么时候出的)

    荣耀v30什么时候上线(荣耀v30什么时候出的)

  • 索尼9500g和8500g的区别(索尼9500g和9500h的差距)

    索尼9500g和8500g的区别(索尼9500g和9500h的差距)

  • 微信购买火车票为什么要登录12306(微信购买火车票退票钱多久到账)

    微信购买火车票为什么要登录12306(微信购买火车票退票钱多久到账)

  • 淘宝卖出的钱多久到账(淘宝卖出的东西钱到哪去了)

    淘宝卖出的钱多久到账(淘宝卖出的东西钱到哪去了)

  • 京东erp账号是什么意思啊(京东erp门户网页地址)

    京东erp账号是什么意思啊(京东erp门户网页地址)

  • 联想自带摄像头打不开(联想自带摄像头打不开-在哪里设置)

    联想自带摄像头打不开(联想自带摄像头打不开-在哪里设置)

  • 华为手机性能模式怎么开(华为手机性能模式长期开启合适吗)

    华为手机性能模式怎么开(华为手机性能模式长期开启合适吗)

  • 手机4g怎么调(手机怎么调成4g信号)

    手机4g怎么调(手机怎么调成4g信号)

  • 苹果6spnfc在哪里打开(苹果6splus的nfc)

    苹果6spnfc在哪里打开(苹果6splus的nfc)

  • 苹果xsmax可以升级5g吗(苹果xsmax可以升级内存吗)

    苹果xsmax可以升级5g吗(苹果xsmax可以升级内存吗)

  • 一个微信群可以设置几个管理员(一个微信群可以添加多少人)

    一个微信群可以设置几个管理员(一个微信群可以添加多少人)

  • 手机纳米镀膜怎么去除(手机纳米镀膜怎么就知道镀上没有)

    手机纳米镀膜怎么去除(手机纳米镀膜怎么就知道镀上没有)

  • 苹果xr支持反向充电吗(苹果xr反向无线充电在哪儿开启)

    苹果xr支持反向充电吗(苹果xr反向无线充电在哪儿开启)

  • 苹果xsa2100是什么意思(苹果xsa2100是什么版本)

    苹果xsa2100是什么意思(苹果xsa2100是什么版本)

  • vivox27参数充电快吗(vivox27手机充电器是多少瓦)

    vivox27参数充电快吗(vivox27手机充电器是多少瓦)

  • 全民k歌有访客记录吗(全民k歌平台)

    全民k歌有访客记录吗(全民k歌平台)

  • iphonex锁屏模糊(iphone锁屏变模糊不清)

    iphonex锁屏模糊(iphone锁屏变模糊不清)

  • 房地产零税率
  • 小规模纳税人应纳增值税额的计算
  • 去年企业所得税税率是多少
  • 无形资产开发阶段
  • 中介公司报税怎么操作
  • 工伤退费是什么意思
  • 工商登记执照号码怎么查询
  • 发生福利费的会计分录
  • 房地产老项目增值税简易计税
  • 销售边角料收入属于什么收入
  • 建安企业会计处理
  • 中标服务费可以抵扣进项税吗
  • 汇票贴息会计分录
  • 收到增值税发票怎么记账
  • bios设置网卡开启
  • 微软发布新windows
  • python中函数的可变参数有哪几种?各有什么特点?
  • 定额发票收入
  • 鸿蒙系统如何自定义图标
  • 公司入股的钱叫什么
  • php的数组函数
  • gws.exe是啥
  • 合伙企业股东个人所得税费用扣除标准
  • win10回滚系统
  • 孕妇不能吃哪些水果?
  • php cgi
  • PHP:imagecolormatch()的用法_GD库图像处理函数
  • php面向对象优点,缺点
  • 企业季度所得税怎么算
  • 微信小程序基于什么技术
  • 获取企业微信用户身份信息授权失败
  • ChatGPT中国电话不能注册
  • Laravel 5.1 on SAE环境开发教程【附项目demo源码】
  • php无限分类实现不实用递归
  • 不确认收款退款对方还能收到钱么?
  • 业务招待费包括哪些内容和费用
  • 发票查询密码区空白怎么回事
  • 理财产品的分红和收益是分开的吗
  • 发票金额大于付款金额怎么做分录
  • 小微企业认定办法
  • 个体升一般纳税人的界限
  • 即征即退 条件
  • 物流辅助服务属于什么科目
  • mysql数据库的设计与实现
  • 增值税普通发票查询真伪
  • 如何降低应收账款成本
  • 营改增会计分录怎么做
  • 哪些情况不属于农户
  • 应付职工薪酬的账务处理
  • 网吧出售
  • 国家资产负债表
  • 小规模现金流量表年报不填可以吗
  • 服务行业服务费怎么入账
  • 房地产开发企业增值税税率
  • 1.金融资产有哪些基本类型?
  • sqlserver升级到2016
  • windows主进程rundll32总是用麦克风
  • intel x86 arm
  • chcfg.exe是什么
  • mac屏幕共享软件
  • gzip压缩慢
  • centos查看inode
  • ubuntu开机密码不记得了
  • ubuntu源代码
  • Win10怎么修改hosts文件
  • windows8使用教程
  • perl-v
  • 关于加载失败壁纸
  • cocos2dx 3.3 helloworld 入门 学习与详解
  • linux启动过程流程图
  • unity中播放视频
  • list嵌套list采用什么结构
  • js实现商品分类
  • 虚拟摇杆 安卓
  • 成都市老年公交卡年审地点
  • 电子税务局如何签订三方协议扣款
  • 深圳社保最迟每月几号交啊多少钱
  • 鸿蒙2.0哪个版本续航好
  • 3.5排量的车船税多少钱
  • 福安少数民族姓氏
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设