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

chore: model meta data

Browse Source
This commit is contained in:
jialin
2024-12-30 16:07:30 +08:00
parent a24b7433a5
commit aed7267253
20 changed files with 445 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/playground/components/dynamic-params.tsx
+13 -17
View File
@@ -67,25 +67,21 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
}));
useEffect(() => {
let model = selectedModel || '';
if (showModelSelector) {
form.setFieldsValue({
model: selectedModel || _.get(modelList, '[0].value'),
...initialValues
});
setParams({
model: selectedModel || _.get(modelList, '[0].value'),
...initialValues
});
} else {
form.setFieldsValue({
model: selectedModel || '',
...initialValues
});
setParams({
model: selectedModel || '',
...initialValues
});
model = model || _.get(modelList, '[0].value');
}
form.setFieldsValue({
model: model,
...initialValues
});
setParams({
model: model,
...initialValues
});
onModelChange?.(model);
}, [modelList, showModelSelector, selectedModel, initialValues]);
const handleModelChange = useCallback(
src/pages/playground/components/ground-images.tsx
+105 -32
View File
@@ -13,7 +13,7 @@ import {
} from '@/utils/fetch-chunk-data';
import { FileImageOutlined, SwapOutlined } from '@ant-design/icons';
import { useIntl, useSearchParams } from '@umijs/max';
import { Button, Checkbox, Form, Tooltip } from 'antd';
import { Button, Form, Tooltip } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import 'overlayscrollbars/overlayscrollbars.css';
@@ -32,8 +32,9 @@ import { promptList } from '../config';
import {
ImageAdvancedParamsConfig,
ImageCustomSizeConfig,
ImageParamsConfig,
ImageconstExtraConfig,
ImageParamsConfig as paramsConfig
imageSizeOptions
} from '../config/params-config';
import { MessageItem, ParamsSchema } from '../config/types';
import '../style/ground-left.less';
@@ -48,6 +49,17 @@ interface MessageProps {
loaded?: boolean;
ref?: any;
}
// for advanced fields
const METAKEYS = [
'sample_method',
'sampling_steps',
'schedule_method',
'cfg_scale',
'guidance',
'negative_prompt'
];
const advancedFieldsDefaultValus = {
seed: null,
sample_method: 'euler_a',
@@ -55,7 +67,7 @@ const advancedFieldsDefaultValus = {
guidance: 3.5,
sampling_steps: 10,
negative_prompt: null,
schedule_method: 'discrete',
schedule_method: 'default',
preview: null
};
@@ -101,12 +113,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const messageListLengthCache = useRef<number>(0);
const requestToken = useRef<any>(null);
const [currentPrompt, setCurrentPrompt] = useState<string>('');
const [modelMeta, setModelMeta] = useState<any>({});
const form = useRef<any>(null);
const inputRef = useRef<any>(null);
const previewRef = useRef<any>({
preview: false,
preview_faster: false
});
const cacheFormData = useRef<Record<string, any>>({});
const size = Form.useWatch('size', form.current?.form);
@@ -125,10 +135,52 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
};
});
const paramsConfig = useMemo(() => {
const { max_height, max_width } = modelMeta || {};
if (
!max_height ||
!max_width ||
(max_height === 1024 && max_width === 1024)
) {
return ImageParamsConfig;
}
const newImageSizeOptions = imageSizeOptions.filter((item) => {
return item.width <= max_width && item.height <= max_height;
});
if (
!newImageSizeOptions.find(
(item) => item.width === max_width && item.height === max_height
)
) {
newImageSizeOptions.push({
width: max_width,
height: max_height,
label: `${max_width}x${max_height}`,
value: `${max_width}x${max_height}`
});
}
return ImageParamsConfig.map((item) => {
if (item.name === 'size') {
return {
...item,
options: newImageSizeOptions
};
}
return item;
});
}, [modelMeta]);
const generateNumber = (min: number, max: number) => {
return Math.floor(Math.random() * (max - min + 1) + min);
};
const updateCacheFormData = (values: Record<string, any>) => {
cacheFormData.current = {
...cacheFormData.current,
...values
};
};
const handleRandomPrompt = useCallback(() => {
const randomIndex = generateNumber(0, promptList.length - 1);
const randomPrompt = promptList[randomIndex];
@@ -211,8 +263,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setMessageId();
setTokenResult(null);
setCurrentPrompt(current?.content || '');
setRouteCache(routeCachekey.playgroundTextToImage, true);
const imgSize = _.split(finalParameters.size, 'x');
setRouteCache(routeCachekey['/playground/text-to-image'], true);
const imgSize = _.split(finalParameters.size, 'x').map((item: number) =>
_.toNumber(item)
);
// preview
let stream_options: Record<string, any> = {
@@ -320,7 +374,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setImageList([]);
} finally {
setLoading(false);
setRouteCache(routeCachekey.playgroundTextToImage, false);
setRouteCache(routeCachekey['/playground/text-to-image'], false);
}
};
const handleClear = () => {
@@ -345,12 +399,14 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const handleToggleParamsStyle = () => {
if (isOpenaiCompatible) {
form.current?.form?.setFieldsValue({
...advancedFieldsDefaultValus
...advancedFieldsDefaultValus,
..._.pick(cacheFormData.current, _.keys(advancedFieldsDefaultValus))
});
setParams((pre: object) => {
return {
..._.omit(pre, _.keys(openaiCompatibleFieldsDefaultValus)),
...advancedFieldsDefaultValus
...advancedFieldsDefaultValus,
..._.pick(cacheFormData.current, _.keys(advancedFieldsDefaultValus))
};
});
} else {
@@ -365,6 +421,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
});
}
setIsOpenaiCompatible(!isOpenaiCompatible);
updateCacheFormData(parameters);
};
const renderExtra = useMemo(() => {
@@ -428,7 +485,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
: item.description?.text
}
onChange={item.name === 'random_seed' ? handleFieldChange : null}
{..._.omit(item, ['name', 'rules', 'disabledConfig'])}
{..._.omit(item, [
'name',
'rules',
'disabledConfig',
'description'
])}
></FieldComponent>
</Form.Item>
);
@@ -470,34 +532,44 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
'rules',
'disabledConfig'
])}
max={
item.name === 'height'
? modelMeta.max_height || item.attrs?.max
: modelMeta.max_width || item.attrs?.max
}
></FieldComponent>
</Form.Item>
);
});
}
return null;
}, [size, intl]);
}, [size, intl, modelMeta]);
const hanldeOnPreview = (e: any) => {
previewRef.current.preview = e.target.checked;
};
const handleOnModelChange = useCallback(
(val: string) => {
if (!val) return;
const hanldeOnPreviewFaster = (e: any) => {
previewRef.current.preview_faster = e.target.checked;
};
const model = modelList.find((item) => item.value === val);
const renderPreview = useMemo(() => {
return (
<>
<Checkbox onChange={hanldeOnPreview} defaultChecked={false}>
Preview
</Checkbox>
<Checkbox onChange={hanldeOnPreviewFaster} defaultChecked={false}>
Preview Faster
</Checkbox>
</>
);
}, []);
setModelMeta(model?.meta || {});
if (!isOpenaiCompatible) {
setParams((pre: object) => {
return {
...pre,
..._.pick(model?.meta, METAKEYS, {})
};
});
form.current?.form?.setFieldsValue({
..._.pick(model?.meta, METAKEYS, {})
});
}
updateCacheFormData({
..._.pick(model?.meta, METAKEYS, {})
});
},
[modelList, isOpenaiCompatible]
);
useEffect(() => {
return () => {
@@ -672,6 +744,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
</Tooltip>
</div>
}
onModelChange={handleOnModelChange}
setParams={setParams}
paramsConfig={paramsConfig}
initialValues={initialValues}
src/pages/playground/components/image-edit.tsx
+101 -10
View File
@@ -33,8 +33,9 @@ import { EDIT_IMAGE_API } from '../apis';
import {
ImageAdvancedParamsConfig,
ImageCustomSizeConfig,
ImageParamsConfig,
ImageconstExtraConfig,
ImageEidtParamsConfig as paramsConfig
imageSizeOptions
} from '../config/params-config';
import { MessageItem, ParamsSchema } from '../config/types';
import '../style/ground-left.less';
@@ -49,6 +50,18 @@ interface MessageProps {
loaded?: boolean;
ref?: any;
}
// for advanced fields
const METAKEYS = [
'sample_method',
'sampling_steps',
'schedule_method',
'cfg_scale',
'guidance',
'negative_prompt',
'strength'
];
const advancedFieldsDefaultValus = {
seed: 1,
sample_method: 'euler_a',
@@ -58,7 +71,7 @@ const advancedFieldsDefaultValus = {
sampling_steps: 10,
negative_prompt: null,
preview: null,
schedule_method: 'discrete'
schedule_method: 'default'
};
const openaiCompatibleFieldsDefaultValus = {
@@ -109,6 +122,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const [image, setImage] = useState<string>('');
const [mask, setMask] = useState<string>('');
const [uploadList, setUploadList] = useState<any[]>([]);
const [modelMeta, setModelMeta] = useState<any>({});
const [imageStatus, setImageStatus] = useState<{
isOriginal: boolean;
isResetNeeded: boolean;
@@ -116,7 +130,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
isOriginal: false,
isResetNeeded: false
});
const cacheFormData = useRef<any>({});
const size = Form.useWatch('size', form.current?.form);
const { initialize, updateScrollerPosition } = useOverlayScroller();
@@ -134,6 +148,48 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
};
});
const updateCacheFormData = (values: Record<string, any>) => {
cacheFormData.current = {
...cacheFormData.current,
...values
};
};
const paramsConfig = useMemo(() => {
const { max_height, max_width } = modelMeta || {};
if (
!max_height ||
!max_width ||
(max_height === 1024 && max_width === 1024)
) {
return ImageParamsConfig;
}
const newImageSizeOptions = imageSizeOptions.filter((item) => {
return item.width <= max_width && item.height <= max_height;
});
if (
!newImageSizeOptions.find(
(item) => item.width === max_width && item.height === max_height
)
) {
newImageSizeOptions.push({
width: max_width,
height: max_height,
label: `${max_width}x${max_height}`,
value: `${max_width}x${max_height}`
});
}
return ImageParamsConfig.map((item) => {
if (item.name === 'size') {
return {
...item,
options: newImageSizeOptions
};
}
return item;
});
}, [modelMeta]);
const setImageSize = useCallback(() => {
let size: Record<string, string | number> = {
span: 12
@@ -154,12 +210,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}, [parameters.n]);
const imageFile = useMemo(() => {
console.log('image:', image);
return base64ToFile(image, 'image');
}, [image]);
const maskFile = useMemo(() => {
console.log('mask:', mask);
return base64ToFile(mask, 'mask');
}, [mask]);
@@ -224,7 +278,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setMessageId();
setTokenResult(null);
setCurrentPrompt(current?.content || '');
setRouteCache(routeCachekey.playgroundTextToImage, true);
setRouteCache(routeCachekey['/playground/text-to-image'], true);
const imgSize = _.split(finalParameters.size, 'x').map((item: string) =>
_.toNumber(item)
@@ -284,7 +338,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const result: any = await fetchChunkedData({
data: params,
// url: `http://192.168.50.174:40935/v1/images/edits?t=${Date.now()}`,
// url: `http:///v1/images/edits?t=${Date.now()}`,
url: `${EDIT_IMAGE_API}?t=${Date.now()}`,
signal: requestToken.current.signal
});
@@ -339,7 +393,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setImageList([]);
} finally {
setLoading(false);
setRouteCache(routeCachekey.playgroundTextToImage, false);
setRouteCache(routeCachekey['/playground/text-to-image'], false);
}
};
const handleClear = () => {
@@ -447,7 +501,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
: item.description?.text || ''
}
onChange={item.name === 'random_seed' ? handleFieldChange : null}
{..._.omit(item, ['name', 'rules', 'disabledConfig'])}
{..._.omit(item, [
'name',
'rules',
'disabledConfig',
'description'
])}
></FieldComponent>
</Form.Item>
);
@@ -489,13 +548,44 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
'rules',
'disabledConfig'
])}
max={
item.name === 'height'
? modelMeta.max_height || item.attrs?.max
: modelMeta.max_width || item.attrs?.max
}
></FieldComponent>
</Form.Item>
);
});
}
return null;
}, [size, intl]);
}, [size, intl, modelMeta]);
const handleOnModelChange = useCallback(
(val: string) => {
if (!val) return;
const model = modelList.find((item) => item.value === val);
setModelMeta(model?.meta || {});
if (!isOpenaiCompatible) {
setParams((pre: object) => {
return {
...pre,
..._.pick(model?.meta, METAKEYS, {})
};
});
form.current?.form?.setFieldsValue({
..._.pick(model?.meta, METAKEYS, {})
});
}
updateCacheFormData({
..._.pick(model?.meta, METAKEYS, {})
});
},
[modelList, isOpenaiCompatible]
);
const handleUpdateImageList = useCallback((base64List: any) => {
const img = _.get(base64List, '[0].dataUrl', '');
@@ -758,6 +848,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
</Tooltip>
</div>
}
onModelChange={handleOnModelChange}
setParams={setParams}
paramsConfig={paramsConfig}
initialValues={initialValues}
src/pages/playground/components/params-settings.tsx
+42 -25
View File
@@ -29,6 +29,14 @@ type ParamsSettingsProps = {
globalParams?: ParamsSettingsFormProps;
};
const METAKEYS: Record<string, string> = {
seed: 'seed',
stop: 'stop',
temperature: 'temperature',
top_p: 'top_p',
max_tokens: 'n_ctx'
};
const ParamsSettings: React.FC<ParamsSettingsProps> = ({
selectedModel,
setParams,
@@ -49,28 +57,6 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
const [form] = Form.useForm();
const formId = useId();
useEffect(() => {
if (showModelSelector) {
form.setFieldsValue({
...initialValues,
model: selectedModel || _.get(modelList, '[0].value')
});
setParams({
...initialValues,
model: selectedModel || _.get(modelList, '[0].value')
});
} else {
form.setFieldsValue({
...initialValues,
model: selectedModel || ''
});
setParams({
...initialValues,
model: selectedModel || ''
});
}
}, [modelList, showModelSelector, selectedModel]);
const handleOnFinish = (values: any) => {
console.log('handleOnFinish', values);
};
@@ -108,11 +94,42 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
[form, setParams, onValuesChange]
);
const handleResetParams = () => {
form.setFieldsValue(initialValues);
setParams(initialValues);
const handleModelChange = (val: string) => {
const model = _.find(modelList, { value: val });
const modelMeta = model?.meta || {};
const keys = Object.keys(METAKEYS).map((k: string) => {
return METAKEYS[k];
});
const modelMetaKeys = _.pick(modelMeta, keys);
const obj = _.reduce(
METAKEYS,
(result: any, value: any, key: string) => {
result[key] = modelMetaKeys[value];
return result;
},
{}
);
return obj;
};
useEffect(() => {
let model = selectedModel || '';
if (showModelSelector) {
model = model || _.get(modelList, '[0].value');
}
const modelMetaData = handleModelChange(model);
form.setFieldsValue({
...initialValues,
...modelMetaData,
model: model
});
setParams({
...initialValues,
...modelMetaData,
model: model
});
}, [modelList, showModelSelector, selectedModel]);
useEffect(() => {
form.setFieldsValue(globalParams);
}, [globalParams]);