From f44aee0af4f3bd3d88f07daa476f539fe2f56953 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Wed, 18 Dec 2024 16:12:54 +0800
Subject: [PATCH] feat: model list add stop and start button

---
 src/components/drop-down-buttons/index.tsx    |  1 +
 src/components/icon-font/index.tsx            |  4 +-
 src/locales/en-US/common.ts                   |  3 +-
 src/locales/zh-CN/common.ts                   |  3 +-
 .../llmodels/components/instance-item.tsx     |  8 +--
 src/pages/llmodels/components/table-list.tsx  | 41 ++++++++++++
 src/pages/playground/config/params-config.ts  | 63 +------------------
 7 files changed, 54 insertions(+), 69 deletions(-)

diff --git a/src/components/drop-down-buttons/index.tsx b/src/components/drop-down-buttons/index.tsx
index 7cd08b44..dc43e9a4 100644
--- a/src/components/drop-down-buttons/index.tsx
+++ b/src/components/drop-down-buttons/index.tsx
@@ -38,6 +38,7 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
       {items?.length === 1 ? (
         <Tooltip title={intl.formatMessage({ id: _.head(items)?.label })}>
           <Button
+            className={classNames('dropdown-button', size)}
             {..._.head(items)}
             icon={_.get(items, '0.icon')}
             size={size}
diff --git a/src/components/icon-font/index.tsx b/src/components/icon-font/index.tsx
index 2c4fbc7b..d71eac23 100644
--- a/src/components/icon-font/index.tsx
+++ b/src/components/icon-font/index.tsx
@@ -1,8 +1,8 @@
 import { createFromIconfontCN } from '@ant-design/icons';
-import './iconfont/iconfont.js';
+// import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: ''
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_v10ij8hozhi.js'
 });
 
 export default IconFont;
diff --git a/src/locales/en-US/common.ts b/src/locales/en-US/common.ts
index c501ccd6..9472c281 100644
--- a/src/locales/en-US/common.ts
+++ b/src/locales/en-US/common.ts
@@ -210,5 +210,6 @@ export default {
   'common.text.here': 'here',
   'common.text.latest': 'Latest',
   'common.text.new': 'New',
-  'common.text.changelog': 'Release Notes'
+  'common.text.changelog': 'Release Notes',
+  'common.button.recreate': 'Recreate'
 };
diff --git a/src/locales/zh-CN/common.ts b/src/locales/zh-CN/common.ts
index 143652fb..a65bac40 100644
--- a/src/locales/zh-CN/common.ts
+++ b/src/locales/zh-CN/common.ts
@@ -203,5 +203,6 @@ export default {
   'common.text.here': '这里',
   'common.text.latest': '最新',
   'common.text.new': '新',
-  'common.text.changelog': '更新日志'
+  'common.text.changelog': '更新日志',
+  'common.button.recreate': '重新创建'
 };
diff --git a/src/pages/llmodels/components/instance-item.tsx b/src/pages/llmodels/components/instance-item.tsx
index 5fc52304..5c56b962 100644
--- a/src/pages/llmodels/components/instance-item.tsx
+++ b/src/pages/llmodels/components/instance-item.tsx
@@ -8,8 +8,8 @@ import {
   ListItem as WorkerListItem
 } from '@/pages/resources/config/types';
 import {
-  DeleteOutlined,
   FieldTimeOutlined,
+  FileSyncOutlined,
   InfoCircleOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
@@ -71,12 +71,12 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
       icon: <FieldTimeOutlined />
     },
     {
-      label: 'common.button.delete',
+      label: 'common.button.recreate',
       key: 'delete',
       props: {
-        danger: true
+        danger: false
       },
-      icon: <DeleteOutlined />
+      icon: <FileSyncOutlined />
     }
   ];
 
diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx
index cc1331fa..61d42a16 100644
--- a/src/pages/llmodels/components/table-list.tsx
+++ b/src/pages/llmodels/components/table-list.tsx
@@ -240,6 +240,16 @@ const Models: React.FC<ModelsProps> = ({
       key: 'edit',
       icon: <EditOutlined />
     },
+    {
+      label: 'common.button.stop',
+      key: 'stop',
+      icon: <IconFont type="icon-stop1"></IconFont>
+    },
+    {
+      label: 'common.button.start',
+      key: 'start',
+      icon: <IconFont type="icon-playcircle"></IconFont>
+    },
     {
       label: 'models.openinplayground',
       key: 'chat',
@@ -260,6 +270,13 @@ const Models: React.FC<ModelsProps> = ({
       if (action.key === 'chat') {
         return record.ready_replicas > 0;
       }
+      if (action.key === 'start') {
+        return record.replicas === 0;
+      }
+
+      if (action.key === 'stop') {
+        return record.replicas > 0;
+      }
 
       return true;
     });
@@ -284,6 +301,27 @@ const Models: React.FC<ModelsProps> = ({
     message.success(intl.formatMessage({ id: 'common.message.success' }));
   };
 
+  const handleToggleStart = async (row: ListItem, action: string) => {
+    try {
+      await updateModel({
+        id: row.id,
+        data: {
+          ..._.omit(row, [
+            'id',
+            'ready_replicas',
+            'created_at',
+            'updated_at',
+            'rowIndex'
+          ]),
+          replicas: action === 'start' ? 1 : 0
+        }
+      });
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+    } catch (error) {
+      // ingore
+    }
+  };
+
   const handleModalOk = useCallback(
     async (data: FormData) => {
       try {
@@ -448,6 +486,9 @@ const Models: React.FC<ModelsProps> = ({
       if (val === 'delete') {
         handleDelete(row);
       }
+      if (val === 'start' || val === 'stop') {
+        handleToggleStart(row, val);
+      }
     },
     [handleEdit, handleOpenPlayGround, handleDelete]
   );
diff --git a/src/pages/playground/config/params-config.ts b/src/pages/playground/config/params-config.ts
index e1da21dc..04c11c64 100644
--- a/src/pages/playground/config/params-config.ts
+++ b/src/pages/playground/config/params-config.ts
@@ -4,14 +4,7 @@ export const TTSParamsConfig: ParamsSchema[] = [
   {
     type: 'Select',
     name: 'voice',
-    options: [
-      // { label: 'Alloy', value: 'Alloy' },
-      // { label: 'Echo', value: 'Echo' },
-      // { label: 'Fable', value: 'Fable' },
-      // { label: 'Onyx', value: 'Onyx' },
-      // { label: 'Nova', value: 'Nova' },
-      // { label: 'Shimmer', value: 'Shimmer' }
-    ],
+    options: [],
     label: {
       text: 'playground.params.voice',
       isLocalized: true
@@ -115,6 +108,7 @@ export const ImageParamsConfig: ParamsSchema[] = [
       { label: 'playground.params.custom', value: 'custom', locale: true },
       { label: '512x512', value: '512x512' },
       { label: '768x1024', value: '768x1024' },
+      { label: '1024x768', value: '1024x768' },
       { label: '1024x1024', value: '1024x1024' }
     ],
     description: {
@@ -132,59 +126,6 @@ export const ImageParamsConfig: ParamsSchema[] = [
       }
     ]
   }
-  // {
-  //   type: 'Select',
-  //   name: 'quality',
-  //   options: [
-  //     { label: 'standard', value: 'standard' },
-  //     { label: 'hd', value: 'hd' }
-  //   ],
-  //   label: {
-  //     text: 'playground.params.quality',
-  //     isLocalized: true
-  //   },
-  //   rules: [
-  //     {
-  //       required: false
-  //     }
-  //   ]
-  // },
-  // {
-  //   type: 'Select',
-  //   name: 'style',
-  //   options: [
-  //     { label: 'vivid', value: 'vivid' },
-  //     { label: 'natural', value: 'natural' }
-  //   ],
-  //   label: {
-  //     text: 'playground.params.style',
-  //     isLocalized: true
-  //   },
-  //   rules: [
-  //     {
-  //       required: false
-  //     }
-  //   ]
-  // }
-  // {
-  //   type: 'TextArea',
-  //   name: 'prompt',
-  //   label: {
-  //     text: 'Prompt',
-  //     isLocalized: false
-  //   },
-  //   attrs: {
-  //     autoSize: {
-  //       minRows: 2,
-  //       maxRows: 3
-  //     }
-  //   },
-  //   rules: [
-  //     {
-  //       required: false
-  //     }
-  //   ]
-  // }
 ];
 
 export const ImageconstExtraConfig: ParamsSchema[] = [