Polish html

compute_prototype.py

@@ -284,6 +284,8 @@ def get_object_detection_props(
         "class_histogram": class_histogram.most_common(),
         "classes": [
             {
+                "id": "class"
+                + str(hash(class_name) % 1000000),  # TODO: Use a better ID.
                 "name": class_name,
                 "num_objects": class_data.num_objects,
                 "objects_per_image": class_data.objects_per_image.most_common(),

templates/report.html

@@ -7,7 +7,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <!-- Bootstrap CSS -->
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+  <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5/dist/flatly/bootstrap.min.css">
   <title>Lightly Insights</title>
 
@@ -97,7 +97,7 @@ <h3 class="card-titl mb-3">{{ image.raw.num_images }} Images</h4>
                       <td>12</td>
                     </tr>
                     <tr class="table-primary">
-                      <th scope="row">Avg objects per image</th>
+                      <th scope="row">Aveg objects per image</th>
                       <td>{{ "{0:.1f}".format(object_detection.num_objects / image.raw.num_images) }}</td>
                     </tr>
                   </tbody>
@@ -118,6 +118,10 @@ <h3 class="card-title mb-3">{{ object_detection.num_objects }} Objects</h4>
                       <th scope="row">Num classes</th>
                       <td>{{ object_detection.num_classes }}</td>
                     </tr>
+                    <tr class="table-secondary">
+                      <th scope="row">Avg objects per class</th>
+                      <td>{{ "{0:.1f}".format(object_detection.num_objects / object_detection.num_classes) }}</td>
+                    </tr>
                     <tr class="table-secondary">
                       <th scope="row">Avg images per class</th>
                       <td>{{ "{0:.1f}".format(image.raw.num_images / object_detection.num_classes) }}</td>
@@ -255,12 +259,55 @@ <h4 class="card-title">{{ object_detection.num_objects }} Objects</h4>
       </div>
     </div>
 
+    <!-- Class Insights -->
+
+    <div id="section-grid-layout" class="my-5">
+      <div class="card border-primary">
+        <h4 class="card-header">Class Insights</h4>
+        <div class="card-body">
+          <h4 class="card-title">{{ object_detection.num_classes }} Classes</h4>
+
+          <!-- Nav pills -->
+          <ul class="nav nav-pills">
+            {% for class in object_detection.classes %}
+              <li class="nav-item" role="presentation">
+                <a class="btn btn-outline-primary btn-sm m-1"  data-bs-toggle="tab" data-bs-target="#{{ class.id }}" href="#{{ class.id }}">
+                  {{ class.name }}&nbsp;&nbsp;<span class="badge bg-light rounded-pill">{{ class.num_objects }}</span>
+                </a>
+              </li>
+            {% endfor %}
+
+          </ul>
+
+          <!-- Tab panes -->
+          <div class="tab-content" id="myTabContent">
+            <div class="tab-pane fade active" id="class1" role="tabpanel">
+              <p>Content for Class 1...</p>
+            </div>
+            <div class="tab-pane fade" id="class2" role="tabpanel">
+              <p>Content for Class 2...</p>
+            </div>
+            <div class="tab-pane fade" id="class3" role="tabpanel">
+              <p>Content for Class 3...</p>
+            </div>
+
+            {% for class in object_detection.classes %}
+              <div class="tab-pane fade" id="{{ class.id }}" role="tabpanel">
+                <p>{{ class.num_objects }} objects of class {{ class.name }}</p>
+              </div>
+              {% endfor %}
+
+          </div>
+
+        </div>
+      </div>
+    </div>
+
 
   </div>
-  <!-- Optional JavaScript; choose one of the two! -->
-  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
-  <!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> -->
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Bootstrap Bundle -->
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
 </body>
 
 </html>