Vue 实现AI对话和AI绘图（AIGC）人工智能

我司是主要是负责AIGC人工智能化平台的项目，俗称内容创作及智能工具平台。

授人以鱼不如授人以渔 首先我们要明白AIGC中前端需要做什么 会用到哪些技术栈 。

AIGC前端需要用到的技术栈:Vue，Markdown，SSE。就这个三件套。

前沿:有人觉得AI对话那种打字机效果很酷还有哪些代码风格样式估计很难实现，其实超级简单，这个就涉及到Markdown，SSE大神们都给我们封装好了。我们只需要拿来用就行了
下面就是效果图

步骤一:安装SEE第三包
AI对话后台都是流式返回就是一个字一个字返回的 不然就实现不了打字机效果
这个后台实现非常简单因为对接第三方大模型都提供了一个属性 填写上去就是流式返回

安装依赖 uniapp和Vue项目都可以安装  都亲测了 全部兼容

npm i @microsoft/fetch-event-source 

步骤二:封装SSE  弄个工具文件导出就可以直接用了
注意:要根据你个人的项目结构Token位置

/*** SSE实时流请求方法* @param {Object} url			请求地址* @param {Object} data			请求参数* @param {Object} collMsg		回调消息接收* @param {Object} collClose	回调关闭连接* @param {Object} collErr		回调异常* @param {Object} method		请求方式*/
function eventSource(url, data, collOpen, collMsg, collClose, collErr, token, method = $constant.post) {var ctrl = new AbortController()fetchEventSource(handleUrl(url), {method: method,headers: handleHeader('application/json', method, token),body: JSON.stringify(data),signal: ctrl.signal,openWhenHidden: true,onopen: open => {collOpen(open)},onmessage: msg => {collMsg(msg)},onclose: close => {collClose(close)},onerror: err => {collErr(err)}})return ctrl
}

举个使用栗子
打字机效果实现：SSE流式每返回一次就会触发一次msg 我们只需要进行拼接字符串展示就可以实现打字效果

// eventCtrl :SSE会返回一个实例 可以做中断回复操作
// 第一个参数就是API地址，第二个参数就是入参
// open 连接建立成功就会触发
// msg 后台流式开始返回就会触发
// close 断开连接就会触发
// err 请求报错就会触发this.eventCtrl = this.$http.eventSource(this.$api.chatGPTStream, data,open => {}, msg => {}, close => {}, err => {})

 // 先更新一半 后续有时间再更新完整的 
ua-markdown 用个第三方库 后续再更新