fix(styles): providers access token

src/pages/llmodels/apis/index.ts

@@ -3,6 +3,7 @@ import { downloadFile, listFiles, listModels } from '@huggingface/hub';
 import { PipelineType } from '@huggingface/tasks';
 import { request } from '@umijs/max';
 import qs from 'query-string';
+import { ACCESS_API } from '../../model-access/apis';
 import {
   AccessControlFormData,
   BackendItem,
@@ -418,7 +419,7 @@ export async function queryBackendList(params?: { cluster_id: number }) {
 }
 
 export async function queryModelAccessUserList(id: number) {
-  return request<{ items: UserListItem[] }>(`${MODELS_API}/${id}/access`, {
+  return request<{ items: UserListItem[] }>(`${ACCESS_API}/${id}/access`, {
     method: 'GET'
   });
 }
@@ -427,7 +428,7 @@ export async function updateModelAccessUser(params: {
   id: number;
   data: AccessControlFormData;
 }) {
-  return request(`${MODELS_API}/${params.id}/access`, {
+  return request(`${ACCESS_API}/${params.id}/access`, {
     method: 'POST',
     data: params.data
   });

src/pages/llmodels/components/access-control-modal/index.tsx

@@ -1,7 +1,7 @@
 import AlertBlockInfo from '@/components/alert-info/block';
 import ModalFooter from '@/components/modal-footer';
-import ScrollerModal from '@/components/scroller-modal';
 import { PageActionType } from '@/config/types';
+import FormDrawer from '@/pages/_components/form-drawer';
 import { useIntl } from '@umijs/max';
 import { message } from 'antd';
 import _ from 'lodash';
@@ -75,19 +75,13 @@ const AccessControlModal: React.FC<
   }, [open, currentData]);
 
   return (
-    <ScrollerModal
+    <FormDrawer
       title={title}
       open={open}
-      centered={true}
       onCancel={onCancel}
-      destroyOnHidden={true}
-      closeIcon={true}
-      maskClosable={false}
-      keyboard={false}
       width={700}
-      height={660}
       footer={
-        <>
+        <div style={{ paddingInline: 24, paddingBottom: 8 }}>
           {isChanged && (
             <AlertBlockInfo
               type="warning"
@@ -99,7 +93,7 @@ const AccessControlModal: React.FC<
             ></AlertBlockInfo>
           )}
           <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
-        </>
+        </div>
       }
     >
       <AccessControlForm
@@ -109,7 +103,7 @@ const AccessControlModal: React.FC<
         onFinish={handleOnFinish}
         onValuesChange={handleOnValuesChange}
       />
-    </ScrollerModal>
+    </FormDrawer>
   );
 };
 

src/pages/llmodels/config/index.ts

@@ -1,12 +1,5 @@
-import IconFont from '@/components/icon-font';
 import { StatusMaps } from '@/config';
-import {
-  AudioOutlined,
-  EditOutlined,
-  PictureOutlined,
-  WechatWorkOutlined
-} from '@ant-design/icons';
-import React from 'react';
+import { EditOutlined } from '@ant-design/icons';
 import { backendOptionsMap } from './backend-parameters';
 
 export const backendTipsList = [
@@ -299,42 +292,27 @@ export const modelCategoriesMap = {
 export const categoryOptions = [
   {
     label: 'LLM',
-    value: modelCategoriesMap.llm,
-    icon: React.createElement(WechatWorkOutlined, { style: { color: 'green' } })
+    value: modelCategoriesMap.llm
   },
   {
     label: 'Embedding',
-    value: modelCategoriesMap.embedding,
-    icon: React.createElement(IconFont, {
-      type: 'icon-cube',
-      style: { color: 'magenta' }
-    })
+    value: modelCategoriesMap.embedding
   },
   {
     label: 'Reranker',
-    value: modelCategoriesMap.reranker,
-    icon: React.createElement(IconFont, {
-      type: 'icon-rank1',
-      style: { color: 'cyan' }
-    })
+    value: modelCategoriesMap.reranker
   },
   {
     label: 'Image',
-    value: modelCategoriesMap.image,
-    icon: React.createElement(PictureOutlined, { style: { color: 'orange' } })
+    value: modelCategoriesMap.image
   },
   {
     label: 'Text-to-Speech',
-    value: modelCategoriesMap.text_to_speech,
-    icon: React.createElement(IconFont, {
-      type: 'icon-sound-wave',
-      style: { color: 'geekblue' }
-    })
+    value: modelCategoriesMap.text_to_speech
   },
   {
     label: 'Speech-to-Text',
-    value: modelCategoriesMap.speech_to_text,
-    icon: React.createElement(AudioOutlined, { style: { color: 'processing' } })
+    value: modelCategoriesMap.speech_to_text
   }
 ];
 

src/pages/llmodels/config/types.ts

@@ -44,6 +44,7 @@ export type SourceType =
 export interface FormData {
   image_name?: string;
   run_command?: string;
+  enable_model_access?: boolean;
   backend: string;
   restart_on_error?: boolean;
   env?: Record<string, any>;

src/pages/llmodels/forms/advance-config.tsx

@@ -16,8 +16,14 @@ const AdvanceConfig = () => {
   const form = Form.useFormInstance();
   const EnviromentVars = Form.useWatch('env', form);
   const backend = Form.useWatch('backend', form);
-  const { onValuesChange, isGGUF, modelContextData, flatBackendOptions } =
-    useFormContext();
+  const modelAccessEnable = Form.useWatch('enable_model_access', form);
+  const {
+    onValuesChange,
+    backendOptions,
+    flatBackendOptions,
+    isGGUF,
+    modelContextData
+  } = useFormContext();
 
   const currentBackendOptions = useMemo(() => {
     return flatBackendOptions?.find((item) => item.value === backend);
@@ -128,19 +134,35 @@ const AdvanceConfig = () => {
         ></CheckboxField>
       </Form.Item>
       <Form.Item<FormData>
-        name="generic_proxy"
+        name="enable_model_access"
         valuePropName="checked"
         style={{ marginBottom: 8 }}
       >
         <CheckboxField
           description={intl.formatMessage({
-            id: 'models.form.generic_proxy.tips'
+            id: 'models.form.enable_model_access.tips'
           })}
           label={intl.formatMessage({
-            id: 'models.form.generic_proxy'
+            id: 'models.form.enable_model_access'
           })}
         ></CheckboxField>
       </Form.Item>
+      {modelAccessEnable && (
+        <Form.Item<FormData>
+          name="generic_proxy"
+          valuePropName="checked"
+          style={{ marginBottom: 8 }}
+        >
+          <CheckboxField
+            description={intl.formatMessage({
+              id: 'models.form.generic_proxy.tips'
+            })}
+            label={intl.formatMessage({
+              id: 'models.form.generic_proxy'
+            })}
+          ></CheckboxField>
+        </Form.Item>
+      )}
     </>
   );
 };