多クラス損傷セグメンテーション: 剥離・鉄筋露出・遊離石灰の検出＋比較スライダーUI＋PDF調書反映

- dacl10k(実橋梁点検データ)でYOLOv8s-segを24エポック学習した3クラスモデルを追加
- crack(既存)+damage(新規)の2段推論。モデル未配置環境はcrack-onlyに自動デグレード
- UI: 元画像/AI解析の比較スライダー・クラス別色分けマスク・信頼度タグ・面的損傷テーブル
- PDF: 表紙に面的損傷数、面的損傷テーブル、その5損傷図に⑦剥離・鉄筋露出/⑧漏水・遊離石灰
- モバイル: 表の横スクロール化とグリッドはみ出し修正

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

.dockerignore

@@ -14,3 +14,4 @@ docs/
 *.mov
 *.zip
 .DS_Store
+dataset/dacl_damage/

.gitignore

@@ -19,3 +19,7 @@ docs/
 # misc large/local-only files
 *.mov
 *.zip
+
+# dacl10k training data (local only)
+dataset/dacl_damage/
+yolov8s-seg.pt

app.py

@@ -141,16 +141,20 @@ def detect():
         label = name
 
     t0 = time.time()
-    _, ovp, cracks = R.analyze(path, tiled=tiled, out_dir=GEN, conf=conf)
+    _, ovp, cracks, damages = R.analyze(path, tiled=tiled, out_dir=GEN, conf=conf)
     dt = time.time() - t0
     total_len = sum(c["length"] for c in cracks)
+    import detect_damage_ml as DD
     return jsonify(
         label=label,
         ref=os.path.basename(path),  # name to pass back to /api/report
         overlay_url="/generated/" + os.path.basename(ovp) + f"?t={int(time.time())}",
         source_url=("/generated/uploads/" + os.path.basename(path)) if path.startswith(UPLOAD) else ("/dataset/" + label),
         cracks=_serialize(cracks),
-        summary=dict(count=len(cracks), total_len_px=round(total_len, 0),
+        damages=DD.serialize(damages),
+        damage_model=DD.available(),
+        summary=dict(count=len(cracks), damage_count=len(damages),
+                     total_len_px=round(total_len, 0),
                      mode=("tiled" if tiled else "fast"), seconds=round(dt, 2)),
     )
 
@@ -214,8 +218,8 @@ def make_report():
     # 画像を1回だけ解析（その5損傷図と写真台帳明細で共用 → 二重推論を避ける）
     sections = []
     for p in paths:
-        name, ovp, cracks = R.analyze(p, tiled=tiled, out_dir=GEN, conf=conf)
-        sections.append((name, ovp, cracks))
+        name, ovp, cracks, damages = R.analyze(p, tiled=tiled, out_dir=GEN, conf=conf)
+        sections.append((name, ovp, cracks, damages))
 
     uid = uuid.uuid4().hex[:8]
     map_pdf = os.path.join(GEN, f"rmap_{uid}.pdf")

models/damage_seg/best.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3b53a19c05e130f7f0798fcf60630f1b9d6b22eb65cc24cca0354f0dc4279bed
+size 23836596

src/detect_damage_ml.py

@@ -0,0 +1,103 @@
+"""
+Area-type damage segmentation (剥離 / 鉄筋露出 / 遊離石灰) with a YOLO-seg model
+fine-tuned on dacl10k (Spalling / ExposedRebars / Efflorescence).
+
+Runs alongside the crack model: cracks keep their thin-line pipeline in
+detect_2d_ml / report; this module contributes per-instance polygonal masks with
+class + confidence for the surface damages the crack model cannot represent.
+
+The model file is optional — deployments without it degrade to crack-only.
+"""
+import os
+import numpy as np
+import cv2
+
+_ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+MODEL_PATH = os.environ.get(
+    "DAMAGE_MODEL", os.path.join(_ROOT, "models", "damage_seg", "best.pt"))
+
+# class id (training order) -> ledger label / overlay BGR color
+CLASS_INFO = {
+    0: dict(key="spalling",      label="剥離",     color=(0, 122, 255)),    # orange
+    1: dict(key="exposed_rebars", label="鉄筋露出", color=(180, 60, 200)),   # purple
+    2: dict(key="efflorescence", label="遊離石灰", color=(200, 180, 40)),   # teal-blue
+}
+# 損傷種類番号（damage_map.DAMAGE_TYPES 準拠）: ⑦剥離・鉄筋露出 / ⑧漏水・遊離石灰
+CLASS_DAMAGE_NO = {"spalling": 7, "exposed_rebars": 7, "efflorescence": 8}
+
+_MODEL = [None]
+
+
+def available():
+    return os.path.isfile(MODEL_PATH)
+
+
+def _model():
+    if _MODEL[0] is None:
+        from ultralytics import YOLO
+        _MODEL[0] = YOLO(MODEL_PATH)
+    return _MODEL[0]
+
+
+def detect(bgr, conf=0.30):
+    """Return a list of per-instance damages on the (possibly resized) image:
+    [{key,label,conf,mask(bool HxW),area_px,cx,cy}] sorted by area desc."""
+    if not available():
+        return []
+    H, W = bgr.shape[:2]
+    # 640 = training imgsz; keeps CPU inference a few seconds on the demo Space
+    r = _model().predict(bgr, conf=conf, imgsz=640, verbose=False)[0]
+    out = []
+    if r.masks is None:
+        return out
+    for m, box in zip(r.masks.data.cpu().numpy(), r.boxes):
+        cid = int(box.cls[0])
+        info = CLASS_INFO.get(cid)
+        if info is None:
+            continue
+        mm = cv2.resize(m, (W, H), interpolation=cv2.INTER_NEAREST) > 0.5
+        area = int(mm.sum())
+        if area < 400:            # ignore speckle
+            continue
+        ys, xs = np.where(mm)
+        out.append(dict(key=info["key"], label=info["label"],
+                        conf=float(box.conf[0]), mask=mm, area_px=area,
+                        cx=int(xs.mean()), cy=int(ys.mean())))
+    out.sort(key=lambda d: d["area_px"], reverse=True)
+    return out
+
+
+def paint(vis, damages, alpha=0.45):
+    """Blend class-colored damage masks into `vis` (same blend ratio as cracks)
+    and stamp a small `ラベル 0.93` tag at each instance centroid."""
+    if not damages:
+        return vis
+    ov = vis.copy()
+    for d in damages:
+        ov[d["mask"]] = CLASS_INFO_BY_KEY[d["key"]]["color"]
+    vis = cv2.addWeighted(vis, 1 - alpha, ov, alpha, 0)
+    for d in damages:
+        tag = f"{d['key']} {d['conf']:.2f}"
+        (tw, th), _ = cv2.getTextSize(tag, cv2.FONT_HERSHEY_DUPLEX, 0.5, 1)
+        x = max(2, min(d["cx"] - tw // 2, vis.shape[1] - tw - 2))
+        y = max(th + 4, min(d["cy"], vis.shape[0] - 4))
+        cv2.rectangle(vis, (x - 3, y - th - 4), (x + tw + 3, y + 3), (30, 30, 30), -1)
+        cv2.putText(vis, tag, (x, y), cv2.FONT_HERSHEY_DUPLEX, 0.5,
+                    (255, 255, 255), 1, cv2.LINE_AA)
+    return vis
+
+
+CLASS_INFO_BY_KEY = {v["key"]: v for v in CLASS_INFO.values()}
+
+
+def serialize(damages, scale=None):
+    """JSON-safe rows for the API / ledger. scale = mm per px -> area in m2."""
+    rows = []
+    for i, d in enumerate(damages, 1):
+        area_m2 = (d["area_px"] * (scale ** 2) / 1e6) if scale else None
+        rows.append(dict(no=i, id=f"S-{i:03d}", key=d["key"], label=d["label"],
+                         damage_no=CLASS_DAMAGE_NO[d["key"]],
+                         conf=round(d["conf"], 2), area_px=d["area_px"],
+                         area_m2=(round(area_m2, 3) if area_m2 else None),
+                         cx=d["cx"], cy=d["cy"]))
+    return rows

src/detect_to_map.py

@@ -41,6 +41,36 @@ def summarize(cracks, scale, structure):
                 n=len(cracks), wmax_px=wmax_px, tot_len_px=tot_len_px)
 
 
+def damage_items(damages, scale):
+    """面的損傷(剥離/鉄筋露出/遊離石灰) -> 損傷図 callout の damages 配列。
+    同じ損傷種類番号はまとめて面積を合算する（⑦剥離・鉄筋露出 / ⑧漏水・遊離石灰）。"""
+    if not damages:
+        return []
+    import detect_damage_ml as DD
+    by_no = {}
+    for d in damages:
+        no = int(d.get("damage_no") or DD.CLASS_DAMAGE_NO.get(d.get("key"), 7))
+        by_no.setdefault(no, []).append(d)
+    items = []
+    for no, ds in sorted(by_no.items()):
+        area_px = sum(x["area_px"] for x in ds)
+        if scale:
+            dim = f"A={area_px * (scale ** 2) / 1e6:.2f}m2"
+        else:
+            dim = f"A={area_px}px2・要校正"
+        # 面的損傷の損傷度は写真からの自動確定が難しい -> 区分は「?」で診断員判断
+        items.append({"type": no, "grade": "?", "dim": dim})
+    return items
+
+
+def _dm_note(dms):
+    if not dms:
+        return ""
+    import damage_map as DM
+    names = "・".join(DM.DAMAGE_TYPES.get(d["type"], "") for d in dms)
+    return f"／{names}あり"
+
+
 def build(bridge, assignments, scale=DEMO_SCALE_MM_PER_PX, notes=None,
           ncols=4, tiled=True):
     """assignments を検出→要約。損傷図 data・サマリー・写真台帳エントリを返す。
@@ -49,22 +79,28 @@ def build(bridge, assignments, scale=DEMO_SCALE_MM_PER_PX, notes=None,
     for i, a in enumerate(assignments):
         sc = a.get("scale", scale)
         struct = a.get("structure", "RC")
-        name, ov, cracks = R.analyze(a["image"], tiled=tiled)
+        name, ov, cracks, damages = R.analyze(a["image"], tiled=tiled)
         s = summarize(cracks, sc, struct)
         photo_no = a.get("photo", f"{i+1:02d}")
         dtype = a.get("type", 11 if a["member"].startswith("床版") else 6)
-        if s is None:
+        dms = damage_items(damages, sc)
+        if s is None and not dms:
             summary.append((a["member"], name, 0, None, "検出なし"))
             continue
-        dm = {"type": dtype, "grade": s["grade"] or "?", "dim": s["dim"]}
+        items = ([{"type": dtype, "grade": s["grade"] or "?", "dim": s["dim"]}]
+                 if s else []) + dms
         callouts.append(dict(
             anchor=a["anchor"], label_at=a.get("label_at"),
-            items=[{"member": a["member"], "damages": [dm]}],
+            items=[{"member": a["member"], "damages": items}],
             photo=photo_no, align=a.get("align", "left"), size=a.get("size", 2.4)))
-        summary.append((a["member"], name, s["n"], s["grade"], s["dim"]))
+        summary.append((a["member"], name, (s["n"] if s else 0),
+                        (s["grade"] if s else None),
+                        (s["dim"] if s else "") + _dm_note(dms)))
         # 写真台帳エントリ（番号付きオーバーレイ画像を使う）
-        photos.append(dict(photo=photo_no, member=a["member"], type=dtype,
-                           grade=s["grade"] or "?", dim=s["dim"], image=ov,
+        photos.append(dict(photo=photo_no, member=a["member"],
+                           type=(dtype if s else dms[0]["type"]),
+                           grade=(s["grade"] or "?") if s else "?",
+                           dim=(s["dim"] if s else dms[0]["dim"]), image=ov,
                            span=bridge.get("span", "")))
     data = dict(bridge=bridge, ncols=ncols, callouts=callouts,
                 notes=notes or [])
@@ -87,23 +123,31 @@ def build_from_sections(bridge, sections, scale=DEMO_SCALE_MM_PER_PX,
        /api/report 用: 部材名・パネル位置を未指定なら自動割当する（再解析しない）。
        戻り: (data, summary, photos)"""
     callouts, summary, photos = [], [], []
-    for i, (name, ov, cracks) in enumerate(sections):
+    for i, sec in enumerate(sections):
+        name, ov, cracks = sec[0], sec[1], sec[2]
+        damages = sec[3] if len(sec) > 3 else []
         member = (members[i] if members and i < len(members) and members[i]
                   else "（部材未記入）")
         dtype = 11 if member.startswith("床版") else 6
         photo_no = f"{i+1:02d}"
         anchor = _auto_anchor(i, ncols)
         s = summarize(cracks, scale, structure)
-        if s is None:
+        dms = damage_items(damages, scale)
+        if s is None and not dms:
             summary.append((member, name, 0, None, "検出なし"))
             continue
-        dm = {"type": dtype, "grade": s["grade"] or "?", "dim": s["dim"]}
+        items = ([{"type": dtype, "grade": s["grade"] or "?", "dim": s["dim"]}]
+                 if s else []) + dms
         callouts.append(dict(anchor=anchor, label_at=None,
-            items=[{"member": member, "damages": [dm]}],
+            items=[{"member": member, "damages": items}],
             photo=photo_no, align="left", size=2.4))
-        summary.append((member, name, s["n"], s["grade"], s["dim"]))
-        photos.append(dict(photo=photo_no, member=member, type=dtype,
-            grade=s["grade"] or "?", dim=s["dim"], image=ov,
+        summary.append((member, name, (s["n"] if s else 0),
+                        (s["grade"] if s else None),
+                        (s["dim"] if s else "") + _dm_note(dms)))
+        photos.append(dict(photo=photo_no, member=member,
+            type=(dtype if s else dms[0]["type"]),
+            grade=(s["grade"] or "?") if s else "?",
+            dim=(s["dim"] if s else dms[0]["dim"]), image=ov,
             span=bridge.get("span", "")))
     data = dict(bridge=bridge, ncols=ncols, callouts=callouts, notes=notes or [])
     return data, summary, photos

src/report.py

@@ -114,8 +114,12 @@ def crack_metrics(comp, gray):
                 area=core_area, cx=cx, cy=cy)
 
 
-def analyze(path, tiled=True, out_dir=OUT, conf=0.15):
+def analyze(path, tiled=True, out_dir=OUT, conf=0.15, with_damage=True):
+    """Detect thin cracks (line pipeline) + area damages (剥離/鉄筋露出/遊離石灰).
+    Returns (name, overlay_path, cracks, damages). Older 3-tuple callers keep
+    working via the Sections helper below."""
     from detect_2d_ml import infer_whole
+    import detect_damage_ml as DD
     bgr = cv2.imread(path); H, W = bgr.shape[:2]
     s = min(1.0, 1600 / max(H, W))
     if s < 1: bgr = cv2.resize(bgr, (int(W*s), int(H*s)))
@@ -132,9 +136,12 @@ def analyze(path, tiled=True, out_dir=OUT, conf=0.15):
     for k, c in enumerate(cracks, 1):
         c["id"] = f"C-{k:03d}"; c["no"] = k
 
-    # numbered overlay (badge shows the sequential No., centered)
+    damages = DD.detect(bgr) if (with_damage and DD.available()) else []
+
+    # overlay: crack mask in red + class-colored damage masks, then instance tags
     ov = bgr.copy(); ov[mask > 0] = (0, 0, 255)
     vis = cv2.addWeighted(bgr, 0.55, ov, 0.45, 0)
+    vis = DD.paint(vis, damages)
     for c in cracks:
         t = str(c["no"]); r = 18 if len(t) >= 2 else 15
         cv2.circle(vis, (c["cx"], c["cy"]), r, (255, 255, 255), -1)
@@ -146,7 +153,7 @@ def analyze(path, tiled=True, out_dir=OUT, conf=0.15):
     os.makedirs(out_dir, exist_ok=True)
     ovp = os.path.join(out_dir, f"rep_{name}.png")
     cv2.imwrite(ovp, vis)
-    return name, ovp, cracks
+    return name, ovp, cracks, damages
 
 
 def fmt_mm(px, scale=None):
@@ -182,6 +189,7 @@ def build_pdf(sections, out_pdf=PDF, scale=None, meta=META):
     el = []
     total = sum(len(s[2]) for s in sections)
     total_len = sum(c["length"] for s in sections for c in s[2])
+    all_damages = [d for s in sections for d in (s[3] if len(s) > 3 else [])]
 
     # per-section worst grade -> overall bridge health (worst member governs)
     def section_grade(cracks):
@@ -192,8 +200,8 @@ def build_pdf(sections, out_pdf=PDF, scale=None, meta=META):
         order = "ABCDE"
         return max(grades, key=lambda g: order.index(g)) if grades else None
     worst = None
-    for _, _, cr in sections:
-        g = section_grade(cr)
+    for sec in sections:
+        g = section_grade(sec[2])
         if g and (worst is None or "ABCDE".index(g) > "ABCDE".index(worst)):
             worst = g
     health = GRADE_TO_HEALTH[worst] if worst else None
@@ -214,6 +222,7 @@ def build_pdf(sections, out_pdf=PDF, scale=None, meta=META):
              ["点検日", meta["date"]], ["点検者", meta["inspector"]],
              *([["検出モード", meta["mode"]]] if meta.get("mode") else []),
              ["検出ひび総数", f"{total} 本"],
+             ["面的損傷（剥離・鉄筋露出／遊離石灰）", f"{len(all_damages)} 箇所" if all_damages else "検出なし"],
              ["ひび総延長（損傷寸法）", len_txt],
              ["最大損傷度区分", (f"{worst}（{GRADE_NAME[worst]}）" if worst else "—（要校正）")],
              ["健全性の診断（目安）", health_txt]]
@@ -240,7 +249,9 @@ def build_pdf(sections, out_pdf=PDF, scale=None, meta=META):
     el += [PageBreak()]
 
     hdr = ["No.", "ひびID", "長さ(px)", "長さ(mm)", "最大幅(px)", "幅(mm)", "損傷度"]
-    for name, ovp, cracks in sections:
+    for sec in sections:
+        name, ovp, cracks = sec[0], sec[1], sec[2]
+        damages = sec[3] if len(sec) > 3 else []
         sgrade = section_grade(cracks)
         shealth = GRADE_TO_HEALTH[sgrade] if sgrade else None
         head = f"損傷図：{name}"
@@ -280,7 +291,37 @@ def build_pdf(sections, out_pdf=PDF, scale=None, meta=META):
             note = "ひび1本のため最小間隔は評価対象外（区分は「間隔大」として算定）"
         else:
             note = "損傷度・健全性はスケール(mm/px)入力後に算出されます"
-        el += [tb, Spacer(1, 2*mm), Paragraph(note, small), Spacer(1, 6*mm), PageBreak()]
+        el += [tb, Spacer(1, 2*mm), Paragraph(note, small)]
+
+        # 面的損傷（剥離・鉄筋露出／遊離石灰）: AI検出の一次データ。損傷度区分は
+        # 写真のみでは確定できないため空欄（診断員判断）とし、面積と信頼度を記載
+        if damages:
+            import detect_damage_ml as DD
+            drows = [["No.", "損傷ID", "損傷種類", "面積(px²)", "面積(m²)", "AI信頼度"]]
+            for r in DD.serialize(damages, scale=scale):
+                drows.append([str(r["no"]), r["id"],
+                              f"{r['damage_no']} {r['label']}",
+                              f"{r['area_px']:,}",
+                              (f"{r['area_m2']:.3f}" if r["area_m2"] else "—（要校正）"),
+                              f"{r['conf']:.2f}"])
+            dtb = Table(drows, colWidths=[10*mm, 22*mm, 40*mm, 26*mm, 30*mm, 24*mm],
+                        repeatRows=1)
+            dtb.setStyle(TableStyle([
+                ("FONTNAME", (0, 0), (-1, -1), "HeiseiKakuGo-W5"),
+                ("FONTSIZE", (0, 0), (-1, -1), 8.5),
+                ("BACKGROUND", (0, 0), (-1, 0), colors.HexColor("#5c3a1a")),
+                ("TEXTCOLOR", (0, 0), (-1, 0), colors.white),
+                ("ROWBACKGROUNDS", (0, 1), (-1, -1), [colors.white, colors.HexColor("#faf6f2")]),
+                ("GRID", (0, 0), (-1, -1), 0.4, colors.HexColor("#cccccc")),
+                ("ALIGN", (3, 0), (-1, -1), "CENTER"),
+                ("VALIGN", (0, 0), (-1, -1), "MIDDLE"),
+                ("TOPPADDING", (0, 0), (-1, -1), 4), ("BOTTOMPADDING", (0, 0), (-1, -1), 4)]))
+            el += [Spacer(1, 4*mm),
+                   Paragraph("面的損傷（AI検出・一次データ）", h2), Spacer(1, 2*mm), dtb,
+                   Spacer(1, 2*mm),
+                   Paragraph("※損傷度区分は面的損傷では写真のみで確定できないため記載しない（診断員判断）。"
+                             "面積はマスク画素数×スケール²による概算。", small)]
+        el += [Spacer(1, 6*mm), PageBreak()]
 
     doc.build(el)
     print("PDF ->", out_pdf)
@@ -291,8 +332,7 @@ def generate(image_paths, out_pdf=PDF, scale=None, tiled=True, out_dir=OUT, meta
     """Analyze images and build a report PDF. Returns the PDF path."""
     sections = []
     for f in image_paths:
-        name, ovp, cracks = analyze(f, tiled=tiled, out_dir=out_dir, conf=conf)
-        sections.append((name, ovp, cracks))
+        sections.append(analyze(f, tiled=tiled, out_dir=out_dir, conf=conf))
     return build_pdf(sections, out_pdf=out_pdf, scale=scale, meta=meta)
 
 

src/resume_damage.py

@@ -0,0 +1,14 @@
+"""Resume damage_seg training from the last checkpoint, then deploy best.pt.
+Launched detached (nohup + caffeinate) so it survives the editor session."""
+import os, shutil
+from ultralytics import YOLO
+
+ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+last = os.path.join(ROOT, "runs", "damage_seg", "weights", "last.pt")
+model = YOLO(last)
+model.train(resume=True)
+best = os.path.join(ROOT, "runs", "damage_seg", "weights", "best.pt")
+dst = os.path.join(ROOT, "models", "damage_seg", "best.pt")
+os.makedirs(os.path.dirname(dst), exist_ok=True)
+shutil.copy2(best, dst)
+print("deployed ->", dst)

src/train_damage.py

@@ -0,0 +1,25 @@
+"""Fine-tune YOLOv8s-seg on dacl10k (spalling / exposed_rebars / efflorescence).
+
+Dataset is built by the one-off prep script (see 作業記録): dacl10k FiftyOne
+polylines -> YOLO-seg labels under dataset/dacl_damage/. Trains on Apple MPS.
+Deployed weights go to models/damage_seg/best.pt (read by detect_damage_ml).
+"""
+import os, shutil
+from ultralytics import YOLO
+
+ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+DATA = os.path.join(ROOT, "dataset", "dacl_damage", "data.yaml")
+
+def main():
+    model = YOLO("yolov8s-seg.pt")
+    model.train(data=DATA, epochs=24, imgsz=640, batch=8, device="mps",
+                project=os.path.join(ROOT, "runs"), name="damage_seg",
+                patience=8, workers=4, cos_lr=True, plots=False)
+    best = os.path.join(ROOT, "runs", "damage_seg", "weights", "best.pt")
+    dst = os.path.join(ROOT, "models", "damage_seg", "best.pt")
+    os.makedirs(os.path.dirname(dst), exist_ok=True)
+    shutil.copy2(best, dst)
+    print("deployed ->", dst)
+
+if __name__ == "__main__":
+    main()

web/index.html

@@ -244,11 +244,25 @@
         <div id="placeholder" class="placeholder">
           <div class="ph-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"/><path d="M15.3 15.3L21 21"/></svg></div><p>ここに検出結果が表示されます</p>
         </div>
-        <img id="image" alt="" hidden />
+        <div id="cmpWrap" class="cmp-wrap" hidden>
+          <img id="image" alt="解析結果" />
+          <img id="imageBefore" alt="元画像" hidden />
+          <div id="cmpHandle" class="cmp-handle" hidden><span class="cmp-grip"></span></div>
+          <span id="cmpTagL" class="cmp-tag l" hidden>元画像</span>
+          <span id="cmpTagR" class="cmp-tag r" hidden>AI解析</span>
+        </div>
         <div id="spinner" class="spinner" hidden><div class="ring"></div><span>解析中…</span></div>
       </div>
+      <div id="legend" class="legend" hidden>
+        <span class="lg"><i style="background:#e02020"></i>ひびわれ</span>
+        <span class="lg"><i style="background:#ff7a00"></i>剥離</span>
+        <span class="lg"><i style="background:#c83cb4"></i>鉄筋露出</span>
+        <span class="lg"><i style="background:#28b4c8"></i>遊離石灰</span>
+        <span class="lg muted" id="legendNote">マスク＝AI検出領域／数字＝ひびNo.／タグ＝損傷種類と信頼度</span>
+      </div>
       <div id="summary" class="summary" hidden>
         <div class="chip"><span class="k">検出ひび</span><span id="sCount" class="v">–</span></div>
+        <div class="chip"><span class="k">面的損傷</span><span id="sDamage" class="v">–</span></div>
         <div class="chip"><span class="k">総延長</span><span id="sLen" class="v">–</span></div>
         <div class="chip"><span class="k">最大損傷度</span><span id="sGrade" class="v">–</span></div>
         <div class="chip"><span class="k">健全性(目安)</span><span id="sHealth" class="v">–</span></div>
@@ -261,6 +275,16 @@
           </tr></thead>
           <tbody id="tbody"></tbody>
         </table>
+        <div id="dTableWrap" hidden>
+          <h2 class="dtable-head">面的損傷（剥離・鉄筋露出・遊離石灰）</h2>
+          <table class="ctable dtable">
+            <thead><tr>
+              <th>No.</th><th>損傷ID</th><th>損傷種類</th><th>面積(px²)</th><th>面積(m²)</th><th>AI信頼度</th>
+            </tr></thead>
+            <tbody id="dtbody"></tbody>
+          </table>
+          <p class="note">損傷の種類「⑦剥離・鉄筋露出」「⑧漏水・遊離石灰」。面的損傷の損傷度区分は写真のみでは確定できないため表示しません（診断員判断）。面積(m²)はスケール入力後に算出される概算値です。</p>
+        </div>
         <p class="note">損傷の種類「06 ひびわれ」（道路橋定期点検要領H31／熊本県マニュアル準拠）。損傷度A〜Eは <b>ひびわれ幅×最小間隔</b> で評価（RC：幅0.2/0.3mm・間隔0.5m／PC：0.1/0.2mm）。健全性Ⅰ〜Ⅳは最も厳しい損傷度からの<b>自動目安</b>で、最終判定は橋梁診断員が行います。mm・損傷度はスケール入力後に算出。貫通深さは2D写真では測定不可。PDF調書は検出時と同じモード（標準／高精度）で再解析して作成します。<b>生成したPDFは必ずダウンロード保存してください</b>（サーバ上のリンクは一定期間で無効になります）。</p>
       </div>
     </section>

web/static/app.js

@@ -1,5 +1,5 @@
 const $ = (id) => document.getElementById(id);
-const state = { sample: null, file: null, ref: null, cracks: [], selected: new Set() };
+const state = { sample: null, file: null, ref: null, cracks: [], damages: [], selected: new Set() };
 
 // 損傷図（その5）ヘッダの入力欄をまとめて payload 化する
 const bridgeFields = () => ({
@@ -165,6 +165,8 @@ $("batchReportBtn").onclick = async () => {
 function showSource(url, label) {
   const im = $("image");
   im.src = url; im.hidden = false;
+  $("cmpWrap").hidden = false;
+  compareOff();
   $("placeholder").hidden = true;
   $("stage").classList.remove("empty");
   $("title").textContent = label;
@@ -173,8 +175,45 @@ function showSource(url, label) {
   $("reportBtn").disabled = true;
   $("summary").hidden = true;
   $("tableWrap").hidden = true;
+  $("legend").hidden = true;
+  $("dTableWrap").hidden = true;
 }
 
+// ---------- before/after comparison slider ----------
+function compareOff() {
+  $("imageBefore").hidden = true;
+  $("cmpHandle").hidden = true;
+  $("cmpTagL").hidden = true;
+  $("cmpTagR").hidden = true;
+}
+function compareOn(beforeUrl) {
+  const b = $("imageBefore");
+  b.src = beforeUrl; b.hidden = false;
+  $("cmpHandle").hidden = false;
+  $("cmpTagL").hidden = false;
+  $("cmpTagR").hidden = false;
+  setCut(50);
+}
+function setCut(pct) {
+  pct = Math.max(0, Math.min(100, pct));
+  $("cmpWrap").style.setProperty("--cut", pct + "%");
+}
+(() => {
+  const wrap = $("cmpWrap");
+  let dragging = false;
+  const move = (clientX) => {
+    const r = wrap.getBoundingClientRect();
+    setCut(((clientX - r.left) / r.width) * 100);
+  };
+  wrap.addEventListener("pointerdown", (e) => {
+    if ($("cmpHandle").hidden) return;
+    dragging = true; wrap.setPointerCapture(e.pointerId); move(e.clientX);
+  });
+  wrap.addEventListener("pointermove", (e) => { if (dragging) move(e.clientX); });
+  wrap.addEventListener("pointerup", () => { dragging = false; });
+  wrap.addEventListener("pointercancel", () => { dragging = false; });
+})();
+
 // ---------- upload ----------
 const dz = $("dropzone"), fi = $("fileInput");
 dz.onclick = () => fi.click();
@@ -204,14 +243,18 @@ $("detectBtn").onclick = async () => {
     const r = await fetch("/api/detect", { method: "POST", body: fd });
     if (!r.ok) throw new Error("detect failed");
     const d = await r.json();
-    state.ref = d.ref; state.cracks = d.cracks;
+    state.ref = d.ref; state.cracks = d.cracks; state.damages = d.damages || [];
     window.markStep("view2d");
     if (window.LDD) window.LDD.touch({ crackCount: d.summary.count });
     $("image").src = d.overlay_url;
+    if (d.source_url) compareOn(d.source_url);
     $("title").textContent = d.label;
-    $("subtitle").textContent = `${d.summary.count} 本のひびを検出`;
+    const dmTxt = d.summary.damage_count ? `・面的損傷 ${d.summary.damage_count} 箇所` : "";
+    $("subtitle").textContent = `${d.summary.count} 本のひびを検出${dmTxt}（スライダーで元画像と比較できます）`;
+    $("legend").hidden = false;
     renderSummary(d.summary);
     renderTable();
+    renderDamageTable();
     $("reportBtn").disabled = false;
   } catch (e) {
     alert("検出に失敗しました: " + e.message);
@@ -223,10 +266,32 @@ $("detectBtn").onclick = async () => {
 
 function renderSummary(s) {
   $("sCount").textContent = s.count + " 本";
+  $("sDamage").textContent = (s.damage_count || 0) + " 箇所";
   $("sLen").textContent = Math.round(s.total_len_px).toLocaleString() + " px";
   $("summary").hidden = false;
 }
 
+const DAMAGE_NO_MARK = { 7: "⑦", 8: "⑧" };
+function renderDamageTable() {
+  const list = state.damages || [];
+  if (!list.length) { $("dTableWrap").hidden = true; return; }
+  const scale = parseFloat($("scale").value);
+  const hasScale = !isNaN(scale) && scale > 0;
+  const tb = $("dtbody");
+  tb.innerHTML = "";
+  list.forEach((d) => {
+    const m2 = hasScale ? ((d.area_px * scale * scale) / 1e6).toFixed(3) : "—（要校正）";
+    const tr = document.createElement("tr");
+    tr.innerHTML =
+      `<td><span class="badge dmg">${d.no}</span></td>` +
+      `<td>${d.id}</td>` +
+      `<td><span class="dm-${d.key}">${DAMAGE_NO_MARK[d.damage_no] || d.damage_no} ${d.label}</span></td>` +
+      `<td>${d.area_px.toLocaleString()}</td><td>${m2}</td><td>${d.conf.toFixed(2)}</td>`;
+    tb.appendChild(tr);
+  });
+  $("dTableWrap").hidden = false;
+}
+
 // ---------- official 06 ひびわれ grading (道路橋定期点検要領H31 / 熊本県) ----------
 const GRADE_NAME = { A: "良好", B: "ほぼ良好", C: "軽度", D: "顕著", E: "深刻" };
 const GRADE_TO_HEALTH = { A: "I", B: "II", C: "II", D: "III", E: "IV" };
@@ -296,7 +361,7 @@ function renderTable() {
   }
   $("tableWrap").hidden = false;
 }
-$("scale").oninput = () => { if (!$("tableWrap").hidden) renderTable(); };
+$("scale").oninput = () => { if (!$("tableWrap").hidden) { renderTable(); renderDamageTable(); } };
 $("structure").onchange = () => { if (!$("tableWrap").hidden) renderTable(); };
 $("conf").oninput = () => { $("confVal").textContent = parseFloat($("conf").value).toFixed(2); };
 

web/static/style.css

@@ -362,6 +362,9 @@ button:disabled{opacity:.45; cursor:not-allowed}
 
 /* ---- table ---- */
 .table-wrap{margin-top:20px}
+.table-wrap table{min-width:520px}
+.table-wrap, #dTableWrap{overflow-x:auto}
+.layout>.panel{min-width:0}
 .ctable{width:100%; border-collapse:collapse; font-size:13px}
 .ctable th{background:var(--navy); color:#fff; padding:9px 10px; text-align:center; font-weight:600; white-space:nowrap}
 .ctable th:nth-child(2),.ctable td:nth-child(2){text-align:left}
@@ -436,3 +439,34 @@ button:disabled{opacity:.45; cursor:not-allowed}
   #viewmap #m_image{max-width:100%; max-height:62vh; width:auto; height:auto; object-fit:contain}
   #viewmap #m_summary{flex:0 0 auto; margin-top:10px}
 }
+
+/* ---- before/after comparison slider (2D detection) ---- */
+.cmp-wrap{position:relative; --cut:50%; max-width:100%; line-height:0; touch-action:none;
+  display:inline-block}
+.cmp-wrap img{width:100%; max-width:100%; height:auto; display:block; max-height:64vh; object-fit:contain}
+#imageBefore{position:absolute; inset:0; height:100%;
+  clip-path:inset(0 calc(100% - var(--cut)) 0 0); pointer-events:none}
+.cmp-handle{position:absolute; top:0; bottom:0; left:var(--cut); width:2px;
+  background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.35); cursor:ew-resize}
+.cmp-grip{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
+  width:30px; height:30px; border-radius:50%; background:#fff;
+  box-shadow:0 1px 6px rgba(0,0,0,.4); cursor:ew-resize}
+.cmp-grip::before{content:"◂ ▸"; position:absolute; inset:0; display:grid;
+  place-items:center; font-size:10px; color:#334; letter-spacing:-1px}
+.cmp-tag{position:absolute; top:10px; padding:3px 9px; border-radius:6px;
+  font-size:11px; line-height:1.4; background:rgba(13,27,42,.72); color:#fff}
+.cmp-tag.l{left:10px}
+.cmp-tag.r{right:10px}
+
+/* ---- detection legend / damage table ---- */
+.legend{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center;
+  margin-top:10px; font-size:12px; color:var(--ink)}
+.legend .lg{display:inline-flex; align-items:center; gap:6px}
+.legend .lg i{width:12px; height:12px; border-radius:3px; display:inline-block}
+.legend .muted{color:var(--muted)}
+.dtable-head{font-size:14px; margin:18px 0 8px; color:#5c3a1a}
+.dtable thead th{background:#5c3a1a}
+.badge.dmg{background:#5c3a1a}
+.dm-spalling{color:#c95f00; font-weight:600}
+.dm-exposed_rebars{color:#a02c96; font-weight:600}
+.dm-efflorescence{color:#12808f; font-weight:600}