首页 > 其他分享 >前端使用大模型DeepSeek

前端使用大模型DeepSeek

时间:2024-12-09 10:11:51浏览次数:7  
标签:deepseek docx const 模型 DeepSeek content error userText 前端

1.官方地址:

https://www.deepseek.com/

 2.开放平台的api文档:

https://api-docs.deepseek.com/zh-cn/

需要自行找到对应的API

 

 

3.前端使用deepseek生成

(1)生成json格式的方法

export const fast_gpt = async (userText) => {
  try {
    const result = await axios.post(
      'https://api.deepseek.com/v1/chat/completions',
      {
        model: 'deepseek-chat',
        messages: [
          { role: 'system', content: '' },
          { role: 'user', content: userText },
        ],
        max_tokens: 4096,
        temperature: 0.1,
        stream: false,   // 不是流格式的必须为false
      },
      {
        headers: {
          Authorization: `Bearer ${apiKey}`,   // 对应你的key
          'Content-Type': 'application/json',  // 指定返回json格式的
        },
      },
    );
    return extractJsonFromText(result?.choices[0].message.content) || result?.choices[0].message.content;
  } catch (error) {
    console.error('请求错误:', error);
  } finally {
  }
};

(2)生成流格式的方法

export const fast_gptStream = async (userText, onDataChunk) => {
  try {
    const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${apiKey}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        model: 'deepseek-chat',
        messages: [
          { role: 'system', content: '' },
          { role: 'user', content: userText },
        ],
        max_tokens: 4096,
        temperature: 0.1,
        stream: true,   // 流格式的必须为true
      }),
    });

    if (!response.body) {
      throw new Error('服务器未返回流数据');
    }

    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');
    let buffer = ''; // 用于保存未处理完的分块数据

    while (true) {
      const { done, value } = await reader.read();
      if (done) break; // 读取结束

      const chunk = decoder.decode(value, { stream: true });
      buffer += chunk; // 将新数据拼接到缓冲区

      // 按换行符分割数据块
      const lines = buffer.split('\n');

      // 最后一行可能是不完整数据块,留到下一次处理
      buffer = lines.pop();
      for (const line of lines) {
        if (line.startsWith('data: ')) {
          const jsonStr = line.slice(6).trim(); // 去掉 "data: " 前缀
          if (jsonStr !== '[DONE]') {
            try {
              const jsonData = JSON.parse(jsonStr);
              const content = jsonData?.choices[0]?.delta?.content || '';
              if (content) {
                // 实时触发回调  这个回调是为了能在页面上实时输出
                onDataChunk(content);
              }
            } catch (error) {
              console.error('解析 JSON 数据失败:', error, line);
            }
          }
        }
      }
    }
  } catch (error) {
    console.error('流式数据请求失败:', error);
  }
};

流格式的具体调用。举例:react页面任意按钮点击事件写:

  // 发指令
      const textOrder =
        '问题:根据<Data></Data>内的文本为访谈记录/访谈通知/访谈提纲,请对其进行访谈总结,输出访谈纪要,注意排版格式';
      const userText = '< Data >' + response + '</ Data >' + textOrder;

      // 调用流式数据接口  拿到指令结果
      await fast_gptStream(userText, (chunk) => {
        // 接收到流数据片段时更新状态
        const updatedText = mdTextRef.current + chunk;
        mdTextRef.current = updatedText; // 更新 ref
        setMdText(updatedText);   // useState更新
      });

4.前端页面渲染

使用md编辑器展示:

用到   "markdown-it": "^14.1.0",

import MarkdownIt from 'markdown-it';
import MdEditor from 'react-markdown-editor-lite';
import 'react-markdown-editor-lite/lib/index.css';

const mdParser = new MarkdownIt(); // markdown解析器
const [mdText, setMdText] = useState<string>(''); // md文本

<MdEditor
    value={mdText}
    style={{ height: '500px'}}
    renderHTML={(text) => mdParser.render(text)}
    onChange={({ html, text }) => {
      setMdText(text);
      // 自动保存  防抖
      debounceSaveText(text);
    }}
  />

5. md文本导出成doc

导出事件:

exportMarkdownToDocx(mdText);

具体导出方法:

使用html-docx-js :"html-docx-js": "^0.3.1"

import { saveAs } from 'file-saver';
import htmlDocx from 'html-docx-js/dist/html-docx';

// 将Markdown转换为HTML
const md = new MarkdownIt();

//   处理docx格式 导出
export const exportMarkdownToDocx = (markdownText) => {
  const htmlContent = md.render(markdownText);
  // 将 HTML 转换为 Word 文档
  const blob = htmlDocx.asBlob(htmlContent);
  saveAs(blob, '智能生成访谈纪要.docx');
};

标签:deepseek,docx,const,模型,DeepSeek,content,error,userText,前端
From: https://www.cnblogs.com/shyhuahua/p/18594261

相关文章

  • 前端是如何收集用户行为信息的?都有哪些方法呢?
    前端收集用户行为信息的方法有很多,大致可以分为以下几类:1.基于用户交互事件的收集:点击事件(Click):记录用户点击了哪些元素,例如按钮、链接、图片等。可以获取点击元素的ID、class、内容等信息。鼠标事件(MouseEvents):例如mouseover、mouseout、mousemove等,可以追......
  • 前端的错误有哪些分类?如果捕获这些错误?
    前端错误大致可以分为以下几类:脚本错误(ScriptErrors):这是最常见的错误类型,通常由JavaScript代码中的语法错误、逻辑错误或运行时错误引起。例如:TypeError:尝试对错误的数据类型执行操作,例如对一个非函数对象调用()。ReferenceError:引用未声明的变量。SyntaxError:Ja......
  • 对于2K、4K屏的逐渐流行,对于前端来说将会有哪些改变呢?
    2K和4K屏幕的流行对前端开发带来了诸多挑战和机遇,主要体现在以下几个方面:挑战:更高的分辨率对性能的要求更高:渲染2K和4K图像需要更多的计算资源,这可能会导致页面加载速度变慢,动画卡顿,以及更高的功耗,尤其是在移动设备上。前端开发者需要更加关注性能优化,例如使用更高效......
  • m4 mac mini本地部署ComfyUI,测试Flux-dev-GGUF的workflow模型10步出图,测试AI绘图性
    m4macmini已经发布了一段时间,针对这个产品,更多的是关于性价比的讨论,如果抛开各种补贴不论,价位上和以前发布的mini其实差别不大,真要论性价比,各种windows系统的mini主机的价格其实是吊打苹果的。本次我们针对m4macmini的AI性能做个测试,使用目前泛用性最广的AI工作流软件:Comfy......
  • U-Net架构、ScoreNet 模型
    1.U-Net架构U-Net是一种用于图像分割的深度学习模型,最初由OlafRonneberger等人于2015年提出。它的设计目的是在医学图像分割等任务中有效地从像素级别的标签中提取信息。U-Net以其高效的训练策略和良好的分割效果广泛应用于医学图像处理、自动驾驶、遥感图像等领域......
  • 智创 AI 新视界 -- 防范 AI 模型被攻击的安全策略(16 - 4)
           ......
  • 大前端:突破动态化容器的天花板5
     1动态化容器的天花板自2015年ReactNative推出至今9年时间,各类容器(动态化容器简称,下同)方案已经成为业界前端的普遍选择。业界有微信(小程序)、抖音(Lynx)、拼多多(Lego)、支付宝(Nebula/BirdNest)、京东(Taro-Native)等。美团也有MRN、MMP/MSC等容器。可以说容器是前端工程的关键基石......
  • Java根据前端返回的字段名进行查询数据
    在Java后端开发中,我们经常需要根据前端传递的参数(如字段名)来动态查询数据库中的数据。这种需求通常出现在需要实现通用查询功能或者复杂查询接口的场景中。为了实现这个功能,我们需要结合Java的反射机制、MyBatis或JPA等持久层框架,以及SQL动态拼接等技术。本文将详细讲解如何实现这......
  • 【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
    ......
  • 大前端:突破动态化容器的天花板13
     1动态化容器的天花板自2015年ReactNative推出至今9年时间,各类容器(动态化容器简称,下同)方案已经成为业界前端的普遍选择。业界有微信(小程序)、抖音(Lynx)、拼多多(Lego)、支付宝(Nebula/BirdNest)、京东(Taro-Native)等。美团也有MRN、MMP/MSC等容器。可以说容器是前端工程的关键基石......