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

chore: image meta data

Browse Source
This commit is contained in:
jialin
2025-01-13 08:22:23 +08:00
parent d099a22bd9
commit 8c4997fa37
6 changed files with 131 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/logs-viewer/logs-list.tsx
+2 -1
View File
@@ -54,7 +54,8 @@ const LogsList: React.FC<LogsListProps> = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
scrollToBottom, scrollToBottom,
scrollToTop scrollToTop,
scroller: scroller.current
})); }));
const handleOnWheel = useCallback( const handleOnWheel = useCallback(
src/components/logs-viewer/parse-worker.ts
+8 -2
View File
@@ -31,9 +31,15 @@ class AnsiParser {
} }
private handleText(text: string) { private handleText(text: string) {
for (const char of text) { for (let i = 0; i < text.length; i++) {
let char = text[i];
if (char === '\r') { 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') { } else if (char === '\n') {
this.rawDataRows++; this.rawDataRows++;
this.cursorRow++; this.cursorRow++;
src/components/logs-viewer/virtual-log-list.tsx
+30 -18
View File
@@ -11,7 +11,6 @@ import React, {
useRef, useRef,
useState useState
} from 'react'; } from 'react';
import { replaceLineRegex } from './config';
import LogsList from './logs-list'; import LogsList from './logs-list';
import LogsPagination from './logs-pagination'; import LogsPagination from './logs-pagination';
import './styles/index.less'; import './styles/index.less';
@@ -33,7 +32,6 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
useLogsPagination(); useLogsPagination();
const { setChunkFetch } = useSetChunkFetch(); const { setChunkFetch } = useSetChunkFetch();
const chunkRequedtRef = useRef<any>(null); const chunkRequedtRef = useRef<any>(null);
const cacheDataRef = useRef<any>('');
const [logs, setLogs] = useState<any[]>([]); const [logs, setLogs] = useState<any[]>([]);
const logParseWorker = useRef<any>(null); const logParseWorker = useRef<any>(null);
const tail = useRef<any>(pageSize - 1); const tail = useRef<any>(pageSize - 1);
@@ -62,7 +60,10 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
const debounceLoading = _.debounce(() => { const debounceLoading = _.debounce(() => {
setLoading(false); setLoading(false);
isLoadingMoreRef.current = false; isLoadingMoreRef.current = false;
}, 200); if (logListRef.current?.scroller) {
logListRef.current.scroller.style['pointer-events'] = 'auto';
}
}, 1000);
const getCurrent = useCallback(() => { const getCurrent = useCallback(() => {
if (pageRef.current < 1) { if (pageRef.current < 1) {
@@ -111,11 +112,12 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
}; };
}, [getCurrent]); }, [getCurrent]);
const updateContent = (inputStr: string) => { const updateContent = (data: string) => {
const data = inputStr.replace(replaceLineRegex, '\n');
cacheDataRef.current = data;
if (isLoadingMoreRef.current) { if (isLoadingMoreRef.current) {
setLoading(true); setLoading(true);
if (logListRef.current?.scroller) {
logListRef.current.scroller.style['pointer-events'] = 'none';
}
} }
logParseWorker.current.postMessage({ logParseWorker.current.postMessage({
inputStr: data inputStr: data
@@ -238,24 +240,34 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
if (pageRef.current < 1) { if (pageRef.current < 1) {
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 start = (pageRef.current - 1) * pageSize;
const end = pageRef.current * pageSize; const end = pageRef.current * pageSize;
const currentLogs = result.slice(start, end); const currentLogs = result.slice(start, end);
totalPageRef.current = Math.ceil(result.length / pageSize);
console.log(
'lineCountRef.current+++++++++++',
lineCountRef.current,
result.length
);
setLogs(result); setLogs(result);
setTotalPage(totalPageRef.current); setTotalPage(totalPageRef.current);
if (isLoadingMoreRef.current) { setPage(pageRef.current);
setPage(totalPageRef.current);
pageRef.current = totalPageRef.current;
} else {
setPage(pageRef.current);
}
setCurrentData(currentLogs); setCurrentData(currentLogs);
debounceLoading(); debounceLoading();
}; };
src/pages/playground/components/ground-images.tsx
+46 -19
View File
@@ -135,13 +135,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}; };
}); });
const paramsConfig = useMemo(() => { const getNewImageSizeOptions = useCallback((metaData: any) => {
const { max_height, max_width } = modelMeta || {}; const { max_height, max_width } = metaData || {};
if ( if (!max_height || !max_width) {
!max_height ||
!max_width ||
(max_height === 1024 && max_width === 1024)
) {
return ImageParamsConfig; return ImageParamsConfig;
} }
const newImageSizeOptions = imageSizeOptions.filter((item) => { const newImageSizeOptions = imageSizeOptions.filter((item) => {
@@ -159,7 +155,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
value: `${max_width}x${max_height}` 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') { if (item.name === 'size') {
return { return {
...item, ...item,
@@ -168,7 +169,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
} }
return item; return item;
}); });
}, [modelMeta]); if (!newImageSizeOptions.length) {
result = result.filter((item) => item.name !== 'size');
}
return result;
}, [modelMeta, getNewImageSizeOptions]);
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);
@@ -522,13 +527,19 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
? intl.formatMessage({ id: item.description.text }) ? intl.formatMessage({ id: item.description.text })
: item.description?.text : item.description?.text
} }
{...item.attrs}
{..._.omit(item, [ {..._.omit(item, [
'name', 'name',
'description', 'description',
'rules', 'rules',
'disabledConfig' 'disabledConfig',
'attrs'
])} ])}
{...item.attrs}
defaultValue={
item.name === 'height'
? modelMeta.default_height
: modelMeta.default_width
}
max={ max={
item.name === 'height' item.name === 'height'
? modelMeta.max_height || item.attrs?.max ? modelMeta.max_height || item.attrs?.max
@@ -549,17 +560,33 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const model = modelList.find((item) => item.value === val); const model = modelList.find((item) => item.value === val);
setModelMeta(model?.meta || {}); 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) { if (!isOpenaiCompatible) {
setParams((pre: object) => { 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({ 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({ 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] [modelList, isOpenaiCompatible]
@@ -574,14 +601,14 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
useEffect(() => { useEffect(() => {
if (size === 'custom') { if (size === 'custom') {
form.current?.form?.setFieldsValue({ form.current?.form?.setFieldsValue({
width: 512, width: cacheFormData.current.width || 512,
height: 512 height: cacheFormData.current.height || 512
}); });
setParams((pre: object) => { setParams((pre: object) => {
return { return {
...pre, ...pre,
width: 512, width: cacheFormData.current.width || 512,
height: 512 height: cacheFormData.current.height || 512
}; };
}); });
} }
src/pages/playground/components/image-edit.tsx
+43 -21
View File
@@ -155,13 +155,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}; };
}; };
const paramsConfig = useMemo(() => { const getNewImageSizeOptions = useCallback((metaData: any) => {
const { max_height, max_width } = modelMeta || {}; const { max_height, max_width } = metaData || {};
if ( if (!max_height || !max_width) {
!max_height ||
!max_width ||
(max_height === 1024 && max_width === 1024)
) {
return ImageParamsConfig; return ImageParamsConfig;
} }
const newImageSizeOptions = imageSizeOptions.filter((item) => { const newImageSizeOptions = imageSizeOptions.filter((item) => {
@@ -179,7 +175,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
value: `${max_width}x${max_height}` 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') { if (item.name === 'size') {
return { return {
...item, ...item,
@@ -188,7 +189,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
} }
return item; return item;
}); });
}, [modelMeta]); if (!newImageSizeOptions.length) {
result = result.filter((item) => item.name !== 'size');
}
return result;
}, [modelMeta, getNewImageSizeOptions]);
const setImageSize = useCallback(() => { const setImageSize = useCallback(() => {
let size: Record<string, string | number> = { let size: Record<string, string | number> = {
@@ -555,13 +560,19 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
? intl.formatMessage({ id: item.description.text }) ? intl.formatMessage({ id: item.description.text })
: item.description?.text : item.description?.text
} }
{...item.attrs}
{..._.omit(item, [ {..._.omit(item, [
'name', 'name',
'description', 'description',
'rules', 'rules',
'disabledConfig' 'disabledConfig',
'attrs'
])} ])}
{...item.attrs}
defaultValue={
item.name === 'height'
? modelMeta.default_height
: modelMeta.default_width
}
max={ max={
item.name === 'height' item.name === 'height'
? modelMeta.max_height || item.attrs?.max ? modelMeta.max_height || item.attrs?.max
@@ -582,20 +593,31 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const model = modelList.find((item) => item.value === val); const model = modelList.find((item) => item.value === val);
setModelMeta(model?.meta || {}); 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) { if (!isOpenaiCompatible) {
setParams((pre: object) => { setParams((pre: object) => {
return { const w = model?.meta?.default_width || 512;
...pre, const h = model?.meta?.default_height || 512;
..._.pick(model?.meta, METAKEYS, {}) const obj = _.merge({}, pre, _.pick(model?.meta, METAKEYS, {}));
};
return { ...obj, size: defaultSize, width: w, height: h };
}); });
form.current?.form?.setFieldsValue({ 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({ 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] [modelList, isOpenaiCompatible]
@@ -702,14 +724,14 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
useEffect(() => { useEffect(() => {
if (size === 'custom') { if (size === 'custom') {
form.current?.form?.setFieldsValue({ form.current?.form?.setFieldsValue({
width: 512, width: cacheFormData.current.width || 512,
height: 512 height: cacheFormData.current.height || 512
}); });
setParams((pre: object) => { setParams((pre: object) => {
return { return {
...pre, ...pre,
width: 512, width: cacheFormData.current.width || 512,
height: 512 height: cacheFormData.current.height || 512
}; };
}); });
} }
src/pages/playground/config/params-config.ts
+2 -2
View File
@@ -18,8 +18,8 @@ export const imageSizeOptions: {
{ label: '512x1024(1:2)', value: '512x1024', width: 512, height: 1024 }, { label: '512x1024(1:2)', value: '512x1024', width: 512, height: 1024 },
{ label: '768x1024(3:4)', value: '768x1024', width: 768, height: 1024 }, { label: '768x1024(3:4)', value: '768x1024', width: 768, height: 1024 },
{ label: '1024x768(4:3)', value: '1024x768', width: 1024, height: 768 }, { label: '1024x768(4:3)', value: '1024x768', width: 1024, height: 768 },
{ label: '1024x576(16:9)', value: '1024x768', width: 1024, height: 576 }, { label: '1024x576(16:9)', value: '1024x576', width: 1024, height: 576 },
{ label: '576x1024(9:16)', value: '1024x768', width: 576, height: 1024 }, { label: '576x1024(9:16)', value: '576xx1024', width: 576, height: 1024 },
{ label: '1024x1024(1:1)', value: '1024x1024', width: 1024, height: 1024 } { label: '1024x1024(1:1)', value: '1024x1024', width: 1024, height: 1024 }
]; ];