fix: audio error message

config/config.ts

@@ -14,7 +14,7 @@ const isProduction = env === 'production';
 const t = Date.now();
 export default defineConfig({
   proxy: {
-    ...proxy('http://192.168.50.4')
+    ...proxy('http://192.168.50.3')
   },
   history: {
     type: 'hash'

src/components/audio-animation/index.tsx

@@ -5,6 +5,7 @@ import './index.less';
 interface AudioAnimationProps {
   width: number;
   height: number;
+  maxWidth?: number;
   scaleFactor?: number;
   maxBarCount?: number;
   fixedHeight?: boolean;
@@ -18,6 +19,7 @@ const AudioAnimation: React.FC<AudioAnimationProps> = (props) => {
   const {
     scaleFactor = 1.2,
     maxBarCount = 128,
+    maxWidth,
     fixedHeight = true,
     analyserData,
     width: initialWidth,
@@ -133,12 +135,16 @@ const AudioAnimation: React.FC<AudioAnimationProps> = (props) => {
 
   React.useEffect(() => {
     if (size) {
-      setWidth(size?.width || 0);
+      if (maxWidth) {
+        setWidth(Math.min(size.width, maxWidth));
+      } else {
+        setWidth(size?.width || 0);
+      }
       if (!fixedHeight) {
         setHeight(size?.height || 0);
       }
     }
-  }, [size]);
+  }, [size, maxWidth]);
 
   useEffect(() => {
     if (!canvasRef.current) return;

src/components/logs-viewer/virtual-log-list.tsx

@@ -140,6 +140,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
 
   const updateContent = useCallback(
     (inputStr: string) => {
+      console.log('inputStr===', inputStr);
       const data = inputStr.replace(replaceLineRegex, '\n');
       if (isClean(data)) {
         cacheDataRef.current = data;

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

@@ -124,6 +124,11 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
     debounceSeek(value);
   };
 
+  const handlOnChangeComplete = useCallback((value: number) => {
+    ref.current?.seekTo(value / duration);
+    setCurrentTime(value);
+  }, []);
+
   const onDownload = useCallback(() => {
     const url = props.audioUrl || '';
     const filename = `audio-${dayjs().format('YYYYMMDDHHmmss')}.${props.format}`;

src/constants/external-links.ts

@@ -1,7 +1,13 @@
-export default {
+const externalLinks = {
   documentation: 'https://docs.gpustack.ai/',
   github: 'https://github.com/gpustack/gpustack',
   discord: 'https://discord.gg/VXYJzuaqwD',
   site: 'https://gpustack.ai/',
   release: 'https://github.com/gpustack/gpustack/releases'
 };
+
+export default externalLinks;
+
+export const externalRefer = {
+  audioPermission: `${externalLinks.documentation}latest/user-guide/playground/#audio-playground`
+};

src/locales/en-US/playground.ts

@@ -84,6 +84,7 @@ export default {
     'Upload an audio file or start recording',
   'playground.audio.enablemic':
     "Enable microphone access in your browser's settings.",
+  'playground.audio.enablemic.doc': 'Refer to',
   'playground.audio.startrecord': 'Start Recording',
   'playground.audio.stoprecord': 'Stop Recording',
   'playground.audio.generating.tips': 'Generated text will appear here.',

src/locales/zh-CN/playground.ts

@@ -82,6 +82,7 @@ export default {
   'playground.audio.texttospeech.tips': '生成的语音将出现在这里',
   'playground.audio.speechtotext.tips': '上传音频文件或开始录音',
   'playground.audio.enablemic': '请允许浏览器访问麦克风，以便开始录音',
+  'playground.audio.enablemic.doc': '参考文档',
   'playground.audio.startrecord': '开始录音',
   'playground.audio.stoprecord': '停止录音',
   'playground.audio.generating.tips': '生成的文本将出现在这里',

src/pages/playground/components/audio-input.tsx

@@ -1,3 +1,4 @@
+import { externalRefer } from '@/constants/external-links';
 import { AudioOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Space, Tooltip } from 'antd';
@@ -215,7 +216,25 @@ const AudioInput: React.FC<AudioInputProps> = (props) => {
 
   const renderRecordButtonTips = useMemo(() => {
     if (!audioPermission) {
-      return intl.formatMessage({ id: 'playground.audio.enablemic' });
+      return (
+        <span>
+          <span>
+            {intl.formatMessage({ id: 'playground.audio.enablemic' })}
+            <Button
+              size="small"
+              color="primary"
+              variant="link"
+              href={`${externalRefer.audioPermission}`}
+              target="_blank"
+              style={{
+                color: 'var(--ant-blue-5)'
+              }}
+            >
+              {intl.formatMessage({ id: 'playground.audio.enablemic.doc' })}
+            </Button>
+          </span>
+        </span>
+      );
     }
     return isRecording
       ? intl.formatMessage({ id: 'playground.audio.stoprecord' })

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

@@ -120,7 +120,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
         }
       );
 
-      if (result?.status_code !== 200) {
+      if (result?.status_code && result?.status_code !== 200) {
         setTokenResult({
           error: true,
           errorMessage:
@@ -211,6 +211,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     setIsRecording(val);
     setAudioData(null);
     setTokenResult(null);
+    setMessageList([]);
     console.log('data===', val);
   }, []);
 

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

@@ -52,17 +52,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
       autoplay: boolean;
       audioUrl: string;
     }[]
-  >([
-    {
-      input: '',
-      voice: '',
-      format: '',
-      speed: 0,
-      uid: 0,
-      autoplay: false,
-      audioUrl: ''
-    }
-  ]);
+  >([]);
   const locale = getLocale();
   const intl = useIntl();
   const [searchParams] = useSearchParams();