Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EdgeTPU] Implement EdgeTPUCfgEditorPanel #1728

Closed
wants to merge 3 commits into from
Closed

[EdgeTPU] Implement EdgeTPUCfgEditorPanel #1728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
603c189
[EdgeTPU] Create new panel for EdgeTPU config file (#1692)
hohee-hee Oct 4, 2023
0e3e4c7
[EdgeTPU] Add files for EdgeTPUCfgEditor (#1671)
hohee-hee Oct 3, 2023
1ba53af
Format files
dayo09 Nov 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
191 changes: 191 additions & 0 deletions media/EdgeTPUCfgEditor/cfgeditor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
132 changes: 132 additions & 0 deletions media/EdgeTPUCfgEditor/cfgeditor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
64 changes: 64 additions & 0 deletions media/EdgeTPUCfgEditor/displaycfg.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Loading
Loading