fix: image preview

This commit is contained in:
jialin
2025-01-09 20:23:36 +08:00
parent ebe8a40202
commit 45e92e7b7a
5 changed files with 65 additions and 39 deletions
@@ -129,8 +129,10 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
const currentPage = list.slice(start, end).join('\n'); const currentPage = list.slice(start, end).join('\n');
setPage(newPage); setPage(newPage);
setTotalPage(totalPage); setTotalPage(totalPage);
if (pageRef.current === totalPageRef.current && scrollPos[0] === 'bottom') {
setScrollPos(['bottom', newPage]);
}
pageRef.current = newPage; pageRef.current = newPage;
totalPageRef.current = totalPage;
logParseWorker.current.postMessage({ logParseWorker.current.postMessage({
inputStr: currentPage inputStr: currentPage
}); });
@@ -232,6 +234,18 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
async (data: { isTop: boolean; isBottom: boolean }) => { async (data: { isTop: boolean; isBottom: boolean }) => {
const { isTop, isBottom } = data; const { isTop, isBottom } = data;
setIsAtTop(isTop); setIsAtTop(isTop);
console.log('scroll========', { isTop, isBottom });
// if (isBottom) {
// setScrollPos((pre) => {
// return ['bottom', pre[1]];
// });
// } else if (isTop) {
// setScrollPos((pre) => {
// return ['top', pre[1]];
// });
// } else {
// setScrollPos([]);
// }
if ( if (
loading || loading ||
(logs.length > 0 && logs.length < pageSize && !loadMoreDone.current) || (logs.length > 0 && logs.length < pageSize && !loadMoreDone.current) ||
@@ -287,8 +301,9 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
return ( return (
<div className="logs-viewer-wrap-w2"> <div className="logs-viewer-wrap-w2">
<span></span>
<div className="wrap"> <div className="wrap">
<div className={classNames('content')}> <div>
<LogsList <LogsList
ref={logListRef} ref={logListRef}
dataList={logs} dataList={logs}
+1 -1
View File
@@ -112,7 +112,7 @@ const TagsWrapper: React.FC<TagsWrapperProps> = (props) => {
> >
<Tag <Tag
className="more" className="more"
style={{ marginInline: `${gap}px 0` }} style={{ marginInline: hiddenIndices.end < 1 ? 0 : `${gap}px 0` }}
ref={moreBtnRef} ref={moreBtnRef}
> >
<MoreOutlined rotate={90} /> <MoreOutlined rotate={90} />
+30 -23
View File
@@ -43,27 +43,30 @@ const Catalog: React.FC = () => {
const categoryOptions = [...modelCategories.filter((item) => item.value)]; const categoryOptions = [...modelCategories.filter((item) => item.value)];
const filterData = (data: { search: string; categories: string[] }) => { const filterData = useCallback(
const { search, categories } = data; (data: { search: string; categories: string[] }) => {
const dataList = cacheData.current.filter((item) => { const { search, categories } = data;
if (search && categories.length > 0) { const dataList = cacheData.current.filter((item) => {
return ( if (search && categories.length > 0) {
_.toLower(item.name).includes(search) && return (
categories.some((category) => item.categories.includes(category)) _.toLower(item.name).includes(search) &&
); categories.some((category) => item.categories.includes(category))
} );
if (search) { }
return _.toLower(item.name).includes(search); if (search) {
} return _.toLower(item.name).includes(search);
if (categories.length > 0) { }
return categories.some((category) => if (categories.length > 0) {
item.categories.includes(category) return categories.some((category) =>
); item.categories.includes(category)
} );
return true; }
}); return true;
return dataList; });
}; return dataList;
},
[cacheData.current]
);
const fetchData = useCallback(async () => { const fetchData = useCallback(async () => {
setDataSource((pre) => { setDataSource((pre) => {
@@ -77,8 +80,12 @@ const Catalog: React.FC = () => {
const res: any = await queryCatalogList(params); const res: any = await queryCatalogList(params);
cacheData.current = res.items || []; cacheData.current = res.items || [];
const dataList = filterData({
search: queryParams.search,
categories: queryParams.categories
});
setDataSource({ setDataSource({
dataList: res.items, dataList: dataList,
loading: false, loading: false,
total: res.pagination.total total: res.pagination.total
}); });
@@ -93,7 +100,7 @@ const Catalog: React.FC = () => {
} finally { } finally {
setIsFirst(false); setIsFirst(false);
} }
}, [queryParams]); }, [queryParams, cacheData.current]);
const handleDeployModalCancel = () => { const handleDeployModalCancel = () => {
setOpenDeployModal({ setOpenDeployModal({
+15 -10
View File
@@ -294,18 +294,20 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
// preview // preview
let stream_options: Record<string, any> = { let stream_options: Record<string, any> = {
chunk_size: 16 * 1024, stream_options_chunk_size: 16 * 1024,
chunk_results: true stream_options_chunk_result: true
}; };
if (parameters.preview === 'preview') { if (parameters.preview === 'preview') {
stream_options = { stream_options = {
preview: true ...stream_options,
stream_options_preview: true
}; };
} }
if (parameters.preview === 'preview_faster') { if (parameters.preview === 'preview_faster') {
stream_options = { stream_options = {
preview_faster: true ...stream_options,
stream_options_preview_faster: true
}; };
} }
@@ -333,9 +335,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
..._.omitBy(finalParameters, (value: string) => !value), ..._.omitBy(finalParameters, (value: string) => !value),
seed: parameters.random_seed ? generateRandomNumber() : parameters.seed, seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
stream: true, stream: true,
stream_options: { ...stream_options,
...stream_options
},
prompt: current?.content || currentPrompt || '' prompt: current?.content || currentPrompt || ''
}; };
setParams({ setParams({
@@ -346,7 +346,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const result: any = await fetchChunkedData({ const result: any = await fetchChunkedData({
data: params, data: params,
// url: 'http://192.168.50.174:40053/v1/images/edits',
url: EDIT_IMAGE_API, url: EDIT_IMAGE_API,
signal: requestToken.current.signal signal: requestToken.current.signal
}); });
@@ -374,11 +373,15 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
} }
chunk?.data?.forEach((item: any) => { chunk?.data?.forEach((item: any) => {
const imgItem = newImageList[item.index]; const imgItem = newImageList[item.index];
if (item.b64_json && stream_options.chunk_results) { if (item.b64_json && params.stream_options_chunk_result) {
imgItem.dataUrl += item.b64_json; imgItem.dataUrl += item.b64_json;
} else if (item.b64_json) { } else if (item.b64_json) {
imgItem.dataUrl = `data:image/png;base64,${item.b64_json}`; imgItem.dataUrl = `data:image/png;base64,${item.b64_json}`;
} }
console.log(
'stream_options_chunk_result:',
params.stream_options_chunk_result
);
const progress = _.round(item.progress, 0); const progress = _.round(item.progress, 0);
console.log('progress:', item, progress); console.log('progress:', item, progress);
newImageList[item.index] = { newImageList[item.index] = {
@@ -389,7 +392,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
maxWidth: `${imgSize[0]}px`, maxWidth: `${imgSize[0]}px`,
uid: imgItem.uid, uid: imgItem.uid,
span: imgItem.span, span: imgItem.span,
loading: stream_options.chunk_results ? progress < 100 : false, loading: params.stream_options_chunk_result
? false
: progress < 100,
preview: false, preview: false,
progress: progress progress: progress
}; };
@@ -108,7 +108,6 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
} }
return acc; return acc;
}, {}); }, {});
console.log('handleModelChange', obj);
form.setFieldsValue(obj); form.setFieldsValue(obj);
setMetaData(obj); setMetaData(obj);
return obj; return obj;
@@ -121,8 +120,8 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
} }
const modelMetaData = handleModelChange(model); const modelMetaData = handleModelChange(model);
const mergeData = _.merge({}, initialValues, modelMetaData); const mergeData = _.merge({}, initialValues, modelMetaData);
const defaultMaxTokens = mergeData?.max_tokens const defaultMaxTokens = modelMetaData?.max_tokens
? _.divide(mergeData?.max_tokens, 2) ? _.divide(modelMetaData?.max_tokens, 2)
: 1024; : 1024;
form.setFieldsValue({ form.setFieldsValue({