{# Copyright (c) 2015-2016, NVIDIA CORPORATION.  All rights reserved. #}
{% extends "job.html" %}

{% block head %}
<script type="text/javascript" src="{{ url_for('static', filename='js/angular.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/ngStorage.min.js') }}"></script>
{% endblock %}

{% block nav %}
<li><a href="{{url_for('digits.model.views.show', job_id=model_job.id())}}">{{model_job.name()}}</a></li>
<li class="active"><a>Test Many</a></li>
{% endblock %}

{% block job_content %}

<div class="page-header">
    <h1>
        {{model_job.name()}}
        <small>
            {{job.job_type()}}
        </small>
    </h1>
</div>

{% if not keys %}
<div class="alert alert-danger">
    <p>Inference failed, see job log</p>
</div>
{% endif %}

{% endblock %}

{% block job_content_details %}

{% if header_html %}
<div class="row">
    <h3>Summary</h3>
    {{header_html|safe}}
</div>
{% endif %}

{% if app_begin_html %}
{{app_begin_html|safe}}
{% endif %}

{% if inference_views_html %}
    <h3>Output visualizations</h3>
    {% if keys|length > 1 %}
    <div class="row">
        <table class="table">
            <tr>
                <th>Index</th>
                <th>Data</th>
            </tr>
            {% for key in keys %}
            <tr>
                <td>{{loop.index}}</td>
                <td>
                    {% set index=loop.index0 %}
                    {{ inference_views_html[index]|safe }}
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>
    {% else %}
    {{ inference_views_html[0]|safe }}
    {% endif %}
{% endif %}

<script type="text/javascript">
    function drawHistogram(id, data) {
        c3.generate({
            bindto: id,
            size: {height: 200},
            data: {
                columns: [
                    ['Count'].concat(data[0]),
                    ['Value'].concat(data[1]),
                ],
                x: 'Value',
                type: 'area-spline',
            },
            axis: {
                x: {
                    label: {
                        text: 'Value',
                        position: 'outer-center',
                    },
                    tick: {
                        values: data[2],
                        format: d3.format('.3g'),
                    },
                    padding: {left: 0},
                },
                y: {
                    padding: {bottom: 0},
                },
            },
            bar: {
               width: {ratio: 0.2}
            },
            padding: {left: 20, right: 20},
            legend: {hide: true},
        });
    }
</script>
<style>
    div.histogram .c3-axis-y .tick {
        display: none;
    }
</style>

{% if visualizations %}
<h3>Layer visualizations</h3>
<table class="table">
    <tr>
        <th>Description</th>
        <th width="20%">Statistics</th>
        <th>Visualization</th>
    </tr>
    {% for vis in visualizations %}
    <tr>
        <td>
            <h3>"{{vis['name']}}"</h3>
            <p>
            {{vis['vis_type']}}
            {% if 'layer_type' in vis %}
            <small><i>({{vis['layer_type']}} layer)</i></small>
            {% endif %}
            </p>
            {% if 'param_count' in vis %}
            <p>
            {{'{:,}'.format(vis['param_count'])}} learned parameters
            </p>
            {% endif %}
        </td>
        <td>
            <b>Data shape:</b> {{vis['data_stats']['shape']}}<br>
            <b>Mean:</b> {{vis['data_stats']['mean']}}<br>
            <b>Std deviation:</b> {{vis['data_stats']['stddev']}}<br>
            <div id="histogram-{{loop.index}}" class="histogram"></div>
            <script>
                drawHistogram("#histogram-{{loop.index}}", {{vis['data_stats']['histogram']}});
            </script>
        </td>
        <td>
            {% if vis['image_html'] %}
            <img style="max-width:100%" src="{{vis['image_html']}}" id="vis_{{ loop.index }}"/>
            <script>
                $('#vis_{{ loop.index }}').elevateZoom({zoomType: "inner", cursor: "crosshair",
                        zoomWindowFadeIn: 500, zoomWindowFadeOut: 750,
                        scrollZoom: true, scrollZoomIncrement: 0.025});
            </script>
            {% else %}
            <i>Not shown</i>
            {% endif %}
        </td>
    </tr>
    {% endfor %}
    <tr>
        <td><i>Totals</i></td>
        <td>
            <b>Total learned parameters:</b>
            {{'{:,}'.format(total_parameters)}}
        </td>
    </tr>
</table>
{% endif %}

{% if app_end_html %}
{{app_end_html|safe}}
{% endif %}

{% endblock %}

