feat(knowledgeBase): add media dataset support and improve file handling

- Add media dataset translations in English and Chinese locales - Add "mediaDataSet" and "uploadMedia" i18n keys for UI labels - Enable media dataset creation option in Private component by uncommenting menu item - Import and display image icon for media dataset menu option - Refactor file ID handling in CreateDataset to support both string and array types - Improve fileIds initialization logic to handle mixed input types - Update CreateImageDataset component to use file chunking workflow - Add navigation to parameter settings step after file upload - Pass file IDs to dataset creation flow for media processing - Add message API and navigate hook for improved UX feedback
2025-12-25 20:17:58 +08:00
parent 99c501f188
commit c00e164567
5 changed files with 115 additions and 35 deletions
--- a/web/src/i18n/en.ts
+++ b/web/src/i18n/en.ts
@@ -501,6 +501,7 @@ export const en = {
      createImport: 'Create/Import',
      textDataSet: 'Text Dataset',
      imageDataSet: 'Image Dataset',
+      mediaDataSet: 'Media Dataset',
      blankDataset: 'Blank Dataset',
      customTextDataset: 'Custom Text Dataset',
      text: 'Text',
@@ -577,6 +578,7 @@ export const en = {
      datasetName: 'Dataset Name',
      pleaseEnterDatasetName: 'Please enter dataset name',
      uploadImages: 'Upload Images',
+      uploadMedia: 'Upload Media files',
      pleaseUploadImages: 'Please upload images',
      embedding_id: 'Embedding',
      llm_id: 'LLM',
--- a/web/src/i18n/zh.ts
+++ b/web/src/i18n/zh.ts
@@ -125,6 +125,7 @@ export const zh = {
      createImport: '新建/导入',
      textDataSet: '文本数据集',
      imageDataSet: '图片数据集',
+      mediaDataSet: '媒体数据集',
      blankDataset: '空白数据集',
      emptyDataSet: '空白数据集',
      customTextDataset: '自定义文本数据集',
@@ -201,6 +202,7 @@ export const zh = {
      datasetName: '数据集名称',
      pleaseEnterDatasetName: '请输入数据集名称',
      uploadImages: '上传图片',
+      uploadMedia: '上传媒体文件',
      pleaseUploadImages: '请上传图片',
      embedding_id: '嵌入模型',
      llm_id: '大语言模型',
--- a/web/src/views/KnowledgeBase/[knowledgeBaseId]/CreateDataset.tsx
+++ b/web/src/views/KnowledgeBase/[knowledgeBaseId]/CreateDataset.tsx
@@ -53,8 +53,8 @@ interface CreateDatasetLocationState {
  knowledgeBaseId?: string;
  parentId?: string;
  startStep?: StepKey;
-  fileId?: string;
-  fileIds?: string[];
+  fileId?: string | string[];
+  fileIds?: string | string[];
 }

 const CreateDataset = () => {
@@ -67,7 +67,11 @@ const CreateDataset = () => {
  const knowledgeBaseId = locationState.knowledgeBaseId || routeKnowledgeBaseId;
  const parentId = locationState.parentId;
  const initialStepKey = locationState.startStep ?? 'selectFile';
-  const initialFileIds = locationState.fileIds ?? (locationState.fileId ? [locationState.fileId] : []);
+  const initialFileIds = (() => {
+    const fileIds = locationState.fileIds || locationState.fileId;
+    if (!fileIds) return [];
+    return Array.isArray(fileIds) ? fileIds : [fileIds];
+  })();
  const [current, setCurrent] = useState<number>(stepIndexMap[initialStepKey]);
  const tableRef = useRef<TableRef>(null);

--- a/web/src/views/KnowledgeBase/[knowledgeBaseId]/Private.tsx
+++ b/web/src/views/KnowledgeBase/[knowledgeBaseId]/Private.tsx
@@ -13,6 +13,7 @@ import folderIcon from '@/assets/images/knowledgeBase/folder.png';
 import textIcon from '@/assets/images/knowledgeBase/text.png';
 import editIcon from '@/assets/images/knowledgeBase/edit.png';
 import blankIcon from '@/assets/images/knowledgeBase/blankDocument.png';
+import imageIcon from '@/assets/images/knowledgeBase/image.png'
 import { getKnowledgeBaseDetail, deleteDocument, downloadFile, updateKnowledgeBase } from '@/api/knowledgeBase';
 import { 
  type CreateModalRef, 
@@ -327,15 +328,15 @@ const Private: FC = () => {
        // handleCreate('folder'); // 传入 type: 'folder'
      },
    },
-    // 暂时未实现
-    // {
-    //   key: '3',
-    //   icon: <img src={imageIcon} alt="image" style={{ width: 16, height: 16 }} />,
-    //   label: t('knowledgeBase.imageDataSet'),
-    //   onClick: () => {
-    //     createImageDataset?.current?.handleOpen(knowledgeBaseId || '', parentId || '')
-    //   },
-    // },
+    {
+      key: '3',
+      icon: <img src={imageIcon} alt="image" style={{ width: 16, height: 16 }} />,
+      label: t('knowledgeBase.mediaDataSet'),
+      onClick: () => {
+        createImageDataset?.current?.handleOpen(knowledgeBaseId || '', parentId || '')
+      },
+    },
+        // 暂时未实现
    // {
    //   key: '4',
    //   icon: <img src={blankIcon} alt="blank" style={{ width: 16, height: 16 }} />,
--- a/web/src/views/KnowledgeBase/components/CreateImageDataset.tsx
+++ b/web/src/views/KnowledgeBase/components/CreateImageDataset.tsx
@@ -1,5 +1,7 @@
 import { forwardRef, useImperativeHandle, useState, useRef } from 'react';
-import { Form, Input } from 'antd';
+import { useNavigate } from 'react-router-dom';
+
+import { Form, Input, message } from 'antd';
 import { useTranslation } from 'react-i18next';
 import type { UploadFile } from 'antd';
 import type { CreateSetModalRef, CreateSetMoealRefProps, UploadFileResponse } from '@/views/KnowledgeBase/types';
@@ -16,12 +18,16 @@ interface ImageDatasetFormData {
 const CreateImageDataset = forwardRef<CreateSetModalRef, CreateSetMoealRefProps>(
  ({ refreshTable }, ref) => {
    const { t } = useTranslation();
+    const navigate = useNavigate();
    const [visible, setVisible] = useState(false);
+    const [messageApi, contextHolder] = message.useMessage();
+
    const [form] = Form.useForm<ImageDatasetFormData>();
    const [loading, setLoading] = useState(false);
    const [kbId, setKbId] = useState<string>('');
    const [parentId, setParentId] = useState<string>('');
    const uploadRef = useRef<{ fileList: UploadFile[]; clearFiles: () => void }>(null);
+    // const fileIds = [];

    const handleClose = () => {
      form.resetFields();
@@ -50,22 +56,23 @@ const CreateImageDataset = forwardRef<CreateSetModalRef, CreateSetMoealRefProps>
        if (fileList.length === 0) {
          throw new Error(t('knowledgeBase.pleaseUploadImages'));
        }
-
-        // 上传所有图片
-        const uploadPromises = fileList.map(async (file) => {
-          if (file.originFileObj) {
-            const formData = new FormData();
-            formData.append('file', file.originFileObj);
+        const ids = fileList.map((file) => file.response?.id);
+        handleChunking(kbId, parentId, ids)
+        // // 上传所有图片
+        // const uploadPromises = fileList.map(async (file) => {
+        //   if (file.originFileObj) {
+        //     const formData = new FormData();
+        //     formData.append('file', file.originFileObj);
            
-            return uploadFile(formData, {
-              kb_id: kbId,
-              parent_id: parentId,
-            });
-          }
-          return null;
-        });
+        //     return uploadFile(formData, {
+        //       kb_id: kbId,
+        //       parent_id: parentId,
+        //     });
+        //   }
+        //   return null;
+        // });

-        await Promise.all(uploadPromises);
+        // await Promise.all(uploadPromises);

        if (refreshTable) {
          await refreshTable();
@@ -78,13 +85,73 @@ const CreateImageDataset = forwardRef<CreateSetModalRef, CreateSetMoealRefProps>
        setLoading(false);
      }
    };
-
+    const handleChunking = (kb_id: string, parent_id: string, file_id: Array<string>) => {
+      if (!kb_id) return;
+      const targetFileId = file_id
+      navigate(`/knowledge-base/${kb_id}/create-dataset`, {
+        state: {
+          source: 'local',
+          knowledgeBaseId: kb_id,
+          parentId: parent_id ?? kb_id,
+          startStep: 'parameterSettings',
+          fileId: targetFileId,
+        },
+      });
+    }
    useImperativeHandle(ref, () => ({
      handleOpen,
    }));
+    // 检查媒体文件时长的辅助函数
+    const checkMediaDuration = (file: File): Promise<number> => {
+      return new Promise((resolve, reject) => {
+        const url = URL.createObjectURL(file);
+        const media = document.createElement(file.type.startsWith('video/') ? 'video' : 'audio');
+        
+        media.onloadedmetadata = () => {
+          URL.revokeObjectURL(url);
+          resolve(media.duration);
+        };
+        
+        media.onerror = () => {
+          URL.revokeObjectURL(url);
+          reject(new Error('无法读取媒体文件'));
+        };
+        
+        media.src = url;
+      });
+    };
    // 上传文件
-    const handleUpload = (options: UploadRequestOption) => {
+    const handleUpload = async (options: UploadRequestOption) => {
      const { file, onSuccess, onError, onProgress, filename = 'file' } = options;
+      // 获取文件扩展名
+    const fileExtension = (file as File).name.split('.').pop()?.toLowerCase();
+    const mediaExtensions = ['mp3', 'mp4', 'mov', 'wav'];
+    
+    // 如果是媒体文件，进行大小和时长检查
+    if (fileExtension && mediaExtensions.includes(fileExtension)) {
+      const fileSizeInMB = (file as File).size / (1024 * 1024);
+      
+      // 检查文件大小（256MB限制）
+      if (fileSizeInMB > 256) {
+        messageApi.error(`${t('knowledgeBase.sizeLimitError')}：${fileSizeInMB.toFixed(2)}MB`);
+        onError?.(new Error(`${t('knowledgeBase.fileSizeExceeds')}`));
+        return;
+      }
+      
+      try {
+        // 检查媒体时长（150秒限制）
+        const duration = await checkMediaDuration(file as File);
+        if (duration > 150) {
+          messageApi.error(`${t('knowledgeBase.fileDurationLimitError')}：${Math.round(duration)}秒`);
+          onError?.(new Error(`${t('knowledgeBase.fileDurationExceeds')}`));
+          return;
+        }
+      } catch (error) {
+        messageApi.error(`${t('knowledgeBase.unableReadFile')}`);
+        onError?.(error as Error);
+        return;
+      }
+    }
      const formData = new FormData();

      formData.append(filename, file as File);
@@ -108,6 +175,7 @@ const CreateImageDataset = forwardRef<CreateSetModalRef, CreateSetMoealRefProps>
          onSuccess?.(res, new XMLHttpRequest());
          if (res?.id) {
            // 上传成功
+            // fileIds.push(res.id)
          }
        })
        .catch((error) => {
@@ -115,6 +183,8 @@ const CreateImageDataset = forwardRef<CreateSetModalRef, CreateSetMoealRefProps>
        });
    };
    return (
+      <>
+      {contextHolder}
      <RbModal
        title={`${t('knowledgeBase.createA')} ${t('knowledgeBase.imageDataSet')}`}
        open={visible}
@@ -124,27 +194,28 @@ const CreateImageDataset = forwardRef<CreateSetModalRef, CreateSetMoealRefProps>
        confirmLoading={loading}
      >
        <Form form={form} layout="vertical">
-          <Form.Item
+          {/* <Form.Item
            name="name"
            label={t('knowledgeBase.datasetName')}
            rules={[{ required: true, message: t('knowledgeBase.pleaseEnterDatasetName') }]}
          >
            <Input placeholder={t('knowledgeBase.pleaseEnterDatasetName')} />
-          </Form.Item>
+          </Form.Item> */}

-          <Form.Item label={t('knowledgeBase.uploadImages')}>
+          <Form.Item label={t('knowledgeBase.uploadMedia')}>
            <UploadFiles 
+              ref={uploadRef}
              isCanDrag={true} 
-              fileSize={50} 
+              fileSize={100} 
              multiple={true} 
              maxCount={99} 
-              fileType={['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']} 
+              fileType={['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'mp3', 'mp4', 'mov', 'wav']} 
              customRequest={handleUpload} 
            />
          </Form.Item>
        </Form>
      </RbModal>
-    );
+    </>);
  }
 );