在项目中调用本地Deepseek(接入本地Deepseek)

前言

之前发表的文章已经讲了如何本地部署Deepseek模型,并且如何给Deepseek模型投喂数据、搭建本地知识库,但大部分人不知道怎么应用,让自己的项目接入AI模型。

文末有彩蛋哦!!!

要接入本地部署的deepseek,我就要利用到我们之前部署时安装的ollama服务,并调用其API

本地API接口

1、生成文本(Generate Text)

url: POST /api/generate

功能:向模型发送提示词(prompt),并获取生成的文本。

请求格式:

javascript 复制代码
{
  "model": "<model-name>",  // 模型名称
  "prompt": "<input-text>", // 输入的提示词
  "stream": false,          // 是否启用流式响应(默认 false)
  "options": {              // 可选参数
    "temperature": 0.7,     // 温度参数
    "max_tokens": 100       // 最大 token 数
  }
}

响应格式:

javascript 复制代码
{
  "response": "<generated-text>", // 生成的文本
  "done": true                    // 是否完成
}
2、生成对话补全

url:POST /api/chat

功能:支持多轮对话,模型会记住上下文。

请求格式:

javascript 复制代码
{
  "model": "<model-name>",  // 模型名称
  "messages": [             // 消息列表
    {
      "role": "user",       // 用户角色
      "content": "<input-text>" // 用户输入
    }
  ],
  "stream": false,          // 是否启用流式响应
  "options": {              // 可选参数
    "temperature": 0.7,
    "max_tokens": 100
  }
}

响应格式:

javascript 复制代码
{
  "message": {
    "role": "assistant",    // 助手角色
    "content": "<generated-text>" // 生成的文本
  },
  "done": true
}
3、列出本地模型(List Models)

url:GET /api/tags

功能:列出本地已下载的模型。

响应格式:

javascript 复制代码
{
  "models": [
    {
      "name": "<model-name>", // 模型名称
      "size": "<model-size>", // 模型大小
      "modified_at": "<timestamp>" // 修改时间
    }
  ]
}
4、模型的详细信息

url:POST /api/show

功能:查看特定模型的详细信息。

请求格式:

javascript 复制代码
{"name": model}

响应格式:

javascript 复制代码
{
    "license": "...",
    "template": "...",
    "details": {
        ...
    },
    "model_info": {
        ...
    },
    "modified_at": "2025-02-10T13:26:44.0736757+08:00"
}
5、生成嵌入向量

url:POST /api/embed

功能:为输入的文本生成嵌入向量。

请求格式:

javascript 复制代码
{
	"model": model,
	"input": text
}

响应格式:

javascript 复制代码
{
    "model": "deepseek-r1:7b",
    "embeddings": [
        [
            0.00245497,
            ...
        ]
    ],
    "total_duration": 8575498700,
    "load_duration": 7575292200,
    "prompt_eval_count": 4
}

使用实例

1、启动 Ollama 服务

在使用 API 之前,需要确保 Ollama 服务正在运 行。可以双击打开或通过以下命令启动服务:

javascript 复制代码
ollama serve

2、在项目中调用API(这里以react为例实现简单效果)

AI.jsx:

javascript 复制代码
import { useEffect, useState, useRef } from 'react';
import './AI.css';

export default function AI() {
  const [outputContent, setOutput] = useState('');

  // ref 存储textarea 内容
  const inputRef = useRef(null);

  useEffect(() => {
    // const userPrompt = "介绍";
    // streamOllamaResponse(userPrompt);
  }, []);

  let handleSubmit = async (event) => {
    event.preventDefault();
    streamOllamaResponse(inputRef.current.value);
  }

  async function streamOllamaResponse(prompt) {
    const url = 'http://localhost:11434/api/generate';
    const headers = {
      'Content-Type': 'application/json'
    };
    const data = {
      "model": "deepseek-r1:7b",
      "prompt": prompt,
      "stream": true
    };
    const response = await fetch(url, {
      method: 'POST',
      headers: headers,
      body: JSON.stringify(data)
    });
    if (!response.ok) {
      console.error(`请求失败,状态码: ${response.status}`);
      return;
    }
    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');
    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      const chunk = decoder.decode(value, { stream: true });
      const chunkResponse = JSON.parse(chunk).response
      console.log(chunkResponse);
      setOutput((outputContent) => outputContent + chunkResponse);
    }
  }


  return (
    <div className='ai-container'>
      <h2>AI Page</h2>
      <div className='ai-content'>
        <div className='output-container'><pre>{outputContent}</pre></div>
        <div className='input-container'>
          <textarea ref={inputRef} name="" id="" placeholder='请输入您的问题'></textarea>
          <button onClick={handleSubmit}>提交</button>
        </div>

      </div>
    </div>
  )
}

效果


文末彩蛋!!(粉丝福利)

DeepSeek使用技巧大全.rar:https://pan.quark.cn/s/6e769f336d4b

相关推荐
G_G#4 分钟前
纯前端js插件实现同一浏览器控制只允许打开一个标签,处理session变更问题
前端·javascript·浏览器标签页通信·只允许一个标签页
@大迁世界19 分钟前
TypeScript 的本质并非类型,而是信任
开发语言·前端·javascript·typescript·ecmascript
xiucai_cs28 分钟前
本地搭建 AI 翻译服务:LM Studio + STranslate/Bob
ai·机器翻译
GIS之路28 分钟前
GDAL 实现矢量裁剪
前端·python·信息可视化
Golang编程笔记30 分钟前
电商数据分析的未来发展路径
ai·数据挖掘·数据分析
是一个Bug31 分钟前
后端开发者视角的前端开发面试题清单(50道)
前端
Amumu1213833 分钟前
React面向组件编程
开发语言·前端·javascript
持续升级打怪中1 小时前
Vue3 中虚拟滚动与分页加载的实现原理与实践
前端·性能优化
GIS之路1 小时前
GDAL 实现矢量合并
前端
hxjhnct1 小时前
React useContext的缺陷
前端·react.js·前端框架