From e4b1dfc77aedfe9f358a50e5057cfe61df6ec76a Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Tue, 31 Dec 2024 11:03:35 +0800
Subject: [PATCH] chore: audio page keepalive

---
 config/config.ts                               |  2 +-
 src/components/image-editor/index.tsx          | 18 +++++++++++++-----
 src/config/route-cachekey.ts                   |  3 ++-
 src/layouts/index.tsx                          |  3 +++
 src/locales/en-US/playground.ts                | 10 +++++++---
 src/locales/zh-CN/playground.ts                | 11 ++++++++---
 .../playground/components/dynamic-params.tsx   |  1 +
 .../playground/components/ground-left.tsx      |  1 +
 src/pages/playground/components/ground-stt.tsx |  5 +++++
 src/pages/playground/components/ground-tts.tsx |  5 +++++
 src/pages/playground/components/image-edit.tsx |  2 +-
 src/pages/playground/speech.tsx                | 12 ++++++++----
 src/utils/fetch-chunk-data.ts                  | 14 ++++++++++----
 13 files changed, 65 insertions(+), 22 deletions(-)

diff --git a/config/config.ts b/config/config.ts
index 09c995a5..961eb601 100644
--- a/config/config.ts
+++ b/config/config.ts
@@ -90,7 +90,7 @@ export default defineConfig({
   model: {},
   initialState: {},
   request: {},
-  keepalive: ['/playground/text-to-image'],
+  keepalive: ['/playground/text-to-image', '/playground/speech'],
   locale: {
     antd: true,
     baseNavigator: true,
diff --git a/src/components/image-editor/index.tsx b/src/components/image-editor/index.tsx
index 92da538c..3f0a681d 100644
--- a/src/components/image-editor/index.tsx
+++ b/src/components/image-editor/index.tsx
@@ -4,6 +4,7 @@ import {
   SyncOutlined,
   UndoOutlined
 } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
 import { Button, Slider, Tooltip } from 'antd';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -33,6 +34,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
   onSave,
   uploadButton
 }) => {
+  const intl = useIntl();
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const overlayCanvasRef = useRef<HTMLCanvasElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -541,7 +543,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
             }}
             title={
               <div className="flex-column" style={{ width: '100%' }}>
-                <span className="text-secondary">Brush Size</span>
+                <span className="text-secondary">
+                  {intl.formatMessage({ id: 'playground.image.brushSize' })}
+                </span>
                 <Slider
                   disabled={disabled}
                   style={{ marginBlock: '4px 6px', marginLeft: 0, flex: 1 }}
@@ -558,7 +562,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
               <FormatPainterOutlined className="font-size-14" />
             </Button>
           </Tooltip>
-          <Tooltip title="Undo">
+          <Tooltip title={intl.formatMessage({ id: 'common.button.undo' })}>
             <Button
               onClick={undo}
               size="middle"
@@ -569,7 +573,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
             </Button>
           </Tooltip>
           {uploadButton}
-          <Tooltip title="Reset">
+          <Tooltip title={intl.formatMessage({ id: 'common.button.reset' })}>
             <Button
               onClick={onReset}
               size="middle"
@@ -581,12 +585,16 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
           </Tooltip>
         </div>
         <div className="tools">
-          <Tooltip title="Save Mask">
+          <Tooltip
+            title={intl.formatMessage({ id: 'playground.image.saveMask' })}
+          >
             <Button onClick={downloadMask} size="middle" type="text">
               <IconFont className="font-size-14" type="icon-save2"></IconFont>
             </Button>
           </Tooltip>
-          <Tooltip title="Download">
+          <Tooltip
+            title={intl.formatMessage({ id: 'playground.image.download' })}
+          >
             <Button onClick={download} size="middle" type="text">
               <DownloadOutlined className="font-size-14" />
             </Button>
diff --git a/src/config/route-cachekey.ts b/src/config/route-cachekey.ts
index 6106839e..002b9a81 100644
--- a/src/config/route-cachekey.ts
+++ b/src/config/route-cachekey.ts
@@ -1,3 +1,4 @@
 export default {
-  '/playground/text-to-image': '/playground/text-to-image'
+  '/playground/text-to-image': '/playground/text-to-image',
+  '/playground/speech': '/playground/speech'
 };
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index d5023681..32622300 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -291,6 +291,9 @@ export default (props: any) => {
         layout="side"
         openKeys={false}
         disableMobile={true}
+        header={{
+          title: <div style={{ fontSize: 36 }}> gpuStack </div>
+        }}
         siderWidth={220}
         onCollapse={(collapsed) => {
           setCollapsed(collapsed);
diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts
index 5b320e04..375ba02f 100644
--- a/src/locales/en-US/playground.ts
+++ b/src/locales/en-US/playground.ts
@@ -126,9 +126,13 @@ export default {
   'playground.documents.verify.embedding': 'At least add two pieces of text.',
   'playground.documents.verify.rerank': 'The documents cannot be empty.',
   'playground.image.guidance.tip':
-    'The lower the value, the higher the diversity, and the lower the adherence to the prompt.',
+    'Guidance scale, affecting the quality and diversity of the image.',
   'playground.image.cfg_scale.tip':
-    'The lower the value, the higher the diversity.',
+    "Classifier-free guidance scale, affecting the image's adherence to the prompt.",
   'playground.image.strength.tip':
-    'The higher the value, the greater the modification to the original image.'
+    'The higher the value, the greater the modification to the original image.',
+  'playground.image.edit.tips': 'Click or drag image to this area to upload',
+  'playground.image.saveMask': 'Save Mask',
+  'playground.image.brushSize': 'Brush Size',
+  'playground.image.download': 'Download Image'
 };
diff --git a/src/locales/zh-CN/playground.ts b/src/locales/zh-CN/playground.ts
index 9f56e418..da9e4b41 100644
--- a/src/locales/zh-CN/playground.ts
+++ b/src/locales/zh-CN/playground.ts
@@ -122,7 +122,12 @@ export default {
     '图片生成的最大尺寸受控于模型的部署参数。<a href="https://github.com/gpustack/llama-box" target="_blank">参考文档</a>',
   'playground.documents.verify.embedding': '至少输入两条文本',
   'playground.documents.verify.rerank': '文档不能为空',
-  'playground.image.guidance.tip': '值越低，多样性越高，对提示词的贴合度越低',
-  'playground.image.cfg_scale.tip': '值越低，多样性越高',
-  'playground.image.strength.tip': '值越高，它对原图的修改越大'
+  'playground.image.guidance.tip': '引导比例，影响图片的质量和多样性',
+  'playground.image.cfg_scale.tip':
+    '无分类器引导比例，影响图片的对Prompt的贴合度',
+  'playground.image.strength.tip': '值越高，它对原图的修改越大',
+  'playground.image.edit.tips': '点击或拖动图片到此区域上传',
+  'playground.image.saveMask': '保存遮罩',
+  'playground.image.brushSize': '画笔大小',
+  'playground.image.download': '下载图片'
 };
diff --git a/src/pages/playground/components/dynamic-params.tsx b/src/pages/playground/components/dynamic-params.tsx
index f32e309a..b1873795 100644
--- a/src/pages/playground/components/dynamic-params.tsx
+++ b/src/pages/playground/components/dynamic-params.tsx
@@ -186,6 +186,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
       [intl]
     );
     const renderFields = useMemo(() => {
+      console.log('paramsConfig++++++++++++');
       if (!paramsConfig?.length) {
         return null;
       }
diff --git a/src/pages/playground/components/ground-left.tsx b/src/pages/playground/components/ground-left.tsx
index 92843dea..b7b94663 100644
--- a/src/pages/playground/components/ground-left.tsx
+++ b/src/pages/playground/components/ground-left.tsx
@@ -94,6 +94,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   };
 
   const joinMessage = (chunk: any) => {
+    console.log('chunk:', chunk);
     setTokenResult({
       ...(chunk?.usage ?? {})
     });
diff --git a/src/pages/playground/components/ground-stt.tsx b/src/pages/playground/components/ground-stt.tsx
index 1327825b..5bc90efa 100644
--- a/src/pages/playground/components/ground-stt.tsx
+++ b/src/pages/playground/components/ground-stt.tsx
@@ -1,9 +1,11 @@
+import { setRouteCache } from '@/atoms/route-cache';
 import AlertInfo from '@/components/alert-info';
 import AudioAnimation from '@/components/audio-animation';
 import AudioPlayer from '@/components/audio-player';
 import CopyButton from '@/components/copy-button';
 import IconFont from '@/components/icon-font';
 import UploadAudio from '@/components/upload-audio';
+import routeCachekey from '@/config/route-cachekey';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import { useCancelToken } from '@/hooks/use-request-token';
 import { readAudioFile } from '@/utils/load-audio-file';
@@ -116,6 +118,8 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
 
       cancelRequest();
       updateCancelToken();
+
+      setRouteCache(routeCachekey['/playground/speech'], true);
       const params = {
         ...parameters,
         file: new File([audioData.data], audioData.name, {
@@ -169,6 +173,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     } finally {
       setLoading(false);
       setIsRecording(false);
+      setRouteCache(routeCachekey['/playground/speech'], false);
     }
   };
   const handleClear = () => {
diff --git a/src/pages/playground/components/ground-tts.tsx b/src/pages/playground/components/ground-tts.tsx
index 7f018306..f35d51ea 100644
--- a/src/pages/playground/components/ground-tts.tsx
+++ b/src/pages/playground/components/ground-tts.tsx
@@ -1,7 +1,9 @@
+import { setRouteCache } from '@/atoms/route-cache';
 import AlertInfo from '@/components/alert-info';
 import IconFont from '@/components/icon-font';
 import SealSelect from '@/components/seal-form/seal-select';
 import SpeechContent from '@/components/speech-content';
+import routeCachekey from '@/config/route-cachekey';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import { SendOutlined } from '@ant-design/icons';
 import { getLocale, useIntl, useSearchParams } from '@umijs/max';
@@ -157,6 +159,8 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
       setCurrentPrompt(current?.content || '');
       setMessageList([]);
 
+      setRouteCache(routeCachekey['/playground/speech'], true);
+
       controllerRef.current?.abort?.();
       controllerRef.current = new AbortController();
       const signal = controllerRef.current.signal;
@@ -214,6 +218,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
       }
     } finally {
       setLoading(false);
+      setRouteCache(routeCachekey['/playground/speech'], false);
     }
   };
   const handleClear = () => {
diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx
index 3d921e8f..8a762641 100644
--- a/src/pages/playground/components/image-edit.tsx
+++ b/src/pages/playground/components/image-edit.tsx
@@ -643,7 +643,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
             type="icon-upload_image"
             className="font-size-24"
           ></IconFont>
-          <h3>Click or drag image to this area to upload</h3>
+          <h3>{intl.formatMessage({ id: 'playground.image.edit.tips' })}</h3>
         </div>
       </UploadImg>
     );
diff --git a/src/pages/playground/speech.tsx b/src/pages/playground/speech.tsx
index 7c5efc7e..d424ef21 100644
--- a/src/pages/playground/speech.tsx
+++ b/src/pages/playground/speech.tsx
@@ -102,13 +102,15 @@ const Playground: React.FC = () => {
     const getTextToSpeechModels = async () => {
       try {
         const params = {
-          categories: 'text_to_speech'
+          categories: 'text_to_speech',
+          with_meta: true
         };
         const res = await queryModelsList(params);
         const list = _.map(res.data || [], (item: any) => {
           return {
             value: item.id,
-            label: item.id
+            label: item.id,
+            meta: item.meta
           };
         }) as Global.BaseOption<string>[];
         return list;
@@ -120,13 +122,15 @@ const Playground: React.FC = () => {
     const getSpeechToText = async () => {
       try {
         const params = {
-          categories: 'speech_to_text'
+          categories: 'speech_to_text',
+          with_meta: true
         };
         const res = await queryModelsList(params);
         const list = _.map(res.data || [], (item: any) => {
           return {
             value: item.id,
-            label: item.id
+            label: item.id,
+            meta: item.meta
           };
         }) as Global.BaseOption<string>[];
         return list;
diff --git a/src/utils/fetch-chunk-data.ts b/src/utils/fetch-chunk-data.ts
index 8b55869b..fc20dc4e 100644
--- a/src/utils/fetch-chunk-data.ts
+++ b/src/utils/fetch-chunk-data.ts
@@ -8,7 +8,6 @@ const extractJSON = (dataStr: string) => {
   if (!dataStr) {
     return results;
   }
-
   while ((match = extractStreamRegx.exec(dataStr)) !== null) {
     try {
       const jsonData = JSON.parse(match[1]);
@@ -131,9 +130,16 @@ export const readStreamData = async (
 
   let chunk = decoder.decode(value, { stream: true });
 
-  extractJSON(chunk).forEach((data) => {
-    callback?.(data);
-  });
+  if (chunk.startsWith('error:')) {
+    const errorStr = chunk.slice(7).trim();
+    const jsonData = JSON.parse(errorStr);
+    callback({ error: jsonData });
+  } else {
+    extractJSON(chunk).forEach((data) => {
+      callback?.(data);
+    });
+  }
+
   await readStreamData(reader, decoder, callback);
 };