chore: access meta
This commit is contained in:
@@ -59,8 +59,8 @@
|
|||||||
|
|
||||||
.del {
|
.del {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -4px;
|
top: 2px;
|
||||||
right: -2px;
|
right: 2px;
|
||||||
font-size: var(--font-size-middle);
|
font-size: var(--font-size-middle);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: var(--color-white-1);
|
background-color: var(--color-white-1);
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ interface SingleImageProps {
|
|||||||
const SingleImage: React.FC<SingleImageProps> = (props) => {
|
const SingleImage: React.FC<SingleImageProps> = (props) => {
|
||||||
const {
|
const {
|
||||||
editable,
|
editable,
|
||||||
onDelete: handleOnDelete,
|
onDelete,
|
||||||
onClick,
|
onClick,
|
||||||
autoSize,
|
autoSize,
|
||||||
uid,
|
uid,
|
||||||
@@ -94,6 +94,11 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
|
|||||||
|
|
||||||
const handleOnLoad = React.useCallback(async () => {}, []);
|
const handleOnLoad = React.useCallback(async () => {}, []);
|
||||||
|
|
||||||
|
const handleOnDelete = (uid: number, e: any) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onDelete(uid);
|
||||||
|
};
|
||||||
|
|
||||||
const renderProgress = () => {
|
const renderProgress = () => {
|
||||||
<Progress
|
<Progress
|
||||||
percent={round(progress, 0)}
|
percent={round(progress, 0)}
|
||||||
@@ -190,7 +195,7 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
|
|||||||
</>
|
</>
|
||||||
|
|
||||||
{editable && (
|
{editable && (
|
||||||
<span className="del" onClick={() => handleOnDelete(uid)}>
|
<span className="del" onClick={(e) => handleOnDelete(uid, e)}>
|
||||||
<CloseCircleOutlined />
|
<CloseCircleOutlined />
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
|
|||||||
// import './iconfont/iconfont.js';
|
// import './iconfont/iconfont.js';
|
||||||
|
|
||||||
const IconFont = createFromIconfontCN({
|
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;
|
export default IconFont;
|
||||||
|
|||||||
@@ -3,5 +3,23 @@ export default {
|
|||||||
'accesses.button.add': 'Add Access',
|
'accesses.button.add': 'Add Access',
|
||||||
'accesses.table.accessPoints': 'Access Points',
|
'accesses.table.accessPoints': 'Access Points',
|
||||||
'accesses.table.traffic': 'Traffic Share',
|
'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'
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -3,5 +3,23 @@ export default {
|
|||||||
'accesses.button.add': 'Add Access',
|
'accesses.button.add': 'Add Access',
|
||||||
'accesses.table.accessPoints': 'Access Points',
|
'accesses.table.accessPoints': 'Access Points',
|
||||||
'accesses.table.traffic': 'Traffic Share',
|
'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'
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -3,5 +3,23 @@ export default {
|
|||||||
'accesses.button.add': 'Add Access',
|
'accesses.button.add': 'Add Access',
|
||||||
'accesses.table.accessPoints': 'Access Points',
|
'accesses.table.accessPoints': 'Access Points',
|
||||||
'accesses.table.traffic': 'Traffic Share',
|
'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'
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -3,5 +3,23 @@ export default {
|
|||||||
'accesses.button.add': '添加接入',
|
'accesses.button.add': '添加接入',
|
||||||
'accesses.table.accessPoints': '接入点',
|
'accesses.table.accessPoints': '接入点',
|
||||||
'accesses.table.traffic': '流量',
|
'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 RowChildren from '@/components/seal-table/components/row-children';
|
||||||
import StatusTag from '@/components/status-tag';
|
import StatusTag from '@/components/status-tag';
|
||||||
import { DeleteOutlined } from '@ant-design/icons';
|
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 dayjs from 'dayjs';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { mockAccessPointList } from '../config/mock';
|
import { mockAccessPointList } from '../config/mock';
|
||||||
|
|
||||||
const CellContent = styled.div`
|
const CellContent = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -50,6 +50,7 @@ export const childActionList = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
const AccessItem: React.FC<AccessItemProps> = ({ onSelect, data }) => {
|
const AccessItem: React.FC<AccessItemProps> = ({ onSelect, data }) => {
|
||||||
|
const intl = useIntl();
|
||||||
return (
|
return (
|
||||||
<div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
|
<div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
|
||||||
<RowChildren>
|
<RowChildren>
|
||||||
@@ -64,25 +65,19 @@ const AccessItem: React.FC<AccessItemProps> = ({ onSelect, data }) => {
|
|||||||
</CellContent>
|
</CellContent>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={5}>
|
<Col span={5}>
|
||||||
<CellContent style={{ paddingLeft: 44 }}>
|
<CellContent style={{ paddingLeft: 58 }}>
|
||||||
<AutoTooltip ghost>Weight: 20</AutoTooltip>
|
{data.weight && (
|
||||||
|
<AutoTooltip ghost>
|
||||||
|
{intl.formatMessage({ id: 'accesses.form.endpoint.weight' })}:
|
||||||
|
20 /
|
||||||
|
</AutoTooltip>
|
||||||
|
)}
|
||||||
{data.is_fallback && (
|
{data.is_fallback && (
|
||||||
<Tag
|
<span>
|
||||||
variant="outlined"
|
{intl.formatMessage({
|
||||||
color="gray"
|
id: 'accesses.table.label.fallback'
|
||||||
style={{
|
})}
|
||||||
color: 'var(--ant-color-text-tertiary)',
|
</span>
|
||||||
marginLeft: 8,
|
|
||||||
fontSize: 12,
|
|
||||||
height: 18,
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
borderRadius: 10,
|
|
||||||
borderColor: 'var(--ant-color-border)'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Fallback
|
|
||||||
</Tag>
|
|
||||||
)}
|
)}
|
||||||
</CellContent>
|
</CellContent>
|
||||||
</Col>
|
</Col>
|
||||||
|
|||||||
@@ -11,12 +11,21 @@ const Basic = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Form.Item name="name" data-field="name">
|
<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>
|
||||||
<Form.Item name="categories">
|
<Form.Item
|
||||||
|
name="categories"
|
||||||
|
normalize={(value) => (value ? [value] : [])}
|
||||||
|
getValueProps={(value) => ({
|
||||||
|
value: Array.isArray(value) ? value[0] : value
|
||||||
|
})}
|
||||||
|
>
|
||||||
<SealSelect
|
<SealSelect
|
||||||
options={modelCategories}
|
options={modelCategories}
|
||||||
label="Category"
|
label={intl.formatMessage({ id: 'models.form.categories' })}
|
||||||
allowNull
|
allowNull
|
||||||
></SealSelect>
|
></SealSelect>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|||||||
@@ -3,8 +3,7 @@ import MetadataList from '@/components/metadata-list';
|
|||||||
import SealCascader from '@/components/seal-form/seal-cascader';
|
import SealCascader from '@/components/seal-form/seal-cascader';
|
||||||
import SealInput from '@/components/seal-form/seal-input';
|
import SealInput from '@/components/seal-form/seal-input';
|
||||||
import { useIntl } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
import { Checkbox, Form } from 'antd';
|
import { Form } from 'antd';
|
||||||
import { Tooltip } from 'antd/lib';
|
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { FormData } from '../config/types';
|
import { FormData } from '../config/types';
|
||||||
@@ -151,9 +150,14 @@ const Endpoints = () => {
|
|||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
<MetadataList
|
<MetadataList
|
||||||
label={'Endpoints'}
|
label={''}
|
||||||
|
styles={{
|
||||||
|
wrapper: {
|
||||||
|
paddingTop: 14
|
||||||
|
}
|
||||||
|
}}
|
||||||
dataList={dataList}
|
dataList={dataList}
|
||||||
btnText="Add Endpoint"
|
btnText={intl.formatMessage({ id: 'accesses.form.endpoint.add' })}
|
||||||
onAdd={handleOnAdd}
|
onAdd={handleOnAdd}
|
||||||
onDelete={handleOnDelete}
|
onDelete={handleOnDelete}
|
||||||
>
|
>
|
||||||
@@ -170,27 +174,43 @@ const Endpoints = () => {
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
maxTagCount={1}
|
maxTagCount={1}
|
||||||
placeholder="provider/model"
|
placeholder={intl.formatMessage({
|
||||||
|
id: 'accesses.form.endpoint.model'
|
||||||
|
})}
|
||||||
options={providerModelList}
|
options={providerModelList}
|
||||||
showCheckedStrategy="SHOW_CHILD"
|
showCheckedStrategy="SHOW_CHILD"
|
||||||
getPopupContainer={(triggerNode) => triggerNode.parentNode}
|
getPopupContainer={(triggerNode) => triggerNode.parentNode}
|
||||||
></SealCascader>
|
></SealCascader>
|
||||||
<span className="seprator">:</span>
|
<span className="seprator">:</span>
|
||||||
<SealInput.Number
|
<SealInput.Number
|
||||||
style={{ flex: 60 }}
|
style={{ flex: 100 }}
|
||||||
placeholder="weight"
|
placeholder={intl.formatMessage({
|
||||||
|
id: 'accesses.form.endpoint.weight'
|
||||||
|
})}
|
||||||
></SealInput.Number>
|
></SealInput.Number>
|
||||||
<Tooltip title="fallback">
|
|
||||||
<Checkbox
|
|
||||||
checked={item.is_fallback}
|
|
||||||
onChange={(e) => handleFallbackChange(e, index)}
|
|
||||||
style={{ marginLeft: 12, marginRight: 4 }}
|
|
||||||
></Checkbox>
|
|
||||||
</Tooltip>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</MetadataList>
|
</MetadataList>
|
||||||
</Form.Item>
|
</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>
|
</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;
|
|
||||||
@@ -36,20 +36,20 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
|
|||||||
const segmentOptions = [
|
const segmentOptions = [
|
||||||
{
|
{
|
||||||
value: TABKeysMap.BASIC,
|
value: TABKeysMap.BASIC,
|
||||||
label: 'Basic',
|
label: intl.formatMessage({ id: 'common.title.basicInfo' }),
|
||||||
icon: <IconFont type="icon-basic" />,
|
icon: <IconFont type="icon-basic" />,
|
||||||
field: 'name'
|
field: 'name'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: TABKeysMap.METADATA,
|
value: TABKeysMap.METADATA,
|
||||||
label: 'Metadata',
|
label: intl.formatMessage({ id: 'accesses.form.metadata.title' }),
|
||||||
icon: <IconFont type="icon-speed" />,
|
icon: <IconFont type="icon-database" />,
|
||||||
field: 'metadata'
|
field: 'metaSize'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: TABKeysMap.ENDPOINTS,
|
value: TABKeysMap.ENDPOINTS,
|
||||||
label: 'Endpoints',
|
label: intl.formatMessage({ id: 'accesses.form.endpoint.title' }),
|
||||||
icon: <IconFont type="icon-settings" />,
|
icon: <IconFont type="icon-language" />,
|
||||||
field: 'endpoints'
|
field: 'endpoints'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
@@ -88,7 +88,12 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
|
|||||||
form={form}
|
form={form}
|
||||||
onFinish={onFinish}
|
onFinish={onFinish}
|
||||||
initialValues={{
|
initialValues={{
|
||||||
categories: []
|
categories: [],
|
||||||
|
meta: {
|
||||||
|
size: null,
|
||||||
|
activated_size: null,
|
||||||
|
dimensions: null
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Basic />
|
<Basic />
|
||||||
@@ -99,13 +104,13 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
|
|||||||
items={[
|
items={[
|
||||||
{
|
{
|
||||||
key: TABKeysMap.METADATA,
|
key: TABKeysMap.METADATA,
|
||||||
label: 'Metadata',
|
label: intl.formatMessage({ id: 'accesses.form.metadata.title' }),
|
||||||
forceRender: true,
|
forceRender: true,
|
||||||
children: <MetaData></MetaData>
|
children: <MetaData></MetaData>
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: TABKeysMap.ENDPOINTS,
|
key: TABKeysMap.ENDPOINTS,
|
||||||
label: 'Endpoints',
|
label: intl.formatMessage({ id: 'accesses.form.endpoint.title' }),
|
||||||
forceRender: true,
|
forceRender: true,
|
||||||
children: <Endpoints></Endpoints>
|
children: <Endpoints></Endpoints>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,71 +1,175 @@
|
|||||||
import LabelSelector from '@/components/label-selector';
|
import SingleImage from '@/components/auto-image/single-image';
|
||||||
import { LabelSelectorContext } from '@/components/label-selector/context';
|
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 { useIntl } from '@umijs/max';
|
||||||
import { Form } from 'antd';
|
import { Button, Form } from 'antd';
|
||||||
import _ from 'lodash';
|
import styled from 'styled-components';
|
||||||
import { FormData } from '../config/types';
|
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 MetaData = () => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const form = Form.useFormInstance<FormData>();
|
const form = Form.useFormInstance<FormData>();
|
||||||
const metadata = Form.useWatch('meta', form);
|
const icon = Form.useWatch(['meta', 'icon'], form);
|
||||||
|
|
||||||
const handleMetadataChange = (labels: Record<string, any>) => {
|
const handleMetadataChange = (labels: Record<string, any>) => {
|
||||||
form.setFieldValue('meta', labels);
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<LabelSelectorContext.Provider
|
<SizeWrapper>
|
||||||
value={{
|
<Form.Item<FormData>
|
||||||
options: [
|
data-field="metaSize"
|
||||||
{
|
name={['meta', 'size']}
|
||||||
label: 'max_token_len',
|
normalize={(v) => (v === 0 ? null : v)}
|
||||||
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();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
]}
|
|
||||||
>
|
>
|
||||||
<LabelSelector
|
<SealInputNumber
|
||||||
isAutoComplete
|
min={0}
|
||||||
label={'Metadatas'}
|
label={`${intl.formatMessage({ id: 'accesses.form.metadata.size' })} (B)`}
|
||||||
labels={metadata}
|
></SealInputNumber>
|
||||||
btnText="Add Metadata"
|
|
||||||
onChange={handleMetadataChange}
|
|
||||||
></LabelSelector>
|
|
||||||
</Form.Item>
|
</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;
|
|
||||||
Reference in New Issue
Block a user