@reasonote/transformers-js-react-helpers

React helpers for using @xenova/transformers

Installation

1. Install xenova/transformers peer dependency

npm install @xenova/[email protected]

2. Install the package

npm install @reasonote/transformers-js-react-helpers

Usage

Here's a basic example of how to use the EmbeddingProvider and useEmbedding hook:

import React, { useState } from 'react';
import { EmbeddingProvider, useEmbeddingFunc } from '@reasonote/transformers-js-react-helpers';
import { cosineSimilarity } from '@lukebechtel/lab-ts-utils';
import * as Transformers from '@xenova/transformers';

// Configure Transformers.js to not load local models
Transformers.env.allowLocalModels = false;

const documents = [
  'This is a sample document about machine learning.',
  'Another document discussing natural language processing.',
  'A third document on deep learning and neural networks.',
];

function App() {
  return (
    <EmbeddingProvider>
      <SearchExample />
    </EmbeddingProvider>
  );
}

function SearchExample() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const { embedText, ready } = useEmbeddingFunc();

  const handleSearch = async () => {
    if (!ready) return;

    const queryEmbedding = await embedText(query);
    const similarities = await Promise.all(
      documents.map(async (doc) => {
        const docEmbedding = await embedText(doc);
        const similarity = cosineSimilarity(queryEmbedding, docEmbedding);
        return { doc, similarity: (similarity * 100).toFixed(2) + '%' };
      })
    );

    similarities.sort((a, b) => parseFloat(b.similarity) - parseFloat(a.similarity));
    setResults(similarities);
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Enter search query"
      />
      <button onClick={handleSearch} disabled={!ready}>
        Search
      </button>
      <ul>
        {results.map((result, index) => (
          <li key={index}>
            {result.doc} - {result.similarity}
          </li>
        ))}
      </ul>
    </div>
  );
}

API

EmbeddingProvider

A React context provider that sets up the embedding functionality.

useEmbedding(text: string)

A hook that returns the embedding for the given text.

useEmbeddingFunc()

A hook that returns the embedding function and ready state.

checkTransformersDependency()

A utility function to check if the required @xenova/transformers dependency is installed.

configureTransformers(config: { allowLocalModels?: boolean })

A utility function to configure the Transformers.js library.

Building

To build the library:

```bash cd packages/lib bun run scripts/build.ts ```

License

MIT