ParkTrack Labeler

Веб-инструмент для разметки парковочных зон и отдельных мест по кадрам с камер.
Предназначен для разработчиков: минимум подтверждений, все запросы логируются в правой панели, JSON можно сразу копировать в бэкенд.

---

Функционал

• Загрузка кадра:
  • по Camera ID через API;
  • по URL;
  • локальным файлом.
• Разметка ParkingZones с атрибутами:
  • name, zone_type, capacity, pay.
• Разметка ParkingLots внутри зоны.
• Редактирование вершин перетаскиванием.
• Request Log: показывает каждый запрос/ответ (включая заголовки; токен маскируется).

При сохранении зона нормализуется: capacity = lots.length.

---

Стек

• React + TypeScript + Vite
• react-konva — отрисовка на Canvas
• zustand — состояние

---

Установка и запуск

# Node 18+
npm i
npm run dev
# откроется http://localhost:5173

Использование

1. В верхней панели задайте:

• API Base,

• Token (отправляется как Authorization: Bearer ),

• Camera ID → нажмите «Загрузить по Camera ID», либо укажите Image URL и нажмите «Открыть», либо выберите файл.

2. Нажмите «+ Добавить зону», при необходимости двигайте вершины.

3. Заполните поля зоны (zone_type, pay, capacity).

4. Нажмите «+ Добавить лот» и кликните 3+ точки на изображении, затем «Завершить лот».

5. «Сохранить зону (POST/PUT)» — справа в Request Log увидите JSON и заголовки запроса.

6. «Загрузить зоны (GET)» подтянет зоны для указанной камеры (если API отвечает).