fix: model logs loading

This commit is contained in:
jialin
2024-11-29 13:41:28 +08:00
parent 890287ce72
commit 435161854c
13 changed files with 104 additions and 26 deletions
+2 -2
View File
@@ -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;
+29 -10
View File
@@ -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);
+1
View File
@@ -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',
+2 -1
View File
@@ -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
+4
View File
@@ -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;
+1 -1
View File
@@ -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;
+1 -1
View File
@@ -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;
} }
+6
View File
@@ -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);
};