Add advanced annotation style options and automatic dark mode UI support (update 17)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Update ke-17 - 2026-04-15
+- Tambah `Advanced Options` pada inferensi: pilih gaya anotasi `Border + Label` atau `Label saja`.
+- Opsi anotasi berlaku untuk semua model (YOLOv8n, Best.pt, dan mode perbandingan).
+- Tambah adaptasi UI dark mode otomatis via `prefers-color-scheme: dark`.
+- Minor update dinaikkan ke-17.
+
 ## Update ke-16 - 2026-04-15
 - Perbaikan error Gradio `IsADirectoryError: '/app'` pada output file training.
 - Output komponen `gr.File` di mode streaming kini mengirim `None` (bukan string kosong) saat file belum siap.

README.md

@@ -36,6 +36,8 @@ Versi ini difokuskan untuk tahap awal:
 - **Section 1 - Input & Proses**
   - input gambar (upload/webcam)
   - confidence threshold
+  - advanced options:
+    - gaya anotasi `Border + Label` atau `Label saja`
   - tombol proses
 - **Section 2 - Hasil Processing**
   - hasil gambar deteksi
@@ -53,6 +55,7 @@ Catatan:
 - input evaluasi batch dihapus.
 - training tersedia sebagai menu terpisah (accordion) di halaman yang sama.
 - input jumlah presensi belum digunakan pada versi ini.
+- UI otomatis menyesuaikan mode gelap perangkat (dark mode).
 
 ## File Penting
 

app.py

@@ -24,7 +24,7 @@ from ultralytics import YOLO
 CM_INIT = {"tp": 0, "fp": 0, "fn": 0, "tn": 0}
 EVAL_CLASSES = ["Sesuai", "Tidak Sesuai"]
 APP_VERSION = os.getenv("APP_VERSION", "v0.9.0")
-APP_MINOR_UPDATE = os.getenv("APP_MINOR_UPDATE", "16")
+APP_MINOR_UPDATE = os.getenv("APP_MINOR_UPDATE", "17")
 
 
 # Gradio/Spaces can trigger noisy asyncio cleanup traces ("Invalid file descriptor: -1")
@@ -108,7 +108,12 @@ def _resolve_person_class_id_from_names(names: Any) -> int:
     return 0
 
 
-def _annotate_person_instances(image_rgb: np.ndarray, result: Any, person_id: int) -> Tuple[np.ndarray, int]:
+def _annotate_person_instances(
+    image_rgb: np.ndarray,
+    result: Any,
+    person_id: int,
+    annotation_style: str,
+) -> Tuple[np.ndarray, int]:
     annotated = image_rgb.copy()
     if result.boxes is None:
         return annotated, 0
@@ -128,17 +133,29 @@ def _annotate_person_instances(image_rgb: np.ndarray, result: Any, person_id: in
     person_boxes.sort(key=lambda b: (b[1], b[0]))
 
     for idx, (x1, y1, x2, y2) in enumerate(person_boxes, start=1):
-        cv2.rectangle(annotated, (x1, y1), (x2, y2), (34, 197, 94), 2)
+        if annotation_style == "Border + Label":
+            cv2.rectangle(annotated, (x1, y1), (x2, y2), (34, 197, 94), 2)
         label = f"person {idx}"
         (tw, th), baseline = cv2.getTextSize(label, cv2.FONT_HERSHEY_SIMPLEX, 0.6, 2)
-        text_y1 = max(0, y1 - th - baseline - 6)
-        text_y2 = y1
-        text_x2 = min(annotated.shape[1], x1 + tw + 10)
-        cv2.rectangle(annotated, (x1, text_y1), (text_x2, text_y2), (34, 197, 94), -1)
+        if annotation_style == "Label saja":
+            label_x = max(0, min(x1, annotated.shape[1] - tw - 8))
+            label_y = max(th + 4, min(y1 + th + 4, annotated.shape[0] - 6))
+            text_y1 = max(0, label_y - th - baseline - 6)
+            text_y2 = min(annotated.shape[0], label_y + 2)
+            text_x1 = label_x
+            text_x2 = min(annotated.shape[1], label_x + tw + 10)
+            text_org = (label_x + 4, label_y - 4)
+        else:
+            text_y1 = max(0, y1 - th - baseline - 6)
+            text_y2 = y1
+            text_x1 = x1
+            text_x2 = min(annotated.shape[1], x1 + tw + 10)
+            text_org = (x1 + 4, max(14, y1 - 6))
+        cv2.rectangle(annotated, (text_x1, text_y1), (text_x2, text_y2), (34, 197, 94), -1)
         cv2.putText(
             annotated,
             label,
-            (x1 + 4, max(14, y1 - 6)),
+            text_org,
             cv2.FONT_HERSHEY_SIMPLEX,
             0.6,
             (0, 0, 0),
@@ -148,7 +165,12 @@ def _annotate_person_instances(image_rgb: np.ndarray, result: Any, person_id: in
     return annotated, len(person_boxes)
 
 
-def infer_image(image: np.ndarray, conf_threshold: float, model_choice: str) -> Tuple[np.ndarray, int]:
+def infer_image(
+    image: np.ndarray,
+    conf_threshold: float,
+    model_choice: str,
+    annotation_style: str,
+) -> Tuple[np.ndarray, int]:
     if image is None:
         raise ValueError("Silakan unggah gambar atau gunakan kamera.")
     model = load_model(model_choice)
@@ -161,7 +183,7 @@ def infer_image(image: np.ndarray, conf_threshold: float, model_choice: str) ->
         verbose=False,
     )[0]
     person_id = _resolve_person_class_id(result)
-    annotated, detected_count = _annotate_person_instances(image, result, person_id)
+    annotated, detected_count = _annotate_person_instances(image, result, person_id, annotation_style)
     return annotated, detected_count
 
 
@@ -242,12 +264,13 @@ def run_check_and_classify(
     attendance_count: float,
     model_choice: str,
     inference_mode: str,
+    annotation_style: str,
 ) -> Tuple[np.ndarray, str, np.ndarray, str, str]:
     try:
         attendance = int(attendance_count)
         if inference_mode == "Bandingkan (YOLOv8n vs Best.pt)":
-            ann_before, det_before = infer_image(image, conf_threshold, "YOLOv8n")
-            ann_after, det_after = infer_image(image, conf_threshold, "Best.pt")
+            ann_before, det_before = infer_image(image, conf_threshold, "YOLOv8n", annotation_style)
+            ann_after, det_after = infer_image(image, conf_threshold, "Best.pt", annotation_style)
             match_before = classify_match(det_before, attendance)
             match_after = classify_match(det_after, attendance)
             presence_before = classify_presence(det_before)
@@ -264,7 +287,7 @@ def run_check_and_classify(
             pred_md = f"Label prediksi validasi (Best.pt): **{match_after}**"
             return combined, summary, chart, match_after, pred_md
 
-        annotated, detected = infer_image(image, conf_threshold, model_choice)
+        annotated, detected = infer_image(image, conf_threshold, model_choice, annotation_style)
         status_presence = classify_presence(detected)
         status_match = classify_match(detected, attendance)
         summary = (
@@ -274,7 +297,8 @@ def run_check_and_classify(
             f"- Klasifikasi keberadaan: **{status_presence}**\n"
             f"- Validasi presensi: **{status_match}**\n"
             f"- Model digunakan: **{model_choice}**\n"
-            "- Label bounding box: **person 1, person 2, ...**"
+            f"- Gaya anotasi: **{annotation_style}**\n"
+            "- Label objek: **person 1, person 2, ...**"
         )
         chart = draw_detection_chart(detected)
         pred_md = f"Label prediksi validasi: **{status_match}**"
@@ -997,11 +1021,23 @@ CUSTOM_CSS = """
 .section-box {padding: 14px; border: 1px solid #d7dee8; border-radius: 10px; background: #ffffff;}
 .method-box {padding: 14px; border: 1px solid #c7d2e3; border-radius: 10px; background: #f8fbff;}
 .section-title {margin-bottom: 4px !important;}
+.hero-subtitle {text-align:center;color:#4a5568;margin-top:0;}
 .version-chip {
   display:inline-block; padding:4px 10px; border:1px solid #c7d2e3; border-radius:999px;
   font-size:12px; color:#334155; background:#f8fbff; margin-top:4px;
 }
 .version-foot {font-size:12px; color:#64748b; text-align:center; margin-top:8px;}
+.advanced-box {margin-top: 8px; padding: 8px; border: 1px dashed #cbd5e1; border-radius: 8px;}
+
+@media (prefers-color-scheme: dark) {
+  body, .gradio-container {background: #0f172a !important; color: #e2e8f0 !important;}
+  .section-box {background: #111827 !important; border-color: #334155 !important;}
+  .method-box {background: #0b1220 !important; border-color: #334155 !important;}
+  .hero-subtitle {color: #94a3b8 !important;}
+  .version-chip {background: #111827 !important; border-color: #475569 !important; color: #cbd5e1 !important;}
+  .version-foot {color: #94a3b8 !important;}
+  .advanced-box {border-color: #475569 !important;}
+}
 """
 
 
@@ -1009,7 +1045,7 @@ with gr.Blocks(title="Pengecekan dan Klasifikasi Mahasiswa - YOLOv8") as demo:
     gr.HTML(
         """
         <h1 style="text-align:center;margin-bottom:4px;">Pengecekan dan Klasifikasi Kehadiran Berbasis YOLOv8</h1>
-        <p style="text-align:center;color:#4a5568;margin-top:0;">
+        <p class="hero-subtitle">
             Implementasi klasifikasi kehadiran mahasiswa dalam ruang kelas berbasis citra menggunakan YOLOv8.
         </p>
         """
@@ -1057,6 +1093,13 @@ with gr.Blocks(title="Pengecekan dan Klasifikasi Mahasiswa - YOLOv8") as demo:
             minimum=0,
         )
         conf_input = gr.Slider(0.1, 1.0, value=0.25, step=0.05, label="Parameter Confidence (Deteksi)")
+        with gr.Accordion("Advanced Options", open=False, elem_classes=["advanced-box"]):
+            annotation_style = gr.Radio(
+                choices=["Border + Label", "Label saja"],
+                value="Border + Label",
+                label="Gaya anotasi objek",
+                info="Pilih tampilan bbox atau label-only untuk person 1, person 2, ...",
+            )
         run_btn = gr.Button("Jalankan Deteksi dan Klasifikasi", variant="primary")
 
     with gr.Column(elem_classes=["section-box"]):
@@ -1119,7 +1162,7 @@ with gr.Blocks(title="Pengecekan dan Klasifikasi Mahasiswa - YOLOv8") as demo:
 
     run_btn_evt = run_btn.click(
         fn=run_check_and_classify,
-        inputs=[image_input, conf_input, attendance_input, model_choice, inference_mode],
+        inputs=[image_input, conf_input, attendance_input, model_choice, inference_mode, annotation_style],
         outputs=[output_image, class_result_md, comparison_chart, predicted_state, predicted_label_md],
     )
     run_btn_evt.then(