feat: 完成机器学习视频

react-ui/src/components/IFramePage/index.tsx

@@ -1,6 +1,6 @@
 import FullScreenFrame from '@/components/FullScreenFrame';
 import KFSpin from '@/components/KFSpin';
-import { getLabelStudioUrl } from '@/services/developmentEnvironment';
+import { getKnowledgeGraphUrl, getLabelStudioUrl } from '@/services/developmentEnvironment';
 import { to } from '@/utils/promise';
 import SessionStorage from '@/utils/sessionStorage';
 import { FloatButton } from 'antd';
@@ -41,7 +41,7 @@ const getRequestAPI = (type: IframePageType): (() => Promise<any>) => {
         });
     case IframePageType.Knowledge:
       // 知识图谱
-      return () => Promise.resolve({ code: 200, data: `http://172.168.15.197:32701` });
+      return getKnowledgeGraphUrl;
     case IframePageType.TensorBoard:
       // TensorBoard
       return () =>

react-ui/src/pages/ActiveLearn/components/ExperimentHistory/index.tsx

@@ -72,7 +72,7 @@ function ExperimentHistory({ trialList, isClassification }: ExperimentHistoryPro
 
   // 自定义展开视图
   const expandedRowRender = (record: ActiveLearnTrial) => {
-    return <TrialFileTree title="训练结果" trial={record}></TrialFileTree>;
+    return <TrialFileTree title="训练结果" file={record.file}></TrialFileTree>;
   };
 
   // 展开实例

react-ui/src/pages/ActiveLearn/components/ExperimentVisualResult/index.tsx

@@ -5,7 +5,7 @@
  */
 
 import IframePage, { IframePageType } from '@/components/IFramePage';
-import { getExpMetricsReq } from '@/services/experiment/index.js';
+import { getExpMetricsReq } from '@/services/activeLearn';
 import { to } from '@/utils/promise';
 import SessionStorage from '@/utils/sessionStorage';
 import { useEffect, useState } from 'react';

react-ui/src/pages/AutoML/Instance/index.tsx

@@ -183,6 +183,7 @@ function AutoMLInstance() {
           fileUrl={instanceInfo?.result_path}
           imageUrl={instanceInfo?.img_path}
           modelPath={instanceInfo?.model_path}
+          file={instanceInfo?.file_map}
         />
       ),
     },

react-ui/src/pages/AutoML/components/ExperimentResult/index.less

@@ -24,6 +24,16 @@
     }
   }
 
+  &__file {
+    height: 100%;
+    :global {
+      .kf-info-group__content {
+        height: calc(100% - 56px);
+        overflow-y: auto;
+      }
+    }
+  }
+
   &__text {
     font-family: 'Roboto Mono', 'Menlo', 'Consolas', 'Monaco', monospace;
     white-space: pre;

react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx

@@ -1,5 +1,6 @@
 import InfoGroup from '@/components/InfoGroup';
 import { AutoMLType } from '@/enums';
+import { type HyperParameterFile } from '@/pages/AutoML/types';
 import TrialFileTree from '@/pages/HyperParameter/components/TrialFileTree';
 import { getFileReq } from '@/services/file';
 import { to } from '@/utils/promise';
@@ -12,9 +13,10 @@ type ExperimentResultProps = {
   imageUrl?: string;
   modelPath?: string;
   type?: string;
+  file?: HyperParameterFile;
 };
 
-function ExperimentResult({ fileUrl, imageUrl, modelPath, type }: ExperimentResultProps) {
+function ExperimentResult({ fileUrl, imageUrl, modelPath, type, file }: ExperimentResultProps) {
   const [result, setResult] = useState<string | undefined>('');
 
   const images = useMemo(() => {
@@ -33,20 +35,25 @@ function ExperimentResult({ fileUrl, imageUrl, modelPath, type }: ExperimentResu
       }
     };
 
-    if (fileUrl) {
+    if (fileUrl && type !== AutoMLType.Video) {
       getResultFile();
     }
-  }, [fileUrl]);
+  }, [fileUrl, type]);
 
   return (
     <div className={styles['experiment-result']}>
-      <InfoGroup title="实验结果" height={420} width="100%">
-        {type === AutoMLType.Video ? (
-          <TrialFileTree title=""></TrialFileTree>
-        ) : (
+      {type === AutoMLType.Video ? (
+        <TrialFileTree
+          file={file}
+          title="实验结果"
+          classname={styles['experiment-result__file']}
+        ></TrialFileTree>
+      ) : (
+        <InfoGroup title="实验结果" height={420}>
           <div className={styles['experiment-result__text']}>{result}</div>
-        )}
-      </InfoGroup>
+        </InfoGroup>
+      )}
+
       {type === AutoMLType.Table && (
         <InfoGroup title="可视化结果" style={{ margin: '16px 0' }}>
           <div className={styles['experiment-result__images']}>
@@ -70,6 +77,7 @@ function ExperimentResult({ fileUrl, imageUrl, modelPath, type }: ExperimentResu
           </div>
         </InfoGroup>
       )}
+
       {modelPath && (
         <div className={styles['experiment-result__download']}>
           <span style={{ marginRight: '12px', color: '#606b7a' }}>文件名</span>

react-ui/src/pages/AutoML/types.ts

@@ -1,13 +1,8 @@
-/*
- * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
- * @Date: 2025-04-17 10:22:05
- * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
- * @LastEditTime: 2025-04-27 11:43:19
- * @FilePath: \ci4s\react-ui\src\pages\AutoML\types.ts
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
 import { type ParameterInputObject } from '@/components/ResourceSelect';
 import { type NodeStatus } from '@/types';
+import { type HyperParameterFile } from '@/pages/HyperParameter/types';
+
+export { type HyperParameterFile }
 
 // 操作类型
 export enum OperationType {
@@ -104,4 +99,5 @@ export type AutoMLInstanceData = {
   finish_time: string;
   nodeStatus?: NodeStatus;
   type: string;
+  file_map?: HyperParameterFile;
 };

react-ui/src/pages/HyperParameter/components/ExperimentHistory/index.tsx

@@ -123,7 +123,7 @@ function ExperimentHistory({ trialList = [] }: ExperimentHistoryProps) {
 
   // 自定义展开视图
   const expandedRowRender = (record: HyperParameterTrial) => {
-    return <TrialFileTree title="寻优结果" trial={record}></TrialFileTree>;
+    return <TrialFileTree title="寻优结果" file={record.file}></TrialFileTree>;
   };
 
   // 展开实例

react-ui/src/pages/HyperParameter/components/TrialFileTree/index.tsx

@@ -1,18 +1,21 @@
 import InfoGroup from '@/components/InfoGroup';
 import KFIcon from '@/components/KFIcon';
-import { HyperParameterFile } from '@/pages/HyperParameter/types';
+import { type HyperParameterFile } from '@/pages/HyperParameter/types';
 import { downLoadZip } from '@/utils/downloadfile';
 import { Tree, type TreeDataNode } from 'antd';
+import classNames from 'classnames';
 import styles from './index.less';
 
 const { DirectoryTree } = Tree;
 
 export type TrialFileTreeProps = {
   title: string;
-  trial: { file?: HyperParameterFile };
+  file?: HyperParameterFile;
+  classname?: string;
+  defaultExpandAll?: boolean;
 };
 
-function TrialFileTree({ trial, title }: TrialFileTreeProps) {
+function TrialFileTree({ file, title, defaultExpandAll = true, classname }: TrialFileTreeProps) {
   const filesToTreeData = (
     files: HyperParameterFile[],
     parent?: HyperParameterFile,
@@ -27,13 +30,13 @@ function TrialFileTree({ trial, title }: TrialFileTreeProps) {
       };
     });
 
-  const treeData: TreeDataNode[] = filesToTreeData(trial.file ? [trial.file] : []);
+  const treeData: TreeDataNode[] = filesToTreeData(file ? [file] : []);
   return (
-    <InfoGroup title={title} className={styles['trail-file-tree']}>
+    <InfoGroup title={title} className={classNames(styles['trail-file-tree'], classname)}>
       <DirectoryTree
         // @ts-ignore
         treeData={treeData}
-        defaultExpandAll
+        defaultExpandAll={defaultExpandAll}
         titleRender={(record: TreeDataNode & HyperParameterFile) => {
           const label = record.title + (record.isFile ? `（${record.size}）` : '');
           return (

react-ui/src/services/activeLearn/index.js

@@ -89,3 +89,13 @@ export function batchDeleteActiveLearnInsReq(data) {
     data,
   });
 }
+
+
+// 获取当前实验的指标对比地址
+export function getExpMetricsReq(data) {
+  return request(`/api/mmp/activeLearnIns/getExpMetrics`, {
+    method: 'POST',
+    data,
+  });
+}
+

react-ui/src/services/developmentEnvironment/index.ts

@@ -64,3 +64,10 @@ export function createEditorMirrorReq(data: any) {
     data,
   });
 }
+
+// 获取知识图谱的url
+export function getKnowledgeGraphUrl() {
+  return request(`/api/mmp/knowledgeGraph/getURL`, {
+    method: 'GET',
+  });
+}