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

fix: add a button to last page on logs

Browse Source
This commit is contained in:
jialin
2025-01-08 15:26:03 +08:00
parent 2a9c501ee2
commit decb3ef2f1
21 changed files with 245 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/theme.ts
+1 -1
View File
@@ -29,7 +29,7 @@ export default {
contentPadding: '12px 16px'
},
Tooltip: {
colorBgSpotlight: 'rgba(110,110,110,1)'
colorBgSpotlight: '#3e3e3e'
// sizePopupArrow: 0
},
Slider: {
src/components/auto-image/single-image.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import { CloseCircleOutlined } from '@ant-design/icons';
import { Progress } from 'antd';
import { Progress, ProgressProps } from 'antd';
import classNames from 'classnames';
import ResizeObserver from 'rc-resize-observer';
import React, { useCallback } from 'react';
@@ -21,6 +21,7 @@ interface SingleImageProps {
autoBgColor?: boolean;
editable?: boolean;
style?: React.CSSProperties;
loadingSize?: ProgressProps['size'];
progressType?: 'line' | 'circle' | 'dashboard';
progressColor?: string;
progressWidth?: number;
@@ -42,10 +43,8 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
dataUrl,
style,
autoBgColor,
progressColor = 'var(--ant-color-primary)',
progressWidth = 2,
preview = true,
progressType = 'dashboard'
loadingSize = 'default'
} = props;
const imgWrapper = React.useRef<HTMLSpanElement>(null);
@@ -137,6 +136,7 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
<Progress
percent={progress}
type="dashboard"
size={loadingSize}
steps={{ count: 50, gap: 2 }}
format={() => (
<span className="font-size-20">{progress}%</span>
src/components/image-editor/index.tsx
+97 -53
View File
@@ -34,6 +34,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
onSave,
uploadButton
}) => {
const MIN_SCALE = 0.4;
const MAX_SCALE = 10;
const zoomFactor = 1.1;
const intl = useIntl();
const canvasRef = useRef<HTMLCanvasElement>(null);
const overlayCanvasRef = useRef<HTMLCanvasElement>(null);
@@ -47,25 +50,20 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
const autoScale = useRef<number>(1);
const cursorRef = useRef<HTMLDivElement>(null);
const [imgLoaded, setImgLoaded] = useState(false);
let scale = 1;
let offsetX = 0;
let offsetY = 0;
const MIN_SCALE = 0.5;
const MAX_SCALE = 5;
const offsetRef = useRef({ x: 0, y: 0 });
const originPosition = useRef({ x: 0, y: 0 });
const getTransformedPoint = (event: React.MouseEvent<HTMLCanvasElement>) => {
const overlayCanvas = overlayCanvasRef.current!;
const rect = overlayCanvas.getBoundingClientRect();
// 获取鼠标在画布上的原始坐标
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const transformedX = x - overlayCanvas.width / 2;
const transformedY = y - overlayCanvas.height / 2;
console.log('Mouse Coordinates (Transformed):', transformedX, transformedY);
// 考虑缩放比例和偏移量
const transformedX = (x - offsetRef.current.x) / autoScale.current;
const transformedY = (y - offsetRef.current.y) / autoScale.current;
return { x: transformedX, y: transformedY };
};
@@ -113,6 +111,10 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
overlayCtx!.translate(ctx!.canvas.width / 2, ctx!.canvas.height / 2);
ctx!.translate(ctx!.canvas.width / 2, ctx!.canvas.height / 2);
offscreenCtx!.translate(ctx!.canvas.width / 2, ctx!.canvas.height / 2);
originPosition.current = {
x: ctx!.canvas.width / 2,
y: ctx!.canvas.height / 2
};
}, [canvasRef.current, overlayCanvasRef.current]);
const scaleCanvasSize = useCallback(() => {
@@ -439,8 +441,8 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
1
);
canvas!.width = img.width * scale;
canvas!.height = img.height * scale;
canvas!.width = img.width;
canvas!.height = img.height;
autoScale.current = scale / autoScale.current;
@@ -457,6 +459,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
canvas!.width,
canvas!.height
);
canvas!.style.transform = `scale(${scale})`;
resolve();
};
});
@@ -502,61 +505,102 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
const y = event.clientY - rect.top;
// 考虑缩放比例和偏移量
const transformedX = (x - offsetX) / scale;
const transformedY = (y - offsetY) / scale;
const transformedX = (x - offsetRef.current.x) / autoScale.current;
const transformedY = (y - offsetRef.current.y) / autoScale.current;
return { x: transformedX, y: transformedY };
};
const getMousePosition = (event: any) => {
const canvas = overlayCanvasRef.current!;
const rect = canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
const { x: originX, y: originY } = originPosition.current;
const canvasX = (mouseX - originX) / autoScale.current;
const canvasY = (mouseY - originY) / autoScale.current;
return { x: canvasX, y: canvasY };
};
const updateCavasTransform = (event: any) => {
const canvas = overlayCanvasRef.current!;
const rect = canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
// 鼠标在中心坐标系中的位置
const { x: originX, y: originY } = originPosition.current;
const canvasX = (mouseX - originX) / autoScale.current;
const canvasY = (mouseY - originY) / autoScale.current;
// 更新缩放比例
// max scale: 2, min scale: 0.3
const zoomIn = event.deltaY < 0;
let newScale = autoScale.current;
if (zoomIn) {
newScale = Math.min(MAX_SCALE, autoScale.current * zoomFactor);
} else {
newScale = Math.max(MIN_SCALE, autoScale.current / zoomFactor);
}
console.log('New Scale:', newScale);
autoScale.current = newScale;
// 更新原点
const neworiginX = mouseX - canvasX * newScale;
const neworiginY = mouseY - canvasY * newScale;
originPosition.current = { x: neworiginX, y: neworiginY };
const overlayCtx = overlayCanvasRef.current!.getContext('2d')!;
const canvasCtx = canvasRef.current!.getContext('2d')!;
// 更新 Canvas 的变换
overlayCtx.setTransform(
autoScale.current,
0,
0,
autoScale.current,
neworiginX,
neworiginY
);
canvasCtx.setTransform(
autoScale.current,
0,
0,
autoScale.current,
neworiginX,
neworiginY
);
};
const handleOnWheel = (event: WheelEvent) => {
event.preventDefault();
const zoomFactor = event.deltaY < 0 ? 1.1 : 0.9;
const newScale = Math.min(
MAX_SCALE,
Math.max(MIN_SCALE, scale * zoomFactor)
);
updateCavasTransform(event);
const rect = canvasRef.current!.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
// 计算新的偏移量
offsetX = mouseX - (mouseX - offsetX) * (newScale / scale);
offsetY = mouseY - (mouseY - offsetY) * (newScale / scale);
// 更新缩放比例
scale = newScale;
// 设置画布的变换
const overlayCtx = overlayCanvasRef.current!.getContext('2d')!;
overlayCtx.setTransform(scale, 0, 0, scale, offsetX, offsetY);
const canvasCtx = canvasRef.current!.getContext('2d')!;
canvasCtx.setTransform(scale, 0, 0, scale, offsetX, offsetY);
overlayCanvasRef.current!.style.transform = `scale(${scale})`;
canvasRef.current!.style.transform = `scale(${scale})`;
console.log('Zoom:', scale, offsetX, offsetY);
overlayCanvasRef.current!.style.transform = `scale(${autoScale.current})`;
canvasRef.current!.style.transform = `scale(${autoScale.current})`;
};
useEffect(() => {
initializeImage();
}, [initializeImage]);
// useEffect(() => {
// const container = containerRef.current;
// if (!container) return;
// if (container) {
// resizeObserver.current = new ResizeObserver(
// _.throttle(handleResize, 100)
// );
// resizeObserver.current.observe(container);
// }
useEffect(() => {
const container = containerRef.current;
if (!container) return;
if (container) {
resizeObserver.current = new ResizeObserver(
_.throttle(handleResize, 100)
);
resizeObserver.current.observe(container);
}
// return () => {
// resizeObserver.current?.disconnect();
// };
// }, [handleResize, containerRef.current]);
return () => {
resizeObserver.current?.disconnect();
};
}, [handleResize, containerRef.current]);
useEffect(() => {
createOffscreenCanvas();
src/components/logs-viewer/logs-pagination.tsx
+38 -16
View File
@@ -1,4 +1,8 @@
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import {
DownOutlined,
UpOutlined,
VerticalLeftOutlined
} from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Tooltip } from 'antd';
import React from 'react';
@@ -10,10 +14,11 @@ interface LogsPaginationProps {
pageSize?: number;
onPrev?: () => void;
onNext?: () => void;
onBackend?: () => void;
}
const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
const { page, total, pageSize, onNext, onPrev } = props;
const { page, total, pageSize, onNext, onPrev, onBackend } = props;
const intl = useIntl();
const handleOnPrev = () => {
@@ -27,6 +32,7 @@ const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
return (
<div className="pagination">
<Tooltip
placement="left"
title={intl.formatMessage(
{ id: 'models.logs.pagination.prev' },
{ lines: pageSize }
@@ -46,21 +52,37 @@ const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
<span className="total">{total}</span>
</span>
{page < total && (
<Tooltip
title={intl.formatMessage(
{ id: 'models.logs.pagination.next' },
{ lines: pageSize }
)}
>
<Button
onClick={handleOnNext}
type="text"
shape="circle"
style={{ color: 'rgba(255,255,255,.7)' }}
<>
<Tooltip
placement="left"
title={intl.formatMessage(
{ id: 'models.logs.pagination.next' },
{ lines: pageSize }
)}
>
<DownOutlined />
</Button>
</Tooltip>
<Button
onClick={handleOnNext}
type="text"
shape="circle"
style={{ color: 'rgba(255,255,255,.7)' }}
>
<DownOutlined />
</Button>
</Tooltip>
<Tooltip
title={intl.formatMessage({ id: 'models.logs.pagination.last' })}
placement="left"
>
<Button
onClick={onBackend}
type="text"
shape="circle"
style={{ color: 'rgba(255,255,255,.7)', marginTop: 10 }}
>
<VerticalLeftOutlined rotate={90} />
</Button>
</Tooltip>
</>
)}
</div>
);
src/components/logs-viewer/parse-worker.ts
+5
View File
@@ -150,5 +150,10 @@ self.onmessage = function (event) {
content: item.content,
uid: item.uid
}));
console.log('result===', result);
self.postMessage(result);
};
self.onerror = function (event) {
console.error('parse logs error===', event);
};
src/components/logs-viewer/styles/pagination.less
+4
View File
@@ -11,6 +11,10 @@
background-color: rgba(71, 71, 71, 100%) !important;
}
.ant-btn {
background-color: rgba(71, 71, 71, 50%) !important;
}
.pages {
display: flex;
justify-content: center;
src/components/logs-viewer/virtual-log-list.tsx
+44 -23
View File
@@ -49,6 +49,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
abort() {
chunkRequedtRef.current?.current?.abort?.();
logParseWorker.current?.terminate?.();
}
}));
@@ -65,6 +66,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
logParseWorker.current.onmessage = (event: any) => {
const res = event.data;
console.log('res===', res);
setLogs(res);
};
@@ -73,7 +75,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
logParseWorker.current.terminate();
}
};
}, [setLogs, logParseWorker.current]);
}, []);
const debounceLoading = _.debounce(() => {
setLoading(false);
@@ -88,26 +90,26 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
const getLastPage = (data: string) => {
const list = _.split(data.trim(), '\n');
if (!enableScorllLoad) {
return list.join('\n');
}
if (list.length <= pageSize) {
setTotalPage(1);
return data;
}
let result = '';
console.log('getlastPage===', list.length, enableScorllLoad, pageSize);
setLoading(true);
const totalPage = Math.ceil(list.length / pageSize);
setTotalPage(totalPage);
setPage(() => totalPage);
pageRef.current = totalPage;
totalPageRef.current = totalPage;
const lastPage = list.slice(-pageSize).join('\n');
console.log('list.length===', list.length, totalPage, page);
if (!enableScorllLoad) {
result = list.join('\n');
} else if (list.length <= pageSize) {
setTotalPage(1);
result = data;
} else {
const totalPage = Math.ceil(list.length / pageSize);
setTotalPage(totalPage);
setPage(() => totalPage);
pageRef.current = totalPage;
totalPageRef.current = totalPage;
const lastPage = list.slice(-pageSize).join('\n');
result = lastPage;
}
debounceLoading();
return lastPage;
return result;
};
const getCurrentPage = () => {
@@ -116,7 +118,6 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
if (newPage < 1) {
newPage = 1;
}
console.log('currentpage===', newPage);
const start = (newPage - 1) * pageSize;
const end = newPage * pageSize;
const currentPage = list.slice(start, end).join('\n');
@@ -164,6 +165,20 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
});
}, [totalPage, page, pageSize]);
const handleonBackend = useCallback(() => {
const list = _.split(cacheDataRef.current.trim(), '\n');
let newPage = totalPage;
const start = (newPage - 1) * pageSize;
const end = newPage * pageSize;
const nextPage = list.slice(start, end).join('\n');
setPage(() => newPage);
setScrollPos(['bottom', newPage]);
pageRef.current = newPage;
logParseWorker.current.postMessage({
inputStr: nextPage
});
}, [totalPage, page, pageSize]);
const debounceParseData = _.debounce(() => {
if (pageRef.current === totalPageRef.current) {
logParseWorker.current.postMessage({
@@ -175,20 +190,25 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
}, 100);
const updateContent = (inputStr: string) => {
console.log('inputStr===', inputStr);
const data = inputStr.replace(replaceLineRegex, '\n');
if (isClean(data)) {
cacheDataRef.current = data;
} else {
cacheDataRef.current += data;
}
console.log('page===', pageRef.current, totalPageRef.current);
debounceParseData();
if (pageRef.current === totalPageRef.current) {
logParseWorker.current.postMessage({
inputStr: getLastPage(cacheDataRef.current)
});
} else {
getCurrentPage();
}
};
const createChunkConnection = async () => {
cacheDataRef.current = '';
chunkRequedtRef.current?.current?.abort?.();
chunkRequedtRef.current = setChunkFetch({
url,
params: {
@@ -287,6 +307,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
pageSize={pageSize}
onNext={getNextPage}
onPrev={getPrePage}
onBackend={handleonBackend}
></LogsPagination>
</div>
</div>
src/locales/en-US/models.ts
+1
View File
@@ -74,6 +74,7 @@ export default {
'More {backend} parameter details',
'models.logs.pagination.prev': 'Previous {lines} Lines',
'models.logs.pagination.next': 'Next {lines} Lines',
'models.logs.pagination.last': 'Last Page',
'models.form.localPath': 'Local Path',
'models.form.filePath': 'Model Path',
'models.form.backendVersion': 'Backend Version',
src/locales/en-US/playground.ts
+1 -1
View File
@@ -85,7 +85,7 @@ export default {
'Upload an audio file or start recording',
'playground.audio.enablemic':
"Enable microphone access in your browser's settings.",
'playground.audio.enablemic.doc': 'Refer to',
'playground.audio.enablemic.doc': 'Refer to this link',
'playground.audio.startrecord': 'Start Recording',
'playground.audio.stoprecord': 'Stop Recording',
'playground.audio.generating.tips': 'Generated text will appear here.',
src/locales/en-US/resources.ts
+1 -2
View File
@@ -55,6 +55,5 @@ export default {
'Select a label to generate the command and copy it using the copy button.',
'resources.worker.script.install': 'Script Installation',
'resources.worker.container.install': 'Container Installation(Linux Only)',
'resources.worker.cann.tips':
'Set <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES</span> to 0 for a single GPU or to the index range (e.g., 0-7 for 8 GPUs) for multiple GPUs.'
'resources.worker.cann.tips': `Set <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES</span> to the required GPU indices. For GPU0 to GPU3, use <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES=0,1,2,3</span> or <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES=0-3</span>.`
};
src/locales/zh-CN/models.ts
+1
View File
@@ -71,6 +71,7 @@ export default {
'models.form.backend_parameters.vllm.tips': '更多 {backend} 参数说明查看',
'models.logs.pagination.prev': '上一 {lines} 行',
'models.logs.pagination.next': '下一 {lines} 行',
'models.logs.pagination.last': '最后一页',
'models.form.localPath': '本地路径',
'models.form.filePath': '模型路径',
'models.form.backendVersion': '后端版本',
src/locales/zh-CN/resources.ts
+1 -1
View File
@@ -54,5 +54,5 @@ export default {
'resources.worker.script.install': '脚本安装',
'resources.worker.container.install': '容器安装(仅支持 Linux)',
'resources.worker.cann.tips':
'若 GPU 数量为 1，则设 ASCEND_VISIBLE_DEVICES=0；若大于 1，则设为索引范围（如 8 张为 0-7）'
'按需要挂载的 GPU index 设置 <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES</span>，如需挂载 GPU0 - GPU3，则设为 <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES=0,1,2,3</span> 或 <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES=0-3</span>'
};
src/pages/dashboard/components/active-table.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ const ActiveTable = () => {
render: (text: any, record: any) => {
return (
<AutoTooltip ghost>
<span>{text}</span>
<span>{text || 'N/A'}</span>
</AutoTooltip>
);
}
src/pages/llmodels/apis/index.ts
+1 -1
View File
@@ -151,7 +151,7 @@ export async function queryModelScopeModels(
config?: any
) {
const tagsCriterion = params.tags?.map((tag: string) => {
return { category: 'tags', predicate: 'contains', values: [tag] };
return { category: 'libraries', predicate: 'contains', values: [tag] };
});
const tasksCriterion = params.tasks?.map((task: string) => {
return { category: 'tasks', predicate: 'contains', values: [task] };
src/pages/llmodels/components/advance-config.tsx
-1
View File
@@ -303,7 +303,6 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
{ backend: backendParamsTips.backend || '' }
)}{' '}
<Typography.Link
style={{ color: 'var(--ant-blue-4)' }}
href={backendParamsTips.link}
target="_blank"
>
src/pages/llmodels/components/hf-model-file.tsx
+10 -2
View File
@@ -125,6 +125,10 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
return [...shardFileListResult, ...newGeneralFileList];
}, []);
const hfFileFilter = (file: any) => {
return filterRegGGUF.test(file.path) || _.includes(file.path, '.gguf');
};
// hugging face files
const getHuggingfaceFiles = async () => {
try {
@@ -139,7 +143,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
});
const list = _.filter(fileList, (file: any) => {
return filterRegGGUF.test(file.path) || _.includes(file.path, '.gguf');
return hfFileFilter(file);
});
return list;
@@ -148,6 +152,10 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
}
};
const modelscopeFileFilter = (file: any) => {
return filterRegGGUF.test(file.Path) && file.Type === 'blob';
};
// modelscope files
const getModelScopeFiles = async () => {
try {
@@ -161,7 +169,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
}
);
const fileList = _.filter(_.get(data, ['Data', 'Files']), (file: any) => {
return filterRegGGUF.test(file.Path) && file.Type === 'blob';
return modelscopeFileFilter(file);
});
const list = _.map(fileList, (item: any) => {
src/pages/llmodels/components/view-logs-modal.tsx
+2
View File
@@ -51,6 +51,8 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
url: `${MODELS_API}/${props.modelId}/instances`,
handler: updateHandler
});
} else {
logsViewerRef.current?.abort();
}
return () => {
requestRef.current?.current?.cancel?.();
src/pages/playground/components/audio-input.tsx
+1 -1
View File
@@ -302,7 +302,7 @@ const AudioInput: React.FC<AudioInputProps> = (props) => {
href={`${externalRefer.audioPermission}`}
target="_blank"
style={{
color: 'var(--ant-blue-5)'
paddingInline: 0
}}
>
{intl.formatMessage({ id: 'playground.audio.enablemic.doc' })}
src/pages/playground/components/params-settings.tsx
+27 -19
View File
@@ -6,7 +6,7 @@ import { InfoCircleOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Form, InputNumber, Slider, Tooltip } from 'antd';
import _ from 'lodash';
import { memo, useCallback, useEffect, useId } from 'react';
import { memo, useCallback, useEffect, useId, useState } from 'react';
import CustomLabelStyles from '../style/custom-label.less';
type ParamsSettingsFormProps = {
@@ -29,12 +29,13 @@ type ParamsSettingsProps = {
globalParams?: ParamsSettingsFormProps;
};
const METAKEYS: Record<string, string> = {
const METAKEYS: Record<string, any> = {
seed: 'seed',
stop: 'stop',
temperature: 'temperature',
top_p: 'top_p',
max_tokens: 'n_ctx'
n_slot_ctx: 'max_tokens',
max_model_len: 'max_tokens'
};
const ParamsSettings: React.FC<ParamsSettingsProps> = ({
@@ -56,6 +57,8 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
};
const [form] = Form.useForm();
const formId = useId();
const [metaData, setMetaData] = useState<Record<string, any>>({});
const [firstLoad, setFirstLoad] = useState(true);
const handleOnFinish = (values: any) => {
console.log('handleOnFinish', values);
@@ -97,18 +100,16 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
const handleModelChange = (val: string) => {
const model = _.find(modelList, { value: val });
const modelMeta = model?.meta || {};
const keys = Object.keys(METAKEYS).map((k: string) => {
return METAKEYS[k];
});
const modelMetaKeys = _.pick(modelMeta, keys);
const obj = _.reduce(
METAKEYS,
(result: any, value: any, key: string) => {
result[key] = modelMetaKeys[value];
return result;
},
{}
);
const modelMetaValue = _.pick(modelMeta, _.keys(METAKEYS));
const obj = Object.entries(METAKEYS).reduce((acc: any, [key, value]) => {
const val = modelMetaValue[key];
if (val && _.hasIn(modelMetaValue, key)) {
acc[value] = val;
}
return acc;
}, {});
form.setFieldsValue(obj);
setMetaData(obj);
return obj;
};
@@ -127,11 +128,14 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
...mergeData,
model: model
});
setFirstLoad(false);
}, [modelList, showModelSelector, selectedModel]);
useEffect(() => {
form.setFieldsValue(globalParams);
}, [globalParams]);
if (!firstLoad) {
form.setFieldsValue(globalParams);
}
}, [globalParams, firstLoad]);
const renderLabel = (args: {
field: string;
@@ -196,7 +200,11 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
}
]}
>
<SealSelect showSearch={true} options={modelList}></SealSelect>
<SealSelect
showSearch={true}
options={modelList}
onChange={handleModelChange}
></SealSelect>
</Form.Item>
</>
)}
@@ -246,7 +254,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
>
<Slider
defaultValue={2048}
max={16 * 1024}
max={metaData.max_tokens || 16 * 1024}
step={1}
style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
tooltip={{ open: false }}
src/pages/resources/components/container-install.tsx
+1 -1
View File
@@ -80,7 +80,7 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
</ul>
<h3>1. {intl.formatMessage({ id: 'resources.worker.add.step1' })}</h3>
<HighlightCode
code={addWorkerGuide.mac.getToken}
code={addWorkerGuide.container.getToken}
theme="dark"
></HighlightCode>
<h3>
src/pages/resources/config/index.ts
+4
View File
@@ -56,6 +56,10 @@ export const addWorkerGuide: Record<string, any> = {
registerWorker(params: { server: string; tag: string; token: string }) {
return `docker run -d --ipc=host --network=host gpustack/gpustack:${params.tag} --server-url ${params.server} --token ${params.token}`;
}
},
container: {
getToken:
'docker run -it ${gpustack_container_id} cat /var/lib/gpustack/token'
}
};