GradCit: AI фоторедактор — конкурс пет-проектов

Всем привет!

Меня зовут Виталий Монастырев и в статье расскажу о процессе разработки AI фоторедактора GradCit, который умеет дорисовывать фон, позволяет редактировать черты лица, может создавать стикеры, заменять небо на фото и многое другое.

Идея проекта

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

Мне всегда нравилось делать фотографии на смартфон и я задумался, что можно попробовать сделать свой фоторедактор. С одной стороны, фоторедакторов в магазинах приложений сейчас и так много, но с другой — идея создания простого фоторедактора не выглядит суперсложной и кажется вполне реализуемой. Кроме того, можно для начала добавить какие-нибудь базовые фильтры для MVP-версии и далее наращивать функционал.

Базовая архитектура

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

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

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

Базовая архитектура в моем случае выглядит следующим образом:

Пройдемся по компонентам:

• Client — приложение, которое запускается на устройстве пользователя. В моем случае в качестве клиентов выступают приложения для iOS, iPadOS и macOS. Первая версия создавалась исключительно под iPhone и использовался язык Swift. Предвижу вопрос, почему не использовались языки для кросс-разработки, чтобы писать одно приложение под iOS и Android. Меня всегда смущала производительность таких приложений и возможность использования новейших инструментов. Также на выбор в пользу нативного языка повлияло и наличие различных инструкций и туториалов.
• Backend server — набор API, который отвечает за общение с клиентским приложением. Включает в себя методы аутентификации, работы с базами данных и ML server’ом. Backend server реализован на Spring.
• ML server — включает в себя ресурсоемкие ML-расчеты, которые невозможно провести на устройстве пользователя. Так как большинство ML-алгоритмов работают на Python, то сервер был реализован на Flask.
• Kafka — была использована, чтобы отгружать в нее информацию об уведомлениях, которые необходимо выслать на устройства пользователей. Это могут быть уведомления о том, что кто-то оценил фотографию, подписался на профиль, оценил фотографию и другое.
• Notification server — занимается отправкой уведомлений на устройства. Данные об уведомлениях забираются из топика Kafka. Реализован также на Spring.
• Redis — хранит кэшированную информацию о недавних запросах в оперативной памяти. Это позволяет быстрее возвращать ответ клиенту.
• MySQL — выступает в роли основной базы данных для хранения информации. Скорее всего в дальнейшем придется переезжать на что-то другое, но пока она справляется.

Интерфейс

Первая версия приложения разрабатывалась исключительно под iPhone, поэтому интерфейс был не заточен под перевороты и масштабирование экрана. В связи с этим на оптимизацию под iPad и Mac ушло несколько месяцев. Необходимо было предусмотреть повороты экрана, режим Split View, а также другие пропорции экрана.

Пользователю на главном экране доступны следующие вкладки:

• Камера. Позволяет сделать или выбрать фото из галереи и перейти к его редактированию.

• Карта. Выложенные фото при желании можно отметить на карте мира, которая является общей для всех пользователей приложения. Более того, для таких фотографий становится доступен режим AR. Если его выбрать, то на экране в режиме навигатора появляется расстояние и направление до места съемки.

• Лента. Доступны вкладки «Новое», «Топ» и «Подписки». Во вкладке «Новое» отображаются последние публикации, которые набрали минимальный рейтинг; в «Топе= отображаются недавние публикации с сортировкой по рейтингу; в «Подписках» соответственно подписки.

• Поиск. Позволяет находить пользователей, либо записи по хэштегу.

• Профиль. Здесь отображаются опубликованные фотографии, отметки на карте и опубликованные текстовые записи.

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

Каждый ViewController потребляет определенное количество оперативной памяти и если не заняться этим вопросом, то через N-количество итераций приложение вылетет с ошибкой по памяти. Для решения данной проблемы я реализовал инструмент кэширования страниц. При переходе со страницы на страницу сохраняется информация о последовательности переходов и о вкладках, закрытая вкладка удаляется из стека контроллеров. Отображаемая информация сохраняется в кэш. Размер кэша в оперативной памяти ограничен, поэтому информация также сохраняется в постоянную память устройства. Для того чтобы работали свайпы переходов (когда мы пальцем тянем от края экрана слева направо, чтобы открыть предыдущую страницу), при открытии новой страницы формируется предыдущая.

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

Возможности редактора

В редакторе доступно множество самых разных инструментов. При их интеграции стояла задача того, как совместить их работу между собой. Для этого используется своеобразная логика стека, где каждый эффект применяется последовательно к изначальному фото. Расскажу подробнее про функционал, который доступен в редакторе.

• ИИ маска. Позволяет отметить область на экране и задать prompt для замены фона. Дорисовка происходит на стороне сервера, так как требуется достаточно большое количество вычислительных ресурсов.

• Маска. Позволяет удалить лишний объект с фото. Для маски доступна возможность запуска модели прямо на смартфоне (при помощи Core ML), но при этом страдает качество изображения, поэтому пока модель работает также на сервере.

• Редактор лица. В данном режиме приложение распознает лица на фото и определяет отдельные элементы: глаза, губы, нос, рот и прочее. Далее происходит обработка с определенными элементами. Это может быть как добавление искажения поверх изображения, так и наложение фильтра.

• Замена неба. Инструмент определяет небо на фотографии и позволяет заменить его на выбранное изображение. Для большей реалистичности на фото накладывается дополнительный фильтр.

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

• Замена фона. Модель машинного обучения автоматически определяет основной объект на фото и заменяет фон на выбранный.

• А также! Инструменты рисования, множество самых разных фильтров, HLS-настройка, рамки и многое другое.

Заключение

В статье я постарался описать общую архитектуру приложения, а также поделился самыми интересными возможностями редактора на живых примерах. На данный момент я продолжаю развитие приложение и постоянно добавляю новый функционал. Если у вас возникли какие-либо вопросы, либо пожелания, то я с радостью отвечу на них в комментариях.

Скачать приложение можно вот тут для iPhone и Mac:

‎GradCit - Photo editor on the App Store

apps.apple.com

А вот тут для iPad:

‎GradCit for iPad-Photo editor on the App Store

apps.apple.com