Merge pull request '合并dev' (#114) from dev into master
This commit is contained in:
commit
29c87e86a4
|
@ -76,7 +76,7 @@ export default [
|
|||
{
|
||||
name: '开发环境',
|
||||
path: '',
|
||||
component: './DevelopmentEnvironment/Editor',
|
||||
component: './DevelopmentEnvironment/List',
|
||||
},
|
||||
{
|
||||
name: '创建开发环境',
|
||||
|
|
|
@ -5,12 +5,21 @@ type FullScreenFrameProps = {
|
|||
url: string;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
onload?: () => void;
|
||||
onerror?: () => void;
|
||||
};
|
||||
|
||||
function FullScreenFrame({ url, className, style }: FullScreenFrameProps) {
|
||||
function FullScreenFrame({ url, className, style, onload, onerror }: FullScreenFrameProps) {
|
||||
return (
|
||||
<div className={classNames('kf-full-screen-frame', className ?? '')} style={style}>
|
||||
{url && <iframe src={url} className="kf-full-screen-frame__iframe"></iframe>}
|
||||
{url && (
|
||||
<iframe
|
||||
src={url}
|
||||
className="kf-full-screen-frame__iframe"
|
||||
onLoad={onload}
|
||||
onError={onerror}
|
||||
></iframe>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
.kf-iframe-page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
|
@ -0,0 +1,57 @@
|
|||
import FullScreenFrame from '@/components/FullScreenFrame';
|
||||
import KFSpin from '@/components/KFSpin';
|
||||
import { getLabelStudioUrl } from '@/services/developmentEnvironment';
|
||||
import { to } from '@/utils/promise';
|
||||
import classNames from 'classnames';
|
||||
import { useEffect, useState } from 'react';
|
||||
import './index.less';
|
||||
|
||||
export enum IframePageType {
|
||||
DatasetAnnotation = 'DatasetAnnotation', // 数据标注
|
||||
AppDevelopment = 'AppDevelopment', // 应用开发
|
||||
}
|
||||
|
||||
const getRequestAPI = (type: IframePageType): (() => Promise<any>) => {
|
||||
switch (type) {
|
||||
case IframePageType.DatasetAnnotation:
|
||||
return getLabelStudioUrl;
|
||||
case IframePageType.AppDevelopment:
|
||||
return () => Promise.resolve({ code: 200, data: 'http://172.20.32.181:30080/' });
|
||||
}
|
||||
};
|
||||
|
||||
type IframePageProps = {
|
||||
type: IframePageType;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
|
||||
function IframePage({ type, className, style }: IframePageProps) {
|
||||
const [iframeUrl, setIframeUrl] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
useEffect(() => {
|
||||
requestIframeUrl();
|
||||
}, []);
|
||||
const requestIframeUrl = async () => {
|
||||
setLoading(true);
|
||||
const [res] = await to(getRequestAPI(type)());
|
||||
if (res && res.data) {
|
||||
setIframeUrl(res.data);
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const hideLoading = () => {
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classNames('kf-iframe-page', className)} style={style}>
|
||||
{loading && <KFSpin />}
|
||||
<FullScreenFrame url={iframeUrl} onload={hideLoading} onerror={hideLoading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default IframePage;
|
|
@ -1,9 +1,7 @@
|
|||
import FullScreenFrame from '@/components/FullScreenFrame';
|
||||
import { useState } from 'react';
|
||||
import IframePage, { IframePageType } from '@/components/IFramePage';
|
||||
|
||||
function Application() {
|
||||
const [iframeUrl] = useState('http://172.20.32.181:30080/');
|
||||
return <FullScreenFrame url={iframeUrl}></FullScreenFrame>;
|
||||
return <IframePage type={IframePageType.AppDevelopment}></IframePage>;
|
||||
}
|
||||
|
||||
export default Application;
|
||||
|
|
|
@ -1,20 +1,7 @@
|
|||
import FullScreenFrame from '@/components/FullScreenFrame';
|
||||
import { getLabelStudioUrl } from '@/services/developmentEnvironment';
|
||||
import { to } from '@/utils/promise';
|
||||
import { useEffect, useState } from 'react';
|
||||
import IframePage, { IframePageType } from '@/components/IFramePage';
|
||||
|
||||
function DatasetAnnotation() {
|
||||
const [iframeUrl, setIframeUrl] = useState('');
|
||||
useEffect(() => {
|
||||
requestIframeUrl();
|
||||
}, []);
|
||||
const requestIframeUrl = async () => {
|
||||
const [res] = await to(getLabelStudioUrl());
|
||||
if (res && res.data) {
|
||||
setIframeUrl(res.data);
|
||||
}
|
||||
};
|
||||
return <FullScreenFrame url={iframeUrl} />;
|
||||
return <IframePage type={IframePageType.DatasetAnnotation}></IframePage>;
|
||||
}
|
||||
|
||||
export default DatasetAnnotation;
|
||||
|
|
|
@ -48,7 +48,7 @@ const EditorRadioItems: KFRadioItem[] = [
|
|||
];
|
||||
|
||||
function EditorCreate() {
|
||||
const navgite = useNavigate();
|
||||
const navigate = useNavigate();
|
||||
const [form] = Form.useForm();
|
||||
const { message } = App.useApp();
|
||||
const [resourceStandardList, filterResourceStandard] = useComputingResource();
|
||||
|
@ -68,7 +68,7 @@ function EditorCreate() {
|
|||
const [res] = await to(createEditorReq(params));
|
||||
if (res) {
|
||||
message.success('创建成功');
|
||||
navgite(-1);
|
||||
navigate(-1);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -79,7 +79,7 @@ function EditorCreate() {
|
|||
|
||||
// 取消
|
||||
const cancel = () => {
|
||||
navgite(-1);
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
@ -1,27 +1,37 @@
|
|||
// import { editorUrl, getSessionStorageItem, removeSessionStorageItem } from '@/utils/sessionStorage';
|
||||
import { getJupyterUrl } from '@/services/developmentEnvironment';
|
||||
import { to } from '@/utils/promise';
|
||||
/*
|
||||
* @Author: 赵伟
|
||||
* @Date: 2024-06-24 16:38:59
|
||||
* @Description: 开发环境
|
||||
*/
|
||||
|
||||
import {
|
||||
editorUrlKey,
|
||||
getSessionStorageItem,
|
||||
removeSessionStorageItem,
|
||||
} from '@/utils/sessionStorage';
|
||||
// import { getJupyterUrl } from '@/services/developmentEnvironment';
|
||||
// import { to } from '@/utils/promise';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
function DevEditor() {
|
||||
const [iframeUrl, setIframeUrl] = useState('');
|
||||
useEffect(() => {
|
||||
// const url = getSessionStorageItem(editorUrl) || '';
|
||||
// setIframeUrl(url);
|
||||
// return () => {
|
||||
// removeSessionStorageItem(editorUrl);
|
||||
// };
|
||||
requestJupyterUrl();
|
||||
const url = getSessionStorageItem(editorUrlKey) || '';
|
||||
setIframeUrl(url);
|
||||
return () => {
|
||||
removeSessionStorageItem(editorUrlKey);
|
||||
};
|
||||
// requestJupyterUrl();
|
||||
}, []);
|
||||
|
||||
const requestJupyterUrl = async () => {
|
||||
const [res, error] = await to(getJupyterUrl());
|
||||
if (res) {
|
||||
setIframeUrl(res.data as string);
|
||||
} else {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
// const requestJupyterUrl = async () => {
|
||||
// const [res, error] = await to(getJupyterUrl());
|
||||
// if (res) {
|
||||
// setIframeUrl(res.data as string);
|
||||
// } else {
|
||||
// console.log(error);
|
||||
// }
|
||||
// };
|
||||
|
||||
return <iframe style={{ width: '100%', height: '100%', border: 0 }} src={iframeUrl}></iframe>;
|
||||
}
|
||||
|
|
|
@ -46,7 +46,7 @@ const mirrorRadioItems: KFRadioItem[] = [
|
|||
];
|
||||
|
||||
function MirrorCreate() {
|
||||
const navgite = useNavigate();
|
||||
const navigate = useNavigate();
|
||||
const [form] = Form.useForm();
|
||||
const [nameDisabled, setNameDisabled] = useState(false);
|
||||
const { message } = App.useApp();
|
||||
|
@ -98,7 +98,7 @@ function MirrorCreate() {
|
|||
const [res] = await to(createMirrorReq(params));
|
||||
if (res) {
|
||||
message.success('创建成功');
|
||||
navgite(-1);
|
||||
navigate(-1);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -109,7 +109,7 @@ function MirrorCreate() {
|
|||
|
||||
// 取消
|
||||
const cancel = () => {
|
||||
navgite(-1);
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
// 上传前认证
|
||||
|
|
|
@ -46,7 +46,7 @@ export type FormData = {
|
|||
};
|
||||
|
||||
function ModelDeploymentCreate() {
|
||||
const navgite = useNavigate();
|
||||
const navigate = useNavigate();
|
||||
const [form] = Form.useForm();
|
||||
const [resourceStandardList, filterResourceStandard] = useComputingResource();
|
||||
const [operationType, setOperationType] = useState(ModelDeploymentOperationType.Create);
|
||||
|
@ -106,7 +106,7 @@ function ModelDeploymentCreate() {
|
|||
const [res] = await to(request(params));
|
||||
if (res) {
|
||||
message.success('操作成功');
|
||||
navgite(-1);
|
||||
navigate(-1);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -117,7 +117,7 @@ function ModelDeploymentCreate() {
|
|||
|
||||
// 取消
|
||||
const cancel = () => {
|
||||
navgite(-1);
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
const disabled = operationType !== ModelDeploymentOperationType.Create;
|
||||
|
|
|
@ -11,9 +11,9 @@ type ExperimentTableProps = {
|
|||
};
|
||||
|
||||
function ExperimentTable({ tableData = [], style }: ExperimentTableProps) {
|
||||
const navgite = useNavigate();
|
||||
const navigate = useNavigate();
|
||||
const gotoExperiment = (record: ExperimentInstance) => {
|
||||
navgite(`/pipeline/experiment/${record.workflow_id}/${record.id}`);
|
||||
navigate(`/pipeline/experiment/${record.workflow_id}/${record.id}`);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
@ -7,7 +7,7 @@ import WorkFlow from './WorkFlow';
|
|||
import styles from './index.less';
|
||||
|
||||
function QuickStart() {
|
||||
const navgite = useNavigate();
|
||||
const navigate = useNavigate();
|
||||
const [scale, setScale] = useState(1);
|
||||
const [space, setSpace] = useState(29);
|
||||
const [canvasWidth, setCanvasWidth] = useState('100%');
|
||||
|
@ -58,7 +58,7 @@ function QuickStart() {
|
|||
buttonTop={40}
|
||||
x={left}
|
||||
y={309}
|
||||
onClick={() => navgite('/datasetPreparation/datasetAnnotation')}
|
||||
onClick={() => navigate('/datasetPreparation/datasetAnnotation')}
|
||||
/>
|
||||
<WorkFlow
|
||||
content="为开发者提供定制化编辑器,开发者可根据自己需求选择配置,保存编译器中的调试环境为镜像供训练使用"
|
||||
|
@ -66,7 +66,7 @@ function QuickStart() {
|
|||
buttonTop={20}
|
||||
x={left + 192 + space}
|
||||
y={301}
|
||||
onClick={() => navgite('/developmentEnvironment')}
|
||||
onClick={() => navigate('/developmentEnvironment')}
|
||||
/>
|
||||
<WorkFlow
|
||||
content="为开发者提供定制化编辑器,开发者可根据自己需求选择配置,保存编译器中的调试环境为镜像供训练使用"
|
||||
|
@ -75,7 +75,7 @@ function QuickStart() {
|
|||
buttonTop={20}
|
||||
x={left + 2 * (192 + space)}
|
||||
y={276}
|
||||
onClick={() => navgite('/pipeline/template')}
|
||||
onClick={() => navigate('/pipeline/template')}
|
||||
/>
|
||||
<WorkFlow
|
||||
content="开发者可以在这里运行流水线模板,产生实验实例,对比实验训练过程与产生的实验训练数据"
|
||||
|
@ -83,7 +83,7 @@ function QuickStart() {
|
|||
buttonTop={40}
|
||||
x={left + 3 * (192 + space)}
|
||||
y={295}
|
||||
onClick={() => navgite('/pipeline/experiment')}
|
||||
onClick={() => navigate('/pipeline/experiment')}
|
||||
/>
|
||||
<WorkFlow
|
||||
content="支持异构硬件(CPU/GPU)的模型加载,高吞吐,低延迟;支持大规模复杂模型的一键部署,实时弹性扩缩容;提供完整的运维监控体系。"
|
||||
|
@ -92,7 +92,7 @@ function QuickStart() {
|
|||
buttonTop={20}
|
||||
x={left + 4 * (192 + space) + 60 + space}
|
||||
y={263}
|
||||
onClick={() => navgite('/modelDseployment')}
|
||||
onClick={() => navigate('/modelDeployment')}
|
||||
/>
|
||||
<div
|
||||
className={styles['quick-start__content__canvas__model']}
|
||||
|
|
Loading…
Reference in New Issue