From 38daa0826e70a7898ab74acc270769a43317696b Mon Sep 17 00:00:00 2001 From: jialin Date: Wed, 4 Dec 2024 19:00:48 +0800 Subject: [PATCH] fix: audio api error message --- src/components/audio-player/index.tsx | 2 +- src/components/auto-image/single-image.tsx | 74 ++++++++----------- src/pages/playground/apis/index.ts | 2 +- .../playground/components/ground-stt.tsx | 17 ++++- .../playground/components/ground-tts.tsx | 31 ++++++-- 5 files changed, 68 insertions(+), 58 deletions(-) diff --git a/src/components/audio-player/index.tsx b/src/components/audio-player/index.tsx index 40d49ed5..4c8e0bea 100644 --- a/src/components/audio-player/index.tsx +++ b/src/components/audio-player/index.tsx @@ -274,7 +274,7 @@ const AudioPlayer: React.FC = forwardRef((props, ref) => { src={props.url} ref={audioRef} preload="metadata" - style={{ display: 'none' }} + style={{ opacity: 0, position: 'absolute', left: '-9999px' }} onPlay={handleAudioOnPlay} onLoadedMetadata={handleLoadedMetadata} > diff --git a/src/components/auto-image/single-image.tsx b/src/components/auto-image/single-image.tsx index 15336018..310a1328 100644 --- a/src/components/auto-image/single-image.tsx +++ b/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 = (props) => { [autoSize, props.width, props.height] ); - const handleOnLoad = React.useCallback(async () => { - if (!autoBgColor) { - return; - } - - const img = imgWrapper.current?.querySelector('img'); - if (!img) { - return; - } - - Vibrant.from(img.src).getPalette((err: any, palette: any) => { - if (err) { - console.error(err); - return; - } - const color = palette?.Vibrant?.rgb; - const mutedColor = palette?.Muted?.rgb; - - const startColor = color - ? `rgba(${color[0]}, ${color[1]}, ${color[2]},0.7)` - : ''; - const stopColor = mutedColor - ? `rgba(${mutedColor[0]}, ${mutedColor[1]}, ${mutedColor[2]},0.5)` - : ''; - setColor({ - backgroundImage: `linear-gradient(135deg, ${startColor}, ${stopColor})` - }); - }); - }, [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; - }); - }; + // const handleOnLoad = React.useCallback(async () => { + // if (!autoBgColor) { + // return; + // } + + // const img = imgWrapper.current?.querySelector('img'); + // if (!img) { + // return; + // } + + // Vibrant.from(img.src).getPalette((err: any, palette: any) => { + // if (err) { + // console.error(err); + // return; + // } + // const color = palette?.Vibrant?.rgb; + // const mutedColor = palette?.Muted?.rgb; + + // const startColor = color + // ? `rgba(${color[0]}, ${color[1]}, ${color[2]},0.7)` + // : ''; + // const stopColor = mutedColor + // ? `rgba(${mutedColor[0]}, ${mutedColor[1]}, ${mutedColor[2]},0.5)` + // : ''; + // setColor({ + // backgroundImage: `linear-gradient(135deg, ${startColor}, ${stopColor})` + // }); + // }); + // }, [autoBgColor]); return ( diff --git a/src/pages/playground/apis/index.ts b/src/pages/playground/apis/index.ts index b88e3188..c447980f 100644 --- a/src/pages/playground/apis/index.ts +++ b/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(); diff --git a/src/pages/playground/components/ground-stt.tsx b/src/pages/playground/components/ground-stt.tsx index b964f0c5..c3789960 100644 --- a/src/pages/playground/components/ground-stt.tsx +++ b/src/pages/playground/components/ground-stt.tsx @@ -120,11 +120,15 @@ const GroundLeft: React.FC = 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 = 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 = forwardRef((props, ref) => { duration: number; type: string; }) => { + console.log('handleOnAudioData===========', data); setAudioData(() => { return { url: data.url, @@ -212,7 +221,7 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { setAudioData(null); setTokenResult(null); setMessageList([]); - console.log('data===', val); + console.log('handleOnRecord============', val); }, []); const handleOnGenerate = async () => { diff --git a/src/pages/playground/components/ground-tts.tsx b/src/pages/playground/components/ground-tts.tsx index e4faa0b0..6c4442e9 100644 --- a/src/pages/playground/components/ground-tts.tsx +++ b/src/pages/playground/components/ground-tts.tsx @@ -158,11 +158,15 @@ const GroundLeft: React.FC = 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 = 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 = 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 = 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([]);