fix: do not init audio model

src/components/logs-viewer/parse-worker.ts

@@ -8,6 +8,15 @@ const removeBracketsFromLine = (row: string) => {
   return row.startsWith('(…)') ? row.slice(3) : row;
 };
 
+interface MessageProps {
+  inputStr: string;
+  reset?: boolean;
+  page?: number;
+  isComplete?: boolean;
+  chunked?: boolean;
+  progress?: number;
+  percent?: number;
+}
 class AnsiParser {
   private cursorRow: number = 0;
   private cursorCol: number = 0;
@@ -17,6 +26,8 @@ class AnsiParser {
   private isProcessing: boolean = false;
   private taskQueue: string[] = [];
   private page: number = 1;
+  private progress: number = 0;
+  private percent: number = 0;
   private isComplete: boolean = false;
   private chunked: boolean = true; // true: send data in chunks, false: send all data at once
   private pageSize: number = 500;
@@ -44,8 +55,16 @@ class AnsiParser {
     this.page = 1;
   }
 
-  public setPage(page: number) {
+  public setPage(page: number | undefined) {
-    this.page = page;
+    this.page = page ?? 1;
+  }
+
+  public setPercent(percent: number | undefined) {
+    this.percent = percent ?? 0;
+  }
+
+  public setProgress(progress: number | undefined) {
+    this.progress = progress ?? 0;
   }
 
   public setIsCompelete(isComplete: boolean) {
@@ -179,6 +198,12 @@ class AnsiParser {
           const result = this.processInput(input);
           if (this.chunked) {
             self.postMessage({ result: result.data, lines: result.lines });
+          } else if (!this.isComplete) {
+            self.postMessage({
+              result: '',
+              percent: this.percent,
+              isComplete: false
+            });
           }
         } catch (error) {
           console.error('Error processing input:', error);
@@ -194,7 +219,11 @@ class AnsiParser {
     if (this.taskQueue.length > 0) {
       this.processQueue();
     } else if (this.isComplete && !this.chunked) {
-      self.postMessage({ result: this.getScreenText() });
+      self.postMessage({
+        result: this.getScreenText(),
+        percent: this.percent,
+        isComplete: true
+      });
       this.reset();
     }
   }
@@ -208,18 +237,20 @@ class AnsiParser {
 }
 const parser = new AnsiParser();
 
-self.onmessage = function (event) {
+self.onmessage = function (event: MessageEvent<MessageProps>) {
   const {
     inputStr,
     reset,
     page,
     isComplete = false,
-    chunked = true
+    chunked = true,
+    percent = 0
   } = event.data;
 
   parser.setPage(page);
   parser.setIsCompelete(isComplete);
   parser.setChunked(chunked);
+  parser.setPercent(percent);
 
   if (reset) {
     parser.reset();

src/components/markdown-viewer/index.less

@@ -5,6 +5,7 @@
     border: none;
     height: 1px;
     background-color: var(--ant-color-split);
+    border-color: var(--ant-color-split);
   }
 
   p {

src/global.less

@@ -907,3 +907,7 @@ body {
     width: 0;
   }
 }
+
+.ant-notification .ant-notification-notice-close {
+  width: fit-content !important;
+}

src/hooks/use-chunk-fetch.ts

@@ -89,7 +89,7 @@ const useSetChunkFetch = () => {
 
     let isReading = true;
 
-    while (true) {
+    while (isReading) {
       const { done, value } = await reader.read();
 
       if (done) {

src/hooks/use-download-stream.ts

@@ -3,7 +3,7 @@ import { message } from 'antd';
 import { useEffect, useRef } from 'react';
 
 export default function useDownloadStream() {
-  const chunkRequedtRef = useRef<any>(null);
+  const chunkRequestRef = useRef<any>(null);
   const logParseWorker = useRef<any>(null);
   const clearScreen = useRef(false);
   const filename = useRef('log');
@@ -26,19 +26,13 @@ export default function useDownloadStream() {
   };
 
   const updateContent = (data: string, options?: HandlerOptions) => {
-    const { isComplete } = options || {};
+    const { isComplete, percent } = options || {};
-
-    downloadNotificationRef.current?.({
-      ...options,
-      duration: isComplete ? 1 : null,
-      filename: filename.current
-    });
 
     logParseWorker.current?.postMessage({
       inputStr: data,
-      page: 1,
       reset: clearScreen.current,
       isComplete: isComplete,
+      percent: percent,
       chunked: false
     });
     clearScreen.current = false;
@@ -72,13 +66,9 @@ export default function useDownloadStream() {
       downloadNotificationRef.current = props.downloadNotification;
       const { params, url } = props;
 
-      downloadNotificationRef.current?.({
+      chunkRequestRef.current?.current?.abort?.();
-        filename: filename.current
-      });
 
-      chunkRequedtRef.current?.current?.abort?.();
+      chunkRequestRef.current = setChunkFetch({
-
-      chunkRequedtRef.current = setChunkFetch({
         url,
         params,
         watch: false,
@@ -86,6 +76,11 @@ export default function useDownloadStream() {
         errorHandler: handleError,
         handler: updateContent
       });
+      downloadNotificationRef.current?.({
+        filename: filename.current,
+        duration: null,
+        chunkRequestRef: chunkRequestRef.current
+      });
     } catch (error) {
       //
       downloadNotificationRef.current?.({
@@ -108,8 +103,24 @@ export default function useDownloadStream() {
     );
 
     logParseWorker.current.onmessage = (event: any) => {
-      const { result } = event.data;
+      const { result, isComplete, percent } = event.data;
+
+      const isAborted = chunkRequestRef.current?.current?.signal?.aborted;
+      if (!isComplete && !isAborted) {
+        downloadNotificationRef.current?.({
+          percent: percent,
+          duration: null,
+          filename: filename.current,
+          chunkRequestRef: chunkRequestRef.current
+        });
+      } else if (isComplete && !isAborted) {
+        downloadNotificationRef.current?.({
+          duration: 1,
+          percent: 100,
+          filename: filename.current
+        });
         downloadFile(result);
+      }
     };
 
     return () => {

src/pages/llmodels/components/instance-item.tsx

@@ -115,10 +115,11 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
   modelData,
   handleChildSelect
 }) => {
-  const [api, contextHolder] = notification.useNotification();
+  const [api, contextHolder] = notification.useNotification({
+    stack: { threshold: 1 }
+  });
   const { downloadStream } = useDownloadStream();
   const intl = useIntl();
-
   const actionItems = useMemo(() => {
     return _.filter(childActionList, (action: any) => {
       if (action.key === 'viewlog' || action.key === 'download') {
@@ -135,12 +136,25 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
   };
 
   const downloadNotification = useCallback(
-    (data: HandlerOptions & { filename: string; duration?: number }) => {
+    (
+      data: HandlerOptions & {
+        filename: string;
+        duration?: number;
+        chunkRequestRef: any;
+      }
+    ) => {
       api.open({
         duration: data.duration,
         message: renderMessage(data.filename),
         key: data.filename,
-        description: <Progress percent={data.percent} size="small"></Progress>
+        closeIcon: (
+          <span>{intl.formatMessage({ id: 'common.button.cancel' })}</span>
+        ),
+        description: <Progress percent={data.percent} size="small"></Progress>,
+        onClose() {
+          data.chunkRequestRef?.current?.abort();
+          notification.destroy?.(data.filename);
+        }
       });
     },
     []

src/pages/playground/components/ground-embedding.tsx

@@ -198,10 +198,9 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
   };
 
   const submitMessage = async (current?: { role: string; content: string }) => {
+    try {
       await formRef.current?.form.validateFields();
       if (!parameters.model) return;
-
-    try {
       const validTextList = textList.filter((item) => item.text);
       const validFileList = fileList.filter((item) => item.text);
 

src/pages/playground/components/ground-images.tsx

@@ -229,7 +229,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                     <FileImageOutlined className="font-size-32 text-secondary" />
                   </span>
                   <span>
-                    {intl.formatMessage({ id: 'playground.params.empty.tips' })}
+                    {intl.formatMessage({
+                      id: 'playground.params.empty.tips'
+                    })}
                   </span>
                 </div>
               )}
@@ -308,7 +310,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                   })}
                 >
                   <Button
-                    size="middle"
+                    size="small"
                     type="text"
                     icon={<SwapOutlined />}
                     onClick={handleToggleParamsStyle}

src/pages/playground/components/ground-reranker.tsx

@@ -218,9 +218,9 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
   };
 
   const submitMessage = async () => {
+    try {
       await formRef.current?.form.validateFields();
       if (!parameters.model) return;
-    try {
       const documentList: any[] = [...textList, ...fileList];
 
       const validDocus = documentList.filter((item) => item.text);

src/pages/playground/components/ground-stt.tsx

@@ -41,10 +41,6 @@ interface MessageProps {
   ref?: any;
 }
 
-const initialValues = {
-  language: 'auto'
-};
-
 const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   const intl = useIntl();
   const { modelList } = props;
@@ -57,8 +53,9 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   const selectModel = searchParams.get('model')
     ? modelType === 'stt' && searchParams.get('model')
     : '';
+  const defaultModel = selectModel || modelList[0]?.value || '';
   const [parameters, setParams] = useState<any>({
-    model: selectModel,
+    model: defaultModel,
     language: 'auto'
   });
   const [show, setShow] = useState(false);
@@ -112,9 +109,9 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   };
 
   const submitMessage = async () => {
+    try {
       await formRef.current?.form.validateFields();
       if (!parameters.model) return;
-    try {
       setLoading(true);
       setMessageId();
       setTokenResult(null);
@@ -181,9 +178,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     }
   };
   const handleClear = () => {
-    if (!messageList.length) {
-      return;
-    }
     setMessageId();
     setMessageList([]);
     setTokenResult(null);
@@ -243,6 +237,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   }, []);
 
   const handleOnGenerate = async () => {
+    if (loading) {
+      handleStopConversation();
+      return;
+    }
     submitMessage();
   };
 
@@ -340,7 +338,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
                         title={
                           loading
                             ? intl.formatMessage({
-                                id: 'playground.audio.generating'
+                                id: 'common.button.stop'
                               })
                             : intl.formatMessage({
                                 id: 'playground.audio.button.generate'
@@ -350,12 +348,20 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
                         {
                           <Button
                             disabled={!audioData}
-                            loading={loading}
                             type="primary"
                             size="middle"
                             shape="circle"
                             onClick={handleOnGenerate}
-                            icon={<SendOutlined></SendOutlined>}
+                            icon={
+                              loading ? (
+                                <IconFont
+                                  type="icon-stop1"
+                                  className="font-size-14"
+                                ></IconFont>
+                              ) : (
+                                <SendOutlined></SendOutlined>
+                              )
+                            }
                           ></Button>
                         }
                       </Tooltip>

src/pages/playground/components/ground-tts.tsx

@@ -92,6 +92,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     };
   });
 
+  const defaultModel = useMemo(() => {
+    return selectModel || modelList[0]?.value || '';
+  }, [modelList]);
+
   const viewCodeContent = useMemo(() => {
     return TextToSpeechCode({
       api: AUDIO_TEXT_TO_SPEECH_API,
@@ -147,9 +151,9 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   };
 
   const submitMessage = async (current?: { role: string; content: string }) => {
+    try {
       await formRef.current?.form.validateFields();
       if (!parameters.model) return;
-    try {
       setLoading(true);
       setMessageId();
       setTokenResult(null);
@@ -235,14 +239,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   const handleSelectModel = useCallback(
     async (value: string) => {
       if (!value) {
-        setVoiceList([]);
-        setParams((pre: any) => {
-          return {
-            ...pre,
-            voice: ''
-          };
-        });
-        formRef.current?.form.setFieldValue('voice', '');
         return;
       }
       const model = modelList.find((item) => item.value === value);
@@ -259,10 +255,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
       setParams((pre: any) => {
         return {
           ...pre,
+          model: value,
           voice: newList[0]?.value
         };
       });
-      formRef.current?.form.setFieldValue('voice', newList[0]?.value);
     },
     [modelList]
   );
@@ -307,11 +303,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   }, [paramsConfig, intl, voiceList]);
 
   useEffect(() => {
-    if (!parameters.model && modelList.length) {
+    if (defaultModel) {
-      const model = modelList[0]?.value;
+      handleSelectModel(defaultModel);
-      handleSelectModel(model);
     }
-  }, [modelList, parameters.model, handleSelectModel]);
+  }, [defaultModel]);
 
   useEffect(() => {
     if (scroller.current) {

src/pages/playground/components/image-edit.tsx

@@ -506,7 +506,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                     })}
                   >
                     <Button
-                      size="middle"
+                      size="small"
                       type="text"
                       icon={<SwapOutlined />}
                       onClick={handleToggleParamsStyle}

src/pages/playground/hooks/use-init-meta.ts

@@ -162,7 +162,7 @@ export const useInitImageMeta = (props: MessageProps) => {
   const { modelList } = props;
   const form = useRef<any>(null);
   const [searchParams] = useSearchParams();
-  const selectModel = searchParams.get('model') || '';
+  const defaultModel = searchParams.get('model') || modelList?.[0]?.value || '';
   const [modelMeta, setModelMeta] = useState<any>({});
   const [isOpenaiCompatible, setIsOpenaiCompatible] = useState<boolean>(false);
   const [imageSizeOptions, setImageSizeOptions] = React.useState<
@@ -175,7 +175,7 @@ export const useInitImageMeta = (props: MessageProps) => {
   const [initialValues, setInitialValues] = useState<any>({
     ...imgInitialValues,
     ...advancedFieldsDefaultValus,
-    model: selectModel
+    model: defaultModel
   });
   const [paramsConfig, setParamsConfig] = useState<ParamsSchema[]>([
     ...ImageCountConfig,
@@ -186,7 +186,7 @@ export const useInitImageMeta = (props: MessageProps) => {
   const [parameters, setParams] = useState<any>({
     ...imgInitialValues,
     ...advancedFieldsDefaultValus,
-    model: selectModel
+    model: defaultModel
   });
 
   const cacheFormData = React.useRef<Record<string, any>>({
@@ -410,11 +410,10 @@ export const useInitImageMeta = (props: MessageProps) => {
   );
 
   useEffect(() => {
-    if (!parameters.model && modelList.length) {
+    if (defaultModel) {
-      const model = modelList[0]?.value;
+      handleOnModelChange(defaultModel);
-      handleOnModelChange(model);
     }
-  }, [modelList, parameters.model, handleOnModelChange]);
+  }, [defaultModel, handleOnModelChange]);
 
   return {
     extractIMGMeta,

src/pages/playground/speech.tsx

@@ -107,6 +107,7 @@ const Playground: React.FC = () => {
           with_meta: true
         };
         const res = await queryModelsList(params);
+
         const list = _.map(res.data || [], (item: any) => {
           return {
             value: item.id,
@@ -127,6 +128,7 @@ const Playground: React.FC = () => {
           with_meta: true
         };
         const res = await queryModelsList(params);
+
         const list = _.map(res.data || [], (item: any) => {
           return {
             value: item.id,