deepseek api前端接入
时间: 2025-03-01 12:52:04 浏览: 116
### 如何在前端项目中集成 DeepSeek API
#### 设置环境变量
为了安全起见,在前端环境中直接暴露 `api_key` 是不可取的行为。建议通过服务器端代理请求或将 API 请求封装在一个无头浏览器或服务工作器内处理。如果确实要在前端调用,则应确保 `api_key` 不会泄露给客户端代码。
对于基于 JavaScript 的框架(如 React, Vue 或 Angular),可以通过 `.env` 文件来管理敏感信息,但这仅适用于开发阶段。生产环境下应当避免直接在前端存储密钥[^1]。
#### 创建API请求函数
假设已经有一个后端提供转发服务,下面是在前端发起 HTTP POST 请求的一个简单例子:
```javascript
async function getChatResponse(prompt) {
const response = await fetch('/api/deepseek', { // 假设这是指向后端代理的服务路径
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: "text-davinci-003", // 可选参数取决于具体需求
messages: [{role: "user", content: prompt}],
max_tokens: 50,
temperature: 0.7
})
});
if (!response.ok) throw new Error('Network response was not ok');
const data = await response.json();
return data.choices[0].message.content;
}
```
此段代码展示了如何构建一个异步函数用于发送消息并接收来自 DeepSeek API 的回复。注意这里 `/api/deepseek` 应该替换为实际部署的应用程序接口地址。
#### 处理响应数据
一旦获得了来自 DeepSeek API 的响应,就可以将其展示给用户或者进一步加工处理。例如,在聊天界面中显示机器人的回答:
```html
<div id="chat-container"></div>
<button onclick="sendMessage()">Send</button>
<script>
let chatContainer = document.getElementById('chat-container');
function sendMessage() {
let userInput = /* 获取用户的输入 */;
getChatResponse(userInput).then(responseText => {
let messageElement = document.createElement('p');
messageElement.textContent = responseText;
chatContainer.appendChild(messageElement);
}).catch(error => console.error('Error:', error));
}
</script>
```
这段 HTML 和 JavaScript 组合演示了怎样创建简单的 UI 来收集用户输入并通过上述定义的方法获取 AI 回答。
阅读全文
相关推荐


















