DocsICP FilingConsole
官方文档
首页

Build a Model Studio chat application with file interaction

更新时间：
复制 MD 格式
产品详情
我的收藏

Introduction

This topic describes how to build a chat application with file interaction capabilities using Alibaba Cloud Model Studio. For more information, see Build a retrieval-augmented generation application with Model Studio.

Prerequisites

  1. You must have an Alibaba Cloud Model Studio application. For more information, see Retrieval-augmented generation (RAG). To better demonstrate queries on temporary files, do not configure a knowledge base for this application.

  2. Publish the Alibaba Cloud Model Studio application to obtain the API key and application ID.

Step 1: Build a Moflow application and integrate resources

  1. Create an Alibaba Cloud Model Studio application integration resource.

  2. Create a Moflow application.

Use the ChatPro component

  1. Create a chat component.

  2. Create an Alibaba Cloud Model Studio application integration operation.

  3. Configure the AI integration.

Use the Chat component

  1. Create a chat component.

  1. Create an Alibaba Cloud Model Studio application integration operation.

  1. Attach the integration operation to the chat component.

Step 2: Configure integration operations for the temporary knowledge base

  1. Create an Alibaba Cloud OpenAPI integration resource. Select Alibaba Cloud Model Studio and enter your Alibaba Cloud AccessKey.

  1. Create an Alibaba Cloud OpenAPI integration operation to call the Alibaba Cloud Model Studio ApplyFileUploadLease API. For more information about this API, see ApplyFileUploadLease.

The following table describes the configuration details.

API

Request file upload lease

protocol

https

method

post

CategoryId

default

FileName

Passed in as a parameter. Enter the name of the uploaded file.

Md5

Any value. The API does not currently use this parameter.

SizeInBytes

Passed in as a parameter. Enter the size of the uploaded file.

CategoryType

SESSION_FILE

WorkspaceId

The ID of your Alibaba Cloud Model Studio workspace. You can find it in the Model Studio console.

Callback data transformation

 
return data.body.Data;

  1. Create a Moflow built-in file storage integration operation to copy the Moflow system file from the backend to the OSS storage of Alibaba Cloud Model Studio.

The following table describes the configuration details.

Operation type

Copy file to remote server

Moflow file ID

Passed in as a parameter. Obtain this ID from the chat component's file upload feature.

Request URL

Passed in as a parameter. Obtain this upload path from the ApplyFileUploadLease API.

Header

  • x-bailian-extra: Passed in as a parameter. Obtain this header parameter from the ApplyFileUploadLease API.

  • Content-Type: Passed in as a parameter. Obtain this header parameter from the ApplyFileUploadLease API.

  1. Create an Alibaba Cloud OpenAPI integration operation to call the Alibaba Cloud Model Studio AddFile API. For more information about this API, see AddFile.

The following table describes the configuration details.

API

Add document

protocol

https

method

put

LeaseId

Passed in as a parameter. Obtain this ID from the ApplyFileUploadLease API.

Parser

DASHSCOPE_DOCMIND

CategoryId

default

CategoryType

SESSION_FILE

WorkspaceId

The ID of your Alibaba Cloud Model Studio workspace. You can find it in the Model Studio console.

Callback data transformation

 
return data.body.Data;

  1. Create an Alibaba Cloud OpenAPI integration operation to call the Alibaba Cloud Model Studio DescribeFile API. For more information about this API, see DescribeFile.

The following table describes the configuration details.

API

Query document status

protocol

https

method

get

FileId

Passed in as a parameter. Obtain this Alibaba Cloud Model Studio file ID from the AddFile API.

WorkspaceId

The ID of your Alibaba Cloud Model Studio workspace. You can find it in the Model Studio console.

Callback data transformation

 
return data.body.Data;

Step 3: Orchestrate the temporary knowledge base logic

  1. Create an array variable to store temporary file IDs. This enables the application to handle multiple temporary file uploads.

  1. Create a timer to poll the DescribeFile API every 5 seconds. This timer checks whether the uploaded file has been parsed in Model Studio.

The following table describes the configuration details.

Optional parameters

Passed in as a parameter. Obtain this ID from the AddFile integration operation.

Interval

5000

Function body

 
describeFile.trigger({
  fileId: id
}).then(res => {
   if (res.data.Status === 'FILE_IS_READY') {
     checkFile.stop()
     mobi.showMessage('File parsed successfully!');
     inputDisabled.setValue(false)
   }
 })

  1. Create a frontend function to orchestrate the file interaction logic for the Model Studio temporary knowledge base.

The following table describes the configuration details.

Optional parameters

  • filename: The name of the uploaded file.

  • fileId: The Moflow ID of the uploaded file.

  • filesize: The size of the uploaded file.

Function body

 
// 1. Call the Model Studio API to request a document upload lease.
const response = await applyFileUploadLease.trigger({
  "FileName": filename,
  "SizeInBytes": filesize
})

// Document upload lease ID
const fileUploadLeaseId = response.data.FileUploadLeaseId

// Lease parameters
const url = response.data.Param.Url
const contentType = response.data.Param.Headers["Content-Type"]
const bailianExtra = response.data.Param.Headers["X-bailian-extra"]

// 2. Upload the file to the temporary storage on the Model Studio server.
const responseRemote = await transFormFile.trigger({
  "url": url,
  "contentType": contentType,
  "bailianExtra": bailianExtra,
  "fileId": fileId
})

// 3. Call the Model Studio API to upload the document to the current category.
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('Upload successful. Parsing the file...');

Step 4: Add temporary knowledge base logic to the Model Studio integration operation

  1. In the Model Studio integration operation that you created in Step 1, add the Temporary File ID List property under Knowledge Base Retrieval Scope. Enter the variable that you created in Step 3: {{sessionFileIds.value ? sessionFileIds.value.filter(e => e) : []}}

Step 5: Adapt the chat component upload logic

Configure the ChatPro component

  1. Enable the File Input option for the chat component.

  2. In the onUploadSuccess callback of the sender component, execute the frontend function that you created in Step 3.

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

  3. Finally, in the onAnswerComplete callback of the chat component, clear the temporary file variable.

Configure the Chat component

  1. Enable the File Input option for the chat component.

  1. In the onUploadSuccess callback of the chat component, execute the frontend function that you created in Step 3.

The following code shows an example of the parameters:

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

  1. Finally, in the onAnswerComplete callback of the chat component, clear the temporary file variable.

Previous：Quickly build a DeepSeek corporate knowledge base applicationNext：How to create a Model Studio chat application that can recognize images