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

refactor: create image hooks

Browse Source
This commit is contained in:
jialin
2025-02-23 13:32:03 +08:00
parent f8c7f88ac2
commit bb8b00e547
6 changed files with 593 additions and 775 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/playground/components/dynamic-params.tsx
+55 -202
View File
@@ -1,10 +1,7 @@
import FieldWrapper from '@/components/seal-form/field-wrapper'; 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 SealSelect from '@/components/seal-form/seal-select';
import { INPUT_WIDTH } from '@/constants';
import { InfoCircleOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max'; import { useIntl } from '@umijs/max';
import { Form, InputNumber, Slider, Tooltip } from 'antd'; import { Form } from 'antd';
import _ from 'lodash'; import _ from 'lodash';
import { import {
forwardRef, forwardRef,
@@ -16,25 +13,13 @@ import {
useMemo useMemo
} from 'react'; } from 'react';
import { ParamsSchema } from '../config/types'; import { ParamsSchema } from '../config/types';
import CustomLabelStyles from '../style/custom-label.less';
type ParamsSettingsFormProps = {
top_n?: number;
model?: string;
};
type ParamsSettingsProps = { type ParamsSettingsProps = {
ref?: any; ref?: any;
parametersTitle?: React.ReactNode; parametersTitle?: React.ReactNode;
selectedModel?: string;
showModelSelector?: boolean; showModelSelector?: boolean;
params?: Record<string, any>;
model?: string;
modelList: Global.BaseOption<string>[]; modelList: Global.BaseOption<string>[];
onValuesChange?: (changeValues: any, value: Record<string, any>) => void; onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
setParams: (params: any) => void;
onModelChange?: (model: string) => void;
globalParams?: Record<string, any>;
paramsConfig?: ParamsSchema[]; paramsConfig?: ParamsSchema[];
initialValues?: Record<string, any>; initialValues?: Record<string, any>;
extra?: React.ReactNode; extra?: React.ReactNode;
@@ -43,16 +28,11 @@ type ParamsSettingsProps = {
const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef( const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
( (
{ {
setParams,
onValuesChange, onValuesChange,
onModelChange,
parametersTitle, parametersTitle,
selectedModel,
globalParams,
initialValues, initialValues,
paramsConfig, paramsConfig,
modelList, modelList,
params,
showModelSelector = true, showModelSelector = true,
extra extra
}, },
@@ -62,34 +42,20 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
const [form] = Form.useForm(); const [form] = Form.useForm();
const formId = useId(); const formId = useId();
const dependFieldsValue = Form.useWatch(
paramsConfig?.flatMap((item) => item.dependencies || []),
form
);
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
form form
})); }));
useEffect(() => { useEffect(() => {
let model = selectedModel || '';
if (showModelSelector) {
model = model || _.get(modelList, '[0].value');
}
form.setFieldsValue({ form.setFieldsValue({
model: model,
...initialValues ...initialValues
}); });
setParams({ }, [initialValues]);
model: model,
...initialValues
});
onModelChange?.(model);
}, [modelList, showModelSelector, selectedModel, initialValues]);
const handleModelChange = useCallback(
(value: string) => {
onModelChange?.(value);
},
[onModelChange]
);
const handleOnFinish = (values: any) => { const handleOnFinish = (values: any) => {
console.log('handleOnFinish', values); console.log('handleOnFinish', values);
@@ -101,172 +67,60 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
const handleValuesChange = useCallback( const handleValuesChange = useCallback(
(changedValues: any, allValues: any) => { (changedValues: any, allValues: any) => {
setParams?.(allValues); const normalizedValues = Object.fromEntries(
onValuesChange?.(changedValues, allValues); Object.entries(changedValues).map(([key, value]: [string, any]) => [
}, key,
[onValuesChange, setParams] value?.target?.checked ?? value?.target?.value ?? value
); ])
const handleFieldValueChange = useCallback(
(val: any, field: string) => {
const values = form.getFieldsValue();
form.setFieldsValue({
...values,
[field]: val
});
setParams({
...values,
[field]: val
});
onValuesChange?.(
{ [field]: val },
{
...values,
[field]: val
}
); );
form.setFieldsValue(normalizedValues);
onValuesChange?.(normalizedValues, {
...allValues,
...normalizedValues
});
}, },
[form, setParams, onValuesChange] [onValuesChange]
); );
useEffect(() => {
form.setFieldsValue(globalParams);
}, [globalParams]);
const renderLabel = useCallback(
(args: { field: string; label: string; description: string }) => {
return (
<span
className={CustomLabelStyles.label}
style={{ width: INPUT_WIDTH.mini }}
>
<span className="text">
{args.description ? (
<Tooltip title={args.description}>
<span> {args.label}</span>
<span className="m-l-5">
<InfoCircleOutlined />
</span>
</Tooltip>
) : (
<span>{args.label}</span>
)}
</span>
<InputNumber
className="label-val"
variant="outlined"
size="small"
value={form.getFieldValue(args.field)}
controls={false}
onChange={(val) => handleFieldValueChange(val, args.field)}
></InputNumber>
</span>
);
},
[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(() => { const renderFields = useMemo(() => {
console.log('paramsConfig++++++++++++'); if (!paramsConfig) {
if (!paramsConfig?.length) {
return null; return null;
} }
return paramsConfig.map((item: ParamsSchema) => { console.log('renderFields---------');
if (item.type === 'InputNumber') { const formValues = form?.getFieldsValue();
return ( return paramsConfig?.map((item: ParamsSchema) => {
<Form.Item name={item.name} rules={item.rules} key={item.name}> return (
<SealInput.Number <Form.Item
{...item.attrs} name={item.name}
style={{ width: '100%' }} rules={item.rules}
label={ key={item.name}
item.label.isLocalized {...item.formItemAttrs}
? intl.formatMessage({ id: item.label.text }) >
: item.label.text <FieldComponent
} disabled={
></SealInput.Number> item.disabledConfig
</Form.Item> ? item.disabledConfig?.when?.(formValues)
); : item.disabled
} }
if (item.type === 'TextArea') { description={
return ( item.description?.isLocalized
<Form.Item name={item.name} rules={item.rules} key={item.name}> ? intl.formatMessage({ id: item.description.text })
<SealInput.TextArea : item.description?.text
{...item.attrs} }
style={{ width: '100%' }} onChange={null}
label={ {..._.omit(item, [
item.label.isLocalized 'name',
? intl.formatMessage({ id: item.label.text }) 'rules',
: item.label.text 'formItemAttrs',
} 'dependencies',
></SealInput.TextArea> 'disabledConfig',
</Form.Item> 'description'
); ])}
} ></FieldComponent>
if (item.type === 'Select') { </Form.Item>
return ( );
<Form.Item name={item.name} rules={item.rules} key={item.name}>
<SealSelect
{...item.attrs}
description={renderDescription(item)}
options={item.options}
label={
item.label.isLocalized
? intl.formatMessage({ id: item.label.text })
: item.label.text
}
></SealSelect>
</Form.Item>
);
}
if (item.type === 'Slider') {
return (
<Form.Item name={item.name} rules={item.rules} key={item.name}>
<FieldWrapper
label={renderLabel({
field: item.name,
label: item.label.isLocalized
? intl.formatMessage({ id: item.label.text })
: item.label.text,
description: item.description?.isLocalized
? intl.formatMessage({ id: item.description?.text })
: item.description?.text || ''
})}
style={{ padding: '20px 2px 0' }}
variant="borderless"
>
<Slider
{...item.attrs}
style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
tooltip={{ open: false }}
value={form.getFieldValue(item.name) || undefined}
onChange={(val) => handleFieldValueChange(val, item.name)}
></Slider>
</FieldWrapper>
</Form.Item>
);
}
return null;
}); });
}, [paramsConfig, params, renderDescription, intl]); }, [paramsConfig, intl, dependFieldsValue]);
return ( return (
<Form <Form
@@ -286,7 +140,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
</span> </span>
)} )}
</h3> </h3>
<Form.Item<ParamsSettingsFormProps> <Form.Item
name="model" name="model"
rules={[ rules={[
{ {
@@ -301,7 +155,6 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
]} ]}
> >
<SealSelect <SealSelect
onChange={handleModelChange}
showSearch={true} showSearch={true}
options={modelList} options={modelList}
label={intl.formatMessage({ id: 'playground.model' })} label={intl.formatMessage({ id: 'playground.model' })}
src/pages/playground/components/ground-images.tsx
+43 -540
View File
@@ -1,19 +1,11 @@
import { setRouteCache } from '@/atoms/route-cache'; import { setRouteCache } from '@/atoms/route-cache';
import AlertInfo from '@/components/alert-info'; import AlertInfo from '@/components/alert-info';
import IconFont from '@/components/icon-font'; import IconFont from '@/components/icon-font';
import FieldComponent from '@/components/seal-form/field-component';
import SealSelect from '@/components/seal-form/seal-select';
import routeCachekey from '@/config/route-cachekey'; import routeCachekey from '@/config/route-cachekey';
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import ThumbImg from '@/pages/playground/components/thumb-img'; import ThumbImg from '@/pages/playground/components/thumb-img';
import { generateRandomNumber } from '@/utils';
import {
fetchChunkedData,
readLargeStreamData as readStreamData
} from '@/utils/fetch-chunk-data';
import { FileImageOutlined, SwapOutlined } from '@ant-design/icons'; import { FileImageOutlined, SwapOutlined } from '@ant-design/icons';
import { useIntl, useSearchParams } from '@umijs/max'; import { useIntl } from '@umijs/max';
import { Button, Form, Tooltip } from 'antd'; import { Button, Tooltip } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import _ from 'lodash'; import _ from 'lodash';
import 'overlayscrollbars/overlayscrollbars.css'; import 'overlayscrollbars/overlayscrollbars.css';
@@ -21,22 +13,15 @@ import React, {
forwardRef, forwardRef,
memo, memo,
useCallback, useCallback,
useEffect,
useImperativeHandle, useImperativeHandle,
useMemo, useMemo,
useRef, useRef,
useState useState
} from 'react'; } from 'react';
import { CREAT_IMAGE_API } from '../apis'; import { CREAT_IMAGE_API } from '../apis';
import { extractErrorMessage, promptList } from '../config'; import { MessageItem } from '../config/types';
import { import { useInitImageMeta } from '../hooks/use-init-meta';
ImageAdvancedParamsConfig, import useTextImage from '../hooks/use-text-image';
ImageCustomSizeConfig,
ImageParamsConfig,
ImageconstExtraConfig,
imageSizeOptions
} from '../config/params-config';
import { MessageItem, ParamsSchema } from '../config/types';
import '../style/ground-left.less'; import '../style/ground-left.less';
import '../style/system-message-wrap.less'; import '../style/system-message-wrap.less';
import { generateImageCode, generateOpenaiImageCode } from '../view-code/image'; import { generateImageCode, generateOpenaiImageCode } from '../view-code/image';
@@ -50,80 +35,39 @@ interface MessageProps {
ref?: any; ref?: any;
} }
// for advanced fields
const METAKEYS = [
'sample_method',
'sampling_steps',
'schedule_method',
'cfg_scale',
'guidance',
'negative_prompt'
];
const ODD_STRING = 'AAAABJRU5ErkJgg===';
const advancedFieldsDefaultValus = {
seed: null,
sample_method: 'euler_a',
cfg_scale: 4.5,
guidance: 3.5,
sampling_steps: 10,
negative_prompt: null,
schedule_method: 'discrete',
preview: 'preview_faster'
};
const openaiCompatibleFieldsDefaultValus = {
quality: 'standard',
style: null
};
const initialValues = {
n: 1,
size: '512x512',
...advancedFieldsDefaultValus
};
const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => { const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const { modelList } = props; const { modelList } = props;
const messageId = useRef<number>(0);
const [isOpenaiCompatible, setIsOpenaiCompatible] = useState<boolean>(false);
const [imageList, setImageList] = useState<
{
dataUrl: string;
height: number | string;
width: string | number;
maxHeight: string | number;
maxWidth: string | number;
uid: number;
span?: number;
loading?: boolean;
progress?: number;
}[]
>([]);
const intl = useIntl(); const intl = useIntl();
const [searchParams] = useSearchParams();
const selectModel = searchParams.get('model') || '';
const [parameters, setParams] = useState<any>({});
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const [loading, setLoading] = useState(false);
const [tokenResult, setTokenResult] = useState<any>(null);
const [collapse, setCollapse] = useState(false); const [collapse, setCollapse] = useState(false);
const scroller = useRef<any>(null); const scroller = useRef<any>(null);
const paramsRef = useRef<any>(null); const paramsRef = useRef<any>(null);
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 inputRef = useRef<any>(null);
const cacheFormData = useRef<Record<string, any>>({});
const size = Form.useWatch('size', form.current?.form); const {
handleOnValuesChange,
const { initialize, updateScrollerPosition } = useOverlayScroller(); handleToggleParamsStyle,
const { initialize: innitializeParams } = useOverlayScroller(); form,
paramsConfig,
initialValues,
parameters,
isOpenaiCompatible
} = useInitImageMeta(props);
const {
loading,
tokenResult,
imageList,
promptList,
currentPrompt,
setCurrentPrompt,
handleClear,
handleStopConversation,
submitMessage
} = useTextImage({
scroller,
paramsRef
});
useImperativeHandle(ref, () => { useImperativeHandle(ref, () => {
return { return {
@@ -137,58 +81,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}; };
}); });
const removeBase64Suffix = (str: string, suffix: string) => {
return str.endsWith(suffix) ? str.slice(0, -suffix.length) : str;
};
const getNewImageSizeOptions = useCallback((metaData: any) => {
const { max_height, max_width } = metaData || {};
if (!max_height || !max_width) {
return imageSizeOptions;
}
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 newImageSizeOptions;
}, []);
const paramsConfig = useMemo(() => {
const newImageSizeOptions = getNewImageSizeOptions(modelMeta);
let result: ParamsSchema[] = ImageParamsConfig.map((item: ParamsSchema) => {
if (item.name === 'size') {
return {
...item,
options: newImageSizeOptions
};
}
return item;
});
if (!newImageSizeOptions.length) {
result = result.filter((item) => item.name !== 'size');
}
return result;
}, [modelMeta]);
const generateNumber = (min: number, max: number) => { const generateNumber = (min: number, max: number) => {
return Math.floor(Math.random() * (max - min + 1) + min); return Math.floor(Math.random() * (max - min + 1) + min);
}; };
const updateCacheFormData = (values: Record<string, any>) => {
_.merge(cacheFormData.current, values);
};
const handleRandomPrompt = useCallback(() => { const handleRandomPrompt = useCallback(() => {
const randomIndex = generateNumber(0, promptList.length - 1); const randomIndex = generateNumber(0, promptList.length - 1);
const randomPrompt = promptList[randomIndex]; const randomPrompt = promptList[randomIndex];
@@ -199,25 +95,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}); });
}, []); }, []);
const setImageSize = useCallback(() => {
let size: Record<string, string | number> = {
span: 12
};
if (parameters.n === 1) {
size.span = 24;
}
if (parameters.n === 2) {
size.span = 12;
}
if (parameters.n === 3) {
size.span = 12;
}
if (parameters.n === 4) {
size.span = 12;
}
return size;
}, [parameters.n]);
const finalParameters = useMemo(() => { const finalParameters = useMemo(() => {
if (parameters.size === 'custom') { if (parameters.size === 'custom') {
return { return {
@@ -234,6 +111,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}, [parameters]); }, [parameters]);
const viewCodeContent = useMemo(() => { const viewCodeContent = useMemo(() => {
console.log('finalParameters:', finalParameters);
if (isOpenaiCompatible) { if (isOpenaiCompatible) {
return generateOpenaiImageCode({ return generateOpenaiImageCode({
api: CREAT_IMAGE_API, api: CREAT_IMAGE_API,
@@ -250,401 +128,30 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
prompt: currentPrompt prompt: currentPrompt
} }
}); });
}, [finalParameters, currentPrompt, parameters.size]); }, [finalParameters, isOpenaiCompatible, currentPrompt]);
const setMessageId = () => {
messageId.current = messageId.current + 1;
return messageId.current;
};
const handleStopConversation = () => {
requestToken.current?.abort?.();
setLoading(false);
};
const submitMessage = async (current?: { content: string }) => {
try {
await form.current?.form?.validateFields();
if (!parameters.model) return;
const size: any = setImageSize();
setLoading(true);
setMessageId();
setTokenResult(null);
setCurrentPrompt(current?.content || '');
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> = {
chunk_size: 16 * 1024,
chunk_results: true
};
if (parameters.preview === 'preview') {
stream_options = {
preview: true
};
}
if (parameters.preview === 'preview_faster') {
stream_options = {
preview_faster: true
};
}
let newImageList = Array(parameters.n)
.fill({})
.map((item, index: number) => {
return {
dataUrl: 'data:image/png;base64,',
...size,
progress: 0,
height: imgSize[1],
width: imgSize[0],
loading: true,
progressType: 'dashboard',
preview: false,
uid: setMessageId()
};
});
setImageList(newImageList);
requestToken.current?.abort?.();
requestToken.current = new AbortController();
const params = {
..._.omitBy(finalParameters, (value: string) => !value),
seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
stream: true,
stream_options: {
...stream_options
},
prompt: current?.content || currentPrompt || ''
};
setParams({
...parameters,
seed: params.seed
});
form.current?.form?.setFieldValue('seed', params.seed);
const result: any = await fetchChunkedData({
data: params,
url: `${CREAT_IMAGE_API}?t=${Date.now()}`,
signal: requestToken.current.signal
});
if (result.error) {
setTokenResult({
error: true,
errorMessage: extractErrorMessage(result)
});
setImageList([]);
return;
}
const { reader, decoder } = result;
await readStreamData(reader, decoder, (chunk: any) => {
if (chunk?.error) {
setTokenResult({
error: true,
errorMessage: chunk?.error?.message || chunk?.message || ''
});
return;
}
chunk?.data?.forEach((item: any) => {
const imgItem = newImageList[item.index];
if (item.b64_json && stream_options.chunk_results) {
imgItem.dataUrl += removeBase64Suffix(item.b64_json, ODD_STRING);
} else if (item.b64_json) {
imgItem.dataUrl = `data:image/png;base64,${removeBase64Suffix(item.b64_json, ODD_STRING)}`;
}
const progress = item.progress;
newImageList[item.index] = {
dataUrl: imgItem.dataUrl,
height: imgSize[1],
width: imgSize[0],
maxHeight: `${imgSize[1]}px`,
maxWidth: `${imgSize[0]}px`,
uid: imgItem.uid,
span: imgItem.span,
loading: stream_options.chunk_results ? progress < 100 : false,
preview: progress >= 100,
progress: progress
};
});
setImageList([...newImageList]);
});
} catch (error) {
console.log('error:', error);
requestToken.current?.abort?.();
setImageList([]);
} finally {
setLoading(false);
setRouteCache(routeCachekey['/playground/text-to-image'], false);
}
};
const handleClear = () => {
// setMessageId();
// setImageList([]);
// setTokenResult(null);
};
const handleInputChange = (e: any) => { const handleInputChange = (e: any) => {
setCurrentPrompt(e.target.value); setCurrentPrompt(e.target.value);
}; };
const handleSendMessage = (message: Omit<MessageItem, 'uid'>) => { const handleSendMessage = async (message: Omit<MessageItem, 'uid'>) => {
const currentMessage = message.content ? message : undefined; try {
submitMessage(currentMessage); await form.current?.form?.validateFields();
if (!parameters.model) return;
submitMessage(finalParameters);
setRouteCache(routeCachekey['/playground/text-to-image'], true);
} catch (error) {
// console.log('error:', error);
} finally {
console.log('finally---------');
setRouteCache(routeCachekey['/playground/text-to-image'], false);
}
}; };
const handleCloseViewCode = () => { const handleCloseViewCode = () => {
setShow(false); setShow(false);
}; };
const handleToggleParamsStyle = () => {
if (isOpenaiCompatible) {
form.current?.form?.setFieldsValue({
...advancedFieldsDefaultValus,
..._.pick(cacheFormData.current, _.keys(advancedFieldsDefaultValus))
});
setParams((pre: object) => {
return {
..._.omit(pre, _.keys(openaiCompatibleFieldsDefaultValus)),
...advancedFieldsDefaultValus,
..._.pick(cacheFormData.current, _.keys(advancedFieldsDefaultValus))
};
});
} else {
form.current?.form?.setFieldsValue({
...openaiCompatibleFieldsDefaultValus
});
setParams((pre: object) => {
return {
...openaiCompatibleFieldsDefaultValus,
..._.omit(pre, _.keys(advancedFieldsDefaultValus))
};
});
}
setIsOpenaiCompatible(!isOpenaiCompatible);
updateCacheFormData(parameters);
};
const renderExtra = useMemo(() => {
if (!isOpenaiCompatible) {
return [];
}
return ImageconstExtraConfig.map((item: ParamsSchema) => {
return (
<Form.Item name={item.name} rules={item.rules} key={item.name}>
<SealSelect
{...item.attrs}
options={item.options}
label={
item.label.isLocalized
? intl.formatMessage({ id: item.label.text })
: item.label.text
}
></SealSelect>
</Form.Item>
);
});
}, [ImageconstExtraConfig, isOpenaiCompatible, intl]);
const handleFieldChange = (e: any) => {
if (e.target.id.indexOf('random_seed') > -1) {
form.current?.form?.setFieldValue('random_seed', e.target.checked);
setParams((pre: object) => {
return {
...pre,
random_seed: e.target.checked
};
});
}
};
const renderAdvanced = useMemo(() => {
if (isOpenaiCompatible) {
return [];
}
const formValues = form.current?.form?.getFieldsValue();
return ImageAdvancedParamsConfig.map((item: ParamsSchema) => {
if (item.name === 'strength') {
return null;
}
return (
<Form.Item
name={item.name}
rules={item.rules}
key={item.name}
noStyle={item.name === 'random_seed'}
>
<FieldComponent
style={item.name === 'random_seed' ? { marginBottom: 20 } : {}}
disabled={
item.disabledConfig
? item.disabledConfig?.when?.(formValues)
: item.disabled
}
description={
item.description?.isLocalized
? intl.formatMessage({ id: item.description.text })
: item.description?.text
}
onChange={item.name === 'random_seed' ? handleFieldChange : null}
{..._.omit(item, [
'name',
'rules',
'disabledConfig',
'description'
])}
></FieldComponent>
</Form.Item>
);
});
}, [ImageAdvancedParamsConfig, isOpenaiCompatible, intl, form.current]);
const renderCustomSize = useMemo(() => {
if (size === 'custom') {
return ImageCustomSizeConfig.map((item: ParamsSchema) => {
return (
<Form.Item
name={item.name}
rules={[
{
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{ name: intl.formatMessage({ id: item.label.text }) }
),
required: true
}
]}
key={item.name}
>
<FieldComponent
label={
item.label.isLocalized
? intl.formatMessage({ id: item.label.text })
: item.label.text
}
description={
item.description?.isLocalized
? intl.formatMessage({ id: item.description.text })
: item.description?.text
}
{..._.omit(item, [
'name',
'description',
'rules',
'disabledConfig',
'attrs'
])}
{...item.attrs}
defaultValue={
item.name === 'height'
? modelMeta.default_height
: modelMeta.default_width
}
max={
item.name === 'height'
? modelMeta.max_height || item.attrs?.max
: modelMeta.max_width || item.attrs?.max
}
></FieldComponent>
</Form.Item>
);
});
}
return null;
}, [size, intl, modelMeta]);
const handleOnModelChange = useCallback(
(val: string) => {
if (!val) return;
const model = modelList.find((item) => item.value === val);
setModelMeta(model?.meta || {});
const imageSizeOptions = getNewImageSizeOptions(model?.meta);
const w = model?.meta?.default_width || 512;
const h = model?.meta?.default_height || 512;
const defaultSize = imageSizeOptions.length ? `${w}x${h}` : 'custom';
if (!isOpenaiCompatible) {
setParams((pre: object) => {
const obj = _.merge({}, pre, _.pick(model?.meta, METAKEYS, {}));
return {
...obj,
size: defaultSize,
width: w,
height: h
};
});
form.current?.form?.setFieldsValue({
..._.pick(model?.meta, METAKEYS, {}),
size: defaultSize,
width: w,
height: h
});
}
updateCacheFormData({
..._.pick(model?.meta, METAKEYS, {}),
size: defaultSize,
width: w,
height: h
});
},
[modelList, isOpenaiCompatible]
);
useEffect(() => {
return () => {
requestToken.current?.abort?.();
};
}, []);
useEffect(() => {
if (size === 'custom') {
form.current?.form?.setFieldsValue({
width: cacheFormData.current.width || 512,
height: cacheFormData.current.height || 512
});
setParams((pre: object) => {
return {
...pre,
width: cacheFormData.current.width || 512,
height: cacheFormData.current.height || 512
};
});
}
}, [size]);
useEffect(() => {
if (scroller.current) {
initialize(scroller.current);
}
}, [scroller.current, initialize]);
useEffect(() => {
if (paramsRef.current) {
innitializeParams(paramsRef.current);
}
}, [paramsRef.current, innitializeParams]);
useEffect(() => {
if (loading) {
updateScrollerPosition();
}
}, [imageList, loading]);
useEffect(() => {
if (imageList.length > messageListLengthCache.current) {
updateScrollerPosition();
}
messageListLengthCache.current = imageList.length;
}, [imageList.length]);
return ( return (
<div className="ground-left-wrapper"> <div className="ground-left-wrapper">
<div className="ground-left"> <div className="ground-left">
@@ -771,14 +278,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
</Tooltip> </Tooltip>
</div> </div>
} }
onModelChange={handleOnModelChange} onValuesChange={handleOnValuesChange}
setParams={setParams}
paramsConfig={paramsConfig} paramsConfig={paramsConfig}
initialValues={initialValues} initialValues={initialValues}
params={parameters}
selectedModel={selectModel}
modelList={modelList} modelList={modelList}
extra={[renderCustomSize, ...renderExtra, ...renderAdvanced]}
/> />
</div> </div>
</div> </div>
src/pages/playground/config/params-config.ts
+174 -2
View File
@@ -1,5 +1,12 @@
import { ParamsSchema } from './types'; import { ParamsSchema } from './types';
export interface ImageSizeItem {
label: string;
value: string;
width: number;
height: number;
locale?: boolean;
}
export const imageSizeOptions: { export const imageSizeOptions: {
label: string; label: string;
value: string; value: string;
@@ -145,6 +152,48 @@ export const ImageParamsConfig: ParamsSchema[] = [
} }
]; ];
export const ImageCountConfig: ParamsSchema[] = [
{
type: 'InputNumber',
name: 'n',
label: {
text: 'playground.params.counts',
isLocalized: true
},
attrs: {
min: 1,
max: 4
},
rules: [
{
required: false
}
]
}
];
export const ImageSizeConfig: ParamsSchema[] = [
{
type: 'Select',
name: 'size',
options: imageSizeOptions,
description: {
text: 'playground.params.size.description',
html: true,
isLocalized: true
},
label: {
text: 'playground.params.size',
isLocalized: true
},
rules: [
{
required: false
}
]
}
];
export const ImageEidtParamsConfig: ParamsSchema[] = [ export const ImageEidtParamsConfig: ParamsSchema[] = [
{ {
type: 'InputNumber', type: 'InputNumber',
@@ -414,6 +463,7 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
attrs: { attrs: {
min: 0 min: 0
}, },
dependencies: ['random_seed'],
disabledConfig: { disabledConfig: {
depends: ['random_seed'], depends: ['random_seed'],
when: (values: Record<string, any>): boolean => values?.random_seed when: (values: Record<string, any>): boolean => values?.random_seed
@@ -431,6 +481,12 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
text: 'playground.image.params.randomseed', text: 'playground.image.params.randomseed',
isLocalized: true isLocalized: true
}, },
style: {
marginBottom: 20
},
formItemAttrs: {
noStyle: true
},
rules: [ rules: [
{ {
required: false required: false
@@ -449,7 +505,7 @@ export const ImageCustomSizeConfig: ParamsSchema[] = [
}, },
attrs: { attrs: {
min: 256, min: 256,
max: 3200, max: 1024,
step: 64, step: 64,
inputnumber: false inputnumber: false
}, },
@@ -469,7 +525,7 @@ export const ImageCustomSizeConfig: ParamsSchema[] = [
}, },
attrs: { attrs: {
min: 256, min: 256,
max: 3200, max: 1024,
step: 64, step: 64,
inputnumber: false inputnumber: false
}, },
@@ -481,3 +537,119 @@ export const ImageCustomSizeConfig: ParamsSchema[] = [
] ]
} }
]; ];
export const ChatParamsConfig: ParamsSchema[] = [
{
type: 'Slider',
name: 'temperature',
label: {
text: 'Temperature',
isLocalized: false
},
description: {
text: 'playground.params.temperature.tips',
html: false,
isLocalized: true
},
attrs: {
max: 2,
step: 0.1,
inputnumber: true
},
rules: [
{
required: false
}
]
},
{
type: 'Slider',
name: 'max_tokens',
label: {
text: 'Max Tokens',
isLocalized: false
},
description: {
text: 'playground.params.maxtokens.tips',
html: false,
isLocalized: true
},
attrs: {
max: 1024,
step: 1,
inputnumber: true
},
rules: [
{
required: false
}
]
},
{
type: 'Slider',
name: 'top_p',
label: {
text: 'Top P',
isLocalized: false
},
description: {
text: 'playground.params.topp.tips',
html: false,
isLocalized: true
},
attrs: {
max: 1,
step: 0.1,
inputnumber: true
},
rules: [
{
required: false
}
]
},
{
type: 'InputNumber',
name: 'seed',
label: {
text: 'Seed',
isLocalized: false
},
description: {
text: 'playground.params.seed.tips',
html: false,
isLocalized: true
},
attrs: {
min: 0
},
rules: [
{
required: false
}
]
},
{
type: 'Input',
name: 'stop',
label: {
text: 'Stop Sequence',
isLocalized: false
},
description: {
text: 'playground.params.stop.tips',
html: false,
isLocalized: true
},
attrs: {
normalize(value: string) {
return value || null;
}
},
rules: [
{
required: false
}
]
}
];
src/pages/playground/config/types.ts
+2
View File
@@ -33,6 +33,7 @@ export interface ParamsSchema {
text: string; text: string;
isLocalized?: boolean; isLocalized?: boolean;
}; };
dependencies?: string[];
style?: React.CSSProperties; style?: React.CSSProperties;
options?: Global.BaseOption<string | number | null>[]; options?: Global.BaseOption<string | number | null>[];
value?: string | number | boolean | string[]; value?: string | number | boolean | string[];
@@ -53,6 +54,7 @@ export interface ParamsSchema {
}[]; }[];
placeholder?: React.ReactNode; placeholder?: React.ReactNode;
attrs?: Record<string, any>; attrs?: Record<string, any>;
formItemAttrs?: Record<string, any>;
description?: { description?: {
text: string; text: string;
html?: boolean; html?: boolean;
src/pages/playground/hooks/use-init-meta.ts
+286 -17
View File
@@ -1,5 +1,16 @@
import {
ImageAdvancedParamsConfig,
ImageCountConfig,
ImageCustomSizeConfig,
ImageSizeConfig,
ImageSizeItem,
ImageconstExtraConfig,
imageSizeOptions as imageSizeList
} from '@/pages/playground/config/params-config';
import { useSearchParams } from '@umijs/max';
import _ from 'lodash'; import _ from 'lodash';
import { imageSizeOptions } from '../config/params-config'; import React, { useCallback, useEffect, useRef, useState } from 'react';
import { ParamsSchema } from '../config/types';
const LLM_METAKEYS: Record<string, any> = { const LLM_METAKEYS: Record<string, any> = {
seed: 'seed', seed: 'seed',
@@ -28,8 +39,7 @@ const llmInitialValues = {
max_tokens: 1024 max_tokens: 1024
}; };
const imgInitialValues = { const advancedFieldsDefaultValus = {
n: 1,
seed: null, seed: null,
sample_method: 'euler_a', sample_method: 'euler_a',
cfg_scale: 4.5, cfg_scale: 4.5,
@@ -40,7 +50,20 @@ const imgInitialValues = {
preview: 'preview_faster' preview: 'preview_faster'
}; };
export default function useInitMeta() { const openaiCompatibleFieldsDefaultValus = {
quality: 'standard',
style: null
};
const imgInitialValues = {
n: 1,
size: '512x512',
width: 512,
height: 512
};
// init not image meta
export const useInitLLmMeta = () => {
const extractLLMMeta = (meta: any) => { const extractLLMMeta = (meta: any) => {
const modelMeta = meta || {}; const modelMeta = meta || {};
const modelMetaValue = _.pick(modelMeta, _.keys(LLM_METAKEYS)); const modelMetaValue = _.pick(modelMeta, _.keys(LLM_METAKEYS));
@@ -75,13 +98,62 @@ export default function useInitMeta() {
}; };
}; };
return { extractLLMMeta };
};
interface MessageProps {
modelList: Global.BaseOption<string>[];
loaded?: boolean;
ref?: any;
}
export const useInitImageMeta = (props: MessageProps) => {
const { modelList } = props;
const form = useRef<any>(null);
const [searchParams] = useSearchParams();
const selectModel = searchParams.get('model') || '';
const [modelMeta, setModelMeta] = useState<any>({});
const [isOpenaiCompatible, setIsOpenaiCompatible] = useState<boolean>(false);
const [imageSizeOptions, setImageSizeOptions] = React.useState<
ImageSizeItem[]
>([]);
const [basicParamsConfig, setBasicParamsConfig] = React.useState<
ParamsSchema[]
>([...ImageCountConfig, ...ImageSizeConfig]);
const [initialValues, setInitialValues] = useState<any>({
...imgInitialValues,
...advancedFieldsDefaultValus,
model: selectModel
});
const [paramsConfig, setParamsConfig] = useState<ParamsSchema[]>([
...ImageCountConfig,
...ImageSizeConfig,
...ImageAdvancedParamsConfig
]);
const [parameters, setParams] = useState<any>({
...imgInitialValues,
...advancedFieldsDefaultValus,
model: selectModel
});
const cacheFormData = React.useRef<Record<string, any>>({
...imgInitialValues,
...openaiCompatibleFieldsDefaultValus,
...advancedFieldsDefaultValus
});
const getNewImageSizeOptions = (metaData: any) => { const getNewImageSizeOptions = (metaData: any) => {
const { max_height, max_width } = metaData || {}; const { max_height, max_width } = metaData || {};
if (!max_height || !max_width) { if (!max_height || !max_width) {
return imageSizeOptions; return imageSizeList;
} }
const newImageSizeOptions = imageSizeOptions.filter((item) => { const newImageSizeOptions = imageSizeList.filter((item) => {
return item.width <= max_width && item.height <= max_height; return (
(item.width <= max_width && item.height <= max_height) ||
item.value === 'custom'
);
}); });
if ( if (
!newImageSizeOptions.find( !newImageSizeOptions.find(
@@ -98,20 +170,217 @@ export default function useInitMeta() {
return newImageSizeOptions; return newImageSizeOptions;
}; };
const generateImageParamsConfig = (
currentModel: any,
sizeOptions: ImageSizeItem[]
) => {
if (sizeOptions.length) {
const sizeConfig = ImageSizeConfig.map((item) => {
return {
...item,
options: sizeOptions
};
});
return [...ImageCountConfig, ...sizeConfig];
}
const { max_height, max_width } = currentModel.meta || {};
const customSizeConfig = _.cloneDeep(ImageCustomSizeConfig).map(
(item: any) => {
const max = item.name === 'height' ? max_height : max_width;
return {
...item,
attrs: {
...item.attrs,
max: max || item.attrs.max
}
};
}
);
return [...ImageCountConfig, ...customSizeConfig];
};
const extractIMGMeta = (meta: any) => { const extractIMGMeta = (meta: any) => {
const sizeOptions = getNewImageSizeOptions(meta);
return { return {
form: _.merge({}, imgInitialValues, { form: _.merge(
..._.pick(meta, IMG_METAKEYS), {},
width: meta?.default_width || 512, { ...imgInitialValues, ...advancedFieldsDefaultValus },
height: meta?.default_height || 512 {
}), ..._.pick(meta, IMG_METAKEYS),
size: sizeOptions.length
? `${meta?.default_width || 512}x${meta?.default_height || 512}`
: 'custom',
width: meta?.default_width || 512,
height: meta?.default_height || 512
}
),
meta: meta, meta: meta,
sizeOptions: getNewImageSizeOptions(meta) sizeOptions: sizeOptions
}; };
}; };
return { const updateCacheFormData = (values: Record<string, any>) => {
extractLLMMeta, _.merge(cacheFormData.current, values);
extractIMGMeta
}; };
} const handleToggleParamsStyle = () => {
// update values
let values: any = {};
if (!isOpenaiCompatible) {
values = _.pick(
cacheFormData.current,
_.keys({
...imgInitialValues,
...openaiCompatibleFieldsDefaultValus
})
);
} else {
values = _.pick(
cacheFormData.current,
_.keys({
...imgInitialValues,
...advancedFieldsDefaultValus
})
);
}
// update config
if (values.size === 'custom') {
const config = [
...basicParamsConfig,
...ImageCustomSizeConfig,
...(isOpenaiCompatible
? ImageAdvancedParamsConfig
: ImageconstExtraConfig)
];
setParamsConfig(config);
} else {
const config = [
...basicParamsConfig,
...(isOpenaiCompatible
? ImageAdvancedParamsConfig
: ImageconstExtraConfig)
];
setParamsConfig(config);
}
form.current?.form?.setFieldsValue({
...values,
model: parameters.model
});
setParams({
...values,
model: parameters.model
});
setIsOpenaiCompatible(!isOpenaiCompatible);
updateCacheFormData({
...values,
model: parameters
});
};
const handleOnModelChange = useCallback(
(val: string) => {
if (!val) return;
const model = modelList.find((item) => item.value === val);
const { form: initialData, sizeOptions } = extractIMGMeta(model?.meta);
const newParamsConfig = generateImageParamsConfig(model, sizeOptions);
if (!isOpenaiCompatible) {
setParamsConfig([...newParamsConfig, ...ImageAdvancedParamsConfig]);
} else {
setParamsConfig(newParamsConfig);
}
setBasicParamsConfig(newParamsConfig);
setImageSizeOptions(sizeOptions);
setModelMeta(model?.meta || {});
setInitialValues({
...initialData,
model: val
});
setParams({
...initialData,
model: val
});
updateCacheFormData(initialData);
},
[modelList, isOpenaiCompatible]
);
const handleOnValuesChange = useCallback(
(changeValues: Record<string, any>, allValues: Record<string, any>) => {
// model change will reset all values
if (changeValues.model) {
handleOnModelChange(changeValues.model);
return;
}
if (changeValues.size && changeValues.size === 'custom') {
setParamsConfig([
...basicParamsConfig,
...ImageCustomSizeConfig,
...(!isOpenaiCompatible
? ImageAdvancedParamsConfig
: ImageconstExtraConfig)
]);
setParams({
...allValues,
width: modelMeta.default_width || 512,
height: modelMeta.default_height || 512
});
form.current?.form?.setFieldsValue({
width: modelMeta.default_width || 512,
height: modelMeta.default_height || 512
});
updateCacheFormData(changeValues);
} else if (changeValues.size && parameters.size === 'custom') {
setParamsConfig([
...basicParamsConfig,
...(!isOpenaiCompatible
? ImageAdvancedParamsConfig
: ImageconstExtraConfig)
]);
setParams(allValues);
updateCacheFormData(changeValues);
}
},
[
handleOnModelChange,
parameters.size,
basicParamsConfig,
isOpenaiCompatible
]
);
useEffect(() => {
if (!parameters.model && modelList.length) {
const model = modelList[0]?.value;
handleOnModelChange(model);
}
}, [modelList, parameters.model, handleOnModelChange]);
return {
extractIMGMeta,
generateImageParamsConfig,
setImageSizeOptions,
setBasicParamsConfig,
updateCacheFormData,
handleOnValuesChange,
handleToggleParamsStyle,
setParams,
form,
paramsConfig,
initialValues,
parameters,
isOpenaiCompatible,
cacheFormData,
basicParamsConfig,
imageSizeOptions,
openaiCompatibleFieldsDefaultValus,
advancedFieldsDefaultValus,
ImageAdvancedParamsConfig,
imgInitialValues,
ImageCountConfig,
ImageSizeConfig,
ImageCustomSizeConfig,
ImageconstExtraConfig
};
};
src/pages/playground/hooks/use-text-image.ts
+33 -14
View File
@@ -1,3 +1,4 @@
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import { CREAT_IMAGE_API } from '@/pages/playground/apis'; import { CREAT_IMAGE_API } from '@/pages/playground/apis';
import { extractErrorMessage, promptList } from '@/pages/playground/config'; import { extractErrorMessage, promptList } from '@/pages/playground/config';
import { generateRandomNumber } from '@/utils'; import { generateRandomNumber } from '@/utils';
@@ -6,23 +7,36 @@ import {
readLargeStreamData as readStreamData readLargeStreamData as readStreamData
} from '@/utils/fetch-chunk-data'; } from '@/utils/fetch-chunk-data';
import _ from 'lodash'; import _ from 'lodash';
import { useCallback, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
const ODD_STRING = 'AAAABJRU5ErkJgg==='; const ODD_STRING = 'AAAABJRU5ErkJgg===';
export default function useTextImage() { export default function useTextImage({ scroller, paramsRef }: any) {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [tokenResult, setTokenResult] = useState<any>(null); const [tokenResult, setTokenResult] = useState<any>(null);
const [imageList, setImageList] = useState<any[]>([]); const [imageList, setImageList] = useState<any[]>([]);
const [currentPrompt, setCurrentPrompt] = useState(''); const [currentPrompt, setCurrentPrompt] = useState('');
const messageId = useRef<number>(0); const messageId = useRef<number>(0);
const requestToken = useRef<any>(null); const requestToken = useRef<any>(null);
const { initialize } = useOverlayScroller();
const { initialize: innitializeParams } = useOverlayScroller();
useEffect(() => {
if (scroller.current) {
initialize(scroller.current);
}
}, [scroller.current, initialize]);
useEffect(() => {
if (paramsRef.current) {
innitializeParams(paramsRef.current);
}
}, [paramsRef.current, innitializeParams]);
const removeBase64Suffix = (str: string, suffix: string) => { const removeBase64Suffix = (str: string, suffix: string) => {
return str.endsWith(suffix) ? str.slice(0, -suffix.length) : str; return str.endsWith(suffix) ? str.slice(0, -suffix.length) : str;
}; };
const setImageSize = useCallback((parameters: any) => { const setImageSize = (parameters: any) => {
let size: Record<string, string | number> = { let size: Record<string, string | number> = {
span: 12 span: 12
}; };
@@ -39,7 +53,7 @@ export default function useTextImage() {
size.span = 12; size.span = 12;
} }
return size; return size;
}, []); };
const setMessageId = () => { const setMessageId = () => {
messageId.current = messageId.current + 1; messageId.current = messageId.current + 1;
@@ -50,21 +64,17 @@ export default function useTextImage() {
return Math.floor(Math.random() * (max - min + 1) + min); return Math.floor(Math.random() * (max - min + 1) + min);
}; };
const submitMessage = async (params: { const submitMessage = async (parameters: any) => {
current?: { content: string };
system?: { role: string; content: string };
parameters: any;
}) => {
const { current, parameters } = params;
try { try {
if (!parameters.model) return; if (!parameters.model) return;
const size: any = setImageSize(parameters); const size: any = setImageSize(parameters);
setLoading(true); setLoading(true);
setMessageId(); setMessageId();
setTokenResult(null); setTokenResult(null);
setCurrentPrompt(current?.content || '');
const imgSize = [parameters.width, parameters.height]; const imgSize = _.split(parameters.size, 'x').map((item: string) =>
_.toNumber(item)
);
// preview // preview
let stream_options: Record<string, any> = { let stream_options: Record<string, any> = {
@@ -115,7 +125,7 @@ export default function useTextImage() {
stream_options: { stream_options: {
...stream_options ...stream_options
}, },
prompt: current?.content prompt: currentPrompt
}; };
const result: any = await fetchChunkedData({ const result: any = await fetchChunkedData({
@@ -176,9 +186,9 @@ export default function useTextImage() {
}; };
const handleClear = () => { const handleClear = () => {
setMessageId();
setImageList([]); setImageList([]);
setTokenResult(null); setTokenResult(null);
setCurrentPrompt('');
}; };
const handleStopConversation = () => { const handleStopConversation = () => {
@@ -186,11 +196,20 @@ export default function useTextImage() {
setLoading(false); setLoading(false);
}; };
useEffect(() => {
return () => {
requestToken.current?.abort?.();
};
}, []);
return { return {
loading, loading,
tokenResult, tokenResult,
imageList, imageList,
promptList, promptList,
currentPrompt,
setTokenResult,
setCurrentPrompt,
handleStopConversation, handleStopConversation,
generateNumber, generateNumber,
handleClear, handleClear,