外贸网站演示,搜狗浏览器网页版入口,wordpress第三方支付,江苏城乡建设文章目录 代码#xff08;来自官网#xff09;colab中用python测试Qwen2.5在官网上查看并确定过期时间这里看到我的免费额度到25年5月在同一个页面#xff0c;点击API示例 前端调用直接在前端调用的优缺点以vue为例#xff08;代码是基于官网node.js的代码转换而来#xf… 文章目录 代码来自官网colab中用python测试Qwen2.5在官网上查看并确定过期时间这里看到我的免费额度到25年5月在同一个页面点击API示例 前端调用直接在前端调用的优缺点以vue为例代码是基于官网node.js的代码转换而来 代码来自官网 https://help.aliyun.com/zh/model-studio/getting-started/first-api-call-to-qwen?spma2c4g.11186623.help-menu-2400256.d_0_1_0.50d1b0a8IwWMDQscm20140722.H_2840915._.OR_help-V_1 https://help.aliyun.com/zh/model-studio/user-guide/text-generation?spma2c4g.11186623.0.0.76741d1cJK9Ugg#24e54b27d4agt pip install -U dashscopeimport os
from openai import OpenAItry:client OpenAI(api_key这里要换成百炼API Keysk-xxx,base_urlhttps://dashscope.aliyuncs.com/compatible-mode/v1,)completion client.chat.completions.create(modelqwen-plus, # 模型列表https://help.aliyun.com/zh/model-studio/getting-started/modelsmessages[{role: system, content: You are a helpful assistant.},{role: user, content: 你是谁}])print(completion.choices[0].message.content)
except Exception as e:print(f错误信息{e})print(请参考文档https://help.aliyun.com/zh/model-studio/developer-reference/error-code)colab中用python测试 Qwen2.5
我打算使用这个免费额度
在官网上查看并确定过期时间
模型广场中找到对应的产品点击查看详情
这里看到我的免费额度到25年5月 在同一个页面点击API示例 前端调用
注在 React 或 Vue 前端应用中可以直接使用 axios 或 fetch 来调用 OpenAI API 或通义千问 API而无需后端语言。不过以下是一些情况可能仍会考虑使用后端的原因
直接在前端调用的优缺点
优点 开发简便省去了后端的开发和维护前端直接使用 axios 或 fetch 即可与 API 通信。 更快速的响应直接从前端发起 API 请求避免了经过后端的额外通信延迟。
缺点 安全性问题直接在前端调用 API 会暴露你的 API 密钥在浏览器中这是很不安全的。用户可以在浏览器的开发者工具中轻易地看到你的 API 密钥可能导致滥用和 API 费用的增加。 跨域限制有些 API 出于安全原因会限制跨域访问需要通过后端代理转发请求。 流量和配额控制如果应用流量大直接调用 API 的流量无法被控制这可能导致 API 超负荷或产生高额费用。 在后端设置中转服务的优势 安全性后端可以隐藏 API 密钥。前端将请求发送到后端后端再调用 OpenAI API 或通义千问 API这样 API 密钥不会暴露在前端。 请求管理后端可以管理请求频率、添加缓存、处理失败重试等提高应用的稳定性和响应速度。 数据处理在调用 API 后后端可以对结果进行一些数据处理或格式化减少前端的负担让前端专注于展示。
如果要在前端直接调用如何保证一定的安全性 如果你希望避免后端可以考虑以下方法来减少风险但并不能完全防止密钥泄露 服务器环境变量使用环境变量配置 API 密钥不在代码中直接暴露密钥。 前端环境限制将应用部署在一个有限访问范围的网络环境例如公司内网不过这对于公开的 Web 应用并不适用。 代理 API 访问通过前端代理工具如 Vite 代理绕过一些跨域问题但仍会暴露密钥。
总结来说如果只是为了测试或快速验证功能你可以在前端直接调用 LLM API。但对于生产环境建议使用后端中转以确保应用的安全性和稳定性。
以vue为例代码是基于官网node.js的代码转换而来
pnpm install --save openai某一个测试按钮
button clicktest3测试qianwen/buttonasync function getChatCompletion(userMessage) {console.log(qianwen);const apiKey 替换为你的实际 API Key; const baseURL https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions;try {const response await axios.post(baseURL,{model: qwen-plus, // 模型列表https://help.aliyun.com/zh/model-studio/getting-started/modelsmessages: [{ role: system, content: You are a helpful assistant. },{ role: user, content: userMessage }]},{headers: {Content-Type: application/json,Authorization: Bearer ${apiKey}}});console.log(response.data.choices[0].message.content);return response.data.choices[0].message.content;} catch (error) {console.log(错误信息${error.message});console.log(请参考文档https://help.aliyun.com/zh/model-studio/developer-reference/error-code);return null;}
}const test3 (){getChatCompletion(三天两夜的深圳行程)
}控制台的输出
