Эстетический дизайн может быть трудным. В конце концов, именно поэтому людям платят за то, чтобы они занимались этим профессионально. Но, как и во многих других вещах, гораздо легче распознать хороший дизайн, чем создать его самостоятельно, особенно если правильно подобрать цвет. Итак, что, если бы вы могли использовать существующие изображения и немного кодирования для создания цветовых палитр для вас? Что ж, теперь это возможно благодаря магии компьютерного зрения Clarifai API!

Clarifai предлагает множество продуктов для сбора всей информации, которую вы могли бы пожелать из ваших изображений, с помощью машинного обучения, но одна очень интересная вещь, о которой вы, возможно, не знали, - это ее «Цветовая» модель, которая позволяет вам определять доминирующие цвета. в любом изображении. Затем вы можете использовать эту информацию для стилизации вашего приложения, форматирования документов или всего, что вы можете себе представить. В этом руководстве мы покажем вам, как извлечь цветовую схему, совместимую с W3C, из произвольного изображения в коротком и удобном веб-приложении. Давайте начнем!

(Как обычно, если вам нужен только полный исходный код, вы можете найти его в этом репозитории GitHub.)

Получите свой ключ Clarifai

Прежде чем мы начнем, вашим первым шагом должно быть создание бесплатной учетной записи Clarifai.

После того, как вы создали учетную запись, вам нужно будет зарегистрировать приложение в Clarifai через интерфейс разработчика:

Затем выберите свое приложение и нажмите «Ключи API». Эта шестнадцатеричная строка предоставит вашему приложению доступ к Clarifai, поэтому скопируйте ее на потом.

HTML - Скелет

Затем мы настроим структуру нашей веб-страницы с помощью HTML. Это будет чрезвычайно просто. Создайте новый HTML-файл index.html с <head> и <body>. В <head> мы включим следующий импорт:

Первые два тега скрипта включают библиотеки jQuery и tinycolor, которые мы будем использовать, чтобы наш код оставался чистым и лаконичным. Если вы никогда не использовали его раньше, jQuery - это широко используемая библиотека JavaScript, которая значительно упрощает и упрощает получение элементов по идентификатору, классу и изменение их атрибутов. Третий тег скрипта включает веб-SDK Clarifai JavaScript, который фактически позволит нам получить доступ к нашей модели и отправить изображения для анализа. Последний тег скрипта ссылается на наш colors.js файл, куда мы поместим наш код, а ссылка под ним соединяется с нашим CSS styles.css, который мы будем использовать, чтобы все было красиво.

Теперь в <body> поместите:

Все, что у нас есть, это <div>, содержащий всю нашу работу, с <h1>, чтобы сообщить пользователю, что происходит, файл <input>, который нужно взять изображение для обработки, и еще один <div> для хранения списка цветов после того, как Clarifai определит их . При необходимости мы даем идентификаторы элементам, чтобы мы могли найти их позже с помощью jQuery.

CSS - Кожа

Затем мы упорядочим и стилизуем наши HTML-элементы. Создайте новый файл с именем styles.css со следующим содержимым:

Что тут происходит? Установив шрифт и убедившись, что любой фон, который мы даем телу, расширяется, чтобы покрыть его, мы устанавливаем размер, границу и цвет полупрозрачного фона для нашего «work_box» и делаем его центрированным, установив margin: auto;. Затем мы увеличиваем размер и обеспечиваем центрирование ввода для загрузки файла. Наконец, мы разделяем и стилизуем каждый div под #colors, добавляя границу и заставляя любые промежутки внутри разделяться равномерно с помощью display: flex;.

JS - Мясо

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

Во-первых, мы настроим две важные вещи: мы позаботимся о том, чтобы размер тела объекта изменялся в соответствии с размером окна, чтобы наше изображение заполняло экран, и мы подключимся к Clarifai, создав новое приложение (не забудьте поменять местами YOUR_API_KEY на шестнадцатеричный ключ из ранее!)

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

Теперь, все еще находясь внутри $(document).ready(), мы определим getColors(), функцию, которая будет принимать файл изображения, отправлять его в Clarifai и печатать идентифицированные цвета на экране.

Вся функция состоит из вызова app.models.predict() с выбранной цветовой моделью. SDK Clarifai JavaScript может принимать изображения в одной из двух форм: как URL-адрес или как строка байта base64. Поскольку мы хотим, чтобы наши пользователи могли пробовать изображения, не загружая их, мы отправим их в Clarifai в формате base64. Таким образом, наш проект работает полностью на стороне клиента, без внутреннего кода, базы данных или сервера, требуемых от нас, и мы можем разместить его где угодно как простой статический сайт.

Функция predict() выполняется асинхронно, поэтому нам нужно определить две анонимные функции, одну в случае ошибки, а другую для обработки ответа, когда он приходит. Функция error просто записывает ошибку в консоль.

Между тем, в функции response мы извлекаем цвета, определенные Clarifai, и, перебирая каждый из них, создаем новый <div>, который содержит шестнадцатеричный код цвета, имя W3C и распространенность в изображении, и устанавливаем этот цвет для фона <div>. Мы используем tinycolor, чтобы проверить, не слишком ли светлый какой-либо заданный цвет для белого текста, и если да, то устанавливаем черный цвет текста.

Теперь все, что нам нужно сделать, это подключить getColors() к нашему файловому вводу. Для этого мы подключаемся к методу change() ввода, который срабатывает всякий раз, когда пользователь выбирает другой файл с вводом.

После получения нового файла мы создаем экземпляр FileReader, чтобы преобразовать его содержимое в строку base64. Мы устанавливаем фоновое изображение в качестве этого файла, чтобы пользователь мог сравнить результаты Clarifai с исходным для себя, уведомить их, что мы работаем над получением их цветовой схемы, и отправить его на обработку Clarifai (после отключения первая дюжина или около того символов, которые содержат информацию заголовка).

Выбирайте цветовую схему без диплома дизайнера

Вот и все! Теперь у вас должна быть возможность создавать цветовые схемы, совместимые с W3C, из произвольных изображений. Это хорошо, если вы создаете документы на основе определенных фотографий, но особенно эффективно, если вы пишете веб-приложение, в котором вы хотели бы изменить внешний вид в зависимости от фона или пользовательского ввода… возможно, загадочный хамелеон?