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/components/echarts/scatter.tsx
+2 -2
View File
@@ -11,8 +11,8 @@ const options: any = {
...grid,
right: -1,
top: -1,
bottom: -1,
left: -1,
bottom: 2,
left: 2,
containLabel: true,
borderRadius: 4
},
src/components/logs-viewer/logs-pagination.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ interface LogsPaginationProps {
}
const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
const { page, total, pageSize, onWheel, onNext, onPrev } = props;
const { page, total, pageSize, onNext, onPrev } = props;
const intl = useIntl();
const handleOnPrev = () => {
src/components/logs-viewer/virtual-log-list.tsx
+3 -2
View File
@@ -24,10 +24,11 @@ interface LogsViewerProps {
params?: object;
ref?: any;
tail?: number;
enableScorllLoad?: boolean;
diffHeight?: number;
}
const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
const { diffHeight, url, tail: defaultTail } = props;
const { diffHeight, url, tail: defaultTail, enableScorllLoad = true } = props;
const { pageSize, page, setPage, setTotalPage, totalPage } =
useLogsPagination();
const { setChunkFetch } = useSetChunkFetch();
@@ -169,7 +170,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
const handleOnScroll = useCallback(
async (isTop: boolean) => {
setIsAtTop(isTop);
if (loading || isLoadend || logs.length < pageSize) {
if (loading || isLoadend || logs.length < pageSize || !enableScorllLoad) {
return;
}
if (isTop && !isLoadend) {
src/components/markdown-viewer/index.tsx
-2
View File
@@ -199,14 +199,12 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
return (
<>
(
<div
style={{ height }}
className="markdown-viewer custom-scrollbar-horizontal"
>
{renderTokens(tokens)}
</div>
)
</>
);
};
src/layouts/error-boundary.tsx
+39
View File
@@ -0,0 +1,39 @@
import { Component } from 'react';
interface ErrorBoundaryState {
hasError: boolean;
}
class ErrorBoundary extends Component<
{ children?: React.ReactNode },
ErrorBoundaryState
> {
constructor(props: any) {
super(props);
this.state = {
hasError: false
};
}
// 捕获错误并更新状态
static getDerivedStateFromError(error: any) {
console.error('Error caught by Error Boundary:', error);
return { hasError: true };
}
// 记录错误信息（可选）
componentDidCatch(error: any, info: any) {
console.error('Error caught by Error Boundary:', error);
console.error(info);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
export default ErrorBoundary;
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;
}
src/utils/fetch-chunk-data.ts
+7 -4
View File
@@ -1,7 +1,8 @@
import qs from 'query-string';
const extractStreamRegx = /data:\s*({.*?})(?=\n|$)/g;
const extractJSON = (dataStr: string) => {
const regex = /data:\s*({.*?})(?=\n|$)/g;
let match;
const results: any[] = [];
@@ -9,9 +10,10 @@ const extractJSON = (dataStr: string) => {
return results;
}
while ((match = regex.exec(dataStr)) !== null) {
while ((match = extractStreamRegx.exec(dataStr)) !== null) {
try {
results.push(JSON.parse(match[1]));
const jsonData = JSON.parse(match[1]);
results.push(jsonData);
} catch (error) {
console.error('JSON parse error:', error, 'for match:', match[1]);
@@ -21,6 +23,7 @@ const extractJSON = (dataStr: string) => {
return results;
};
/**
*
* @param params data: for post request, params: for get request
@@ -74,8 +77,8 @@ export const readStreamData = async (
}
let chunk = decoder.decode(value, { stream: true });
console.log('chunk==========', chunk);
extractJSON(chunk).forEach((data) => {
console.log('data====', data);
callback?.(data);
});
// callback(chunk);