<!--
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&amp;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>
