chore: image size tooltips

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>

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;

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>'
 };

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>'
 };

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'
   }
 ];
 

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

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

src/pages/playground/config/types.ts

@@ -55,6 +55,7 @@ export interface ParamsSchema {
   attrs?: Record<string, any>;
   description?: {
     text: string;
+    html?: boolean;
     isLocalized?: boolean;
   };
 }