diff --git a/src/assets/images/copy-token.png b/src/assets/images/copy-token.png new file mode 100644 index 00000000..2c8ea551 Binary files /dev/null and b/src/assets/images/copy-token.png differ diff --git a/src/assets/images/quick-config.png b/src/assets/images/quick-config.png new file mode 100644 index 00000000..fba01fb1 Binary files /dev/null and b/src/assets/images/quick-config.png differ diff --git a/src/locales/en-US/resources.ts b/src/locales/en-US/resources.ts index 1059ce07..de39aa13 100644 --- a/src/locales/en-US/resources.ts +++ b/src/locales/en-US/resources.ts @@ -72,5 +72,21 @@ export default { 'resources.filter.source': 'Filter by Source', 'resources.modelfiles.delete.tips': 'Also delete the file from disk', 'resources.modelfiles.copy.tips': 'Copy Full Path', - 'resources.filter.path': 'Filter by path' + 'resources.filter.path': 'Filter by path', + 'resources.register.worker.step1': + 'Click the Copy the token menu.', + 'resources.register.worker.step2': + 'Click the Quick Config menu.', + 'resources.register.worker.step3': + 'Click the General tab.', + 'resources.register.worker.step4': + 'Select Worker as the service role.', + 'resources.register.worker.step5': + 'Enter the Server URL.', + 'resources.register.worker.step6': + 'Paste the Token.', + 'resources.register.worker.step7': + 'Click Restart to apply the settings.', + 'resources.register.install.title': 'Install GPUStack', + 'resources.register.download': 'Download the package and install it.' }; diff --git a/src/locales/ja-JP/resources.ts b/src/locales/ja-JP/resources.ts index 215e663a..ba16b5fe 100644 --- a/src/locales/ja-JP/resources.ts +++ b/src/locales/ja-JP/resources.ts @@ -73,5 +73,33 @@ export default { 'resources.filter.source': 'ソースでフィルタ', 'resources.modelfiles.delete.tips': 'ディスクからファイルも削除します', 'resources.modelfiles.copy.tips': 'フルパスをコピー', - 'resources.filter.path': 'パスでフィルタ' + 'resources.filter.path': 'パスでフィルタ', + 'resources.register.worker.step1': + 'Click the Copy the token menu.', + 'resources.register.worker.step2': + 'Click the Quick Config menu.', + 'resources.register.worker.step3': + 'Click the General tab.', + 'resources.register.worker.step4': + 'Select Worker as the service role.', + 'resources.register.worker.step5': + 'Enter the Server URL.', + 'resources.register.worker.step6': + 'Paste the Token.', + 'resources.register.worker.step7': + 'Click Restart to apply the settings.', + 'resources.register.install.title': 'Install GPUStack', + 'resources.register.download': 'Download the package and install it.' }; + +// ========== To-Do: Translate Keys (Remove After Translation) ========== +// 1. 'resources.register.worker.step1': 'Click the Copy the token menu.', +// 2. 'resources.register.worker.step2': 'Click the Quick Config menu.', +// 3. 'resources.register.worker.step3': 'Click the General tab.', +// 4. 'resources.register.worker.step4': 'Select Worker as the service role.', +// 5. 'resources.register.worker.step5': 'Enter the Server URL.', +// 6. 'resources.register.worker.step6': 'Paste the Token.', +// 7. 'resources.register.worker.step7': 'Click Restart to apply the settings.', +// 8. 'resources.register.install.title': 'Install GPUStack', +// 9. 'resources.register.download': 'Download the package and install it.' +// ========== End of To-Do List ========== diff --git a/src/locales/ru-RU/resources.ts b/src/locales/ru-RU/resources.ts index 28d30b9e..3c708c50 100644 --- a/src/locales/ru-RU/resources.ts +++ b/src/locales/ru-RU/resources.ts @@ -71,9 +71,33 @@ export default { 'resources.filter.source': 'Фильтровать по источнику', 'resources.modelfiles.delete.tips': 'Также удалить файл с диска', 'resources.modelfiles.copy.tips': 'Скопировать полный путь', - 'resources.filter.path': 'Фильтрация по пути' + 'resources.filter.path': 'Фильтрация по пути', + 'resources.register.worker.step1': + 'Click the Copy the token menu.', + 'resources.register.worker.step2': + 'Click the Quick Config menu.', + 'resources.register.worker.step3': + 'Click the General tab.', + 'resources.register.worker.step4': + 'Select Worker as the service role.', + 'resources.register.worker.step5': + 'Enter the Server URL.', + 'resources.register.worker.step6': + 'Paste the Token.', + 'resources.register.worker.step7': + 'Click Restart to apply the settings.', + 'resources.register.install.title': 'Install GPUStack', + 'resources.register.download': 'Download the package and install it.' }; // ========== To-Do: Translate Keys (Remove After Translation) ========== - +// 1. 'resources.register.worker.step1': 'Click the Copy the token menu.', +// 2. 'resources.register.worker.step2': 'Click the Quick Config menu.', +// 3. 'resources.register.worker.step3': 'Click the General tab.', +// 4. 'resources.register.worker.step4': 'Select Worker as the service role.', +// 5. 'resources.register.worker.step5': 'Enter the Server URL.', +// 6. 'resources.register.worker.step6': 'Paste the Token.', +// 7. 'resources.register.worker.step7': 'Click Restart to apply the settings.', +// 8. 'resources.register.install.title': 'Install GPUStack', +// 9. 'resources.register.download': 'Download the package and install it.' // ========== End of To-Do List ========== diff --git a/src/locales/zh-CN/resources.ts b/src/locales/zh-CN/resources.ts index ef2d69f0..ab5ce449 100644 --- a/src/locales/zh-CN/resources.ts +++ b/src/locales/zh-CN/resources.ts @@ -70,5 +70,21 @@ export default { 'resources.filter.source': '按来源筛选', 'resources.modelfiles.delete.tips': '同时从磁盘删除文件', 'resources.modelfiles.copy.tips': '复制完整路径', - 'resources.filter.path': '路径查询' + 'resources.filter.path': '路径查询', + 'resources.register.worker.step1': + '点击菜单 Copy token。', + 'resources.register.worker.step2': + '点击菜单 Quick Config。', + 'resources.register.worker.step3': + '点击页签 General。', + 'resources.register.worker.step4': + '选择 Worker 作为服务角色。', + 'resources.register.worker.step5': + '输入 Server URL。', + 'resources.register.worker.step6': + '粘贴 Token.', + 'resources.register.worker.step7': + '点击 Restart 应用设置。', + 'resources.register.install.title': '安装 GPUStack', + 'resources.register.download': '下载安装包 并且安装。' }; diff --git a/src/pages/resources/components/add-worker-macos.tsx b/src/pages/resources/components/add-worker-macos.tsx index c1a9c67e..7ef54aba 100644 --- a/src/pages/resources/components/add-worker-macos.tsx +++ b/src/pages/resources/components/add-worker-macos.tsx @@ -1,18 +1,22 @@ +import CopyToken from '@/assets/images/copy-token.png'; +import QuickConfig from '@/assets/images/quick-config.png'; import { useIntl } from '@umijs/max'; -import { Space, Typography } from 'antd'; +import { Image, Space, Typography } from 'antd'; import React, { useMemo } from 'react'; +const { Text } = Typography; + interface AddWorkerMacOSProps { token?: string; } const registerWorkerSteps = [ - 'Open the quick configuration file.', - `Select the "General" option.`, - `Select "Worker" as the service role.`, - 'Enter the Server URL.', - 'Paste the Token.', - `Click "Restart".` + 'resources.register.worker.step2', + `resources.register.worker.step3`, + `resources.register.worker.step4`, + 'resources.register.worker.step5', + 'resources.register.worker.step6', + `resources.register.worker.step7` ]; const AddWorkerMacOS: React.FC = () => { @@ -29,18 +33,35 @@ const AddWorkerMacOS: React.FC = () => { ); return (
-

1. Install GPUStack

+

+ 1. {intl.formatMessage({ id: 'resources.register.install.title' })} +

- Download Package and install it on - your macOS machine. +

2.

- - Click Copy the token - +
+ + + + +

3. {labels.step2}{' '} @@ -53,13 +74,21 @@ const AddWorkerMacOS: React.FC = () => { >

- - {registerWorkerSteps.map((step, index) => ( - - {index + 1}. {step} - - ))} - +
+ + {registerWorkerSteps.map((step, index) => ( + + {index + 1}.{' '} + + + ))} + + +

4. {labels.step3}

diff --git a/src/pages/resources/components/add-worker.tsx b/src/pages/resources/components/add-worker.tsx index e7047cee..7b16725b 100644 --- a/src/pages/resources/components/add-worker.tsx +++ b/src/pages/resources/components/add-worker.tsx @@ -1,8 +1,14 @@ +import { + AppleOutlined, + LinuxOutlined, + WindowsOutlined +} from '@ant-design/icons'; import { useIntl } from '@umijs/max'; import { Modal, Tabs, TabsProps } from 'antd'; import React from 'react'; +import MacOS from './add-worker-macos'; +import Windows from './add-worker-windows'; import ContainerInstall from './container-install'; -import ScriptInstall from './script-install'; type ViewModalProps = { open: boolean; @@ -13,32 +19,27 @@ const AddWorker: React.FC = (props) => { const { open, onCancel } = props || {}; const intl = useIntl(); const [token, setToken] = React.useState(''); - const [activeKey, setActiveKey] = React.useState('script'); + const [activeKey, setActiveKey] = React.useState('container'); const items: TabsProps['items'] = [ - { - key: 'script', - label: intl.formatMessage({ id: 'resources.worker.script.install' }), - children: - }, { key: 'container', label: 'Linux', - // icon: , + icon: , children: + }, + { + key: 'macos', + label: 'macOS(M series 14+)', + icon: , + children: + }, + { + key: 'windows', + label: 'Windows(win 10, win 11)', + icon: , + children: } - // { - // key: 'macos', - // label: 'macOS', - // icon: , - // children: - // }, - // { - // key: 'windows', - // label: 'Windows', - // icon: , - // children: - // } ]; return (