Как мини-игра из TikTok помогла нам решить производственную задачу и выиграть хакатон от «Магнита»

Всем привет! Меня зовут Илья, работаю UX/UI-дизайнером, учусь в МИСиС. Сегодня хотелось бы рассказать о довольно интересном кейсе, который нам вместе с командой удалось решить благодаря идее, абсолютно случайно подхваченной из «ТикТока». Но, давайте по порядку.

На минувших выходных проходил Magnetic Code Hackathon (онлайн хакатон от Магнита). Наша команда принимала участие в 4 треке "Приложение для оптимальной упаковки и визуализации размещения товара на палете".

Необходимо было решить задачу упаковки определенного количества коробок товара в тару так, чтобы объем тары использовался оптимально, т. е. товары лежали бы наиболее плотно. Цель — определить вариант с минимальной высотой всех скомплектованных коробок в таре. В результате расчета должна быть получена визуализация рассчитанного порядка расположения товара. На выходе необходима схема размещения коробок в таре, где каждая коробка имеет свое положение (с учетом возможных вращений) и порядковый номер загрузки в тару

Алгоритму на вход подается json-файл (поступает от WMS), а сам алгоритм нужно разместить на среднем слое, интерфейс взаимодействия с пользователем — в приложении.

Для реализации проекта мы собрали довольно опытную команду из студентов МИСиСа и Иннополиса, состоящих в клубе хакатонщиков ITAM, и уже неоднократно создававших цифровые продукты как для института, так и для сторонних компаний. Трое backend разработчиков на Java отвечали за разработку алгоритма, налаживание процесса сортировки и проработку системы парсинга json файла, приходящего от WMS. Frontend на Flutter занимался организацией отображения данных с бэкенда, а также творил чудеса с различными вариантами визуализации размещения коробок на палете (а за время хакатона у нас возникло целых 3 варианта отображения итогового результата, о чём расскажем чуть позже). Ну и автор поста корпел над проработкой удобного интерфейса, а также презентацией на питч проекта. В результате мы должны были получить кроссплатформенное мобильное приложение.

Соревнование длилось 4 дня, во время которых мы в сумме поспали часов 7. Отдельно хотелось бы поблагодарить организаторов за пару промокодов на 500 рублей в "Яндекс.Еда", они хорошо поддержали наш рабочий настрой.

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

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

Brute Force

Алгоритм полного перебора, генерирующий идеальное решение, но занимающий слишком много времени.

LVFF

Итеративный поиск самого объёмного объекта и установка в любое возможное место.

LAFF

Эвристический алгоритм, основанный на идее упаковки объектов с большой площадью в первую очередь.

А теперь перейдём к самой интересной части проекта. Как я уже упоминал ранее, за время хакатона у нас возникло целых 3 идеи того, как можно отобразить результат работы нашего алгоритма.

Полноценная 3D модель

Первой идеей было создать полноценную 3D модель получившегося расположения коробок на палете. Выглядеть это должно было примерно следующим образом

Однако при проработке данного варианта мы столкнулись с тем, что приложение невероятно сильно тормозило и довольно долго прогружало модельки. А для нас на первом мере стояла именно скорость работы, и то, насколько решение будет прикладным. Поэтому мы решили искать другие варианты.

Проекции

Второй идеей, которая пришла к нам в голову, стало создание четырёх проекций палеты, заполненной коробками. Выглядеть это должно было примерно следующим образом.

Данный вариант работал довольно быстро, однако ни о каком удобстве не могло идти и речи, так как в постоянно свайпать три проекции туда-сюда довольно противно, да и сложно для понимания.

Изометрия

И вот, когда мы оказалась в идейном тупике, было принято решение выделить пару часов времени на отдых. Как раз в это время младшая сестра одного из участников команды смотрела TikTok, и коллега, бросив взгляд на видеоряд, мелькавший на экране смартфона, с криками "Эврика", побежал рассказывать внезапно возникшую идею в дискорде своей, уже было отчаявшейся, команде.

Конечно! А почему бы не применить "ложное" 3D - изометрию? Таким образом, мы одновременно и сделаем визуализацию более понятной, и сохраним скорость работы приложения.

В результате у нас получился следующий концепт мобильного кроссплатформенного приложения.

Как видите, сотруднику будет легко увидеть необходимое расположение коробок, а пошаговый прогресс всегда позволяет вернуться назад и уточнить непонятные моменты. Так как в ТЗ допускалась возможность вращения коробок, то для определения стороны мы создали отдельную текстурку в виде линии разреза, которая обозначает верх. Также для большего удобства мы выводим название, габариты и тип товара, который в текущий момент "падает" на палету.

Особенно нас порадовала скорость работы алгоритма. Файл json, содержащий информацию о 56 коробках с товарами, он обработал всего за 3 секунды.

А здесь можете посмотреть, как мы презентовали наше решение перед членами жюри - сотрудниками Магнита и Яндекса. Если вас больше интересует именно техническая часть проекта, то лучше заглянуть сюда :)

#хакатоны #ITAM