SunnyMirror
/
netron
mirror da https://github.com/lutzroeder/netron.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
							<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';">
<title>Netron</title>
<link rel="stylesheet" type="text/css" href="view-grapher.css">
<link rel="stylesheet" type="text/css" href="view-sidebar.css">
<style>
html { -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 { margin: 0; width: 100vw; height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 12px; text-rendering: geometricPrecision; }
.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; }
.graph { overflow: auto; width: 100%; height: 100%; }
.canvas { display: block; position: absolute; 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 { background: None; border-radius: 6px; border: 0; margin: 0; padding: 0; fill: None; stroke: #777; cursor: hand; width: 24px; height: 24px; }
.toolbar button:focus { outline: 0; }
.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; }
.welcome { background-color: #ececec; color: #242424; }
.welcome .logo { width: 582px; height: 128px; }
.welcome .logo-text { top: -57px; width: 582px; transition: 0.1s; }
.welcome .logo-icon { left: 0; top: 0; width: 128px; height: 128px; transition: 0.1s; }
.welcome .logo-spinner { left: 0; top: 0; width: 128px; height: 128px; display: none; }
.welcome .logo-stroke { stroke: #999999; }
.welcome .logo-fill { fill: #999999; }
.welcome .logo-border { stroke: #888888; }
.welcome .logo-glyph { fill: #999999; }
.welcome .logo-message { display: none; }
.welcome .logo-github { display: none; }
.welcome .logo 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: #888888; background-color: #ececec; border: 1px solid #aaaaaa; }
.welcome .logo button:hover { color: #ececec; background-color: #aaa; cursor: hand; transition: 0.2s; }
.welcome .logo button:focus { outline: 0; }
.welcome .logo .open-file-button { top: 200px; width: 125px; opacity: 1; display: block; }
.welcome .logo .consent-accept-button { top: 280px; left: 0px; width: 125px; display: none; opacity: 0; }
.welcome .logo .consent-message { top: 160px; left: 0px; font-size: 13px; text-align: center; line-height: 20px; color: #888; 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; }
.welcome.spinner .logo-spinner-stroke { stroke: #ececec; }
.welcome.spinner .open-file-button { opacity: 0; display: none; }
.welcome.consent .open-file-button { opacity: 0; display: none; }
.welcome.consent .download-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: block; opacity: 0; }
.welcome .toolbar { display: none; }
@-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); } }
.default { background-color: #ffffff; }
.default .logo { display: none; }
.default .graph { display: block; opacity: 1; }
.default .toolbar { display: block; }
@media (prefers-color-scheme: dark) {
.default { background-color: #404040; }
.graph { background-color: #404040; }
.welcome { background-color: #1e1e1e; color: #666666; }
.welcome .logo-stroke { stroke: #666666; }
.welcome .logo-fill { fill: #666666; }
.welcome .logo-border { stroke: #000000; }
.welcome .logo-glyph { fill: #555555; }
.welcome .logo-spinner-stroke { stroke: #aaaaaa; }
.welcome .logo button { color: #666666; background-color: #1e1e1e; border-color: #666666; }
.welcome .logo button:hover { color: #1e1e1e; background-color: #666666; }
.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; }
}
</style>
</head>
<body class="welcome spinner">
<div class="center logo">
    <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 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"></path>
        </g>
    </svg>
    <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>
    <!-- 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>
<div id="graph" class="graph">
    <svg id="canvas" class="canvas" preserveaspectratio="xMidYMid meet" width="100%" height="100%"></svg>
</div>
<div id="toolbar" class="toolbar">
    <button id="menu-button" class="toolbar-button" title="Model Properties">
        <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>
</div>
<div id="sidebar" class="sidebar"></div>
<script type="text/javascript">require('./electron');</script>
</body>
</html>