资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

DeepSeek-R1前端调用

创作时间:

作者:

@小白创作中心

DeepSeek-R1前端调用

引用

CSDN

https://m.blog.csdn.net/cuijiying/article/details/145950914

本文将详细介绍如何在本地部署DeepSeek-R1大模型，并通过前端JavaScript进行调用。从硬件和软件要求、部署步骤、API调用方法到前端集成，本文将为你提供完整的指导。

前提条件

硬件要求

建议至少16GB RAM（运行较小模型如1.5B或7B参数版本），如果运行更大模型（如14B或32B），需要32GB或更高。
支持macOS、Linux或Windows的机器。

软件要求

已安装Ollama（用于本地运行模型）。
基本的终端操作知识。

第一步：本地部署Ollama和DeepSeek-R1

1. 安装Ollama

下载Ollama：访问Ollama官网，根据你的操作系统（macOS/Linux/Windows）下载对应版本。
安装：
macOS/Linux：在终端运行安装脚本或解压文件。
Windows：双击安装程序，按提示完成。
验证安装：在终端输入以下命令，检查是否成功安装：
```
ollama --version
```
如果返回版本号，说明安装成功。

2. 下载DeepSeek-R1模型

选择模型大小：DeepSeek-R1有多个版本（1.5B、7B、8B、14B、32B、70B、671B），https://ollama.com/library/deepseek-r1:7b，根据你的硬件选择合适的模型。例如，7B是性能和资源需求的平衡选择。
拉取模型：在终端运行以下命令以下载DeepSeek-R1的7B版本：
```
ollama pull deepseek-r1:7b
```
下载时间取决于网络速度和模型大小，完成后会存储在本地。

3. 启动Ollama服务

运行Ollama服务：在终端输入以下命令，启动Ollama并加载DeepSeek-R1：
```
ollama run deepseek-r1:7b
```
这会启动一个交互式终端，你可以直接输入提示测试模型。
后台运行（可选）：如果希望Ollama在后台运行并提供API服务，可以启动服务器模式：
```
ollama serve
```
默认情况下，Ollama会监听http://localhost:11434。

4. 测试模型

在终端运行：
```
ollama run deepseek-r1:7b "你好，什么是AI？"
```
如果返回合理回答，说明模型部署成功。

第二步：通过API调用DeepSeek-R1

Ollama提供了一个RESTful API，可以通过HTTP请求与本地模型交互。默认地址是http://localhost:11434。

1. 测试API

使用curl测试API是否正常工作：

curl http://localhost:11434/api/chat -d '{
  "model": "deepseek-r1:7b",
  "messages": [
    {"role": "user", "content": "你好，什么是AI？"}
  ],
  "stream": false
}'

返回结果应包含模型的回答，例如：

{
  "model": "deepseek-r1:7b",
  "message": {"role": "assistant", "content": "AI是人工智能（Artificial Intelligence）的简称..."}
}

第三步：使用前端JavaScript调用

1. 设置Node.js项目

初始化项目：在终端创建一个新目录并初始化Node.js项目：
```
mkdir deepseek-frontend
cd deepseek-frontend
npm init -y
```
安装依赖：安装axios或其他HTTP请求库以便从前端调用API：
```
npm install axios
```

2. 创建前端代码

创建HTML文件（index.html）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>DeepSeek-R1前端调用</title>
</head>
<body>
  <h1>与DeepSeek-R1对话</h1>
  <input type="text" id="userInput" placeholder="输入你的问题">
  <button onclick="sendMessage()">发送</button>
  <div id="response"></div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

创建JavaScript文件（app.js）：

async function sendMessage() {
  const input = document.getElementById("userInput").value;
  const responseDiv = document.getElementById("response");
  try {
    const response = await axios.post("http://localhost:11434/api/chat", {
      model: "deepseek-r1:7b",
      messages: [{ role: "user", content: input }],
      stream: false
    });
    const reply = response.data.message.content;
    responseDiv.innerText = reply;
  } catch (error) {
    console.error("调用失败:", error);
    responseDiv.innerText = "错误: " + error.message;
  }
}

3. 运行前端

使用简单的静态服务器运行前端，例如http-server：
```
npm install -g http-server
http-server
```
打开浏览器，访问http://localhost:8080，输入问题并点击“发送”，即可看到DeepSeek-R1的回答。

第四步：优化与扩展

1. 支持流式响应

如果需要实时显示模型的流式输出，将stream设置为true，并处理返回的流数据：

async function sendMessage() {
  const input = document.getElementById("userInput").value;
  const responseDiv = document.getElementById("response");
  responseDiv.innerText = "";
  const response = await fetch("http://localhost:11434/api/chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      model: "deepseek-r1:7b",
      messages: [{ role: "user", content: input }],
      stream: true
    })
  });
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    const chunk = decoder.decode(value);
    const json = JSON.parse(chunk);
    responseDiv.innerText += json.message.content;
  }
}