diff --git a/src/components/auto-image/single-image.less b/src/components/auto-image/single-image.less index 32f29dee..c7f2faaa 100644 --- a/src/components/auto-image/single-image.less +++ b/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; diff --git a/src/components/auto-image/single-image.tsx b/src/components/auto-image/single-image.tsx index 808828b7..affc52fe 100644 --- a/src/components/auto-image/single-image.tsx +++ b/src/components/auto-image/single-image.tsx @@ -44,10 +44,6 @@ const SingleImage: React.FC = (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 = (props) => { newWidth = containerWidth; newHeight = containerWidth / imageAspectRatio; } - + console.log('size++++++++=', size, newWidth, newHeight); setImgSize({ width: newWidth, height: newHeight diff --git a/src/components/speech-content/speech-item.tsx b/src/components/speech-content/speech-item.tsx index 80530c48..b4d4d7fd 100644 --- a/src/components/speech-content/speech-item.tsx +++ b/src/components/speech-content/speech-item.tsx @@ -112,6 +112,7 @@ const SpeechItem: React.FC = (props) => { return (
+
= (props) => { onAudioprocess={handleOnAudioprocess} ref={ref} > - {/* {isPlay && ( + {/* {!isPlay && ( (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 }; +} diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts index 8a4748d9..e1e510be 100644 --- a/src/locales/en-US/playground.ts +++ b/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.' }; diff --git a/src/locales/zh-CN/playground.ts b/src/locales/zh-CN/playground.ts index aeab01a3..eb555d6e 100644 --- a/src/locales/zh-CN/playground.ts +++ b/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': '声音无法使用。该模型可能仍在初始化。请稍候后刷新。' }; diff --git a/src/pages/playground/components/ground-images.tsx b/src/pages/playground/components/ground-images.tsx index c34fb1d2..ceee14c8 100644 --- a/src/pages/playground/components/ground-images.tsx +++ b/src/pages/playground/components/ground-images.tsx @@ -410,6 +410,12 @@ const GroundImages: React.FC = forwardRef((props, ref) => { return null; }, [size, intl]); + useEffect(() => { + return () => { + requestToken.current?.abort?.(); + }; + }, []); + useEffect(() => { if (size === 'custom') { form.current?.form?.setFieldsValue({ diff --git a/src/pages/playground/components/ground-stt.tsx b/src/pages/playground/components/ground-stt.tsx index afec519c..f5b8733f 100644 --- a/src/pages/playground/components/ground-stt.tsx +++ b/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 = forwardRef((props, ref) => { const [loading, setLoading] = useState(false); const [tokenResult, setTokenResult] = useState(null); const [collapse, setCollapse] = useState(false); - const controllerRef = useRef(null); const scroller = useRef(null); const paramsRef = useRef(null); const [audioPermissionOn, setAudioPermissionOn] = useState(true); @@ -67,6 +67,8 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { }); const [isRecording, setIsRecording] = useState(false); const formRef = useRef(null); + const { updateCancelToken, getCanceltToken, cancelRequest } = + useCancelToken(); const { initialize, updateScrollerPosition } = useOverlayScroller(); const { initialize: innitializeParams } = useOverlayScroller(); @@ -88,7 +90,7 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { }; const handleStopConversation = () => { - controllerRef.current?.abort?.(); + cancelRequest(); setLoading(false); }; @@ -101,18 +103,22 @@ const GroundLeft: React.FC = 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 = forwardRef((props, ref) => {
); }; - useEffect(() => { - console.log('parameters:', parameters); - }, [parameters]); useEffect(() => { if (scroller.current) { @@ -315,32 +318,26 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { }} > - {loading ? ( - - ) : ( + { - )} + }