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

fix: image editor fit view incorrect, do not query gguf files when gguf unchecked

Browse Source
This commit is contained in:
jialin
2025-06-09 18:45:47 +08:00
parent e69b7dfd6a
commit 4dcb0bcfed
15 changed files with 158 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/card-wrapper/simple-card.tsx
+36 -4
View File
@@ -9,7 +9,6 @@ const SimpleCardItemWrapper = styled.div`
width: 100%;
height: 100%;
gap: 16px;
margin-bottom: 16px;
`;
const useStyles = createStyles(({ css, token }) => ({
@@ -32,8 +31,24 @@ const useStyles = createStyles(({ css, token }) => ({
font-weight: var(--font-weight-medium);
}
.content {
display: flex;
justify-content: center;
align-items: center;
font-size: ${token.fontSize}px;
color: ${token.colorTextSecondary};
gap: 8px;
.icon {
display: inline-block;
width: 10px;
height: 10px;
gap: 10px;
&.roundRect {
border-radius: 2px;
}
&.circle {
border-radius: 50%;
}
}
}
`
}));
@@ -42,21 +57,36 @@ export const SimpleCardItem: React.FC<{
content?: React.ReactNode;
style?: React.CSSProperties;
bordered?: boolean;
color?: string;
iconType?: string;
}> = (props) => {
const { styles, cx } = useStyles();
const { title, content, style, bordered } = props;
const { title, content, style, bordered, iconType, color } = props;
return (
<div className={cx({ bordered: bordered }, styles.wrapper)} style={style}>
<div className="title">{title}</div>
<div className="content">{content}</div>
<div className="content">
<span
className={cx([iconType], 'icon')}
style={{
backgroundColor: color || 'transparent'
}}
></span>
<span>{content}</span>
</div>
</div>
);
};
export const SimpleCard: React.FC<{
dataList: { label: string; value: React.ReactNode }[];
dataList: {
label: string;
value: React.ReactNode;
color: string;
iconType: string;
}[];
height?: string | number;
bordered?: boolean;
}> = (props) => {
@@ -70,6 +100,8 @@ export const SimpleCard: React.FC<{
title={item.label}
content={item.value}
bordered={bordered}
color={item.color}
iconType={item.iconType}
></SimpleCardItem>
))}
</SimpleCardItemWrapper>
src/components/echarts/config.ts
+10 -5
View File
@@ -41,18 +41,23 @@ export default function useChartConfig() {
borderColor: 'transparent',
formatter(params: any, callback?: (val: any) => any) {
let result = `<span class="tooltip-x-name">${params[0].axisValue}</span>`;
params.forEach((item: any) => {
let value = isFunction(callback)
? callback?.(item.data.value)
: item.data.value;
const borderRadius = item.seriesType === 'bar' ? '2px' : '8px';
result += `<span class="tooltip-item">
<span class="tooltip-item-name">
<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:${item.color};"></span>
<span class="tooltip-title">${item.seriesName}</span>:
</span>
<span class="tooltip-value">${value}</span>
<span class="tooltip-item-name">
<span style="display:inline-block;margin-right:5px;border-radius:${borderRadius};width:8px;height:8px;background-color:${item.color};"></span>
<span class="tooltip-title">${item.seriesName}</span>:
</span>
<span class="tooltip-value">${value}</span>
</span>`;
});
return `<div class="tooltip-wrapper">${result}</div>`;
}
};
src/components/echarts/mix-line-bar.tsx
+9 -2
View File
@@ -43,7 +43,11 @@ const MixLineBarChart: React.FC<
title: {
text: ''
},
grid,
grid: {
...grid,
top: 20,
bottom: 20
},
tooltip: {
...tooltip,
formatter(params: any) {
@@ -62,7 +66,10 @@ const MixLineBarChart: React.FC<
yAxis,
legend: {
...legend,
data: legendData
data: legendData,
itemGap: 20,
bottom: 5,
show: false
},
series: []
src/components/image-editor/index.tsx
+8 -3
View File
@@ -433,7 +433,6 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
fitView();
setActiveScale(autoScale.current);
updateCursorSize();
redrawStrokes(strokesRef.current);
};
const handleBrushSizeChange = (value: number) => {
@@ -458,7 +457,14 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
undo();
}
};
window.addEventListener('keydown', handleUndoShortcut);
return () => {
window.removeEventListener('keydown', handleUndoShortcut);
};
}, []);
useEffect(() => {
const handleMouseDown = (e: MouseEvent) => {
mouseDownState.current = true;
};
@@ -467,7 +473,6 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
mouseDownState.current = false;
};
window.addEventListener('keydown', handleUndoShortcut);
// mouse down
window.addEventListener('mousedown', handleMouseDown);
@@ -475,7 +480,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
window.addEventListener('mouseup', handleMouseUp);
return () => {
clearTimeout(timer.current);
window.removeEventListener('keydown', handleUndoShortcut);
window.removeEventListener('mousedown', handleMouseDown);
window.removeEventListener('mouseup', handleMouseUp);
};
src/hooks/use-request-token.ts
+35 -7
View File
@@ -11,19 +11,17 @@ export function useCancelToken() {
const { source } = axiso.CancelToken;
const requestToken = useRef<any>(null);
const updateCancelToken = () => {
if (requestToken.current) {
requestToken.current.cancel();
}
requestToken.current = source();
};
const cancelRequest = () => {
if (requestToken.current) {
requestToken.current.cancel();
}
};
const updateCancelToken = () => {
cancelRequest();
requestToken.current = source();
};
const getCanceltToken = () => {
return requestToken.current.token;
};
@@ -38,3 +36,33 @@ export function useCancelToken() {
return { updateCancelToken, cancelRequest, getCanceltToken, source };
}
export function useAbortController() {
const controller = useRef<AbortController | null>(null);
const abortController = () => {
if (controller.current) {
controller.current.abort();
}
};
const getController = () => {
if (!controller.current) {
controller.current = new AbortController();
}
return controller.current;
};
const updateController = () => {
abortController();
controller.current = new AbortController();
};
useEffect(() => {
return () => {
abortController();
};
}, []);
return { getController, updateController, abortController, controller };
}
src/pages/dashboard/components/usage-inner/index.tsx
+2 -3
View File
@@ -1,4 +1,3 @@
import { SimpleCard } from '@/components/card-wrapper/simple-card';
import PageTools from '@/components/page-tools';
import { ExportOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
@@ -95,11 +94,11 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
{intl.formatMessage({ id: 'common.button.export' })}
</Button>
</FilterWrapper>
<SimpleCard
{/* <SimpleCard
dataList={dataList}
height={80}
bordered={true}
></SimpleCard>
></SimpleCard> */}
<RequestTokenInner
requestData={requestTokenData.requestData}
xAxisData={requestTokenData.xAxisData}
src/pages/dashboard/components/usage-inner/request-token-inner.tsx
+21 -26
View File
@@ -1,8 +1,9 @@
import CardWrapper from '@/components/card-wrapper';
import { SimpleCard } from '@/components/card-wrapper/simple-card';
import MixLineBar from '@/components/echarts/mix-line-bar';
import { useIntl } from '@umijs/max';
import dayjs from 'dayjs';
import React from 'react';
import { baseColorMap } from '../../config';
interface RequestTokenInnerProps {
requestData: {
@@ -22,9 +23,24 @@ const labelFormatter = (v: any) => {
};
const dataList = [
{ label: '100M', value: 'Completion Tokens' },
{ label: '50M', value: 'Prompt Tokens' },
{ label: '120K', value: 'API Requests' }
{
label: '100M',
value: 'Completion Tokens',
iconType: 'roundRect',
color: baseColorMap.base
},
{
label: '50M',
value: 'Prompt Tokens',
iconType: 'roundRect',
color: baseColorMap.baseR3
},
{
label: '120K',
value: 'API Requests',
iconType: 'circle',
color: baseColorMap.baseR1
}
];
const legendData = [
@@ -35,31 +51,10 @@ const legendData = [
const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
const { requestData, tokenData, xAxisData } = props;
const intl = useIntl();
return (
<CardWrapper style={{ width: '100%' }}>
{/* <Row style={{ width: '100%' }}>
<Col span={12}>
<LineChart
title={intl.formatMessage({ id: 'dashboard.apirequest' })}
seriesData={requestData}
xAxisData={xAxisData}
height={360}
labelFormatter={labelFormatter}
></LineChart>
</Col>
<Col span={12}>
<BarChart
title={intl.formatMessage({ id: 'dashboard.tokens' })}
seriesData={tokenData}
xAxisData={xAxisData}
height={360}
labelFormatter={labelFormatter}
></BarChart>
</Col>
</Row> */}
{/* <SimpleCard dataList={dataList} height={80}></SimpleCard> */}
<SimpleCard dataList={dataList} height={80}></SimpleCard>
<MixLineBar
chartData={{
line: requestData,
src/pages/dashboard/components/usage-inner/top-user.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ const TopUser: React.FC<TopUserProps> = (props) => {
return (
<CardWrapper>
<HBar seriesData={userData} xAxisData={topUserList} height={512}></HBar>
<HBar seriesData={userData} xAxisData={topUserList} height={496}></HBar>
</CardWrapper>
);
};
src/pages/dashboard/components/usage-inner/use-usage-data.ts
+1 -9
View File
@@ -1,14 +1,6 @@
import dayjs from 'dayjs';
import { useMemo } from 'react';
const baseColorMap = {
baseL2: 'rgba(13,171,219,0.8)',
baseL1: 'rgba(0,34,255,0.8)',
base: 'rgba(0,85,255,0.8)',
baseR1: 'rgba(0,255,233,0.8)',
baseR2: 'rgba(48,0,255,0.8)',
baseR3: 'rgba(85,167,255,0.8)'
};
import { baseColorMap } from '../../config';
interface RequestTokenData {
requestData: {
src/pages/dashboard/config/index.ts
+9
View File
@@ -70,3 +70,12 @@ export const exportTableColumns = [
}
}
];
export const baseColorMap = {
baseL2: 'rgba(13,171,219,0.8)',
baseL1: 'rgba(0,34,255,0.8)',
base: 'rgba(0,85,255,0.8)',
baseR1: 'rgba(0,255,233,0.8)',
baseR2: 'rgba(48,0,255,0.8)',
baseR3: 'rgba(85,167,255,0.8)'
};
src/pages/llmodels/components/deploy-builtin-modal.tsx
+2
View File
@@ -128,6 +128,8 @@ const AddModal: React.FC<AddModalProps> = (props) => {
'backend_version',
'backend_parameters'
]);
// if the backend_parameters is empty, use the defaultSpec.backend_parameters
return {
...currentData,
backend_parameters:
src/pages/llmodels/components/deploy-modal.tsx
+22 -13
View File
@@ -3,7 +3,7 @@ import { PageActionType } from '@/config/types';
import { CloseOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Drawer } from 'antd';
import _, { debounce } from 'lodash';
import _ from 'lodash';
import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import styled from 'styled-components';
import {
@@ -75,6 +75,14 @@ type AddModalProps = {
onCancel: () => void;
};
type EvaluateProccessType = 'model' | 'file' | 'form';
const EvaluateProccess: Record<string, EvaluateProccessType> = {
model: 'model',
file: 'file',
form: 'form'
};
const AddModal: FC<AddModalProps> = (props) => {
const {
title,
@@ -118,7 +126,7 @@ const AddModal: FC<AddModalProps> = (props) => {
model: false,
file: false
});
const evaluateStateRef = useRef<{ state: 'model' | 'file' | 'form' }>({
const evaluateStateRef = useRef<{ state: EvaluateProccessType }>({
state: 'form'
});
@@ -126,7 +134,7 @@ const AddModal: FC<AddModalProps> = (props) => {
*
* @param state target to distinguish the evaluate state
*/
const setEvaluteState = (state: 'model' | 'file' | 'form') => {
const setEvaluteState = (state: EvaluateProccessType) => {
evaluateStateRef.current.state = state;
};
@@ -146,7 +154,7 @@ const AddModal: FC<AddModalProps> = (props) => {
allValues: any;
source: SourceType;
}) => {
setEvaluteState('form');
setEvaluteState(EvaluateProccess.form);
handleOnValuesChangeBefore(data);
};
@@ -186,7 +194,7 @@ const AddModal: FC<AddModalProps> = (props) => {
});
if (item.fakeName) {
setEvaluteState('file');
setEvaluteState(EvaluateProccess.file);
const evaluateRes = await handleEvaluateOnChange?.({
changedValues: {},
allValues: form.current?.form?.getFieldsValue?.(),
@@ -199,7 +207,6 @@ const AddModal: FC<AddModalProps> = (props) => {
/**
* do not reset backend_parameters when select a model file
*/
const formBackendParameters =
form.current?.getFieldValue?.('backend_parameters') || [];
@@ -219,7 +226,7 @@ const AddModal: FC<AddModalProps> = (props) => {
const handleOnSelectModel = (item: any, evaluate?: boolean) => {
// when select a model not from the evaluate result,
if (!evaluate) {
setEvaluteState('model');
setEvaluteState(EvaluateProccess.model);
setSelectedModel(item);
form.current?.form?.resetFields(resetFieldsByModel);
const modelInfo = onSelectModel(item, props.source);
@@ -260,14 +267,16 @@ const AddModal: FC<AddModalProps> = (props) => {
form.current?.submit?.();
};
const debounceFetchModelFiles = debounce(() => {
modelFileRef.current?.fetchModelFiles?.();
}, 100);
const handleSetIsGGUF = (flag: boolean) => {
const handleSetIsGGUF = async (flag: boolean) => {
console.log('handleSetIsGGUF', flag);
setIsGGUF(flag);
await new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, 0);
});
if (flag) {
debounceFetchModelFiles();
modelFileRef.current?.fetchModelFiles?.();
}
};
src/pages/llmodels/components/hf-model-file.tsx
+1 -8
View File
@@ -313,7 +313,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
return sortType === 'size' ? item.size : item.path;
});
handleSelectModelFile(sortList[0]);
handleSelectModelFile(sortList[0] || {});
setDataSource({ fileList: sortList, loading: false });
} catch (error) {
setDataSource({ fileList: [], loading: false });
@@ -329,12 +329,6 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
setDataSource({ ...dataSource, fileList: list });
};
const handleOnEnter = (e: any, item: any) => {
e.stopPropagation();
if (e.key === 'Enter') {
handleSelectModelFile(item);
}
};
useImperativeHandle(ref, () => ({
fetchModelFiles: handleFetchModelFiles
}));
@@ -398,7 +392,6 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
isEvaluating={isEvaluating}
active={item.path === current}
handleSelectModelFile={handleSelectModelFile}
handleOnEnter={handleOnEnter}
></ModelFileItem>
);
})}
src/pages/llmodels/components/model-file-item.tsx
+1 -9
View File
@@ -17,7 +17,6 @@ interface ModelFileItemProps {
isEvaluating: boolean;
active: boolean;
handleSelectModelFile: (item: any) => void;
handleOnEnter: (e: any, item: any) => void;
}
const FilePartsTag = (props: { parts: any[] }) => {
@@ -50,13 +49,7 @@ const FilePartsTag = (props: { parts: any[] }) => {
};
const ModelFileItem: React.FC<ModelFileItemProps> = (props) => {
const {
data: item,
isEvaluating,
active,
handleSelectModelFile,
handleOnEnter
} = props;
const { data: item, isEvaluating, active, handleSelectModelFile } = props;
const getModelQuantizationType = (item: any) => {
let path = item.path;
@@ -88,7 +81,6 @@ const ModelFileItem: React.FC<ModelFileItemProps> = (props) => {
})}
tabIndex={0}
onClick={() => handleSelectModelFile(item)}
onKeyDown={(e) => handleOnEnter(e, item)}
>
<div className="title">{item.path}</div>
<div className="tags flex-between">
src/pages/playground/components/ground-stt.tsx
-1
View File
@@ -115,7 +115,6 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
setTokenResult(null);
setMessageList([]);
cancelRequest();
updateCancelToken();
setRouteCache(routeCachekey['/playground/speech'], true);