diff --git a/react-ui/config/routes.ts b/react-ui/config/routes.ts index bf012a65..a1bb3d0c 100644 --- a/react-ui/config/routes.ts +++ b/react-ui/config/routes.ts @@ -181,7 +181,7 @@ export default [ }, { name: '实验实例详情', - path: 'instance/:autoMLId/:id', + path: 'instance/:experimentId/:id', component: './AutoML/Instance/index', }, ], @@ -217,11 +217,47 @@ export default [ }, { name: '实验实例详情', - path: 'instance/:autoMLId/:id', + path: 'instance/:experimentId/:id', component: './HyperParameter/Instance/index', }, ], }, + { + name: '主动学习', + path: 'active-learn', + routes: [ + { + name: '超参数寻优', + path: '', + component: './ActiveLearn/List/index', + }, + { + name: '实验详情', + path: 'info/:id', + component: './ActiveLearn/Info/index', + }, + { + name: '创建实验', + path: 'create', + component: './ActiveLearn/Create/index', + }, + { + name: '编辑实验', + path: 'edit/:id', + component: './ActiveLearn/Create/index', + }, + { + name: '复制实验', + path: 'copy/:id', + component: './ActiveLearn/Create/index', + }, + { + name: '实验实例详情', + path: 'instance/:experimentId/:id', + component: './ActiveLearn/Instance/index', + }, + ], + }, ], }, { diff --git a/react-ui/src/components/PageTitle/index.less b/react-ui/src/components/PageTitle/index.less index 47907246..40913e00 100644 --- a/react-ui/src/components/PageTitle/index.less +++ b/react-ui/src/components/PageTitle/index.less @@ -7,4 +7,25 @@ background-repeat: no-repeat; background-position: top center; background-size: 100% 100%; + + &__tips { + position: relative; + margin-left: 18px; + padding: 3px 15px; + color: @primary-color; + background: .addAlpha(@primary-color, 0.1) []; + border-radius: 4px; + + &::before { + position: absolute; + top: 10px; + left: -6px; + width: 0; + height: 0; + border-top: 4px solid transparent; + border-right: 6px solid .addAlpha(@primary-color, 0.1) []; + border-bottom: 4px solid transparent; + content: ''; + } + } } diff --git a/react-ui/src/components/PageTitle/index.tsx b/react-ui/src/components/PageTitle/index.tsx index 2703e032..113f9b7b 100644 --- a/react-ui/src/components/PageTitle/index.tsx +++ b/react-ui/src/components/PageTitle/index.tsx @@ -3,6 +3,7 @@ * @Date: 2024-04-17 14:01:46 * @Description: 页面标题 */ +import KFIcon from '@/components/KFIcon'; import classNames from 'classnames'; import React from 'react'; import './index.less'; @@ -10,19 +11,29 @@ import './index.less'; type PageTitleProps = { /** 标题 */ title: React.ReactNode; + /** 图标 */ + tooltip?: string; /** 自定义类名 */ className?: string; /** 自定义样式 */ style?: React.CSSProperties; + /** 自定义标题 */ + titleRender?: () => React.ReactNode; }; /** * 页面标题 */ -function PageTitle({ title, style, className = '' }: PageTitleProps) { +function PageTitle({ title, style, className, tooltip }: PageTitleProps) { return (
- {title} +
{title}
+ {tooltip && ( +
+ + {tooltip} +
+ )}
); } diff --git a/react-ui/src/pages/ActiveLearn/Create/index.less b/react-ui/src/pages/ActiveLearn/Create/index.less new file mode 100644 index 00000000..145be0d1 --- /dev/null +++ b/react-ui/src/pages/ActiveLearn/Create/index.less @@ -0,0 +1,55 @@ +.create-hyperparameter { + height: 100%; + + &__content { + height: calc(100% - 60px); + margin-top: 10px; + padding: 30px 30px 10px; + overflow: auto; + color: @text-color; + font-size: @font-size-content; + background-color: white; + border-radius: 10px; + + &__type { + color: @text-color; + font-size: @font-size-input-lg; + } + + :global { + .ant-input-number { + width: 100%; + } + + .ant-form-item { + margin-bottom: 20px; + } + + .image-url { + margin-top: -15px; + .ant-form-item-label > label::after { + content: ''; + } + } + + .ant-btn-variant-text:disabled { + color: @text-disabled-color; + } + + .ant-btn-variant-text { + color: #565658; + } + + .ant-btn.ant-btn-icon-only .anticon { + font-size: 20px; + } + + .anticon-question-circle { + margin-top: -12px; + margin-left: 1px !important; + color: @text-color-tertiary !important; + font-size: 12px !important; + } + } + } +} diff --git a/react-ui/src/pages/ActiveLearn/Create/index.tsx b/react-ui/src/pages/ActiveLearn/Create/index.tsx new file mode 100644 index 00000000..8ad3f3b1 --- /dev/null +++ b/react-ui/src/pages/ActiveLearn/Create/index.tsx @@ -0,0 +1,142 @@ +/* + * @Author: 赵伟 + * @Date: 2024-04-16 13:58:08 + * @Description: 创建实验 + */ +import PageTitle from '@/components/PageTitle'; +import { AutoMLTaskType } from '@/enums'; +import { + addActiveLearnReq, + getActiveLearnInfoReq, + updateActiveLearnReq, +} from '@/services/activeLearn'; +import { safeInvoke } from '@/utils/functional'; +import { to } from '@/utils/promise'; +import { useLocation, useNavigate, useParams } from '@umijs/max'; +import { App, Button, Form } from 'antd'; +import { useEffect } from 'react'; +import BasicConfig from '../components/CreateForm/BasicConfig'; +import ExecuteConfig from '../components/CreateForm/ExecuteConfig'; +import { ActiveLearnData, FormData } from '../types'; +import styles from './index.less'; + +function CreateActiveLearn() { + const navigate = useNavigate(); + const [form] = Form.useForm(); + const { message } = App.useApp(); + const params = useParams(); + const id = safeInvoke(Number)(params.id); + const { pathname } = useLocation(); + const isCopy = pathname.includes('copy'); + + useEffect(() => { + // 编辑，复制 + if (id && !Number.isNaN(id)) { + getActiveLearnInfo(id); + } + }, [id]); + + // 获取服务详情 + const getActiveLearnInfo = async (id: number) => { + const [res] = await to(getActiveLearnInfoReq({ id })); + if (res && res.data) { + const info: ActiveLearnData = res.data; + const { name: name_str, ...rest } = info; + const name = isCopy ? `${name_str}-copy` : name_str; + const formData = { + ...rest, + name, + }; + + form.setFieldsValue(formData); + } + }; + + // 创建、更新、复制实验 + const createExperiment = async (formData: FormData) => { + // 根据后台要求，修改表单数据 + const object = { + ...formData, + }; + + const params = + id && !isCopy + ? { + id: id, + ...object, + } + : object; + + const request = id && !isCopy ? updateActiveLearnReq : addActiveLearnReq; + const [res] = await to(request(params)); + if (res) { + message.success('操作成功'); + navigate(-1); + } + }; + + // 提交 + const handleSubmit = (values: FormData) => { + createExperiment(values); + }; + + // 取消 + const cancel = () => { + navigate(-1); + }; + + let buttonText = '新建'; + let title = '新建实验'; + if (id) { + if (isCopy) { + title = '复制实验'; + buttonText = '确定'; + } else { + title = '编辑实验'; + buttonText = '更新'; + } + } + + return ( +
+ +
+
+
+ + + + + + + + +
+
+
+ ); +} + +export default CreateActiveLearn; diff --git a/react-ui/src/pages/ActiveLearn/Info/index.less b/react-ui/src/pages/ActiveLearn/Info/index.less new file mode 100644 index 00000000..e27756ef --- /dev/null +++ b/react-ui/src/pages/ActiveLearn/Info/index.less @@ -0,0 +1,40 @@ +.auto-ml-info { + position: relative; + height: 100%; + &__tabs { + height: 50px; + padding-left: 25px; + background-image: url(@/assets/img/page-title-bg.png); + background-repeat: no-repeat; + background-position: top center; + background-size: 100% 100%; + } + + &__content { + height: calc(100% - 60px); + margin-top: 10px; + } + + &__tips { + position: absolute; + top: 11px; + left: 256px; + padding: 3px 12px; + color: #565658; + font-size: @font-size-content; + background: .addAlpha(@primary-color, 0.09) []; + border-radius: 4px; + + &::before { + position: absolute; + top: 10px; + left: -6px; + width: 0; + height: 0; + border-top: 4px solid transparent; + border-right: 6px solid .addAlpha(@primary-color, 0.09) []; + border-bottom: 4px solid transparent; + content: ''; + } + } +} diff --git a/react-ui/src/pages/ActiveLearn/Info/index.tsx b/react-ui/src/pages/ActiveLearn/Info/index.tsx new file mode 100644 index 00000000..0091de1f --- /dev/null +++ b/react-ui/src/pages/ActiveLearn/Info/index.tsx @@ -0,0 +1,45 @@ +/* + * @Author: 赵伟 + * @Date: 2024-04-16 13:58:08 + * @Description: 主动学习实验详情 + */ +import PageTitle from '@/components/PageTitle'; +import { getActiveLearnInfoReq } from '@/services/activeLearn'; +import { safeInvoke } from '@/utils/functional'; +import { to } from '@/utils/promise'; +import { useParams } from '@umijs/max'; +import { useEffect, useState } from 'react'; +import BasicInfo from '../components/BasicInfo'; +import { ActiveLearnData } from '../types'; +import styles from './index.less'; + +function ActiveLearnInfo() { + const params = useParams(); + const id = safeInvoke(Number)(params.id); + const [info, setInfo] = useState(undefined); + + useEffect(() => { + if (id) { + getActiveLearnInfo(); + } + }, []); + + // 获取主动学习详情 + const getActiveLearnInfo = async () => { + const [res] = await to(getActiveLearnInfoReq({ id: id })); + if (res && res.data) { + setInfo(res.data); + } + }; + + return ( +
+ +
+ +
+
+ ); +} + +export default ActiveLearnInfo; diff --git a/react-ui/src/pages/ActiveLearn/Instance/index.less b/react-ui/src/pages/ActiveLearn/Instance/index.less new file mode 100644 index 00000000..889faeb5 --- /dev/null +++ b/react-ui/src/pages/ActiveLearn/Instance/index.less @@ -0,0 +1,42 @@ +.auto-ml-instance { + height: 100%; + + &__tabs { + height: 100%; + :global { + .ant-tabs-nav-list { + width: 100%; + height: 50px; + padding-left: 15px; + background-image: url(@/assets/img/page-title-bg.png); + background-repeat: no-repeat; + background-position: top center; + background-size: 100% 100%; + } + + .ant-tabs-content-holder { + height: calc(100% - 50px); + .ant-tabs-content { + height: 100%; + .ant-tabs-tabpane { + height: 100%; + } + } + } + } + } + + &__basic { + height: calc(100% - 10px); + margin-top: 10px; + } + + &__log { + height: calc(100% - 10px); + margin-top: 10px; + padding: 20px calc(@content-padding - 8px); + overflow-y: visible; + background-color: white; + border-radius: 10px; + } +} diff --git a/react-ui/src/pages/ActiveLearn/Instance/index.tsx b/react-ui/src/pages/ActiveLearn/Instance/index.tsx new file mode 100644 index 00000000..5079fc66 --- /dev/null +++ b/react-ui/src/pages/ActiveLearn/Instance/index.tsx @@ -0,0 +1,215 @@ +import KFIcon from '@/components/KFIcon'; +import { AutoMLTaskType, ExperimentStatus } from '@/enums'; +import LogList from '@/pages/Experiment/components/LogList'; +import { getExperimentInsReq } from '@/services/autoML'; +import { NodeStatus } from '@/types'; +import { parseJsonText } from '@/utils'; +import { safeInvoke } from '@/utils/functional'; +import { to } from '@/utils/promise'; +import { useParams } from '@umijs/max'; +import { Tabs } from 'antd'; +import { useEffect, useRef, useState } from 'react'; +import BasicInfo from '../components/BasicInfo'; +import ExperimentHistory from '../components/ExperimentHistory'; +import ExperimentResult from '../components/ExperimentResult'; +import { AutoMLInstanceData, HyperparameterData } from '../types'; +import styles from './index.less'; + +enum TabKeys { + Params = 'params', + Log = 'log', + Result = 'result', + History = 'history', +} + +function AutoMLInstance() { + const [activeTab, setActiveTab] = useState(TabKeys.Params); + const [autoMLInfo, setAutoMLInfo] = useState(undefined); + const [instanceInfo, setInstanceInfo] = useState(undefined); + const params = useParams(); + // const autoMLId = safeInvoke(Number)(params.autoMLId); + const instanceId = safeInvoke(Number)(params.id); + const evtSourceRef = useRef(null); + + useEffect(() => { + if (instanceId) { + getExperimentInsInfo(false); + } + return () => { + closeSSE(); + }; + }, []); + + // 获取实验实例详情 + const getExperimentInsInfo = async (isStatusDetermined: boolean) => { + const [res] = await to(getExperimentInsReq(instanceId)); + if (res && res.data) { + const info = res.data as AutoMLInstanceData; + const { param, node_status, argo_ins_name, argo_ins_ns, status } = info; + // 解析配置参数 + const paramJson = parseJsonText(param); + if (paramJson) { + setAutoMLInfo(paramJson); + } + + // 这个接口返回的状态有延时，SSE 返回的状态是最新的 + // SSE 调用时，不需要解析 node_status， 也不要重新建立 SSE + if (isStatusDetermined) { + setInstanceInfo((prev) => ({ + ...info, + nodeStatus: prev!.nodeStatus, + })); + return; + } + + // 进行节点状态 + const nodeStatusJson = parseJsonText(node_status); + if (nodeStatusJson) { + Object.keys(nodeStatusJson).forEach((key) => { + if (key.startsWith('auto-ml')) { + const value = nodeStatusJson[key]; + info.nodeStatus = value; + } + }); + } + setInstanceInfo(info); + // 运行中或者等待中，开启 SSE + if (status === ExperimentStatus.Pending || status === ExperimentStatus.Running) { + setupSSE(argo_ins_name, argo_ins_ns); + } + } + }; + + const setupSSE = (name: string, namespace: string) => { + let { origin } = location; + if (process.env.NODE_ENV === 'development') { + origin = 'http://172.20.32.181:31213'; + } + const params = encodeURIComponent(`metadata.namespace=${namespace},metadata.name=${name}`); + const evtSource = new EventSource( + `${origin}/api/v1/realtimeStatus?listOptions.fieldSelector=${params}`, + { withCredentials: false }, + ); + evtSource.onmessage = (event) => { + const data = event?.data; + if (!data) { + return; + } + const dataJson = parseJsonText(data); + if (dataJson) { + const nodes = dataJson?.result?.object?.status?.nodes; + if (nodes) { + const statusData = Object.values(nodes).find((node: any) => + node.displayName.startsWith('auto-ml'), + ) as NodeStatus; + if (statusData) { + setInstanceInfo((prev) => ({ + ...prev!, + nodeStatus: statusData, + })); + + // 实验结束，关闭 SSE + if ( + statusData.phase !== ExperimentStatus.Pending && + statusData.phase !== ExperimentStatus.Running + ) { + closeSSE(); + getExperimentInsInfo(true); + } + } + } + } + }; + evtSource.onerror = (error) => { + console.error('SSE error: ', error); + }; + + evtSourceRef.current = evtSource; + }; + + const closeSSE = () => { + if (evtSourceRef.current) { + evtSourceRef.current.close(); + evtSourceRef.current = null; + } + }; + + const basicTabItems = [ + { + key: TabKeys.Params, + label: '基本信息', + icon: , + children: ( + + ), + }, + { + key: TabKeys.Log, + label: '日志', + icon: , + children: ( +
+ {instanceInfo && instanceInfo.nodeStatus && ( + + )} +
+ ), + }, + ]; + + const resultTabItems = [ + { + key: TabKeys.Result, + label: '实验结果', + icon: , + children: ( + + ), + }, + { + key: TabKeys.History, + label: 'Trial 列表', + icon: , + children: ( + + ), + }, + ]; + + const tabItems = + instanceInfo?.status === ExperimentStatus.Succeeded + ? [...basicTabItems, ...resultTabItems] + : basicTabItems; + + return ( +
+ +
+ ); +} + +export default AutoMLInstance; diff --git a/react-ui/src/pages/ActiveLearn/List/index.tsx b/react-ui/src/pages/ActiveLearn/List/index.tsx new file mode 100644 index 00000000..01e316bd --- /dev/null +++ b/react-ui/src/pages/ActiveLearn/List/index.tsx @@ -0,0 +1,13 @@ +/* + * @Author: 赵伟 + * @Date: 2024-04-16 13:58:08 + * @Description: 超参数自动寻优 + */ + +import ExperimentList, { ExperimentListType } from '@/pages/AutoML/components/ExperimentList'; + +function ActiveLearn() { + return ; +} + +export default ActiveLearn; diff --git a/react-ui/src/pages/ActiveLearn/components/BasicInfo/index.less b/react-ui/src/pages/ActiveLearn/components/BasicInfo/index.less new file mode 100644 index 00000000..f365aa66 --- /dev/null +++ b/react-ui/src/pages/ActiveLearn/components/BasicInfo/index.less @@ -0,0 +1,13 @@ +.hyper-parameter-basic { + height: 100%; + padding: 20px @content-padding; + overflow-y: auto; + background-color: white; + border-radius: 10px; + + :global { + .kf-basic-info__item__value__text { + white-space: pre; + } + } +} diff --git a/react-ui/src/pages/ActiveLearn/components/BasicInfo/index.tsx b/react-ui/src/pages/ActiveLearn/components/BasicInfo/index.tsx new file mode 100644 index 00000000..6536b772 --- /dev/null +++ b/react-ui/src/pages/ActiveLearn/components/BasicInfo/index.tsx @@ -0,0 +1,278 @@ +import ConfigInfo, { type BasicInfoData } from '@/components/ConfigInfo'; +import { AutoMLTaskType, autoMLTaskTypeOptions } from '@/enums'; +import { useComputingResource } from '@/hooks/useComputingResource'; +import { + classifierAlgorithms, + FrameworkType, + frameworkTypeOptions, + queryStrategies, + regressorAlgorithms, +} from '@/pages/ActiveLearn/components/CreateForm/utils'; +import { ActiveLearnData } from '@/pages/ActiveLearn/types'; +import { experimentStatusInfo } from '@/pages/Experiment/status'; +import { type NodeStatus } from '@/types'; +import { elapsedTime } from '@/utils/date'; +import { + formatBoolean, + formatCodeConfig, + formatDataset, + formatDate, + formatEnum, + formatMirror, + formatModel, +} from '@/utils/format'; +import { Flex } from 'antd'; +import classNames from 'classnames'; +import { useMemo } from 'react'; +import styles from './index.less'; + +type BasicInfoProps = { + info?: ActiveLearnData; + className?: string; + isInstance?: boolean; + runStatus?: NodeStatus; +}; + +function BasicInfo({ info, className, runStatus, isInstance = false }: BasicInfoProps) { + const getResourceDescription = useComputingResource()[1]; + const basicDatas: BasicInfoData[] = useMemo(() => { + if (!info) { + return []; + } + + return [ + { + label: '实验名称', + value: info.name, + }, + { + label: '实验描述', + value: info.description, + }, + { + label: '创建人', + value: info.create_by, + }, + { + label: '创建时间', + value: info.create_time, + format: formatDate, + }, + { + label: '更新时间', + value: info.update_time, + format: formatDate, + }, + ]; + }, [info]); + + const configDatas: BasicInfoData[] = useMemo(() => { + if (!info) { + return []; + } + + const modelInfo = [ + { + label: '模型', + value: info.model, + format: formatModel, + }, + { + label: '模型文件路径', + value: info.model_py, + }, + { + label: '模型类名称', + value: info.model_class_name, + }, + ]; + + const lossInfo = [ + { + label: 'loss文件路径', + value: info.loss_py, + }, + { + label: 'loss类名', + value: info.loss_class_name, + }, + ]; + + const algorithmInfo = [ + { + label: info.task_type === AutoMLTaskType.Regression ? '回归算法' : '分类算法', + value: + info.task_type === AutoMLTaskType.Regression ? info.regressor_alg : info.classifier_alg, + format: formatEnum( + info.task_type === AutoMLTaskType.Regression ? regressorAlgorithms : classifierAlgorithms, + ), + }, + ]; + + const diffInfo = + info.framework_type === FrameworkType.Pytorch + ? [...modelInfo, ...lossInfo] + : info.framework_type === FrameworkType.Keras + ? modelInfo + : algorithmInfo; + + return [ + { + label: '任务类型', + value: info.task_type, + format: formatEnum(autoMLTaskTypeOptions), + }, + { + label: '框架类型', + value: info.framework_type, + format: formatEnum(frameworkTypeOptions), + }, + ...diffInfo, + { + label: '代码配置', + value: info.code_config, + format: formatCodeConfig, + }, + { + label: '数据集', + value: info.dataset, + format: formatDataset, + }, + { + label: '数据集处理文件路径', + value: info.dataset_py, + }, + { + label: '数据集类名', + value: info.dataset_class_name, + }, + { + label: '镜像', + value: info.image, + format: formatMirror, + }, + { + label: '资源规格', + value: info.computing_resource_id, + format: getResourceDescription, + }, + { + label: '是否打乱', + value: info.shuffle, + format: formatBoolean, + }, + { + label: '数据量', + value: info.data_size, + }, + { + label: '训练集数据量', + value: info.train_size, + }, + { + label: '初始训练数据量', + value: info.ninitial, + }, + { + label: '查询次数', + value: info.nqueries, + }, + { + label: '每次查询数据量', + value: info.ninstances, + }, + { + label: '查询策略', + value: info.query_strategy, + format: formatEnum(queryStrategies), + }, + { + label: '轮数', + value: info.ncheckpoint, + }, + { + label: 'batch_size', + value: info.batch_size, + }, + { + label: 'epochs', + value: info.epochs, + }, + { + label: '学习率', + value: info.lr, + }, + ]; + }, [info, getResourceDescription]); + + const instanceDatas = useMemo(() => { + if (!runStatus) { + return []; + } + + return [ + { + label: '启动时间', + value: formatDate(runStatus.startedAt), + ellipsis: true, + }, + { + label: '执行时长', + value: elapsedTime(runStatus.startedAt, runStatus.finishedAt), + ellipsis: true, + }, + { + label: '状态', + value: ( + + +
+ {experimentStatusInfo[runStatus?.phase]?.label} +
+ + ), + ellipsis: true, + }, + ]; + }, [runStatus]); + + return ( +
+ {isInstance && runStatus && ( + + )} + {!isInstance && ( + + )} + +
+ ); +} + +export default BasicInfo; diff --git a/react-ui/src/pages/ActiveLearn/components/CreateForm/BasicConfig.tsx b/react-ui/src/pages/ActiveLearn/components/CreateForm/BasicConfig.tsx new file mode 100644 index 00000000..8829f12a --- /dev/null +++ b/react-ui/src/pages/ActiveLearn/components/CreateForm/BasicConfig.tsx @@ -0,0 +1,54 @@ +import SubAreaTitle from '@/components/SubAreaTitle'; +import { Col, Form, Input, Row } from 'antd'; + +function BasicConfig() { + return ( + <> + + + + + + + + + + + + + + + + + ); +} + +export default BasicConfig; diff --git a/react-ui/src/pages/ActiveLearn/components/CreateForm/ExecuteConfig.tsx b/react-ui/src/pages/ActiveLearn/components/CreateForm/ExecuteConfig.tsx new file mode 100644 index 00000000..37d04ee9 --- /dev/null +++ b/react-ui/src/pages/ActiveLearn/components/CreateForm/ExecuteConfig.tsx @@ -0,0 +1,530 @@ +import CodeSelect from '@/components/CodeSelect'; +import ParameterSelect from '@/components/ParameterSelect'; +import ResourceSelect, { + requiredValidator, + ResourceSelectorType, +} from '@/components/ResourceSelect'; +import SubAreaTitle from '@/components/SubAreaTitle'; +import { AutoMLTaskType, autoMLTaskTypeOptions } from '@/enums'; +import { Col, Form, Input, InputNumber, Radio, Row, Select, Switch } from 'antd'; +import { + classifierAlgorithms, + FrameworkType, + frameworkTypeOptions, + queryStrategies, + regressorAlgorithms, +} from './utils'; + +function ExecuteConfig() { + const form = Form.useFormInstance(); + return ( + <> + + + + + + form.resetFields(['metrics'])} + > + + + + + + + + + + + + + + + + + + + {frameworkType === FrameworkType.Pytorch ? ( + <> + + + + + + + + + + + + + + + + ) : null} + + ); + } else if (frameworkType === FrameworkType.Sklearn) { + if (taskType === AutoMLTaskType.Classification) { + return ( + <> + + + + + + + + + ); + } + } else { + return null; + } + }} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +