文章目录
- 代码(来自官网)
- colab中用python测试
- Qwen2.5
- 在官网上查看并确定过期时间
- 这里看到我的免费额度到25年5月
- 在同一个页面,点击API示例
- 前端调用
- 直接在前端调用的优缺点
- 以vue为例(代码是基于官网node.js的代码转换而来)
代码(来自官网)
https://help.aliyun.com/zh/model-studio/getting-started/first-api-call-to-qwen?spm=a2c4g.11186623.help-menu-2400256.d_0_1_0.50d1b0a8IwWMDQ&scm=20140722.H_2840915._.OR_help-V_1
https://help.aliyun.com/zh/model-studio/user-guide/text-generation?spm=a2c4g.11186623.0.0.76741d1cJK9Ugg#24e54b27d4agt
pip install -U dashscope
import os
from openai import OpenAItry:client = OpenAI(api_key="这里要换成百炼API Key,sk-xxx",base_url="https://dashscope.aliyuncs.com/compatible-mode/v1",)completion = client.chat.completions.create(model="qwen-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 @click="test3">测试qianwen</button>async 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('三天两夜的深圳行程')
}
控制台的输出