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

fix: model be cleared when apply config to all in compare

Browse Source
This commit is contained in:
jialin
2024-11-22 18:25:07 +08:00
parent c8c22b3f22
commit a6f0f554f0
14 changed files with 124 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/model-card.tsx
+10 -12
View File
@@ -205,9 +205,15 @@ const ModelCard: React.FC<{
if (!imgSrc) {
return '';
}
return `https://modelscope.cn/api/v1/models/${modelData?.name}/repo?Revision=${modelData?.Revision}&View=true&FilePath=${imgSrc}`;
if (modelSource === modelSourceMap.modelscope_value) {
return `https://modelscope.cn/api/v1/models/${modelData?.name}/repo?Revision=${modelData?.Revision}&View=true&FilePath=${imgSrc}`;
}
if (modelSource === modelSourceMap.huggingface_value) {
return `https://huggingface.co/${modelData?.id}/resolve/main/${imgSrc}`;
}
return '';
},
[modelData]
[modelData, modelSource]
);
useEffect(() => {
@@ -277,11 +283,7 @@ const ModelCard: React.FC<{
}}
>
<MarkdownViewer
generateImgLink={
modelSource === modelSourceMap.modelscope_value
? generateModeScopeImgLink
: undefined
}
generateImgLink={generateModeScopeImgLink}
content={readmeText}
theme="light"
></MarkdownViewer>
@@ -310,11 +312,7 @@ const ModelCard: React.FC<{
</TitleWrapper>
<div className="card-wrapper">
<MarkdownViewer
generateImgLink={
modelSource === modelSourceMap.modelscope_value
? generateModeScopeImgLink
: undefined
}
generateImgLink={generateModeScopeImgLink}
content={readmeText}
theme="light"
></MarkdownViewer>
src/pages/llmodels/components/table-list.tsx
+7 -35
View File
@@ -11,7 +11,6 @@ import HotKeys from '@/config/hotkeys';
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import ViewCodeModal from '@/pages/playground/components/view-code-modal';
import {
GPUDeviceItem,
ListItem as WorkerListItem
@@ -88,10 +87,6 @@ const Models: React.FC<ModelsProps> = ({
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
const [embeddingParams, setEmbeddingParams] = useState<any>({
params: {},
show: false
});
const [openLogModal, setOpenLogModal] = useState(false);
const [openAddModal, setOpenAddModal] = useState(false);
@@ -104,6 +99,8 @@ const Models: React.FC<ModelsProps> = ({
const [currentInstance, setCurrentInstance] = useState<{
url: string;
status: string;
id?: number | string;
modelId?: number | string;
tail?: number;
}>({
url: '',
@@ -226,11 +223,6 @@ const Models: React.FC<ModelsProps> = ({
key: 'chat',
icon: <WechatWorkOutlined />
},
// {
// label: 'common.button.viewcode',
// key: 'embedding',
// icon: <IconFont type="icon-code" />
// },
{
label: 'common.button.delete',
key: 'delete',
@@ -363,6 +355,8 @@ const Models: React.FC<ModelsProps> = ({
setCurrentInstance({
url: `${MODEL_INSTANCE_API}/${row.id}/logs`,
status: row.state,
id: row.id,
modelId: row.model_id,
tail: row.state === InstanceStatusMap.Downloading ? undefined : PageSize
});
setOpenLogModal(true);
@@ -413,17 +407,8 @@ const Models: React.FC<ModelsProps> = ({
if (val === 'delete') {
handleDelete(row);
}
if (val === 'embedding') {
setEmbeddingParams({
params: {
input: 'Your text string goes here',
model: row.name
},
show: true
});
}
},
[handleEdit, handleOpenPlayGround, handleDelete, setEmbeddingParams]
[handleEdit, handleOpenPlayGround, handleDelete]
);
const handleChildSelect = useCallback(
@@ -469,13 +454,6 @@ const Models: React.FC<ModelsProps> = ({
return '';
}, []);
const handleCloseViewCode = useCallback(() => {
setEmbeddingParams({
params: {},
show: false
});
}, []);
return (
<>
<PageContainer
@@ -682,18 +660,12 @@ const Models: React.FC<ModelsProps> = ({
<ViewLogsModal
url={currentInstance.url}
tail={currentInstance.tail}
id={currentInstance.id}
modelId={currentInstance.modelId}
open={openLogModal}
onCancel={handleLogModalCancel}
></ViewLogsModal>
<DeleteModal ref={modalRef}></DeleteModal>
<ViewCodeModal
apiType="embedding"
open={embeddingParams.show}
messageList={[]}
parameters={embeddingParams.params}
onCancel={handleCloseViewCode}
title={intl.formatMessage({ id: 'playground.viewcode' })}
></ViewCodeModal>
</>
);
};
src/pages/llmodels/components/view-logs-modal.tsx
+32 -25
View File
@@ -1,52 +1,58 @@
import LogsViewer from '@/components/logs-viewer/virtual-log-list';
import useSetChunkRequest from '@/hooks/use-chunk-request';
import { useIntl } from '@umijs/max';
import { Modal } from 'antd';
import React, { useCallback, useEffect, useState } from 'react';
import { MODELS_API } from '../apis';
import { InstanceStatusMap } from '../config';
type ViewModalProps = {
open: boolean;
url: string;
id?: number | string;
modelId?: number | string;
tail?: number;
autoScroll?: boolean;
onCancel: () => void;
};
const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
const { open, url, onCancel, tail } = props || {};
const [modalSize, setModalSize] = useState<any>({
width: 600,
height: 420
});
const isFullScreenRef = React.useRef(false);
const logsViewerRef = React.useRef<any>(null);
const intl = useIntl();
const viewportHeight = window.innerHeight;
const viewHeight = viewportHeight - 86;
const handleFullscreenToggle = useCallback(() => {
isFullScreenRef.current = !isFullScreenRef.current;
setModalSize((size: any) => {
return {
width: size.width === 600 ? '100%' : 600,
height: size.height === 420 ? viewHeight : 420
};
});
}, []);
const intl = useIntl();
const { setChunkRequest } = useSetChunkRequest();
const { open, url, onCancel, tail } = props || {};
const [modalSize] = useState<any>({
width: '100%',
height: viewportHeight - 86
});
const [enableScorllLoad, setEnableScorllLoad] = useState(true);
const logsViewerRef = React.useRef<any>(null);
const requestRef = React.useRef<any>(null);
const handleCancel = useCallback(() => {
logsViewerRef.current?.abort();
onCancel();
}, [onCancel]);
const updateHandler = (list: any) => {
const data = list?.find((item: any) => item.data.id === props.id);
if (data) {
setEnableScorllLoad(InstanceStatusMap.Downloading !== data?.data?.state);
}
};
useEffect(() => {
if (!props.id) return;
if (open) {
isFullScreenRef.current = false;
setModalSize({
width: '100%',
height: viewHeight
requestRef.current?.current?.cancel?.();
requestRef.current = setChunkRequest({
url: `${MODELS_API}/${props.id}/instances`,
handler: updateHandler
});
}
}, [open]);
return () => {
requestRef.current?.current?.cancel?.();
};
}, [props.id, open]);
return (
<Modal
@@ -79,6 +85,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
diffHeight={93}
url={url}
tail={tail}
enableScorllLoad={enableScorllLoad}
params={{
follow: true
}}
src/pages/llmodels/index.tsx
+1
View File
@@ -130,6 +130,7 @@ const Models: React.FC = () => {
};
const updateInstanceHandler = (list: any) => {
console.log('updateInstanceHandler=====', list);
setModelInstances(list);
};
src/pages/playground/components/ground-images.tsx
+9 -6
View File
@@ -221,7 +221,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setLoading(false);
};
const submitMessage = async (current?: { role: string; content: string }) => {
const submitMessage = async (current?: { content: string }) => {
try {
await form.current?.form?.validateFields();
if (!parameters.model) return;
@@ -255,10 +255,13 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const result: any = await fetchChunkedData({
data: params,
// url: 'http://192.168.50.27:40639/v1/images/generations',
url: CREAT_IMAGE_API,
signal: requestToken.current.signal,
headers: {
accept: 'text/event-stream'
'Cache-Control': 'no-cache',
Accept: 'text/event-stream',
Connection: 'keep-alive'
}
});
@@ -281,8 +284,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
});
return;
}
const data = chunk?.data || [];
data.forEach((item: any) => {
console.log('data:================', chunk);
chunk?.data?.forEach((item: any) => {
const imgItem = newImageList[item.index];
newImageList[item.index] = {
dataUrl: `data:image/png;base64,${item.b64_json}`,
@@ -363,7 +366,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
>
<SealInput.Number
style={{ width: '100%' }}
label={intl.formatMessage({ id: 'playground.params.width' })}
label={`${intl.formatMessage({ id: 'playground.params.width' })}(px)`}
></SealInput.Number>
</Form.Item>
<Form.Item
@@ -385,7 +388,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
>
<SealInput.Number
style={{ width: '100%' }}
label="Height"
label={`${intl.formatMessage({ id: 'playground.params.height' })}(px)`}
></SealInput.Number>
</Form.Item>
</div>
src/pages/playground/components/multiple-chat/model-item.tsx
+4 -4
View File
@@ -44,7 +44,6 @@ interface ModelItemProps {
const ModelItem: React.FC<ModelItemProps> = forwardRef(
({ model, modelList, instanceId }, ref) => {
const {
spans,
globalParams,
setGlobalParams,
setLoadingStatus,
@@ -56,7 +55,9 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
const intl = useIntl();
const isApplyToAllModels = useRef(false);
const [systemMessage, setSystemMessage] = useState<string>('');
const [params, setParams] = useState<Record<string, any>>({});
const [params, setParams] = useState<Record<string, any>>({
model: model
});
const [loading, setLoading] = useState(false);
const messageId = useRef<number>(0);
const [messageList, setMessageList] = useState<MessageItem[]>([]);
@@ -314,10 +315,9 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
useEffect(() => {
setParams({
...params,
model: model,
...globalParams
});
}, [globalParams, model]);
}, [globalParams]);
useEffect(() => {
return () => {
src/pages/playground/components/params-settings.tsx
+8 -8
View File
@@ -52,21 +52,21 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
useEffect(() => {
if (showModelSelector) {
form.setFieldsValue({
model: selectedModel || _.get(modelList, '[0].value'),
...initialValues
...initialValues,
model: selectedModel || _.get(modelList, '[0].value')
});
setParams({
model: selectedModel || _.get(modelList, '[0].value'),
...initialValues
...initialValues,
model: selectedModel || _.get(modelList, '[0].value')
});
} else {
form.setFieldsValue({
model: selectedModel || '',
...initialValues
...initialValues,
model: selectedModel || ''
});
setParams({
model: selectedModel || '',
...initialValues
...initialValues,
model: selectedModel || ''
});
}
}, [modelList, showModelSelector, selectedModel]);
src/pages/playground/style/ground-left.less
+1 -1
View File
@@ -86,7 +86,7 @@
height: fit-content;
top: -10px;
font-size: var(--font-size-middle);
left: 50%;
left: calc(50% + 18px);
transform: translateX(-50%);
background-color: transparent;
}