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

相关推荐
星空寻流年7 分钟前
CSS3(BFC)
前端·microsoft·css3
九月TTS8 分钟前
开源分享:TTS-Web-Vue系列:Vue3实现固定顶部与吸顶模式组件
前端·vue.js·开源
CodeCraft Studio28 分钟前
数据透视表控件DHTMLX Pivot v2.1发布,新增HTML 模板、增强样式等多个功能
前端·javascript·ui·甘特图
一把年纪学编程30 分钟前
【牛马技巧】word统计每一段的字数接近“字数统计”
前端·数据库·word
llc的足迹39 分钟前
el-menu 折叠后小箭头不会消失
前端·javascript·vue.js
九月TTS1 小时前
TTS-Web-Vue系列:移动端侧边栏与响应式布局深度优化
前端·javascript·vue.js
Johnstons1 小时前
AnaTraf:深度解析网络性能分析(NPM)
前端·网络·安全·web安全·npm·网络流量监控·网络流量分析
whatever who cares2 小时前
CSS3 伪元素(Pseudo-elements)大全
前端·css·css3
若愚67922 小时前
前端取经路——性能优化:唐僧的九道心经
前端·性能优化
Bl_a_ck2 小时前
开发环境(Development Environment)
开发语言·前端·javascript·typescript·ecmascript