트레드 그루브 오버레이

curl -X POST https://api.atrace.ai/v2/tire/tread \
  -H "Authorization: Bearer $ATRACE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "analysis_function": ["aggregated_depth", "individual_depths", "tire_rotation", "vehicle_side", "groove_masks", "tread_roi"],
    "image_url": "https://docs.atrace.ai/samples/tire/tread-b-4mm.jpg"
  }'

{
  "data": {
    "aggregated_depth": { "aggregated_remaining_depth": 5.3, "estimated_lifetime": 17 },
    "individual_depths": { "individual_remaining_depth": [5.0, 5.4, 5.6, 5.1] },
    "tire_rotation": 90,
    "vehicle_side": "right",
    "groove_masks": [
      { "depth_mm": 5.0, "score": 0.93, "polygon": [[0.0016, 0.7434], "…"] },
      { "depth_mm": 5.4, "score": 0.92, "polygon": [[0.0016, 0.6234], "…"] },
      { "depth_mm": 5.6, "score": 0.91, "polygon": [[0.0016, 0.5172], "…"] },
      { "depth_mm": 5.1, "score": 0.91, "polygon": [[0.0016, 0.4009], "…"] }
    ],
    "tread_roi": { "bbox_xyxy_norm": [0.0013, 0.1625, 1.0, 0.925] }
  }
}

// map: 아래 구현 예시의 헬퍼 (회전 → 반전을 모두 적용한다)
const [a, b] = [[x1, y1], [x2, y2]].map(map);
const roi = [Math.min(a[0], b[0]), Math.min(a[1], b[1]), Math.max(a[0], b[0]), Math.max(a[1], b[1])];

<div id="tread"></div>
<script>
  // data     : POST /v2/tire/tread 응답의 data 객체
  // position : 호출자가 알고 있는 타이어 위치 (front_left · front_right · rear_left · rear_right)
  function renderTreadOverlay(container, imageUrl, data, position) {
    const img = new Image();
    img.onload = () => {
      const W = img.naturalWidth;
      const H = img.naturalHeight;
      const rot = data.tire_rotation || 0; // 0 · 90 · 180 · 270
      const side = data.vehicle_side;
      const isLeftTire = position.endsWith('_left');
      // ATRACE 표시 규칙: 바깥쪽 숄더가 차량 바깥쪽을 향하게 한다
      const mirror =
        side === 'left' || side === 'right'
          ? isLeftTire ? side === 'left' : side === 'right'
          : false;

      // 세운 뒤 크기: 90·270이면 가로세로가 바뀐다
      const swap = rot === 90 || rot === 270;
      const VW = swap ? H : W;
      const VH = swap ? W : H;

      // ① 회전 → ② 반전. transform은 오른쪽부터 적용되므로 문자열에서는 반전이 앞에 온다.
      const rotateT = rot
        ? `translate(${VW / 2} ${VH / 2}) rotate(${rot}) translate(${-W / 2} ${-H / 2})`
        : '';
      const mirrorT = mirror ? `translate(${VW} 0) scale(-1 1)` : '';
      const groupT = [mirrorT, rotateT].filter(Boolean).join(' ');

      // ATRACE 등급 A/B/C 3구간 (≥5 초록, 3 초과 5 미만 주황, ≤3 빨강)
      const color = (mm) =>
        mm == null ? '#94a3b8' : mm <= 3 ? '#ef4444' : mm < 5 ? '#f59e0b' : '#22c55e';

      // 라벨 위치용: 정규화 좌표를 세운 뒤 프레임으로 옮긴다 (회전 → 반전)
      const map = ([x, y]) => {
        const p =
          rot === 90 ? [1 - y, x] : rot === 180 ? [1 - x, 1 - y] : rot === 270 ? [y, 1 - x] : [x, y];
        return mirror ? [1 - p[0], p[1]] : p;
      };

      // 폴리곤이 비어 있는 그루브는 그리지 않되, 배열 인덱스는 그대로 유지한다
      const masks = (data.groove_masks || [])
        .map((m, index) => ({ ...m, index }))
        .filter((m) => m.polygon.length >= 3);
      const fs = Math.round(Math.min(VW, VH) * 0.04);

      const polygons = masks
        .map(
          (m) =>
            `<polygon points="${m.polygon.map(([x, y]) => `${x * W},${y * H}`).join(' ')}"
               fill="${color(m.depth_mm)}" fill-opacity="0.4"
               stroke="${color(m.depth_mm)}" stroke-width="${W * 0.003}"/>`,
        )
        .join('');

      // 라벨은 bbox 중심에 두되, 앞서 놓인 라벨과 실제로 겹칠 때만 위·아래로 번갈아 비켜 놓는다
      const placed = [];
      masks
        .map((m) => {
          const pts = m.polygon.map(map);
          const xs = pts.map((p) => p[0]);
          const ys = pts.map((p) => p[1]);
          const text = m.depth_mm == null ? '-' : `${m.depth_mm.toFixed(1)}mm`;
          return {
            x: ((Math.min(...xs) + Math.max(...xs)) / 2) * VW,
            y: ((Math.min(...ys) + Math.max(...ys)) / 2) * VH,
            w: text.length * fs * 0.62 + fs, // 글자 길이에 맞춘 배지 폭
            text,
          };
        })
        .sort((a, b) => a.x - b.x) // 배열 순서는 바깥쪽 → 안쪽이라 화면 x 순서와 다를 수 있다
        .forEach((label, i) => {
          const hits = (y) =>
            placed.some(
              (p) => Math.abs(label.x - p.x) < (label.w + p.w) / 2 && Math.abs(y - p.y) < fs * 1.5,
            );
          let y = label.y;
          for (const step of [0, 1, -1, 2, -2]) {
            const candidate = label.y + (i % 2 ? 1 : -1) * step * fs * 1.9;
            if (!hits(candidate)) {
              y = candidate;
              break;
            }
          }
          placed.push({ ...label, y });
        });

      const labels = placed
        .map(
          (l) => `<rect x="${l.x - l.w / 2}" y="${l.y - fs * 0.75}" width="${l.w}" height="${fs * 1.5}"
                    rx="${fs * 0.2}" fill="rgba(2,6,23,0.8)"/>
                  <text x="${l.x}" y="${l.y}" fill="#fff" font-size="${fs}" font-weight="700"
                    text-anchor="middle" dominant-baseline="central">${l.text}</text>`,
        )
        .join('');

      container.innerHTML = `
        <svg viewBox="0 0 ${VW} ${VH}" style="display:block;width:100%;height:auto">
          <g transform="${groupT}">
            <image href="${imageUrl}" width="${W}" height="${H}"/>
            ${polygons}
          </g>
          ${labels}
        </svg>`;
    };
    img.src = imageUrl;
  }

  // 사용 예
  fetch('https://docs.atrace.ai/samples/tire/analysis/tread-b-4mm.json')
    .then((r) => r.json())
    .then((body) =>
      renderTreadOverlay(
        document.getElementById('tread'),
        'https://docs.atrace.ai/samples/tire/tread-b-4mm.jpg',
        body.data,
        'front_right',
      ),
    );
</script>

/* θ = 90 · 270 — W, H는 원본 픽셀 크기 */
.wrap {
  position: relative;
  aspect-ratio: H / W; /* 회전 뒤 프레임 */
}
.wrap > .inner {
  position: absolute;
  inset: 0;
  margin: auto; /* 회전 전 크기의 박스를 래퍼 중앙에 */
  width: calc(100% * W / H);
  height: calc(100% * H / W);
  transform: scaleX(-1) rotate(θdeg); /* 순서는 그대로 */
}
/* θ = 0 · 180 이면 래퍼는 aspect-ratio: W / H 이고 크기 보정이 필요 없습니다 */