x2paddle转换前端代码 (#1153)

* finlys

* finlys2

* finlys3

Co-authored-by: chenjian <[email protected]>

Author: xiaoyixin-cmd

frontend/packages/core/package.json

@@ -44,8 +44,10 @@
         "@tippyjs/react": "4.2.5",
         "@visualdl/icons": "2.2.1",
         "@visualdl/netron": "2.2.1",
+        "@visualdl/netron2": "2.2.1",
         "@visualdl/wasm": "2.2.1",
         "antd": "^4.21.0",
+        "axios": "^1.1.3",
         "bignumber.js": "9.0.1",
         "classnames": "2.3.1",
         "d3": "7.0.1",
@@ -66,6 +68,7 @@
         "polished": "4.1.3",
         "query-string": "7.0.1",
         "react": "17.0.2",
+        "react-activation": "^0.12.1",
         "react-content-loader": "6.0.3",
         "react-dnd": "14.0.3",
         "react-dnd-html5-backend": "14.0.1",
@@ -74,9 +77,10 @@
         "react-i18next": "11.11.4",
         "react-input-range": "1.3.0",
         "react-rangeslider": "2.2.0",
-        "react-redux": "7.2.5",
+        "react-redux": "7.2.9",
         "react-router-dom": "5.3.0",
         "react-spinners": "0.11.0",
+        "react-stillness-component": "^0.9.0",
         "react-table": "7.7.0",
         "react-table-sticky": "1.1.3",
         "react-toastify": "8.0.2",

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

@@ -11,6 +11,7 @@
     "error": "Error occurred",
     "graph": "Graphs",
     "graphDynamic": "dynamic",
+    "ToggleGraph": "X2Paddle",
     "graphStatic": "static",
     "high-dimensional": "High Dimensional",
     "profiler":"performance analysis",

frontend/packages/core/public/locales/en/graph.json

@@ -53,8 +53,10 @@
     "supported-model": "Supported models: ",
     "Choose-model": "Choose a model",
     "supported-model-list": "PaddlePaddle, ONNX, Keras, Core ML, Caffe, Caffe2, Darknet, MXNet, ncnn, TensorFlow Lite",
+    "supported-model-list-xpaddle": "ONNX、Caffe、Caffe2",
     "upload-model": "Upload Model",
     "upload-tip": "Click or Drop file here to view neural network models",
+    "upload-tip2": "Click or drag the file to the page to upload the model for model conversion",
     "vertical": "Vertical",
     "zoom-in": "Zoom In",
     "zoom-out": "Zoom Out"

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

@@ -0,0 +1,12 @@
+{
+    "transformation": "transformation",
+    "download": "download",
+    "convert_before": "Please convert before viewing",
+    "warin-info": "Please package the model description file. prototxt and parameter file. caffemodel into. tar to upload",
+    "warin-info2": "The model file does not support X2Paddle conversion temporarily",
+    "warin-info3": "Please convert before viewing",
+    "warin-info4": "The model has been converted, please do not click again",
+    "warin-info5": "Please upload the model file and convert it",
+    "warin-info6": "Model file has been converted, please do not click again",
+    "warin-info7": "Please upload the model file"
+}

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

@@ -11,6 +11,7 @@
     "error": "发生错误",
     "graph": "网络结构",
     "graphDynamic": "动态",
+    "ToggleGraph": "X2Paddle",
     "graphStatic": "静态",
     "high-dimensional": "数据降维",
     "profiler": "性能分析",

frontend/packages/core/public/locales/zh/graph.json

@@ -14,6 +14,7 @@
     },
     "experimental-supported-model": "VisualDL实验性支持：",
     "experimental-supported-model-list": "TorchScript、PyTorch、Torch、 ArmNN、BigDL、Chainer、CNTK、Deeplearning4j、MediaPipe、ML.NET、MNN、OpenVINO、Scikit-learn、Tengine、TensorFlow.js、TensorFlow",
+
     "export-file": "导出文件",
     "export-png": "PNG",
     "export-svg": "SVG",
@@ -52,8 +53,10 @@
     "keep-expanded": "保持展开",
     "supported-model": "VisualDL支持：",
     "supported-model-list": "PaddlePaddle、ONNX、Keras、Core ML、Caffe、Caffe2、Darknet、MXNet、ncnn、TensorFlow Lite",
+    "supported-model-list-xpaddle": "ONNX、Caffe、Caffe2",
     "upload-model": "上传模型",
     "upload-tip": "点击或拖拽文件到页面上传模型，进行结构展示",
+    "upload-tip2": "点击或拖拽文件到页面上传模型，进行模型转换",
     "vertical": "垂直",
     "Choose-model": "选择模型",
     "zoom-in": "放大",

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

@@ -0,0 +1,12 @@
+{
+    "transformation": "转换",
+    "download": "下载",
+    "convert_before": "Please convert before viewing",
+    "warin-info": "请将模型描述文件.prototxt和参数文件.caffemodel打包成.tar上传",
+    "warin-info2": "该模型文件暂不支持X2Paddle转换",
+    "warin-info3": "请先进行转换,再查看",
+    "warin-info4": "模型已转换,请勿再次点击",
+    "warin-info5": "请上传模型文件并转换",
+    "warin-info6": "模型文件已转换，请勿再次点击",
+    "warin-info7": "请上传模型文件"
+}

frontend/packages/core/snowpack.config.js

@@ -17,7 +17,6 @@
 // cspell:words pnpify svgs entrypoints
 
 import * as env from './builder/env.js';
-
 import {fileURLToPath} from 'url';
 import fs from 'fs';
 import path from 'path';
@@ -37,7 +36,8 @@ function isWorkspace() {
 
 const iconsPath = path.dirname(resolve.sync(cwd, '@visualdl/icons'));
 const netronPath = path.dirname(resolve.sync(cwd, '@visualdl/netron'));
-const TracePath = path.dirname(resolve.sync(cwd, './public/static'));
+const netronPath2 = path.dirname(resolve.sync(cwd, '@visualdl/netron2'));
+
 const wasmPath = path.dirname(resolve.sync(cwd, '@visualdl/wasm'));
 const dest = path.resolve(cwd, './dist/__snowpack__/link/packages');
 
@@ -66,8 +66,6 @@ export default {
     plugins: [
         '@snowpack/plugin-react-refresh',
         '@snowpack/plugin-dotenv',
-        'snowpack-plugin-less',
-        '@snowpack/plugin-sass',
         [
             '@snowpack/plugin-typescript',
             {
@@ -101,8 +99,8 @@ export default {
                         destination: path.join(dest, 'netron/dist')
                     },
                     {
-                        source: [path.join(TracePath, '**/*')],
-                        destination: path.join(dest, 'trace/dist')
+                        source: [path.join(netronPath2, '**/*')],
+                        destination: path.join(dest, 'netron2/dist')
                     },
                     {
                         source: [path.join(wasmPath, '*.{js,wasm}')],
@@ -118,8 +116,9 @@ export default {
     },
     packageOptions: {
         polyfillNode: true,
-        // knownEntrypoints: ['chai', '@testing-library/react', 'fetch-mock/esm/client', 'react-is','rc-util/es/hooks/useId','rc-util/es/Portal','rc-util/es/Dom/contains','rc-util/es/Dom/css','rc-util/es/getScrollBarSize','rc-util/es/PortalWrapper','rc-select/es/hooks/useId','rc-util/es/Dom/isVisible','rc-util/es/Dom/focus','rc-util/es/Dom/focus']
-        knownEntrypoints: ['chai', '@testing-library/react', 'fetch-mock/esm/client', 'react-is', 'antd']
+        namedExports: ['gl-vec2', 'dagre'],
+        // knownEntrypoints: ['chai', '@testing-library/react', 'fetch-mock/esm/client']
+        knownEntrypoints: ['chai', '@testing-library/react']
     },
     buildOptions: {
         out: 'dist',

frontend/packages/core/src/App.tsx

@@ -141,7 +141,12 @@ const App: FunctionComponent = () => {
                         </ErrorBoundary>
                     </Router>
                 </Main>
-                <ToastContainer />
+                <ToastContainer
+                    autoClose={100000}
+                    style={{wordBreak: 'break-all'}}
+                    draggable={false}
+                    closeOnClick={false}
+                />
             </SWRConfig>
         </div>
     );

frontend/packages/core/src/components/GraphPage/GraphSidebar.tsx

@@ -45,7 +45,7 @@ const Title = styled.div`
 
 const Content = styled.div`
     padding: ${rem(20)};
-    height: calc(100% - ${rem(60)});
+    height: ${rem(600)};
     overflow: auto;
 `;
 

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

@@ -208,7 +208,9 @@ const Graph = React.forwardRef<GraphRef, GraphProps>(
             };
         }, [handler, dispatch]);
 
-        useEffect(() => (ready && dispatch('change-files', files)) || undefined, [dispatch, files, ready]);
+        useEffect(() => {
+            (ready && dispatch('change-files', files)) || undefined;
+        }, [dispatch, files, ready]);
         useEffect(
             () => (ready && dispatch('toggle-attributes', showAttributes)) || undefined,
             [dispatch, showAttributes, ready]