位置: 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响应式对象数组)

  • 微博推广活动的方法有哪些呢?  (微博活动推广文案)

    微博推广活动的方法有哪些呢? (微博活动推广文案)

  • iPhone11如何确认连接WIFI6(怎么知道苹果11)

    iPhone11如何确认连接WIFI6(怎么知道苹果11)

  • 小红书怎么删除笔记(小红书怎么删除仓库中的商品)

    小红书怎么删除笔记(小红书怎么删除仓库中的商品)

  • 小红书修改不了昵称(小红书修改不了信息)

    小红书修改不了昵称(小红书修改不了信息)

  • 华为mate20悬浮球怎么设置(华为mate20悬浮球怎么用)

    华为mate20悬浮球怎么设置(华为mate20悬浮球怎么用)

  • oppor17屏幕(oppor17屏幕刷新率)

    oppor17屏幕(oppor17屏幕刷新率)

  • 苹果怎么自定闹钟铃声(苹果怎么自定闹铃)

    苹果怎么自定闹钟铃声(苹果怎么自定闹铃)

  • 240*360是几寸照片(240*320的照片是几寸)

    240*360是几寸照片(240*320的照片是几寸)

  • 华为子账号是什么(华为主账号和子账号的区别)

    华为子账号是什么(华为主账号和子账号的区别)

  • 苹果x没有孔怎么听歌啊(苹果x没有螺丝刀该怎么开手机盖子)

    苹果x没有孔怎么听歌啊(苹果x没有螺丝刀该怎么开手机盖子)

  • 开通抖音小店需要多少保证金(开通抖音小店需要缴纳多少保证金)

    开通抖音小店需要多少保证金(开通抖音小店需要缴纳多少保证金)

  • 怎么取消来电视频播放(如何取消来电视频秀)

    怎么取消来电视频播放(如何取消来电视频秀)

  • 手机优化开不了机怎么回事(手机优化开不了机的原因)

    手机优化开不了机怎么回事(手机优化开不了机的原因)

  • qq私密模式是什么意思(qq私密模式默认是开启的吗)

    qq私密模式是什么意思(qq私密模式默认是开启的吗)

  • vivo手机怎么取消彩铃(vivo手机怎么取消锁屏密码)

    vivo手机怎么取消彩铃(vivo手机怎么取消锁屏密码)

  • 苹果手机cydia在哪里(苹果cydia怎么用)

    苹果手机cydia在哪里(苹果cydia怎么用)

  • 小红书为什么下载不了(为什么下载小红书)

    小红书为什么下载不了(为什么下载小红书)

  • a1722是第几代airpods(a1523和1722是一代还是二代)

    a1722是第几代airpods(a1523和1722是一代还是二代)

  • 行货跟水货的区别(水货与行货有何区别)

    行货跟水货的区别(水货与行货有何区别)

  • 苹果xr芯片是什么型号(xr芯片型号)

    苹果xr芯片是什么型号(xr芯片型号)

  • 怎么申请第二个抖音号(怎么申请第二个苹果ID)

    怎么申请第二个抖音号(怎么申请第二个苹果ID)

  • 罗技和罗技g有什么区别(罗技g与罗技logitech)

    罗技和罗技g有什么区别(罗技g与罗技logitech)

  • 华为mate20怎么设置三指截屏(华为mate20怎么设置锁屏壁纸)

    华为mate20怎么设置三指截屏(华为mate20怎么设置锁屏壁纸)

  • oppo手机黑屏怎么重启(oppo手机黑屏怎么恢复正常)

    oppo手机黑屏怎么重启(oppo手机黑屏怎么恢复正常)

  • 怎么设置qq音乐歌单非公开(怎么设置qq音乐锁屏显示)

    怎么设置qq音乐歌单非公开(怎么设置qq音乐锁屏显示)

  • win10开机内存占用60%怎么办? 电脑内存占用率过高的解决办法(win10开机内存占用60% 8g占用过高)

    win10开机内存占用60%怎么办? 电脑内存占用率过高的解决办法(win10开机内存占用60% 8g占用过高)

  • 核定征收企业所得税率是多少
  • 小微企业利润表模板
  • 长期待摊费用进项税可以一次性抵扣吗?
  • 自查补交以前年度增值税怎么做账
  • 汇算清缴补交的所得税怎么记帐
  • 支付跨年租金如何处理
  • 车间固定资产折旧属于什么科目
  • 财产租赁合同金额含税吗
  • 水电费差价收入计算增值税公式是怎样的?
  • 房地产企业暂估成本
  • 280服务费抵税分录
  • 关于一般纳税人提供非学历教育服务适用简易计税
  • 汇兑损失的原因
  • 总资产增长率的含义
  • 新公司开业的祝福语
  • 已付款收货未收到发票会计分录
  • 公司注销时债权人未申报债权
  • vmware15虚拟机
  • 糖尿病患者在什么情况下无需
  • 沙盘模型制作费用
  • 建筑行业预交增值税什么时候预交
  • php预定义常量要使用define函数进行定义
  • 房地产开发企业分为几个等级
  • unity默认存储路径
  • 投资性房地产期末公允价值大于账面价值
  • react img onerror
  • 二手商铺的税费太高了吧
  • 工会经费如何在网上购物吗
  • thinkphp框架安装
  • 资产证券化 会计处理
  • 如何理解土地使用制度
  • 购买税控盘后要交税吗
  • htmlcssjavascript网页制作
  • 企业残保金怎样申报
  • 申报个体经营所得税款所属期怎么填
  • 教你学python
  • 命令提示符用不了怎么办
  • HTML常用的表单控件有哪些
  • 企业规定
  • 抵账房啥意思
  • 开票资料电话写错了有关系吗
  • 停车费计税
  • 100万的工程怎么开发票
  • 企业贷款利息可以开发票吗
  • phpcms使用教程
  • 外贸da付款方式的流程图
  • 职工教育经费包括住宿费吗
  • 企业基金分红具备的条件
  • 好用的测试工具
  • 计划成本核算的实际成本怎么算
  • 增量留抵税额怎么算
  • 存货跌价准备的账务处理
  • 应收账款周转速度快表明
  • 自用房地产转换为采用成本模式计量的投资性房地产
  • 公司班车运费如何入账的
  • 检验费用会计分录
  • 员工报销的话费要缴纳个税吗?
  • 现金付给对方没写收据怎么办
  • 商誉的算法
  • 对方开商业承兑汇票给我们
  • 住宿补贴需要交个税吗
  • sqlbean
  • java如何连接sql
  • macbook存东西一般存在哪
  • window10的cmd命令
  • win10弹出提示
  • win108080端口怎么打开
  • ubuntu系统自带的截图工具
  • linux怎么安装sh
  • Win7系统怎么打开蓝牙
  • win7系统开机后桌面黑屏
  • 关于node.js中的模块化规范
  • php运行linux命令
  • 各种常用的js函数有哪些
  • 数字动画文件格式有哪些
  • javascripr
  • javascript零基础
  • 卫生志愿服务活动
  • 海南省税务局网站
  • 营销服务协议书范本
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设