fix: model logs loading
This commit is contained in:
@@ -9,8 +9,8 @@ const options: any = {
|
|||||||
animation: false,
|
animation: false,
|
||||||
grid: {
|
grid: {
|
||||||
...grid,
|
...grid,
|
||||||
right: -1,
|
right: 10,
|
||||||
top: -1,
|
top: 10,
|
||||||
bottom: 2,
|
bottom: 2,
|
||||||
left: 2,
|
left: 2,
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
|
|||||||
@@ -86,7 +86,9 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
|
|||||||
const getLastPage = useCallback(
|
const getLastPage = useCallback(
|
||||||
(data: string) => {
|
(data: string) => {
|
||||||
const list = _.split(data.trim(), '\n');
|
const list = _.split(data.trim(), '\n');
|
||||||
console.log('list.length', list.length);
|
if (!enableScorllLoad) {
|
||||||
|
return list.join('\n');
|
||||||
|
}
|
||||||
|
|
||||||
if (list.length <= pageSize) {
|
if (list.length <= pageSize) {
|
||||||
setTotalPage(1);
|
setTotalPage(1);
|
||||||
@@ -101,7 +103,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
|
|||||||
debounceLoading();
|
debounceLoading();
|
||||||
return lastPage;
|
return lastPage;
|
||||||
},
|
},
|
||||||
[pageSize, setTotalPage, setPage, debounceLoading]
|
[pageSize, setTotalPage, setPage, debounceLoading, enableScorllLoad]
|
||||||
);
|
);
|
||||||
|
|
||||||
const getPrePage = useCallback(() => {
|
const getPrePage = useCallback(() => {
|
||||||
@@ -179,7 +181,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
|
|||||||
setIsLoadend(true);
|
setIsLoadend(true);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[loading, isLoadend, logs.length, pageSize]
|
[loading, isLoadend, logs.length, pageSize, enableScorllLoad]
|
||||||
);
|
);
|
||||||
|
|
||||||
const debouncedScroll = useCallback(
|
const debouncedScroll = useCallback(
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { Slider } from 'antd';
|
import { Checkbox, Slider } from 'antd';
|
||||||
import SealInput from '../seal-input';
|
import SealInput from '../seal-input';
|
||||||
import SealSelect from '../seal-select';
|
import SealSelect from '../seal-select';
|
||||||
|
|
||||||
@@ -8,12 +8,14 @@ const components: {
|
|||||||
Slider: React.ComponentType<typeof Slider>;
|
Slider: React.ComponentType<typeof Slider>;
|
||||||
TextArea: typeof SealInput.TextArea;
|
TextArea: typeof SealInput.TextArea;
|
||||||
Input: typeof SealInput.Input;
|
Input: typeof SealInput.Input;
|
||||||
|
Checkbox: typeof Checkbox;
|
||||||
} = {
|
} = {
|
||||||
InputNumber: SealInput.Number,
|
InputNumber: SealInput.Number,
|
||||||
Select: SealSelect,
|
Select: SealSelect,
|
||||||
Slider: Slider as React.ComponentType<typeof Slider>,
|
Slider: Slider as React.ComponentType<typeof Slider>,
|
||||||
TextArea: SealInput.TextArea,
|
TextArea: SealInput.TextArea,
|
||||||
Input: SealInput.Input
|
Input: SealInput.Input,
|
||||||
|
Checkbox: Checkbox
|
||||||
};
|
};
|
||||||
|
|
||||||
export default components;
|
export default components;
|
||||||
|
|||||||
@@ -1,19 +1,38 @@
|
|||||||
import { ParamsSchema } from '@/pages/playground/config/types';
|
import { ParamsSchema } from '@/pages/playground/config/types';
|
||||||
import { useIntl } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
import React from 'react';
|
import React, { useCallback, useMemo } from 'react';
|
||||||
import componentsMap from './config/components';
|
import componentsMap from './config/components';
|
||||||
|
|
||||||
const FieldComponent: React.FC<ParamsSchema> = (props) => {
|
const FieldComponent: React.FC<ParamsSchema> = (props) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const { type, label, attrs, style, ...rest } = props;
|
const { type, label, attrs, style, value, ...rest } = props;
|
||||||
return React.createElement(componentsMap[type], {
|
const renderChild = useCallback(
|
||||||
...rest,
|
(type: string) => {
|
||||||
...attrs,
|
switch (type) {
|
||||||
style: { ...style, width: '100%' },
|
case 'Checkbox':
|
||||||
label: label.isLocalized
|
return <span>{intl.formatMessage({ id: label.text })}</span>;
|
||||||
? intl.formatMessage({ id: label.text })
|
default:
|
||||||
: label.text
|
return null;
|
||||||
});
|
}
|
||||||
|
},
|
||||||
|
[intl, type]
|
||||||
|
);
|
||||||
|
const checkboxAttrs = useMemo(() => {
|
||||||
|
return type === 'Checkbox' ? { checked: value } : { value: value };
|
||||||
|
}, [type, value]);
|
||||||
|
return React.createElement(
|
||||||
|
componentsMap[type],
|
||||||
|
{
|
||||||
|
...rest,
|
||||||
|
...attrs,
|
||||||
|
...checkboxAttrs,
|
||||||
|
style: { ...style, width: '100%' },
|
||||||
|
label: label.isLocalized
|
||||||
|
? intl.formatMessage({ id: label.text })
|
||||||
|
: label.text
|
||||||
|
},
|
||||||
|
renderChild(type)
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default React.memo(FieldComponent);
|
export default React.memo(FieldComponent);
|
||||||
|
|||||||
@@ -98,6 +98,7 @@ export default {
|
|||||||
'playground.image.params.schedule': 'Schedule',
|
'playground.image.params.schedule': 'Schedule',
|
||||||
'playground.image.params.samplerSteps': 'Sampler Steps',
|
'playground.image.params.samplerSteps': 'Sampler Steps',
|
||||||
'playground.image.params.seed': 'Seed',
|
'playground.image.params.seed': 'Seed',
|
||||||
|
'playground.image.params.randomseed': 'Random Seed',
|
||||||
'playground.image.params.negativePrompt': 'Negative Prompt',
|
'playground.image.params.negativePrompt': 'Negative Prompt',
|
||||||
'playground.image.params.cfgScale': 'Scale Factor',
|
'playground.image.params.cfgScale': 'Scale Factor',
|
||||||
'playground.image.params.custom': 'Advanced',
|
'playground.image.params.custom': 'Advanced',
|
||||||
|
|||||||
@@ -94,7 +94,8 @@ export default {
|
|||||||
'playground.image.params.sampler': '采样方法',
|
'playground.image.params.sampler': '采样方法',
|
||||||
'playground.image.params.schedule': '调度',
|
'playground.image.params.schedule': '调度',
|
||||||
'playground.image.params.samplerSteps': '迭代步数',
|
'playground.image.params.samplerSteps': '迭代步数',
|
||||||
'playground.image.params.seed': '随机种子',
|
'playground.image.params.seed': '种子',
|
||||||
|
'playground.image.params.randomseed': '随机种子',
|
||||||
'playground.image.params.negativePrompt': '负向提示',
|
'playground.image.params.negativePrompt': '负向提示',
|
||||||
'playground.image.params.cfgScale': '提示词引导系数',
|
'playground.image.params.cfgScale': '提示词引导系数',
|
||||||
'playground.image.params.custom': '高级',
|
'playground.image.params.custom': '高级',
|
||||||
|
|||||||
@@ -36,7 +36,9 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
|
|||||||
const updateHandler = (list: any) => {
|
const updateHandler = (list: any) => {
|
||||||
const data = list?.find((item: any) => item.data?.id === props.id);
|
const data = list?.find((item: any) => item.data?.id === props.id);
|
||||||
if (data) {
|
if (data) {
|
||||||
setEnableScorllLoad(!InstanceRealLogStatus.includes(data?.data?.state));
|
setEnableScorllLoad(
|
||||||
|
() => !InstanceRealLogStatus.includes(data?.data?.state)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ 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 useOverlayScroller from '@/hooks/use-overlay-scroller';
|
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 {
|
import {
|
||||||
fetchChunkedData,
|
fetchChunkedData,
|
||||||
readLargeStreamData as readStreamData
|
readLargeStreamData as readStreamData
|
||||||
@@ -199,7 +200,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
..._.omit(parameters, ['width', 'height'])
|
..._.omit(parameters, ['width', 'height', 'random_seed'])
|
||||||
};
|
};
|
||||||
}, [parameters]);
|
}, [parameters]);
|
||||||
|
|
||||||
@@ -241,11 +242,17 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
|
|||||||
requestToken.current = new AbortController();
|
requestToken.current = new AbortController();
|
||||||
|
|
||||||
const params = {
|
const params = {
|
||||||
|
..._.omitBy(finalParameters, (value: string) => !value),
|
||||||
|
seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
|
||||||
stream: true,
|
stream: true,
|
||||||
stream_options: {},
|
stream_options: {},
|
||||||
prompt: current?.content || currentPrompt || '',
|
prompt: current?.content || currentPrompt || ''
|
||||||
..._.omitBy(finalParameters, (value: string) => !value)
|
|
||||||
};
|
};
|
||||||
|
setParams({
|
||||||
|
...parameters,
|
||||||
|
seed: params.seed
|
||||||
|
});
|
||||||
|
form.current?.form?.setFieldValue('seed', params.seed);
|
||||||
|
|
||||||
const result: any = await fetchChunkedData({
|
const result: any = await fetchChunkedData({
|
||||||
data: params,
|
data: params,
|
||||||
@@ -380,18 +387,32 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
|
|||||||
});
|
});
|
||||||
}, [ImageconstExtraConfig, isOpenaiCompatible, intl]);
|
}, [ImageconstExtraConfig, isOpenaiCompatible, intl]);
|
||||||
|
|
||||||
|
const handleFieldChange = (e: any) => {
|
||||||
|
if (e.target.id.indexOf('random_seed')) {
|
||||||
|
form.current?.form?.setFieldValue('random_seed', e.target.checked);
|
||||||
|
}
|
||||||
|
};
|
||||||
const renderAdvanced = useMemo(() => {
|
const renderAdvanced = useMemo(() => {
|
||||||
if (isOpenaiCompatible) {
|
if (isOpenaiCompatible) {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
const formValues = form.current?.form?.getFieldsValue();
|
||||||
return ImageAdvancedParamsConfig.map((item: ParamsSchema) => {
|
return ImageAdvancedParamsConfig.map((item: ParamsSchema) => {
|
||||||
return (
|
return (
|
||||||
<Form.Item name={item.name} rules={item.rules} key={item.name}>
|
<Form.Item name={item.name} rules={item.rules} key={item.name}>
|
||||||
<FieldComponent {..._.omit(item, ['name', 'rules'])}></FieldComponent>
|
<FieldComponent
|
||||||
|
disabled={
|
||||||
|
item.disabledConfig
|
||||||
|
? item.disabledConfig?.when?.(formValues)
|
||||||
|
: item.disabled
|
||||||
|
}
|
||||||
|
onChange={item.name === 'random_seed' ? handleFieldChange : null}
|
||||||
|
{..._.omit(item, ['name', 'rules', 'disabledConfig'])}
|
||||||
|
></FieldComponent>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
}, [ImageAdvancedParamsConfig, isOpenaiCompatible, intl]);
|
}, [ImageAdvancedParamsConfig, isOpenaiCompatible, intl, form.current]);
|
||||||
|
|
||||||
const renderCustomSize = useMemo(() => {
|
const renderCustomSize = useMemo(() => {
|
||||||
if (size === 'custom') {
|
if (size === 'custom') {
|
||||||
|
|||||||
@@ -322,6 +322,19 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: 'Checkbox',
|
||||||
|
name: 'random_seed',
|
||||||
|
label: {
|
||||||
|
text: 'playground.image.params.randomseed',
|
||||||
|
isLocalized: true
|
||||||
|
},
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'InputNumber',
|
type: 'InputNumber',
|
||||||
name: 'seed',
|
name: 'seed',
|
||||||
@@ -329,6 +342,13 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
|
|||||||
text: 'playground.image.params.seed',
|
text: 'playground.image.params.seed',
|
||||||
isLocalized: true
|
isLocalized: true
|
||||||
},
|
},
|
||||||
|
attrs: {
|
||||||
|
min: 0
|
||||||
|
},
|
||||||
|
disabledConfig: {
|
||||||
|
depends: ['random_seed'],
|
||||||
|
when: (values: Record<string, any>): boolean => values?.random_seed
|
||||||
|
},
|
||||||
rules: [
|
rules: [
|
||||||
{
|
{
|
||||||
required: false
|
required: false
|
||||||
|
|||||||
@@ -38,6 +38,10 @@ export interface ParamsSchema {
|
|||||||
max?: number;
|
max?: number;
|
||||||
step?: number;
|
step?: number;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
|
disabledConfig?: {
|
||||||
|
depends: string[];
|
||||||
|
when: (values: Record<string, any>) => boolean;
|
||||||
|
};
|
||||||
defaultValue?: string | number | boolean;
|
defaultValue?: string | number | boolean;
|
||||||
rules: { required: boolean; message?: string }[];
|
rules: { required: boolean; message?: string }[];
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
:global(.label-val) {
|
:global(.label-val) {
|
||||||
position: absolute;
|
position: absolute !important;
|
||||||
top: -14px;
|
top: -14px;
|
||||||
right: -14px;
|
right: -14px;
|
||||||
width: 80px;
|
width: 80px;
|
||||||
|
|||||||
@@ -86,7 +86,7 @@
|
|||||||
height: fit-content;
|
height: fit-content;
|
||||||
top: -10px;
|
top: -10px;
|
||||||
font-size: var(--font-size-middle);
|
font-size: var(--font-size-middle);
|
||||||
left: calc(50% + 19px);
|
left: calc(50% + 14px);
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -133,3 +133,9 @@ const htmlSpecialTags = /^<html>(.|\n|\r)*<\/html>$/i;
|
|||||||
export const isHTMLDocumentString = (str: string) => {
|
export const isHTMLDocumentString = (str: string) => {
|
||||||
return htmlSpecialTags.test(str?.trim());
|
return htmlSpecialTags.test(str?.trim());
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// generate a random number between 0 and 64 bit
|
||||||
|
|
||||||
|
export const generateRandomNumber = () => {
|
||||||
|
return Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
|
||||||
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user