Demo using image_features api to sort images based on similarity.
JavaScript Python HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
example edited to contain full 250 images and sort by similarity to horse and… Jan 16, 2015
imgs base demo Nov 17, 2014
similarity.html base demo Nov 17, 2014
similarity.js a bit more detail Nov 17, 2014


This demo uses the Indico image_features API to sort images based on similarity.

Getting Started with the Sample Data

Clone the repo:

git clone

Fire up your test server using SimpleHTTPServer (or equivalent):

cd ImageSimilarity && python -m SimpleHTTPServer

See the demo at localhost:8000/similarity.html!

Sort by Color

Click on any image to trigger sorting based on similarity to that image.

The initial view will look something like this:

Initial View!

Clicking on one of the more brownish images triggers a resort. Limiting the data to ten images, the result looks something like so, with the target item first:

Brownish Things!

Similar for the clicking one of the bluer items:

Blueish Things!

Image Recognition: Beyond Color

Loading the full 250 image set, you can truly experience the power of the Indico API.

Click on a horse to sort by general horseyness. Note that it recognizes a brown horse on brown background even though the initial image was mostly green:


Or a car to sort by similarity to automobile-shaped items:


How it Works

Take a look at, the file where the magic happens. It's pretty short.

from scipy.misc import imsave, imread
from indicoio import image_features
import json

# Compute image features for all images and save to json.
features = []
for i in range(250):                        # there are 250 items in the default dataset
    img = imread('imgs/%s.png'%i)
    features.append(image_features(img))    # magic happens here!

json.dump(features, open('features.json', 'wb'))

The application sends the images in the img file to the Indico image_features API, which returns a JSON of abstract features describing the image.

similarity.js orders these features by Euclidean distance from a target image (the one you click on in the UI), and the nifty Isotope library displays and animates the sorting process.

Further Reading