style: border radius 8px

src/pages/api-keys/components/add-apikey.tsx

@@ -1,10 +1,10 @@
 import ModalFooter from '@/components/modal-footer';
 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 { SyncOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Form, Modal, Select } from 'antd';
 import { expirationOptions } from '../config';
 import { FormData } from '../config/types';
 
@@ -25,14 +25,12 @@ const AddModal: React.FC<AddModalProps> = ({
 }) => {
   const [form] = Form.useForm();
   const intl = useIntl();
-  const Suffix = (
-    <SyncOutlined
-      style={{
-        fontSize: 16,
-        color: '#1677ff'
-      }}
-    />
-  );
+
+  if (action === PageAction.CREATE && open) {
+    form.setFieldsValue({
+      expires_in: 1
+    });
+  }
 
   const handleSumit = () => {
     form.submit();
@@ -91,8 +89,15 @@ const AddModal: React.FC<AddModalProps> = ({
           <SealSelect
             label={intl.formatMessage({ id: 'apikeys.form.expiretime' })}
             required
-            options={expirationOptions}
-          ></SealSelect>
+          >
+            {expirationOptions.map((option) => {
+              return (
+                <Select.Option key={option.value} value={option.value}>
+                  {intl.formatMessage({ id: option.label })}
+                </Select.Option>
+              );
+            })}
+          </SealSelect>
         </Form.Item>
         <Form.Item<FormData> name="description" rules={[{ required: false }]}>
           <SealInput.TextArea

src/pages/api-keys/config/index.ts

@@ -1,7 +1,6 @@
 export const expirationOptions = [
-  { label: '7 days', type: 'day', value: 7 },
-  { label: '1 month', type: 'month', value: 1 },
-  { label: '6 months', type: 'month', value: 6 },
-  // { label: '1 year', type: 'year', value: 1 },
-  { label: 'never', type: 'never', value: -1 }
+  { label: 'apikeys.form.expiration.7days', type: 'day', value: 7 },
+  { label: 'apikeys.form.expiration.1month', type: 'month', value: 1 },
+  { label: 'apikeys.form.expiration.6months', type: 'month', value: 6 },
+  { label: 'apikeys.form.expiration.never', type: 'never', value: -1 }
 ];

src/pages/dashboard/components/resource-utilization.tsx

@@ -5,10 +5,25 @@ import { useContext, useEffect, useState } from 'react';
 import { DashboardContext } from '../config/dashboard-context';
 
 const TypeKeyMap = {
-  cpu: 'CPU',
-  memory: 'Memory',
-  gpu: 'GPU',
-  gpu_memory: 'VRAM'
+  cpu: {
+    label: 'CPU',
+    color:
+      'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgba(0, 168, 143,.7) 100%)'
+  },
+  memory: {
+    label: 'Memory',
+    color:
+      'linear-gradient(90deg,rgba(249, 248, 113,.8) 0%,rgba(255, 199, 92,0.7) 100%)'
+  },
+  gpu: {
+    label: 'GPU',
+    color: 'rgba(84, 204, 152,0.8)'
+  },
+  gpu_memory: {
+    label: 'VRAM',
+    color:
+      'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgba(0, 168, 143,.7) 100%)'
+  }
 };
 
 const UtilizationOvertime: React.FC = () => {
@@ -44,7 +59,8 @@ const UtilizationOvertime: React.FC = () => {
         return {
           value: _.round(item.value, 2) || 0,
           time: dayjs(item.timestamp * 1000).format('HH:mm:ss'),
-          type: _.get(TypeKeyMap, type, '')
+          type: _.get(TypeKeyMap, [type, 'label'], ''),
+          color: 'red'
         };
       });
       list.push(...dataList);

src/pages/llmodels/components/add-modal.tsx

@@ -13,6 +13,7 @@ import {
   callHuggingfaceQuickSearch,
   queryHuggingfaceModelFiles
 } from '../apis';
+import { ollamaModelOptions } from '../config';
 import { FormData, ListItem } from '../config/types';
 
 type AddModalProps = {
@@ -99,7 +100,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
   const handleOnSearchRepo = async (text: string) => {
     try {
       const params = {
-        q: text,
+        q: `${text} gguf`,
         type: 'model'
       };
       const res = await callHuggingfaceQuickSearch(params);
@@ -164,7 +165,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
           ]}
         >
           <SealAutoComplete
-            showSearch
+            filterOption
             label={intl.formatMessage({ id: 'models.form.filename' })}
             required
             options={fileOptions}
@@ -220,10 +221,12 @@ const AddModal: React.FC<AddModalProps> = (props) => {
             }
           ]}
         >
-          <SealInput.Input
-            label={intl.formatMessage({ id: 'models.table.name' })}
+          <SealAutoComplete
+            filterOption
+            label="Ollama Model"
             required
-          ></SealInput.Input>
+            options={ollamaModelOptions}
+          ></SealAutoComplete>
         </Form.Item>
       </>
     );

src/pages/llmodels/config/index.ts

@@ -1,35 +1,14 @@
 import { StatusMaps } from '@/config';
 
-export const modelInstanceCols = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    key: 'name'
-  },
-  {
-    title: 'Create Time',
-    dataIndex: 'createTime',
-    key: 'createTime'
-  },
-  {
-    title: 'Status',
-    dataIndex: 'status',
-    key: 'status'
-  },
-  {
-    title: 'Utilization',
-    dataIndex: 'utilization',
-    key: 'utilization'
-  },
-  {
-    title: 'Host Name',
-    dataIndex: 'hostName',
-    key: 'hostName'
-  },
-  {
-    title: 'Operation',
-    key: 'Operation'
-  }
+export const ollamaModelOptions = [
+  { label: 'llama3', value: 'llama3' },
+  { label: 'gemma', value: 'gemma' },
+  { label: 'mistral', value: 'mistral' },
+  { label: 'qwen', value: 'qwen' },
+  { label: 'llama2', value: 'llama2' },
+  { label: 'phi3', value: 'phi3' },
+  { label: 'codellama', value: 'codellama' },
+  { label: 'deepseek-coder', value: 'deepseek-coder' }
 ];
 
 export const status: any = {

src/pages/playground/style/ground-left.less

@@ -8,7 +8,7 @@
     overflow-y: auto;
 
     .ant-pro-page-container-children-container {
-      padding-inline: 26px;
+      padding-inline: 16px 26px;
     }
   }
 

src/pages/users/components/add-modal.tsx

@@ -46,6 +46,10 @@ const AddModal: React.FC<AddModalProps> = ({
         ...data,
         is_admin: data?.is_admin ? UserRoles.ADMIN : UserRoles.USER
       });
+    } else if (action === PageAction.CREATE && open) {
+      form.setFieldsValue({
+        is_admin: UserRoles.USER
+      });
     }
   };