vue3笔记（42-2）deepseek-模型输出总结

大模型输出流式数据，前后端约定 SSE 形式通信。
【3.3 更新】新需求，增加文件输入。
【3.10 更新】新需求，大模型的回答要支持语音播放。

流式数据处理

和后端沟通后使用 SSE 模式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
interface ChatProps {
  role: string
  message?: string // 原始信息
  message1?: string
  message2?: string
  loading?: boolean
  preview?: any
  thinkText?: string
  showThink?: boolean
  searchResult?: any[]
}

const userInput = ref('')

// 发送用户消息
const handleChat = async (text: string, fileIds?: Array<any>) => {
  const params = {
    user_id: userStore.userInfo?.project_id,
    conversation_id: currentId.value,
    message: text,
    model_id: props.modelDetail.model_id,
    send_time: new Date().getTime(),
    is_deep_think: chooseThink.value,
    is_internet_search: chooseOnline.value
  }
  const assistantInput = {
    role: 'assistant',
    loading: true,
    message: '',
    message1: '',
    message2: ''
  }
  chatList.value.push(assistantInput)
  scrollToBottom()
  botChating.value = true
  const res = await fetch('/chatApi/v1/****', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(params)
  })
  chatList.value[chatList.value.length - 1].loading = false
  waitReceive(res)
}

// 返回流式数据处理
const waitReceive = async (response) => {
  const prefix = 'data:' // 前缀
  const suffix = '\n\n' // 后缀
  const stream = response.body.pipeThrough(new TextDecoderStream())
  const reader = stream.getReader()
  let done
  let linestext = ''
  // const MAX_TIME = 60 * 1000 // 最大等待时间-6秒
  // const startTime = Date.now()
  do {
    // 检查是否被中止
    if (abortController.signal.aborted) {
      console.log('数据读取被用户手动中断')
      break
    }
    // if (Date.now() - startTime > MAX_TIME) {
    //   console.log('数据读取超时')
    //   break
    // }
    const result = await reader.read()
    done = result.done
    const chunk = result.value
    if (chunk) {
      linestext += chunk
      if (chunk.endsWith(suffix)) {
        const lines = linestext.split(suffix)
        linestext = ''
        for (const line of lines) {
          if (line.startsWith(prefix)) {
            const event = line.slice(prefix.length)
            try {
              const data = JSON.parse(event)
              // 联网搜索结果
              if (data.search_results) {
                chatList.value[chatList.value.length - 1].searchResult = data.search_results
              } else {
                // 深度思考-thinkText展示
                if (data.is_deep_think) {
                  chatList.value[chatList.value.length - 1].message1 += data.message || ''
                  chatList.value[chatList.value.length - 1].thinkText = toHtml(
                    chatList.value[chatList.value.length - 1].message1
                  )
                  chatList.value[chatList.value.length - 1].showThink = true
                } else {
                  // 回答-preview展示
                  chatList.value[chatList.value.length - 1].message2 += data.message || ''
                  chatList.value[chatList.value.length - 1].preview = toHtml(
                    chatList.value[chatList.value.length - 1].message2
                  )
                }
              }
            } catch (error) {
              if (abortController.signal.aborted) {
                console.log('数据解析被用户手动中断')
                // 如果是因为手动中止导致的错误，这里可以不做额外处理
              } else {
                console.log(event)
                console.error(error)
                break
              }
            }
          }
        }
      }
    } else {
      console.log('no chunk')
    }
  } while (!done)
  console.log('数据读取完毕')
  // 释放读取器
  reader.releaseLock()
  botChating.value = false
}

// 用户手动终止-原始loading去除
const abortDataReading = () => {
  console.log('abortDataReading')
  abortController.abort()
  botChating.value = false
  chatList.value[chatList.value.length - 1].loading = false
}

文件输入

deepseek逻辑：
选择文件后通过 formdata 上传，返回 id 和状态；
状态为 SUCCESS 则不再请求；
状态为 PENDING 则通过 file_ids（可有多个）不断 fetch_files 获取当前状态（返回各个文件对应状态），直到状态为 SUCCESS/FAILED。上传中、解析中、上传成功都可以删除（白色删除按钮），上传失败必须删除（红色删除按钮）。
若点击发送，则带上 file_id 和用户说的话（可以为空）

上传组件负责选择文件，作为组件注入到输入框中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <el-tooltip popper-class="tooltip-width" placement="top" effect="dark">
    <template #content>
      <div v-html="uploadTip"></div>
    </template>
    <el-upload
      ref="uploadFileRef"
      v-model:file-list="fileList"
      multiple
      :limit="maxNum"
      :on-exceed="handleExceed"
      :accept="acceptList"
      :auto-upload="false"
      :on-change="handleFileChange"
    >
      <CustomIcon name="icon-upload" size="24" />
    </el-upload>
  </el-tooltip>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// 在输入框里的上传组件，fileList是上传文件列表，clearUploadFiles是清空上传文件列表的方法
import { UploadFilled } from '@element-plus/icons-vue'
import { acceptList, suffixList, getFileType } from '@/utils/file'

const maxNum = 5 // 最大上传文件数量
const uploadTip =
  '1. 请上传 100MB 以下文件，最多支持上传 ' +
  maxNum +
  ' 个文件。</br> 2. 支持文件格式：pdf, txt, csv, docx, doc, jpg, jpeg, png, xlsx, xls, ppt, pptx, epub, py, java, js, ts, md, json, sh等。</br> 3. 仅在非联网搜索状态下使用。</br> 4. 仅可识别文字。'
const fileList = ref([])
const uploadFileRef = ref(null)
const myEmit = defineEmits(['handleFileShow'])

const handleExceed = (files, fileList) => {
  ElMessage.warning(`单次最多只能上传 ${maxNum} 个文件`)
}

// 文件改变时触发-判断文件大小、数量超出限制上传按钮隐藏
const handleFileChange = (file, fileList) => {
  const fileType = getFileType(file.name)
  if (suffixList.indexOf(fileType) < 0) {
    ElMessage.info('文件格式不符合要求')
    const currIdx = fileList.indexOf(file)
    fileList.splice(currIdx, 1)
    return
  }
  const isLt100M = file.size / 1024 / 1024 <= 100
  if (!isLt100M) {
    ElMessage.info('文件大小不能超过100M')
    const currIdx = fileList.indexOf(file)
    fileList.splice(currIdx, 1)
    return
  }
  myEmit('handleFileShow', fileList, file)
}

const clearUploadFiles = () => {
  uploadFileRef.value?.clearFiles()
}

// 已选择文件删除
const removeFileOrigin = (index: number) => {
  fileList.value.splice(index, 1)
  console.log('removeOrigin   ', fileList.value)
}

defineExpose({ fileList, clearUploadFiles, removeFileOrigin })

在输入框下方处理文件上传的状态刷新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div v-if="fileListShow && fileListShow.length > 0" class="file-list">
  <div v-for="(file, index) in fileListShow" :key="index" class="file-item">
    <span class="close-icon" @click="handleRemoveFile(index)">
      <CustomIcon v-if="file?.analyseStatus === 'FAILED'" name="icon-del" size="18" />
      <CustomIcon v-else name="icon-del2" size="18" />
    </span>
    <div class="file-item-icon">
      <div
        v-if="file?.analyseStatus === 'PENDING' || file?.analyseStatus === 'PARSING'"
        class="loader"
      ></div>
      <fileIcon v-else :name="file?.fileName" :size="40" />
    </div>
    <div class="file-item-info">
      <span class="file-item-name">{{ file?.fileName }}</span>
      <span class="file-item-size">
        <span v-if="!file?.analyseStatus?.includes('FAILED')">{{
          formatSize1000(file?.fileSize)
        }}</span>
        <span v-else-if="file?.analyseStatus == 'FAILED'" class="text-red-500"
          >解析失败，请删除</span
        >
        <span v-else class="text-red-500">上传失败，请删除</span>
      </span>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
// 定义文件状态类型
type FileStatus = 'PENDING' | 'PARSING' | 'SUCCESS' | 'FAILED' | 'CONTENT_EMPTY' | 'UPLOAD_FAILED'

// 轮询定时器
const pollTimer = ref<number | null>(null)
// 轮询文件状态的函数
const startPolling = async () => {
  const poll = async () => {
    const pendingFiles = fileListShow.value.filter(
      (fileItem) => fileItem.analyseStatus === 'PENDING' || fileItem.analyseStatus === 'PARSING'
    )
    console.log('pendingFiles', pendingFiles)
    if (pendingFiles.length === 0) {
      // 没有待处理的文件，停止轮询
      clearTimeout(pollTimer.value)
      pollTimer.value = null
      console.log('所有文件状态不为PENDING/PARSING，轮询结束')
      return
    }
    const fileIds = pendingFiles
      .filter((fileItem) => fileItem?.fileId !== '')
      .map((fileItem) => fileItem?.fileId)
    if (fileIds.length > 0) {
      const res = await getFileStatus({ file_ids: fileIds })
      // 后端返回文件状态，前端更新显示
      if (res?.files && res?.files.length > 0) {
        updateStatus(fileListShow.value, res?.files)
        fileListShow.value = [...fileListShow.value] // 为了确保响应式更新，创建一个新数组
        pollTimer.value = setTimeout(poll, 2000)
      }
    }
  }
  pollTimer.value = setTimeout(poll, 2000)
}

// 状态更新 map
const updateStatus = (arrA: Array<FileInfo>, arrB: Array<any>): Array<FileInfo> => {
  const statusMap = new Map<string, string>()
  for (const item of arrB) {
    statusMap.set(item.file_id, item.status)
  }
  for (const item of arrA) {
    if (statusMap.has(item?.fileId)) {
      item.analyseStatus = statusMap.get(item?.fileId)!
    }
  }
  return arrA
}

// 选择文件后，出现在对话框下面
const handleFileShow = async (fileList: File[], file: File) => {
  const uid = file?.uid
  fileListShow.value.push({
    uid: uid,
    fileName: file?.name,
    fileId: '',
    fileSize: file?.size,
    analyseStatus: 'PENDING'
  } as FileInfo)
  console.log('handleFileShow', fileList, fileListShow.value)
  analyseFile.value = true // 开始分析文件
  try {
    const formData = new FormData()
    formData.append('file', file?.raw)
    formData.append('file_name', file?.name)
    formData.append('conversation_id', currentId.value)
    const res = await uploadFile(formData)
    fileListShow.value.forEach((fileItem) => {
      if (fileItem.uid === uid) {
        fileItem.fileId = res?.file_id
      }
    })

    // 开始轮询
    if (!pollTimer.value) {
      startPolling()
    }
  } catch (error) {
    console.error('文件上传过程中出错', error)
    fileListShow.value = fileListShow.value.map((item) => {
      if (item.uid === uid) {
        return { ...item, analyseStatus: 'UPLOAD_FAILED' }
      }
      return item
    })
  }
}
// 删除文件，仅在解析失败时展示
const handleRemoveFile = (id: number) => {
  console.log('handleRemoveFile', id)
  fileListShow.value.splice(id, 1)
  uploadRef.value.removeFileOrigin(id)
  fileListShow.value = [...fileListShow.value]
}

还需要对文件列表状态进行监听，只有所有文件解析完成才可以发送消息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
watch(
  () => fileListShow.value,
  (val) => {
    const ok = fileListShow.value.every((file: any) => {
      return file.analyseStatus === 'SUCCESS'
    })
    console.log('watch', val, ok)
    if (ok) {
      analyseFile.value = false // 解析完成，可以发送消息
    } else {
      analyseFile.value = true // 解析中，不能发送消息
    }
  },
  { immediate: true }
)

语音播放

1
2
3
4
<div>
  <el-button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</el-button>
  <audio ref="audioRef" controls style="display: none;"></audio>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// 播放状态
const isPlaying = ref(false);
const audioRef = ref<HTMLAudioElement | null>(null)

// 切换播放状态
const togglePlay = async () => {
  if (isPlaying.value) {  // 暂停播放
    if (audioRef.value) {
      audioRef.value.pause()
    }
    isPlaying.value = false
  } else { // 开始/继续播放
    try {
      const response = await fetch('https://****', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_API_KEY' // 替换为真实的 API 密钥
        },
        body: JSON.stringify({})
      })
      if (!response.ok) {
        throw new Error('语音合成请求失败')
      }
      const reader = response.body?.getReader()
      if (!reader) {
        throw new Error('无法获取响应流')
      }
      const stream = new ReadableStream({
        start(controller) {
          function push() {
            reader.read().then(({ done, value }) => {
              if (done) {
                controller.close()
                return;
              }
              controller.enqueue(value)
              push()
            })
          }
          push()
        }
      })
      const audioStream = new Response(stream)
      const audioBlob = await audioStream.blob();
      if (audioRef.value) {
        audioRef.value.src = URL.createObjectURL(audioBlob)
        audioRef.value.play()
      }
      isPlaying.value = true;
    } catch (error) {
        ElMessage.error('语音合成出错：' + (error as Error).message)
        console.error('Error:', error)
    }
  }
}