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: Index an Image

This phase turns an image into an embedding (a feature vector) with Eden AI and stores it in your own index, so it can be used for future similarity searches.

‍

Code to Index the Image

Create a new file named uploadImage.js inside your project folder. In this file, we’ll use Axios to send the image to Eden AI’s embeddings endpoint (https://api.edenai.run/v3/embeddings) with the multimodal model google/gemini-embedding-2. The image is sent as a base64 data URI, because a plain URL string would be embedded as text.

    
const axios = require("axios");
const fs = require("fs");

// Download the image and send its content as a base64 data URI
async function embedImage(fileUrl, apiKey) {
  const image = await axios.get(fileUrl, { responseType: "arraybuffer" });
  const dataUri = `data:${image.headers["content-type"]};base64,` + Buffer.from(image.data).toString("base64");

  const response = await axios.post(
    "https://api.edenai.run/v3/embeddings",
    { model: "google/gemini-embedding-2", input: [dataUri] },
    {
      headers: {
        Authorization: `Bearer ${apiKey}`,
        "Content-Type": "application/json",
      },
    }
  );
  return response.data.data[0].embedding;
}

// Store the embedding in a local index (a JSON file here, a vector database in production)
async function uploadImage(fileUrl, imageName, apiKey, indexPath = "index.json") {
  try {
    const index = fs.existsSync(indexPath) ? JSON.parse(fs.readFileSync(indexPath)) : {};
    index[imageName] = await embedImage(fileUrl, apiKey);
    fs.writeFileSync(indexPath, JSON.stringify(index));
    return { image_name: imageName, dimensions: index[imageName].length };
  } catch (error) {
    console.error("UploadImage error:", error.response?.data || error.message);
    throw error;
  }
}

module.exports = { embedImage };

if (require.main === module) {
  uploadImage("https://example.com/image.jpg", "image.jpg", "YOUR_API_KEY").then(console.log);
}
    
  

‍

• Replace 'YOUR_API_KEY' with your real Eden AI API key.
  
  
• The image embedding is computed by Eden AI and saved in index.json, and you'll see the image name and the vector size printed in the console. Run it once for each image you want to index.
  

‍

Phase 2: Launch Similarity Search

Once your images are indexed, you can search for visually similar images in your index. The query image is turned into an embedding with the same model, then compared to every stored vector with cosine similarity.

‍

Code to Launch Similarity Search

Create a new file named launchSimilaritySearch.js. In this file, we’ll reuse the embedImage function from uploadImage.js and rank the indexed images by similarity.

    
const fs = require("fs");
const { embedImage } = require("./uploadImage");

function cosineSimilarity(a, b) {
  let dot = 0, normA = 0, normB = 0;
  for (let i = 0; i < a.length; i++) {
    dot += a[i] * b[i];
    normA += a[i] * a[i];
    normB += b[i] * b[i];
  }
  return dot / (Math.sqrt(normA) * Math.sqrt(normB));
}

async function launchSimilaritySearch(fileUrl, n = 10, apiKey, indexPath = "index.json") {
  try {
    const index = JSON.parse(fs.readFileSync(indexPath));
    const query = await embedImage(fileUrl, apiKey);

    return Object.entries(index)
      .map(([imageName, vector]) => ({ image_name: imageName, score: cosineSimilarity(query, vector) }))
      .sort((a, b) => b.score - a.score)
      .slice(0, n);
  } catch (error) {
    console.error("launchSimilaritySearch error:", error.response?.data || error.message);
    throw error;
  }
}

launchSimilaritySearch("https://example.com/query.jpg", 10, "YOUR_API_KEY").then(console.log);
    
  

‍

• 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 indexing and searching for similar images, you will want to manage your images, including listing, retrieving specific images, and deleting them when no longer needed. Since the vectors are stored on your side, this needs no extra API call.

‍

Here’s how to do it with the index.json file:

1. List All Images: read the keys of the index with Object.keys(index) to see which images are available.

2. Get Image: read index[imageName] to retrieve the stored vector of a specific image.

3. Delete Image: remove the entry with delete index[imageName], then save the file again.

For large collections, store the vectors in a vector database instead of a JSON file: searches stay fast as the collection grows.

‍

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.

‍

Frequently Asked Questions (FAQ)

‍

What do I need to Implement Image Similarity Search Using JavaScript?

You need an API key from your chosen AI provider. Eden AI lets you access multiple providers with a single key, removing the need for separate vendor accounts.

‍

Which programming languages can I use?

Any language that supports HTTP requests works — Python, JavaScript, PHP, Ruby, Go, and more. Ready-to-use code snippets are available for the most common languages.

‍

How long does the integration take?

Most developers complete a basic integration in under an hour using standardized API endpoints and ready-to-use code examples.

‍

How do I handle errors and rate limits?

Implement exponential backoff for rate limit errors and use try-catch blocks for network failures. Eden AI's built-in fallback routing automatically redirects requests if a provider is unavailable.

‍

Is the data I send secure and GDPR-compliant?

Check each provider's data processing agreement. Eden AI supports GDPR-compliant provider filtering and does not store or reuse your data.