Merge pull request #138 from Microsoft/user/xianz/winmldb

User/xianz/winmldb

Author: kumraj

Tools/WinMLDashboard/.gitignore

@@ -41,6 +41,8 @@ public/*
 !public/WinMLRunner.exe
 !public/libsvm-3.22-cp36-cp36m-win_amd64.whl
 !public/winmltools-1.3.0-py2.py3-none-any.whl
+!public/questionmark.png
+!public/questionmark2.png
 
 npm-debug.log*
 yarn-debug.log*

Tools/WinMLDashboard/README.md

@@ -28,10 +28,18 @@ The **Edit/View** button switches from Edit mode to View-only mode and vice vers
 
 ## Converting Models
 
-The **Convert** tab (see snip below) helps convert models from several different frameworks (as listed above) to ONNX format. 
+The **Convert** tab (see snip below) helps convert models from several different frameworks (as listed above) to ONNX format by [WinMLTools](https://pypi.org/project/winmltools/). Also you can select the ONNX version to convert to and apply Quantization. 
 
 In order to do the conversion, the tool installs a separate Python environment and a set of converter tools. This helps alleviate one of the big pain points of a typical developer - installing the right Python environment and tool chain for conversion and validating the model. 
 
+WinMLTools provides quantization feature to reduce the memory footprint of the model.
+
+For **quantization**:
+|Type |Usage   |
+|-----|--------|
+|**Type1**|Do not use dequantize_linear option, the converted model can only be run in Win10 released before [Version 1809 (OS build 17763)](https://support.microsoft.com/en-us/help/4464619/windows-10-update-history)|
+|**Type2**|Use dequantize_linear option, the converted model can also be run in Win10 release after Version 1809 (OS build 17763)|
+
 <img src="./public/Converter.png" width=800/>
 
 ## Validating Models

Tools/WinMLDashboard/public/Converter.png

@@ -112,6 +112,7 @@ def onnx_converter(args):
     return onnx_model
 
 framework_converters = {
+    '': onnx_converter,
     'coreml': coreml_converter,
     'keras': keras_converter,
     'scikit-learn': scikit_learn_converter,
@@ -124,7 +125,7 @@ def onnx_converter(args):
     'h5': keras_converter,
     'keras': keras_converter,
     'mlmodel': coreml_converter,
-    'onnx': coreml_converter,
+    'onnx': onnx_converter,
 }
 
 

Tools/WinMLDashboard/public/convert.py

@@ -61,7 +61,7 @@ class ConvertView extends React.Component<IComponentProperties, IComponentState>
         super(props);
         const error = isWeb() ? "The converter can't be run in the web interface" : undefined;
         this.state = {
-            ONNXVersion: {value: '1.2', label: '1.2(V7)'},
+            ONNXVersion: {value: '1.2', label: '1.2 (opset V7)'},
             console: '', 
             currentStep: Step.Idle,
             error, 
@@ -215,13 +215,13 @@ class ConvertView extends React.Component<IComponentProperties, IComponentState>
             { value: 'TensorFlow', label: 'TensorFlow' },
           ];
         const ONNXVersionOptions = [
-            { value: '1.2', label: '1.2(V7)' },
-            { value: '1.3', label: '1.3(V8)' },
+            { value: '1.2', label: '1.2 (opset V7)' },
+            { value: '1.3', label: '1.3 (opset V8)' },
         ]
         const QuantizationOptions = [
             { value: 'none', label: 'None' },
-            { value: 'RS5', label: 'Quantize on OS 1809' },
-            { value: '19H1', label: 'Quantize on pre-release of 19H1' },
+            { value: 'RS5', label: 'Type1'},
+            { value: '19H1', label: 'Type2'},
         ]
         return (
             <div className="ModelConvert">
@@ -244,7 +244,13 @@ class ConvertView extends React.Component<IComponentProperties, IComponentState>
                         onChange={this.setONNXVersion}
                         options={ONNXVersionOptions}
                     />
-                    <label className='label-center-align'>Quantization: </label>
+                    <label className='label-center-align'>
+                        Quantization
+                        <img onClick={this.openReadMe} src={packagedFile('questionmark.png')}
+                        onMouseOver = {this.hover}
+                        onMouseOut = {this.unhover}
+                        title="WinMLTools provides quantization feature to reduce the memory footprint of the model." height="16px"/>: 
+                    </label>
                     <Select className='QuantizationOptions'
                         value={this.newOption(this.state.quantizationOption.label)}
                         onChange={this.setQuantization}
@@ -258,11 +264,22 @@ class ConvertView extends React.Component<IComponentProperties, IComponentState>
                         <TextField id='outputNames' className='outputNames' placeholder='output:0 output:1' value={this.state.outputNames}  onChanged={this.setOutputNames} />
                     </div>
                 </div>
-                <DefaultButton id='ConvertButton' text='Convert' disabled={!this.state.source || !this.state.framework} onClick={this.convert}/>
+                <DefaultButton id='ConvertButton' text='Convert' disabled={!this.state.source || (!this.state.framework && this.state.quantizationOption.value === 'none')} onClick={this.convert}/>
             </div>
         );
     }
+    
+    private hover = (event: React.MouseEvent<HTMLImageElement>) => {
+        event.currentTarget.setAttribute('src', packagedFile('questionmark2.png'))
+    }
 
+    private unhover = (event: React.MouseEvent<HTMLImageElement>) => {
+        event.currentTarget.setAttribute('src', packagedFile('questionmark.png'))
+    }
+    private openReadMe = () => {
+        const tpnUrl = 'https://github.com/Microsoft/Windows-Machine-Learning/tree/master/Tools/WinMLDashboard#converting-models';
+        require('electron').shell.openExternal(tpnUrl);
+    }
     private newOption = (framework: string):ISelectOpition => {
         return {
             label: framework,
@@ -320,9 +337,6 @@ class ConvertView extends React.Component<IComponentProperties, IComponentState>
     private convert = async () => {
         this.initializeState();
 
-        if (!this.state.framework) {
-            return;
-        }
         const convertDialogOptions = {
             message: '',
             title: 'convert result',