282 lines
18 KiB
HTML
282 lines
18 KiB
HTML
|
@(i18n: org.deeplearning4j.ui.api.I18N)
|
||
|
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||
|
|
~ Copyright (c) 2015-2018 Skymind, Inc.
|
||
|
|
~
|
||
|
|
~ This program and the accompanying materials are made available under the
|
||
|
|
~ terms of the Apache License, Version 2.0 which is available at
|
||
|
|
~ https://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.
|
||
|
|
~
|
||
|
|
~ SPDX-License-Identifier: Apache-2.0
|
||
|
|
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
|
|
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>@i18n.getMessage("train.pagetitle")</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="/assets/webjars/coreui__coreui/2.1.9/dist/css/coreui.min.css">
|
||
|
|
<link rel="stylesheet" href="/assets/css/style.css">
|
||
|
|
|
||
|
|
|
||
|
|
<script src="/assets/webjars/jquery/3.4.1/dist/jquery.min.js"></script>
|
||
|
|
<script src="/assets/webjars/popper.js/1.12.9/dist/umd/popper.min.js"></script>
|
||
|
|
<script src="/assets/webjars/bootstrap/4.3.1/dist/js/bootstrap.min.js"></script>
|
||
|
|
<script src="/assets/webjars/coreui__coreui/2.1.9/dist/js/coreui.min.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Icons -->
|
||
|
|
<link rel="stylesheet" href="/assets/webjars/coreui__icons/0.3.0/css/coreui-icons.min.css"></script>
|
||
|
|
|
||
|
|
|
||
|
|
<link rel="shortcut icon" href="/assets/img/favicon.ico">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="app sidebar-show aside-menu-show">
|
||
|
|
<header class="app-header navbar">
|
||
|
|
<a class="header-text" href="#"><span>@i18n.getMessage("train.pagetitle")</span></a>
|
||
|
|
<div id="sessionSelectDiv" style="display:none; float:right;">
|
||
|
|
<div style="color:white;">@i18n.getMessage("train.session.label")</div>
|
||
|
|
<select id="sessionSelect" onchange='selectNewSession()'>
|
||
|
|
<option>(Session ID)</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div id="workerSelectDiv" style="display:none; float:right">
|
||
|
|
<div style="color:white;">@i18n.getMessage("train.session.worker.label")</div>
|
||
|
|
<select id="workerSelect" onchange='selectNewWorker()'>
|
||
|
|
<option>(Worker ID)</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<div class="app-body">
|
||
|
|
<div class="sidebar">
|
||
|
|
<nav class="sidebar-nav">
|
||
|
|
<ul class="nav">
|
||
|
|
<li class="nav-item"><a class="nav-link" href="overview"><i class="nav-icon cui-chart"></i>@i18n.getMessage("train.nav.overview")</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link" href="model"><i class="nav-icon cui-graph"></i>@i18n.getMessage("train.nav.model")</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link" href="system"><i class="nav-icon cui-speedometer"></i>@i18n.getMessage("train.nav.system")</a></li>
|
||
|
|
<li class="nav-item nav-dropdown">
|
||
|
|
<a class="nav-link nav-dropdown-toggle" href="#">
|
||
|
|
<i class="nav-icon cui-globe"></i> @i18n.getMessage("train.nav.language")
|
||
|
|
</a>
|
||
|
|
<ul class="nav-dropdown-items">
|
||
|
|
<li class="nav-item"><a class="nav-link" href="javascript:void(0);" onclick="languageSelect('en', 'overview')"><i class="icon-file-alt"></i>English</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link" href="javascript:void(0);" onclick="languageSelect('de', 'overview')"><i class="icon-file-alt"></i>Deutsch</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link" href="javascript:void(0);" onclick="languageSelect('ja', 'overview')"><i class="icon-file-alt"></i>日本語</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link" href="javascript:void(0);" onclick="languageSelect('zh', 'overview')"><i class="icon-file-alt"></i>中文</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link" href="javascript:void(0);" onclick="languageSelect('ko', 'overview')"><i class="icon-file-alt"></i>한글</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link" href="javascript:void(0);" onclick="languageSelect('ru', 'overview')"><i class="icon-file-alt"></i>русский</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Start Content -->
|
||
|
|
<main id="content" class="main">
|
||
|
|
|
||
|
|
<div class="row-fluid">
|
||
|
|
|
||
|
|
<div class="box span12">
|
||
|
|
<div class="chart-header">
|
||
|
|
<h2><b>@i18n.getMessage("train.system.title")</b></h2>
|
||
|
|
<div class="btn-group" style="margin-top: -11px; position:absolute; right: 40px;">
|
||
|
|
<button class="btn dropdown-toggle btn-primary" data-toggle="dropdown">@i18n.getMessage("train.system.selectMachine") <span class="caret"></span></button>
|
||
|
|
<ul class="dropdown-menu" id="systemTab"></ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="box-content">
|
||
|
|
|
||
|
|
<!--Start System Information -->
|
||
|
|
<div class="tab-content">
|
||
|
|
<div class="tab-pane active">
|
||
|
|
|
||
|
|
<!-- System Memory Utilization Chart -->
|
||
|
|
<div class="row-fluid">
|
||
|
|
|
||
|
|
<div class="box span12" id="systemMemoryChart">
|
||
|
|
<div class="chart-header">
|
||
|
|
<h2><b>@i18n.getMessage("train.system.chart.systemMemoryTitle") %</b></h2>
|
||
|
|
</div>
|
||
|
|
<div class="box-content">
|
||
|
|
<div id="systemMemoryChartPlot" class="center" style="height: 300px;" ></div>
|
||
|
|
<p id="hoverdata"><b>@i18n.getMessage("train.system.chart.memoryShort"):</b> <span id="y">0</span>, <b>
|
||
|
|
@i18n.getMessage("train.overview.charts.iteration"):</b> <span id="x">0</span></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- GPU Memory Utlization Chart -->
|
||
|
|
<div class="box span6" id="gpuMemoryChart">
|
||
|
|
<div class="chart-header">
|
||
|
|
<h2><b>@i18n.getMessage("train.system.chart.gpuMemoryTitle") %</b></h2>
|
||
|
|
</div>
|
||
|
|
<div class="box-content">
|
||
|
|
<div id="gpuMemoryChartPlot" class="center" style="height: 300px;" ></div>
|
||
|
|
<p id="hoverdata"><b>@i18n.getMessage("train.system.chart.memoryShort"):</b> <span id="y2">0</span>, <b>
|
||
|
|
@i18n.getMessage("train.overview.charts.iteration"):</b> <span id="x2">0</span></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Tables -->
|
||
|
|
<div class="row-fluid">
|
||
|
|
|
||
|
|
<!-- Hardware Information -->
|
||
|
|
<div class="box span12">
|
||
|
|
<div class="chart-header">
|
||
|
|
<h2><b>@i18n.getMessage("train.system.hwTable.title")</b></h2>
|
||
|
|
</div>
|
||
|
|
<div class="box-content">
|
||
|
|
<table class="table table-striped">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>@i18n.getMessage("train.system.hwTable.jvmCurrent")</th>
|
||
|
|
<th>@i18n.getMessage("train.system.hwTable.jvmMax")</th>
|
||
|
|
<th>@i18n.getMessage("train.system.hwTable.offHeapCurrent")</th>
|
||
|
|
<th>@i18n.getMessage("train.system.hwTable.offHeapMax")</th>
|
||
|
|
<th>@i18n.getMessage("train.system.hwTable.jvmProcs")</th>
|
||
|
|
<th>@i18n.getMessage("train.system.hwTable.computeDevices")</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td id="currentBytesJVM">Loading...</td>
|
||
|
|
<td id="maxBytesJVM">Loading...</td>
|
||
|
|
<td id="currentBytesOffHeap">Loading...</td>
|
||
|
|
<td id="maxBytesOffHeap">Loading...</td>
|
||
|
|
<td id="jvmAvailableProcessors">Loading...</td>
|
||
|
|
<td id="nComputeDevices">Loading...</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row-fluid">
|
||
|
|
|
||
|
|
<!-- Software Information -->
|
||
|
|
<div class="box span12">
|
||
|
|
<div class="chart-header">
|
||
|
|
<h2><b>@i18n.getMessage("train.system.swTable.title")</b></h2>
|
||
|
|
</div>
|
||
|
|
<div class="box-content">
|
||
|
|
<table class="table table-striped">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>@i18n.getMessage("train.system.swTable.hostname")</th>
|
||
|
|
<th>@i18n.getMessage("train.system.swTable.os")</th>
|
||
|
|
<th>@i18n.getMessage("train.system.swTable.osArch")</th>
|
||
|
|
<th>@i18n.getMessage("train.system.swTable.jvmName")</th>
|
||
|
|
<th>@i18n.getMessage("train.system.swTable.jvmVersion")</th>
|
||
|
|
<th>@i18n.getMessage("train.system.swTable.nd4jBackend")</th>
|
||
|
|
<th>@i18n.getMessage("train.system.swTable.nd4jDataType")</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td id="hostName">Loading...</td>
|
||
|
|
<td id="OS">Loading...</td>
|
||
|
|
<td id="OSArchitecture">Loading...</td>
|
||
|
|
<td id="jvmName">Loading...</td>
|
||
|
|
<td id="jvmVersion">Loading...</td>
|
||
|
|
<td id="nd4jBackend">Loading...</td>
|
||
|
|
<td id="nd4jDataType">Loading...</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
@*<!-- GPU Information -->*@
|
||
|
|
@*<div class="row-fluid" id="gpuTable">*@
|
||
|
|
@*<div class="box span12">*@
|
||
|
|
@*<div class="chart-header">*@
|
||
|
|
@*<h2><b>GPU Information</b></h2>*@
|
||
|
|
@*</div>*@
|
||
|
|
@*<div class="box-content">*@
|
||
|
|
@*<table class="table table-striped">*@
|
||
|
|
@*<thead>*@
|
||
|
|
@*<tr>*@
|
||
|
|
@*<th>?</th>*@
|
||
|
|
@*</tr>*@
|
||
|
|
@*</thead>*@
|
||
|
|
@*<tbody>*@
|
||
|
|
@*<tr>*@
|
||
|
|
@*<td id="gpuPlaceholder">Loading...</td>*@
|
||
|
|
@*</tr>*@
|
||
|
|
@*</tbody>*@
|
||
|
|
@*</table>*@
|
||
|
|
@*</div>*@
|
||
|
|
@*</div>*@
|
||
|
|
@*</div>*@
|
||
|
|
</div>
|
||
|
|
<!-- End System Tab -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End System Tab -->
|
||
|
|
</div><!-- End Row Fluid-->
|
||
|
|
</main><!-- End Content -->
|
||
|
|
</div><!-- End Container-->
|
||
|
|
</div><!-- End Row Fluid-->
|
||
|
|
|
||
|
|
<!-- Start JavaScript-->
|
||
|
|
<script src="/assets/webjars/jquery/2.2.0/jquery.min.js"></script>
|
||
|
|
<script src="/assets/webjars/jquery-ui/1.10.2/ui/minified/jquery-ui.min.js"></script>
|
||
|
|
<script src="/assets/webjars/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
|
||
|
|
<script src="/assets/webjars/flot/0.8.3/jquery.flot.js"></script>
|
||
|
|
<script src="/assets/webjars/flot/0.8.3/jquery.flot.pie.js"></script>
|
||
|
|
<script src="/assets/webjars/flot/0.8.3/jquery.flot.stack.js"></script>
|
||
|
|
<script src="/assets/webjars/flot/0.8.3/jquery.flot.resize.min.js"></script>
|
||
|
|
<script src="/assets/webjars/chosen/0.9.8/chosen/chosen.jquery.min.js"></script>
|
||
|
|
<script src="/assets/webjars/uniform/2.1.2/jquery.uniform.min.js"></script>
|
||
|
|
<script src="/assets/webjars/noty/2.2.2/jquery.noty.packaged.js"></script>
|
||
|
|
<script src="/assets/webjars/jquery-raty/2.5.2/jquery.raty.min.js"></script>
|
||
|
|
<script src="/assets/webjars/imagesloaded/2.1.1/jquery.imagesloaded.min.js"></script>
|
||
|
|
<script src="/assets/webjars/masonry/3.1.5/masonry.pkgd.min.js"></script>
|
||
|
|
<script src="/assets/webjars/jquery-knob/1.2.2/jquery.knob.min.js"></script>
|
||
|
|
<script src="/assets/webjars/jquery.sparkline/2.1.2/jquery.sparkline.min.js"></script>
|
||
|
|
<script src="/assets/webjars/retinajs/0.0.2/retina.js"></script>
|
||
|
|
|
||
|
|
<script src="/assets/js/train/system.js"></script> <!-- Charts and tables are generated here! -->
|
||
|
|
<script src="/assets/js/train/train.js"></script> <!-- Common (lang selection, etc) -->
|
||
|
|
<script src="/assets/js/counter.js"></script>
|
||
|
|
|
||
|
|
<!-- Execute once on page load -->
|
||
|
|
<script>
|
||
|
|
$(document).ready(function () {
|
||
|
|
renderSystemPage(true);
|
||
|
|
renderTabs();
|
||
|
|
selectMachine();
|
||
|
|
/* Default GPU to hidden */
|
||
|
|
$("#gpuTable").hide();
|
||
|
|
$("#gpuMemoryChart").hide();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--Execute periodically (every 2 sec) -->
|
||
|
|
<script>
|
||
|
|
setInterval(function () {
|
||
|
|
renderSystemPage(false);
|
||
|
|
}, 2000);
|
||
|
|
</script>
|
||
|
|
<!--End JavaScript-->
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|