chore: image custom params

config/proxy.ts

@@ -20,8 +20,9 @@ export default function createProxyTable(target?: string) {
         ws: true,
         pathRewrite: (pth: string) => pth.replace(`/^/${api}`, `/${api}`),
         // onProxyRes: (proxyRes: any, req: any, res: any) => {
+        //   console.log('proxyRes=====', req);
+
         //   proxyRes.on('data', (chunk: any) => {
-        //     console.log('chunk=====', chunk);
         //     res.write(chunk);
         //   });
 
@@ -30,7 +31,6 @@ export default function createProxyTable(target?: string) {
         //   });
 
         //   proxyRes.on('error', (err: any) => {
-        //     console.error('Proxy stream error:', err);
         //     res.status(500).end('Stream error');
         //   });
         // },

src/components/seal-form/config/components.ts

@@ -0,0 +1,19 @@
+import { Slider } from 'antd';
+import SealInput from '../seal-input';
+import SealSelect from '../seal-select';
+
+const components: {
+  InputNumber: typeof SealInput.Number;
+  Select: typeof SealSelect;
+  Slider: React.ComponentType<typeof Slider>;
+  TextArea: typeof SealInput.TextArea;
+  Input: typeof SealInput.Input;
+} = {
+  InputNumber: SealInput.Number,
+  Select: SealSelect,
+  Slider: Slider as React.ComponentType<typeof Slider>,
+  TextArea: SealInput.TextArea,
+  Input: SealInput.Input
+};
+
+export default components;

src/components/seal-form/field-component.tsx

@@ -0,0 +1,19 @@
+import { ParamsSchema } from '@/pages/playground/config/types';
+import { useIntl } from '@umijs/max';
+import React from 'react';
+import componentsMap from './config/components';
+
+const FieldComponent: React.FC<ParamsSchema> = (props) => {
+  const intl = useIntl();
+  const { type, label, attrs, style, ...rest } = props;
+  return React.createElement(componentsMap[type], {
+    ...rest,
+    ...attrs,
+    style: { ...style, width: '100%' },
+    label: label.isLocalized
+      ? intl.formatMessage({ id: label.text })
+      : label.text
+  });
+};
+
+export default React.memo(FieldComponent);

src/locales/en-US/playground.ts

@@ -75,7 +75,7 @@ export default {
   'playground.rerank.rank': 'Rank',
   'playground.rerank.score': 'Score',
   'playground.rerank.query.holder': 'Input your query',
-  'playground.image.prompt': 'Input Prompt',
+  'playground.image.prompt': 'Text Prompt',
   'playground.audio.texttospeech': 'Text to Speech',
   'playground.audio.speechtotext': 'Speech to Text',
   'playground.audio.texttospeech.tips': 'Generated speech will appear here',
@@ -90,5 +90,13 @@ export default {
     'Please upload an audio file, supported formats: {formats}',
   'playground.input.multiplePaste': 'Multi-line paste',
   'playground.multiple.on': 'Enable',
-  'playground.multiple.off': 'Disable'
+  'playground.multiple.off': 'Disable',
+  'playground.image.params.sampler': 'Sampler',
+  'playground.image.params.samplerSteps': 'Sampler Steps',
+  'playground.image.params.seed': 'Seed',
+  'playground.image.params.negativePrompt': 'Negative Prompt',
+  'playground.image.params.cfgScale': 'Scale Factor',
+  'playground.image.params.custom': 'Custom',
+  'playground.image.params.custom.tips': 'Parameter definition',
+  'playground.image.params.openai': 'OpenAI Compatible'
 };

src/locales/zh-CN/playground.ts

@@ -88,5 +88,13 @@ export default {
   'playground.audio.button.generate': '生成文本',
   'playground.input.multiplePaste': '多行粘贴',
   'playground.multiple.on': '开启',
-  'playground.multiple.off': '关闭'
+  'playground.multiple.off': '关闭',
+  'playground.image.params.sampler': '采样器',
+  'playground.image.params.samplerSteps': '采样器步数',
+  'playground.image.params.seed': '随机种子',
+  'playground.image.params.negativePrompt': '负面提示',
+  'playground.image.params.cfgScale': '缩放因子',
+  'playground.image.params.custom': '自定义',
+  'playground.image.params.custom.tips': '参数定义',
+  'playground.image.params.openai': 'OpenAI 兼容'
 };

src/pages/llmodels/apis/index.ts

@@ -117,16 +117,10 @@ export async function queryModelInstanceLogs(id: number) {
 
 // ===================== call huggingface quicksearch api =====================
 
-const HUGGINGFACE_API = '/proxy?url=https://huggingface.co/api/models';
-
 const MODEL_SCOPE_LIST_MODEL_API =
-  '/proxy?url=https://www.modelscope.cn/api/v1/dolphin/models';
+  'https://www.modelscope.cn/api/v1/dolphin/models';
 
-const MODEL_SCOPE_DETAIL_MODEL_API =
+const MODE_SCOPE_MODEL_FIELS_API = 'https://modelscope.cn/api/v1/models/';
-  '/proxy?url=https://www.modelscope.cn/api/v1/dolphin/models/';
-
-const MODE_SCOPE_MODEL_FIELS_API =
-  '/proxy?url=https://modelscope.cn/api/v1/models/';
 
 export async function queryHuggingfaceModelDetail(
   params: { repo: string },
@@ -165,7 +159,7 @@ export async function queryModelScopeModels(
           Criterion: [...(tagsCriterion || []), ...(tasksCriterion || [])]
         }
       : {};
-  const res = await fetch(`${MODEL_SCOPE_LIST_MODEL_API}`, {
+  const res = await fetch(setProxyUrl(`${MODEL_SCOPE_LIST_MODEL_API}`), {
     method: 'PUT',
     signal: config?.signal,
     headers: {
@@ -190,7 +184,7 @@ export async function queryModelScopeModelDetail(
   params: { name: string },
   options?: any
 ) {
-  return request(`${MODE_SCOPE_MODEL_FIELS_API}${params.name}`, {
+  return request(setProxyUrl(`${MODE_SCOPE_MODEL_FIELS_API}${params.name}`), {
     method: 'GET',
     cancelToken: options?.token
   });
@@ -200,18 +194,18 @@ export async function queryModelScopeModelFiles(
   params: { name: string; revision: string },
   options?: any
 ) {
-  const res = await fetch(
+  const url = `${MODE_SCOPE_MODEL_FIELS_API}${params.name}/repo/files?${qs.stringify(
-    `${MODE_SCOPE_MODEL_FIELS_API}${params.name}/repo/files?${qs.stringify({
+    {
       Revision: params.revision,
       Recursive: true,
       Root: ''
-    })}`,
-    {
-      method: 'GET',
-      signal: options?.signal,
-      body: null
     }
-  );
+  )}`;
+  const res = await fetch(setProxyUrl(url), {
+    method: 'GET',
+    signal: options?.signal,
+    body: null
+  });
 
   if (!res.ok) {
     throw new Error('Network response was not ok');
@@ -310,13 +304,11 @@ export async function downloadModelScopeModelfile(
   params: { name: string },
   options?: any
 ) {
-  const res = await fetch(
+  const url = `${MODE_SCOPE_MODEL_FIELS_API}${params.name}/resolve/master/config.json`;
-    `${MODE_SCOPE_MODEL_FIELS_API}${params.name}/resolve/master/config.json`,
+  const res = await fetch(setProxyUrl(url), {
-    {
+    method: 'GET',
-      method: 'GET',
+    signal: options?.signal
-      signal: options?.signal
+  });
-    }
-  );
   if (!res.ok) {
     throw new Error('Network response was not ok');
   }

src/pages/llmodels/components/advance-config.tsx

@@ -35,7 +35,7 @@ interface AdvanceConfigProps {
   gpuOptions: Array<any>;
   action: PageActionType;
   source: string;
-  modelTask: string;
+  modelTask: Record<string, any>;
 }
 
 const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {

src/pages/llmodels/components/data-form.tsx

@@ -23,6 +23,7 @@ import {
   modelTaskMap,
   ollamaModelOptions
 } from '../config';
+import { HuggingFaceModels, ModelScopeModels } from '../config/audio-catalog';
 import { FormData, GPUListItem } from '../config/types';
 import AdvanceConfig from './advance-config';
 
@@ -120,11 +121,30 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     []
   );
 
+  const identifyModelTask = () => {
+    let data = null;
+    if (props.source === modelSourceMap.huggingface_value) {
+      data = HuggingFaceModels.find(
+        (item) => `${item.org}/${item.name}` === props.selectedModel.name
+      );
+    }
+    if (props.source === modelSourceMap.modelscope_value) {
+      data = ModelScopeModels.find(
+        (item) => `${item.org}/${item.name}` === props.selectedModel.name
+      );
+    }
+    if (data) {
+      return modelTaskMap.audio;
+    }
+    return '';
+  };
   const handleOnSelectModel = () => {
     let name = _.split(props.selectedModel.name, '/').slice(-1)[0];
     const reg = /(-gguf)$/i;
     name = _.toLower(name).replace(reg, '');
 
+    const modelTaskType = identifyModelTask();
+
     const modelTask =
       HuggingFaceTaskMap.audio.includes(props.selectedModel.task) ||
       ModelscopeTaskMap.audio.includes(props.selectedModel.task)
@@ -133,7 +153,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
 
     setModelTask({
       value: props.selectedModel.task,
-      type: modelTask,
+      type: modelTaskType || modelTask,
       text2speech:
         HuggingFaceTaskMap[modelTaskMap.textToSpeech] ===
           props.selectedModel.task ||
@@ -351,8 +371,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     if (gpu) {
       onOk({
         ..._.omit(formdata, ['scheduleType']),
-        speech_to_text: modelTask.speech2text,
-        text_to_speech: modelTask.text2speech,
         gpu_selector: {
           gpu_name: gpu.name,
           gpu_index: gpu.index,
@@ -361,9 +379,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
       });
     } else {
       onOk({
-        ..._.omit(formdata, ['scheduleType']),
+        ..._.omit(formdata, ['scheduleType'])
-        speech_to_text: modelTask.speech2text,
-        text_to_speech: modelTask.text2speech
       });
     }
   };

src/pages/llmodels/components/model-card.tsx

@@ -130,12 +130,6 @@ const ModelCard: React.FC<{
   // huggingface model card data
   const getHuggingfaceModelDetail = async () => {
     try {
-      const configjson = await loadConfig(
-        props.selectedModel.name,
-        'main'
-      ).catch(() => {
-        return null;
-      });
       const [modelcard, readme] = await Promise.all([
         queryHuggingfaceModelDetail(
           { repo: props.selectedModel.name },
@@ -183,11 +177,6 @@ const ModelCard: React.FC<{
 
   const getModelScopeModelDetail = async () => {
     try {
-      const configjson = await loadModelscopeModelConfig(
-        props.selectedModel.name
-      ).catch(() => {
-        return null;
-      });
       const data = await queryModelScopeModelDetail(
         {
           name: props.selectedModel.name
@@ -200,7 +189,6 @@ const ModelCard: React.FC<{
         ...data?.Data,
         name: `${data.Data?.Path}/${data.Data?.Name}`
       });
-      console.log('modelData++++++++++++', configjson, data?.Data);
       setReadmeText(data?.Data?.ReadMeContent);
       const isGGUF = some(
         data?.Data?.Tags,

src/pages/llmodels/components/search-model.tsx

@@ -10,7 +10,6 @@ import {
   ModelSortType,
   ModelscopeTaskMap,
   modelSourceMap,
-  modelTaskMap,
   ollamaModelOptions
 } from '../config';
 import SearchStyle from '../style/search-result.less';
@@ -233,22 +232,15 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
           modelSource={modelSource}
         ></SearchInput>
         <div className={SearchStyle.filter}>
-          {/* <span>
+          <span>
             <span className="value">
               {intl.formatMessage(
                 { id: 'models.search.result' },
                 { count: dataSource.repoOptions.length }
               )}
             </span>
-          </span> */}
+          </span>
-          <span
+          <span>
-            style={{
-              flex: 1,
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center'
-            }}
-          >
             <Checkbox
               onChange={handleFilterGGUFChange}
               className="m-r-5"
@@ -271,43 +263,20 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
                 <InfoCircleOutlined className="m-l-4" />
               </Tooltip>
             </Checkbox>
-            <span className="flex gap-6">
+            <Select
-              <Select
+              value={dataSource.sortType}
-                allowClear
+              onChange={handleSortChange}
-                value={filterTaskRef.current}
+              labelRender={({ label }) => {
-                onChange={handleFilterTaskChange}
+                return (
-                options={[
+                  <span>
-                  {
+                    {intl.formatMessage({ id: 'model.deploy.sort' })}: {label}
-                    label: intl.formatMessage({
+                  </span>
-                      id: 'playground.audio.texttospeech'
+                );
-                    }),
+              }}
-                    value: modelTaskMap.textToSpeech
+              options={modelFilesSortOptions.current}
-                  },
+              size="middle"
-                  {
+              style={{ width: '150px' }}
-                    label: intl.formatMessage({
+            ></Select>
-                      id: 'playground.audio.speechtotext'
-                    }),
-                    value: modelTaskMap.speechToText
-                  }
-                ]}
-                size="middle"
-                style={{ width: '140px' }}
-              ></Select>
-              <Select
-                value={dataSource.sortType}
-                onChange={handleSortChange}
-                labelRender={({ label }) => {
-                  return (
-                    <span>
-                      {intl.formatMessage({ id: 'model.deploy.sort' })}: {label}
-                    </span>
-                  );
-                }}
-                options={modelFilesSortOptions.current}
-                size="middle"
-                style={{ width: '140px' }}
-              ></Select>
-            </span>
           </span>
         </div>
       </>

src/pages/llmodels/config/audio-catalog.ts

@@ -0,0 +1,105 @@
+export const HuggingFaceModels = [
+  {
+    type: 'stt',
+    org: 'funasr',
+    name: 'paraformer-zh'
+  },
+  {
+    type: 'stt',
+    org: 'funasr',
+    name: 'paraformer-zh-streaming'
+  },
+  {
+    type: 'stt',
+    org: 'funasr',
+    name: 'paraformer-en'
+  },
+  {
+    type: 'stt',
+    org: 'funasr',
+    name: 'conformer-en'
+  },
+  {
+    type: 'stt',
+    org: 'Qwen',
+    name: 'Qwen-Audio'
+  },
+  {
+    type: 'stt',
+    org: 'Qwen',
+    name: 'Qwen-Audio-Chat'
+  },
+  {
+    type: 'stt',
+    org: 'FunAudioLLM',
+    name: 'SenseVoiceSmall'
+  },
+  {
+    type: 'stt',
+    org: 'Systran',
+    name: '*'
+  },
+  {
+    type: 'tts',
+    org: 'suno',
+    name: 'bark'
+  },
+  {
+    type: 'tts',
+    org: 'suno',
+    name: 'bark-small'
+  },
+  {
+    type: 'tts',
+    org: 'FunAudioLLM',
+    name: 'CosyVoice-300M-Instruct'
+  },
+  {
+    type: 'tts',
+    org: 'FunAudioLLM',
+    name: 'CosyVoice-300M-SFT'
+  },
+  {
+    type: 'tts',
+    org: 'FunAudioLLM',
+    name: 'CosyVoice-300M'
+  }
+];
+
+export const ModelScopeModels = [
+  {
+    type: 'stt',
+    org: 'iic',
+    name: 'SenseVoiceSmall'
+  },
+  {
+    type: 'stt',
+    org: 'iic',
+    name: 'Whisper-large-v3'
+  },
+  {
+    type: 'stt',
+    org: 'iic',
+    name: 'Whisper-large-v3-turbo'
+  },
+  {
+    type: 'tts',
+    org: 'iic',
+    name: 'CosyVoice-300M-Instruct'
+  },
+  {
+    type: 'tts',
+    org: 'iic',
+    name: 'CosyVoice-300M'
+  },
+  {
+    type: 'tts',
+    org: 'iic',
+    name: 'CosyVoice-300M-25Hz'
+  },
+  {
+    type: 'tts',
+    org: 'iic',
+    name: 'CosyVoice-300M-SFT'
+  }
+];

src/pages/playground/components/dynamic-params.tsx

@@ -25,6 +25,7 @@ type ParamsSettingsFormProps = {
 
 type ParamsSettingsProps = {
   ref?: any;
+  parametersTitle?: React.ReactNode;
   selectedModel?: string;
   showModelSelector?: boolean;
   params?: Record<string, any>;
@@ -45,6 +46,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
       setParams,
       onValuesChange,
       onModelChange,
+      parametersTitle,
       selectedModel,
       globalParams,
       initialValues,
@@ -169,7 +171,6 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
     );
 
     const renderFields = useMemo(() => {
-      console.log('paramsConfig:', paramsConfig);
       if (!paramsConfig?.length) {
         return null;
       }
@@ -262,9 +263,11 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
           {
             <>
               <h3 className="m-b-20 m-l-10 font-size-14 line-24">
-                <span>
+                {parametersTitle || (
-                  {intl.formatMessage({ id: 'playground.parameters' })}
+                  <span>
-                </span>
+                    {intl.formatMessage({ id: 'playground.parameters' })}
+                  </span>
+                )}
               </h3>
               <Form.Item<ParamsSettingsFormProps>
                 name="model"

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

@@ -1,12 +1,13 @@
 import AlertInfo from '@/components/alert-info';
+import FieldComponent from '@/components/seal-form/field-component';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import ThumbImg from '@/pages/playground/components/thumb-img';
 import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
-import { FileImageOutlined } from '@ant-design/icons';
+import { FileImageOutlined, SwapOutlined } from '@ant-design/icons';
 import { useIntl, useSearchParams } from '@umijs/max';
-import { Form } from 'antd';
+import { Button, Form, Tooltip } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
@@ -22,7 +23,11 @@ import React, {
 } from 'react';
 import { CREAT_IMAGE_API } from '../apis';
 import { OpenAIViewCode } from '../config';
-import { ImageParamsConfig as paramsConfig } from '../config/params-config';
+import {
+  ImageAdvancedParamsConfig,
+  ImageconstExtraConfig,
+  ImageParamsConfig as paramsConfig
+} from '../config/params-config';
 import { MessageItem, ParamsSchema } from '../config/types';
 import '../style/ground-left.less';
 import '../style/system-message-wrap.less';
@@ -40,53 +45,13 @@ const initialValues = {
   n: 1,
   size: '512x512',
   quality: 'standard',
-  style: ''
+  style: null
 };
 
-const extraConfig: ParamsSchema[] = [
-  {
-    type: 'Select',
-    name: 'quality',
-    options: [
-      { label: 'playground.params.standard', value: 'standard', locale: true },
-      { label: 'playground.params.hd', value: 'hd', locale: true }
-    ],
-    label: {
-      text: 'playground.params.quality',
-      isLocalized: true
-    },
-    rules: [
-      {
-        required: false
-      }
-    ]
-  },
-  {
-    type: 'Select',
-    name: 'style',
-    options: [
-      { label: 'playground.params.style.vivid', value: 'vivid', locale: true },
-      {
-        label: 'playground.params.style.natural',
-        value: 'natural',
-        locale: true
-      }
-    ],
-    label: {
-      text: 'playground.params.style',
-      isLocalized: true
-    },
-    rules: [
-      {
-        required: false
-      }
-    ]
-  }
-];
-
 const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
   const { modelList } = props;
   const messageId = useRef<number>(0);
+  const [isOpenaiCompatible, setIsOpenaiCompatible] = useState<boolean>(true);
   const [imageList, setImageList] = useState<
     {
       dataUrl: string;
@@ -254,7 +219,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       const params = {
         stream: true,
         stream_options: {
-          chunk_result: true
+          chunk_result: true,
+          chunk_size: 16 * 1024
         },
         prompt: current?.content || currentPrompt || '',
         ..._.omitBy(finalParameters, (value: string) => !value)
@@ -263,6 +229,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       const result: any = await fetchChunkedData({
         data: params,
         url: CREAT_IMAGE_API,
+        // url: 'http://192.168.50.27:9090/v1/images/generations',
         signal: requestToken.current.signal
       });
 
@@ -324,8 +291,43 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     setShow(false);
   };
 
+  const handleToggleParamsStyle = () => {
+    if (isOpenaiCompatible) {
+      form.current?.form?.setFieldsValue({
+        seed: null,
+        sampler: 'euler_a',
+        cfg_scale: 1,
+        sample_steps: 5,
+        negative_prompt: null
+      });
+      setParams((pre: object) => {
+        return {
+          ...pre,
+          seed: null,
+          sampler: 'euler_a',
+          cfg_scale: 1,
+          sample_steps: 5,
+          negative_prompt: null
+        };
+      });
+    } else {
+      setParams((pre: object) => {
+        return {
+          ..._.omit(pre, [
+            'seed',
+            'sampler',
+            'cfg_scale',
+            'sample_steps',
+            'negative_prompt'
+          ])
+        };
+      });
+    }
+    setIsOpenaiCompatible(!isOpenaiCompatible);
+  };
+
   const renderExtra = useMemo(() => {
-    return extraConfig.map((item: ParamsSchema) => {
+    return ImageconstExtraConfig.map((item: ParamsSchema) => {
       return (
         <Form.Item name={item.name} rules={item.rules} key={item.name}>
           <SealSelect
@@ -340,7 +342,20 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         </Form.Item>
       );
     });
-  }, [extraConfig, intl]);
+  }, [ImageconstExtraConfig, intl]);
+
+  const renderAdvanced = useMemo(() => {
+    if (isOpenaiCompatible) {
+      return [];
+    }
+    return ImageAdvancedParamsConfig.map((item: ParamsSchema) => {
+      return (
+        <Form.Item name={item.name} rules={item.rules} key={item.name}>
+          <FieldComponent {..._.omit(item, ['name', 'rules'])}></FieldComponent>
+        </Form.Item>
+      );
+    });
+  }, [ImageAdvancedParamsConfig, isOpenaiCompatible, intl]);
 
   const renderCustomSize = useMemo(() => {
     if (size === 'custom') {
@@ -419,7 +434,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       updateScrollerPosition();
     }
     messageListLengthCache.current = imageList.length;
-    console.log('imageList:', imageList);
   }, [imageList.length]);
 
   return (
@@ -445,7 +459,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                 dataList={imageList}
                 loading={loading}
                 responseable={true}
-                gutter={[16, 16]}
+                gutter={[8, 16]}
                 autoSize={true}
               ></ThumbImg>
               {!imageList.length && (
@@ -474,7 +488,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
             placeholer={intl.formatMessage({
               id: 'playground.input.prompt.holder'
             })}
-            actions={[]}
+            actions={['clear']}
             loading={loading}
             disabled={!parameters.model}
             isEmpty={!imageList.length}
@@ -499,13 +513,40 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         <div className="box">
           <DynamicParams
             ref={form}
+            parametersTitle={
+              <div className="flex-between flex-center">
+                <span>
+                  {intl.formatMessage({ id: 'playground.parameters' })}
+                </span>
+                <Tooltip
+                  title={intl.formatMessage({
+                    id: 'playground.image.params.custom.tips'
+                  })}
+                >
+                  <Button
+                    size="middle"
+                    type="text"
+                    icon={<SwapOutlined />}
+                    onClick={handleToggleParamsStyle}
+                  >
+                    {isOpenaiCompatible
+                      ? intl.formatMessage({
+                          id: 'playground.image.params.custom'
+                        })
+                      : intl.formatMessage({
+                          id: 'playground.image.params.openai'
+                        })}
+                  </Button>
+                </Tooltip>
+              </div>
+            }
             setParams={setParams}
             paramsConfig={paramsConfig}
             initialValues={initialValues}
             params={parameters}
             selectedModel={selectModel}
             modelList={modelList}
-            extra={[renderCustomSize, ...renderExtra]}
+            extra={[renderCustomSize, ...renderExtra, ...renderAdvanced]}
           />
         </div>
       </div>

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

@@ -2,7 +2,7 @@ import IconFont from '@/components/icon-font';
 import HotKeys, { KeyMap } from '@/config/hotkeys';
 import { ClearOutlined, SendOutlined, SwapOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Checkbox, Divider, Input, Select, Tooltip } from 'antd';
+import { Button, Checkbox, Divider, Input, Tooltip } from 'antd';
 import _ from 'lodash';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -64,7 +64,6 @@ const layoutOptions = [
 ];
 
 interface MessageInputProps {
-  modelList?: Global.BaseOption<string>[];
   handleSubmit: (params: CurrentMessage) => void;
   handleAbortFetch: () => void;
   updateLayout?: (value: { span: number; count: number }) => void;
@@ -80,7 +79,6 @@ interface MessageInputProps {
   addMessage?: (message: CurrentMessage) => void;
   tools?: React.ReactNode;
   loading: boolean;
-  showModelSelection?: boolean;
   disabled: boolean;
   isEmpty?: boolean;
   placeholer?: string;
@@ -94,15 +92,12 @@ interface MessageInputProps {
 const MessageInput: React.FC<MessageInputProps> = ({
   handleSubmit,
   handleAbortFetch,
-  setModelSelections,
   presetPrompt,
   clearAll,
   updateLayout,
   addMessage,
   onCheck,
   loading,
-  modelList,
-  showModelSelection,
   disabled,
   isEmpty,
   submitIcon,
@@ -170,21 +165,11 @@ const MessageInput: React.FC<MessageInputProps> = ({
   const handleClearAll = (e: any) => {
     e.stopPropagation();
     clearAll();
-  };
+    setMessage({
-
+      role: Roles.User,
-  const handleUpdateModelSelections = (value: string[]) => {
+      content: '',
-    const list = value?.map?.((val) => {
+      imgs: []
-      return {
-        value: val,
-        label: val,
-        instanceId: Symbol(val)
-      };
     });
-    setModelSelections?.(list);
-  };
-
-  const handleOpenPrompt = () => {
-    setOpen(true);
   };
 
   const handleAddMessage = (e?: any) => {
@@ -379,9 +364,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
             </Checkbox>
           )}
           {actions.includes('clear') && (
-            <Tooltip
+            <Tooltip title={intl.formatMessage({ id: 'common.button.clear' })}>
-              title={intl.formatMessage({ id: 'playground.toolbar.clearmsg' })}
-            >
               <Button
                 type="text"
                 icon={<ClearOutlined />}
@@ -412,20 +395,6 @@ const MessageInput: React.FC<MessageInputProps> = ({
           )}
         </div>
         <div className="actions">
-          {showModelSelection && (
-            <Select
-              variant="borderless"
-              style={{ width: 180 }}
-              placeholder="select models"
-              options={modelList}
-              mode="multiple"
-              maxCount={6}
-              maxTagCount={0}
-              maxTagTextLength={15}
-              onChange={handleUpdateModelSelections}
-            ></Select>
-          )}
-
           {actions.includes('add') && (
             <Tooltip
               title={
@@ -490,7 +459,6 @@ const MessageInput: React.FC<MessageInputProps> = ({
             variant="borderless"
             onFocus={() => setFocused(true)}
             onBlur={() => setFocused(false)}
-            onKeyDown={handleKeyDown}
             onPaste={handleOnPaste}
           ></TextArea>
         ) : (
@@ -506,7 +474,6 @@ const MessageInput: React.FC<MessageInputProps> = ({
             variant="borderless"
             onFocus={() => setFocused(true)}
             onBlur={() => setFocused(false)}
-            onKeyDown={handleKeyDown}
           ></TextArea>
         )}
         {!message.content && !focused && (

src/pages/playground/components/thumb-img.tsx

@@ -37,15 +37,11 @@ const ThumbImg: React.FC<{
   }
 
   const renderImageItem = (item: any) => {
+    const thumImgWrapStyle = item.loading
+      ? { width: item.width, height: item.height }
+      : {};
     return (
-      <span
+      <span key={item.uid} className="thumb-img" style={thumImgWrapStyle}>
-        key={item.uid}
-        className="thumb-img"
-        style={{
-          width: item.width,
-          height: item.height
-        }}
-      >
         <>
           {item.loading ? (
             <span

src/pages/playground/components/view-code-modal.tsx

@@ -87,7 +87,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
         },
         null,
         4
-      )};\nconst response = await openai.${clientType}.create(params);\n  ${consoleLog}}\nmain();`;
+      )};\nconst response = await openai.${clientType}(params);\n  ${consoleLog}}\nmain();`;
 
       return code;
     }
@@ -106,7 +106,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
         ''
       );
       const params = formatPyParams(payLoad);
-      const code = `from openai import OpenAI\n\nclient = OpenAI(\n  base_url="${BaseURL}", \n  api_key="YOUR_GPUSTACK_API_KEY"\n)\n\nresponse = client.${clientType}.create(\n${formattedParams}${params})\n${printLog}`;
+      const code = `from openai import OpenAI\n\nclient = OpenAI(\n  base_url="${BaseURL}", \n  api_key="YOUR_GPUSTACK_API_KEY"\n)\n\nresponse = client.${clientType}(\n${formattedParams}${params})\n${printLog}`;
       return code;
     }
     return '';

src/pages/playground/config/index.ts

@@ -107,16 +107,17 @@ export const generateMessages = (messageList: Omit<MessageItem, 'uid'>[]) => {
 export const OpenAIViewCode = {
   chat: {
     api: 'chat/completions',
-    clientType: 'chat.completions',
+    clientType: 'chat.completions.create',
     logcommand: 'choices[0].message.content'
   },
   embeddings: {
     api: 'embeddings',
-    clientType: 'embeddings',
+    clientType: 'embedding.create',
     logcommand: 'data[0].embedding'
   },
   images: {
     api: 'images/generations',
-    clientType: 'images.generate'
+    clientType: 'images.generate',
+    logcommand: 'data[0].b64_json'
   }
 };

src/pages/playground/config/params-config.ts

@@ -183,3 +183,136 @@ export const ImageParamsConfig: ParamsSchema[] = [
   //   ]
   // }
 ];
+
+export const ImageconstExtraConfig: ParamsSchema[] = [
+  {
+    type: 'Select',
+    name: 'quality',
+    options: [
+      { label: 'playground.params.standard', value: 'standard', locale: true },
+      { label: 'playground.params.hd', value: 'hd', locale: true }
+    ],
+    label: {
+      text: 'playground.params.quality',
+      isLocalized: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
+  {
+    type: 'Select',
+    name: 'style',
+    options: [
+      { label: 'playground.params.style.vivid', value: 'vivid', locale: true },
+      {
+        label: 'playground.params.style.natural',
+        value: 'natural',
+        locale: true
+      }
+    ],
+    attrs: {
+      allowClear: true
+    },
+    label: {
+      text: 'playground.params.style',
+      isLocalized: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  }
+];
+
+export const ImageAdvancedParamsConfig: ParamsSchema[] = [
+  {
+    type: 'Select',
+    name: 'sampler',
+    options: [
+      { label: 'euler_a', value: 'euler_a' },
+      { label: 'euler', value: 'euler' },
+      { label: 'heun', value: 'heun' },
+      { label: 'dpm2', value: 'dpm2' },
+      { label: 'dpm++2s_a', value: 'dpm++2s_a' },
+      { label: 'dpm++2m', value: 'dpm++2m' },
+      { label: 'dpm++2mv2', value: 'dpm++2mv2' },
+      { label: 'ipndm', value: 'ipndm' },
+      { label: 'pndm_v', value: 'pndm_v' },
+      { label: 'lcm', value: 'lcm' }
+    ],
+    label: {
+      text: 'playground.image.params.sampler',
+      isLocalized: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
+  {
+    type: 'InputNumber',
+    name: 'sample_steps',
+    label: {
+      text: 'playground.image.params.samplerSteps',
+      isLocalized: true
+    },
+    attrs: {
+      min: 1,
+      max: 100
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
+  {
+    type: 'InputNumber',
+    name: 'cfg_scale',
+    label: {
+      text: 'playground.image.params.cfgScale',
+      isLocalized: true
+    },
+    attrs: {
+      min: 1.0,
+      max: 10,
+      step: 0.1
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
+  {
+    type: 'Input',
+    name: 'negative_prompt',
+    label: {
+      text: 'playground.image.params.negativePrompt',
+      isLocalized: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
+  {
+    type: 'InputNumber',
+    name: 'seed',
+    label: {
+      text: 'playground.image.params.seed',
+      isLocalized: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  }
+];

src/pages/playground/config/types.ts

@@ -21,7 +21,8 @@ type SchemaType =
   | 'Select'
   | 'Slider'
   | 'TextArea'
-  | 'Checkbox';
+  | 'Checkbox'
+  | 'Textarea';
 
 export interface ParamsSchema {
   type: SchemaType;
@@ -30,6 +31,7 @@ export interface ParamsSchema {
     text: string;
     isLocalized?: boolean;
   };
+  style?: React.CSSProperties;
   options?: Global.BaseOption<string | number>[];
   value?: string | number | boolean | string[];
   min?: number;