前端使用大模型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');
};