Skip to content

[refactor]: Modify the UI of model related buttons #122

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[refactor]: Modify the UI of model related buttons #122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
72678be
fix: Modify the size of input in sidebar to have a better layout
Gxiandy Dec 7, 2024
ae258af
refactor: Move buttons to menu dropdown
Gxiandy Dec 7, 2024
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
113 changes: 46 additions & 67 deletions static/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,36 @@ host.BrowserHost = class {
this._environment.set('zoom', params.has('zoom') ? params.get('zoom') : this._environment.get('zoom'));

this._menu = new host.Dropdown(this, 'menu-button', 'menu-dropdown');
this._menu.add({
label: 'Load Model',
click: () => {
openFileDialog.value = '';
openFileDialog.click();
}
})
this._menu.add({})
this._menu.add({
label: 'Refresh',
click: () => this._view.modifier.resetGraph()
});
this._menu.add({});
this._menu.add({
label: 'Add Node...',
click:() => {
let dialog = document.getElementById('add-node-dialog');
this.show_confirm_dialog(dialog).then((is_not_cancel) => {
if (!is_not_cancel) return;
var addNodeDropDown = this.document.getElementById('add-node-dropdown');
var selected_val = addNodeDropDown.options[addNodeDropDown.selectedIndex].value
var add_op_domain = selected_val.split(':')[0]
var add_op_type = selected_val.split(':')[1]
// console.log(selected_val)
// this._view._graph.add_node(add_op_domain, add_op_type)
this._view.modifier.addNode(add_op_domain, add_op_type);
this._view._updateGraph();
})
}
})
this._menu.add({
label: 'Properties...',
accelerator: 'CmdOrCtrl+Enter',
Expand Down Expand Up @@ -191,6 +221,22 @@ host.BrowserHost = class {
accelerator: 'CmdOrCtrl+Alt+E',
click: () => this._view.export(document.title + '.svg')
});
this._menu.add({
label: 'Download as onnx',
click:() => {
let dialog = document.getElementById('download-onnx-option-dialog');
this.show_confirm_dialog(dialog).then((is_not_cancel) => {
if (!is_not_cancel) return;
const downloadWithShapeInfCheckBox = this.document.getElementById('shapeInference');
this._view.modifier.onOffShapeInf(downloadWithShapeInfCheckBox.checked);

const downloadWithCleanUp = this.document.getElementById('cleanUp');
this._view.modifier.onOffCleanUp(downloadWithCleanUp.checked);

this._view.modifier.downloadGraph(this._buildModificationInfo())
})
}
});
this.document.getElementById('menu-button').addEventListener('click', (e) => {
this._menu.toggle();
e.preventDefault();
Expand All @@ -206,53 +252,6 @@ host.BrowserHost = class {
// this._view._updateGraph();
// })

const resetButton = this.document.getElementById('reset-graph');
resetButton.addEventListener('click', () => {
// this._view._graph.resetGraph();
// this._view._updateGraph();
this._view.modifier.resetGraph();
})

const downloadWithShapeInfCheckBox = this.document.getElementById('shapeInference');
downloadWithShapeInfCheckBox.addEventListener('click', () => {
// console.log(downloadWithShapeInfCheckBox.checked);
this._view.modifier.onOffShapeInf(downloadWithShapeInfCheckBox.checked);
})
const downloadWithCleanUp = this.document.getElementById('cleanUp');
downloadWithCleanUp.addEventListener('click', () => {
// console.log(downloadWithCleanUp.checked);
this._view.modifier.onOffCleanUp(downloadWithCleanUp.checked);
})

const downloadButton = this.document.getElementById('download-graph');
downloadButton.addEventListener('click', () => {
// console.log(this._view._graph._renameMap)
// // https://healeycodes.com/talking-between-languages
fetch('/download', {
// Declare what type of data we're sending
headers: {
'Content-Type': 'application/json'
},
// Specify the method
method: 'POST',
body: this._buildModificationInfo()
}).then((response) => {
// https://devpress.csdn.net/python/62f517797e66823466189f02.html
if (response.status == '200') {
response.text().then(data => {
if (data != "NULL" && data != "NULLPATH") {
swal("Success!", "Modified model has been successfuly saved in:\n" + data, "success");
}
else if (data == "NULL") {
swal("Some error happens!", "You are kindly to check the python cmdline print ", "error");
}
//skip data == "NULLPATH" (may caused by cancellation of save operation)
})
} else {
swal("Error happens!", "Please check the log and create an issue on https://github.com/ZhangGe6/onnx-modifier", "error");
}
})
});
// const saveJsonButton = this.document.getElementById('save-json');
// saveJsonButton.addEventListener('click', () => {
// fetch('/jsondownload', {
Expand All @@ -279,19 +278,6 @@ host.BrowserHost = class {
// }
// })
// });
const addNodeButton = this.document.getElementById('add-node');
addNodeButton.addEventListener('click', () => {
// this._view._graph.resetGraph();
// this._view._updateGraph();
var addNodeDropDown = this.document.getElementById('add-node-dropdown');
var selected_val = addNodeDropDown.options[addNodeDropDown.selectedIndex].value
var add_op_domain = selected_val.split(':')[0]
var add_op_type = selected_val.split(':')[1]
// console.log(selected_val)
// this._view._graph.add_node(add_op_domain, add_op_type)
this._view.modifier.addNode(add_op_domain, add_op_type);
this._view._updateGraph();
})

this.document.getElementById('version').innerText = this.version;

Expand Down Expand Up @@ -355,13 +341,6 @@ host.BrowserHost = class {
}
});
}
const openModelButton = this.document.getElementById('load-model');
if (openModelButton && openFileDialog) {
openModelButton.addEventListener('click', () => {
openFileDialog.value = '';
openFileDialog.click();
});
}
const githubButton = this.document.getElementById('github-button');
const githubLink = this.document.getElementById('logo-github');
if (githubButton && githubLink) {
Expand Down
28 changes: 28 additions & 0 deletions static/modifier.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -499,6 +499,34 @@ modifier.Modifier = class {
this.applyAndUpdateView();
}


downloadGraph( body_str) {
fetch('/download', {
// Declare what type of data we're sending
headers: {
'Content-Type': 'application/json'
},
// Specify the method
method: 'POST',
body: body_str
}).then((response) => {
// https://devpress.csdn.net/python/62f517797e66823466189f02.html
if (response.status == '200') {
response.text().then(data => {
if (data != "NULL" && data != "NULLPATH") {
swal("Success!", "Modified model has been successfuly saved in:\n" + data, "success");
}
else if (data == "NULL") {
swal("Some error happens!", "You are kindly to check the python cmdline print ", "error");
}
//skip data == "NULLPATH" (may caused by cancellation of save operation)
})
} else {
swal("Error happens!", "Please check the log and create an issue on https://github.com/ZhangGe6/onnx-modifier", "error");
}
})
}

resetGraph() {
// reset node states
this.name2NodeStates = new Map();
Expand Down
4 changes: 2 additions & 2 deletions static/view-sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -723,7 +723,7 @@ class NodeAttributeView {

var attr_input = document.createElement("INPUT");
attr_input.setAttribute("type", "text");
attr_input.setAttribute("size", "42");
attr_input.setAttribute("size", "38");
attr_input.setAttribute("value", content ? content : 'undefined');
attr_input.addEventListener('input', (e) => {
this._host._view.modifier.changeNodeAttribute(this._modelNodeName, this._attributeName, e.target.value, type);
Expand Down Expand Up @@ -923,7 +923,7 @@ sidebar.ArgumentView = class {

var arg_input = document.createElement("INPUT");
arg_input.setAttribute("type", "text");
arg_input.setAttribute("size", "42");
arg_input.setAttribute("size", "38");
arg_input.setAttribute("value", name);
arg_input.addEventListener('input', (e) => {
this._host._view.modifier.changeNodeInputOutput(this._modelNodeName, this._parameterName, this._param_type, this._param_index, this._arg_index, e.target.value);
Expand Down
45 changes: 32 additions & 13 deletions templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,6 @@
.graph-op-button-addNode:active { background: #e7e7e7; }
.graph-op-add-node-dropdown {
font-size: 15px;
position:absolute;
left: 2px;
top: 135px;
}
Expand Down Expand Up @@ -152,7 +151,7 @@
}

.message-box .message {
margin: 24px 0;
margin: 10px 0;
}

.message-box .dialog-content {
Expand Down Expand Up @@ -432,17 +431,6 @@
</svg>
</button>

<button id="reset-graph" class="graph-op-button-reset">Reset</button>
<button id="download-graph" class="graph-op-button-download">Download</button>
<input type="checkbox" id="shapeInference" class="download-checkbox-shapeInference"/>
<input type="text" value="shape inference" class="download-anno-shapeInference" readonly/> </td>
<input type="checkbox" id="cleanUp" class="download-checkbox-cleanUp"/>
<input type="text" value="clean up" class="download-anno-cleanUp" readonly/> </td>
<button id="add-node" class="graph-op-button-addNode">Add node</button>
<select id="add-node-dropdown" class="graph-op-add-node-dropdown">
</select>
<button id="load-model" class="graph-button-load">LoadModel</button>

<button id="back-button" class="toolbar-back-button" title="Back">
&#x276E;
</button>
Expand Down Expand Up @@ -497,6 +485,37 @@
<div style="font-weight: bold; color: rgba(0, 0, 0, 0.01); user-select: none;">.</div>
</div>

<dialog id="download-onnx-option-dialog" class="dialog message-box">
<p class="title"> Download Options </p>
<div class="dialog-content">
<div class = "message"> Options</div>
<label>
<input type="checkbox" id="shapeInference"/> shapeInference
</label>
<br>
<label>
<input type="checkbox" id="cleanUp"/> cleanUp
</label>
</div>
<div class="footer">
<button data-value="">Cancel</button>
<button id="confirm-enable" data-value="Confirm">Confirm</button>
</div>
</dialog>

<dialog id="add-node-dialog" class="dialog message-box">
<p class="title"> Add Node </p>
<div class="dialog-content">
<div class = "message"> Op Type </div>
<select id="add-node-dropdown" class="graph-op-add-node-dropdown">
</select>
</div>
<div class="footer">
<button data-value=""> Cancel </button>
<button id="add-node-confirm-enable" data-value="Confirm">Confirm</button>
</div>
</dialog>

<dialog id="addinput-dialog" class="dialog message-box">
<p class="title"> Add New Input </p>
<div class="dialog-content">
Expand Down