From 435161854c65599b4afb2546183bdd3b467ee2f4 Mon Sep 17 00:00:00 2001 From: jialin Date: Fri, 29 Nov 2024 13:40:40 +0800 Subject: [PATCH] fix: model logs loading --- src/components/echarts/scatter.tsx | 4 +- .../logs-viewer/virtual-log-list.tsx | 8 ++-- src/components/seal-form/config/components.ts | 6 ++- src/components/seal-form/field-component.tsx | 39 ++++++++++++++----- src/locales/en-US/playground.ts | 1 + src/locales/zh-CN/playground.ts | 3 +- .../llmodels/components/view-logs-modal.tsx | 4 +- .../playground/components/ground-images.tsx | 31 ++++++++++++--- src/pages/playground/config/params-config.ts | 20 ++++++++++ src/pages/playground/config/types.ts | 4 ++ src/pages/playground/style/custom-label.less | 2 +- src/pages/playground/style/ground-left.less | 2 +- src/utils/index.ts | 6 +++ 13 files changed, 104 insertions(+), 26 deletions(-) diff --git a/src/components/echarts/scatter.tsx b/src/components/echarts/scatter.tsx index 78b88047..2801f04b 100644 --- a/src/components/echarts/scatter.tsx +++ b/src/components/echarts/scatter.tsx @@ -9,8 +9,8 @@ const options: any = { animation: false, grid: { ...grid, - right: -1, - top: -1, + right: 10, + top: 10, bottom: 2, left: 2, containLabel: true, diff --git a/src/components/logs-viewer/virtual-log-list.tsx b/src/components/logs-viewer/virtual-log-list.tsx index 32499110..adb386bb 100644 --- a/src/components/logs-viewer/virtual-log-list.tsx +++ b/src/components/logs-viewer/virtual-log-list.tsx @@ -86,7 +86,9 @@ const LogsViewer: React.FC = forwardRef((props, ref) => { const getLastPage = useCallback( (data: string) => { const list = _.split(data.trim(), '\n'); - console.log('list.length', list.length); + if (!enableScorllLoad) { + return list.join('\n'); + } if (list.length <= pageSize) { setTotalPage(1); @@ -101,7 +103,7 @@ const LogsViewer: React.FC = forwardRef((props, ref) => { debounceLoading(); return lastPage; }, - [pageSize, setTotalPage, setPage, debounceLoading] + [pageSize, setTotalPage, setPage, debounceLoading, enableScorllLoad] ); const getPrePage = useCallback(() => { @@ -179,7 +181,7 @@ const LogsViewer: React.FC = forwardRef((props, ref) => { setIsLoadend(true); } }, - [loading, isLoadend, logs.length, pageSize] + [loading, isLoadend, logs.length, pageSize, enableScorllLoad] ); const debouncedScroll = useCallback( diff --git a/src/components/seal-form/config/components.ts b/src/components/seal-form/config/components.ts index cee9eb70..2e4567da 100644 --- a/src/components/seal-form/config/components.ts +++ b/src/components/seal-form/config/components.ts @@ -1,4 +1,4 @@ -import { Slider } from 'antd'; +import { Checkbox, Slider } from 'antd'; import SealInput from '../seal-input'; import SealSelect from '../seal-select'; @@ -8,12 +8,14 @@ const components: { Slider: React.ComponentType; TextArea: typeof SealInput.TextArea; Input: typeof SealInput.Input; + Checkbox: typeof Checkbox; } = { InputNumber: SealInput.Number, Select: SealSelect, Slider: Slider as React.ComponentType, TextArea: SealInput.TextArea, - Input: SealInput.Input + Input: SealInput.Input, + Checkbox: Checkbox }; export default components; diff --git a/src/components/seal-form/field-component.tsx b/src/components/seal-form/field-component.tsx index bd316fb0..9892a3a9 100644 --- a/src/components/seal-form/field-component.tsx +++ b/src/components/seal-form/field-component.tsx @@ -1,19 +1,38 @@ import { ParamsSchema } from '@/pages/playground/config/types'; import { useIntl } from '@umijs/max'; -import React from 'react'; +import React, { useCallback, useMemo } from 'react'; import componentsMap from './config/components'; const FieldComponent: React.FC = (props) => { const intl = useIntl(); - const { type, label, attrs, style, ...rest } = props; - return React.createElement(componentsMap[type], { - ...rest, - ...attrs, - style: { ...style, width: '100%' }, - label: label.isLocalized - ? intl.formatMessage({ id: label.text }) - : label.text - }); + const { type, label, attrs, style, value, ...rest } = props; + const renderChild = useCallback( + (type: string) => { + switch (type) { + case 'Checkbox': + return {intl.formatMessage({ id: label.text })}; + default: + 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); diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts index 726f85e1..3cd91b8c 100644 --- a/src/locales/en-US/playground.ts +++ b/src/locales/en-US/playground.ts @@ -98,6 +98,7 @@ export default { 'playground.image.params.schedule': 'Schedule', 'playground.image.params.samplerSteps': 'Sampler Steps', 'playground.image.params.seed': 'Seed', + 'playground.image.params.randomseed': 'Random Seed', 'playground.image.params.negativePrompt': 'Negative Prompt', 'playground.image.params.cfgScale': 'Scale Factor', 'playground.image.params.custom': 'Advanced', diff --git a/src/locales/zh-CN/playground.ts b/src/locales/zh-CN/playground.ts index e6dcd7a4..e8f7ab8e 100644 --- a/src/locales/zh-CN/playground.ts +++ b/src/locales/zh-CN/playground.ts @@ -94,7 +94,8 @@ export default { 'playground.image.params.sampler': '采样方法', 'playground.image.params.schedule': '调度', 'playground.image.params.samplerSteps': '迭代步数', - 'playground.image.params.seed': '随机种子', + 'playground.image.params.seed': '种子', + 'playground.image.params.randomseed': '随机种子', 'playground.image.params.negativePrompt': '负向提示', 'playground.image.params.cfgScale': '提示词引导系数', 'playground.image.params.custom': '高级', diff --git a/src/pages/llmodels/components/view-logs-modal.tsx b/src/pages/llmodels/components/view-logs-modal.tsx index 3309668d..b760d3bf 100644 --- a/src/pages/llmodels/components/view-logs-modal.tsx +++ b/src/pages/llmodels/components/view-logs-modal.tsx @@ -36,7 +36,9 @@ const ViewCodeModal: React.FC = (props) => { const updateHandler = (list: any) => { const data = list?.find((item: any) => item.data?.id === props.id); if (data) { - setEnableScorllLoad(!InstanceRealLogStatus.includes(data?.data?.state)); + setEnableScorllLoad( + () => !InstanceRealLogStatus.includes(data?.data?.state) + ); } }; diff --git a/src/pages/playground/components/ground-images.tsx b/src/pages/playground/components/ground-images.tsx index fc2f74eb..0cae3ec5 100644 --- a/src/pages/playground/components/ground-images.tsx +++ b/src/pages/playground/components/ground-images.tsx @@ -5,6 +5,7 @@ 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 { generateRandomNumber } from '@/utils'; import { fetchChunkedData, readLargeStreamData as readStreamData @@ -199,7 +200,7 @@ const GroundImages: React.FC = forwardRef((props, ref) => { }; } return { - ..._.omit(parameters, ['width', 'height']) + ..._.omit(parameters, ['width', 'height', 'random_seed']) }; }, [parameters]); @@ -241,11 +242,17 @@ const GroundImages: React.FC = forwardRef((props, ref) => { requestToken.current = new AbortController(); const params = { + ..._.omitBy(finalParameters, (value: string) => !value), + seed: parameters.random_seed ? generateRandomNumber() : parameters.seed, stream: true, stream_options: {}, - prompt: current?.content || currentPrompt || '', - ..._.omitBy(finalParameters, (value: string) => !value) + prompt: current?.content || currentPrompt || '' }; + setParams({ + ...parameters, + seed: params.seed + }); + form.current?.form?.setFieldValue('seed', params.seed); const result: any = await fetchChunkedData({ data: params, @@ -380,18 +387,32 @@ const GroundImages: React.FC = forwardRef((props, ref) => { }); }, [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(() => { if (isOpenaiCompatible) { return []; } + const formValues = form.current?.form?.getFieldsValue(); return ImageAdvancedParamsConfig.map((item: ParamsSchema) => { return ( - + ); }); - }, [ImageAdvancedParamsConfig, isOpenaiCompatible, intl]); + }, [ImageAdvancedParamsConfig, isOpenaiCompatible, intl, form.current]); const renderCustomSize = useMemo(() => { if (size === 'custom') { diff --git a/src/pages/playground/config/params-config.ts b/src/pages/playground/config/params-config.ts index a20fc4c2..3a6d69c5 100644 --- a/src/pages/playground/config/params-config.ts +++ b/src/pages/playground/config/params-config.ts @@ -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', name: 'seed', @@ -329,6 +342,13 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [ text: 'playground.image.params.seed', isLocalized: true }, + attrs: { + min: 0 + }, + disabledConfig: { + depends: ['random_seed'], + when: (values: Record): boolean => values?.random_seed + }, rules: [ { required: false diff --git a/src/pages/playground/config/types.ts b/src/pages/playground/config/types.ts index 31ba9956..62ae702d 100644 --- a/src/pages/playground/config/types.ts +++ b/src/pages/playground/config/types.ts @@ -38,6 +38,10 @@ export interface ParamsSchema { max?: number; step?: number; disabled?: boolean; + disabledConfig?: { + depends: string[]; + when: (values: Record) => boolean; + }; defaultValue?: string | number | boolean; rules: { required: boolean; message?: string }[]; placeholder?: string; diff --git a/src/pages/playground/style/custom-label.less b/src/pages/playground/style/custom-label.less index 853c4d2d..4e33bf22 100644 --- a/src/pages/playground/style/custom-label.less +++ b/src/pages/playground/style/custom-label.less @@ -5,7 +5,7 @@ width: 100%; :global(.label-val) { - position: absolute; + position: absolute !important; top: -14px; right: -14px; width: 80px; diff --git a/src/pages/playground/style/ground-left.less b/src/pages/playground/style/ground-left.less index 76b222ee..2ed402f8 100644 --- a/src/pages/playground/style/ground-left.less +++ b/src/pages/playground/style/ground-left.less @@ -86,7 +86,7 @@ height: fit-content; top: -10px; font-size: var(--font-size-middle); - left: calc(50% + 19px); + left: calc(50% + 14px); transform: translateX(-50%); background-color: transparent; } diff --git a/src/utils/index.ts b/src/utils/index.ts index 43e03824..146fd517 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -133,3 +133,9 @@ const htmlSpecialTags = /^(.|\n|\r)*<\/html>$/i; export const isHTMLDocumentString = (str: string) => { 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); +};