chore: access meta

src/pages/model-access/components/access-points.tsx

@@ -4,12 +4,12 @@ import IconFont from '@/components/icon-font';
 import RowChildren from '@/components/seal-table/components/row-children';
 import StatusTag from '@/components/status-tag';
 import { DeleteOutlined } from '@ant-design/icons';
-import { Col, Row, Tag } from 'antd';
+import { useIntl } from '@umijs/max';
+import { Col, Row } from 'antd';
 import dayjs from 'dayjs';
 import React from 'react';
 import styled from 'styled-components';
 import { mockAccessPointList } from '../config/mock';
-
 const CellContent = styled.div`
   display: flex;
   align-items: center;
@@ -50,6 +50,7 @@ export const childActionList = [
 ];
 
 const AccessItem: React.FC<AccessItemProps> = ({ onSelect, data }) => {
+  const intl = useIntl();
   return (
     <div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
       <RowChildren>
@@ -64,25 +65,19 @@ const AccessItem: React.FC<AccessItemProps> = ({ onSelect, data }) => {
             </CellContent>
           </Col>
           <Col span={5}>
-            <CellContent style={{ paddingLeft: 44 }}>
-              <AutoTooltip ghost>Weight: 20</AutoTooltip>
+            <CellContent style={{ paddingLeft: 58 }}>
+              {data.weight && (
+                <AutoTooltip ghost>
+                  {intl.formatMessage({ id: 'accesses.form.endpoint.weight' })}:
+                  20 /
+                </AutoTooltip>
+              )}
               {data.is_fallback && (
-                <Tag
-                  variant="outlined"
-                  color="gray"
-                  style={{
-                    color: 'var(--ant-color-text-tertiary)',
-                    marginLeft: 8,
-                    fontSize: 12,
-                    height: 18,
-                    display: 'flex',
-                    alignItems: 'center',
-                    borderRadius: 10,
-                    borderColor: 'var(--ant-color-border)'
-                  }}
-                >
-                  Fallback
-                </Tag>
+                <span>
+                  {intl.formatMessage({
+                    id: 'accesses.table.label.fallback'
+                  })}
+                </span>
               )}
             </CellContent>
           </Col>

src/pages/model-access/forms/basic.tsx

@@ -11,12 +11,21 @@ const Basic = () => {
   return (
     <>
       <Form.Item name="name" data-field="name">
-        <SealInput.Input required label={'Model Name'} />
+        <SealInput.Input
+          required
+          label={intl.formatMessage({ id: 'models.table.name' })}
+        />
       </Form.Item>
-      <Form.Item name="categories">
+      <Form.Item
+        name="categories"
+        normalize={(value) => (value ? [value] : [])}
+        getValueProps={(value) => ({
+          value: Array.isArray(value) ? value[0] : value
+        })}
+      >
         <SealSelect
           options={modelCategories}
-          label="Category"
+          label={intl.formatMessage({ id: 'models.form.categories' })}
           allowNull
         ></SealSelect>
       </Form.Item>

src/pages/model-access/forms/endpoints.tsx

@@ -3,8 +3,7 @@ import MetadataList from '@/components/metadata-list';
 import SealCascader from '@/components/seal-form/seal-cascader';
 import SealInput from '@/components/seal-form/seal-input';
 import { useIntl } from '@umijs/max';
-import { Checkbox, Form } from 'antd';
-import { Tooltip } from 'antd/lib';
+import { Form } from 'antd';
 import _ from 'lodash';
 import { useState } from 'react';
 import { FormData } from '../config/types';
@@ -151,9 +150,14 @@ const Endpoints = () => {
           ]}
         >
           <MetadataList
-            label={'Endpoints'}
+            label={''}
+            styles={{
+              wrapper: {
+                paddingTop: 14
+              }
+            }}
             dataList={dataList}
-            btnText="Add Endpoint"
+            btnText={intl.formatMessage({ id: 'accesses.form.endpoint.add' })}
             onAdd={handleOnAdd}
             onDelete={handleOnDelete}
           >
@@ -170,27 +174,43 @@ const Endpoints = () => {
                     }
                   }}
                   maxTagCount={1}
-                  placeholder="provider/model"
+                  placeholder={intl.formatMessage({
+                    id: 'accesses.form.endpoint.model'
+                  })}
                   options={providerModelList}
                   showCheckedStrategy="SHOW_CHILD"
                   getPopupContainer={(triggerNode) => triggerNode.parentNode}
                 ></SealCascader>
                 <span className="seprator">:</span>
                 <SealInput.Number
-                  style={{ flex: 60 }}
-                  placeholder="weight"
+                  style={{ flex: 100 }}
+                  placeholder={intl.formatMessage({
+                    id: 'accesses.form.endpoint.weight'
+                  })}
                 ></SealInput.Number>
-                <Tooltip title="fallback">
-                  <Checkbox
-                    checked={item.is_fallback}
-                    onChange={(e) => handleFallbackChange(e, index)}
-                    style={{ marginLeft: 12, marginRight: 4 }}
-                  ></Checkbox>
-                </Tooltip>
               </>
             )}
           </MetadataList>
         </Form.Item>
+        <Form.Item name="fallback_endpoint">
+          <SealCascader
+            showSearch
+            expandTrigger="hover"
+            multiple={false}
+            classNames={{
+              popup: {
+                root: 'cascader-popup-wrapper gpu-selector'
+              }
+            }}
+            label={intl.formatMessage({
+              id: 'accesses.form.endpoint.fallback'
+            })}
+            maxTagCount={1}
+            options={providerModelList}
+            showCheckedStrategy="SHOW_CHILD"
+            getPopupContainer={(triggerNode) => triggerNode.parentNode}
+          ></SealCascader>
+        </Form.Item>
       </LabelSelectorContext.Provider>
     </>
   );

src/pages/model-access/forms/fallback-settings.tsx

@@ -1,49 +0,0 @@
-import SealInput from '@/components/seal-form/seal-input';
-import { Checkbox, Form, Typography } from 'antd';
-
-const FallbackSettings: React.FC<{
-  currentData?: any;
-  onFinish: (data: any) => void;
-}> = ({ currentData, onFinish }) => {
-  const [form] = Form.useForm();
-
-  return (
-    <Form
-      form={form}
-      onFinish={onFinish}
-      initialValues={currentData}
-      layout="vertical"
-    >
-      <Form.Item name="name">
-        <SealInput.Input disabled label="Model Name"></SealInput.Input>
-      </Form.Item>
-      <Form.Item name="endpoint">
-        <SealInput.Input disabled label="Endpoint"></SealInput.Input>
-      </Form.Item>
-      <Form.Item name="endpoint">
-        <SealInput.Input disabled label="Endpoint Target"></SealInput.Input>
-      </Form.Item>
-      <Form.Item name="fallback_endpoint">
-        <Typography.Title
-          level={5}
-          style={{ fontSize: 14, fontWeight: 500, marginBottom: 16 }}
-        >
-          Fallback Status
-        </Typography.Title>
-        <Checkbox.Group
-          options={[
-            {
-              label: '4xx',
-              value: '4xx'
-            },
-            {
-              label: '5xx',
-              value: '5xx'
-            }
-          ]}
-        />
-      </Form.Item>
-    </Form>
-  );
-};
-export default FallbackSettings;

src/pages/model-access/forms/index.tsx

@@ -36,20 +36,20 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
   const segmentOptions = [
     {
       value: TABKeysMap.BASIC,
-      label: 'Basic',
+      label: intl.formatMessage({ id: 'common.title.basicInfo' }),
       icon: <IconFont type="icon-basic" />,
       field: 'name'
     },
     {
       value: TABKeysMap.METADATA,
-      label: 'Metadata',
-      icon: <IconFont type="icon-speed" />,
-      field: 'metadata'
+      label: intl.formatMessage({ id: 'accesses.form.metadata.title' }),
+      icon: <IconFont type="icon-database" />,
+      field: 'metaSize'
     },
     {
       value: TABKeysMap.ENDPOINTS,
-      label: 'Endpoints',
-      icon: <IconFont type="icon-settings" />,
+      label: intl.formatMessage({ id: 'accesses.form.endpoint.title' }),
+      icon: <IconFont type="icon-language" />,
       field: 'endpoints'
     }
   ];
@@ -88,7 +88,12 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
         form={form}
         onFinish={onFinish}
         initialValues={{
-          categories: []
+          categories: [],
+          meta: {
+            size: null,
+            activated_size: null,
+            dimensions: null
+          }
         }}
       >
         <Basic />
@@ -99,13 +104,13 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
           items={[
             {
               key: TABKeysMap.METADATA,
-              label: 'Metadata',
+              label: intl.formatMessage({ id: 'accesses.form.metadata.title' }),
               forceRender: true,
               children: <MetaData></MetaData>
             },
             {
               key: TABKeysMap.ENDPOINTS,
-              label: 'Endpoints',
+              label: intl.formatMessage({ id: 'accesses.form.endpoint.title' }),
               forceRender: true,
               children: <Endpoints></Endpoints>
             }

src/pages/model-access/forms/meta-data.tsx

@@ -1,71 +1,175 @@
-import LabelSelector from '@/components/label-selector';
-import { LabelSelectorContext } from '@/components/label-selector/context';
+import SingleImage from '@/components/auto-image/single-image';
+import ListInput from '@/components/list-input';
+import SealInputNumber from '@/components/seal-form/input-number';
+import SealInput from '@/components/seal-form/seal-input';
+import UploadImg from '@/pages/playground/components/upload-img';
 import { useIntl } from '@umijs/max';
-import { Form } from 'antd';
-import _ from 'lodash';
+import { Button, Form } from 'antd';
+import styled from 'styled-components';
 import { FormData } from '../config/types';
 
+const SizeWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 16px;
+`;
+
+const UploadWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const IconBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  border: 1px solid var(--ant-color-border);
+  border-radius: var(--ant-border-radius);
+  .icon {
+    color: var(--ant-color-text-tertiary);
+    font-size: 14px;
+    line-height: 1;
+  }
+`;
+
 const MetaData = () => {
   const intl = useIntl();
   const form = Form.useFormInstance<FormData>();
-  const metadata = Form.useWatch('meta', form);
+  const icon = Form.useWatch(['meta', 'icon'], form);
 
   const handleMetadataChange = (labels: Record<string, any>) => {
     form.setFieldValue('meta', labels);
   };
 
+  const handleUpdateImageList = (fileList: any[]) => {
+    console.log('fileList', fileList);
+    if (fileList.length === 0) {
+      return;
+    }
+    form.setFieldValue(['meta', 'icon'], fileList[0]?.dataUrl || null);
+  };
+
+  const handleDeleteIcon = () => {
+    form.setFieldValue(['meta', 'icon'], null);
+  };
+
   return (
     <>
-      <LabelSelectorContext.Provider
-        value={{
-          options: [
-            {
-              label: 'max_token_len',
-              value: 'max_token_len'
-            },
-            {
-              label: 'max_context_len',
-              value: 'max_context_len'
-            }
-          ]
-        }}
-      >
-        <Form.Item
-          name="meta"
-          data-field="metadata"
-          rules={[
-            ({ getFieldValue }) => ({
-              validator(rule, value) {
-                if (_.keys(value).length > 0) {
-                  if (_.some(_.keys(value), (k: string) => !value[k])) {
-                    return Promise.reject(
-                      intl.formatMessage(
-                        {
-                          id: 'common.validate.value'
-                        },
-                        {
-                          name: intl.formatMessage({
-                            id: 'models.form.selector'
-                          })
-                        }
-                      )
-                    );
-                  }
-                }
-                return Promise.resolve();
-              }
-            })
-          ]}
+      <SizeWrapper>
+        <Form.Item<FormData>
+          data-field="metaSize"
+          name={['meta', 'size']}
+          normalize={(v) => (v === 0 ? null : v)}
         >
-          <LabelSelector
-            isAutoComplete
-            label={'Metadatas'}
-            labels={metadata}
-            btnText="Add Metadata"
-            onChange={handleMetadataChange}
-          ></LabelSelector>
+          <SealInputNumber
+            min={0}
+            label={`${intl.formatMessage({ id: 'accesses.form.metadata.size' })} (B)`}
+          ></SealInputNumber>
         </Form.Item>
-      </LabelSelectorContext.Provider>
+        <Form.Item<FormData>
+          name={['meta', 'activated_size']}
+          normalize={(v) => (v === 0 ? null : v)}
+        >
+          <SealInputNumber
+            min={0}
+            label={`${intl.formatMessage({
+              id: 'accesses.form.metadata.activeSize'
+            })} (B)`}
+          ></SealInputNumber>
+        </Form.Item>
+      </SizeWrapper>
+      <SizeWrapper>
+        <Form.Item<FormData> name={['meta', 'max_tokens']}>
+          <SealInput.Input
+            label={intl.formatMessage({
+              id: 'accesses.form.metadata.maxTokens'
+            })}
+            placeholder={intl.formatMessage(
+              { id: 'common.help.eg' },
+              { content: 'context/128k' }
+            )}
+          ></SealInput.Input>
+        </Form.Item>
+        <Form.Item<FormData>
+          name={['meta', 'dimensions']}
+          normalize={(v) => (v === 0 ? null : v)}
+        >
+          <SealInputNumber
+            min={0}
+            step={1}
+            precision={0}
+            label={intl.formatMessage({
+              id: 'accesses.form.metadata.dimension'
+            })}
+          ></SealInputNumber>
+        </Form.Item>
+      </SizeWrapper>
+      <Form.Item<FormData> name={['meta', 'release_date']}>
+        <SealInput.Input
+          label={intl.formatMessage({
+            id: 'accesses.form.metadata.releaseDate'
+          })}
+          placeholder={intl.formatMessage(
+            { id: 'common.help.eg' },
+            { content: '2025-05-19' }
+          )}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<FormData> name={['meta', 'tags']} data-field="metadata">
+        <ListInput
+          label={intl.formatMessage({ id: 'resources.form.label' })}
+          btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
+          dataList={[]}
+          onChange={handleMetadataChange}
+        ></ListInput>
+      </Form.Item>
+      <Form.Item<FormData> name={['meta', 'licenses']} data-field="metadata">
+        <ListInput
+          label={intl.formatMessage({ id: 'accesses.form.metadata.license' })}
+          btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
+          dataList={[]}
+          onChange={handleMetadataChange}
+        ></ListInput>
+      </Form.Item>
+      <Form.Item<FormData> name={['meta', 'languages']} data-field="metadata">
+        <ListInput
+          label={intl.formatMessage({ id: 'accesses.form.metadata.languages' })}
+          btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
+          dataList={[]}
+          onChange={handleMetadataChange}
+        ></ListInput>
+      </Form.Item>
+      <Form.Item<FormData> name={['meta', 'icon']} data-field="metadata">
+        <IconBox>
+          <span className="icon">
+            {intl.formatMessage({ id: 'accesses.form.metadata.icons' })}
+          </span>
+          <UploadWrapper>
+            <UploadImg
+              handleUpdateImgList={handleUpdateImageList}
+              size="middle"
+            >
+              {icon ? (
+                <SingleImage
+                  uid={1}
+                  editable={true}
+                  onDelete={handleDeleteIcon}
+                  dataUrl={icon}
+                  preview={false}
+                />
+              ) : (
+                <Button size="middle" variant="dashed" color="default">
+                  {intl.formatMessage({
+                    id: 'accesses.form.metadata.uploadIcon'
+                  })}
+                </Button>
+              )}
+            </UploadImg>
+          </UploadWrapper>
+        </IconBox>
+      </Form.Item>
     </>
   );
 };

src/pages/model-access/hooks/use-fallback-settings.ts

@@ -1,49 +0,0 @@
-import { PageAction } from '@/config';
-import { PageActionType } from '@/config/types';
-import { useState } from 'react';
-import { AccessItem as ListItem } from '../config/types';
-
-const useFallbackSettings = (options?: { refresh: () => void }) => {
-  const [openModalStatus, setOpenModalStatus] = useState<{
-    open: boolean;
-    action: PageActionType;
-    currentData?: ListItem;
-    title: string;
-  }>({
-    open: false,
-    action: PageAction.CREATE,
-    currentData: undefined,
-    title: ''
-  });
-
-  const openModal = (
-    action: PageActionType,
-    title: string,
-    currentData?: ListItem
-  ) => {
-    setOpenModalStatus({
-      open: true,
-      action,
-      currentData,
-      title: title
-    });
-  };
-
-  const closeModal = () => {
-    setOpenModalStatus({
-      open: false,
-      action: PageAction.CREATE,
-      currentData: undefined,
-      title: ''
-    });
-  };
-
-  return {
-    openFallbackSettingsModalStatus: openModalStatus,
-    setOpenFallbackSettingsModalStatus: setOpenModalStatus,
-    openFallbackSettingsModal: openModal,
-    closeFallbackSettingsModal: closeModal
-  };
-};
-
-export default useFallbackSettings;