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

fix: image edit ux

Browse Source
This commit is contained in:
jialin
2025-01-06 20:45:32 +08:00
parent 5c401f3858
commit 39a71d51cf
12 changed files with 164 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/api-keys/index.tsx
-3
View File
@@ -22,7 +22,6 @@ import { ListItem } from './config/types';
const { Column } = Table;
const APIKeys: React.FC = () => {
console.log('APIKeys========');
const rowSelection = useTableRowSelection();
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
@@ -47,7 +46,6 @@ const APIKeys: React.FC = () => {
});
const handlePageChange = (page: number, pageSize: number) => {
console.log('handlePageChange====', page, pageSize);
setQueryParams({
...queryParams,
page: page,
@@ -56,7 +54,6 @@ const APIKeys: React.FC = () => {
};
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
console.log('handleTableChange=======', pagination, filters, sorter);
setSortOrder(sorter.order);
};
src/pages/llmodels/catalog.tsx
+4 -1
View File
@@ -30,6 +30,7 @@ const Catalog: React.FC = () => {
const navigate = useNavigate();
const [span, setSpan] = React.useState(8);
const [activeId, setActiveId] = React.useState(-1);
const [isFirst, setIsFirst] = React.useState(true);
const [dataSource, setDataSource] = useState<{
dataList: CatalogItemType[];
loading: boolean;
@@ -102,6 +103,8 @@ const Catalog: React.FC = () => {
total: dataSource.total
});
console.log('error', error);
} finally {
setIsFirst(false);
}
}, [queryParams]);
@@ -297,7 +300,7 @@ const Catalog: React.FC = () => {
style={{ width: '100%' }}
wrapperClassName="skelton-wrapper"
>
<CatalogSkelton span={span}></CatalogSkelton>
{isFirst && <CatalogSkelton span={span}></CatalogSkelton>}
</Spin>
</div>
)}
src/pages/llmodels/components/deploy-builtin-modal.tsx
+29 -5
View File
@@ -7,7 +7,12 @@ import { Button, Drawer } from 'antd';
import _ from 'lodash';
import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { queryCatalogItemSpec } from '../apis';
import { backendOptionsMap, modelSourceMap, sourceOptions } from '../config';
import {
backendOptionsMap,
modelCategoriesMap,
modelSourceMap,
sourceOptions
} from '../config';
import { CatalogSpec, FormData, ListItem } from '../config/types';
import ColumnWrapper from './column-wrapper';
import DataForm from './data-form';
@@ -40,6 +45,7 @@ const backendOptions = [
];
const defaultQuant = ['Q4_K_M'];
const EmbeddingRerankFirstQuant = ['FP16'];
const AddModal: React.FC<AddModalProps> = (props) => {
const {
title,
@@ -51,7 +57,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
current,
width = 600
} = props || {};
const SEARCH_SOURCE = [];
const form = useRef<any>({});
const intl = useIntl();
@@ -69,6 +74,16 @@ const AddModal: React.FC<AddModalProps> = (props) => {
form.current?.submit?.();
};
const getDefaultQuant = (data: { category: string; quantOption: string }) => {
if (
data.category === modelCategoriesMap.embedding ||
data.category === modelCategoriesMap.reranker
) {
return EmbeddingRerankFirstQuant.includes(data.quantOption);
}
return defaultQuant.includes(data.quantOption);
};
const getModelFile = (spec: CatalogSpec) => {
let modelInfo = {};
if (spec.source === modelSourceMap.huggingface_value) {
@@ -234,7 +249,10 @@ const AddModal: React.FC<AddModalProps> = (props) => {
size: _.get(sizeList, '0.value', 0),
quantization:
_.find(quantizaList, (item: { label: string; value: string }) =>
defaultQuant.includes(item.value)
getDefaultQuant({
category: _.get(current, 'categories.0', ''),
quantOption: item.value
})
)?.value || _.get(quantizaList, '0.value', '')
});
@@ -264,7 +282,10 @@ const AddModal: React.FC<AddModalProps> = (props) => {
const source = _.get(sources, '0.value', '');
const defaultSpec =
_.find(groupList[source], (item: CatalogSpec) => {
return defaultQuant.includes(item.quantization);
return getDefaultQuant({
category: _.get(current, 'categories.0', ''),
quantOption: item.quantization
});
}) || _.get(groupList, `${source}.0`, {});
setSourceList(sources);
@@ -320,7 +341,10 @@ const AddModal: React.FC<AddModalProps> = (props) => {
size: val,
quantization:
_.find(list, (item: { label: string; value: string }) =>
defaultQuant.includes(item.value)
getDefaultQuant({
category: _.get(current, 'categories.0', ''),
quantOption: item.value
})
)?.value || _.get(list, '0.value', '')
});
src/pages/llmodels/components/table-list.tsx
+5 -2
View File
@@ -56,7 +56,7 @@ import UpdateModel from './update-modal';
import ViewLogsModal from './view-logs-modal';
interface ModelsProps {
handleSearch: (e: any) => void;
handleSearch: () => void;
handleNameChange: (e: any) => void;
handleShowSizeChange?: (page: number, size: number) => void;
handlePageChange: (page: number, pageSize: number | undefined) => void;
@@ -337,7 +337,6 @@ const Models: React.FC<ModelsProps> = ({
const handleModalOk = useCallback(
async (data: FormData) => {
try {
console.log('data:', data, openDeployModal);
const result = getSourceRepoConfigValue(currentData?.source, data);
await updateModel({
data: {
@@ -348,6 +347,7 @@ const Models: React.FC<ModelsProps> = ({
});
setOpenAddModal(false);
message.success(intl.formatMessage({ id: 'common.message.success' }));
handleSearch();
} catch (error) {}
},
[currentData]
@@ -385,6 +385,7 @@ const Models: React.FC<ModelsProps> = ({
updateExpandedRowKeys([modelData.id, ...expandedRowKeys]);
}, 300);
message.success(intl.formatMessage({ id: 'common.message.success' }));
handleSearch?.();
} catch (error) {}
},
[openDeployModal]
@@ -405,6 +406,7 @@ const Models: React.FC<ModelsProps> = ({
removeExpandedRowKey([row.id]);
rowSelection.removeSelectedKey(row.id);
handleDeleteSuccess();
handleSearch();
}
});
};
@@ -419,6 +421,7 @@ const Models: React.FC<ModelsProps> = ({
rowSelection.clearSelections();
removeExpandedRowKey(rowSelection.selectedRowKeys);
handleDeleteSuccess();
handleSearch();
}
});
};
src/pages/llmodels/index.tsx
+16 -16
View File
@@ -45,6 +45,7 @@ const Models: React.FC = () => {
const { updateChunkedList, cacheDataListRef, deletedIdsRef } =
useUpdateChunkedList({
events: ['UPDATE'],
dataList: dataSource.dataList,
setDataList(list, opts?: any) {
setDataSource((pre) => {
@@ -118,8 +119,6 @@ const Models: React.FC = () => {
_.each(list, (data: any) => {
updateChunkedList(data);
});
console.log('deletedIdsRef=======', deletedIdsRef.current);
};
const updateInstanceHandler = (list: any) => {
@@ -129,14 +128,19 @@ const Models: React.FC = () => {
const createModelsChunkRequest = useCallback(async () => {
chunkRequedtRef.current?.current?.cancel?.();
try {
const query = {
search: queryParams.search,
categories: queryParams.categories
};
chunkRequedtRef.current = setChunkRequest({
url: `${MODELS_API}?${qs.stringify(_.pickBy(queryParams, (val: any) => !!val))}`,
url: `${MODELS_API}?${qs.stringify(_.pickBy(query, (val: any) => !!val))}`,
handler: updateHandler
});
} catch (error) {
// ignore
}
}, [queryParams]);
}, [queryParams.categories, queryParams.search]);
const createModelsInstanceChunkRequest = useCallback(async () => {
chunkInstanceRequedtRef.current?.current?.cancel?.();
try {
@@ -150,11 +154,6 @@ const Models: React.FC = () => {
}
}, []);
const getList = async () => {
await fetchData();
await createModelsChunkRequest();
};
const handleOnViewLogs = useCallback(() => {
isPageHidden.current = true;
chunkRequedtRef.current?.current?.cancel?.();
@@ -173,12 +172,9 @@ const Models: React.FC = () => {
}, 100);
}, [fetchData, createModelsChunkRequest, createModelsInstanceChunkRequest]);
const handleSearch = useCallback(
async (e: any) => {
await fetchData();
},
[fetchData]
);
const handleSearch = useCallback(async () => {
await fetchData();
}, [fetchData]);
const debounceUpdateFilter = _.debounce((e: any) => {
setQueryParams({
@@ -202,12 +198,16 @@ const Models: React.FC = () => {
);
useEffect(() => {
getList();
fetchData();
return () => {
axiosToken?.cancel?.();
};
}, [queryParams]);
useEffect(() => {
createModelsChunkRequest();
}, [createModelsChunkRequest]);
useEffect(() => {
getWorkerList();
createModelsInstanceChunkRequest();
src/pages/playground/components/image-edit.tsx
+16 -10
View File
@@ -63,7 +63,7 @@ const METAKEYS = [
];
const advancedFieldsDefaultValus = {
seed: 1,
seed: null,
sample_method: 'euler_a',
cfg_scale: 4.5,
guidance: 3.5,
@@ -278,6 +278,14 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setMessageId();
setTokenResult(null);
setCurrentPrompt(current?.content || '');
setUploadList((pre) => {
return pre.map((item) => {
return {
...item,
dataUrl: image
};
});
});
setRouteCache(routeCachekey['/playground/text-to-image'], true);
const imgSize = _.split(finalParameters.size, 'x').map((item: string) =>
@@ -338,8 +346,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const result: any = await fetchChunkedData({
data: params,
// url: `http:///v1/images/edits?t=${Date.now()}`,
url: `${EDIT_IMAGE_API}?t=${Date.now()}`,
// url: 'http://192.168.50.174:40053/v1/images/edits',
url: EDIT_IMAGE_API,
signal: requestToken.current.signal
});
@@ -372,6 +380,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
imgItem.dataUrl = `data:image/png;base64,${item.b64_json}`;
}
const progress = _.round(item.progress, 0);
console.log('progress:', item, progress);
newImageList[item.index] = {
dataUrl: imgItem.dataUrl,
height: imgSize[1],
@@ -381,7 +390,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
uid: imgItem.uid,
span: imgItem.span,
loading: stream_options.chunk_results ? progress < 100 : false,
preview: progress >= 100,
preview: false,
progress: progress
};
});
@@ -588,6 +597,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
);
const handleUpdateImageList = useCallback((base64List: any) => {
console.log('updateimagelist=========', base64List);
const img = _.get(base64List, '[0].dataUrl', '');
setUploadList(base64List);
setImage(img);
@@ -667,7 +677,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
{...uploadList[0]}
height={125}
maxHeight={125}
preview={true}
preview={false}
loading={false}
autoSize={false}
editable={false}
@@ -728,11 +738,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
return (
<div className="ground-left-wrapper">
<div className="ground-left">
<div
className="message-list-wrap"
ref={scroller}
style={{ paddingBottom: 16 }}
>
<div className="message-list-wrap" style={{ paddingBottom: 16 }}>
<>
<div className="content" style={{ height: '100%' }}>
{