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