Call openai-node in the backend or call https in the frontend?

2024-08-31 16:52

本文主要是介绍Call openai-node in the backend or call https in the frontend?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

题意:在后端调用 `openai-node` 还是在前端调用 `https`?

问题背景:

I have a web application by ReactJS and Nodejs. This application calls OpenAI APIs.

我有一个使用 ReactJS 和 Node.js 开发的 Web 应用程序。这个应用程序调用 OpenAI 的 API。

Previously, when a user launches a request in the frontend, we send a request to the endpoint in our backend, call createChatCompletion of https://github.com/openai/openai-node in the backend, and returns the result to the frontend. Note that the server of our frontend and the server of our backend are separate and not in the same location; users are everywhere in the world.

之前,当用户在前端发起请求时,我们会将请求发送到后端的一个端点,在后端调用 `https://github.com/openai/openai-node` 的 `createChatCompletion`,然后将结果返回到前端。需要注意的是,我们的前端服务器和后端服务器是分开的,且不在同一地点,用户遍布世界各地。

We just realized that we can also request directly https://api.openai.com/v1/chat/completions in the frontend as follows:

我们刚刚意识到,我们也可以直接在前端请求 `https://api.openai.com/v1/chat/completions`,如下所示:

   const res = await fetch("https://api.openai.com/v1/chat/completions", {method: 'POST',headers: {"Content-Type": "application/json",Authorization: `Bearer ${API_KEY}`},body: JSON.stringify({model: model,messages: [{ role: "user", content: prompt }]})})

At the moment, our pain-point is the time from sending a request by a user to seeing the result in the application is too long. From this perspective of speed, does anyone know which approach is better and why?

目前,我们的问题是从用户发送请求到在应用程序中看到结果的时间太长。从速度的角度来看,有谁知道哪种方法更好,以及原因是什么?

问题解决:

One thing to keep in mind is that everything in your front end is essentially public. In this case, if you do the call directly from the browser, it's trivial for users to capture your api key.

需要记住的一点是,前端的一切本质上都是公开的。在这种情况下,如果你直接从浏览器发起调用,用户可以很容易地获取到你的 API 密钥。

Removing the call to your server likely won't make a significant difference anyway; AI is rather slow. A better solution may be to use the streaming API (and also stream from your backend to your frontend) so the users can see the response as it's generated.

即使去掉对你服务器的调用,也不会有显著的差别;人工智能的响应速度本身较慢。一个更好的解决方案可能是使用流式 API(同时从你的后端向前端流式传输),这样用户可以在响应生成时实时看到结果。

这篇关于Call openai-node in the backend or call https in the frontend?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1124457

相关文章

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template