{% extends "base.html" %}


{% block head %}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<meta name="apple-mobile-web-app-capable" content="no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="static/style.css?v={{version}}">
{% end %}


{% block content %}
<p>
  <b>Experimental demo</b> of a serverless version of OpenPifPaf.
  Only static assets are loaded from the web. All computation happens on
  the client side.
  Currently only shows a representation of the fields without decoding
  the poses. Input image size is {{width_height[0]}}x{{width_height[1]}}.
</p>
<p>
  Only works in landscape mode. Needs access to a camera (use Safari on iOS).
</p>

<div id="model-selector">
  {% for m in models %}
    <input name="model" type="radio" id="selector-{{m['shortname']}}" data-name="{{m['shortname']}}" data-url="{{m['url']}}" />
    <label for="selector-{{m['shortname']}}">{{m['displayname']}}</label>
  {% end %}
</div>

<div id="capture">
  <video controls autoplay muted playsinline></video>
  <button class="nextCamera"><i class="fas fa-video"></i></button>
  <button class="screenCapture"><i class="fas fa-screen"></i></button>
  <canvas style="display: none" width={{width_height[0]}} height={{width_height[1]}}></canvas>
</div>
<div id="visualization">
  <canvas style="max-width:100%; max-height:98vh;" width=640 height=480></canvas>
</div>

<div style="font-size: 200%">
  FPS = <em><span id="fps">0</span></em>
</div>
{% end %}


{% block log %}
{% end %}


{% block footer %}

<script src="//webrtc.github.io/adapter/adapter-latest.js" type="text/javascript"></script>
<script>console.log({version: '{{version}}' });</script>
<script src="static/clientside.js?v={{version}}"></script>

{% end %}
