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

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


前提条件

  1. 硬件要求
    • 建议至少 16GB RAM(运行较小模型如 1.5B 或 7B 参数版本),如果运行更大模型(如 14B 或 32B),需要 32GB 或更高。
    • 支持 macOS、Linux 或 Windows 的机器。
  2. 软件要求
    • 已安装 Ollama(用于本地运行模型)。
    • 基本的终端操作知识。

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

1. 安装 Ollama
  • 下载 Ollama
    访问 Ollama 官网,根据你的操作系统(macOS/Linux/Windows)下载对应版本。

  • 安装

    • macOS/Linux:在终端运行安装脚本或解压文件。
    • Windows:双击安装程序,按提示完成。
  • 验证安装
    在终端输入以下命令,检查是否成功安装:

    bash 复制代码
    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 版本:

    bash 复制代码
    ollama pull deepseek-r1:7b

下载时间取决于网络速度和模型大小,完成后会存储在本地。

3. 启动 Ollama 服务
  • 运行 Ollama 服务

    在终端输入以下命令,启动 Ollama 并加载 DeepSeek-R1:

    bash 复制代码
    ollama run deepseek-r1:7b

    这会启动一个交互式终端,你可以直接输入提示测试模型。

  • 后台运行(可选)

    如果希望 Ollama 在后台运行并提供 API 服务,可以启动服务器模式:

    bash 复制代码
    ollama serve

    默认情况下,Ollama 会监听 http://localhost:11434

4. 测试模型
  • 在终端运行:

    bash 复制代码
    ollama run deepseek-r1:7b "你好,什么是AI?"

    如果返回合理回答,说明模型部署成功。


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

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

1. 测试 API
  • 使用 curl 测试 API 是否正常工作:

    bash 复制代码
    curl http://localhost:11434/api/chat -d '{
      "model": "deepseek-r1:7b",
      "messages": [
        {"role": "user", "content": "你好,什么是AI?"}
      ],
      "stream": false
    }'
  • 返回结果应包含模型的回答,例如:

    json 复制代码
    {
      "model": "deepseek-r1:7b",
      "message": {"role": "assistant", "content": "AI 是人工智能(Artificial Intelligence)的简称..."}
    }

第三步:使用前端 JavaScript 调用

1. 设置 Node.js 项目
  • 初始化项目
    在终端创建一个新目录并初始化 Node.js 项目:

    bash 复制代码
    mkdir deepseek-frontend
    cd deepseek-frontend
    npm init -y
  • 安装依赖
    安装 axios 或其他 HTTP 请求库以便从前端调用 API:

    bash 复制代码
    npm install axios
2. 创建前端代码
  • 创建 HTML 文件index.html):

    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):

    javascript 复制代码
    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

    bash 复制代码
    npm install -g http-server
    http-server
  • 打开浏览器,访问 http://localhost:8080,输入问题并点击"发送",即可看到 DeepSeek-R1 的回答。


第四步:优化与扩展

1. 支持流式响应
  • 如果需要实时显示模型的流式输出,将 stream 设置为 true,并处理返回的流数据:

    javascript 复制代码
    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;
      }
    }
2. 添加错误处理
  • 在前端添加更完善的错误提示,确保用户体验良好。
3. 部署到远程服务器(可选)
  • 如果需要从其他设备访问,可以将 Ollama 部署到 VPS 上,并调整 OLLAMA_HOST 环境变量为 0.0.0.0:11434,然后通过公网 IP 或域名访问。

注意事项

  • 跨域问题:如果前端和 Ollama 不在同一主机,可能遇到 CORS 问题。可以通过代理解决,或在开发时确保同源。
  • 性能:模型越大,响应时间越长。建议根据硬件调整模型大小。
  • 安全性:本地部署默认仅限本地访问,若公开 API,需设置认证机制。

总结

通过上述步骤,你已经完成了:

  1. 使用 Ollama 在本地部署 DeepSeek-R1。
  2. 通过 API 测试模型可用性。
  3. 使用前端 JavaScript 实现与模型的交互。

现在,你可以在浏览器中输入问题,与本地运行的 DeepSeek-R1 对话了!如果有进一步需求(如集成到复杂应用中),可以基于此扩展功能。

相关推荐
kyle~7 分钟前
OpenCV---特征检测算法(ORB,Oriented FAST and Rotated BRIEF)
人工智能·opencv·算法
小五12715 分钟前
机器学习(决策树)
人工智能·决策树·机器学习
没有不重的名么23 分钟前
Tmux Xftp及Xshell的服务器使用方法
服务器·人工智能·深度学习·机器学习·ssh
wayman_he_何大民41 分钟前
初识机器学习算法 - AUM时间序列分析
前端·人工智能
什么都想学的阿超2 小时前
【大语言模型 00】导读
人工智能·语言模型·自然语言处理
lxmyzzs2 小时前
【图像算法 - 16】庖丁解牛:基于YOLO12与OpenCV的车辆部件级实例分割实战(附完整代码)
人工智能·深度学习·opencv·算法·yolo·计算机视觉·实例分割
明心知2 小时前
DAY 45 Tensorboard使用介绍
人工智能·深度学习
维维180-3121-14552 小时前
AI大模型+Meta分析:助力发表高水平SCI论文
人工智能·meta分析·医学·地学
程序员陆通2 小时前
CloudBase AI ToolKit + VSCode Copilot:打造高效智能云端开发新体验
人工智能·vscode·copilot
程高兴2 小时前
遗传算法求解冷链路径优化问题matlab代码
开发语言·人工智能·matlab