deepseek在vue3的应用
·
npm install vue3-markdown-it
注意是vue3-markdown-it 不是 markdown-it
这个是对输出的文字做优化。
async function aiAPi(){
dialog.value.visible = true
dialog.value.reasoning_content = ''
dialog.value.content = ''
dialog.value.flag = false
let model = "deepseek-ai/DeepSeek-R1"
let messages = [
{ "role": "system", "content": "这里是提问限制条件" },
{ "role": "user", "content": `
这里是提问
` },
// { "role": "user", "content": `不要输出表格内容,只需要输出纯文本信息`},
]
let body = {
"model": model,
"messages": messages,
"stream": true,
"max_tokens": 16384,
// "stop": ["null"],
"temperature": 0.7,
// "top_p": 0.7,
// "top_k": 50,
// "frequency_penalty": 0.5,
// "n": 1,
// "response_format": { "type": "text" },
}
const options = {
method: 'POST',
headers: { Authorization: 'Bearer 这里是你的token/key', 'Content-Type': 'application/json' },
body: JSON.stringify(body)
};
dialog.value.loading = true
const response = await fetch('https://api.siliconflow.cn/v1/chat/completions', options)
if (!response.ok) {
console.error(`请求失败,状态码: ${response.status}`);
return;
}
const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8');
let buffer = '';
const processText = ({ done, value }) => {
if (done) {
// 处理最后可能剩余的数据
processDataChunk(buffer, '');
// Stream complete
return;
}
let chunk = decoder.decode(value, { stream: true });
buffer += chunk;
let eventEndIndex = buffer.indexOf('\n\n');
// console.log("chunk", chunk);
while (eventEndIndex !== -1) {
const eventData = buffer.slice(0, eventEndIndex);
dialog.value.loading = false
let obj = processDataChunk(eventData, '');
dialog.value.reasoning_content = dialog.value.reasoning_content + obj.b
dialog.value.content = dialog.value.content + obj.a
if (dialog.value.content != ''){
dialog.value.flag = true
}
const container = document.querySelector('.chat-container');
// 插入新内容后触发
container.scrollTop = container.scrollHeight;
buffer = buffer.slice(eventEndIndex + 2);
eventEndIndex = buffer.indexOf('\n\n');
}
// next chunk
return reader.read().then(processText);
};
// 开始读取第一个数据块
return reader.read().then(processText);
}
function processDataChunk(eventData, outputDiv) {
// 检查是否以 "data:" 开头
if (eventData.startsWith('data:')) {
// 提取数据部分
const data = eventData.slice(5).trim();
try {
// 尝试解析为 JSON(如果数据是 JSON 格式)
const parsedData = JSON.parse(data);
// console.log(parsedData);
let id = parsedData.id;
let content = parsedData.choices[0].delta.content || '';
let reasoning_content = parsedData.choices[0].delta.reasoning_content || '';
return {
a: content,
b: reasoning_content == undefined ? '' : reasoning_content
}
}
catch (parseError) {
//console.error(data);
}
}
}
import Markdown from "vue3-markdown-it";
<div style="text-indent: 2em; padding: 0 6px; background: #ddd;">{{ dialog.reasoning_content }}</div>
<!-- <div style="font-weight: bold; text-indent: 2em; margin-top: 10px;" v-if="dialog.flag">{{ dialog.content }}</div>
-->
<Markdown :source="dialog.content" style="font-weight: bold; margin-top: 10px;"></Markdown>
如果没有vue3-markdown-it,样式会很难看,而且没法输出表格
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)