gaupros_sandbox.html

<!DOCTYPE html>
<!--
  This file is part of GauProS-Sandbox.
  https://github.com/DirkToewe/gaupros_sandbox

  GauProS is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  GauProS is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with GauProS.  If not, see <https://www.gnu.org/licenses/>.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Dr. Kriger</title>
    <script type="text/javascript" async
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
    </script>
    <style media="all">
      .grid-container {
        width : 99vw;
        height: auto;
        display: grid;
        grid-column-gap: 8px;
        grid-template-rows:    64px 1fr;
        grid-template-columns: 1fr  400px;
        grid-template-areas:
          'header sidebar'
          'canvas sidebar';
      }
      .grid-header {
        grid-area: header;
      }
      .grid-canvas {
        grid-area: canvas;
      }
      .grid-sidebar {
        display: flex;
        flex-direction: column;
        width: 100%;
        grid-area: sidebar;
      }
      .fit_button {
        width: 100%;
      }
      .spinner_val {
        width: 80px
      }
      .slider_val {
        width: 80px
      }
      .spinner_min_max {
        width: 64px
      }
      #console_div {
        color: red;
        height: 100%;
        width: 100%;
        background-color: #eeeeee;
      }
      #forkongithub a {
        /* "Fork me on GitHub" source:
         *   https://codepo8.github.io/css-fork-on-github-ribbon/
         */
        background:#000;
        color:#fff;
        text-decoration:none;
        font-family:arial,sans-serif;
        text-align:center;
        font-weight:bold;
        padding:5px 40px;
        font-size:1rem;
        line-height:2rem;
        position:relative;
        transition:0.5s;
      }
      #forkongithub a:hover {
        background:#c11;
        color:#fff;
      }
      #forkongithub a::before,
      #forkongithub a::after {
        content:"";
        width:100%;
        display:block;
        position:absolute;
        top:1px;
        left:0;
        height:1px;
        background:#fff;
      }
      #forkongithub a::after {
        bottom:1px;top:auto;
      }
      @media screen and (min-width:800px) {
        #forkongithub{
          position:absolute;
          display:block;
          top:0;
          right:0;
          width:200px;
          overflow:hidden;
          height:200px;
          z-index:9999;
        }
        #forkongithub a {
          width:200px;
          position:absolute;
          top:60px;
          right:-60px;
          transform:rotate(45deg);
          -webkit-transform:rotate(45deg);
          -ms-transform:rotate(45deg);
          -moz-transform:rotate(45deg);
          -o-transform:rotate(45deg);
          box-shadow:4px 4px 10px rgba(0,0,0,0.8);
        }
      }
    </style>
  </head>
  <body>
    <span id="forkongithub"><a href="https://github.com/DirkToewe/gaupros_sandbox">Fork me on GitHub</a></span>
    <div class="grid-container">
      <div class="grid-header">
        <h1>Gaussian Process Sandbox</h1>
      </div>
      <div class="grid-canvas">
        <svg id="svg_root" width="100%" height="100%" viewBox="0 0 1280 720">
          <rect width="100%" height="100%" style="fill:#dddddd;"/>
          <polyline id="svg_curve_cov" fill="#cccccc"/>
          <polyline id="svg_curve_mean" stroke="black" stroke-width="0.25%" fill="none"/>
          <g id="svg_points"></g>
        </svg>
      </div>
      <div class="grid-sidebar">
        <h2>Controls:</h2>
        <table>
          <tr> <th align="right">Shift + L-Click: <td align="left"> add Point
          <tr> <th align="right">      Left-Drag: <td align="left"> move Point
          <tr> <th align="right"> CTRL + L-Click: <td align="left"> Remove Point
        </table>

        <h2>Kernel:</h2>
        <small>
          <!-- $$K_{i,j} = {σ_f}^2 \exp{\left( - \frac{1}{2 \ell^2} {\lVert x_i - x_j \rVert}^p \right)} + \begin{cases}{σ_n}^2 & i = j \\ 0 & i \neq j\end{cases}$$ -->
          <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
            <msub>
              <mi>K</mi>
              <mrow class="MJX-TeXAtom-ORD">
                <mi>i</mi>
                <mo>,</mo>
                <mi>j</mi>
              </mrow>
            </msub>
            <mo>=</mo>
            <msup>
              <mrow class="MJX-TeXAtom-ORD">
                <msub>
                  <mrow class="MJX-TeXAtom-ORD">
                    <mo>&#x3C3;</mo>
                  </mrow>
                  <mi>f</mi>
                </msub>
              </mrow>
              <mn>2</mn>
            </msup>
            <mi>exp</mi>
            <mo>&#x2061;<!-- ⁡ --></mo>
            <mrow class="MJX-TeXAtom-ORD">
              <mrow>
                <mo>(</mo>
                <mo>&#x2212;<!-- − --></mo>
                <mfrac>
                  <mn>1</mn>
                  <mrow>
                    <mn>2</mn>
                    <msup>
                      <mi>&#x2113;<!-- ℓ --></mi>
                      <mn>2</mn>
                    </msup>
                  </mrow>
                </mfrac>
                <msup>
                  <mrow class="MJX-TeXAtom-ORD">
                    <mo fence="false" stretchy="false">&#x2016;<!-- ‖ --></mo>
                    <msub>
                      <mi>x</mi>
                      <mi>i</mi>
                    </msub>
                    <mo>&#x2212;<!-- − --></mo>
                    <msub>
                      <mi>x</mi>
                      <mi>j</mi>
                    </msub>
                    <mo fence="false" stretchy="false">&#x2016;<!-- ‖ --></mo>
                  </mrow>
                  <mi>p</mi>
                </msup>
                <mo>)</mo>
              </mrow>
            </mrow>
            <mo>+</mo>
            <mrow>
              <mo>{</mo>
              <mtable columnalign="left left" rowspacing=".2em" columnspacing="1em" displaystyle="false">
                <mtr>
                  <mtd>
                    <msup>
                      <mrow class="MJX-TeXAtom-ORD">
                        <msub>
                          <mrow class="MJX-TeXAtom-ORD">
                            <mo>&#x3C3;</mo>
                          </mrow>
                          <mi>n</mi>
                        </msub>
                      </mrow>
                      <mn>2</mn>
                    </msup>
                  </mtd>
                  <mtd>
                    <mi>i</mi>
                    <mo>=</mo>
                    <mi>j</mi>
                  </mtd>
                </mtr>
                <mtr>
                  <mtd>
                    <mn>0</mn>
                  </mtd>
                  <mtd>
                    <mi>i</mi>
                    <mo>&#x2260;<!-- ≠ --></mo>
                    <mi>j</mi>
                  </mtd>
                </mtr>
              </mtable>
              <mo fence="true" stretchy="true" symmetric="true"></mo>
            </mrow>
          </math>
        </small>

        <p><table>
          <tr>
            <td><td><td><td colspan="2" align="center">(Optimization)
          <tr>
            <th><th><th><th>Min<th>Max
          <tr>
            <th><label for="shift_spinner"><b>E[y]</b></label>
            <td><input id ="shift_spinner"     overflow="auto" class="spinner_val"     type="number" min="-1e3" max="2e3" step="1" value="360"/>
            <td><input id ="shift_slider"                      class="slider_val"      type="range"  min="-1e3" max="2e3" step="1" value="360"/>
            <td><input id ="shift_spinner_min" overflow="auto" class="spinner_min_max" type="number" min="-1e3" max="2e3" step="1" value="-1e3"/>
            <td><input id ="shift_spinner_max" overflow="auto" class="spinner_min_max" type="number" min="-1e3" max="2e3" step="1" value= "2e3"/>
          <tr>
          <th><label for="noise_spinner"><b>σ<sub>n</sub></b></a></label>
            <td><input id ="noise_spinner"     overflow="auto" class="spinner_val"     type="number" min="0" max="2e3" step="1" value="1"/>
            <td><input id ="noise_slider"                      class="slider_val"      type="range"  min="0" max="2e3" step="1" value="1"/>
            <td><input id ="noise_spinner_min" overflow="auto" class="spinner_min_max" type="number" min="0" max="2e3" step="1" value="0"/>
            <td><input id ="noise_spinner_max" overflow="auto" class="spinner_min_max" type="number" min="0" max="2e3" step="1" value="1e3"/>
          <tr>
            <th><label for="sigma_spinner"><b>ℓ</b></label>
            <td><input id ="sigma_spinner"     overflow="auto" class="spinner_val"     type="number" min="1" max="4e3" step="1" value="100"/>
            <td><input id ="sigma_slider"                      class="slider_val"      type="range"  min="1" max="4e3" step="1" value="100"/>
            <td><input id ="sigma_spinner_min" overflow="auto" class="spinner_min_max" type="number" min="0" max="4e3" step="1" value="1"/>
            <td><input id ="sigma_spinner_max" overflow="auto" class="spinner_min_max" type="number" min="0" max="4e3" step="1" value="2e3"/>
          <tr>
            <th><label for="kernel_exp_spinner"><b>p</b></label>
            <td><input id ="kernel_exp_spinner" overflow="auto" class="spinner_val" type="number" min="1" max="3" step="0.05" value="1.9"/>
            <td><input id ="kernel_exp_slider"                  class="slider_val"  type="range"  min="1" max="3" step="0.05" value="1.9"/>
          <tr>
            <th><label for="σ_f_spinner"><b>σ<sub>f</sub></b></label>
            <td><input id ="σ_f_spinner"     overflow="auto" class="spinner_val"     type="number" min="1" max="2e3" step="1" value="100"/>
            <td><input id ="σ_f_slider"                      class="slider_val"      type="range"  min="1" max="2e3" step="1" value="100"/>
            <td><input id ="σ_f_spinner_min" overflow="auto" class="spinner_min_max" type="number" min="1" max="2e3" step="1" value="1"/>
            <td><input id ="σ_f_spinner_max" overflow="auto" class="spinner_min_max" type="number" min="1" max="2e3" step="1" value="2e3"/>
          <tr>
            <td><td><td colspan="3"><button id="btn_fit_marginal" class="fit_button">Fit (Marginal)</button>
          <tr>
            <td><td><td colspan="3"><button id="btn_fit_loo"      class="fit_button">Fit (Leave-One-Out)</button>
          <tr>
            <td><td><td colspan="3"><button id="btn_fit_educated" class="fit_button">Fit (Educated Guess)</button>
        </table>
        <h3>Console:</h3>
        <div id="console_div">
        </div>
      </div>
    </div>
    <script type="text/javascript" src="./target/scala-2.12/gaupros_sandbox-opt.js"></script>
  </body>
</html>