From ce9f2638a6593f2a338ed8e003e374406f86b8cd Mon Sep 17 00:00:00 2001 From: zhaowei Date: Fri, 25 Apr 2025 14:55:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=BA=E5=99=A8=E5=AD=A6=E4=B9=A0?= =?UTF-8?q?=E6=96=87=E6=9C=AC=E5=88=86=E7=B1=BB=E5=8F=AF=E8=A7=86=E5=8C=96?= =?UTF-8?q?=E7=BB=93=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/src/components/IFramePage/index.tsx | 13 +++-- .../components/ExperimentHistory/index.tsx | 2 +- react-ui/src/pages/AutoML/Instance/index.tsx | 44 +++++++++++----- .../components/ExperimentResult/index.less | 2 +- .../components/ExperimentResult/index.tsx | 50 ++++++++++--------- .../AutoML/components/TensorBoard/index.tsx | 42 ++++++++++++++++ .../DevelopmentEnvironment/Create/index.tsx | 11 +--- react-ui/src/utils/sessionStorage.ts | 2 + 8 files changed, 115 insertions(+), 51 deletions(-) create mode 100644 react-ui/src/pages/AutoML/components/TensorBoard/index.tsx diff --git a/react-ui/src/components/IFramePage/index.tsx b/react-ui/src/components/IFramePage/index.tsx index fe5ab3b1..65777e5d 100644 --- a/react-ui/src/components/IFramePage/index.tsx +++ b/react-ui/src/components/IFramePage/index.tsx @@ -16,6 +16,7 @@ export enum IframePageType { GitLink = 'GitLink', // git link Aim = 'Aim', // 实验对比 Knowledge = 'Knowledge', // 知识图谱 + TensorBoard = 'TensorBoard', // 可视化结果 } const getRequestAPI = (type: IframePageType): (() => Promise) => { @@ -36,12 +37,18 @@ const getRequestAPI = (type: IframePageType): (() => Promise) => { return () => Promise.resolve({ code: 200, - data: SessionStorage.getItem(SessionStorage.aimUrlKey) || '', + data: SessionStorage.getItem(SessionStorage.aimUrlKey), }); - case IframePageType.Knowledge: { + case IframePageType.Knowledge: // 知识图谱 return () => Promise.resolve({ code: 200, data: `http://172.168.15.197:32701` }); - } + case IframePageType.TensorBoard: + // 知识图谱 + return () => + Promise.resolve({ + code: 200, + data: SessionStorage.getItem(SessionStorage.editorUrlKey), + }); } }; diff --git a/react-ui/src/pages/ActiveLearn/components/ExperimentHistory/index.tsx b/react-ui/src/pages/ActiveLearn/components/ExperimentHistory/index.tsx index 58f70b9f..e40cd2fb 100644 --- a/react-ui/src/pages/ActiveLearn/components/ExperimentHistory/index.tsx +++ b/react-ui/src/pages/ActiveLearn/components/ExperimentHistory/index.tsx @@ -54,7 +54,7 @@ function ExperimentHistory({ trialList, isClassification }: ExperimentHistoryPro icon={} onClick={() => { if (query_idx) { - const fileName = query_idx.split('/').slice(-1)[0]; + const fileName = query_idx.split('/').pop(); let url = query_idx; if (process.env.NODE_ENV === 'development') { url = query_idx.replace('172.168.15.197:31213', 'localhost:8000'); diff --git a/react-ui/src/pages/AutoML/Instance/index.tsx b/react-ui/src/pages/AutoML/Instance/index.tsx index 9d97f1c2..09a55023 100644 --- a/react-ui/src/pages/AutoML/Instance/index.tsx +++ b/react-ui/src/pages/AutoML/Instance/index.tsx @@ -1,5 +1,5 @@ import KFIcon from '@/components/KFIcon'; -import { AutoMLTaskType, ExperimentStatus } from '@/enums'; +import { AutoMLTaskType, AutoMLType, ExperimentStatus } from '@/enums'; import { getExperimentInsReq } from '@/services/autoML'; import { NodeStatus } from '@/types'; import { parseJsonText } from '@/utils'; @@ -12,6 +12,7 @@ import AutoMLBasic from '../components/AutoMLBasic'; import ExperimentHistory from '../components/ExperimentHistory'; import ExperimentLog from '../components/ExperimentLog'; import ExperimentResult from '../components/ExperimentResult'; +import TensorBoard from '../components/TensorBoard'; import { AutoMLData, AutoMLInstanceData } from '../types'; import styles from './index.less'; @@ -20,6 +21,7 @@ enum TabKeys { Log = 'log', Result = 'result', History = 'history', + Visual = 'Visual', } const NodePrefix = 'workflow'; @@ -29,6 +31,7 @@ function AutoMLInstance() { const [instanceInfo, setInstanceInfo] = useState(undefined); const [workflowStatus, setWorkflowStatus] = useState(undefined); const [nodes, setNodes] = useState | undefined>(undefined); + const [type, setType] = useState(undefined); const params = useParams(); const instanceId = safeInvoke(Number)(params.id); const evtSourceRef = useRef(null); @@ -49,6 +52,8 @@ function AutoMLInstance() { if (res && res.data) { const info = res.data as AutoMLInstanceData; const { param, node_status, argo_ins_name, argo_ins_ns, status, create_time, type } = info; + + setType(type); // 解析配置参数 const paramJson = parseJsonText(param); if (paramJson) { @@ -174,24 +179,37 @@ function AutoMLInstance() { icon: , children: ( ), }, - { - key: TabKeys.History, - label: '试验列表', - icon: , - children: ( - - ), - }, + type === AutoMLType.Text + ? { + key: TabKeys.Visual, + label: '可视化结果', + icon: , + children: ( + + ), + } + : { + key: TabKeys.History, + label: '试验列表', + icon: , + children: ( + + ), + }, ]; const tabItems = diff --git a/react-ui/src/pages/AutoML/components/ExperimentResult/index.less b/react-ui/src/pages/AutoML/components/ExperimentResult/index.less index 27034da0..e06e1770 100644 --- a/react-ui/src/pages/AutoML/components/ExperimentResult/index.less +++ b/react-ui/src/pages/AutoML/components/ExperimentResult/index.less @@ -9,7 +9,7 @@ &__download { padding-top: 16px; padding-bottom: 16px; - + margin-top: 16px; padding-left: @content-padding; color: @text-color; font-size: 13px; diff --git a/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx b/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx index 8680bf60..8900b2a3 100644 --- a/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx +++ b/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx @@ -1,4 +1,5 @@ import InfoGroup from '@/components/InfoGroup'; +import { AutoMLType } from '@/enums'; import { getFileReq } from '@/services/file'; import { to } from '@/utils/promise'; import { Button, Image } from 'antd'; @@ -9,9 +10,10 @@ type ExperimentResultProps = { fileUrl?: string; imageUrl?: string; modelPath?: string; + type?: string; }; -function ExperimentResult({ fileUrl, imageUrl, modelPath }: ExperimentResultProps) { +function ExperimentResult({ fileUrl, imageUrl, modelPath, type }: ExperimentResultProps) { const [result, setResult] = useState(''); const images = useMemo(() => { @@ -40,31 +42,33 @@ function ExperimentResult({ fileUrl, imageUrl, modelPath }: ExperimentResultProp
{result}
 - -
- - console.log(`current index: ${current}, prev index: ${prev}`), - }} - > - {images.map((item) => ( - - ))} - -
- + {type === AutoMLType.Table && ( + +
+ + console.log(`current index: ${current}, prev index: ${prev}`), + }} + > + {images.map((item) => ( + + ))} + +
+ + )} {modelPath && (
文件名 - save_model.joblib + {modelPath.split('/').pop()}