diff --git a/src/components/logs-viewer/logs-list.tsx b/src/components/logs-viewer/logs-list.tsx index 1d419a42..1960796f 100644 --- a/src/components/logs-viewer/logs-list.tsx +++ b/src/components/logs-viewer/logs-list.tsx @@ -54,7 +54,8 @@ const LogsList: React.FC = forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ scrollToBottom, - scrollToTop + scrollToTop, + scroller: scroller.current })); const handleOnWheel = useCallback( diff --git a/src/components/logs-viewer/parse-worker.ts b/src/components/logs-viewer/parse-worker.ts index 365d84d2..dd8492c4 100644 --- a/src/components/logs-viewer/parse-worker.ts +++ b/src/components/logs-viewer/parse-worker.ts @@ -31,9 +31,15 @@ class AnsiParser { } private handleText(text: string) { - for (const char of text) { + for (let i = 0; i < text.length; i++) { + let char = text[i]; if (char === '\r') { - this.cursorCol = 0; // move to the beginning of the line + let nextChar = text[i + 1]; + if (nextChar === '\n') { + continue; // windows new line: \r\n + } else { + this.cursorCol = 0; // move to the beginning of the line + } } else if (char === '\n') { this.rawDataRows++; this.cursorRow++; diff --git a/src/components/logs-viewer/virtual-log-list.tsx b/src/components/logs-viewer/virtual-log-list.tsx index 385670af..9b826017 100644 --- a/src/components/logs-viewer/virtual-log-list.tsx +++ b/src/components/logs-viewer/virtual-log-list.tsx @@ -11,7 +11,6 @@ import React, { useRef, useState } from 'react'; -import { replaceLineRegex } from './config'; import LogsList from './logs-list'; import LogsPagination from './logs-pagination'; import './styles/index.less'; @@ -33,7 +32,6 @@ const LogsViewer: React.FC = forwardRef((props, ref) => { useLogsPagination(); const { setChunkFetch } = useSetChunkFetch(); const chunkRequedtRef = useRef(null); - const cacheDataRef = useRef(''); const [logs, setLogs] = useState([]); const logParseWorker = useRef(null); const tail = useRef(pageSize - 1); @@ -62,7 +60,10 @@ const LogsViewer: React.FC = forwardRef((props, ref) => { const debounceLoading = _.debounce(() => { setLoading(false); isLoadingMoreRef.current = false; - }, 200); + if (logListRef.current?.scroller) { + logListRef.current.scroller.style['pointer-events'] = 'auto'; + } + }, 1000); const getCurrent = useCallback(() => { if (pageRef.current < 1) { @@ -111,11 +112,12 @@ const LogsViewer: React.FC = forwardRef((props, ref) => { }; }, [getCurrent]); - const updateContent = (inputStr: string) => { - const data = inputStr.replace(replaceLineRegex, '\n'); - cacheDataRef.current = data; + const updateContent = (data: string) => { if (isLoadingMoreRef.current) { setLoading(true); + if (logListRef.current?.scroller) { + logListRef.current.scroller.style['pointer-events'] = 'none'; + } } logParseWorker.current.postMessage({ inputStr: data @@ -238,24 +240,34 @@ const LogsViewer: React.FC = forwardRef((props, ref) => { if (pageRef.current < 1) { pageRef.current = 1; } + + const oldTotalPage = totalPageRef.current; + + totalPageRef.current = Math.ceil(result.length / pageSize); + + if (isLoadingMoreRef.current) { + pageRef.current = totalPageRef.current; + } + + if ( + pageRef.current === oldTotalPage && + scrollPosRef.current.pos === 'bottom' + ) { + scrollPosRef.current = { + pos: 'bottom', + page: pageRef.current + }; + pageRef.current = totalPageRef.current; + setScrollPos(['bottom', pageRef.current]); + } + const start = (pageRef.current - 1) * pageSize; const end = pageRef.current * pageSize; const currentLogs = result.slice(start, end); - totalPageRef.current = Math.ceil(result.length / pageSize); - console.log( - 'lineCountRef.current+++++++++++', - lineCountRef.current, - result.length - ); setLogs(result); setTotalPage(totalPageRef.current); - if (isLoadingMoreRef.current) { - setPage(totalPageRef.current); - pageRef.current = totalPageRef.current; - } else { - setPage(pageRef.current); - } + setPage(pageRef.current); setCurrentData(currentLogs); debounceLoading(); }; diff --git a/src/pages/playground/components/ground-images.tsx b/src/pages/playground/components/ground-images.tsx index c73fab78..51f6d407 100644 --- a/src/pages/playground/components/ground-images.tsx +++ b/src/pages/playground/components/ground-images.tsx @@ -135,13 +135,9 @@ const GroundImages: React.FC = forwardRef((props, ref) => { }; }); - const paramsConfig = useMemo(() => { - const { max_height, max_width } = modelMeta || {}; - if ( - !max_height || - !max_width || - (max_height === 1024 && max_width === 1024) - ) { + const getNewImageSizeOptions = useCallback((metaData: any) => { + const { max_height, max_width } = metaData || {}; + if (!max_height || !max_width) { return ImageParamsConfig; } const newImageSizeOptions = imageSizeOptions.filter((item) => { @@ -159,7 +155,12 @@ const GroundImages: React.FC = forwardRef((props, ref) => { value: `${max_width}x${max_height}` }); } - return ImageParamsConfig.map((item) => { + return newImageSizeOptions; + }, []); + + const paramsConfig = useMemo(() => { + const newImageSizeOptions = getNewImageSizeOptions(modelMeta); + let result = ImageParamsConfig.map((item) => { if (item.name === 'size') { return { ...item, @@ -168,7 +169,11 @@ const GroundImages: React.FC = forwardRef((props, ref) => { } return item; }); - }, [modelMeta]); + if (!newImageSizeOptions.length) { + result = result.filter((item) => item.name !== 'size'); + } + return result; + }, [modelMeta, getNewImageSizeOptions]); const generateNumber = (min: number, max: number) => { return Math.floor(Math.random() * (max - min + 1) + min); @@ -522,13 +527,19 @@ const GroundImages: React.FC = forwardRef((props, ref) => { ? intl.formatMessage({ id: item.description.text }) : item.description?.text } - {...item.attrs} {..._.omit(item, [ 'name', 'description', 'rules', - 'disabledConfig' + 'disabledConfig', + 'attrs' ])} + {...item.attrs} + defaultValue={ + item.name === 'height' + ? modelMeta.default_height + : modelMeta.default_width + } max={ item.name === 'height' ? modelMeta.max_height || item.attrs?.max @@ -549,17 +560,33 @@ const GroundImages: React.FC = forwardRef((props, ref) => { 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) => { - return _.merge({}, pre, _.pick(model?.meta, METAKEYS, {})); + const obj = _.merge({}, pre, _.pick(model?.meta, METAKEYS, {})); + + return { + ...obj, + size: defaultSize, + width: w, + height: h + }; }); form.current?.form?.setFieldsValue({ - ..._.pick(model?.meta, METAKEYS, {}) + ..._.pick(model?.meta, METAKEYS, {}), + size: defaultSize, + width: model?.meta?.default_width || 512, + height: model?.meta?.default_height || 512 }); } updateCacheFormData({ - ..._.pick(model?.meta, METAKEYS, {}) + ..._.pick(model?.meta, METAKEYS, {}), + size: defaultSize, + width: model?.meta?.default_width || 512, + height: model?.meta?.default_height || 512 }); }, [modelList, isOpenaiCompatible] @@ -574,14 +601,14 @@ const GroundImages: React.FC = forwardRef((props, ref) => { useEffect(() => { if (size === 'custom') { form.current?.form?.setFieldsValue({ - width: 512, - height: 512 + width: cacheFormData.current.width || 512, + height: cacheFormData.current.height || 512 }); setParams((pre: object) => { return { ...pre, - width: 512, - height: 512 + width: cacheFormData.current.width || 512, + height: cacheFormData.current.height || 512 }; }); } diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx index 53b863ed..364d2660 100644 --- a/src/pages/playground/components/image-edit.tsx +++ b/src/pages/playground/components/image-edit.tsx @@ -155,13 +155,9 @@ const GroundImages: React.FC = forwardRef((props, ref) => { }; }; - const paramsConfig = useMemo(() => { - const { max_height, max_width } = modelMeta || {}; - if ( - !max_height || - !max_width || - (max_height === 1024 && max_width === 1024) - ) { + const getNewImageSizeOptions = useCallback((metaData: any) => { + const { max_height, max_width } = metaData || {}; + if (!max_height || !max_width) { return ImageParamsConfig; } const newImageSizeOptions = imageSizeOptions.filter((item) => { @@ -179,7 +175,12 @@ const GroundImages: React.FC = forwardRef((props, ref) => { value: `${max_width}x${max_height}` }); } - return ImageParamsConfig.map((item) => { + return newImageSizeOptions; + }, []); + + const paramsConfig = useMemo(() => { + const newImageSizeOptions = getNewImageSizeOptions(modelMeta); + let result = ImageParamsConfig.map((item) => { if (item.name === 'size') { return { ...item, @@ -188,7 +189,11 @@ const GroundImages: React.FC = forwardRef((props, ref) => { } return item; }); - }, [modelMeta]); + if (!newImageSizeOptions.length) { + result = result.filter((item) => item.name !== 'size'); + } + return result; + }, [modelMeta, getNewImageSizeOptions]); const setImageSize = useCallback(() => { let size: Record = { @@ -555,13 +560,19 @@ const GroundImages: React.FC = forwardRef((props, ref) => { ? intl.formatMessage({ id: item.description.text }) : item.description?.text } - {...item.attrs} {..._.omit(item, [ 'name', 'description', 'rules', - 'disabledConfig' + 'disabledConfig', + 'attrs' ])} + {...item.attrs} + defaultValue={ + item.name === 'height' + ? modelMeta.default_height + : modelMeta.default_width + } max={ item.name === 'height' ? modelMeta.max_height || item.attrs?.max @@ -582,20 +593,31 @@ const GroundImages: React.FC = forwardRef((props, ref) => { 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) => { - return { - ...pre, - ..._.pick(model?.meta, METAKEYS, {}) - }; + const w = model?.meta?.default_width || 512; + const h = model?.meta?.default_height || 512; + const obj = _.merge({}, pre, _.pick(model?.meta, METAKEYS, {})); + + return { ...obj, size: defaultSize, width: w, height: h }; }); form.current?.form?.setFieldsValue({ - ..._.pick(model?.meta, METAKEYS, {}) + ..._.pick(model?.meta, METAKEYS, {}), + size: defaultSize, + width: model?.meta?.default_width || 512, + height: model?.meta?.default_height || 512 }); } updateCacheFormData({ - ..._.pick(model?.meta, METAKEYS, {}) + ..._.pick(model?.meta, METAKEYS, {}), + size: defaultSize, + width: model?.meta?.default_width || 512, + height: model?.meta?.default_height || 512 }); }, [modelList, isOpenaiCompatible] @@ -702,14 +724,14 @@ const GroundImages: React.FC = forwardRef((props, ref) => { useEffect(() => { if (size === 'custom') { form.current?.form?.setFieldsValue({ - width: 512, - height: 512 + width: cacheFormData.current.width || 512, + height: cacheFormData.current.height || 512 }); setParams((pre: object) => { return { ...pre, - width: 512, - height: 512 + width: cacheFormData.current.width || 512, + height: cacheFormData.current.height || 512 }; }); } diff --git a/src/pages/playground/config/params-config.ts b/src/pages/playground/config/params-config.ts index b30df37a..542a8831 100644 --- a/src/pages/playground/config/params-config.ts +++ b/src/pages/playground/config/params-config.ts @@ -18,8 +18,8 @@ export const imageSizeOptions: { { label: '512x1024(1:2)', value: '512x1024', width: 512, height: 1024 }, { label: '768x1024(3:4)', value: '768x1024', width: 768, height: 1024 }, { label: '1024x768(4:3)', value: '1024x768', width: 1024, height: 768 }, - { label: '1024x576(16:9)', value: '1024x768', width: 1024, height: 576 }, - { label: '576x1024(9:16)', value: '1024x768', width: 576, height: 1024 }, + { label: '1024x576(16:9)', value: '1024x576', width: 1024, height: 576 }, + { label: '576x1024(9:16)', value: '576xx1024', width: 576, height: 1024 }, { label: '1024x1024(1:1)', value: '1024x1024', width: 1024, height: 1024 } ];