saurabh091's picture
Update templates/document.html
4a9a4e6 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer-box {
position: relative; /* Necessary for positioning relative to this element */
display: inline-block; /* Make the outer box inline-block to allow positioning relative to it */
padding: 5px 10px;
border: 1px solid white;
margin-left: 350px;
margin-bottom: 5px;
border-radius: 30px; /* Add rounded corners */
}
body{
background: linear-gradient(135deg, #1a1b2d, #2c3e50, #34495e, #3b3f73);
width: 1480px; /* Set width to 1480 pixels */
min-height: 100vh; /* Ensure body is at least the height of the viewport */
padding: 15px;
}
#docs a {
width: 400px;
margin:20px;
padding: 40px;
height: 30px;
display: block;
border-radius: 10px; /* Adjust the value for more or less roundness */
color: white;
text-decoration: none;
padding: 5px 16px;
}
#docs a:hover {
color: white;
background-color: #0d6efd;
}
.table-container {
overflow-x: auto;
max-width: 100%;
}
table {
border-collapse: collapse;
width: auto;
white-space: nowrap;
}
table, th, td {
border: 2px solid White;
padding: 8px;
}
</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="link-primary">
<a class="nav-link " aria-current="page" href="/index">Home</a>
</li>
<li class="link-primary">
<a class="nav-link" href="/wbc_info">WBC's Info</a>
</li>
<li class="link-primary">
<a class="nav-link active" href="/document">Documentations</a>
</li>
</ul>
<br>
<h2>Here are links to the project's key components:</h2>
<nav id="docs">
<ul>
<li><a href="https://www.linkedin.com/in/saurabh-maulekhi-326584241/" target="_blank" rel="noopener noreferrer"><b>Linked Profile</b></a></li>
<li><a href="https://www.kaggle.com/code/saurabhmaulekhi/yolo-2017-v1-paper-reimplementation" target="_blank" rel="noopener noreferrer"><b>YOLO V1 Paper Reimplimentation</b></a></li>
<li><a href="https://www.kaggle.com/code/saurabhmaulekhi/wbc-object-detection-using-yolo-11" target="_blank" rel="noopener noreferrer"><b>ML Model Deployment (Kaggle NoteBook)</b></a></li>
<li><a href="https://github.com/Saurabh-Maulekhi/WBCs-s-Object-Detection" target="_blank" rel="noopener noreferrer"><b>Github Repo</b></a></li>
<li><a href="https://www.kaggle.com/models/saurabhmaulekhi/wbc_detection_with_yolo11" target="_blank" rel="noopener noreferrer"><b> Model Download</b></a></li>
<li><a href="https://www.linkedin.com/posts/saurabh-maulekhi-326584241_machinelearning-deeplearning-yolo-activity-7299077257233321984-Y5z_?utm_source=share&utm_medium=member_desktop&rcm=ACoAADwQMM4BXaCYT_LwYhxeLC7BWY3KrAVFQOY" target="_blank" rel="noopener noreferrer"><b> Explain/Demo video</b></a></li>
</ul>
</nav>
<br>
<h2>Detailed Epoch Training Metrics and Performance:</h2>
<br> <br>
<!-- getting image from th github repo-->
<img src="https://raw.githubusercontent.com/Saurabh-Maulekhi/WBCs-s-Object-Detection/refs/heads/main/Documents/results.png" width="1500" height="500" class="figure-img img-fluid rounded" alt="Error">
<br> <br>
<img src="https://raw.githubusercontent.com/Saurabh-Maulekhi/WBCs-s-Object-Detection/refs/heads/main/Documents/confusion_matrix.png" width="700" height="500" class="img-thumbnail" alt="Error">
<img src="https://raw.githubusercontent.com/Saurabh-Maulekhi/WBCs-s-Object-Detection/refs/heads/main/Documents/confusion_matrix_normalized.png" width="700" height="500" class="img-thumbnail" alt="Error">
<br> <br>
<img src="https://raw.githubusercontent.com/Saurabh-Maulekhi/WBCs-s-Object-Detection/refs/heads/main/Documents/F1_curve.png" width="700" height="500" class="img-thumbnail" alt="Error">
<img src="https://raw.githubusercontent.com/Saurabh-Maulekhi/WBCs-s-Object-Detection/refs/heads/main/Documents/P_curve.png" width="700" height="500" class="img-thumbnail" alt="Error">
<br> <br> <br>
<h3><u>Training Table:</u></h3>
<br><br>
<div class="table-container">
<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>
</div>
</body>
</html>