mirror of https://github.com/kubeflow/examples.git
116 lines
6.4 KiB
HTML
116 lines
6.4 KiB
HTML
<!--
|
|
Copyright 2018 Google LLC
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License 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.
|
|
-->
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
|
<title>Kubeflow UI</title>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
<link rel="stylesheet" href="static/styles/material.deep_purple-pink.min.css">
|
|
<link rel="stylesheet" href="static/styles/demo.css">
|
|
<script src="static/scripts/material.min.js"></script>
|
|
</head>
|
|
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
|
|
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
|
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
|
|
<div class="mdl-layout--large-screen-only mdl-layout__header-row"></div>
|
|
<div class="mdl-layout__header-row">
|
|
<h3>Kubeflow Codelab UI</h3>
|
|
</div>
|
|
</header>
|
|
<main class="mdl-layout__content">
|
|
<!-- render server connection status -->
|
|
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
|
|
<div class="mdl-card mdl-cell mdl-cell--12-col">
|
|
<div class="mdl-card__supporting-text">
|
|
<h4>MNIST Model Server</h4>
|
|
<form action="/">
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="width:250px">
|
|
<input class="mdl-textfield__input" type="text" id="server-name" name="name" value="{{ args.name }}">
|
|
<label class="mdl-textfield__label" for="sample1">Model Name</label>
|
|
</div>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="width:250px">
|
|
<input class="mdl-textfield__input" type="text" id="server-address" name="addr" value="{{ args.addr }}">
|
|
<label class="mdl-textfield__label" for="sample1">Server Address</label>
|
|
</div>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="width:100px">
|
|
<input class="mdl-textfield__input" type="text" name="port"
|
|
pattern="^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$"
|
|
id="server-port" value="{{ args.port }}">
|
|
<label class="mdl-textfield__label" for="sample2">Port</label>
|
|
<span class="mdl-textfield__error">Input is not a valid port</span>
|
|
</div>
|
|
<button class="mdl-button mdl-js-button">Connect</button>
|
|
</form>
|
|
{% if connection.success %}
|
|
<h6><font color="#388E3C">✓ {{ connection.text }}</font></h6>
|
|
{% else %}
|
|
<h6><font color="#C62828">❗ {{ connection.text }}</font></h6>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- if connected to server, render testing results -->
|
|
{% if output %}
|
|
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
|
|
<div class="mdl-card mdl-cell mdl-cell--12-col">
|
|
<div class="mdl-card__supporting-text">
|
|
<h4>Test Results</h4>
|
|
<img src={{ output.img_path }}
|
|
style="width:128px;height:128px;display:block;margin:auto;">
|
|
<br><br>
|
|
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" style="margin:auto;width:40%">
|
|
<tbody>
|
|
<tr>
|
|
<td class="mdl-data-table__cell--non-numeric"><b>Truth</b></td>
|
|
<td><b>{{ output.truth }}</b></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mdl-data-table__cell--non-numeric"><b>Prediction</b></td>
|
|
<td><b> {{ output.prediction }}</b></td>
|
|
</tr>
|
|
{% for score in output.scores %}
|
|
<tr>
|
|
<td class="mdl-data-table__cell--non-numeric">Probability {{ score.index }}:</td>
|
|
<td>
|
|
<div id="progressbar{{ score.index }}"
|
|
class="mdl-progress mdl-js-progress"
|
|
style="width:120;"></div>
|
|
<script language = "javascript">
|
|
document.querySelector('#progressbar{{ score.index }}').addEventListener('mdl-componentupgraded',
|
|
function() { this.MaterialProgress.setProgress({{ score.val * 100 }}); })
|
|
</script>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<br><br>
|
|
<button type="button"
|
|
class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast"
|
|
onClick="window.location.reload()" style="margin:auto;display:block">Test Random Image</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|