微网站 免费模板昆汀的室内设计案例

代码（来自官网）

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('三天两夜的深圳行程')
}

控制台的输出