145 lines
3.3 KiB
HTML
145 lines
3.3 KiB
HTML
{% 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 %} |