From 4391705c9a0df736c8567b009fd0fa2942a9b819 Mon Sep 17 00:00:00 2001 From: jialin Date: Fri, 20 Dec 2024 18:26:11 +0800 Subject: [PATCH] chore: model item action list order --- package.json | 1 + pnpm-lock.yaml | 7 +++ src/hooks/use-driver.ts | 35 +++++++++++ src/layouts/index.tsx | 1 + src/locales/en-US/models.ts | 3 +- src/locales/en-US/playground.ts | 4 +- src/locales/zh-CN/models.ts | 3 +- src/locales/zh-CN/playground.ts | 2 +- .../llmodels/components/advance-config.tsx | 36 ++--------- src/pages/llmodels/components/data-form.tsx | 45 ++++++++++++++ .../llmodels/components/deploy-modal.tsx | 32 +++++++++- src/pages/llmodels/components/gpu-card.tsx | 2 +- .../llmodels/components/search-model.tsx | 50 ++++++++------- src/pages/llmodels/components/table-list.tsx | 62 +++++++++---------- .../llmodels/components/update-modal.tsx | 46 +++++++++++++- src/pages/resources/components/gpus.tsx | 2 +- 16 files changed, 235 insertions(+), 96 deletions(-) create mode 100644 src/hooks/use-driver.ts diff --git a/package.json b/package.json index ac3db5df..25a67dc4 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "clipboard": "^2.0.11", "crypto-js": "^4.2.0", "dayjs": "^1.11.11", + "driver.js": "^1.3.1", "echarts": "^5.5.1", "epubjs": "^0.3.93", "has-ansi": "^5.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6ea43b22..f21e2108 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -68,6 +68,9 @@ dependencies: dayjs: specifier: ^1.11.11 version: 1.11.11 + driver.js: + specifier: ^1.3.1 + version: 1.3.1 echarts: specifier: ^5.5.1 version: 5.5.1 @@ -9330,6 +9333,10 @@ packages: tslib: 2.6.2 dev: false + /driver.js@1.3.1: + resolution: {integrity: sha512-MvUdXbqSgEsgS/H9KyWb5Rxy0aE6BhOVT4cssi2x2XjmXea6qQfgdx32XKVLLSqTaIw7q/uxU5Xl3NV7+cN6FQ==, tarball: https://registry.npmjs.org/driver.js/-/driver.js-1.3.1.tgz} + dev: false + /duck@0.1.12: resolution: {integrity: sha512-wkctla1O6VfP89gQ+J/yDesM0S7B7XLXjKGzXxMDVFg7uEn706niAtyYovKbyq1oT9YwDcly721/iUWoc8MVRg==, tarball: https://registry.npmjs.org/duck/-/duck-0.1.12.tgz} dependencies: diff --git a/src/hooks/use-driver.ts b/src/hooks/use-driver.ts new file mode 100644 index 00000000..e5b1718f --- /dev/null +++ b/src/hooks/use-driver.ts @@ -0,0 +1,35 @@ +import { useIntl } from '@umijs/max'; +import { driver, type Config } from 'driver.js'; +import { useEffect, useRef } from 'react'; + +export const useDriver = (config?: Config) => { + const intl = useIntl(); + const driverRef = useRef(null); + + const handleDoNotShowAgain = () => {}; + + const init = () => { + driverRef.current = driver({ + overlayOpacity: 0.2, + animate: false, + ...config + }); + }; + + const start = () => { + if (!driverRef.current) { + init(); + } + driverRef.current.drive(); + }; + + useEffect(() => { + return () => { + driverRef.current?.destroy(); + }; + }, []); + + return { start, initDriver: init, driver: driverRef.current }; +}; + +export default useDriver; diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 349f12b0..cbad79e9 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -23,6 +23,7 @@ import { type IRoute } from '@umijs/max'; import { Button, Modal } from 'antd'; +import 'driver.js/dist/driver.css'; import { useAtom } from 'jotai'; import 'overlayscrollbars/overlayscrollbars.css'; import { useCallback, useEffect, useMemo, useState } from 'react'; diff --git a/src/locales/en-US/models.ts b/src/locales/en-US/models.ts index 7158915a..178ad906 100644 --- a/src/locales/en-US/models.ts +++ b/src/locales/en-US/models.ts @@ -77,5 +77,6 @@ export default { 'models.form.filePath': 'Model Path', 'models.form.backendVersion': 'Backend Version', 'models.form.backendVersion.tips': - 'Pin a specific version to keep the backend stable across GPUStack upgrades.' + 'Pin a specific version to keep the backend stable across GPUStack upgrades.', + 'models.form.gpuselector': 'GPU Selector' }; diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts index 6053d66e..9a9704a7 100644 --- a/src/locales/en-US/playground.ts +++ b/src/locales/en-US/playground.ts @@ -98,8 +98,8 @@ export default { 'playground.multiple.on': 'Enable', 'playground.multiple.off': 'Disable', 'playground.image.params.sampler': 'Sampler', - 'playground.image.params.schedule': 'Schedule', - 'playground.image.params.samplerSteps': 'Sampler Steps', + 'playground.image.params.schedule': 'Scheduler', + 'playground.image.params.samplerSteps': 'Sampling Steps', 'playground.image.params.seed': 'Seed', 'playground.image.params.randomseed': 'Random Seed', 'playground.image.params.negativePrompt': 'Negative Prompt', diff --git a/src/locales/zh-CN/models.ts b/src/locales/zh-CN/models.ts index 077b4239..0af4a684 100644 --- a/src/locales/zh-CN/models.ts +++ b/src/locales/zh-CN/models.ts @@ -74,5 +74,6 @@ export default { 'models.form.filePath': '模型路径', 'models.form.backendVersion': '后端版本', 'models.form.backendVersion.tips': - '固定指定版本以保持后端在 GPUStack 升级过程中的稳定性' + '固定指定版本以保持后端在 GPUStack 升级过程中的稳定性', + 'models.form.gpuselector': 'GPU 选择器' }; diff --git a/src/locales/zh-CN/playground.ts b/src/locales/zh-CN/playground.ts index de6f6739..7dde7eae 100644 --- a/src/locales/zh-CN/playground.ts +++ b/src/locales/zh-CN/playground.ts @@ -95,7 +95,7 @@ export default { 'playground.multiple.on': '开启', 'playground.multiple.off': '关闭', 'playground.image.params.sampler': '采样方法', - 'playground.image.params.schedule': '调度', + 'playground.image.params.schedule': '调度器', 'playground.image.params.samplerSteps': '迭代步数', 'playground.image.params.seed': '种子', 'playground.image.params.randomseed': '随机种子', diff --git a/src/pages/llmodels/components/advance-config.tsx b/src/pages/llmodels/components/advance-config.tsx index d48f2f4c..d8d6408f 100644 --- a/src/pages/llmodels/components/advance-config.tsx +++ b/src/pages/llmodels/components/advance-config.tsx @@ -2,7 +2,6 @@ import LabelSelector from '@/components/label-selector'; import ListInput from '@/components/list-input'; import SealInput from '@/components/seal-form/seal-input'; import SealSelect from '@/components/seal-form/seal-select'; -import { PageAction } from '@/config'; import { PageActionType } from '@/config/types'; import { InfoCircleOutlined, RightOutlined } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; @@ -21,7 +20,6 @@ import React, { useCallback, useMemo } from 'react'; import { backendOptionsMap, backendParamsHolderTips, - modelSourceMap, placementStrategyOptions } from '../config'; import llamaConfig from '../config/llama-config'; @@ -249,7 +247,10 @@ const AdvanceConfig: React.FC = (props) => { } ]} > - + {gpuOptions.map((item) => ( @@ -258,35 +259,6 @@ const AdvanceConfig: React.FC = (props) => { )} - - - = forwardRef((props, ref) => { return null; }, [props.source, isGGUF, intl]); + const handleBackendChange = useCallback((val: string) => { + if (val === backendOptionsMap.llamaBox) { + form.setFieldsValue({ + distributed_inference_across_workers: true, + cpu_offloading: true + }); + } + form.setFieldValue('backend_version', ''); + }, []); + const handleOk = (formdata: FormData) => { const gpu = _.find(gpuOptions, (item: any) => { return item.value === formdata.gpu_selector; @@ -400,6 +411,7 @@ const DataForm: React.FC = forwardRef((props, ref) => { ); } }, [isGGUF, modelTask]); + useEffect(() => { handleOnSelectModel(); }, [props.selectedModel.name]); @@ -496,6 +508,39 @@ const DataForm: React.FC = forwardRef((props, ref) => { min={0} > + + + name="description"> void; }; +const steps = [ + { + element: '#filterGGUF', + popover: { + title: '筛选模型', + description: 'Select a model from the list' + } + }, + { + element: '#backend-field', + popover: { + title: '选择推理后端', + description: 'Select a model from the list' + } + } +]; + const AddModal: React.FC = (props) => { const { title, @@ -40,7 +58,9 @@ const AddModal: React.FC = (props) => { modelSourceMap.huggingface_value, modelSourceMap.modelscope_value ]; - const uid = useId(); + const { start } = useDriver({ + steps + }); const form = useRef({}); const intl = useIntl(); const [selectedModel, setSelectedModel] = useState({}); @@ -48,9 +68,11 @@ const AddModal: React.FC = (props) => { const [loadingModel, setLoadingModel] = useState(false); const [isGGUF, setIsGGUF] = useState(false); const modelFileRef = useRef(null); + const [loadfinish, setLoadfinish] = useState(false); const handleSelectModelFile = useCallback((item: any) => { form.current?.setFieldValue?.('file_name', item.fakeName); + setLoadfinish(true); }, []); const handleOnSelectModel = (item: any) => { @@ -104,6 +126,12 @@ const AddModal: React.FC = (props) => { }; }, [open, source]); + // useEffect(() => { + // if (open && loadfinish) { + // start(); + // } + // }, [loadfinish, open]); + return ( {data?.memory?.used ? _.round(data?.memory?.utilization_rate || 0, 2) - : _.round(data.memory?.allocated / data.memory?.total, 2)} + : _.round(data.memory?.allocated / data.memory?.total, 2) * 100} % diff --git a/src/pages/llmodels/components/search-model.tsx b/src/pages/llmodels/components/search-model.tsx index dbd09931..09a49da1 100644 --- a/src/pages/llmodels/components/search-model.tsx +++ b/src/pages/llmodels/components/search-model.tsx @@ -243,31 +243,35 @@ const SearchModel: React.FC = (props) => { - - -
- {intl.formatMessage({ id: 'models.search.gguf.tips' })} -
-
- {intl.formatMessage({ id: 'models.search.vllm.tips' })} -
+ + + - {intl.formatMessage({ id: 'models.search.voxbox.tips' })} +
+ {intl.formatMessage({ id: 'models.search.gguf.tips' })} +
+
+ {intl.formatMessage({ id: 'models.search.vllm.tips' })} +
+
+ {intl.formatMessage({ + id: 'models.search.voxbox.tips' + })} +
- - } - > - GGUF - - - + } + > + GGUF + + + +