fix: audio api error message

src/components/audio-player/index.tsx

@@ -274,7 +274,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
         src={props.url}
         ref={audioRef}
         preload="metadata"
-        style={{ display: 'none' }}
+        style={{ opacity: 0, position: 'absolute', left: '-9999px' }}
         onPlay={handleAudioOnPlay}
         onLoadedMetadata={handleLoadedMetadata}
       ></audio>

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

@@ -1,7 +1,6 @@
 import { CloseCircleOutlined } from '@ant-design/icons';
 import { Progress } from 'antd';
 import classNames from 'classnames';
-import * as Vibrant from 'node-vibrant';
 import ResizeObserver from 'rc-resize-observer';
 import React, { useCallback } from 'react';
 import AutoImage from './index';
@@ -76,50 +75,35 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
     [autoSize, props.width, props.height]
   );
 
-  const handleOnLoad = React.useCallback(async () => {
+  // const handleOnLoad = React.useCallback(async () => {
-    if (!autoBgColor) {
+  //   if (!autoBgColor) {
-      return;
+  //     return;
-    }
+  //   }
 
-    const img = imgWrapper.current?.querySelector('img');
+  //   const img = imgWrapper.current?.querySelector('img');
-    if (!img) {
+  //   if (!img) {
-      return;
+  //     return;
-    }
+  //   }
 
-    Vibrant.from(img.src).getPalette((err: any, palette: any) => {
+  //   Vibrant.from(img.src).getPalette((err: any, palette: any) => {
-      if (err) {
+  //     if (err) {
-        console.error(err);
+  //       console.error(err);
-        return;
+  //       return;
-      }
+  //     }
-      const color = palette?.Vibrant?.rgb;
+  //     const color = palette?.Vibrant?.rgb;
-      const mutedColor = palette?.Muted?.rgb;
+  //     const mutedColor = palette?.Muted?.rgb;
 
-      const startColor = color
+  //     const startColor = color
-        ? `rgba(${color[0]}, ${color[1]}, ${color[2]},0.7)`
+  //       ? `rgba(${color[0]}, ${color[1]}, ${color[2]},0.7)`
-        : '';
+  //       : '';
-      const stopColor = mutedColor
+  //     const stopColor = mutedColor
-        ? `rgba(${mutedColor[0]}, ${mutedColor[1]}, ${mutedColor[2]},0.5)`
+  //       ? `rgba(${mutedColor[0]}, ${mutedColor[1]}, ${mutedColor[2]},0.5)`
-        : '';
+  //       : '';
-      setColor({
+  //     setColor({
-        backgroundImage: `linear-gradient(135deg, ${startColor}, ${stopColor})`
+  //       backgroundImage: `linear-gradient(135deg, ${startColor}, ${stopColor})`
-      });
+  //     });
-    });
+  //   });
-  }, [autoBgColor]);
+  // }, [autoBgColor]);
-
-  const getImgSize = (
-    url: string
-  ): Promise<{ width: number; height: number }> => {
-    return new Promise((resolve) => {
-      const img = new Image();
-      img.onload = () => {
-        resolve({ width: img.width, height: img.height });
-      };
-      img.onerror = () => {
-        resolve({ width: 0, height: 0 });
-      };
-      img.src = url;
-    });
-  };
 
   return (
     <ResizeObserver onResize={handleResize}>

src/pages/playground/apis/index.ts

@@ -94,7 +94,7 @@ export const textToSpeech = async (params: any, options?: any) => {
     signal: params.signal
   });
   if (!res.ok) {
-    throw new Error('Network response was not ok');
+    return await res.json();
   }
 
   const audioBlob = await res.blob();

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

@@ -120,11 +120,15 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
         }
       );
 
-      if (result?.status_code && result?.status_code !== 200) {
+      if (
+        (result?.status_code && result?.status_code !== 200) ||
+        result?.error
+      ) {
         setTokenResult({
           error: true,
           errorMessage:
             result?.data?.error?.message ||
+            result?.error?.message ||
             result?.data?.message ||
             result?.detail ||
             ''
@@ -140,11 +144,15 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     } catch (error: any) {
       console.log('error:', error);
       const res = error?.response?.data;
-      if (res?.error) {
+      if (res?.error || (res?.status_code && res?.status_code !== 200)) {
         setTokenResult({
           error: true,
           errorMessage:
-            res?.error?.message || res?.data?.error || res?.detail || ''
+            res?.error?.message ||
+            res?.data?.error?.message ||
+            res?.data?.error ||
+            res?.detail ||
+            ''
         });
       }
     } finally {
@@ -173,6 +181,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
       duration: number;
       type: string;
     }) => {
+      console.log('handleOnAudioData===========', data);
       setAudioData(() => {
         return {
           url: data.url,
@@ -212,7 +221,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     setAudioData(null);
     setTokenResult(null);
     setMessageList([]);
-    console.log('data===', val);
+    console.log('handleOnRecord============', val);
   }, []);
 
   const handleOnGenerate = async () => {

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

@@ -158,11 +158,15 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
 
       console.log('result:', res);
 
-      if (res?.status_code && res?.status_code !== 200) {
+      if ((res?.status_code && res?.status_code !== 200) || res?.error) {
         setTokenResult({
           error: true,
           errorMessage:
-            res?.data?.error?.message || res?.data?.error || res?.detail || ''
+            res?.data?.error?.message ||
+            res?.error?.message ||
+            res?.data?.error ||
+            res?.detail ||
+            ''
         });
         setMessageList([]);
         return;
@@ -181,11 +185,16 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
       ]);
     } catch (error: any) {
       const res = error?.response?.data;
+      console.log('error:', error);
       if (res?.error) {
         setTokenResult({
           error: true,
           errorMessage:
-            res?.error?.message || res?.data?.error || res?.detail || ''
+            res?.error?.message ||
+            res?.data?.error?.message ||
+            res?.data?.error ||
+            res?.detail ||
+            ''
         });
       }
     } finally {
@@ -213,11 +222,15 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
         const res = await queryModelVoices({
           model: value
         });
-        if (res?.status_code && res?.status_code !== 200) {
+        if ((res?.status_code && res?.status_code !== 200) || res?.error) {
           setVoiceError({
             error: true,
             errorMessage:
-              res?.data?.error?.message || res?.data?.error || res?.detail || ''
+              res?.data?.error?.message ||
+              res?.error?.message ||
+              res?.data?.error ||
+              res?.detail ||
+              ''
           });
           setVoiceList([]);
           return;
@@ -242,11 +255,15 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
         formRef.current?.form.setFieldValue('voice', newList[0]?.value);
       } catch (error: any) {
         const res = error?.response?.data;
-        if (res?.error) {
+        if (res?.error || (res?.status_code && res?.status_code !== 200)) {
           setVoiceError({
             error: true,
             errorMessage:
-              res?.error?.message || res?.data?.error || res?.detail || ''
+              res?.error?.message ||
+              res?.data?.error?.message ||
+              res?.data?.error ||
+              res?.detail ||
+              ''
           });
         }
         setVoiceList([]);