{% extends "base.html" %}

{% block title %}
{{ title }}
{% endblock %}

{% block content %}

  <div class="container">



<section>
<h3 style="margin-top: 10rem; ">Predict Pre-trained Customized Yolov8 model</h3>

    <p>Table below shows results of <a href = "https://repairproject.github.io/fragment-restoration/">Semantic Motif Segmentation of Archaeological Fresco Fragments</a> article.</p>


    <img src="../static/public/images/yolov8_result_table.png" alt="YOLO Example" style="max-width:100%; height:auto;">
    <img src="../static/public/images/yolov8_result.png" alt="YOLO Example" style="max-width:100%; height:auto;">

  <div class="table-responsive">

    <table class="table" >
        <th>
            <strong>model</strong>
        </th>
        <th>
            <strong>box precision</strong>
        </th>
        <th>
            <strong>box recall</strong>
        </th>        
        <th>
            <strong>box map50</strong>
        </th>        

        <tr>
          <td>
            Customized YOLOv8l
          </td>
          <td>
            0.7866
          </td>
          <td>
            0.8659
          </td>
          <td>
            0.8439
          </td>

        </tr>
    </table>

    <table>
        <th>
            <strong>model</strong>
        </th>
        <th>
            <strong>seg precision</strong>
        </th>
        <th>
            <strong>seg recall</strong>
        </th>
        <th>
            <strong>seg map50</strong>
        </th>  
        <tr>
        <td>
          Customized YOLOv8l
        </td>
        <td>
          0.8961
        </td>
        <td>
          0.8113
        </td>
        <td>
          0.9025
        </td>
        </tr>
    </table>
  </div>


    <form id="model-form" method="post" action="/projects/run-yolo">
    <div class="row">
    <!-- Select Image -->
    <div class="six columns">
        <label for="select-image">Select Image</label>
        <select id="select-image" name="selected_image">
        {% for image in images %}
            <option value="{{ image }}"
                    {% if selected_image is defined and selected_image == image %}selected{% endif %}>
            {{ image }}
            </option>
        {% endfor %}
        </select>
    </div>



    <!-- Confidence Input -->
    <div class="six columns">
        <label for="confidence">Confidence Threshold</label>
        <input type="number" 
            style="width: 100%;"
            id="confidence" 
            name="confidence" 
            min="0" max="1" step="0.01" 
            value="{{ selected_confidence if selected_confidence is defined else 0.8 }}">
    </div>
    </div>

      <div class="row">
        <div class="six columns">
          <img id="original-preview" 
               src="../static/public/files/repair/images/{{ selected_image }}" 
               alt="Original Image" style="max-width:100%; height:auto;">
        </div>

        <!-- Predicted image -->
        <div class="six columns">
          {% if result_path %}
            <img id="predicted-preview" 
                src="{{ result_path }}" 
                alt="Predicted Image" style="max-width:100%; height:auto;">
          {% else %}
            <p>No prediction yet.</p>
          {% endif %}
        </div>
      </div>

      <button type="submit">Predict</button>
    </form>


</section>


</div>



{% endblock %}