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