Nomic Embed Browser Demo

by Zatcepin

HTML

<h2>Nomic Embed in Browser</h2>
  <input id="textInput" value="search_query: What is matryoshka embedding?" />
  <button id="runBtn">Get Embedding</button>
  <p id="status">Click to load model (first run downloads ~130MB)...</p>
  <div id="output"></div>

CSS

body { font-family: sans-serif; max-width: 700px; margin: 40px auto; padding: 0 20px; }
    #output { background: #f4f4f5; padding: 16px; border-radius: 8px; white-space: pre-wrap; word-break: break-all; }
    button { padding: 10px 18px; cursor: pointer; }
    input { width: 100%; padding: 10px; margin-bottom: 10px; box-sizing: border-box; }

JavaScript

import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]';

    // Use HuggingFace CDN for model files
    env.allowLocalModels = false;

    const extractor = await pipeline(
      'feature-extraction',
      'nomic-ai/nomic-embed-text-v1.5',
      {
        dtype: 'q8',           // quantized — smaller & faster
        // device: 'webgpu'    // uncomment for GPU if supported
      }
    );

    document.getElementById('status').textContent = 'Model ready!';

    document.getElementById('runBtn').addEventListener('click', async () => {
      const text = document.getElementById('textInput').value;
      document.getElementById('status').textContent = 'Embedding...';

      const output = await extractor(text, {
        pooling: 'mean',
        normalize: true
      });

      // Truncate to first 8 dims for display (full vector is 768)
      const vec = output.tolist()[0];
      document.getElementById('output').textContent =
        `Dimensions: ${vec.length}\n\nFirst 8 values:\n${vec.slice(0, 8).map(v => v.toFixed(6)).join(', ')}\n\nFull vector (first 64):\n${vec.slice(0, 64).map(v => v.toFixed(4)).join(', ')}`;

      document.getElementById('status').textContent = 'Done!';
    });