بناء محرك بحث عن الصور يعتمد على اللون في روبي

يقال أن الصورة تساوي ألف كلمة. ومن نواحٍ كثيرة ، فإن الكلمات الموجودة في الصور هي ألوان. الألوان جزء لا يتجزأ من حياتنا ، ولا يمكننا إنكار أهميتها.

أثناء النظر إلى صورة ، حاولنا غالبًا تحديد اللون على جزء منها. لقد حاولنا جميعًا القيام بذلك ولكننا لم نفعل ذلك أبدًا بالتفصيل. عندما يُطلب منك تحديد الألوان من صورة ما ، فإننا نميل إلى تسميتها باستخدام أسماء ألوان محددة ، مثل الأحمر والأزرق والأخضر. ومع ذلك ، إذا طُلب منا استخراج 30 لونًا بارزًا في صورة ما ، فلن تتمكن أعيننا من اكتشافها أو التعرف عليها بسهولة تامة. كاماليان هو كل شيء عن هذا. يساعدك على استخراج الألوان من الصور ثم اللعب بها.

في هذه المقالة ، سوف نلقي نظرة خاطفة على ماهية مساحات الألوان ، وما الذي تقدمه جوهرة روبي Camalian ، وكيف يمكن استخدامها لإنشاء محرك بحث بسيط عن الصور يستخدم الألوان لتحديدها وتمييزها.

مساحة الألوان

قبل أن نبدأ ، دعنا أولاً نفهم بعض المفاهيم الأساسية حول الألوان. يتم تمثيل الصور المعروضة على شاشاتنا باستخدام مصفوفة ثنائية الأبعاد من البكسل. على الرغم من أن ملفات الصور قد يتم ترميزها بطرق مختلفة ، إلا أن التمثيل الخام بعد فك ضغط البيانات وفك تشفيرها هو نفسه. في هذا التمثيل القائم على المصفوفة ثنائية الأبعاد ، يحتوي كل بكسل في صورة ملونة على ثلاثة مكونات: الأحمر والأخضر والأزرق. على الرغم من أن الصور المطبوعة على ورقة هي أيضًا سطح ثنائي الأبعاد من النقاط ، فإن النقاط نفسها عادة ما تكون مزيجًا من أربعة أحبار مكونة: سماوي وأرجواني وأصفر وأسود. هذه من بين بعض التقنيات المختلفة الأخرى المستخدمة لتمثيل الألوان تسمى فراغات اللون. بعض مساحات الألوان الأكثر استخدامًا هي RGB و CMYK و HSL و HSV. يتم استخدام CMYK في الغالب في صناعة الطباعة بينما يتم استخدام جميع الأنواع الأخرى في الوسائط الرقمية.

مساحة ألوان RGB

أي وسائط إلكترونية مادية مثل شاشات CRT أو شاشات الكريستال السائل أو الهواتف التي تنقل الضوء تنتج ألوانًا باستخدام ثلاثة مكونات: الأحمر والأخضر والأزرق. يمكن للعين البشرية اكتشاف ملايين الألوان من خلال تحفيز ثلاثة أنواع من مستقبلات الألوان في العين. يمكنك ربط هذه المستقبلات بـ R و G و B.

من الناحية المثالية ، يتم تخزين كل مكون لون في بايت يمكن أن تتراوح قيمه بين 0 و 255.

مساحة ألوان HSL و HSV

يعد ترتيب مساحة ألوان RGB على مكعب أمرًا صعبًا إلى حد ما. نتائج محاولة تمثيلها على مكعب و / أو عجلة الألوان رديئة. أثناء العمل بملايين أو لون ، لا يمكن محاذاة كل صبغة من الألوان بشكل صحيح في مساحة ألوان RGB.

للتغلب على هذه المشكلة ، قدم الباحثون في سبعينيات القرن الماضي مساحات لونية HSV (تدرج ، تشبع ، قيمة) و HSL (تدرج ، تشبع ، خفة). يمكن محاذاة فراغات اللون هذه على عجلة الألوان بشكل صحيح وتسهيل تحديد الصبغات المختلفة للألوان عليها.

جوهرة روبي للألوان

كاماليان هو كل شيء عن الألوان. من أبسط الأشياء التي يمكنك القيام بها باستخدام Camalian تحديد كل صبغة لونية مستخدمة في الصورة.

لنفترض أن لدينا صورة بها 15 لونًا مميزًا.

من المؤكد أن تحديد الألوان من العينة أسهل من التعرف عليها من الصورة نفسها. علاوة على ذلك ، هذه صورة بسيطة ، وغالبًا ما تكون الصور الحقيقية التي تم التقاطها أكثر تنوعًا عندما يتعلق الأمر بلوحة ألوانها. يتطلب استخراج قيم الألوان من الصورة بعض أجزاء التعليمات البرمجية المعقدة ، وهنا يأتي دور Camalian. يقوم بهذه الأشياء الصعبة من أجلك حتى تتمكن من استخراج المعلومات المتعلقة بالألوان من الصورة بسهولة.

ابدء

إذا كان استخراج الألوان باستخدام Camalian أمرًا سهلاً ، فسيكون التثبيت به أسهل. يمكنك تثبيت جوهرة روبي بتنفيذ:

 gem install camalian

ولاستخدام هذه الأحجار الكريمة ، يمكنك طلبها مباشرة في نص روبي الخاص بك:

 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” وقم بتشغيله في shell بواسطة ruby color_test1.rb . يجب أن ينتج مخرجات مشابهة لما يلي:

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

وهذا سهل! لقد استخرجنا للتو 15 لونًا مستخدمة في الصورة أعلاه. هل يمكنك أن تتخيل محاولة القيام بذلك باستخدام كود loopy ، أو ما هو أسوأ من ذلك ، بأعينك؟ دعونا نطلب الأشياء بدرجة بسيطة. هذه المرة سنحاول استخدام 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) 

صنع محرك البحث عن الصور

الآن بعد أن عرفنا مدى سهولة التعامل مع الألوان باستخدام Camalian ، فلنقم ببناء تطبيق ويب بسيط يتيح لك تحميل الصور وفهرستها حسب اللون. للإيجاز ، سنتخطى التفاصيل المختلفة التي ينطوي عليها إنشاء تطبيق Ruby. بدلاً من ذلك ، سنركز على التفاصيل التي تتعامل مع الألوان واستخدام Camalian.

بالنسبة لنطاق تطبيق 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 جديد لها. يتم استدعاء هذا الأسلوب ، extract_colors ، كلما استمر عنصر الحافظة في قاعدة البيانات.

لكي نتمكن من عرض لوحة الألوان على الصفحات ، نستخدم مساعدًا بسيطًا:

 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

يقوم بشكل أساسي بإنشاء 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

باستخدام طريقة colours_by_hsl ، يمكننا جلب جميع كيانات اللون التي تطابق استعلامنا. ومن خلال هذه يمكننا تحديد جميع الصور التي تم تحميلها وعرض صفحة نتائج البحث الخاصة بنا. الاستعلام نفسه بسيط إلى حد ما. بالنظر إلى لون معين وقيمة تشابه ، يتم حساب نطاق من القيم لكل مكون من مكونات اللون.

وهذا إلى حد كبير هو كل الأجزاء الصعبة.

تجربته

يمكنك العثور على الكود الكامل على جيثب. يمكنك نشر مثيل من هذا التطبيق على Heroku ، أو تجربته محليًا:

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

يبدو التطبيق النهائي كالتالي:

بمجرد تشغيل التطبيق ، قم بتوجيه مستعرض الويب الخاص بك إلى http: // localhost: 3000. باستخدام النموذج الموجود على الشاشة ، قم بتحميل بعض الصور بألواح ألوان مختلفة. بعد ذلك ، للبحث عن الصور حسب اللون ، استخدم حقل البحث في الزاوية اليمنى العليا. تتيح لك القائمة المنسدلة للعتبة تحديد تفاوت الاختلاف لمطابقة ألوان الصور.

ماذا بعد؟

التطبيق التجريبي الذي أنشأناه في هذه المقالة بسيط نوعًا ما ، لكن الاحتمالات لا حصر لها! يمكن أن تشمل بعض الاستخدامات العملية الأخرى لهذه المكتبة ما يلي:

• منع المستخدمين من تحميل صور الملفات الشخصية المظلمة
• قم بتكييف سمة ألوان الموقع مع بعض الصور التي تم تحميلها بواسطة المستخدم
• لمسابقات التصميم ، تحقق تلقائيًا من عمليات الإرسال وفقًا لمتطلبات لوحة الألوان

يمكنك أيضًا استكشاف المكتبة على GitHub والتحقق من كود المصدر الخاص بها. لا تتردد في الإبلاغ عن الأخطاء عن طريق إنشاء مشكلات أو المساهمة بإرسال طلبات السحب.