Перейти к содержанию

Гардероб

↑ Обзор функциональности

Обзор

Гардероб — ключе��ая функциональность приложения. Пользователь добавляет вещи по фотографии, ML-модель автоматически определяет категорию, цвет и сезон. Вещи отображаются сеткой с фильтрацией по слотам, категориям, цветам, сезонам и стилям.

Страницы модуля

Страница Маршрут Назнач��ние
WardrobePage /wardrobe Список всех вещей с фильтр��цией
AddItemSourcePage /add Выбор источника фото (камера / галер��я)
AddItemDetailsPage /add/details Форма атрибутов вещи + ML-предсказания
WardrobeItemPage /wardrobe/:itemId Детальная карточка вещи, редактирование, удаление

Sequence diagram: добавление вещи

sequenceDiagram
    participant U as Пользователь
    participant Source as AddItemSourcePage
    participant Dtls as AddItemDetailsPage
    participant Media as mediaApi
    participant ML as ML Pipeline
    participant Items as offlineItemsService
    participant DB as Backend

    U->>Source: Нажимает "Камера" / "Галерея"
    Source->>Source: Выбор файла через input[type=file]
    Source->>Dtls: navigate to /add/details with file state

    Note over Dtls, ML: Online-режим
    Dtls->>Media: mediaApi.upload(file, item_photo)
    Media->>ML: Сжатие + отправка на сервер
    ML-->>Media: id, url, predictions
    Media-->>Dtls: MediaUploadResponse

    Dtls->>Dtls: applyPredictions(predictions)
    Note over Dtls: Автозаполнение category, color, season, title

    U->>Dtls: Проверяет/корректирует поля
    U->>Dtls: Нажимает Добавить в гардероб
    Dtls->>Items: offlineItemsService.create(data, file)
    Items->>DB: POST /items
    DB-->>Items: Item
    Items-->>Dtls: Успех
    Dtls->>U: navigate to /wardrobe

Sequence diagram: просмотр и фильтрация гардероба

sequenceDiagram
    participant U as ��ользователь
    participant Page as WardrobePage
    participant Local as useLocalItems
    participant IDB as IndexedDB/API

    U->>Page: Открывает /wardrobe
    Page->>Local: useLocalItems({})
    Local->>IDB: Загрузка вещей (offline-first)
    IDB-->>Local: { items, total }
    Local-->>Page: Рендер сетки

    U->>Page: Выбирает фильтр "Верх" (slot_id=1)
    Page->>Page: setSlotId(1), useDebounce(400ms)
    Page->>Local: useLocalItems({ slot_id: 1 })
    Local->>IDB: Фильтрация
    IDB-->>Page: Отфильтрованные вещи

    U->>Page: Открывает BottomSheet "Фильтры"
    U->>Page: Выбирает категорию + цвет + сезон
    Page->>Local: useLocalItems({ category_id, color_id, season })
    Local-->>Page: Результат фильтрации

Диаграмма

ML-предсказания и маппинг атрибутов

ML-модель возвращает предсказания в формате англоязычных меток. Маппинг выполняется через config/attrMappings.ts:

  • articleTypeToCategoryName — English label → русское название категории (30 маппингов)
  • colourToColorName — English colour → русское название цвета (18 маппингов)
  • seasonToValue — English season → значение enum Season

Пороги уверенности: - ML_MIN_ARTICLE_TYPE_CONF = 0.4 — минимальная уверенность для подсказки категории - ML_MIN_BASE_COLOUR_CONF = 0.24 — минимальная уверенность для подсказки цвета

API-модули

// mediaApi (frontend/src/api/media.ts)
mediaApi.upload(file, kind)  // POST /media (multipart/form-data, сжатие до 896x896)
mediaApi.get(id)             // GET /media/:id

// itemsApi (frontend/src/api/items.ts)
itemsApi.list(params)        // GET /items
itemsApi.get(id)             // GET /items/:id
itemsApi.create(data)        // POST /items
itemsApi.update(id, data)    // PATCH /items/:id
itemsApi.delete(id)          // DELETE /items/:id

Навигация