Skip to content
forked from zilliztech/feder

Visualization for hnsw, faiss and other anns index

Notifications You must be signed in to change notification settings

luomor-ai/feder

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 Cannot retrieve latest commit at this time.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

feder

What is feder

Feder is an javascript tool that built for visualizing anns index files, so that we can have a better understanding of anns and high dimensional vectors.

So far, we are focusing on the index from Faiss (only ivf_flat) and HNSWlib (hnsw), we will cover more index types later. which index do you prefer?

Feder is written in javascript, and we also provide a python library federpy, which is based on federjs.

NOTE:

  • In IPython environment, it supports users to generate the corresponding visualization directly.
  • In other environments, it supports outputting visualizations as html files, which can be opened by the user through the browser with web service enabled.

Examples

HNSW visualization screenshots

image

IVF_Flat visualization screenshots

image image image

Installation

Use npm or yarn.

#install
yarn install @zilliz/feder

Material Preparation

Make sure that you have built an index and dumped the index file by Faiss or HNSWlib.

Init Feder

Specifying the dom container that you want to show the visualizations.

import { Feder } from '@zilliz/feder';

const feder = new Feder({
  filePath: 'faiss_file', // file path
  source: 'faiss', // faiss | hnswlib
  domSelector: '#container', // attach dom to render
  viewParams: {}, // optional
});

Visualize the index structure.

  • HNSW - Feder will show the top-3 levels of the hnsw-tree
feder.overview();

Explore the search process.

Set search parameters (optional) and Specify the query vector.

feder.setSearchParams({ k: 8, ef_search: 100 }); // hnsw
feder.setSearchParams({ k: 8, nprobe: 8 }); // ivf_flat
feder.search(target_vector);

Advanced

Use viewParams to adjust the details of the view.

const feder = new Feder({
  filePath,
  source: 'hnswlib',
  domSelector,
  viewParams: {
    width: 1000,
    height: 600,
    padding: [80, 200, 60, 220],
    mediaType: 'img',
    mediaCallback: (rowId) => url,
  },
});

view style

Specify the visual style of the view.

  • width - canvas width
  • height - canvas height
  • padding - the main view padding

media supports

Support mapping from Row No. to media files. (current support img)

  • mediaType - null | img
  • mediaCallback - func: rowId => url,

Examples

We prepare a simple case, which is an overview of an hnsw with 17,000+ vectors. Only need enable a web service.

git clone [email protected]:zilliztech/feder.git
cd test
python -m http.server

Then open http://localhost:8000/

  • If you want to explore the search process of hnsw, you can modify test/test.js.

    searchRandTestVec will randomly select a vector from the index file as the target vector.

    window.addEventListener('DOMContentLoaded', async () => {
      ...
      // feder.overview();
      feder.searchRandTestVec();
      ...
    });

    then open a new cmdline,

    yarn dev

    It makes the new changes to test.js take effect.

  • If you want to display the image during the interaction, you can modify test/test.js, and use the testHNSWWithImages function.

    window.addEventListener('DOMContentLoaded', async () => {
      ...
      // const feder = await testHNSW('https://assets.zilliz.com/hnswlib_hnsw_voc_17k_1f1dfd63a9.index');
      const feder = await testHNSWWithImages('https://assets.zilliz.com/hnswlib_hnsw_voc_17k_1f1dfd63a9.index');
      ...
    });
  • If you want to use a new dataset, the following process will help you.

Explore a new data

Step 1. Dataset preparation

Put all images to test/data/images/. (example dataset VOC 2012)

You can also generate random vectors without embedding for index building and skip to step 3.

Step 2. Generate embedding vectors

Recommend to use towhee, one line of code to generating embedding vectors!

We have the encoded vectors ready for you.

Step 3. Build an index and dump it.

You can use faiss or hnswlib to build the index.

(*Detailed procedures please refer to their tutorials.)

Referring to test/data/genhnswlib_index*.py or test/data/genfaiss_index*.py

Or we have the index file ready for you.

Step 4. Init Feder.

import { Feder } from '@zilliz/feder';
import * as d3 from 'd3';

const domSelector = '#container';
const filePath = [index_file_path];

const mediaCallback = (rowId) => mediaUrl;

const feder = new Feder({
  filePath,
  source: 'hnswlib',
  domSelector,
  viewParams: {
    mediaType: 'img',
    mediaCallback,
  },
});

If use the random_data, no need to specify the mediaType.

import { Feder } from '@zilliz/feder';
import * as d3 from 'd3';

const domSelector = '#container';
const filePath = [index_file_path];

const feder = new Feder({
  filePath,
  source: 'hnswlib',
  domSelector,
});

Step 5. Explore the index!

Visualize the overview

feder.overview();

or visualize the search process.

feder.search(target_vector[, targetMediaUrl]);

or randomly select an vector as the target to visualize the search process.

feder.searchRandTestVec();

More cases refer to the test/test.js

Blogs

Roadmap

We're still in the early stages, we will support more types of anns index, and more unstructured data viewer, stay tuned.

Acknowledgments

About

Visualization for hnsw, faiss and other anns index

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Jupyter Notebook 84.5%
  • JavaScript 15.4%
  • Other 0.1%