ollama本地部署DeepSeek-R1大模型使用前端JS调用的详细流程

以下是关于如何在本地部署 DeepSeek-R1 大模型（通过 Ollama），并使用前端 JavaScript 调用其功能的详细流程。

前提条件

硬件要求：
- 建议至少 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;
  }
}