在项目中调用本地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

相关推荐
打小就很皮...9 分钟前
Tesseract.js OCR 中文识别
前端·react.js·ocr
wuhen_n31 分钟前
JavaScript内存管理与执行上下文
前端·javascript
Hi_kenyon1 小时前
理解vue中的ref
前端·javascript·vue.js
阿杰学AI2 小时前
AI核心知识78——大语言模型之CLM(简洁且通俗易懂版)
人工智能·算法·ai·语言模型·rag·clm·语境化语言模型
落霞的思绪2 小时前
配置React和React-dom为CDN引入
前端·react.js·前端框架
Hacker_Z&Q2 小时前
CSS 笔记2 (属性)
前端·css·笔记
Anastasiozzzz2 小时前
LeetCode Hot100 295. 数据流的中位数 MedianFinder
java·服务器·前端
Exquisite.3 小时前
Nginx
服务器·前端·nginx
打小就很皮...3 小时前
dnd-kit 实现表格拖拽排序
前端·react.js·表格拖拽·dnd-kit
Ulyanov3 小时前
从静态到沉浸:打造惊艳的Web技术发展历程3D时间轴
前端·javascript·html5·gui开发