Сайт со стилизацией изображений

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

Целью данной работы было создать веб-сайт с использованием нейросети от TensorFlow , с помощью которой можно наложить стиль одного изображения на другое.

Для достижения поставленной цели работа была разделена на несколько этапов:

1. Создание концепта сайта с помощью приложения Figma.
2. Изучение вспомогательных библиотек.
3. Написание кода на языке Python, страниц сайта на HTML,подключение стилей  CSS, подключение библиотек и фреймворков.

1й этап

В первую очередь был составлен прототип сайта на листке. Затем составлен более детализированный прототип в Figma. 

Сайт состоит из нескольких страниц:

 Главная страница

 Основная страница, на которой происходит обработка изображений.

Страница регистрации/авторизации

Личный кабинет

2й этап

Для реализации задачи в качестве дополнительных библиотек были использованы фреймворк Flask, библиотека TensorFlow, библиотека SQLAlchemy.

Flask - это фреймворк для создания веб-приложений на языке программирования Python. Он является достаточно простым в изучении, но при этом достаточно гибким и мощным для создания различных типов веб-приложений. Flask предоставляет необходимые инструменты для работы с HTTP-запросами, шаблонами, базами данных(в том числе работа с SQLAlchemy ) и другими компонентами веб-приложений.

SQLAlchemy - это библиотека для работы с базами данных на языке программирования Python. Она может использоваться вместе с Flask для работы с базами данных в веб-приложениях.

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

 

3й этап

Для удобства папка с кодом имеет следующую структуру, которую вы можете наблюдать на слайде. Каждая страница HTML подключается с помощью Flask. Для удобства каждая страница HTML имеет свой отдельный файл. Шапка сайта есть на каждой странице, поэтому она прописывается только в файле base.html, который расширяется с помощью конструкции {% block main %} {% endblock %}, благодаря фреймворку Bootstrap. То есть, написанный HTML код в других файлах расширяет файл base. Стоит отметить, что фреймворк Bootstrap обычно используется для подключения уже готовых компонентов, однако в рамках моей задачи из Bootstrap используется конструкция {% block main %} {% endblock %} и система сеток. Все компоненты прописаны мной вручную, так как имеют свой стиль и вид.

Для использования нейросети, нужно было прописать свой метод для обработки локальных изображений.

Также стоит отметить, что возникли непредвиденные трудности в реализации. После нажатия на кнопку страница перезагружалась и сбрасывались все выбранные параметры, решением стало подключение JavaScript и AJAX.

Также можно заметить, что при выборе стиля и изображения используются radio кнопки, из-за чего возник конфликт с выгрузкой изображений с компьютера, но он также был устранен с помощью AJAX.

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

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

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

Ссылка на гитхаб: https://github.com/gekik44/neuro_image_task