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";
{{ dialog.reasoning_content }}
        
        

如果没有vue3-markdown-it，样式会很难看，而且没法输出表格