Skip to content

Commit

Permalink
feat: 支持上传mp3文件
Browse files Browse the repository at this point in the history
  • Loading branch information
liuruibin committed Dec 6, 2024
1 parent 28a2c98 commit 5c64d63
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 8 deletions.
60 changes: 52 additions & 8 deletions ui/src/components/ai-chat/component/chat-input-operate/index.vue
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) {
Expand Down
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>
Expand Down
6 changes: 6 additions & 0 deletions ui/src/workflow/nodes/start-node/index.vue
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])
}
Expand Down

0 comments on commit 5c64d63

Please sign in to comment.