[EdgeTPU] Add files for EdgeTPUCfgEditor (#1738)

* [EdgeTPU] Add files for EdgeTPUCfgEditor For modularization of EdgeTPU, we decided to add a new file name extension for config file for edgetpu compiler. Its name is 'edgetpucfg'. 'edgetpucfg' has different steps and options than the original cfg file. Therefore, this commit adds a new directory and files for .edgetpucfg in /media/EdgetpuCfgEditor. ONE-vscode-DCO-1.0-Signed-off-by: hohee-hee <[email protected]> Co-authored-by: Bumsoo Ko <[email protected]> Co-authored-by: 김현욱 <[email protected]> * Format ONE-vscode-DCO-1.0-Signed-off-by: Dayoung Lee <[email protected]> --------- Co-authored-by: Sohee Kwon <[email protected]> Co-authored-by: Bumsoo Ko <[email protected]> Co-authored-by: 김현욱 <[email protected]>
Samsung · Nov 3, 2023 · 8998348 · 8998348
1 parent e82d0d8
commit 8998348
Show file tree

Hide file tree

Showing 7 changed files with 793 additions and 0 deletions.
diff --git a/media/EdgeTPUCfgEditor/cfgeditor.css b/media/EdgeTPUCfgEditor/cfgeditor.css
@@ -0,0 +1,191 @@
+/*
+ * Copyright (c) 2023 Samsung Electronics Co., Ltd. All Rights Reserved
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+label {
+  white-space: pre-wrap;
+}
+
+.maintitle {
+  width: 100%;
+  display: flex;
+}
+
+.maintitle span {
+  float: left;
+  display: block;
+  padding-left: 5px;
+}
+
+.statusbar {
+  width: 100%;
+  display: flex;
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
+
+.statusbar .detail {
+  box-sizing: border-box;
+  float: left;
+  background: #007acc;
+  color: #fff;
+  position: relative;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: 70px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  display: block;
+}
+
+.statusbar .detail:after {
+  box-sizing: border-box;
+  content: '';
+  border-left: 16px solid #007acc;
+  border-top: 16px solid transparent;
+  border-bottom: 16px solid transparent;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  z-index: 1;
+}
+
+.statusbar .detail .expanded {
+  display: inline-block;
+}
+
+.statusbar .steps {
+  display: inline-flex;
+}
+
+.statusbar .steps .step {
+  box-sizing: border-box;
+  float: left;
+  background: #007acc;
+  color: #fff;
+  position: relative;
+  padding-left: 10px;
+  width: 110px;
+  height: 32px;
+  line-height: 32px;
+  display: flex;
+  justify-content: center;
+}
+
+.statusbar .steps .step span {
+  padding-left: 5px;
+}
+
+.statusbar .steps .step:before {
+  box-sizing: border-box;
+  content: '';
+  border-left: 16px solid #fff;
+  border-top: 16px solid transparent;
+  border-bottom: 16px solid transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.statusbar .steps .step:after {
+  box-sizing: border-box;
+  content: '';
+  border-left: 16px solid #007acc;
+  border-top: 16px solid transparent;
+  border-bottom: 16px solid transparent;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  z-index: 1;
+}
+
+.statusbar .steps .step.current {
+  box-sizing: border-box;
+  float: left;
+  background: #4298da;
+  color: #fff;
+  position: relative;
+  padding-left: 10px;
+  width: 110px;
+  height: 32px;
+  line-height: 32px;
+  display: flex;
+  justify-content: center;
+}
+
+.statusbar .steps .step.current:after {
+  box-sizing: border-box;
+  content: '';
+  border-left: 16px solid #4298da;
+  border-top: 16px solid transparent;
+  border-bottom: 16px solid transparent;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  z-index: 1;
+}
+
+.statusbar .steps .step .title {
+  cursor: pointer;
+}
+
+.optionPanel {
+  display: flex;
+}
+
+.optionPanel .options {
+  display: none;
+}
+
+#optionImport .basic,
+#optionImport .advanced,
+#optionQuantize .basic,
+#optionQuantize .advanced {
+  display: none;
+}
+
+.optionPanel .options .prerequisite .title,
+.optionPanel .options .basic .title,
+.optionPanel .options .advanced .title {
+  font-weight: bold;
+  font-size: 15px;
+  margin-bottom: 15px;
+  margin-top: 15px;
+}
+
+.optionPanel .options .prerequisite .option,
+.optionPanel .options .basic .option,
+.optionPanel .options .advanced .option {
+  margin-bottom: 5px;
+}
+
+.codicon.codicon-question .help {
+  visibility: hidden;
+  width: auto;
+  background-color: var(--vscode-editorSuggestWidget-background);
+  color: var(--vscode-editorSuggestWidget-foreground);
+  border: 2px solid var(--vscode-editorSuggestWidget-border);
+  font-size: small;
+  text-align: left;
+  position: absolute;
+  z-index: 1;
+  margin-left: 10px;
+  padding: 6px 6px 10px 8px;
+}
+
+.codicon.codicon-question:hover .help {
+  visibility: visible;
+}
diff --git a/media/EdgeTPUCfgEditor/cfgeditor.html b/media/EdgeTPUCfgEditor/cfgeditor.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- 
+Copyright (c) 2023 Samsung Electronics Co., Ltd. All Rights Reserved
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<head>
+    <meta charset="utf-8">
+    <meta
+        http-equiv="Content-Security-Policy"
+        content="img-src vscode;
+                style-src 'unsafe-inline' ${webview.cspSource};
+                script-src 'nonce-${nonce}';">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script nonce="${nonce}" type="module" src="${toolkitUri}"></script>
+    <script nonce="${nonce}" type="module" src="${jsUri}"></script>
+    <link rel="stylesheet" href="${cssUri}">
+    <link rel="stylesheet" href="${codiconUri}">
+    <title>cfg editor</title>
+</head>
+<body>
+    <div class="maintitle">
+        <span class="codicon codicon-megaphone"></span>
+        <span>Click checkbox to enable each step.</span>
+    </div>
+    <div class="statusbarPanel">
+        <div class="statusbar" id="statusEdgeTPU">
+            <div class="detail">
+                <div class="expanded" id="expandedDetail">
+                    <span>Steps</span>
+                </div>
+            </div>
+            <div class="steps" id="statusbarSteps">
+                <div class="step" id="stepbarEdgeTPUCompile">
+                    <vscode-checkbox id="checkboxEdgeTPUCompile"></vscode-checkbox>
+                    <span id="stepEdgeTPUCompile" class="title">Compile</span>
+                </div>
+                <div class="step" id="stepbarEdgeTPUProfile">
+                    <vscode-checkbox id="checkboxEdgeTPUProfile"></vscode-checkbox>
+                    <span id="stepEdgeTPUProfile" class="title">Profile</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div>
+        <vscode-divider></vscode-divider>
+    </div>
+    <div class="optionPanel">
+        <div class="options" id="optionSummary">
+            <!-- TODO Display summarization for all steps -->
+        </div>
+        <div class="options" id="optionEdgeTPUCompile">
+            <div class="basic">
+                <div class="title">
+                    Basic Options
+                </div>
+                <div class="option">
+                    <vscode-text-field id="EdgeTPUInputPath" startIcon="true" size="50" placeholder="">
+                        Input Path
+                        <span id="EdgeTPUInputPathSearch" slot="end" class="codicon codicon-search" style="cursor: pointer"></span>
+                    </vscode-text-field>
+                </div>
+                <div class="option">
+                    <vscode-text-field id="EdgeTPUOutputPath" startIcon="true" size="50" placeholder="" disabled="true">
+                        Output Path
+                        <span id="EdgeTPUOutputPathSearch" slot="end" class="codicon codicon-search" style="cursor: pointer"></span>
+                    </vscode-text-field>
+                </div>
+            </div>
+            <div class="advanced">
+                <div class="title">
+                    Advanced Options
+                </div>
+                <div class="option">
+                    <vscode-text-field id="EdgeTPUIntermediateTensorsInputArrays" startIcon="true" size="50" placeholder="comma separated input names">
+                        Intermediate_tensors
+                    </vscode-text-field> 
+                    <span class="codicon codicon-question" style="cursor: pointer">
+                        <span class="help">
+                            This option cannot be with 'search delegate'
+                        </span>
+                    </span>
+                </div>
+                <div class="option">
+                    <vscode-checkbox id="EdgeTPUShowOperations">
+                        Show Operations
+                    </vscode-checkbox>  
+                    <span class="codicon codicon-question" style="cursor: pointer">
+                        <span class="help">
+                            Print the log showing operations that mapped to the Edge TPU.
+                        </span>
+                    </span>
+                </div>
+                <div class="option">
+                    <vscode-checkbox id="EdgeTPUSearchDelegate">
+                        Search Delegate
+                    </vscode-checkbox>
+                    <span class="codicon codicon-question" style="cursor: pointer">
+                        <span class="help">
+                            Enable repeated search for a new compilation stopping point earlier in the graph, to avoid rare compiler failures when it encounters an unsupported operation.
+                        </span>
+                    </span>
+                </div>
+                <div class="option" id="EdgeTPUDelegateSearchStepDiv">
+                    <vscode-text-field type="number" id="EdgeTPUDelegateSearchStep" value="1">
+                        Delegate Search Step
+                    </vscode-text-field>
+                    <span class="codicon codicon-question" style="cursor: pointer">
+                        <span class="help">
+                            Specify a step size (the number of ops to move backward) <br />
+                            Default size is 1 and the mindest size is also 1.
+                        </span>
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class="options" id="optionEdgeTPUProfile">
+        </div>
+    </div>
+</body>
+</html>
diff --git a/media/EdgeTPUCfgEditor/displaycfg.js b/media/EdgeTPUCfgEditor/displaycfg.js
@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2023 Samsung Electronics Co., Ltd. All Rights Reserved
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function displayCfgToEditor(cfg) {
+  const edgeTPUCompiler = cfg["edgetpu-compiler"];
+  document.getElementById("checkboxEdgeTPUCompile").checked = cfgBoolean(
+    edgeTPUCompiler["edgetpu-compile"]
+  );
+  document.getElementById("checkboxEdgeTPUProfile").checked = cfgBoolean(
+    edgeTPUCompiler["edgetpu-profile"]
+  );
+
+  const edgeTPUCompile = cfg["edgetpu-compile"];
+  document.getElementById("EdgeTPUInputPath").value = cfgString(
+    edgeTPUCompile?.["input_path"]
+  );
+  document.getElementById("EdgeTPUOutputPath").value = cfgString(
+    edgeTPUCompile?.["output_path"]
+  );
+  document.getElementById("EdgeTPUIntermediateTensorsInputArrays").value =
+    cfgString(edgeTPUCompile?.["intermediate_tensors"]);
+  document.getElementById("EdgeTPUShowOperations").checked = cfgBoolean(
+    edgeTPUCompile?.["show_operations"]
+  );
+  document.getElementById("EdgeTPUSearchDelegate").checked = cfgBoolean(
+    edgeTPUCompile?.["search_delegate"]
+  );
+  document.getElementById("EdgeTPUDelegateSearchStep").value = cfgString(
+    edgeTPUCompile?.["delegate_search_step"],
+    "1"
+  );
+}
+
+function cfgString(str, defaultStr = "") {
+  if (str === null || str === undefined) {
+    return defaultStr;
+  }
+  return str.trim();
+}
+
+function cfgBoolean(str) {
+  if (str === null || str === undefined) {
+    return false;
+  }
+
+  if (str === "True") {
+    return true;
+  }
+
+  return false;
+}