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 用个第三方库 后续再更新