Built-in AI Semantic Embedder API

<msc-built-in-ai-embedding /> is a web component based on Chrome Built-in AI Semantic Embedder API. Web developers could use <msc-built-in-ai-embedding /> to generate vector embeddings with EmbeddingGemma and provide vivid features like semantic search or text similarity comparison.

<msc-built-in-ai-embedding /> is a non-UI component. But it will provide current status in data-status. That means web developers have maximum creation to build UI through this information.

Below is a product search feature that allows users to enter keywords into the search field to find items from the seller "emmashop". This feature is powered by <msc-built-in-ai-embedding />.

Let's see what can <msc-built-in-ai-embedding /> do ?

The current browser does not support the Built-in AI Semantic Embedder API.

Basic Usage

<msc-built-in-ai-embedding /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-built-in-ai-embedding />'s html structure and everything will be all set.

Required Script

<script type="module" src="https://unpkg.com/msc-built-in-ai-embedding/mjs/wc-msc-built-in-ai-embedding.js"> </script>

Structure

Put <msc-built-in-ai-embedding /> into HTML document. It will have different functions and looks with attribute mutation.

<msc-built-in-ai-embedding> <!-- style by yourself --> <button type="button"> Try AI features </button> </msc-built-in-ai-embedding>

There will be serverial status to indicate Built-in AI status. Check msc-built-in-ai-embedding[data-status] out.

- available：AI ready to use.
- downloadable：Need to download LLM first (browser supported).
- downloading：LLM downloading (browser supported).
- unsupported：current browser doesn't support Built-in AI Semantic Embedder API.
- unavailable：current browser doesn't support Built-in AI Semantic Embedder API.

Once <msc-built-in-ai-embedding /> in status: downloading, <msc-built-in-ai-embedding /> will show download progress in attribute data-progress.

Such as:

<msc-built-in-ai-embedding data-status="downloading" data-progress="45" > <button type="button"> Try AI features </button> </msc-built-in-ai-embedding>

JavaScript Instantiation

<msc-built-in-ai-embedding /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module"> import { MscBuiltInAiEmbedding } from 'https://unpkg.com/msc-built-in-ai-embedding/mjs/wc-msc-built-in-ai-embedding.js'; const buttonTemplate = document.querySelector('.my-button-template'); // use DOM api const nodeA = document.createElement('msc-built-in-ai-embedding'); document.body.appendChild(nodeA); nodeA.appendChild(buttonTemplate.content.cloneNode(true)); // new instance with Class const nodeB = new MscBuiltInAiEmbedding(); document.body.appendChild(nodeB); nodeB.appendChild(buttonTemplate.content.cloneNode(true)); </script>

Use <msc-built-in-ai-embedding />

<msc-built-in-ai-embedding /> provide same method as Chrome Built-in AI Semantic Embedder API. That means web developers need to create() embedder before embed().

Embed a single string

<script type="module"> const ai = document.querySelector('msc-built-in-ai-embedding'); if (['unavailable', 'unsupported'].includes(ai.status)) { console.log('The current browser does not support the Built-in AI Semantic Embedder API.'); } else { try { await ai.create(); const result = await ai.embed( "The quick brown fox jumps over the lazy dog.", { taskType: "semantic-similarity" } ); ai.destroy(); console.log(result); } catch(err) { console.log(err); } } </script>

Embed a batch of strings

<script type="module"> const ai = document.querySelector('msc-built-in-ai-embedding'); if (['unavailable', 'unsupported'].includes(ai.status)) { console.log('The current browser does not support the Built-in AI Semantic Embedder API.'); } else { try { await ai.create(); const result = await ai.embed( [ "Built-in AI APIs use on-device models.", "Embeddings are high-dimensional vectors representing semantic meaning.", ], { taskType: "semantic-similarity" } ); ai.destroy(); console.log(result); } catch(err) { console.log(err); } } </script>

Property

Property Name Type Description
status String Getter current status. (available、downloadable、downloading、unsupported、unavailable)

Mathods

Mathod Signature Description
create() Create the embedder instance.
embed(string = '' [, options = {}]) Embed a single string or batch of strings. The embed function takes an optional parameter called taskType which allows you to optimize the embedding quality for specific use cases.
destroy() Destroy current embedder instance.

※ Note: Except for destroy(), all the above methods are async.

Events

Event Signature Description
msc-built-in-ai-embedding-ready Fired when LLM download done.
msc-built-in-ai-embedding-download-progress Fired when LLM downloading. Developers could gather result information through event.detail.

Reference