update code
parent
7c659bc337
commit
dd942911a4
|
|
@ -0,0 +1 @@
|
|||
function init(){var s=location.search;var url="";var onnxModelName="";if(s.indexOf("=")>=0){url=s.substring(s.indexOf("=")+1);if(url.toLocaleLowerCase().indexOf(".onnx")>=0){onnxModelName=url.substring(url.lastIndexOf("/")+1)}else{console.error("使用方法:onnx.html?url=[onnx路径]");return}}else{console.error("使用方法:onnx.html?url=[onnx路径]");return}document.body.title=onnxModelName;var http=new XMLHttpRequest;http.responseType="arraybuffer";http.open("GET",url);http.onload=function(){if(http.status==200){var reader=proto.protobuf.Reader.create(new Uint8Array(http.response));var onnxProtoModel=window.proto.onnx.ModelProto.decode(reader);let{locations,graphs}=window.getExternalLocations(onnxProtoModel);let model=new window.onnx.Model(onnxProtoModel,graphs,new Map);let host=window;let view=new window.View(host);view.start().then(data=>{view.open(model,onnxModelName)}).catch(err=>{console.log(err)});window.mainView=view}};http.send()}function exportImg(file,blob){const element=this.document.createElement("a");element.download=file;element.href=URL.createObjectURL(blob);this.document.body.appendChild(element);element.click();this.document.body.removeChild(element)}function toggleMenu(){let el=document.getElementById("menu");if(el.style.display=="none"){el.style.display="block";updateState()}else{el.style.display="none"}}function doToggle(att){mainView.toggle(att);updateState()}function updateState(){var op=mainView.options;document.getElementById("opAtt").innerText=op.attributes?"Hide Attributes":"Show Attributes";document.getElementById("opWeight").innerText=op.weights?"Hide Weights":"Show Weights";document.getElementById("opName").innerText=op.names?"Hide Names":"Show Names";document.getElementById("opDir").innerText=op.direction=="vertical"?"Show Horizontal":"Show Vertical";document.getElementById("opMouse").innerText=op.mousewheel=="scroll"?"Mouse Wheel: Zoom":"Mouse Wheel: Scroll"}init();
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<script type="text/javascript" src="./onnx_view/dagre.js"></script>
|
||||
<script type="text/javascript" src="./onnx_view/grapher.js"></script>
|
||||
<script type="text/javascript" src="./onnx_view/onnx_model.js"></script>
|
||||
<script type="text/javascript" src="./onnx_view/onnx_view.js"></script>
|
||||
<script type="text/javascript" src="./onnx_view/onnx_view.js"></script>
|
||||
|
||||
<style>
|
||||
html { touch-action: none; overflow: hidden; width: 100%; height: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; }
|
||||
|
|
@ -284,51 +284,7 @@
|
|||
</div>
|
||||
<div id="logo" class="center logo">
|
||||
<a href="javascript:;" target="blank_">
|
||||
<svg class="center logo-icon" viewbox="0 0 1024 1024">
|
||||
<circle class="logo-stroke" cx="512" cy="512" r="431" fill="none" stroke-width="32"></circle>
|
||||
<circle class="logo-border" cx="512" cy="512" r="450" fill="none" stroke-width="6"></circle>
|
||||
<circle class="logo-border" cx="512" cy="512" r="412" fill="none" stroke-width="6"></circle>
|
||||
<line class="logo-stroke" x1="296" y1="392" x2="540" y2="280" stroke-width="12"></line>
|
||||
<line class="logo-stroke" x1="296" y1="632" x2="540" y2="280" stroke-width="12"></line>
|
||||
<line class="logo-stroke" x1="296" y1="392" x2="540" y2="435" stroke-width="12"></line>
|
||||
<line class="logo-stroke" x1="296" y1="632" x2="540" y2="435" stroke-width="12"></line>
|
||||
<line class="logo-stroke" x1="296" y1="392" x2="540" y2="590" stroke-width="12"></line>
|
||||
<line class="logo-stroke" x1="296" y1="632" x2="540" y2="590" stroke-width="12"></line>
|
||||
<line class="logo-stroke" x1="296" y1="392" x2="540" y2="744" stroke-width="12"></line>
|
||||
<line class="logo-stroke" x1="296" y1="632" x2="540" y2="744" stroke-width="12"></line>
|
||||
<line class="logo-stroke" x1="540" y1="280" x2="785" y2="512" stroke-width="12"></line>
|
||||
<line class="logo-stroke" x1="540" y1="590" x2="785" y2="512" stroke-width="12"></line>
|
||||
<line class="logo-stroke" x1="540" y1="435" x2="785" y2="512" stroke-width="12"></line>
|
||||
<line class="logo-stroke" x1="540" y1="744" x2="785" y2="512" stroke-width="12"></line>
|
||||
<g transform="translate(296, 392)">
|
||||
<circle class="logo-fill" cx="0" cy="0" r="51"></circle>
|
||||
<circle class="logo-border" cx="0" cy="0" r="51" fill="none" stroke-width="6"></circle>
|
||||
</g>
|
||||
<g transform="translate(296, 632)">
|
||||
<circle class="logo-fill" cx="0" cy="0" r="51"></circle>
|
||||
<circle class="logo-border" cx="0" cy="0" r="51" fill="none" stroke-width="6"></circle>
|
||||
</g>
|
||||
<g transform="translate(540, 280)">
|
||||
<circle class="logo-fill" cx="0" cy="0" r="51"></circle>
|
||||
<circle class="logo-border" cx="0" cy="0" r="51" fill="none" stroke-width="6"></circle>
|
||||
</g>
|
||||
<g transform="translate(540, 435)">
|
||||
<circle class="logo-fill" cx="0" cy="0" r="51"></circle>
|
||||
<circle class="logo-border" cx="0" cy="0" r="51" fill="none" stroke-width="6"></circle>
|
||||
</g>
|
||||
<g transform="translate(540, 590)">
|
||||
<circle class="logo-fill" cx="0" cy="0" r="51"></circle>
|
||||
<circle class="logo-border" cx="0" cy="0" r="51" fill="none" stroke-width="6"></circle>
|
||||
</g>
|
||||
<g transform="translate(540, 744)">
|
||||
<circle class="logo-fill" cx="0" cy="0" r="51"></circle>
|
||||
<circle class="logo-border" cx="0" cy="0" r="51" fill="none" stroke-width="6"></circle>
|
||||
</g>
|
||||
<g transform="translate(785, 512)">
|
||||
<circle class="logo-fill" cx="0" cy="0" r="51"></circle>
|
||||
<circle class="logo-border" cx="0" cy="0" r="51" fill="none" stroke-width="6"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<svg class="center logo-icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2806"><path d="M507.49297778 501.08444446v494.93333332L936.11662222 748.55111112l-0.02275556-494.93333334z" fill="#C3D2FB" p-id="2807"></path><path d="M78.86933333 253.61777778l428.62364445 247.46666667v494.93333333L78.86933333 748.55111112z" fill="#3D4265" p-id="2808"></path><path d="M507.49297778 501.08444446L936.11662222 253.61777778 507.49297778 6.15111111 78.86933333 253.61777778z" fill="#386BF3" p-id="2809"></path></svg>
|
||||
<svg id="logo-spinner" class="center logo-spinner" viewbox="0 0 1024 1024">
|
||||
<g transform="translate(512, 512)" style="opacity: 1">
|
||||
<path class="logo-spinner-stroke" d="M-431,0 A-431,-431 0 0,1 0,-431" stroke-width="24" fill="None">
|
||||
|
|
@ -339,7 +295,6 @@
|
|||
<div class="center progress">
|
||||
<div id="progress-bar" class="progress-bar"></div>
|
||||
</div>
|
||||
<!-- Preload fonts to workaround Chrome SVG layout issue -->
|
||||
<div style="font-weight: normal; color: rgba(0, 0, 0, 0.01); user-select: none;">.</div>
|
||||
<div style="font-weight: bold; color: rgba(0, 0, 0, 0.01); user-select: none;">.</div>
|
||||
<div style="font-weight: bold; color: rgba(0, 0, 0, 0.01); user-select: none;">.</div>
|
||||
|
|
@ -425,79 +380,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="menu-button" class="menu-button" onclick="toggleMenu()">≡</div>
|
||||
<script>
|
||||
function init(){
|
||||
var s=location.search;
|
||||
var url="";
|
||||
var onnxModelName="";
|
||||
if(s.indexOf("=")>=0){
|
||||
url=s.substring(s.indexOf("=")+1);
|
||||
if(url.toLocaleLowerCase().indexOf(".onnx")>=0){
|
||||
onnxModelName=url.substring(url.lastIndexOf("/")+1)
|
||||
}else{
|
||||
console.error("使用方法:onnx.html?url=[onnx路径]")
|
||||
return;
|
||||
}
|
||||
}else{
|
||||
console.error("使用方法:onnx.html?url=[onnx路径]")
|
||||
return;
|
||||
}
|
||||
document.body.title=onnxModelName;
|
||||
//url='./siamRPN_192.onnx'
|
||||
var http=new XMLHttpRequest();
|
||||
http.responseType="arraybuffer"
|
||||
http.open('GET',url);
|
||||
http.onload=function(){
|
||||
if(http.status==200){
|
||||
var reader=proto.protobuf.Reader.create(new Uint8Array(http.response));
|
||||
var onnxProtoModel = window.proto.onnx.ModelProto.decode(reader);
|
||||
let { locations, graphs } = window.getExternalLocations(onnxProtoModel);
|
||||
let model = new window.onnx.Model(onnxProtoModel, graphs, new Map());
|
||||
|
||||
let host = window;
|
||||
let view = new window.View(host);
|
||||
view.start().then((data) => {
|
||||
view.open(model, onnxModelName);
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
})
|
||||
window.mainView=view;
|
||||
}
|
||||
};
|
||||
http.send();
|
||||
}
|
||||
init();
|
||||
</script>
|
||||
<script>
|
||||
function exportImg(file, blob) {
|
||||
const element = this.document.createElement('a');
|
||||
element.download = file;
|
||||
element.href = URL.createObjectURL(blob);
|
||||
this.document.body.appendChild(element);
|
||||
element.click();
|
||||
this.document.body.removeChild(element);
|
||||
}
|
||||
function toggleMenu(){
|
||||
let el=document.getElementById("menu");
|
||||
if(el.style.display=="none"){
|
||||
el.style.display="block"
|
||||
updateState();
|
||||
}else{
|
||||
el.style.display="none"
|
||||
}
|
||||
}
|
||||
function doToggle(att){
|
||||
mainView.toggle(att)
|
||||
updateState();
|
||||
}
|
||||
function updateState(){
|
||||
var op=mainView.options;
|
||||
document.getElementById("opAtt").innerText=op.attributes ? 'Hide Attributes' : 'Show Attributes';
|
||||
document.getElementById("opWeight").innerText=op.weights ? 'Hide Weights' : 'Show Weights';
|
||||
document.getElementById("opName").innerText=op.names ? 'Hide Names' : 'Show Names';
|
||||
document.getElementById("opDir").innerText=op.direction == 'vertical' ? 'Show Horizontal' : 'Show Vertical';
|
||||
document.getElementById("opMouse").innerText=op.mousewheel == 'scroll' ? 'Mouse Wheel: Zoom' : 'Mouse Wheel: Scroll';
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,134 +0,0 @@
|
|||
|
||||
var host = host || {};
|
||||
|
||||
host.BrowserHost = class {
|
||||
|
||||
constructor(vscode) {
|
||||
this._vscode = vscode;
|
||||
this._window = window;
|
||||
this._document = window.document;
|
||||
|
||||
this._environment = {
|
||||
name: this._document.title,
|
||||
menu: true
|
||||
};
|
||||
}
|
||||
|
||||
get window() {
|
||||
return this._window;
|
||||
}
|
||||
|
||||
get document() {
|
||||
return this._document;
|
||||
}
|
||||
|
||||
async view(view) {
|
||||
this._view = view;
|
||||
}
|
||||
|
||||
async start() {
|
||||
this.document.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
this.document.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
this.document.body.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
this._view.show('welcome');
|
||||
}
|
||||
|
||||
environment(name) {
|
||||
return this._environment[name];
|
||||
}
|
||||
|
||||
error(message, detail) {
|
||||
this._vscode.postMessage({ type: 'error', message: detail });
|
||||
}
|
||||
|
||||
/**
|
||||
* save numpy tensor
|
||||
* @param {*} name
|
||||
* @param {*} extension
|
||||
* @param {*} defaultPath
|
||||
* @param {*} callback
|
||||
*/
|
||||
save(name, extension, defaultPath, callback) {
|
||||
callback(defaultPath + '.' + extension);
|
||||
}
|
||||
|
||||
/**
|
||||
* export png and svg images
|
||||
* @param {string} file the file name
|
||||
* @param {Blob} blob data blob
|
||||
*/
|
||||
export(file, blob) {
|
||||
// const element = this.document.createElement('a');
|
||||
// element.download = file;
|
||||
// element.href = URL.createObjectURL(blob);
|
||||
// this.document.body.appendChild(element);
|
||||
// element.click();
|
||||
// this.document.body.removeChild(element);
|
||||
|
||||
blob.arrayBuffer().then((arrayBuf)=>{
|
||||
let data = new Uint8Array(arrayBuf);
|
||||
this._vscode.postMessage({ type: 'export', fileName: file, data: data });
|
||||
})
|
||||
}
|
||||
|
||||
exception(error, fatal) {
|
||||
//send telemetry， do nothing
|
||||
}
|
||||
|
||||
event(name, params) {
|
||||
//do nothing
|
||||
}
|
||||
|
||||
_element(id) {
|
||||
return this.document.getElementById(id);
|
||||
}
|
||||
};
|
||||
|
||||
if (!('scrollBehavior' in window.document.documentElement.style)) {
|
||||
const __scrollTo__ = Element.prototype.scrollTo;
|
||||
Element.prototype.scrollTo = function(options) {
|
||||
if (options !== undefined) {
|
||||
if (options === null || typeof options !== 'object' || options.behavior === undefined || arguments[0].behavior === 'auto' || options.behavior === 'instant') {
|
||||
if (__scrollTo__) {
|
||||
__scrollTo__.apply(this, arguments);
|
||||
}
|
||||
} else {
|
||||
const now = () => window.performance && window.performance.now ? window.performance.now() : Date.now();
|
||||
const ease = (k) => 0.5 * (1 - Math.cos(Math.PI * k));
|
||||
const step = (context) => {
|
||||
const value = ease(Math.min((now() - context.startTime) / 468, 1));
|
||||
const x = context.startX + (context.x - context.startX) * value;
|
||||
const y = context.startY + (context.y - context.startY) * value;
|
||||
context.element.scrollLeft = x;
|
||||
context.element.scrollTop = y;
|
||||
if (x !== context.x || y !== context.y) {
|
||||
window.requestAnimationFrame(step.bind(window, context));
|
||||
}
|
||||
};
|
||||
const context = {
|
||||
element: this,
|
||||
x: typeof options.left === 'undefined' ? this.scrollLeft : ~~options.left,
|
||||
y: typeof options.top === 'undefined' ? this.scrollTop : ~~options.top,
|
||||
startX: this.scrollLeft,
|
||||
startY: this.scrollTop,
|
||||
startTime: now()
|
||||
};
|
||||
step(context);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (typeof window !== 'undefined' && typeof window === 'object') {
|
||||
window.host = host;
|
||||
}
|
||||
|
||||
if (typeof module !== 'undefined' && typeof module.exports === 'object') {
|
||||
module.exports = host;
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
|
||||
// This script is run within the webview itself
|
||||
(function () {
|
||||
const vscode = acquireVsCodeApi();
|
||||
|
||||
//the onnx proto model
|
||||
let onnxProtoModel = null;
|
||||
//the onnx proto graphs
|
||||
let onnxProtoGraphs = null;
|
||||
//the onnx model name
|
||||
let onnxModelName = '';
|
||||
//the tensor external data map. key: location, value: Uint8Array
|
||||
let externalTensorMap = new Map();
|
||||
//the tensor external locations
|
||||
let externalTensorLocations = [];
|
||||
|
||||
// Handle messages from the extension
|
||||
window.addEventListener('message', e => {
|
||||
const { type, body } = e.data;
|
||||
switch (type) {
|
||||
case 'init':
|
||||
{
|
||||
//the onnx file content, Uint8Array
|
||||
let onnxValue = body.modelData;
|
||||
//the onnx file name
|
||||
onnxModelName = body.modelName;
|
||||
|
||||
onnxProtoModel = window.proto.onnx.ModelProto.decode(onnxValue);
|
||||
let { locations, graphs } = window.getExternalLocations(onnxProtoModel);
|
||||
|
||||
//refer to https://github.com/onnx/onnx/blob/main/docs/ExternalData.md
|
||||
if (locations.length > 0) {
|
||||
onnxProtoGraphs = graphs;
|
||||
externalTensorMap.clear();
|
||||
externalTensorLocations = locations;
|
||||
//load tensor external data
|
||||
vscode.postMessage({ type: 'external_tensor', external_locations: locations });
|
||||
} else {
|
||||
let model = new window.onnx.Model(onnxProtoModel, graphs, new Map());
|
||||
|
||||
let host = new window.host.BrowserHost(vscode);
|
||||
let view = new window.View(host);
|
||||
view.start().then((data) => {
|
||||
view.open(model, onnxModelName);
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case 'external_tensor': {
|
||||
//the external tensor data, Uint8Array
|
||||
let tensorData = body.tensorData;
|
||||
let loc = body.location;
|
||||
|
||||
externalTensorMap.set(loc, tensorData);
|
||||
if (externalTensorMap.size == externalTensorLocations.length) {
|
||||
let model = new window.onnx.Model(onnxProtoModel, onnxProtoGraphs, externalTensorMap);
|
||||
|
||||
let host = new window.host.BrowserHost(vscode);
|
||||
let view = new window.View(host);
|
||||
view.start().then((data) => {
|
||||
view.open(model, onnxModelName);
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
{
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Signal to VS Code that the webview is initialized.
|
||||
vscode.postMessage({ type: 'ready' });
|
||||
}());
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -1,16 +1,11 @@
|
|||
<template>
|
||||
<div class="flow-demo1">
|
||||
<el-row :gutter="20" style="height: 100%;">
|
||||
<el-col :span="4">
|
||||
<NodePanel :lf="lf" ref="nodePanel"/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="flow-card">
|
||||
<div style="display: flex;height:100%">
|
||||
<NodePanel :lf="lf" ref="nodePanel" class="node-panel"/>
|
||||
<el-card class="flow-card">
|
||||
<div ref="flow" class="viewport" id="flowMain" @click="hideProp"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-card v-if="showProp" :key="nodePropKey">
|
||||
<el-card v-if="showProp" :key="nodePropKey" class="card-prop">
|
||||
<template #header>节点属性</template>
|
||||
<div>
|
||||
节点ID:{{nodeData.properties.node }}
|
||||
|
|
@ -19,8 +14,7 @@
|
|||
节点名称:{{nodeData.text.value }}
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -161,6 +155,7 @@ onMounted(() => {
|
|||
.flow-demo1 {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding:0px 12px;
|
||||
.viewport {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
|
@ -181,10 +176,23 @@ onMounted(() => {
|
|||
}
|
||||
.flow-card{
|
||||
height: 80%;
|
||||
width:calc(100% - 450px);
|
||||
.el-card__body{
|
||||
height:100%;
|
||||
padding:4px;
|
||||
}
|
||||
margin: 0px 12px;
|
||||
}
|
||||
.node-panel{
|
||||
width:240px;
|
||||
.el-tabs__item{
|
||||
padding: 0px 10px !important;
|
||||
}
|
||||
}
|
||||
.card-prop{
|
||||
height: 300px;
|
||||
width:200px;
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue