<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' www.google-analytics.com;">
<meta name="version" content="0.0.0">
<title>onnx-modifier</title>
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='view-grapher.css')}}">
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='view-sidebar.css')}}">
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='sweetalert.css')}}">
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='sweetalert.css')}}">
<link rel="shortcut icon" type="image/x-icon" href="{{url_for('static', filename='favicon.ico')}}">
<script src="{{url_for('static', filename='sweetalert.min.js')}}"></script>
<script src="{{url_for('static', filename='dagre.js')}}"></script>
<script src="{{url_for('static', filename='base.js')}}"></script>
<script src="{{url_for('static', filename='text.js')}}"></script>
<script src="{{url_for('static', filename='json.js')}}"></script>
<script src="{{url_for('static', filename='xml.js')}}"></script>
<script src="{{url_for('static', filename='python.js')}}"></script>
<script src="{{url_for('static', filename='protobuf.js')}}"></script>
<script src="{{url_for('static', filename='flatbuffers.js')}}"></script>
<script src="{{url_for('static', filename='zip.js')}}"></script>
<script src="{{url_for('static', filename='gzip.js')}}"></script>
<script src="{{url_for('static', filename='tar.js')}}"></script>
<script src="{{url_for('static', filename='view-grapher.js')}}"></script>
<script src="{{url_for('static', filename='view-sidebar.js')}}"></script>
<script src="{{url_for('static', filename='view.js')}}"></script>
<script src="{{url_for('static', filename='index.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; }
body { touch-action: none; overflow: hidden; width: 100%; height: 100%; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 12px; text-rendering: geometricPrecision; }
button { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; }
.center { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.select { user-select: text; -webkit-user-select: text; -moz-user-select: text; }
.open-file-dialog { display: none; }
.transparent { width: 100%; height: 100%; background-color: #000000; display: none; opacity: 0; }
.graph { display: flex; height: 100%; width: 100%; overflow: auto; outline: none; touch-action: pan-x pan-y; }
.canvas { margin: auto; flex-shrink: 0; text-rendering: geometricPrecision; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.toolbar { position: absolute; top: 10px; left: 10px; padding: 0; margin: 0; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.toolbar button:focus { outline: 0; }
.toolbar-button { background: None; border-radius: 6px; border: 0; margin: 0; padding: 0; fill: None; stroke: #777; cursor: pointer; width: 24px; height: 24px; }
.toolbar-button { float: left; background: None; border-radius: 6px; border: 0; margin: 0; margin-right: 1px; padding: 0; fill: None; stroke: #777; cursor: pointer; width: 24px; height: 24px; }
.toolbar-back-button { float: left; background: #777; border-top-left-radius: 6px; border-bottom-left-radius: 6px; border: 0px solid; border-color: #777; margin: 2px 0 2px 8px; padding: 0 8px 0 8px; cursor: pointer; height: 20px; color: #ffffff; font-size: 11px; line-height: 0; transition: 0.1s; }
.toolbar-back-button:hover { background: #000000; border-color: #000000; }
.toolbar-name-button { float: left; background: rgba(255, 255, 255, 0.95); border-top-right-radius: 6px; border-bottom-right-radius: 6px; border: 1px solid #777; color: #777; border-left: 1px; border-left-color: #ffffff; margin: 2px 0 2px 0; padding: 0 12px 0 6px; cursor: pointer; width: auto; height: 20px; font-size: 11px; line-height: 0; transition: 0.1s; }
.toolbar-name-button:hover { color: #000000; }
.graph-op-button-refresh {
    cursor: pointer;
    background-color: white;
    border: 1px solid grey;
    border-radius: 3px;
    color: black;
    font-family:"Oliviar Sans Light";
    font-size: 16px;
    position:absolute;
    left: 2px;
    top: 30px;
}
.graph-op-button-refresh:active {  background: #e7e7e7; }
.graph-op-button-reset {
    cursor: pointer;
    background-color: white;
    border: 1px solid grey;
    border-radius: 3px;
    color: black;
    font-family:"Oliviar Sans Light";
    font-size: 16px;
    position:absolute;
    left: 2px;
    top: 60px;
}
.graph-op-button-reset:active {  background: #e7e7e7; }
.graph-op-button-download {
    cursor: pointer;
    background-color: white;
    border: 1px solid grey;
    border-radius: 3px;
    color: black;
    font-family:"Oliviar Sans Light";
    font-size: 16px;
    position:absolute;
    left: 2px;
    top: 90px;
}
.graph-op-button-download:active {  background: #e7e7e7; }
.graph-op-button-addNode {
    cursor: pointer;
    background-color: white;
    border: 1px solid grey;
    border-radius: 3px;
    color: black;
    font-family:"Oliviar Sans Light";
    font-size: 16px;
    position:absolute;
    left: 2px;
    top: 120px;
}
.graph-op-button-addNode:active {  background: #e7e7e7; }
.graph-op-add-node-dropdown {

    position:absolute;
    left: 2px;
    top: 150px;
}
.icon .border { stroke: #fff; }
.icon .stroke { stroke: #808080; }
.icon:hover .stroke { stroke: #000000; }
.dropdown { display: none; position: absolute; min-width: 225px; z-index: 1; border-radius: 4px; background-color: #f6f6f6; border: 1px solid rgba(0,0,0,.15); padding-top: 2px; padding-bottom: 2px; margin-left: 2px; overflow: hidden; }
.dropdown button { display: block; border: none; border-radius: 0; background-color: transparent; color: black; width: 100%; text-align: left; padding: 4px 12px 5px 12px; white-space: no-wrap; font-size: 12px; }
.dropdown button:hover { color: #ffffff; background-color: #2e6bd2; }
.dropdown .separator { margin-top: 2px; margin-bottom: 2px; border-top: 1px; border-bottom: 0; border-style: solid; border-color: #e5e5e5; }
.about { background-color: #ffffff; }
.about { overflow: hidden; }
.about .logo { background-color: #ececec; color: #242424; width: 320px; height: 170px; padding: 40px; opacity: 1.0; border-radius: 5px; border: 0.5px solid #cccccc; box-shadow: 0 0 30px #ddd; }
.about.desktop .logo { border: None; border-radius: 0px; }
.about.desktop .graph { display: none; opacity: 0; }
.about.desktop .transparent { display: none; opacity: 0; }
.about.desktop .toolbar { display: none; opacity: 0; }
.about .logo-name { opacity: 0; }
.about .logo-text { top: -130px; width: 320px; }
.about .logo-icon { left: 136px; top: -108px; width: 60px; height: 60px; }
.about .logo-stroke { stroke: #242424; }
.about .logo-fill { fill: #242424; }
.about .logo-border { stroke: #242424; }
.about .logo-glyph { fill: #242424; }
.about .logo-message { top: 112px; padding-left: 40px; padding-right: 40px; }
.about a { text-decoration: none; color: #242424; }
.about a:visited { color: inherit; }
.about a:hover { color: #242424; }
.about .logo-github { top: 130px; width: 24px; height: 24px; }
.about .open-file-button { display: none; }
.about .github-button { display: none; }
.about .consent-message { display: none; }
.about .consent-accept-button { display: none; }
.about .graph { display: flex; opacity: 1; }
.about .toolbar { display: block; opacity: 1; }
.about .transparent { display: block; opacity: 0.5; }
.welcome { background-color: #ececec; color: #242424; }
.welcome .logo { width: 582px; height: 128px; }
.welcome .logo-text { top: -57px; width: 582px; transition: 0.1s; }
.welcome .logo-name { top: -170px; width: 582px; transition: 0.1s; }
.welcome .logo-icon { left: 248px; top: -18px; width: 106px; height: 106px; transition: 0.1s; }
.welcome .logo-spinner { left: 248px; top: -18px; width: 106px; height: 106px; display: none; }
.welcome .logo-stroke { stroke: #444444; }
.welcome .logo-fill { fill: #444444; }
.welcome .logo-border { stroke: #555555; }
.welcome .logo-glyph { fill: #444444; }
.welcome .logo-message { display: none; }
.welcome .logo-github { display: none; }
.welcome button { font-size: 12px; font-weight: bold; line-height: 1.25; text-align: center; vertical-align: middle; min-width: 60px; height: 32px; border-radius: 16px; transition: 0.1s; user-select: none; -webkit-user-select: none; -moz-user-select: none; color: #444444; background-color: #ececec; border: 1px solid #444444; }
.welcome button:hover { color: #ececec; background-color: #444444; cursor: pointer; transition: 0.2s; }
.welcome button:focus { outline: 0; }
.welcome .open-file-button { top: 170px; left: -150px; width: 125px; opacity: 1; }
.welcome .github-button { top: 170px; left: 150px; width: 125px; opacity: 1; }
.welcome .consent-accept-button { top: 220px; left: 0px; width: 125px; display: none; opacity: 0; }
.welcome .consent-message { top: 120px; left: 0px; font-size: 13px; text-align: center; line-height: 20px; color: #444444; display: none; opacity: 0; }
.welcome .graph { display: none; opacity: 0; }
.welcome.spinner .logo-spinner { display: block; -webkit-animation: orbit 0.5s infinite linear; animation: orbit 0.5s infinite linear; cursor: wait; }
@-webkit-keyframes orbit { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes orbit { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
.welcome.spinner .logo-spinner-stroke { stroke: #ececec; }
.welcome.spinner .logo-name { display: none; }
.welcome.spinner .open-file-button { opacity: 0; display: none; }
.welcome.spinner .github-button { opacity: 0; display: none; }
.welcome.consent .logo-name { display: none; }
.welcome.consent .open-file-button { opacity: 0; display: none; }
.welcome.consent .github-button { opacity: 0; display: none; }
.welcome.consent .consent-accept-button { opacity: 1; display: block; }
.welcome.consent .consent-message { opacity: 1; display: block; }
.welcome.spinner .graph { display: flex; opacity: 0; }
.welcome .toolbar { display: none; }
.default { background-color: #ffffff; }
.default .logo { display: none; }
.default .graph { display: flex; opacity: 1; }
.default .toolbar { display: table; }
@media (prefers-color-scheme: dark) {
:root { color-scheme: dark; }
.default { background-color: #404040; }
.graph { background-color: #404040; }
.about { background-color: #404040; }
.about .logo { background-color: #2d2d2d; color: #dfdfdf; border-color: #000000; box-shadow: 0 0 30px #333; }
.about a { color: #dfdfdf; }
.about a:hover { color: #ffffff; }
.about .logo-stroke { stroke: #dfdfdf; }
.about .logo-fill { fill: #dfdfdf; }
.about .logo-border { stroke: #dfdfdf; }
.about .logo-glyph { fill: #dfdfdf; }
.welcome { background-color: #1e1e1e; color: #888888; }
.welcome .logo-stroke { stroke: #888888; }
.welcome .logo-fill { fill: #888888; }
.welcome .logo-border { stroke: #000000; }
.welcome .logo-glyph { fill: #888888; }
.welcome .logo-spinner-stroke { stroke: #ffffff; }
.welcome .logo button { color: #888888; background-color: #1e1e1e; border-color: #888888; }
.welcome .logo button:hover { color: #1e1e1e; background-color: #888888; }
.welcome .consent-message { color: #888888; display: none; opacity: 0; }
.icon .border { stroke: #1d1d1d; }
.icon .stroke { stroke: #aaaaaa; }
.icon:hover .stroke { stroke: #dfdfdf; }
.dropdown { background-color: #373737; border-color: #000000; }
.dropdown button { color: #ffffff; }
.dropdown button:hover { color: #ffffff; background-color: #1d59d1; }
.dropdown .separator { border-color: #5a5a5a; }
.toolbar-back-button { background: #aaaaaa; border-color: #aaaaaa; color: #333333; }
.toolbar-back-button:hover { background: #dfdfdf; border-color: #dfdfdf; }
.toolbar-name-button { background: #404040; border-color: #aaaaaa; color: #cccccc; }
.toolbar-name-button:hover { color: #dfdfdf; }
}
@media all and (max-width: 640px) {
.welcome .logo { width: 240px; }
.welcome .logo-text { opacity: 0; }
.welcome .logo-name { opacity: 0; }
.welcome .logo-icon { left: 0; top: 0; width: 128px; height: 128px; }
.welcome .logo-spinner { left: 0; top: 0; width: 128px; height: 128px; }
.welcome .logo .open-file-button { top: 180px; left: 0; }
.welcome .logo .github-button { top: 270px; left: 0; }
.welcome .logo .consent-message { top: 140px; }
.welcome .logo .consent-accept-button { top: 310px; }
.about .logo { border-radius: 0; border-left: 0px; border-right: 0px; width: 100%; padding-left: 0; padding-right: 0; }
.about.desktop .logo { width: 320px; padding: 40px; }
}
@media only screen and (max-device-width: 1024px) {
.toolbar-button { width: 32px; height: 32px; }
.toolbar-back-button { margin-top: 6px; margin-bottom: 6px; }
.toolbar-name-button { margin-top: 6px; margin-bottom: 6px; }
}
</style>
</head>
<body class="welcome spinner">
<div id="graph" class="graph" tabindex="0">
    <svg id="canvas" class="canvas" preserveaspectratio="xMidYMid meet" width="100%" height="100%"></svg>
</div>
<div id="sidebar" class="sidebar"></div>
<div id="toolbar" class="toolbar">
    <button id="menu-button" class="toolbar-button" title="Menu">
        <svg class="icon" viewbox="0 0 100 100">
            <rect class="border" x="12" y="12" width="76" height="76" rx="16" ry="16" stroke-width="8"></rect>
            <line class="border" x1="30" y1="37" x2="70" y2="37" stroke-width="8" stroke-linecap="round" stroke="#fff"></line>
            <line class="border" x1="30" y1="50" x2="70" y2="50" stroke-width="8" stroke-linecap="round" stroke="#fff"></line>
            <line class="border" x1="30" y1="63" x2="70" y2="63" stroke-width="8" stroke-linecap="round" stroke="#fff"></line>
            <rect class="stroke" x="12" y="12" width="76" height="76" rx="16" ry="16" stroke-width="4"></rect>
            <line class="stroke" x1="30" y1="37" x2="70" y2="37" stroke-width="4" stroke-linecap="round"></line>
            <line class="stroke" x1="30" y1="50" x2="70" y2="50" stroke-width="4" stroke-linecap="round"></line>
            <line class="stroke" x1="30" y1="63" x2="70" y2="63" stroke-width="4" stroke-linecap="round"></line>
        </svg>
    </button>
    <button id="zoom-in-button" class="toolbar-button" title="Zoom In">
        <svg class="icon" viewbox="0 0 100 100">
            <circle class="border" cx="50" cy="50" r="35" stroke-width="8" stroke="#fff"></circle>
            <line class="border" x1="50" y1="38" x2="50" y2="62" stroke-width="8" stroke-linecap="round" stroke="#fff"></line>
            <line class="border" x1="38" y1="50" x2="62" y2="50" stroke-width="8" stroke-linecap="round" stroke="#fff"></line>
            <line class="border" x1="78" y1="78" x2="82" y2="82" stroke-width="12" stroke-linecap="square" stroke="#fff"></line>
            <circle class="stroke" cx="50" cy="50" r="35" stroke-width="4"></circle>
            <line class="stroke" x1="50" y1="38" x2="50" y2="62" stroke-width="4" stroke-linecap="round"></line>
            <line class="stroke" x1="38" y1="50" x2="62" y2="50" stroke-width="4" stroke-linecap="round"></line>
            <line class="stroke" x1="78" y1="78" x2="82" y2="82" stroke-width="8" stroke-linecap="square"></line>
        </svg>
    </button>

    <button id="zoom-out-button" class="toolbar-button" title="Zoom Out">
        <svg class="icon" viewbox="0 0 100 100">
            <circle class="border" cx="50" cy="50" r="35" stroke-width="8" stroke="#fff"></circle>
            <line class="border" x1="38" y1="50" x2="62" y2="50" stroke-width="8" stroke-linecap="round" stroke="#fff"></line>
            <line class="border" x1="78" y1="78" x2="82" y2="82" stroke-width="12" stroke-linecap="square" stroke="#fff"></line>
            <circle class="stroke" cx="50" cy="50" r="35" stroke-width="4"></circle>
            <line class="stroke" x1="38" y1="50" x2="62" y2="50" stroke-width="4" stroke-linecap="round"></line>
            <line class="stroke" x1="78" y1="78" x2="82" y2="82" stroke-width="8" stroke-linecap="square"></line>
        </svg>
    </button>

    <button id="refresh-graph" class="graph-op-button-refresh">Refresh</button>
    <button id="reset-graph" class="graph-op-button-reset">Reset</button>
    <button id="download-graph" class="graph-op-button-download">Download</button>
    <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="back-button" class="toolbar-back-button" title="Back">
        &#x276E;
    </button>
    <button id="name-button" class="toolbar-name-button" title="Name">
    </button>
    <div id="menu-dropdown" class="dropdown"></div>
</div>
<div id="transparent" class="transparent"></div>
<div class="center logo">
    <a href="https://github.com/ZhangGe6/onnx-modifier" target="blank_">
        <img src="../static/logo.svg"
             title="onnx-modifier is a tool to modify onnx models in a visualization fashion. It is built based on Netron and flask."
             height="130">
    </a>

    <div class="center logo-message">
        <div style="height: 30px; text-align: center;">Version <span id="version" class="select">{version}</span></div>
        <div style="height: 30px; text-align: center;">Copyright &copy; <a href="https://github.com/ZhangGe6" target="blank_">Lutz Roeder</a></div>
    </div>
    <a id="logo-github" class="center logo-github" href="https://github.com/ZhangGe6/onnx-modifier" target="blank_">
        <svg viewbox="0 0 438.549 438.549">
            <path class="logo-fill" d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365
                c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63
                c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996
                c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136
                c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559
                c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559
                c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997
                c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851
                c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136
                c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41
                c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126
                c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817
                c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994
                c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849
                c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24
                c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979
                c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146
                c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995
                c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906
                C438.536,184.851,428.728,148.168,409.132,114.573z"/>
        </svg>
    </a>
    <span class="center consent-message">This app uses cookies to report errors and anonymous usage information.</span>
    <button id="consent-accept-button" class="center consent-accept-button">Accept</button>
    <button id="open-file-button" class="center open-file-button">Open Model&hellip;</button>
    <button id="github-button" class="center github-button">Github repo</button>
    <input type="file" id="open-file-dialog" class="open-file-dialog" multiple="false" accept=".onnx, .ort, .pb, .meta, .tflite, .lite, .tfl, .keras, .h5, .hd5, .hdf5, .json, .model, .mar, .params, .param, .armnn, .mnn, .ncnn, .tnnproto, .tmfile, .ms, .om, .nn, .uff, .rknn, .xmodel, .kmodel, .paddle, .pdmodel, .pdparams, .nb, .dnn, .cmf, .mlmodel, .mlpackage, .caffemodel, .pbtxt, .prototxt, .pkl, .pt, .pth, .ptl, .t7, .joblib, .cfg, .xml, .zip, .tar">
    <!-- 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>
</div>
</body>
</html>