root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: image custom params

Browse Source
This commit is contained in:
jialin
2024-11-27 17:07:22 +08:00
parent ba76498acc
commit 230120fff5
19 changed files with 473 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/proxy.ts
+2 -2
View File
@@ -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
+19
View File
@@ -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
+19
View File
@@ -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
+10 -2
View File
@@ -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
+9 -1
View File
@@ -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
+17 -25
View File
@@ -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 =
'/proxy?url=https://www.modelscope.cn/api/v1/dolphin/models/';
const MODE_SCOPE_MODEL_FIELS_API =
'/proxy?url=https://modelscope.cn/api/v1/models/';
const MODE_SCOPE_MODEL_FIELS_API = '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(
`${MODE_SCOPE_MODEL_FIELS_API}${params.name}/repo/files?${qs.stringify({
const url = `${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(
`${MODE_SCOPE_MODEL_FIELS_API}${params.name}/resolve/master/config.json`,
{
method: 'GET',
signal: options?.signal
}
);
const url = `${MODE_SCOPE_MODEL_FIELS_API}${params.name}/resolve/master/config.json`;
const res = await fetch(setProxyUrl(url), {
method: 'GET',
signal: options?.signal
});
if (!res.ok) {
throw new Error('Network response was not ok');
}
src/pages/llmodels/components/advance-config.tsx
+1 -1
View File
@@ -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
+22 -6
View File
@@ -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']),
speech_to_text: modelTask.speech2text,
text_to_speech: modelTask.text2speech
..._.omit(formdata, ['scheduleType'])
});
}
};
src/pages/llmodels/components/model-card.tsx
-12
View File
@@ -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
+17 -48
View File
@@ -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
style={{
flex: 1,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
}}
>
</span>
<span>
<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
allowClear
value={filterTaskRef.current}
onChange={handleFilterTaskChange}
options={[
{
label: intl.formatMessage({
id: 'playground.audio.texttospeech'
}),
value: modelTaskMap.textToSpeech
},
{
label: intl.formatMessage({
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>
<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: '150px' }}
></Select>
</span>
</div>
</>
src/pages/llmodels/config/audio-catalog.ts
+105
View File
@@ -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
+7 -4
View File
@@ -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>
{intl.formatMessage({ id: 'playground.parameters' })}
</span>
{parametersTitle || (
<span>
{intl.formatMessage({ id: 'playground.parameters' })}
</span>
)}
</h3>
<Form.Item<ParamsSettingsFormProps>
name="model"
src/pages/playground/components/ground-images.tsx
+93 -52
View File
@@ -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
+6 -39
View File
@@ -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();
};
const handleUpdateModelSelections = (value: string[]) => {
const list = value?.map?.((val) => {
return {
value: val,
label: val,
instanceId: Symbol(val)
};
setMessage({
role: Roles.User,
content: '',
imgs: []
});
setModelSelections?.(list);
};
const handleOpenPrompt = () => {
setOpen(true);
};
const handleAddMessage = (e?: any) => {
@@ -379,9 +364,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
</Checkbox>
)}
{actions.includes('clear') && (
<Tooltip
title={intl.formatMessage({ id: 'playground.toolbar.clearmsg' })}
>
<Tooltip title={intl.formatMessage({ id: 'common.button.clear' })}>
<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
+4 -8
View File
@@ -37,15 +37,11 @@ const ThumbImg: React.FC<{
}
const renderImageItem = (item: any) => {
const thumImgWrapStyle = item.loading
? { width: item.width, height: item.height }
: {};
return (
<span
key={item.uid}
className="thumb-img"
style={{
width: item.width,
height: item.height
}}
>
<span key={item.uid} className="thumb-img" style={thumImgWrapStyle}>
<>
{item.loading ? (
<span
src/pages/playground/components/view-code-modal.tsx
+2 -2
View File
@@ -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
+4 -3
View File
@@ -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
+133
View File
@@ -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
+3 -1
View File
@@ -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;