From 87bb12ad5eaba9af7f6dff2d93e987377cf6c4a1 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Fri, 29 Nov 2024 22:10:13 +0800
Subject: [PATCH] fix(style): stt loading

---
 .../speech-content/hooks/use-wavesurfer.ts    |  2 +-
 src/pages/playground/apis/index.ts            |  6 ++++
 .../playground/components/ground-stt.tsx      | 28 +++++++++++--------
 .../playground/components/ground-tts.tsx      |  9 ++----
 4 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/speech-content/hooks/use-wavesurfer.ts b/src/components/speech-content/hooks/use-wavesurfer.ts
index 1519e942..1b5662f9 100644
--- a/src/components/speech-content/hooks/use-wavesurfer.ts
+++ b/src/components/speech-content/hooks/use-wavesurfer.ts
@@ -12,7 +12,7 @@ interface Options {
   autoplay?: boolean;
   audioRate?: number;
   onReady?: () => void;
-  onClick: (value: any) => void;
+  onClick: (value: number) => void;
 }
 const useWavesurfer = (options: Options) => {
   const wavesurfer = useRef<WaveSurfer | null>(null);
diff --git a/src/pages/playground/apis/index.ts b/src/pages/playground/apis/index.ts
index f55bcd73..b88e3188 100644
--- a/src/pages/playground/apis/index.ts
+++ b/src/pages/playground/apis/index.ts
@@ -98,6 +98,12 @@ export const textToSpeech = async (params: any, options?: any) => {
   }
 
   const audioBlob = await res.blob();
+  if (audioBlob?.type?.indexOf('audio') === -1) {
+    return {
+      url: '',
+      type: ''
+    };
+  }
   const audioUrl = audioBlob.size > 0 ? URL.createObjectURL(audioBlob) : '';
   return {
     url: audioUrl,
diff --git a/src/pages/playground/components/ground-stt.tsx b/src/pages/playground/components/ground-stt.tsx
index 62b450bd..b641113f 100644
--- a/src/pages/playground/components/ground-stt.tsx
+++ b/src/pages/playground/components/ground-stt.tsx
@@ -99,6 +99,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
       setLoading(true);
       setMessageId();
       setTokenResult(null);
+      setMessageList([]);
 
       controllerRef.current?.abort?.();
       controllerRef.current = new AbortController();
@@ -137,7 +138,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
         setTokenResult({
           error: true,
           errorMessage:
-            res?.error?.message || res?.data?.error || res?.error?.detail || ''
+            res?.error?.message || res?.data?.error || res?.detail || ''
         });
       }
     } finally {
@@ -292,7 +293,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
             </div>
 
             {audioData ? (
-              <div className="flex-between flex-center justify-center relative">
+              <div
+                className="flex-between flex-center justify-center relative"
+                style={{ paddingInline: 80 }}
+              >
                 <div style={{ width: 600 }}>
                   <AudioPlayer
                     url={audioData.url}
@@ -302,7 +306,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
                 </div>
                 <div
                   style={{
-                    padding: '16px 32px',
+                    padding: '16px',
                     textAlign: 'right',
                     position: 'absolute',
                     right: 0,
@@ -371,8 +375,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
                       padding: '8px 14px',
                       lineHeight: '20px',
                       display: 'flex',
-                      justifyContent: 'center',
-                      textAlign: 'center'
+                      justifyContent: 'center'
                     }}
                   >
                     {messageList.length ? (
@@ -394,14 +397,15 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
                     ></AlertInfo>
                   </div>
                 )}
-                {loading && (
-                  <Spin size="small">
-                    <div style={{ height: '46px' }}></div>
-                  </Spin>
-                )}
               </>
             </div>
-            <div></div>
+            {loading && (
+              <div style={{ width: '100%', flex: 1 }}>
+                <Spin size="small">
+                  <div style={{ height: '46px' }}></div>
+                </Spin>
+              </div>
+            )}
           </div>
         </div>
       </div>
@@ -418,7 +422,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
             paramsConfig={paramsConfig}
             initialValues={initialValues}
             params={parameters}
-            selectedModel={selectModel}
+            selectedModel={selectModel as string}
             modelList={modelList}
           />
         </div>
diff --git a/src/pages/playground/components/ground-tts.tsx b/src/pages/playground/components/ground-tts.tsx
index de3f0661..43f5043b 100644
--- a/src/pages/playground/components/ground-tts.tsx
+++ b/src/pages/playground/components/ground-tts.tsx
@@ -128,10 +128,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
         setTokenResult({
           error: true,
           errorMessage:
-            res?.data?.error?.message ||
-            res?.data?.error ||
-            res?.error?.detail ||
-            ''
+            res?.data?.error?.message || res?.data?.error || res?.detail || ''
         });
         setMessageList([]);
         return;
@@ -154,7 +151,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
         setTokenResult({
           error: true,
           errorMessage:
-            res?.error?.message || res?.data?.error || res?.error?.detail || ''
+            res?.error?.message || res?.data?.error || res?.detail || ''
         });
       }
     } finally {
@@ -384,7 +381,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
             setParams={setParams}
             initialValues={initialValues}
             params={parameters}
-            selectedModel={selectModel}
+            selectedModel={selectModel as string}
             modelList={modelList}
             extra={[renderExtra, renderVoiceError]}
           />