fix: the logic of uploading files

modelscope · Mar 7, 2025 · e749432 · e749432
1 parent da1d0f1
commit e749432
Show file tree

Hide file tree

Showing 11 changed files with 518 additions and 204 deletions.
diff --git a/.changeset/shaggy-pets-knock.md b/.changeset/shaggy-pets-knock.md
@@ -0,0 +1,9 @@
+---
+'@modelscope-studio/antdx': patch
+'@modelscope-studio/antd': patch
+'@modelscope-studio/pro': patch
+'@modelscope-studio/frontend': patch
+'modelscope_studio': patch
+---
+
+fix: the logic of uploading files
diff --git a/backend/modelscope_studio/components/pro/multimodal_input/__init__.py b/backend/modelscope_studio/components/pro/multimodal_input/__init__.py
@@ -18,9 +18,11 @@
 class MultimodalInputUploadConfig(GradioModel):
     fullscreen_drop: Optional[bool] = False
     allow_paste_file: Optional[bool] = True
+    allow_speech: Optional[bool] = False
     show_count: Optional[bool] = True
     button_tooltip: Optional[str] = None
     accept: Optional[str] = None
+    max_count: Optional[int] = None
     directory: Optional[bool] = False
     multiple: Optional[bool] = False
     disabled: Optional[bool] = False

diff --git a/docs/app.py b/docs/app.py
@@ -529,4 +529,5 @@ def more_components():
 demo = site.render()
 
 if __name__ == "__main__":
-    demo.queue().launch(ssr_mode=False)
+    demo.queue(default_concurrency_limit=100,
+               max_size=100).launch(ssr_mode=False, max_threads=100)
diff --git a/docs/layout_templates/chatbot/demos/app.py b/docs/layout_templates/chatbot/demos/app.py
@@ -203,9 +203,12 @@ def preprocess_submit_handler(state_value):
                     conversation["meta"]["disabled"] = True
             return {
                 **({
-                    sender: gr.update(value=None, loading=True),
-                    attachments: gr.update(value=[]),
-                    attachments_badge: gr.update(dot=False),
+                    sender:
+                    gr.update(value=None, loading=True) if clear_input else gr.update(loading=True),
+                    attachments:
+                    gr.update(value=[]),
+                    attachments_badge:
+                    gr.update(dot=False),
                 } if clear_input else {}),
                 conversations:
                 gr.update(active_key=state_value["conversation_id"],
@@ -1020,13 +1023,14 @@ def logo():
                           sender, conversation_delete_menu_item, clear_btn,
                           conversations, add_conversation_btn, chatbot, state
                       ])
-    sender.cancel(fn=None, cancels=[submit_event, regenerating_event])
     sender.cancel(fn=Gradio_Events.cancel,
                   inputs=[state],
                   outputs=[
                       sender, conversation_delete_menu_item, clear_btn,
                       conversations, add_conversation_btn, chatbot, state
-                  ])
+                  ],
+                  cancels=[submit_event, regenerating_event],
+                  queue=False)
 
 if __name__ == "__main__":
     demo.queue().launch(ssr_mode=False)
diff --git a/frontend/antd/upload/dragger/upload.dragger.tsx b/frontend/antd/upload/dragger/upload.dragger.tsx
@@ -5,6 +5,7 @@ import type { FileData } from '@gradio/client';
 import { useFunction } from '@utils/hooks/useFunction';
 import { renderParamsSlot } from '@utils/renderParamsSlot';
 import { type GetProps, Upload as AUpload, type UploadFile } from 'antd';
+import type { RcFile } from 'antd/es/upload';
 import { noop } from 'lodash-es';
 
 const isUploadFile = (file: FileData | UploadFile): file is UploadFile => {
@@ -21,7 +22,7 @@ export const UploadDragger = sveltify<
   Omit<GetProps<typeof AUpload.Dragger>, 'fileList' | 'onChange'> & {
     onValueChange?: (value: FileData[]) => void;
     onChange?: (value: string[]) => void;
-    upload: (files: File[]) => Promise<(FileData | null)[]>;
+    upload: (files: RcFile[]) => Promise<(FileData | null)[]>;
     fileList: FileData[];
     setSlotParams: SetSlotParams;
   },
@@ -91,20 +92,27 @@ export const UploadDragger = sveltify<
       setFileList(fileListProp);
     }, [fileListProp]);
     const validFileList = useMemo(() => {
+      const visited: Record<string, number> = {};
       return (
-        fileList?.map((file) => {
+        fileList.map((file) => {
           if (!isUploadFile(file)) {
+            const uid = file.url || file.path;
+            if (!visited[uid]) {
+              visited[uid] = 0;
+            }
+            visited[uid]++;
             return {
               ...file,
               name: file.orig_name || file.path,
-              uid: file.uid || file.url || file.path,
+              uid: file.uid || uid + '-' + visited[uid],
               status: 'done' as const,
             };
           }
           return file;
         }) || []
       );
     }, [fileList]);
+
     return (
       <AUpload.Dragger
         {...props}
@@ -122,66 +130,87 @@ export const UploadDragger = sveltify<
             ? renderParamsSlot({ slots, setSlotParams, key: 'iconRender' })
             : iconRenderFunction
         }
-        onRemove={(file) => {
-          if (uploadingRef.current) {
-            return;
-          }
-          onRemove?.(file);
+        // onRemove={(file) => {
+        //   if (uploadingRef.current) {
+        //     return;
+        //   }
+        //   onRemove?.(file);
+        //   const index = validFileList.findIndex((v) => v.uid === file.uid);
+        //   const newFileList = fileList.slice() as FileData[];
+        //   newFileList.splice(index, 1);
+        //   onValueChange?.(newFileList);
+        //   onChange?.(newFileList.map((v) => v.path));
+        // }}
+        maxCount={maxCount}
+        onChange={async (info) => {
+          const file = info.file;
+          const files = info.fileList;
+
+          // remove
           const index = validFileList.findIndex((v) => v.uid === file.uid);
-          const newFileList = fileList.slice() as FileData[];
-          newFileList.splice(index, 1);
-          onValueChange?.(newFileList);
-          onChange?.(newFileList.map((v) => v.path));
-        }}
-        beforeUpload={async (file, files) => {
-          if (beforeUploadFunction) {
-            if (!(await beforeUploadFunction(file, files))) {
-              return false;
+
+          if (index !== -1) {
+            if (uploadingRef.current) {
+              return;
             }
-          }
+            onRemove?.(file);
+            const newFileList = fileList.slice() as FileData[];
+            newFileList.splice(index, 1);
+            onValueChange?.(newFileList);
+            onChange?.(newFileList.map((v) => v.path));
+          } else {
+            // add
+            if (beforeUploadFunction) {
+              if (!(await beforeUploadFunction(file, files))) {
+                return;
+              }
+            }
+            if (uploadingRef.current) {
+              return;
+            }
+            uploadingRef.current = true;
+            let validFiles = files.filter((v) => v.status !== 'done');
 
-          if (uploadingRef.current) {
-            return false;
-          }
-          uploadingRef.current = true;
-          let validFiles = files;
-          if (typeof maxCount === 'number') {
-            const max = maxCount - fileList.length;
-            validFiles = files.slice(0, max < 0 ? 0 : max);
-          } else if (maxCount === 1) {
-            validFiles = files.slice(0, 1);
-          } else if (validFiles.length === 0) {
-            uploadingRef.current = false;
-            return false;
-          }
+            if (maxCount === 1) {
+              validFiles = validFiles.slice(0, 1);
+            } else if (validFiles.length === 0) {
+              uploadingRef.current = false;
+              return;
+            } else if (typeof maxCount === 'number') {
+              const max = maxCount - fileList.length;
+              validFiles = validFiles.slice(0, max < 0 ? 0 : max);
+            }
+
+            const lastFileList = fileList;
 
-          const lastFileList = fileList;
-          setFileList((prev) => [
-            ...(maxCount === 1 ? [] : prev),
-            ...validFiles.map((v) => {
-              return {
-                ...v,
-                size: v.size,
-                uid: v.uid,
-                name: v.name,
-                status: 'uploading' as const,
-              };
-            }),
-          ]);
-          const fileDataList = (await upload(validFiles)).filter(
-            (v) => v
-          ) as (FileData & { uid: string })[];
+            setFileList((prev) => [
+              ...(maxCount === 1 ? [] : prev),
+              ...validFiles.map((v) => {
+                return {
+                  ...v,
+                  size: v.size,
+                  uid: v.uid,
+                  name: v.name,
+                  status: 'uploading' as const,
+                };
+              }),
+            ]);
 
-          const mergedFileList =
-            maxCount === 1
-              ? fileDataList
-              : ([...lastFileList, ...fileDataList] as FileData[]);
-          uploadingRef.current = false;
-          onValueChange?.(mergedFileList);
-          onChange?.(mergedFileList.map((v) => v.path));
-          return false;
+            const fileDataList = (
+              await upload(validFiles.map((f) => f.originFileObj as RcFile))
+            ).filter(Boolean) as FileData[];
+            const mergedFileList =
+              maxCount === 1
+                ? fileDataList
+                : ([...lastFileList, ...fileDataList] as FileData[]);
+
+            uploadingRef.current = false;
+
+            setFileList(mergedFileList);
+            onValueChange?.(mergedFileList);
+            onChange?.(mergedFileList.map((v) => v.path));
+          }
         }}
-        maxCount={1}
         customRequest={customRequestFunction || noop}
         progress={
           progress