Guides / Algolia Recommend

Get image-based recommendations with Looking Similar

Looking Similar is a Recommend model which finds related items based on images in your index. You can set it up in a few minutes as it doesn’t need any events.

Image-based recommendations help inspire your users and let them explore your catalog. In particular, the Recommend Looking Similar model helps in these cases:

  • When your users know what they want

    Users might want something specific that isn’t available, like an out-of-stock product. You can recommend similar-looking alternatives to help users continue their shopping.

  • When users don’t know what they want

    Use recommendations from the Looking Similar model to inspire users to explore your catalog. Navigating through similar-looking products can be a great way to discover new products which they might never search for.

  • When you have other ideas

    The Looking Similar model is a powerful catalog analysis tool and is able to generate hundreds of recommendations for each item. If you combine the recommendations with the Recommend Filtering API, you can refine them based on attribute, such as category == "Clothing" or price >= 10, and enable advanced merchandising.

Limitations

The model has the following limitations:

  • Maximum 3 attributes with images
  • Maximum 300,000 images per training

Set up the Looking Similar model

Start by selecting an application with AI Recommendations enabled.

  1. Go to the Algolia dashboard and select your Algolia application.
  2. On the left sidebar, select Algolia Recommend Recommend.

  3. In the Looking similar section, click Start using. Start using Looking Similar model
  4. Select an index with image URLs you want to use as the data source. Select index to use as data source for training the model
  5. Select up to three image attributes. The recommended items will be sorted by the best score. Select the image attributes to use for training the Looking Similar model

    The model supports images from single attributes with single values, such as productImage, from attributes with several values, such as rentalHomeImages, or from several attributes, such as productImage, userProvidedProductImage.

  6. Start training the model by clicking Start training. Start training Looking Similar model

Check the training results

After a few minutes, you can find training metrics in the Info tab of the model overview, the number and percentage of items with recommendations. Metrics for Looking Simialar trained model

The coverage should be high as the model generates up to 30 recommendations per item with images.

Check the results in the Preview tab by typing a few characters to select a source item. Preview for trained Looking Similar model

Integration

The Looking Similar model has UI components in the Recommend React and Recommend JavaScript libraries. It’s also available in the JavaScript API client or the Recommend API.

Example with Recommend React

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { LookingSimilar } from '@algolia/recommend-react';
import { HorizontalSlider } from '@algolia/ui-components-horizontal-slider-react';
import recommend from '@algolia/recommend';

import '@algolia/ui-components-horizontal-slider-theme';

const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';

function LookingSimilarItem({ item }) {
  return (
    <pre>
      <code>{JSON.stringify(item)}</code>
    </pre>
  );
}

function App({ currentObjectID }) {
  // ...

  return (
    <LookingSimilar
      recommendClient={recommendClient}
      indexName={indexName}
      objectIDs={[currentObjectID]}
      itemComponent={LookingSimilarItem}
      view={HorizontalSlider}
    />
  );
}

Example with Recommend JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/** @jsx h */
import { h } from 'preact';
import { lookingSimilar } from '@algolia/recommend-js';
import recommend from '@algolia/recommend';

const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';

lookingSimilar({
  container: '#lookingSimilar',
  recommendClient,
  indexName,
  objectIDs: [currentObjectID],
  itemComponent({ item }) {
    return (
      <pre>
        <code>{JSON.stringify(item)}</code>
      </pre>
    );
  },
});
Did you find this page helpful?