Генератор цветов в палитре

Макет в фигме

Проблема

У пользователя нет возможности генерировать цвета в палитре на основе заданных им (н-р, из брендбука) с помощью автоматических инструментов (алгоритмов, искусственного интеллекта). Процесс создания новых цветов выполняется вручную и является достаточно сложным для непрофессионала.

Концепт

Панель генерации цвета, вызываемая из настроек палитры, позволяющая на основе заданного набора цветов и выбранной цветовой схемы создать новую группу оттенков. В данной настройке используются 2 инструмента: алгоритм подбора и генератор палитры от ИИ, выдающие разные результаты для добавления в существующую палитру. Алгоритм подбора для каждого из исходных цветов создаёт набор согласно выбранному правилу, предлагая на выходе несколько линеек цветов. Генератор ИИ подбирает сочетающиеся цвета, используя в качестве образца более 145 тыс. готовых палитр, предлагая на выходе линейку цветов, подходящих к исходному набору. 

image.png

Задание на разработку

Панель генерации, состоящая из 3 блоков: ввода исходных цветов, настроек генерации и результатов генерации.

1. Блок ввода:

1.1. «Исходные цвета» – набор цветов, передаваемых на вход модели для генерации. При выбранной группе цветов в палитре (до вызова окна генерации) исходные цвета заполняются автоматически цветами из группы с возможностью добавления дополнительных цветов. Если группа не была выбрана, то будет активна только кнопка добавления цвета.

1.2. Управление цветами. Функционал полностью аналогичен работе с цветами в палитре: можно добавлять новые цвета нажатием на соответствующую кнопку, удалять или изменять существующие. Выбирать цвет можно как HEX-кодом, так и при помощи HSL-ползунков.

image.png

2. Настройки генерации:

2.1. «Число вариаций» – количество цветов на выходе модели. Отвечает за размер выборок, формируемых как результат работы модели. Представляет собой поле для ввода чисел от 1 до 8 (на сентябрь 2024). 

2.2. «Цветовая схема» – раскрывающийся список с перечислением типов моделей. Каждому текстовому сообщению однозначно соответствует кодовое слово для модели. Кодовые слова для моделей:

«Монохромные» – monochrome

«Комплементарные» – complementary

. . .

Модель генерации от искусственного интеллекта срабатывает вне зависимости от выбранной цветовой схемы (алгоритма) и выдаёт результат в отдельном блоке. Её кодовое слово – ML

2.3. Кнопка «Сгенерировать» – передаёт на бэкенд через API методом POST всю информацию для модели: HEX/RGB код цвета из п.1.1. «Исходные цвета»; количество цветов на выходе из п.2.1. «Число вариаций» и кодовое слово для выбора типа модели из п.2.2. «Цветовая схема». Если какое-то из полей было заполнено неверно, то должна выдаваться одна из следующих ошибок:

"Не выбрано ни одного цвета!", если в блоке «Исходные цвета» нет активных цветов

"Неверное число вариаций! Выберите значение от 1 до 8", если в блоке «Число вариаций» указано нечисловое значение, вещественное число или целое число меньше 1 или больше 8

image.png

3. Результаты генерации

3.1. «Результат генерации 1» – результат работы алгоритма по одной из цветовых схем. Выдаёт столько цветовых групп по указанной схеме, сколько цветов было задано в блоке «Исходные цвета». Каждая группа представляет собой список из списков RGB-кодов для n цветов, где n – значение в блоке «Число вариаций». Кода должны преобразоваться в цвета для палитры.

3.2. «Результат генерации 2» – результат работы модели генерации от искусственного интеллекта. Выдаёт одну группу сочетающихся с исходных набором цветов. Каждая группа представляет собой список из списков RGB-кодов для n цветов, где n – значение в блоке «Число вариаций». Кода должны преобразоваться в цвета для палитры.

3.3. Кнопка «Добавить в палитру» – активна для каждого из результатов генерации по отдельности. При нажатии создаёт группу цветов в палитре из выбранного результата генерации, после чего превращается в некликабельное поле «Добавлено» до тех пор, пока не будет нажата кнопка «Сгенерировать» (после чего снова примет вид кликабельной кнопки «Добавить в палитру»).

image.png

Изменения и дополнения:

image.png

image.png

image.png

image.png

image.png

image.png

image.png


Revision #1
Created 21 January 2025 05:54:42 by Артём
Updated 21 January 2025 05:54:42 by Артём