AI віртуальна примерка одягу у мобільних додатках
Віртуальна примерка—накладання одягу на фотографію або живе відео з камери. Звучить просто, але технічно включає сегментацію тіла, оцінку пози, деформацію текстури одягу під анатомію конкретної людини та реалістичне освітлення. Жодна з цих частин не тривіальна окремо.
Два режими: фото та real-time AR
Фото-примерка—користувач завантажує своє фото, вибирає одяг, отримує результат за кілька секунд. Вища якість, важчі моделі, серверний інференц виправданий.
Real-time AR—камера в реальному часі, одяг «надіт» прямо на превью. Суворий бюджет 30+ fps. На пристрої—лише легкі моделі або mesh-based через pose estimation.
Архітектура фото-примерки
Конвеєр складається з чотирьох етапів:
- Human parsing—сегментуємо частини тіла (верх, низ, рукави, комір, фон). Моделі: Self-Correction Human Parsing (SCHP), CDGNet.
- Pose estimation—17–33 ключові точки тіла. MediaPipe Pose на пристрої, OpenPose на сервері.
- Warping—деформуємо зображення одягу під позу та форму тіла. TPS (Thin Plate Spline) warping на основі відповідностей ключових точок.
- Try-on synthesis—фінальна генерація з врахуванням тіней, складок, освітлення. Моделі: VITON-HD, HR-VITON, LaDI-VTON.
На мобілі етапи 1 та 2—on-device (MediaPipe), етапи 3–4—на сервері.
On-device: поза та парсинг через MediaPipe
// MediaPipe Pose Landmarker
let options = PoseLandmarkerOptions()
options.baseOptions.modelAssetPath = Bundle.main.path(forResource: "pose_landmarker_full", ofType: "task")!
options.numPoses = 1
options.minPoseDetectionConfidence = 0.5
options.minPosePresenceConfidence = 0.5
options.minTrackingConfidence = 0.5
let poseLandmarker = try PoseLandmarker(options: options)
// З фото
let mpImage = try MPImage(uiImage: sourcePhoto)
let result = try poseLandmarker.detect(image: mpImage)
// result.landmarks[0]—масив 33 NormalizedLandmark
// Ключові точки: LEFT_SHOULDER (11), RIGHT_SHOULDER (12), LEFT_HIP (23), RIGHT_HIP (24)
Human parsing на пристрої—через конвертовану у Core ML/TFLite модель SCHP. ~15 MB після квантизації. На iPhone 13—300–500 мс для зображення 512×512.
// Android: human parsing через TFLite
val interpreter = Interpreter(
FileUtil.loadMappedFile(context, "schp_parsing.tflite"),
Interpreter.Options().apply { addDelegate(GpuDelegate()) }
)
val input = Array(1) { Array(512) { Array(512) { FloatArray(3) } } }
val output = Array(1) { Array(512) { Array(512) { FloatArray(20) } } } // 20 класів
interpreter.run(input, output)
// output[0][y][x]—вектор вірогідностей для кожного класу (upper-body, lower-body, etc.)
Серверна примерка: HR-VITON
HR-VITON—state-of-the-art для фото-примерки, працює з дозволом до 1024×768. Приймає: фото людини + фото одягу (білий фон або з маскою) + human parsing маску + позу.
Серверна API (FastAPI + PyTorch):
@app.post("/tryon")
async def virtual_tryon(
person_image: UploadFile,
clothing_image: UploadFile
):
person = load_image(await person_image.read())
clothing = load_image(await clothing_image.read())
# Parsing та поза—попередньо обчислені або вичисляємо тут
parse_map = run_human_parsing(person)
keypoints = run_pose_estimation(person)
# HR-VITON інференц
result = hrviton_model(person, clothing, parse_map, keypoints)
return StreamingResponse(image_to_bytes(result), media_type="image/jpeg")
Час генерації на A10 GPU—1.5–3 секунди. На CPU (тестування)—15–30 секунд.
Real-time AR: mesh-based підхід
Для real-time без важкого GAN—спрощений mesh warping:
- MediaPipe Pose в реальному часі (30+ fps on-device).
- Будуємо 2D-mesh тіла з ключових точок (трикутники через Delaunay триангуляцію).
- Деформуємо текстуру одягу на mesh через Metal.
// Metal vertex shader для warping одягу
vertex VertexOut clothingWarpVertex(
uint vid [[vertex_id]],
constant float2 *clothingUVs [[buffer(0)]], // UV координати на вихідному одязі
constant float2 *bodyPositions [[buffer(1)]] // Позиції на екрані (з pose landmarks)
) {
VertexOut out;
out.position = float4(bodyPositions[vid], 0, 1);
out.texCoord = clothingUVs[vid];
return out;
}
Якість значно нижча за GAN підхід: немає реалістичних складок, тіней, не враховує об'ємні форми тіла. Але працює 30 fps навіть на iPhone 11.
Управління каталогом одягу
Кожен елемент каталогу потребує спеціальної підготовки: фото на білому фоні, маска силуету, категорія (upper, lower, dress). Контентний конвеєр: завантаження → auto-сегментація через RemBG → валідація маски → CDN сховище.
Мобільний додаток завантажує лише превью-зображення (стиснені JPEG), повні дані для примерки передаються сервери напрямку.
Процес
Аудит каталогу одягу та вимог до якості, вибір архітектури (фото vs AR), налаштування серверного конвеєру з HR-VITON або аналогом, on-device компоненти (поза, парсинг), UI потоку примерки, кеширування результатів.
Кошторис за часом
Фото-примерка з серверним інференцем, одна платформа займає 4–6 тижнів. Повна реалізація з AR real-time, обидві платформи, каталожний конвеєр вимагає 10–16 тижнів.