This presentation will go through the implementation of how to create an image search using color.

1. Piximilar
By: Matt Mueller

2. Agenda

3. Agenda
• Explain Problem

4. Agenda
• Explain Problem
• State Motivation

5. Agenda
• Explain Problem
• State Motivation
• Get Excited

6. Agenda
• Explain Problem
• State Motivation
• Get Excited
• Solving this Problem

7. Agenda
• Explain Problem
• State Motivation
• Get Excited
• Solving this Problem
• Possible Improvements

8. Agenda
• Explain Problem
• State Motivation
• Get Excited
• Solving this Problem
• Possible Improvements
• Questions

9. The Problem

10. The Problem
•Your images decide the colors of
your website

11. The Problem
•Your images decide the colors of
your website
•How can we find image by color
rather than by text?

12. Motivation

13. Motivation
•Idée Multicolr Search Lab

14. Motivation
•Idée Multicolr Search Lab
•Google Color Search

15. Motivation
•Idée Multicolr Search Lab
•Google Color Search
•I’m a Web Designer.

17. Get Excited.

18. Solving this

19. Solving this
•Mining Flickr Images

20. Solving this
•Mining Flickr Images
•Parse Images

21. Solving this
•Mining Flickr Images
•Parse Images
•Design Interface

22. Why this was

23. Why this was
• Dealing with over 170,000 images

24. Why this was
• Dealing with over 170,000 images
• Had to write code that would generate
code

25. Why this was
• Dealing with over 170,000 images
• Had to write code that would generate
code
• Organizing data for appropriate
performance

26. Why this was
• Dealing with over 170,000 images
• Had to write code that would generate
code
• Organizing data for appropriate
performance
• Pre-processing algorithms totaled 5 days

27. Mining Flickr

28. Mining Flickr
• Connected to their XML feed through
their API

29. Mining Flickr
• Connected to their XML feed through
their API
• Cycled through “most interesting”
photos from 2004 to 2009

30. Mining Flickr
• Connected to their XML feed through
their API
• Cycled through “most interesting”
photos from 2004 to 2009
• Downloaded them to my computer

31. Mining Flickr
• Connected to their XML feed through
their API
• Cycled through “most interesting”
photos from 2004 to 2009
• Downloaded them to my computer
• Technologies Used: PHP, Flickr API

32. Parsing

33. Parsing
• Go through each pixel of each image

34. Parsing
• Go through each pixel of each image
• Find most similar color in color palette

35. Parsing
• Go through each pixel of each image
• Find most similar color in color palette
• Increment color palette column in
database

36. Parsing
• Go through each pixel of each image
• Find most similar color in color palette
• Increment color palette column in
database

37. Parsing
• Go through each pixel of each image
• Find most similar color in color palette
• Increment color palette column in
database
• Technologies Used: PHP, MySQL

38. Parsing
• Go through each pixel of each image
• Find most similar color in color palette
• Increment color palette column in
database
• Technologies Used: PHP, MySQL
• Estimated Time to Completion: 3 Days

39. Results
• • •
•
•
•

40. Results
• • •
177,181 x
• 122
•
•

41. Interface

42. Interface
• Design Static Skeleton

43. Interface
• Design Static Skeleton
• Build & Connect Backend

44. Interface
• Design Static Skeleton
• Build & Connect Backend
• Add Effects

45. Interface
• Design Static Skeleton
• Build & Connect Backend
• Add Effects
• Technologies Used: HTML, CSS, jQuery, PHP,
MySQL

46. Application

47. Application
• User clicks on color

48. Application
• User clicks on color
• Sort selected color in descending order
and return top 32 images

49. Application
• User clicks on color
• Sort selected color in descending order
and return top 32 images
• User clicks on another color

50. Application
• User clicks on color
• Sort selected color in descending order
and return top 32 images
• User clicks on another color
• Compute final color column, sort in
descending order, and return top 32
images
- ColorColumn1 * ColorColumn2 = ColorColumnFinal

51. Potential Improvements

52. Potential Improvements
•Link images to original Flickr
image

53. Potential Improvements
•Link images to original Flickr
image
•Add more images

54. Potential Improvements
•Link images to original Flickr
image
•Add more images
•Increase performance

56. Questions?