portaldacalheta.pt
  • Основен
  • Инженерно Управление
  • Мобилен Дизайн
  • Разпределени Екипи
  • Пъргав
Back-End

Изграждане на базирана на цветове търсачка на изображения в Ruby



Казва се, че една снимка струва хиляда думи. И в много отношения думите в картините са цветове. Цветовете са неразделна част от живота ни и не можем да отречем тяхното значение.

Докато разглеждаме изображение, често сме се опитвали да идентифицираме цвета на част от него. Всички се опитахме да го направим, но никога не го направихме в подробности. Когато бъдете помолени да идентифицирате цветовете от изображението, ние обикновено ги етикетираме, като използваме конкретни имена на цветове, като червен, син и зелен. Ако обаче бъдем помолени да извлечем 30-те най-изявени цвята в изображението, нашето око не може да ги открие или идентифицира толкова лесно. Камалиан е всичко за това. Помага ви да извличате цветове от изображения и след това да играете с тях.



компилира в c++

Camalian: Избор на цвят Ultiamte за Ruby



В тази статия ще надникнем за това какви са цветните пространства, какво предлага Ruby Gem Camalian и как може да се използва за създаване на проста машина за търсене на изображения, която използва цветове, за да ги идентифицира и разграничи.



Цветове Космос

Преди да започнем, нека първо разберем някои основни понятия за цветовете. Изображенията, представени на нашите екрани, се представят с помощта на двуизмерен масив от пиксели. Въпреки че файловете с изображения могат да бъдат кодирани по различни начини, суровото представяне след декомпресиране и декодиране на данните е същото. В това представяне, базирано на 2d масив, всеки пиксел в цветно изображение има три компонента: червен, зелен и син. Въпреки че картините, отпечатани на хартия, са и двуизмерна повърхност на точки, самите точки обикновено са смес от четири компонентни мастила: циан, магента, жълто и черно. Тези сред някои други различни техники, използвани за представяне на цветове, се наричат ​​цветови пространства. Някои от най-често използваните цветови пространства са RGB, CMYK, HSL и HSV. CMYK се използва най-вече в печатарската индустрия, докато всички останали се използват в цифрови медии.

RGB цветово пространство

Всеки физически електронен носител като ЕЛТ екрани, LCD или телефони, които предават светлина, произвежда цвят, използвайки три компонента: червен, зелен, син. Човешкото око може да открие милиони цветове, като стимулира три вида цветови рецептори в окото. Можете да свържете тези рецептори с R, G и B.



В идеалния случай всеки цветен компонент се съхранява в байт, чиито стойности могат да варират между 0 и 255.

Цветно пространство HSL и HSV

Подреждането на RGB цветно пространство върху куб е доста предизвикателно. Резултатите от опитите да го представите на куб и / или цветно колело са лоши. Докато работите с милиони или цветове, всеки оттенък на цвета не може да бъде подравнен правилно в RGB цветовото пространство.



машина за търсене на рубинни изображения

За да преодолеят този проблем, през 70-те години изследователите въвеждат цветови пространства HSV (Hue, Saturation, Value) и HSL (Hue, Saturation, Lightness). И двете цветови пространства могат да бъдат правилно подравнени на цветно колело и да улеснят идентифицирането на различни нюанси на цвета върху него.



Ruby Gem за цветове

Камалийският е всичко за цветовете. Едно от най-простите неща, които можете да направите с Camalian, е да идентифицирате всеки оттенък на цвета, използван в изображението.

как да хакна кредитна карта

Да приемем, че имаме изображение с 15 различни цвята.



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



Приготвяме се да започнем

Ако извличането на цветове с Camalian е лесно, инсталирането с него е още по-лесно. Можете да инсталирате скъпоценния камък Ruby, като изпълните:

gem install camalian

И за да използвате този скъпоценен камък, можете да го изискате директно във вашия Ruby скрипт:

require 'camalian'

Извличане на цветове

За да извлечем цветове от изображение, първо трябва да го заредим в паметта и да използваме методи върху обекта на изображението:

image = Camalian::load( File.join( File.dirname(__FILE__), 'colormap.png') ) colors = image.prominent_colors(15) puts colors.map(&:to_hex)

Този фрагмент от код зарежда изображение с име „colormap.png“ от директорията, където се намира скриптът, и извлича от него 15-те най-известни цвята.

За да го стартирате, запазете файла като “color_test1.rb” и го стартирайте в черупка от ruby color_test1.rb. Той трябва да произвежда резултати, подобни на следните:

['#318578', '#41b53f', '#2560a3', '#359169', '#2154b1', '#4dda15', '#1d48bf', '#1530dc', '#296d94', '#193dcd', '#3da94d', '#45c131', '#3da84e', '#2d7986', '#193cce']

И това е толкова лесно! Току-що извличаме 15 цвята, използвани в горното изображение. Можете ли да си представите да се опитате да го направите с помощта на лупинг код или по-лошо с очите си? Нека да разберем нещата с една степен. Този път ще се опитаме да използваме Camalian върху изображение с повече подробности:

най-добрият серифен шрифт за печат

Чрез стартиране на същия скрипт на това изображение получаваме следното:

[“#210b03”, “#723209”, “#974d09”, “#ae5d08”, “#c77414”, “#d77f15”, “#ffea54”, “#94651f”, “#b66a15”, “#c25f06”, “#fdd94d”, “#d39a39”, “#efa540”, “#fffffe”, “#fff655”]

Опитът да визуализираме масива от цветови стойности, произведени по-горе, ни дава нещо подобно:

Палитрата е добра, но няма специфичен модел в извлечените цветове. Нека сортираме цветовите стойности по сходство и да видим дали това помага. Всичко, което трябва да направим, е да извикаме още една функция, преди действително да отпечатаме масива на конзола:

colors = image.prominent_colors(15).sort_similar_colors

Но какво, ако искахме да извлечем сравнително по-светли цветове? Може би искаме цветове, които са само 40% тъмни, или с други думи имат стойност на лекота (в цветовото пространство HSL) между 0 и 40. Всичко, което трябва да направим, е:

colors = image.prominent_colors(15).light_colors(0, 40)

aws сертифициран архитект за решения

Осъществяване на търсачката на изображения

Сега, след като знаем колко лесно е да се справяме с цветовете, използвайки Camalian, нека изградим просто уеб приложение, което ви позволява да качвате изображения и да ги индексирате по цвят. За краткост ще пропуснем различните подробности, включени в изграждане на Ruby приложение. Вместо това ще се съсредоточим върху специфики, които се занимават с цветовете и използването на Камалия.

Що се отнася до обхвата на това приложение Ruby, ние ще го ограничим до обработка на качвания на изображения, извличане на цветове от изображението преди съхранението им и търсене на качено изображение въз основа на избрания цвят и праг.

По-долу е дадена моделна диаграма, която да обясни структурата на нашето приложение:

Всяко качено изображение се представя с помощта на обект PortfolioItem. Всеки обект Цвят представлява уникални цветове, открити чрез качени изображения, и накрая PortfolioColor представя връзката между всяко изображение и цветовете, намерени в него.

Повечето битове на приложението са доста стандартни, особено когато става въпрос за обработка на качвания на изображения, създаване на обекти на модели и запазване в базата данни и т.н. В случай, че сте Руби разработчик , те не трябва да се занимават. По-долу е посочен методът, който се използва за извличане на цвета от каченото изображение:

after_save :extract_colors private def extract_colors image = Camalian::load(self.image.path) colors = image.prominent_colors(self.color_count.to_i).sort_similar_colors colors.each do |color| unless c = Color.where(r: color.r, g: color.g, b: color.b).first c = Color.create(r: color.r, g: color.g, b: color.b, h: color.h, s: color.s, l: color.l) end self.colors << c end end

Това помага чрез извличане на цветовата палитра и запазване в базата данни. Забележете как извличаме само определен брой видни цветове (нещо, което потребителят може да определи при качване на изображението).

Когато потребителят изпрати изображение чрез формуляра в уеб потребителския интерфейс, изображението се получава чрез манипулатор на публикация и се появява нов PortfolioItem е създаден за него. Този метод, екстракт_цветове , се извиква всеки път, когато елемент от портфолио се запази в базата данни.

За да можем да изобразим цветната палитра на страници, използваме прост помощник:

module PortfolioItemsHelper def print_color_palette(colors) color_string = '' colors.each do |c| color_string += content_tag :span, ' ', style: 'display: block; float: left; width: 35px; height: 35px; background: #{c.to_hex}' end content_tag :div, color_string.html_safe, style: 'display: inline-block;' end end

По същество създава a div с малък квадрат обхваща , всеки със своя цвят на фона, зададен на един от извлечените видни цветове.

И накрая, за да приложим търсене, трябва да използваме малко математика и логика:

class PortfolioSearchForm include ActiveModel::Model attr_accessor :color, :similarity validates_presence_of :color, :similarity def color_object @color_object ||= Camalian::Color.new(self.color) end def color_range(color, level) (color_object.send(color) - level)..(color_object.send(color) + level) end def colors_by_rgb level = self.similarity.to_i * 255 / 100.0 Color.where(r: color_range(:r, level), g: color_range(:g, level), b: color_range(:b, level)) end def colors_by_hsl level = self.similarity.to_i Color.where(h: color_range(:h, (self.similarity.to_i * 30 / 100.0) ), s: color_range(:s, level), l: color_range(:l, level)) end end

С colors_by_hsl метод, можем да извлечем всички Цвят обекти, които отговарят на нашата заявка. И с тях можем да идентифицираме всички качени изображения и да изобразим нашата страница с резултати от търсенето. Самата заявка е доста проста. Като се има предвид специфичен цвят и стойност на сходство, диапазон от стойности се изчислява за всеки цветен компонент.

И това са почти всички по-трудни части.

Опитвам го

Можете да намерите пълния код на GitHub . Можете да разположите екземпляр на това приложение в Heroku или да го изпробвате локално:

git clone https://github.com/nazarhussain/camalian-sample-app.git cd camalian-sample-app bundle install rake db:migrate rails s

Последното приложение изглежда по следния начин:

как да използвам react native

След като приложението се стартира, насочете уеб браузъра си към http: // localhost: 3000. Използвайки формуляра на екрана, качете няколко изображения с различни цветови палитри. След това, за да търсите изображения по цвят, използвайте полето за търсене в горния десен ъгъл. Падащото меню на прага ви позволява да зададете толеранс на различия за съвпадение на цветовете на изображенията.

Какво следва?

Демо приложението, което създадохме в тази статия, е доста просто, но възможностите са безкрайни! Някои други практически приложения на тази библиотека могат да включват:

  • Ограничаване на потребителите да качват тъмни снимки на профила
  • Адаптирайте цветната тема на сайта към някаква снимка, качена от потребителя
  • За състезания по дизайн автоматично проверявайте подадените заявки спрямо изискванията на цветовата палитра

Можете да проучите допълнително библиотеката на GitHub и проверете изходния му код. Чувствайте се свободни да докладвате за грешки, като създавате проблеми или допринасяте, като изпращате заявки за изтегляне.

Сигурни и здрави - Как да подходим към парола UX

Ux Дизайн

Сигурни и здрави - Как да подходим към парола UX
По-добро UX чрез микро-взаимодействия

По-добро UX чрез микро-взаимодействия

Ux Дизайн

Популярни Публикации
Плащане напред: Разбиране на изкупувания с ливъридж
Плащане напред: Разбиране на изкупувания с ливъридж
Индустриален анализ и Porter’s Five Force: По-задълбочен поглед върху силата на купувача
Индустриален анализ и Porter’s Five Force: По-задълбочен поглед върху силата на купувача
Разширена реалност vs. Виртуална реалност vs. Смесена реалност: Уводно ръководство
Разширена реалност vs. Виртуална реалност vs. Смесена реалност: Уводно ръководство
Ще отвори ли Spotify не-IPO пътя за технологичните компании?
Ще отвори ли Spotify не-IPO пътя за технологичните компании?
Прогнозиране на харесвания: Вътре в алгоритмите на прост механизъм за препоръки
Прогнозиране на харесвания: Вътре в алгоритмите на прост механизъм за препоръки
 
Ефективни стартови платки: какви са те и как да ги изградим
Ефективни стартови платки: какви са те и как да ги изградим
Ръководител на клиентския опит
Ръководител на клиентския опит
Игла в купа сено: чудесен урок за мащабен текстов алгоритъм за търсене
Игла в купа сено: чудесен урок за мащабен текстов алгоритъм за търсене
Структурата на данните Trie: Пренебрегван скъпоценен камък
Структурата на данните Trie: Пренебрегван скъпоценен камък
Краят на уеб формите
Краят на уеб формите
Популярни Публикации
  • кой тип уеб базирана атака използва функциите get и post на html формуляр?
  • разпределение на вероятностите за симулация на Монте Карло
  • какво е сървър на възли
  • как да тествате функция
  • преодоляване на междукултурните комуникационни бариери
  • шаблон на документ за дизайн на ниско ниво
  • формални елементи и принципи на дизайна
Категории
  • Инженерно Управление
  • Мобилен Дизайн
  • Разпределени Екипи
  • Пъргав
  • © 2022 | Всички Права Запазени

    portaldacalheta.pt