chore: access meta

This commit is contained in:
jialin
2026-02-03 18:21:08 +08:00
parent 51bab71291
commit 35918d2a00
14 changed files with 318 additions and 206 deletions
+2 -2
View File
@@ -59,8 +59,8 @@
.del {
position: absolute;
top: -4px;
right: -2px;
top: 2px;
right: 2px;
font-size: var(--font-size-middle);
cursor: pointer;
background-color: var(--color-white-1);
+7 -2
View File
@@ -32,7 +32,7 @@ interface SingleImageProps {
const SingleImage: React.FC<SingleImageProps> = (props) => {
const {
editable,
onDelete: handleOnDelete,
onDelete,
onClick,
autoSize,
uid,
@@ -94,6 +94,11 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
const handleOnLoad = React.useCallback(async () => {}, []);
const handleOnDelete = (uid: number, e: any) => {
e.stopPropagation();
onDelete(uid);
};
const renderProgress = () => {
<Progress
percent={round(progress, 0)}
@@ -190,7 +195,7 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
</>
{editable && (
<span className="del" onClick={() => handleOnDelete(uid)}>
<span className="del" onClick={(e) => handleOnDelete(uid, e)}>
<CloseCircleOutlined />
</span>
)}
+1 -1
View File
@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
// import './iconfont/iconfont.js';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_4613488_vh4wbvsrmif.js'
scriptUrl: '//at.alicdn.com/t/c/font_4613488_ifwyia863k.js'
});
export default IconFont;
+19 -1
View File
@@ -3,5 +3,23 @@ export default {
'accesses.button.add': 'Add Access',
'accesses.table.accessPoints': 'Access Points',
'accesses.table.traffic': 'Traffic Share',
'accesses.table.setAsFallback': 'Set as Fallback'
'accesses.table.setAsFallback': 'Set as Fallback',
'accesses.form.endpoint.title': 'Endpoints',
'accesses.form.endpoint.add': 'Add Endpoint',
'accesses.form.endpoint.fallback': 'Fallback Endpoint',
'accesses.form.endpoint.weight': 'Weight',
'accesses.form.endpoint.model': 'Model',
'accesses.form.metadata.title': 'Metadata',
'accesses.form.metadata.add': 'Add Metadata',
'accesses.table.label.fallback': 'Fallback',
'accesses.form.metadata.size': 'Size',
'accesses.form.metadata.activeSize': 'Active Size',
'accesses.form.metadata.tags': 'Tags',
'accesses.form.metadata.maxTokens': 'Max Tokens',
'accesses.form.metadata.dimension': 'Dimensions',
'accesses.form.metadata.license': 'Licenses',
'accesses.form.metadata.releaseDate': 'Release Date',
'accesses.form.metadata.languages': 'Languages',
'accesses.form.metadata.icons': 'Icon',
'accesses.form.metadata.uploadIcon': 'Upload Icon'
};
+19 -1
View File
@@ -3,5 +3,23 @@ export default {
'accesses.button.add': 'Add Access',
'accesses.table.accessPoints': 'Access Points',
'accesses.table.traffic': 'Traffic Share',
'accesses.table.setAsFallback': 'Set as Fallback'
'accesses.table.setAsFallback': 'Set as Fallback',
'accesses.form.endpoint.title': 'Endpoints',
'accesses.form.endpoint.add': 'Add Endpoint',
'accesses.form.endpoint.fallback': 'Fallback Endpoint',
'accesses.form.endpoint.weight': 'Weight',
'accesses.form.endpoint.model': 'Model',
'accesses.form.metadata.title': 'Metadata',
'accesses.form.metadata.add': 'Add Metadata',
'accesses.table.label.fallback': 'Fallback',
'accesses.form.metadata.size': 'Size',
'accesses.form.metadata.activeSize': 'Active Size',
'accesses.form.metadata.tags': 'Tags',
'accesses.form.metadata.maxTokens': 'Max Tokens',
'accesses.form.metadata.dimension': 'Dimensions',
'accesses.form.metadata.license': 'Licenses',
'accesses.form.metadata.releaseDate': 'Release Date',
'accesses.form.metadata.languages': 'Languages',
'accesses.form.metadata.icons': 'Icon',
'accesses.form.metadata.uploadIcon': 'Upload Icon'
};
+19 -1
View File
@@ -3,5 +3,23 @@ export default {
'accesses.button.add': 'Add Access',
'accesses.table.accessPoints': 'Access Points',
'accesses.table.traffic': 'Traffic Share',
'accesses.table.setAsFallback': 'Set as Fallback'
'accesses.table.setAsFallback': 'Set as Fallback',
'accesses.form.endpoint.title': 'Endpoints',
'accesses.form.endpoint.add': 'Add Endpoint',
'accesses.form.endpoint.fallback': 'Fallback Endpoint',
'accesses.form.endpoint.weight': 'Weight',
'accesses.form.endpoint.model': 'Model',
'accesses.form.metadata.title': 'Metadata',
'accesses.form.metadata.add': 'Add Metadata',
'accesses.table.label.fallback': 'Fallback',
'accesses.form.metadata.size': 'Size',
'accesses.form.metadata.activeSize': 'Active Size',
'accesses.form.metadata.tags': 'Tags',
'accesses.form.metadata.maxTokens': 'Max Tokens',
'accesses.form.metadata.dimension': 'Dimensions',
'accesses.form.metadata.license': 'Licenses',
'accesses.form.metadata.releaseDate': 'Release Date',
'accesses.form.metadata.languages': 'Languages',
'accesses.form.metadata.icons': 'Icon',
'accesses.form.metadata.uploadIcon': 'Upload Icon'
};
+19 -1
View File
@@ -3,5 +3,23 @@ export default {
'accesses.button.add': '添加接入',
'accesses.table.accessPoints': '接入点',
'accesses.table.traffic': '流量',
'accesses.table.setAsFallback': '降级'
'accesses.table.setAsFallback': '降级',
'accesses.form.endpoint.title': '接入点',
'accesses.form.endpoint.add': '添加接入点',
'accesses.form.endpoint.fallback': '降级接入点',
'accesses.form.endpoint.weight': '权重',
'accesses.form.endpoint.model': '模型',
'accesses.form.metadata.title': '元数据',
'accesses.form.metadata.add': '添加元数据',
'accesses.table.label.fallback': '降级',
'accesses.form.metadata.size': '参数量',
'accesses.form.metadata.activeSize': '激活参数量',
'accesses.form.metadata.tags': '标签',
'accesses.form.metadata.maxTokens': '最大上下文长度',
'accesses.form.metadata.dimension': '维度',
'accesses.form.metadata.license': '许可证',
'accesses.form.metadata.releaseDate': '发布日期',
'accesses.form.metadata.languages': '语言',
'accesses.form.metadata.icons': '图标',
'accesses.form.metadata.uploadIcon': '上传图标'
};
@@ -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>
+12 -3
View File
@@ -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>
+34 -14
View File
@@ -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>
</>
);
@@ -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;
+14 -9
View File
@@ -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>
}
+157 -53
View File
@@ -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>
</>
);
};
@@ -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;