前端使用大模型DeepSeek

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');
};
posted @ 2024-12-09 10:00  行走的蒲公英  阅读(505)  评论(0编辑  收藏  举报