diff --git a/src/components/card-wrapper/simple-card.tsx b/src/components/card-wrapper/simple-card.tsx index e0c5e60e..624644fd 100644 --- a/src/components/card-wrapper/simple-card.tsx +++ b/src/components/card-wrapper/simple-card.tsx @@ -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 (
{title}
-
{content}
+
+ + {content} +
); }; 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} > ))} diff --git a/src/components/echarts/config.ts b/src/components/echarts/config.ts index 37a19614..f08eecdc 100644 --- a/src/components/echarts/config.ts +++ b/src/components/echarts/config.ts @@ -41,18 +41,23 @@ export default function useChartConfig() { borderColor: 'transparent', formatter(params: any, callback?: (val: any) => any) { let result = `${params[0].axisValue}`; + params.forEach((item: any) => { let value = isFunction(callback) ? callback?.(item.data.value) : item.data.value; + + const borderRadius = item.seriesType === 'bar' ? '2px' : '8px'; + result += ` - - - ${item.seriesName}: - - ${value} + + + ${item.seriesName}: + + ${value} `; }); + return `
${result}
`; } }; diff --git a/src/components/echarts/mix-line-bar.tsx b/src/components/echarts/mix-line-bar.tsx index 76a3f92c..4d776bec 100644 --- a/src/components/echarts/mix-line-bar.tsx +++ b/src/components/echarts/mix-line-bar.tsx @@ -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: [] diff --git a/src/components/image-editor/index.tsx b/src/components/image-editor/index.tsx index b66f1b1c..3c17adcb 100644 --- a/src/components/image-editor/index.tsx +++ b/src/components/image-editor/index.tsx @@ -433,7 +433,6 @@ const CanvasImageEditor: React.FC = forwardRef( fitView(); setActiveScale(autoScale.current); updateCursorSize(); - redrawStrokes(strokesRef.current); }; const handleBrushSizeChange = (value: number) => { @@ -458,7 +457,14 @@ const CanvasImageEditor: React.FC = 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 = forwardRef( mouseDownState.current = false; }; - window.addEventListener('keydown', handleUndoShortcut); // mouse down window.addEventListener('mousedown', handleMouseDown); @@ -475,7 +480,7 @@ const CanvasImageEditor: React.FC = forwardRef( window.addEventListener('mouseup', handleMouseUp); return () => { clearTimeout(timer.current); - window.removeEventListener('keydown', handleUndoShortcut); + window.removeEventListener('mousedown', handleMouseDown); window.removeEventListener('mouseup', handleMouseUp); }; diff --git a/src/hooks/use-request-token.ts b/src/hooks/use-request-token.ts index c53f26d6..2be48126 100644 --- a/src/hooks/use-request-token.ts +++ b/src/hooks/use-request-token.ts @@ -11,19 +11,17 @@ export function useCancelToken() { const { source } = axiso.CancelToken; const requestToken = useRef(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(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 }; +} diff --git a/src/pages/dashboard/components/usage-inner/index.tsx b/src/pages/dashboard/components/usage-inner/index.tsx index 10030815..e8356bb6 100644 --- a/src/pages/dashboard/components/usage-inner/index.tsx +++ b/src/pages/dashboard/components/usage-inner/index.tsx @@ -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' })} - + > */} { }; 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 = (props) => { const { requestData, tokenData, xAxisData } = props; - const intl = useIntl(); return ( - {/* - - - - - - - */} - {/* */} + = (props) => { return ( - + ); }; diff --git a/src/pages/dashboard/components/usage-inner/use-usage-data.ts b/src/pages/dashboard/components/usage-inner/use-usage-data.ts index 8a1eea9f..4b9f4266 100644 --- a/src/pages/dashboard/components/usage-inner/use-usage-data.ts +++ b/src/pages/dashboard/components/usage-inner/use-usage-data.ts @@ -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: { diff --git a/src/pages/dashboard/config/index.ts b/src/pages/dashboard/config/index.ts index 0e5f9d84..4391f5c4 100644 --- a/src/pages/dashboard/config/index.ts +++ b/src/pages/dashboard/config/index.ts @@ -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)' +}; diff --git a/src/pages/llmodels/components/deploy-builtin-modal.tsx b/src/pages/llmodels/components/deploy-builtin-modal.tsx index e3e8901b..bcf1600e 100644 --- a/src/pages/llmodels/components/deploy-builtin-modal.tsx +++ b/src/pages/llmodels/components/deploy-builtin-modal.tsx @@ -128,6 +128,8 @@ const AddModal: React.FC = (props) => { 'backend_version', 'backend_parameters' ]); + + // if the backend_parameters is empty, use the defaultSpec.backend_parameters return { ...currentData, backend_parameters: diff --git a/src/pages/llmodels/components/deploy-modal.tsx b/src/pages/llmodels/components/deploy-modal.tsx index bac027dd..6ffe8012 100644 --- a/src/pages/llmodels/components/deploy-modal.tsx +++ b/src/pages/llmodels/components/deploy-modal.tsx @@ -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 = { + model: 'model', + file: 'file', + form: 'form' +}; + const AddModal: FC = (props) => { const { title, @@ -118,7 +126,7 @@ const AddModal: FC = (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 = (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 = (props) => { allValues: any; source: SourceType; }) => { - setEvaluteState('form'); + setEvaluteState(EvaluateProccess.form); handleOnValuesChangeBefore(data); }; @@ -186,7 +194,7 @@ const AddModal: FC = (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 = (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 = (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 = (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?.(); } }; diff --git a/src/pages/llmodels/components/hf-model-file.tsx b/src/pages/llmodels/components/hf-model-file.tsx index cb977934..0fe8634f 100644 --- a/src/pages/llmodels/components/hf-model-file.tsx +++ b/src/pages/llmodels/components/hf-model-file.tsx @@ -313,7 +313,7 @@ const HFModelFile: React.FC = 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 = 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 = forwardRef((props, ref) => { isEvaluating={isEvaluating} active={item.path === current} handleSelectModelFile={handleSelectModelFile} - handleOnEnter={handleOnEnter} > ); })} diff --git a/src/pages/llmodels/components/model-file-item.tsx b/src/pages/llmodels/components/model-file-item.tsx index 17e993e7..7acdf4dc 100644 --- a/src/pages/llmodels/components/model-file-item.tsx +++ b/src/pages/llmodels/components/model-file-item.tsx @@ -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 = (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 = (props) => { })} tabIndex={0} onClick={() => handleSelectModelFile(item)} - onKeyDown={(e) => handleOnEnter(e, item)} >
{item.path}
diff --git a/src/pages/playground/components/ground-stt.tsx b/src/pages/playground/components/ground-stt.tsx index 266c510d..e4318fdf 100644 --- a/src/pages/playground/components/ground-stt.tsx +++ b/src/pages/playground/components/ground-stt.tsx @@ -115,7 +115,6 @@ const GroundSTT: React.FC = forwardRef((props, ref) => { setTokenResult(null); setMessageList([]); - cancelRequest(); updateCancelToken(); setRouteCache(routeCachekey['/playground/speech'], true);