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

Макет в фигме

Проблема

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

Концепт

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

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

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

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

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

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

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

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

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

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

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

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

• Добавить кнопку "Очистить" (справа от кнопки "Сгенерировать", удаляющую все результаты генерации в окне (при нажатии нужно спрашивать подтверждение у пользователя). Рядом с каждым результатом генерации ставить значок корзины в качестве кнопки удаления именно этого набора (уже без подтверждения, но с подсказкой об удалении при наведении курсора на значок). При выходе из настроек все неудаленные результаты генерации должны сохраняться (как группы в палитре).
• Максимальное число исходных цветов в блоке ввода не должно превышать 8 (в будущем будет можно, но сейчас необходимо исправить). После указания восьмого цвета  необходимо скрывать кнопку для добавления новых цветов .
• При добавлении нового цвета он должен автоматически выбираться для редактирования (не требуется дополнительное нажатие на этот цвет).
• Под блоком ввода исходных цветов должна находиться кнопка для импорта как в палитре (с аналогичной подписью – "Импортировать" – и действием – открывает папку с файлами для выбора набора цветов в формате Json). 
• Необходимо добавить функционал по переносу цветов из палитры в генератор – при открытом генераторе и выбранном цвете в блоке ввода нажатие на цвет из палитры должен запускаться следующий алгоритм:
  

• • Копируется HEX-код цвета из палитры, на который нажал пользователь (окно для изменения цвета в палитре не открывается).
  • HEX-код вставляется в поле ввода для выбранного цвета в генераторе.

• В блоке ввода исходных цветов в генераторе всегда должен быть как минимум 1 цвет (по аналогии со страницами дашборда - последнюю нельзя удалить). Если в генераторе выбран только 1 исходный цвет, то при наведении на него не должна появляться кнопка для удаления (значок корзины).
• В поле "Число вариаций" в случае ввода вещественного числа необходимо писать под полем ошибку: "Введите целое число". Запретить обработку нецелых чисел. Текущий баг: при попытке сгенерировать цвета с дробным числом вариаций выдаётся пустая ошибка.

• Необходимо добавить возможность редактирования названия результата генерации при нажатии на него (как в палитре). Новое название должно переноситься в палитру.

• Баг: подпись "Число вариаций" переносится в поле ввода. Для воспроизведения: очистить поле ввода числа вариаций, нажать на пустое место, снова нажать на поле ввода, начать вводить цифры.

• В палитре цветов (не генераторе) – грамматическая ошибка при вводе названия цвета (НазванЫе)

• Грамматическая ошибка в описании – "...необходимо добавИТЬ хотя бы один цвет".

• Нет ни системного сообщения, ни подписи для случая, если выбрано число вариаций больше 8. Можно писать этот текст под полем ввода числа вариаций в случае, если указанное число больше 8.

• Необходимо добавить пояснения к каждому варианту из цветовой схемы, всплывающие при наведении курсора на этот вариант:

• • Монохромные – "Набор разных оттенков выбранных цветов"
  • Комплементарные – "Набор разных оттенков контрастных цветов к выбранным"
  • ML – переименовать в "Умная генерация", добавить пояснение – "Набор сочетающихся цветов к выбранным от модели ИИ"