fix(style): image wraper full size

src/components/auto-image/single-image.less

@@ -52,6 +52,7 @@
 
 .single-image {
   height: 100%;
+  width: inherit;
   display: flex;
   justify-content: center;
   align-items: center;

src/components/auto-image/single-image.tsx

@@ -44,10 +44,6 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
     width: width,
     height: height
   });
-  const [originSize, setOriginSize] = React.useState({
-    width: width,
-    height: height
-  });
 
   const thumImgWrapStyle = React.useMemo(() => {
     return loading ? { width: '100%', height: '100%' } : {};
@@ -76,7 +72,7 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
         newWidth = containerWidth;
         newHeight = containerWidth / imageAspectRatio;
       }
-
+      console.log('size++++++++=', size, newWidth, newHeight);
       setImgSize({
         width: newWidth,
         height: newHeight

src/components/speech-content/speech-item.tsx

@@ -112,6 +112,7 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
   return (
     <div>
       <div className="speech-item">
+        <div style={{}}></div>
         <div
           className="wrapper"
           style={{ height: 82, width: '100%' }}
@@ -127,7 +128,7 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
             onAudioprocess={handleOnAudioprocess}
             ref={ref}
           ></AudioPlayer>
-          {/* {isPlay && (
+          {/* {!isPlay && (
             <AudioAnimation
               maxBarCount={180}
               height={82}

src/hooks/use-request-token.ts

@@ -1,6 +1,40 @@
 import axiso from 'axios';
+import { useEffect, useRef } from 'react';
 
 export default function useRequestToken() {
   const { source } = axiso.CancelToken;
+
   return source;
 }
+
+export function useCancelToken() {
+  const { source } = axiso.CancelToken;
+  const requestToken = useRef<any>(null);
+
+  const updateCancelToken = () => {
+    if (requestToken.current) {
+      requestToken.current.cancel();
+    }
+    requestToken.current = source();
+  };
+
+  const cancelRequest = () => {
+    if (requestToken.current) {
+      requestToken.current.cancel();
+    }
+  };
+
+  const getCanceltToken = () => {
+    return requestToken.current.token;
+  };
+
+  useEffect(() => {
+    return () => {
+      if (requestToken.current) {
+        requestToken.current.cancel();
+      }
+    };
+  }, []);
+
+  return { updateCancelToken, cancelRequest, getCanceltToken, source };
+}

src/locales/en-US/playground.ts

@@ -116,6 +116,7 @@ export default {
   'playground.image.prompt.random': 'Random Prompt',
   'playground.audio.button.fast': 'Speed Up',
   'playground.audio.button.slow': 'Slow Down',
+  'playground.audio.generating': 'Generating',
   'playgorund.audio.voice.error':
     'Voices are unavailable. The model may still be initializing. Please refresh after a brief wait.'
 };

src/locales/zh-CN/playground.ts

@@ -113,6 +113,7 @@ export default {
   'playground.image.prompt.random': '随机提示词',
   'playground.audio.button.fast': '快进',
   'playground.audio.button.slow': '慢放',
+  'playground.audio.generating': '生成中',
   'playgorund.audio.voice.error':
     '声音无法使用。该模型可能仍在初始化。请稍候后刷新。'
 };

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

@@ -410,6 +410,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     return null;
   }, [size, intl]);
 
+  useEffect(() => {
+    return () => {
+      requestToken.current?.abort?.();
+    };
+  }, []);
+
   useEffect(() => {
     if (size === 'custom') {
       form.current?.form?.setFieldsValue({

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

@@ -5,6 +5,7 @@ import CopyButton from '@/components/copy-button';
 import IconFont from '@/components/icon-font';
 import UploadAudio from '@/components/upload-audio';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
+import { useCancelToken } from '@/hooks/use-request-token';
 import { readAudioFile } from '@/utils/load-audio-file';
 import { SendOutlined } from '@ant-design/icons';
 import { useIntl, useSearchParams } from '@umijs/max';
@@ -56,7 +57,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   const [loading, setLoading] = useState(false);
   const [tokenResult, setTokenResult] = useState<any>(null);
   const [collapse, setCollapse] = useState(false);
-  const controllerRef = useRef<any>(null);
   const scroller = useRef<any>(null);
   const paramsRef = useRef<any>(null);
   const [audioPermissionOn, setAudioPermissionOn] = useState(true);
@@ -67,6 +67,8 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   });
   const [isRecording, setIsRecording] = useState(false);
   const formRef = useRef<any>(null);
+  const { updateCancelToken, getCanceltToken, cancelRequest } =
+    useCancelToken();
 
   const { initialize, updateScrollerPosition } = useOverlayScroller();
   const { initialize: innitializeParams } = useOverlayScroller();
@@ -88,7 +90,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   };
 
   const handleStopConversation = () => {
-    controllerRef.current?.abort?.();
+    cancelRequest();
     setLoading(false);
   };
 
@@ -101,18 +103,22 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
       setTokenResult(null);
       setMessageList([]);
 
-      controllerRef.current?.abort?.();
-      controllerRef.current = new AbortController();
-      const signal = controllerRef.current.signal;
+      cancelRequest();
+      updateCancelToken();
       const params = {
         ...parameters,
         file: new File([audioData.data], audioData.name, {
           type: audioData.type
         })
       };
-      const result: any = await speechToText({
-        data: params
-      });
+      const result: any = await speechToText(
+        {
+          data: params
+        },
+        {
+          cancelToken: getCanceltToken()
+        }
+      );
 
       if (result?.error) {
         setTokenResult({
@@ -242,9 +248,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
       </div>
     );
   };
-  useEffect(() => {
-    console.log('parameters:', parameters);
-  }, [parameters]);
 
   useEffect(() => {
     if (scroller.current) {
@@ -315,32 +318,26 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
                   }}
                 >
                   <Tooltip
-                    title={intl.formatMessage({
-                      id: 'playground.audio.button.generate'
-                    })}
+                    title={
+                      loading
+                        ? intl.formatMessage({
+                            id: 'playground.audio.generating'
+                          })
+                        : intl.formatMessage({
+                            id: 'playground.audio.button.generate'
+                          })
+                    }
                   >
-                    {loading ? (
-                      <Button
-                        disabled={!audioData}
-                        type="primary"
-                        shape="circle"
-                        onClick={handleStopConversation}
-                        icon={
-                          <IconFont
-                            type="icon-stop1"
-                            className="font-size-14"
-                          ></IconFont>
-                        }
-                      ></Button>
-                    ) : (
+                    {
                       <Button
                         disabled={!audioData}
+                        loading={loading}
                         type="primary"
                         shape="circle"
                         onClick={handleOnGenerate}
                         icon={<SendOutlined></SendOutlined>}
                       ></Button>
-                    )}
+                    }
                   </Tooltip>
                 </div>
               </div>