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 对话了!如果有进一步需求(如集成到复杂应用中),可以基于此扩展功能。

相关推荐
小赖同学啊4 分钟前
人工智能大模型在物联网应用层上的应用
人工智能·物联网
肉三33 分钟前
Genesis:用于机器人及其他领域的生成式通用物理引擎
人工智能·机器人
IT古董35 分钟前
【漫话机器学习系列】116.矩阵(Matrices)
人工智能·机器学习·矩阵
乱世刀疤1 小时前
AI绘画软件Stable Diffusion详解教程(5):主模型的选择
人工智能·ai作画·stable diffusion
SomeB1oody1 小时前
【Python机器学习】1.1. 机器学习(Machine Learning)介绍
开发语言·人工智能·python·机器学习
CP-DD1 小时前
PyTorch 的 Dataset 和 DataLoader
人工智能·pytorch·python
Wis4e1 小时前
基于PyTorch的深度学习2——逐元素操作,归并,比较,矩阵
人工智能·pytorch·深度学习
老大白菜1 小时前
PyTorch GPU显存管理与大规模张量操作
人工智能·pytorch·python
zhulu5061 小时前
PyTorch 源码学习:GPU 内存管理之初步探索 expandable_segments
人工智能·pytorch·学习
花千树-0101 小时前
MOE(Mixture of Experts)门控网络的实现与优化
人工智能·pytorch·自然语言处理·nlp·aigc