Skip to content

Commit d66066b

Browse files
rainyflyxiaoyixin-cmd
rainyfly
and
xiaoyixin-cmd
authored
[Frontend] Add model convertion frontend (#1232)
* add paddle2onnx component * add comments * fix * onnx2paddle * filetype * filetype2 * filetype3 * filetype4 * filetype5 * filetype5 * filetype6 * filetype7 * filetype7 * filetype8 * filetype8 * filetype8 * filetype8 * filetype9 * filetype10 * filetype11 * filetype12 * filetype13 * filetype14 * filetype15 * filetype16 * filetype17 * filetype18 * add animation for converting * add animation for downloading * remove unneccessary file * optimize logic * add text * update --------- Co-authored-by: xiaoyixin-cmd <[email protected]>
1 parent 092c027 commit d66066b

File tree

19 files changed

+1609
-572
lines changed

19 files changed

+1609
-572
lines changed

‎frontend/packages/core/public/locales/en/common.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"error": "Error occurred",
1212
"graph": "Graphs",
1313
"dynamic_graph": "dynamic",
14-
"ToggleGraph": "X2Paddle",
14+
"x2paddle": "Model Convertion",
1515
"static_graph": "static",
1616
"high-dimensional": "High Dimensional",
1717
"profiler": "performance analysis",

‎frontend/packages/core/public/locales/en/togglegraph.json‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,26 @@
88
"warin-info4": "The model has been converted, please do not click again",
99
"warin-info5": "Please upload the model file and convert it",
1010
"warin-info6": "Model file has been converted, please do not click again",
11-
"warin-info7": "Please upload the model file"
11+
"warin-info7": "Please upload the model file",
12+
"Conversion": "Conversion",
13+
"pdmodels": "pdmodels",
14+
"pdiparams": "pdiparams",
15+
"model": "model",
16+
"opset_version": "opset_version",
17+
"deploy_backend": "deploy_backend",
18+
"lite_valid_places": "lite_valid_places",
19+
"lite_model_type": "lite_model_type",
20+
"convert_to_lite": "convert_to_lite",
21+
"onnx_model": "onnx model",
22+
"Download": "Download",
23+
"Reload": "Reload",
24+
"View": "View",
25+
"Please": "Please select the file",
26+
"isRequire": "This item is required",
27+
"isYes": "Yes",
28+
"isNo": "No",
29+
"Paddle2OnnxTitle": "Paddle2Onnx model conversion configuration",
30+
"Onnx2PaddleTitle": "Onnx2Paddle model conversion configuration",
31+
"converting": "Converting now, please wait",
32+
"downloading": "Downloading now, please wait"
1233
}

‎frontend/packages/core/public/locales/zh/common.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"error": "发生错误",
1212
"graph": "网络结构",
1313
"dynamic_graph": "动态",
14-
"ToggleGraph": "X2Paddle",
14+
"x2paddle": "模型转换",
1515
"static_graph": "静态",
1616
"high-dimensional": "数据降维",
1717
"profiler": "性能分析",

‎frontend/packages/core/public/locales/zh/togglegraph.json‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,26 @@
88
"warin-info4": "模型已转换,请勿再次点击",
99
"warin-info5": "请上传模型文件并转换",
1010
"warin-info6": "模型文件已转换，请勿再次点击",
11-
"warin-info7": "请上传模型文件"
11+
"warin-info7": "请上传模型文件",
12+
"Conversion": "转换",
13+
"pdmodels": "模型结构文件",
14+
"pdiparams": "模型参数文件",
15+
"model": "模型",
16+
"opset_version": "op集合版本",
17+
"deploy_backend": "部署后端类型",
18+
"lite_valid_places": "Lite后端类型",
19+
"lite_model_type": "Lite模型类型",
20+
"convert_to_lite": "是否转成Paddle-Lite支持格式",
21+
"onnx_model": "onnx模型",
22+
"Download": "下载",
23+
"Reload": "重新载入",
24+
"View": "视图",
25+
"Please": "请上传模型文件",
26+
"isRequire": "该项为必填项",
27+
"isYes": "是",
28+
"isNo": "否",
29+
"Paddle2OnnxTitle": "Paddle2Onnx模型转换配置",
30+
"Onnx2PaddleTitle": "Onnx2Paddle模型转换配置",
31+
"converting": "转换中，请稍等片刻",
32+
"downloading": "文件下载中，请稍等片刻"
1233
}

‎frontend/packages/core/src/components/ContentXpaddle.tsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
/**
2+
* Copyright 2020 Baidu Inc. All Rights Reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import React, {FunctionComponent} from 'react';
18+
import {WithStyled, contentHeight, contentMargin, headerHeight, position, transitionProps} from '~/utils/style';
19+
20+
import BodyLoading from '~/components/BodyLoading';
21+
import styled from 'styled-components';
22+
23+
const Section = styled.section`
24+
display: flex;
25+
font-family: PingFangSC-Regular;
26+
aside {
27+
position: static;
28+
height: auto;
29+
}
30+
`;
31+
32+
const Article = styled.article`
33+
flex: auto;
34+
min-width: 0;
35+
margin: ${contentMargin};
36+
min-height: ${contentHeight};
37+
`;
38+
39+
const Aside = styled.aside`
40+
flex: none;
41+
background-color: var(--background-color);
42+
height: ${`calc(100vh - ${headerHeight})`};
43+
${position('sticky', headerHeight, 0, null, null)}
44+
width:18.571428571428573rem;
45+
overflow-x: hidden;
46+
overflow-y: auto;
47+
${transitionProps('background-color')}
48+
`;
49+
const ProfilerAside = styled.aside`
50+
flex: none;
51+
background-color: var(--background-color);
52+
height: auto;
53+
position: static;
54+
overflow-x: hidden;
55+
overflow-y: auto;
56+
${transitionProps('background-color')}
57+
`;
58+
59+
type ContentProps = {
60+
aside?: React.ReactNode;
61+
leftAside?: React.ReactNode;
62+
loading?: boolean;
63+
isProfiler?: boolean;
64+
show?: boolean;
65+
nodeShow?: boolean;
66+
};
67+
68+
const Content: FunctionComponent<ContentProps & WithStyled> = ({
69+
children,
70+
aside,
71+
leftAside,
72+
loading,
73+
className,
74+
isProfiler,
75+
show,
76+
nodeShow
77+
}) => (
78+
<Section className={className}>
79+
{leftAside && <Aside>{leftAside}</Aside>}
80+
<Article>{children}</Article>
81+
{aside && isProfiler ? (
82+
<ProfilerAside>{aside}</ProfilerAside>
83+
) : (
84+
// `${`calc(100vh - ${headerHeight})`}`
85+
86+
<Aside
87+
style={{
88+
display: aside ? 'inline-block' : 'none',
89+
height: aside
90+
? nodeShow
91+
? 'auto'
92+
: `${`calc(100vh - 13.28571rem)`}`
93+
: show
94+
? nodeShow
95+
? 'auto'
96+
: `${`calc(100vh - 13.28571rem)`}`
97+
: '0px',
98+
position: show ? 'relative' : 'absolute',
99+
top: '0px'
100+
// height: '0px',
101+
// 此时处于分屏且不选中的情况
102+
// width: '260px',
103+
}}
104+
/* display: inline-block; */
105+
// height: calc(100vh - 13.2857rem);
106+
// position: relative;
107+
// top: 0px;
108+
// height: 0px;
109+
// width: 260px;
110+
>
111+
{aside}
112+
</Aside>
113+
)}
114+
{loading && <BodyLoading />}
115+
</Section>
116+
);
117+
118+
export default Content;

‎frontend/packages/core/src/components/GraphPage/GraphStatic.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ const Content = styled.div`
7171
7272
> iframe {
7373
${size('100%', '100%')}
74+
// ${size('50%', '100%')}
7475
border: none;
7576
}
7677

‎frontend/packages/core/src/components/GraphPage/GraphStatic2.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import ChartToolbox from '~/components/ChartToolbox';
2323
import HashLoader from 'react-spinners/HashLoader';
2424
import logo from '~/assets/images/netron.png';
2525
import netron2 from '@visualdl/netron2';
26+
import netron from '@visualdl/netron';
27+
2628
import styled from 'styled-components';
2729
import {toast} from 'react-toastify';
2830
import useTheme from '~/hooks/useTheme';
@@ -72,6 +74,7 @@ const Content = styled.div`
7274
height: calc(100% - ${toolboxHeight});
7375
7476
> iframe {
77+
// ${size('50%', '100%')}
7578
${size('100%', '100%')}
7679
border: none;
7780
}
@@ -300,9 +303,17 @@ const Graph = React.forwardRef<GraphRef, GraphProps>(
300303
tooltipPlacement="bottom"
301304
/>
302305
<Content>
306+
{/* <iframe
307+
// ref={iframe}
308+
src={PUBLIC_PATH + netron2}
309+
frameBorder={0}
310+
scrolling="no"
311+
marginWidth={0}
312+
marginHeight={0}
313+
></iframe> */}
303314
<iframe
304315
ref={iframe}
305-
src={PUBLIC_PATH + netron2}
316+
src={PUBLIC_PATH + netron}
306317
frameBorder={0}
307318
scrolling="no"
308319
marginWidth={0}

0 commit comments

Comments
 (0)