How to Implement Image Similarity Search Using JavaScript

Image similarity search is a powerful tool for applications like image galleries, e-commerce, and recommendation systems.

With Eden AI, you can build a fast and scalable solution to compare and find similar images.

In this article, we'll walk through how to implement image similarity search using JavaScript, covering key techniques and tools to help you get started efficiently.

‍

How Does Image Similarity Search Work?

The API functions by extracting key visual features from a given image—known as a feature vector—and comparing them to feature vectors of images stored in a dataset.

When a query image is submitted, the system processes it, generates a unique feature representation, and searches for matches with the most visually similar feature vectors in the collection. Techniques from deep learning and artificial intelligence are at the core of this process, enabling accurate and scalable image analysis.

Eden AI’s Image Similarity Search API allows you to compare and retrieve visually similar images using a few simple HTTP requests.

‍

Getting Started with Image Similarity Search on Eden AI

1. Sign Up for an Eden AI Account: To begin using the Image Similarity Search API, create an account on Eden AI. After registration, you’ll receive an API key that unlocks access to multiple image similarity search providers integrated on the platform.

2. Access Image Technologies: After logging in, navigate to the image section of the platform.

3. Select Image Similarity Search: Choose the Image Similarity Search feature.

‍

Implementing Image Similarity Search in JavaScript

‍

Install Axios for API Requests‍

Axios is a popular library for making HTTP requests in JavaScript. Install it using npm:

npm install axios

‍

Phase 1: Upload an Image

This phase uploads an image to the Eden AI system, so it can be indexed for future similarity searches.

‍

Code to Upload the Image

Create a new file named uploadImage.js inside your project folder. In this file, we’ll use Axios to send a POST request to Eden AI’s upload_image endpoint.

    
async function uploadImage(fileUrl, imageName, providers, apiKey) {
  const payload = {
    file_url: fileUrl,
    image_name: imageName,
    providers: providers
  };

  try {
    const response = await axios.post(
      "https://api.edenai.run/v2/image/search/upload_image/",
      payload,
      {
        headers: {
          Authorization: `Bearer ${apiKey}`,
          "Content-Type": "application/json",
        },
      }
    );

    return response.data;
  } catch (error) {
    console.error("UploadImage error:", error.response?.data || error.message);
    throw error;
  }
}
uploadImage(fileUrl, imageName, providers, YOUR_API_KEY)
    
  

‍

• Replace 'YOUR_API_KEY' with your real Eden AI API key.
  
  
• The image will be uploaded to Eden AI, and you'll see the response printed in the console.
  

‍

Phase 2: Launch Similarity Search

Once your image is uploaded, you can search for visually similar images in the Eden AI database. Let’s send a POST request to the launch_similarity endpoint to perform this search.

‍

Code to Launch Similarity Search

Create a new file named launchSimilaritySearch.js. In this file, we’ll use Axios to send a POST request to the launch_similarity endpoint.

    
async function launchSimilaritySearch(fileUrl, providers, n = 10, apiKey) {
  const payload = {
    file_url: fileUrl,
    providers: providers.join(","),
    n,
  };

  try {
    const response = await axios.post(
      "https://api.edenai.run/v2/image/search/launch_similarity/",
      payload,
      {
        headers: {
          Authorization: `Bearer ${apiKey}`,
          "Content-Type": "application/json",
        },
      }
    );

    return response.data;
  } catch (error) {
    console.error("launchSimilaritySearch error:", error.response?.data || error.message);
    throw error;
  }
}
launchSimilaritySearch(fileUrl, providers,n,YOUR_API_KEY)
    
  

‍

• Replace 'YOUR_API_KEY' with your real API key.
  
  
• The search will return up to 10 similar images, and you’ll see the response printed in the console, which includes the images and their similarity scores.
  
  

More Functionalities

In addition to the main steps of uploading and searching for similar images, Eden AI provides extra functionality for managing your images, including listing, retrieving specific images, and deleting them when no longer needed.

‍

Here’s an overview of the additional endpoints:

1. List All Images (get_images): This endpoint allows you to retrieve a list of all images stored in Eden AI's system. It’s useful when you want to check what images are available in the database or need to manage them. You can check out the documentation here.

2. Get Image (get_image): This endpoint enables you to retrieve detailed information about a specific image stored in Eden AI. You would typically use this if you need to fetch a particular image using its ID or other identifiers. You can check out the documentation here.

3. Delete Image (delete_image): This functionality lets you delete an image from Eden AI’s system. You can use this when an image is no longer needed, or if you want to clean up or manage your stored images. You can check out the documentation here.

‍

Advantages of Using Eden AI's Unique API

Using Eden AI's API is fast and straightforward.

‍

Save Time and Reduce Costs‍

We provide a unified API that integrates all providers, offering a simple and consistent experience.

Seamless Integration‍

Thanks to Eden AI's standardization efforts, the JSON output format is consistent across all providers. The response elements are also standardized, thanks to our advanced matching algorithms.

Customization‍

With Eden AI, you can seamlessly integrate third-party platforms. Our team can quickly develop connectors. For more advanced customizations and API requests with specific parameters, check out our detailed documentation.

‍

Taking Your Project to the Next Level‍

The Eden AI team is here to assist with your Image Similarity Search integration. We can help in several ways:

• Organizing a product demo and discussing your needs.
• Receiving expert support and guidance to find the best combination of providers tailored to your specific requirements.
• Integrating third-party platforms: Our team can rapidly develop connectors for you.