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, () => ({
scrollToBottom,
scrollToTop
scrollToTop,
scroller: scroller.current
}));
const handleOnWheel = useCallback(
src/components/logs-viewer/parse-worker.ts
+8 -2
View File
@@ -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++;
src/components/logs-viewer/virtual-log-list.tsx
+30 -18
View File
@@ -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<LogsViewerProps> = forwardRef((props, ref) => {
useLogsPagination();
const { setChunkFetch } = useSetChunkFetch();
const chunkRequedtRef = useRef<any>(null);
const cacheDataRef = useRef<any>('');
const [logs, setLogs] = useState<any[]>([]);
const logParseWorker = useRef<any>(null);
const tail = useRef<any>(pageSize - 1);
@@ -62,7 +60,10 @@ const LogsViewer: React.FC<LogsViewerProps> = 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<LogsViewerProps> = 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<LogsViewerProps> = 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();
};
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 { 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<MessageProps> = 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<MessageProps> = 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<MessageProps> = 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<MessageProps> = 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<MessageProps> = 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
};
});
}
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 { 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<MessageProps> = 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<MessageProps> = 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<string, string | number> = {
@@ -555,13 +560,19 @@ const GroundImages: React.FC<MessageProps> = 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<MessageProps> = 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<MessageProps> = 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
};
});
}
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: '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 }
];