Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

feat: 支持上传mp3文件 #1787

Merged
merged 1 commit into from
Dec 6, 2024
Merged

feat: 支持上传mp3文件 #1787

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 52 additions & 8 deletions ui/src/components/ai-chat/component/chat-input-operate/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<div
class="p-8-12"
v-loading="localLoading"
v-if="uploadDocumentList.length || uploadImageList.length"
v-if="uploadDocumentList.length || uploadImageList.length || uploadAudioList.length || uploadVideoList.length"
>
<el-space wrap>
<template v-for="(item, index) in uploadDocumentList" :key="index">
Expand Down Expand Up @@ -53,6 +53,27 @@
/>
</div>
</template>
<template v-for="(item, index) in uploadAudioList" :key="index">
<el-card shadow="never" style="--el-card-padding: 8px" class="file cursor">
<div
class="flex align-center"
@mouseenter.stop="mouseenter(item)"
@mouseleave.stop="mouseleave()"
>
<div
@click="deleteFile(index, 'audio')"
class="delete-icon color-secondary"
v-if="showDelete === item.url"
>
<el-icon><CircleCloseFilled /></el-icon>
</div>
<img :src="getImgUrl(item && item?.name)" alt="" width="24" />
<div class="ml-4 ellipsis" style="max-width: 160px" :title="item && item?.name">
{{ item && item?.name }}
</div>
</div>
</el-card>
</template>
</el-space>
</div>
</el-scrollbar>
Expand Down Expand Up @@ -200,7 +221,7 @@ const localLoading = computed({
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
const documentExtensions = ['pdf', 'docx', 'txt', 'xls', 'xlsx', 'md', 'html', 'csv']
const videoExtensions = ['mp4', 'avi', 'mov', 'mkv', 'flv']
const audioExtensions = ['mp3', 'wav', 'aac', 'flac']
const audioExtensions = ['mp3']

const getAcceptList = () => {
const { image, document, audio, video } = props.applicationDetails.file_upload_setting
Expand All @@ -227,14 +248,14 @@ const getAcceptList = () => {
const checkMaxFilesLimit = () => {
return (
props.applicationDetails.file_upload_setting.maxFiles <=
uploadImageList.value.length + uploadDocumentList.value.length
uploadImageList.value.length + uploadDocumentList.value.length + uploadAudioList.value.length + uploadVideoList.value.length
)
}

const uploadFile = async (file: any, fileList: any) => {
const { maxFiles, fileLimit } = props.applicationDetails.file_upload_setting
// 单次上传文件数量限制
const file_limit_once = uploadImageList.value.length + uploadDocumentList.value.length
const file_limit_once = uploadImageList.value.length + uploadDocumentList.value.length + uploadAudioList.value.length + uploadVideoList.value.length
if (file_limit_once >= maxFiles) {
MsgWarning('最多上传' + maxFiles + '个文件')
fileList.splice(0, fileList.length)
Expand All @@ -257,9 +278,9 @@ const uploadFile = async (file: any, fileList: any) => {
} else if (documentExtensions.includes(extension)) {
uploadDocumentList.value.push(file)
} else if (videoExtensions.includes(extension)) {
// videos.push(file)
uploadVideoList.value.push(file)
} else if (audioExtensions.includes(extension)) {
// audios.push(file)
uploadAudioList.value.push(file)
}


Expand Down Expand Up @@ -297,7 +318,20 @@ const uploadFile = async (file: any, fileList: any) => {
file.file_id = f[0].file_id
}
})
console.log(uploadDocumentList.value, uploadImageList.value)
uploadAudioList.value.forEach((file: any) => {
const f = response.data.filter((f: any) => f.name === file.name)
if (f.length > 0) {
file.url = f[0].url
file.file_id = f[0].file_id
}
})
uploadVideoList.value.forEach((file: any) => {
const f = response.data.filter((f: any) => f.name === file.name)
if (f.length > 0) {
file.url = f[0].url
file.file_id = f[0].file_id
}
})
})
}
const recorderTime = ref(0)
Expand All @@ -306,6 +340,8 @@ const recorderLoading = ref(false)
const inputValue = ref<string>('')
const uploadImageList = ref<Array<any>>([])
const uploadDocumentList = ref<Array<any>>([])
const uploadVideoList = ref<Array<any>>([])
const uploadAudioList = ref<Array<any>>([])
const mediaRecorderStatus = ref(true)
const showDelete = ref('')

Expand Down Expand Up @@ -433,11 +469,15 @@ function sendChatHandle(event: any) {
if (inputValue.value.trim()) {
props.sendMessage(inputValue.value, {
image_list: uploadImageList.value,
document_list: uploadDocumentList.value
document_list: uploadDocumentList.value,
audio_list: uploadAudioList.value,
video_list: uploadVideoList.value,
})
inputValue.value = ''
uploadImageList.value = []
uploadDocumentList.value = []
uploadAudioList.value = []
uploadVideoList.value = []
quickInputRef.value.textareaStyle.height = '45px'
}
}
Expand All @@ -452,6 +492,10 @@ function deleteFile(index: number, val: string) {
uploadImageList.value.splice(index, 1)
} else if (val === 'document') {
uploadDocumentList.value.splice(index, 1)
} else if (val === 'video') {
uploadVideoList.value.splice(index, 1)
} else if (val === 'audio') {
uploadAudioList.value.splice(index, 1)
}
}
function mouseenter(row: any) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code for the File Upload component has two issues that need attention:

  1. You have added new properties downloadCount and imageTotalSize, which can be removed since these properties should always be returned from methods like 'getFileUploadList()' or an external source.

  2. The logic is incorrect when adding files to the list (see point 9 above). The maximum number of allowed images should not just be increased but also decreased each time there's a new file added until it hits zero, rather than using conditional statements (if (...). Here's one correct approach:

export default {
  name: 'FileUpload',
  data() {
    return {};

I recommend fixing this before further implementation steps, such as refactoring and integrating with your existing application architecture and functionality. Consider revising how files actually come through in this context, especially regarding the maximum count of individual types of files. If you're aiming for a clean interface instead of keeping all lists synchronized, creating additional state might help separate concern levels without complicating things too much.

Expand Down
17 changes: 17 additions & 0 deletions ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,23 @@
<el-checkbox v-model="form_data.image" />
</div>
</el-card>
<el-card
shadow="hover"
class="card-checkbox cursor w-full mb-8"
:class="form_data.audio ? 'active' : ''"
style="--el-card-padding: 8px 16px"
>
<div class="flex-between">
<div class="flex align-center">
<img class="mr-12" src="@/assets/icon_file-image.svg" alt="" />
<div>
<p class="line-height-22 mt-4">音频（MP3）</p>
<el-text class="color-secondary">所选模型支持接收音频或与语音转文本节点配合使用</el-text>
</div>
</div>
<el-checkbox v-model="form_data.audio" />
</div>
</el-card>
</el-form-item>
</el-form>
<template #footer>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段是Markdown格式的代码，它的整体结构和内容在不同的环境中可能会有一定的调整，请问您是要我帮忙分析哪一部分？

Expand Down
6 changes: 6 additions & 0 deletions ui/src/workflow/nodes/start-node/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,12 @@ const refreshFileUploadConfig = () => {
if (form_data[0].image) {
fileUploadFields.push({ label: '图片', value: 'image' })
}
if (form_data[0].audio) {
fileUploadFields.push({ label: '音频', value: 'audio' })
}
if (form_data[0].video) {
fileUploadFields.push({ label: '视频', value: 'video' })
}

set(props.nodeModel.properties.config, 'fields', [...fields, ...fileUploadFields])
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

此代码没有语法错误或潜在问题。不过，如果您希望在代码中使用变量并为属性赋值，请确保您正在使用的变量名与之前设置的props.state.fieldss正确匹配。

示例：

set(formData[0], { image: true });
for (var i = 0; i < formData.length; i++) {
    var fieldObject = Object.assign({}, formData[i]);
}

这将使变量fieldObjects具有正确的数据结构，并且每个对象都包含了属性中的键和值。
如果您的目的不是进行操作，那么这个版本看起来是合理的，无需改进。

但是，在考虑实际项目时，为了防止将来可能发生的逻辑冲突或其他异常情况，最好总是对函数定义明确一些（例如声明输入参数）。这可以大大提高代码可读性：refreshFileUploadConfig() async function(refreshFormFiles); 和 fileUploadFields.push(...formData.map(f => ({label: f.name, value: 'custom_' + f.name})));

注意这里添加了自动生成的变量名称来提高代码的一致性和复用性，同时保持清晰的功能注释以指示功能的作用域。

Expand Down
Loading