Hugging Face's logo

Spaces:
saurabh091
/
WBC_Detection_Using_Yolo11
Sleeping

App Files Community
saurabh091 commited on
Commit
765a6c6
·
verified ·
1 Parent(s): 77ffd5a

Update templates/document.html

Browse files
Files changed (1) hide show
  1. templates/document.html +131 -131
templates/document.html CHANGED
@@ -1,132 +1,132 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Title</title>
6
-
7
- <style>
8
-
9
- .outer-box {
10
- position: relative; /* Necessary for positioning relative to this element */
11
- display: inline-block; /* Make the outer box inline-block to allow positioning relative to it */
12
- padding: 5px 10px;
13
- border: 1px solid white;
14
- margin-left: 350px;
15
- margin-bottom: 5px;
16
- border-radius: 30px; /* Add rounded corners */
17
- }
18
- body{
19
- background: linear-gradient(135deg, #1a1b2d, #2c3e50, #34495e, #3b3f73);
20
- width: 1480px; /* Set width to 1480 pixels */
21
- min-height: 100vh; /* Ensure body is at least the height of the viewport */
22
- padding: 15px;
23
- }
24
-
25
- #docs a {
26
- width: 400px;
27
- margin:20px;
28
- padding: 40px;
29
- height: 30px;
30
- display: block;
31
- border-radius: 10px; /* Adjust the value for more or less roundness */
32
- color: white;
33
- text-decoration: none;
34
- padding: 5px 16px;
35
- }
36
-
37
- #docs a:hover {
38
- color: white;
39
- background-color: #0d6efd;
40
- }
41
-
42
- .table-container {
43
- overflow-x: auto;
44
- max-width: 100%;
45
- }
46
-
47
- table {
48
- border-collapse: collapse;
49
- width: auto;
50
- white-space: nowrap;
51
- }
52
-
53
- table, th, td {
54
- border: 2px solid White;
55
- padding: 8px;
56
- }
57
- </style>
58
-
59
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
60
-
61
- </head>
62
-
63
- <body class="text-light">
64
- <div class="outer-box"><h1> WBC's Object Detection Using YOLO 11 </h1> </div>
65
-
66
- <br>
67
- <ul class="nav nav-pills">
68
- <li class="link-primary">
69
- <a class="nav-link " aria-current="page" href="/index">Home</a>
70
- </li>
71
- <li class="link-primary">
72
- <a class="nav-link" href="/wbc_info">WBC's Info</a>
73
- </li>
74
- <li class="link-primary">
75
- <a class="nav-link active" href="/document">Documentations</a>
76
- </li>
77
- </ul>
78
-
79
- <br>
80
-
81
- <h2>Here are links to the project's key components:</h2>
82
- <nav id="docs">
83
- <ul>
84
- <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>
85
- <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>
86
- <li><a href="https://github.com/Saurabh-Maulekhi/WBCs-s-Object-Detectionn" target="_blank" rel="noopener noreferrer"><b>Github Repo</b></a></li>
87
- <li><a href="https://www.kaggle.com/models/saurabhmaulekhi/wbc_detection_with_yolo11" target="_blank" rel="noopener noreferrer"><b> Model Download</b></a></li>
88
- </ul>
89
- </nav>
90
-
91
- <br>
92
- <h2>Detailed Epoch Training Metrics and Performance:</h2>
93
- <br> <br>
94
- <!-- getting image from th github repo-->
95
- <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">
96
- <br> <br>
97
- <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">
98
- <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">
99
-
100
- <br> <br>
101
- <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">
102
- <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">
103
-
104
- <br> <br> <br>
105
-
106
- <h3><u>Training Table:</u></h3>
107
-
108
- <br><br>
109
-
110
- <div class="table-container">
111
- <table class="table-bordered">
112
- <thead>
113
- <tr>
114
- {% for column in columns %}
115
- <th>{{ column }}</th>
116
- {% endfor %}
117
- </tr>
118
- </thead>
119
- <tbody>
120
- {% for row in data %}
121
- <tr>
122
- {% for column in columns %}
123
- <td>{{ row[column] }}</td>
124
- {% endfor %}
125
- </tr>
126
- {% endfor %}
127
- </tbody>
128
- </table>
129
- </div>
130
-
131
- </body>
132
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Title</title>
6
+
7
+ <style>
8
+
9
+ .outer-box {
10
+ position: relative; /* Necessary for positioning relative to this element */
11
+ display: inline-block; /* Make the outer box inline-block to allow positioning relative to it */
12
+ padding: 5px 10px;
13
+ border: 1px solid white;
14
+ margin-left: 350px;
15
+ margin-bottom: 5px;
16
+ border-radius: 30px; /* Add rounded corners */
17
+ }
18
+ body{
19
+ background: linear-gradient(135deg, #1a1b2d, #2c3e50, #34495e, #3b3f73);
20
+ width: 1480px; /* Set width to 1480 pixels */
21
+ min-height: 100vh; /* Ensure body is at least the height of the viewport */
22
+ padding: 15px;
23
+ }
24
+
25
+ #docs a {
26
+ width: 400px;
27
+ margin:20px;
28
+ padding: 40px;
29
+ height: 30px;
30
+ display: block;
31
+ border-radius: 10px; /* Adjust the value for more or less roundness */
32
+ color: white;
33
+ text-decoration: none;
34
+ padding: 5px 16px;
35
+ }
36
+
37
+ #docs a:hover {
38
+ color: white;
39
+ background-color: #0d6efd;
40
+ }
41
+
42
+ .table-container {
43
+ overflow-x: auto;
44
+ max-width: 100%;
45
+ }
46
+
47
+ table {
48
+ border-collapse: collapse;
49
+ width: auto;
50
+ white-space: nowrap;
51
+ }
52
+
53
+ table, th, td {
54
+ border: 2px solid White;
55
+ padding: 8px;
56
+ }
57
+ </style>
58
+
59
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
60
+
61
+ </head>
62
+
63
+ <body class="text-light">
64
+ <div class="outer-box"><h1> WBC's Object Detection Using YOLO 11 </h1> </div>
65
+
66
+ <br>
67
+ <ul class="nav nav-pills">
68
+ <li class="link-primary">
69
+ <a class="nav-link " aria-current="page" href="/index">Home</a>
70
+ </li>
71
+ <li class="link-primary">
72
+ <a class="nav-link" href="/wbc_info">WBC's Info</a>
73
+ </li>
74
+ <li class="link-primary">
75
+ <a class="nav-link active" href="/document">Documentations</a>
76
+ </li>
77
+ </ul>
78
+
79
+ <br>
80
+
81
+ <h2>Here are links to the project's key components:</h2>
82
+ <nav id="docs">
83
+ <ul>
84
+ <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>
85
+ <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>
86
+ <li><a href="https://github.com/Saurabh-Maulekhi/WBCs-s-Object-Detectionn" target="_blank" rel="noopener noreferrer"><b>Github Repo</b></a></li>
87
+ <li><a href="https://www.kaggle.com/models/saurabhmaulekhi/wbc_detection_with_yolo11" target="_blank" rel="noopener noreferrer"><b> Model Download</b></a></li>
88
+ </ul>
89
+ </nav>
90
+
91
+ <br>
92
+ <h2>Detailed Epoch Training Metrics and Performance:</h2>
93
+ <br> <br>
94
+ <!-- getting image from th github repo-->
95
+ <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">
96
+ <br> <br>
97
+ <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">
98
+ <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">
99
+
100
+ <br> <br>
101
+ <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">
102
+ <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">
103
+
104
+ <br> <br> <br>
105
+
106
+ <h3><u>Training Table:</u></h3>
107
+
108
+ <br><br>
109
+
110
+ <div class="table-container">
111
+ <table class="table-bordered">
112
+ <thead>
113
+ <tr>
114
+ {% for column in columns %}
115
+ <th><b>{{ column }}</b></th>
116
+ {% endfor %}
117
+ </tr>
118
+ </thead>
119
+ <tbody>
120
+ {% for row in data %}
121
+ <tr>
122
+ {% for column in columns %}
123
+ <td>{{ row[column] }}</td>
124
+ {% endfor %}
125
+ </tr>
126
+ {% endfor %}
127
+ </tbody>
128
+ </table>
129
+ </div>
130
+
131
+ </body>
132
  </html>