位置: IT常识 - 正文
js调用gpt3.5（支持流回显、高频功能）(js调用函数的几种方法)
编辑：rootadminjs调用gpt3.5（支持流回显、高频功能） 
本文链接地址:https://www.jiuchutong.com/zhishi/300300.html
转载请保留说明！
推荐整理分享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. 好的，但我需要先向你申请权限并且得到免责上一篇：端午假期整理了仿天猫H5 APP项目vue.js+express+mongo(端午假期干什么)
下一篇：vue3 响应式对象的 api 详解(vue3响应式对象数组)
