|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>YOLOv11 Object Detection</title> |
|
|
<style> |
|
|
|
|
|
.outer-box { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
padding: 5px 10px; |
|
|
border: 1px solid white; |
|
|
margin-left: 350px; |
|
|
margin-bottom: 5px; |
|
|
border-radius: 30px; |
|
|
} |
|
|
|
|
|
#input{ |
|
|
width : 250px; |
|
|
} |
|
|
|
|
|
body{ |
|
|
min-width: 1480px; |
|
|
min-height: 100vh; |
|
|
background: linear-gradient(135deg, #1a1b2d, #2c3e50, #34495e, #3b3f73); |
|
|
padding: 15px; |
|
|
} |
|
|
|
|
|
h2 { |
|
|
color: solid white; |
|
|
} |
|
|
|
|
|
table { |
|
|
width: 70%; |
|
|
border-collapse: collapse; |
|
|
} |
|
|
table, th, td { |
|
|
border: 2px solid white; |
|
|
} |
|
|
th, td { |
|
|
padding: 10px; |
|
|
text-align: left; |
|
|
} |
|
|
</style> |
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> |
|
|
|
|
|
</head> |
|
|
<body class="text-light"> |
|
|
|
|
|
<div class="outer-box"><h1> WBC's Object Detection Using YOLO 11 </h1> </div> |
|
|
|
|
|
<br> |
|
|
|
|
|
<ul class="nav nav-pills"> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link active" aria-current="page" href="/index">Home</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" href="/wbc_info">WBC's Info</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" href="/document">Documentations</a> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<br> |
|
|
|
|
|
<form action="/upload" method="POST" enctype="multipart/form-data"> |
|
|
<div class="input-group mb-3" id="input" > |
|
|
<input type="file" class="form-control" id="inputGroupFile02" name="fileInput"> |
|
|
</div> |
|
|
<button type="submit" class="btn btn-primary">Submit</button> |
|
|
</form> |
|
|
<br> |
|
|
|
|
|
{% for image in pred_image_list %} |
|
|
<h2>Detected Image:</h2> |
|
|
<p>{{image}}</p> |
|
|
<img src="{{ url_for('static', filename='static/Image_Prediction/'+image) }}" width="700" height="500" alt="chk"> |
|
|
{% endfor %} |
|
|
|
|
|
<br> <br> |
|
|
|
|
|
|
|
|
<br> |
|
|
|
|
|
{% if show_csv_heading %} |
|
|
<h2>Bounding Boxes's Co-ordinates and Confidence score Table:</h2> |
|
|
{% endif %} |
|
|
|
|
|
<br> |
|
|
|
|
|
<table class="table-bordered"> |
|
|
<thead> |
|
|
<tr> |
|
|
{% for column in columns %} |
|
|
<th><b>{{ column }}</b></th> |
|
|
{% endfor %} |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
{% for row in data %} |
|
|
<tr> |
|
|
{% for column in columns %} |
|
|
<td>{{ row[column] }}</td> |
|
|
{% endfor %} |
|
|
</tr> |
|
|
{% endfor %} |
|
|
</tbody> |
|
|
</table> |
|
|
|
|
|
</body> |
|
|
</html> |
