In-Browser Semantic AI Search with PGlite and Transformers.js

A couple of weeks ago during Launch Week 12 we introduced a new in-browser Postgres sandbox experience built in collaboration with the ElectricSQL team utilizing PGlite to run Postgres and the pgvector extension in the browser.

This gave me the idea to try and build a fully local, in-browser semantic search experience, utilising

• PGlite to store text and embeddings locally in IndexedDB.
• pgvector to perform inner product search.
• Hunggingface's Transformers.js with Supabase/gte-small to generate embeddings.

I'm thinking, something like this can be great for eCommerce sites that want to surface relevant products for user's searches quickly without needing a server roundtrip, or quickly showing similar products to the customer. Any other use cases you can think of? Tweet them at us!

Watch the video guide to see the demo in action, or test it out yourself in this Huggingface Space!

Install the dependencies#

In this example we'll be using a simple static React application. If you're starting from scratch, you can use vite create to get started:

Then go ahead and install the required dependencies: @electric-sql/pglite and @huggingface/transformers:

Create the Database schema#

Next, create a utils/db.js file to set up the database schema:

In your App.jsx file, set up the state and reference variables to set up the database:

Seed the Database with text and embeddings#

There are various ways of generating the embeddings to seed your database. For example you could use a Database webhook in Supabase anytime a new item is inserted into the database. You can find an example for this here.

For easy prototyping, you can use postgres.new to generate sample data, including embeddings, and then copy and paste that into your application.

Add this seedDB method to your utils/db.js file:

Define the inner product search function with pgvector#

In PGlite we can use pgvector just like we would in Postgres. Here we create a inner product search function, that takes in three parameters:

• embedding - The embedding of our search term.
• match_threshold - The threshold for the inner product.
• limit - The number of results to return.

Create an embedding for the search term#

To generate the embedding for the search term, we set up a web worker that creates our transformers pipeline and event listeners to communicate with the main thread.

In our App.jsx we set up a reference worker variable as well as the event listeners:

Perform the search#

The search is performed in the complete case above, where we provide the generated embedding and then perform the inner product search.

And that's it. You've learned about all the components necessary to build a fully local, in-browser semantic search experience. And the best thing is, it's free to use!

More Supabase Resources#

• Learn how we've built postgres.new
• Learn about running LLMs locally with Mozilla Llamafile
• Learn how to build semantic search with Supabase