From e1bb684c4c63f78042226bf1ee3d23cff26c9972 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Tue, 3 Dec 2024 21:53:42 +0800
Subject: [PATCH] chore: image size tooltips

---
 config/config.ts                              |  2 +-
 src/components/speech-content/speech-item.tsx | 10 +++++++--
 src/global.less                               |  8 +++++++
 src/locales/en-US/playground.ts               |  4 +++-
 src/locales/zh-CN/playground.ts               |  4 +++-
 src/pages/llmodels/config/llama-config.ts     |  4 ++++
 .../playground/components/dynamic-params.tsx  | 22 ++++++++++++++++++-
 src/pages/playground/config/params-config.ts  |  5 +++++
 src/pages/playground/config/types.ts          |  1 +
 9 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/config/config.ts b/config/config.ts
index 8633f558..83b0519e 100644
--- a/config/config.ts
+++ b/config/config.ts
@@ -14,7 +14,7 @@ const isProduction = env === 'production';
 const t = Date.now();
 export default defineConfig({
   proxy: {
-    ...proxy('http://192.168.50.3')
+    ...proxy('http://192.168.50.4')
   },
   history: {
     type: 'hash'
diff --git a/src/components/speech-content/speech-item.tsx b/src/components/speech-content/speech-item.tsx
index 84251ba3..ea141d4e 100644
--- a/src/components/speech-content/speech-item.tsx
+++ b/src/components/speech-content/speech-item.tsx
@@ -196,7 +196,13 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
             <Button
               disabled={!props.audioUrl || duration === 0}
               onClick={handlePlay}
-              icon={isPlay ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
+              icon={
+                isPlay ? (
+                  <PauseCircleOutlined className="font-size-16" />
+                ) : (
+                  <PlayCircleOutlined className="font-size-16" />
+                )
+              }
               type="text"
               size="small"
             ></Button>
@@ -209,7 +215,7 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
             <Button
               disabled={!props.audioUrl || duration === 0}
               onClick={onDownload}
-              icon={<DownloadOutlined />}
+              icon={<DownloadOutlined className="font-size-16" />}
               type="text"
               size="small"
             ></Button>
diff --git a/src/global.less b/src/global.less
index 323d19cc..5c728fbc 100644
--- a/src/global.less
+++ b/src/global.less
@@ -767,6 +767,14 @@ body {
   font-weight: var(--font-weight-bold);
 }
 
+.ant-tooltip-content {
+  .ant-tooltip-inner {
+    a {
+      color: var(--ant-color-link-hover);
+    }
+  }
+}
+
 .tooltip-wrapper {
   display: flex;
   flex-direction: column;
diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts
index a78ac172..bfdd7c11 100644
--- a/src/locales/en-US/playground.ts
+++ b/src/locales/en-US/playground.ts
@@ -119,5 +119,7 @@ export default {
   '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.'
+    'Voices are unavailable. The model may still be initializing. Please refresh after a brief wait.',
+  'playground.params.size.description':
+    'The maximum size of the generated image is controlled by the deployment parameters of the model. <a href="https://github.com/gpustack/llama-box" target="_blank">Refer to</a>'
 };
diff --git a/src/locales/zh-CN/playground.ts b/src/locales/zh-CN/playground.ts
index d91f6181..ff04b288 100644
--- a/src/locales/zh-CN/playground.ts
+++ b/src/locales/zh-CN/playground.ts
@@ -116,5 +116,7 @@ export default {
   'playground.audio.button.slow': '慢放',
   'playground.audio.generating': '生成中',
   'playgorund.audio.voice.error':
-    '声音无法使用。该模型可能仍在初始化。请稍候后刷新。'
+    '声音无法使用。该模型可能仍在初始化。请稍候后刷新。',
+  'playground.params.size.description':
+    '图片生成的最大尺寸受控于模型的部署参数。<a href="https://github.com/gpustack/llama-box" target="_blank">参考文档</a>'
 };
diff --git a/src/pages/llmodels/config/llama-config.ts b/src/pages/llmodels/config/llama-config.ts
index ace0e90a..a6e908f1 100644
--- a/src/pages/llmodels/config/llama-config.ts
+++ b/src/pages/llmodels/config/llama-config.ts
@@ -100,6 +100,10 @@ const options = [
   {
     label: '--image-vae-tiling',
     value: '--image-vae-tiling'
+  },
+  {
+    label: '--image-no-vae-tiling',
+    value: '--image-no-vae-tiling'
   }
 ];
 
diff --git a/src/pages/playground/components/dynamic-params.tsx b/src/pages/playground/components/dynamic-params.tsx
index 6cc273eb..dcab7da2 100644
--- a/src/pages/playground/components/dynamic-params.tsx
+++ b/src/pages/playground/components/dynamic-params.tsx
@@ -170,6 +170,25 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
       [form, handleFieldValueChange]
     );
 
+    const renderDescription = useCallback(
+      (item: ParamsSchema) => {
+        if (!item.description) {
+          return null;
+        }
+        if (item.description.html) {
+          return (
+            <div
+              className="m-t-5"
+              dangerouslySetInnerHTML={{
+                __html: intl.formatMessage({ id: item.description.text })
+              }}
+            ></div>
+          );
+        }
+        return intl.formatMessage({ id: item.description.text });
+      },
+      [intl]
+    );
     const renderFields = useMemo(() => {
       if (!paramsConfig?.length) {
         return null;
@@ -210,6 +229,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
             <Form.Item name={item.name} rules={item.rules} key={item.name}>
               <SealSelect
                 {...item.attrs}
+                description={renderDescription(item)}
                 options={item.options}
                 label={
                   item.label.isLocalized
@@ -249,7 +269,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
         }
         return null;
       });
-    }, [paramsConfig, params, intl]);
+    }, [paramsConfig, params, renderDescription, intl]);
 
     return (
       <Form
diff --git a/src/pages/playground/config/params-config.ts b/src/pages/playground/config/params-config.ts
index 08319c0a..080b77f2 100644
--- a/src/pages/playground/config/params-config.ts
+++ b/src/pages/playground/config/params-config.ts
@@ -117,6 +117,11 @@ export const ImageParamsConfig: ParamsSchema[] = [
       { label: '512x512', value: '512x512' },
       { label: '1024x1024', value: '1024x1024' }
     ],
+    description: {
+      text: 'playground.params.size.description',
+      html: true,
+      isLocalized: true
+    },
     label: {
       text: 'playground.params.size',
       isLocalized: true
diff --git a/src/pages/playground/config/types.ts b/src/pages/playground/config/types.ts
index 5c96b998..31b7899a 100644
--- a/src/pages/playground/config/types.ts
+++ b/src/pages/playground/config/types.ts
@@ -55,6 +55,7 @@ export interface ParamsSchema {
   attrs?: Record<string, any>;
   description?: {
     text: string;
+    html?: boolean;
     isLocalized?: boolean;
   };
 }