{% extends "base.html" %}

{% block meta %}
<meta name="description" content="Определение породы собаки по фото бесплатно и без регистраций. Определение породы происходит при помощи нейронной сети - точность опеределения составляет 80%." />
{% endblock %}
{% block title %}Определение породы собаки по фото бесплатно{% endblock %}
{% block content %}
<h1>Определить породу собаки по фото</h1>
<p>Загрузите фото, чтобы опеределить породу собаки или щенка. Если порода смешанная (или порода определена неточно), после загрузки будет показана вероятность породы животного.</p>
<p>Определение породы происходит при помощи нейронной сети - точность опеределения составляет 80%, сеть обучена на <a href="https://vk.com/albums-220240483" target="_blank">125 породах</a>. Если на фото будет неизвестная порода будет предложено несколько похожих пород.</p>
<p><b>Внимание!</b> Результат распознования <b>щенков</b> будет значительно <b>хуже</b>, чем взрослых собак.</p>
{% endblock %}
{% block form %}
<form enctype="multipart/form-data" method="post" action="/beerds/dogs"  onsubmit="SavePhoto(this);return false">
  <input type="file" name="f" id="file-input">
  <input type="submit" value="Определить">
</form> 
<div>
  <div id="upload-image">
      <div id="upload-image-text"></div>
      <img id="image" style="max-width: 200px;"/>

      <!-- 2️⃣  Контейнер со звёздочками -->
      <div class="star-rating" role="radiogroup" aria-label="Оценка от 1 до 5">
          <h2>Оцените результат</h2>
          <div id="rate-stars">
            <!-- 5 звёзд – каждая имеет data-value и tabindex="0" для клавиатуры -->
            <span class="star" role="radio" aria-checked="false" data-value="1" tabindex="0" aria-label="1 звезда">&#9733;</span>
            <span class="star" role="radio" aria-checked="false" data-value="2" tabindex="0" aria-label="2 звезды">&#9733;</span>
            <span class="star" role="radio" aria-checked="false" data-value="3" tabindex="0" aria-label="3 звезды">&#9733;</span>
            <span class="star" role="radio" aria-checked="false" data-value="4" tabindex="0" aria-label="4 звезды">&#9733;</span>
            <span class="star" role="radio" aria-checked="false" data-value="5" tabindex="0" aria-label="5 звёзд">&#9733;</span>
          </div>
      </div>
      <p id="feedback" style="margin-top:.5rem;"></p>
  </div>

 <div id="result"></div>
</div>
{% endblock %}