使用魔笔集成阿里云百炼构建支持文件交互的聊天应用-多端低代码开发平台魔笔-阿里云

方案简介

本文介绍了如何快速构建具有文件交互能力的阿里云百炼聊天应用，在阅读本文前您也可以阅读如何搭建一个百炼 RAG 应用一文。

前期准备

搭建阿里云百炼应用，参考阿里云百炼文档知识检索增强（RAG），为了更好地表现临时文件询问效果，我们不配置该应用的知识库。
发布阿里云百炼应用后，获得 API-KEY 和应用 ID。

步骤一：简要搭建魔笔应用 & 集成操作/资源

创建阿里云百炼应用集成资源：
创建魔笔应用：

使用 ChatPro 组件

创建一个聊天组件：
创建一个阿里云百炼应用集成操作：
AI 集成配置

使用 Chat 组件

创建一个聊天组件：

创建一个阿里云百炼应用集成操作：

聊天组件绑定集成操作

步骤二：临时知识库相关集成操作

创建阿里云 OpenAPI 集成资源，选择“大模型服务平台阿里云百炼”，并填写阿里云 AccessKey 相关信息 :

创建阿里云 OpenAPI 集成操作调用阿里云百炼获取上传文件租约接口 applyFileUploadLease。阿里云百炼获取上传文件租约接口可以参考ApplyFileUploadLease - 申请文件上传租约：

配置信息可参考如下表格：

API	申请上传文件租约
protocol	https
method	post
CatagoryId	default
FileName	通过参数传入，此处应填上传文件名称
Md5	任意值，接口暂不消费
SizeInBytes	通过参数传入，此处应填上传文件 size
CatagoryType	SESSION_FILE
WorkspaceId	阿里云百炼空间 ID，可在阿里云百炼控制台获取：
回调数据转换	`return data.body.Data;`

创建魔笔内置文件存储集成操作来完成将魔笔系统文件从后端转存到阿里云百炼 OSS 存储中的业务。魔笔内置文件存储的文件转存操作可以参考：

配置信息可参考如下表格：

操作类型	复制文件到远程服务器
魔笔文件id	通过参数传入，需要通过聊天组件的文件上传功能获取
请求 URL	通过参数传入，需要通过 applyFileUploadLease 获取该上传路径
头部信息	x-bailian-extra：通过参数传入，需要通过 applyFileUploadLease 获取该头部参数 Content-Type：通过参数传入，需要通过 applyFileUploadLease 获取该头部参数

创建阿里云 OpenAPI 集成操作调用阿里云百炼文件信息添加接口 addFile。阿里云百炼文件信息添加接口可以参考AddFile - 添加文件：

配置信息可参考如下表格：

API	添加文档
protocol	https
method	put
LeaseId	通过参数传入，需要通过 applyFileUploadLease 获取该 id
Parser	DASHSCOPE_DOCMIND
CatagoryId	default
CatagoryType	SESSION_FILE
WorkspaceId	阿里云百炼空间 ID，可在阿里云百炼控制台获取：
回调数据转换	`return data.body.Data;`

创建阿里云 OpenAPI 集成操作调用阿里云百炼文件解析状态查询接口 describeFile。阿里云百炼文件解析状态查询接口可以参考DescribeFile - 查询文件状态：

配置信息可参考如下表格：

API	查询文档状态
protocol	https
method	get
FileId	通过参数传入，需要通过 addFile 获取阿里云百炼文件 id
WorkspaceId	阿里云百炼空间 ID，可在阿里云百炼控制台获取：
回调数据转换	`return data.body.Data;`

步骤三：临时知识库逻辑编排

创建变量来存储临时文件 ID，此处我们选择 array 类型的变量来满足实现多个临时文件上传的交互行为：

创建定时器，我们创建定时器并以5秒的时间单位来轮询 describeFile 接口，判断我们上传的文件是否在阿里云百炼侧解析完成：

配置信息可参考如下表格：

可选参数	通过参数传入，由 addFile 集成操作获取该 id
时间间隔	5000
函数体	`describeFile.trigger({ fileId: id }).then(res => { if (res.data.Status === 'FILE_IS_READY') { checkFile.stop() mobi.showMessage('文件解析成功！'); inputDisabled.setValue(false) } })`

创建前端函数来编排整个基于阿里云百炼临时知识库的聊天文件交互逻辑：

配置信息可参考如下表格：

可选参数

filename：上传文件名
fileId: 上传文件的魔笔 ID
filesize：上传文件大小

函数体

// 1调用阿里云百炼接口申请文档上传租约
const response = await applyFileUploadLease.trigger({
  "FileName": filename,
  "SizeInBytes": filesize
})

// 文档上传租约id
const fileUploadLeaseId = response.data.FileUploadLeaseId

// 租约参数
const url = response.data.Param.Url
const contentType = response.data.Param.Headers["Content-Type"]
const bailianExtra = response.data.Param.Headers["X-bailian-extra"]

// 2上传至阿里云百炼服务器临时存储
const responseRemote = await transFormFile.trigger({
  "url": url,
  "contentType": contentType,
  "bailianExtra": bailianExtra,
  "fileId": fileId
})

// 3调用阿里云百炼接口将文档上传到当前类目
const addFileRes = await addFile.trigger({
  "id": fileUploadLeaseId
})


const ids = [...sessionFileIds.value, addFileRes.data.FileId];
sessionFileIds.setValue(ids)

checkFile.start({
  id: addFileRes.data.FileId
})

mobi.showMessage('上传成功，正在解析文件！');

步骤四：为阿里云百炼集成操作添加临时知识库逻辑

为步骤一中创建的阿里云百炼集成操作添加“知识库检索范围”中的“临时文件 ID 列表”属性，并填写我们在步骤三中创建的变量 {{sessionFileIds.value ? sessionFileIds.value.filter(e => e) : []}}

步骤五：适配聊天组件上传逻辑

配置 ChatPro 组件

开启聊天组件的“文件输入”选项

在 sender组件上传成功的回调中执行步骤三中的前端函数编排逻辑：

{{{
  fileId: sender1.files[sender1.files.length - 1].mobiFileId,
  filesize: sender1.files[sender1.files.length - 1].size,
  filename: sender1.files[sender1.files.length - 1].name
}}}

最后，在聊天组件回答完成回调中，我们将临时文件变量清空

配置 Chat 组件

开启聊天组件的“文件输入”选项

在聊天组件上传成功的回调中执行步骤三中的前端函数编排逻辑：

参数部分的参考代码如下：

{{{
  fileId: chat1.uploadFiles[chat1.uploadFiles.length - 1].fileId,
  filesize: chat1.uploadFiles[chat1.uploadFiles.length - 1].size,
  filename: chat1.uploadFiles[chat1.uploadFiles.length - 1].name
}}}

最后，在聊天组件回答完成回调中，我们将临时文件变量清空