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

相关推荐
Juicedata2 小时前
JuiceFS v1.3-Beta2:集成 Apache Ranger,实现更精细化的权限控制
运维·人工智能·ai
又又呢2 小时前
前端面试题总结——webpack篇
前端·webpack·node.js
dog shit3 小时前
web第十次课后作业--Mybatis的增删改查
android·前端·mybatis
我有一只臭臭3 小时前
el-tabs 切换时数据不更新的问题
前端·vue.js
七灵微3 小时前
【前端】工具链一本通
前端
Nueuis4 小时前
微信小程序前端面经
前端·微信小程序·小程序
_r0bin_6 小时前
前端面试准备-7
开发语言·前端·javascript·fetch·跨域·class
IT瘾君6 小时前
JavaWeb:前端工程化-Vue
前端·javascript·vue.js
potender6 小时前
前端框架Vue
前端·vue.js·前端框架
站在风口的猪11087 小时前
《前端面试题:CSS预处理器(Sass、Less等)》
前端·css·html·less·css3·sass·html5