### Initialize React Project with Vite

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/react.md

Commands to scaffold a new React application using Vite, install dependencies, and start the development server.

```bash
npm create vite@latest react-translator -- --template react
cd react-translator
npm install
npm run dev
```

--------------------------------

### Install Transformers.js via NPM

Source: https://github.com/huggingface/transformers.js/blob/main/README.md

Use this command to install the library using NPM. This is the recommended method for projects using bundlers.

```bash
npm i @huggingface/transformers
```

--------------------------------

### JavaScript Setup for Transformers.js

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/vanilla-js.md

Initializes the JavaScript environment for the application. Imports necessary functions from Transformers.js, configures environment settings, and gets references to DOM elements.

```javascript
import {
  pipeline,
  env,
} from "https://cdn.jsdelivr.net/npm/@huggingface/transformers";

env.allowLocalModels = false;

const fileUpload = document.getElementById("file-upload");
const imageContainer = document.getElementById("image-container");
const status = document.getElementById("status");
```

--------------------------------

### Install Project Dependencies (Shell)

Source: https://github.com/huggingface/transformers.js/blob/main/CONTRIBUTING.md

Installs all the necessary project dependencies for Transformers.js using pnpm. This command should be run after cloning the repository and creating a new branch.

```shell
pnpm install
```

--------------------------------

### Start development server with npm

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/next-ai-sdk.md

Executes the development server script defined in the project's package.json. This command initializes the local environment for testing model inference and browser-based caching.

```bash
npm run dev
```

--------------------------------

### Create Next.js Project and Install Dependencies

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/next-ai-sdk.md

Initializes a new Next.js application and installs necessary AI and Transformers.js packages. Requires Node.js and npm.

```bash
npx create-next-app@latest next-ai-chatbot
cd next-ai-chatbot
npm install ai @ai-sdk/react @browser-ai/transformers-js @huggingface/transformers zod
```

--------------------------------

### Install Transformers.js in Node.js

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/node.md

Installs the Transformers.js library and initializes a new Node.js project using npm. This is a prerequisite for using the library in a Node.js environment.

```bash
npm init -y
npm i @huggingface/transformers
```

--------------------------------

### Install Transformers.js

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/next.md

Installs the Transformers.js library using npm. This package provides the necessary tools for running machine learning models in JavaScript.

```bash
npm i @huggingface/transformers
```

--------------------------------

### Run Next.js Development Server

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/next.md

Command to start the Next.js development server. This command compiles the application and makes it available at a local URL, typically http://localhost:3000, for development and testing.

```bash
npm run dev

```

--------------------------------

### Install Transformers.js Library

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/react.md

Command to add the Hugging Face Transformers library to the project via npm.

```bash
npm install @huggingface/transformers
```

--------------------------------

### Install Node.js Packages for Transformers.js

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/guides/node-audio-processing.md

Installs the necessary packages for using Transformers.js in a Node.js project. This includes the core Transformers.js library and the `wavefile` package for handling WAV audio files.

```bash
npm init -y
npm i @huggingface/transformers
npm i wavefile
```

--------------------------------

### Install pnpm Package Manager (Shell)

Source: https://github.com/huggingface/transformers.js/blob/main/CONTRIBUTING.md

Installs the pnpm package manager globally using npm. pnpm is a fast and disk-space-efficient package manager used for the Transformers.js project.

```shell
npm install -g pnpm
```

--------------------------------

### Setup Web Worker in React Component

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/react.md

Demonstrates how to initialize a Web Worker within a React component using the useRef and useEffect hooks to handle background processing.

```jsx
import { useEffect, useRef, useState } from 'react'
import './App.css'

function App() {
  const worker = useRef(null);

  useEffect(() => {
    worker.current ??= new Worker(new URL('./worker.js', import.meta.url), {
        type: 'module'
    });

    const onMessageReceived = (e) => {
      // TODO: Will fill in later
    };

    worker.current.addEventListener('message', onMessageReceived);

    return () => worker.current.removeEventListener('message', onMessageReceived);
  });

  return (
    // TODO: Rest of our app goes here...
  )
}

export default App
```

--------------------------------

### Install Dependencies for Transformers.js and Vercel AI SDK

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/integrations/vercel-ai-sdk.md

Install the necessary packages to integrate Transformers.js with the Vercel AI SDK in a React or Node.js environment.

```bash
npm install @browser-ai/transformers-js @huggingface/transformers ai @ai-sdk/react
```

--------------------------------

### Local Development Workflow

Source: https://github.com/huggingface/transformers.js/blob/main/CONTRIBUTING.md

Commands to enable watch mode for automatic builds and to link the local library into a separate test project for rapid iteration.

```bash
pnpm dev
mkdir my-test-project
cd my-test-project
npm init -y
npm install file:/path/to/transformers.js/packages/transformers
```

--------------------------------

### Create Next.js Application

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/next.md

Initializes a new Next.js application using `create-next-app`. This command sets up the basic project structure and configuration. Users are prompted to select various options, including TypeScript, ESLint, Tailwind CSS, `src/` directory, and App Router.

```bash
npx create-next-app@latest
```

--------------------------------

### Run Sentiment Analysis Model on WebGPU

Source: https://github.com/huggingface/transformers.js/blob/main/README.md

Configure the pipeline to use the WebGPU device for model inference. This can offer performance benefits on compatible hardware. Note that WebGPU is experimental.

```javascript
// Run the model on WebGPU
const pipe = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english', {
  device: 'webgpu',
});
```

--------------------------------

### Hugging Face Spaces Docker Configuration

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/next.md

These lines are added to the top of the README.md file to configure a Docker-based application deployed on Hugging Face Spaces. They specify metadata such as the application title, emoji, color scheme, SDK type, and the port the application listens on.

```yaml
---
title: Next Server Example App
emoji: 🔥
colorFrom: yellow
colorTo: red
sdk: docker
pinned: false
app_port: 3000
---

```

--------------------------------

### Streaming Text Generation with TextStreamer in Transformers.js

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/pipelines.md

Illustrates how to use the TextStreamer class for real-time output from text generation pipelines in Transformers.js. This example uses a chat model and defines a callback function for processing streamed text.

```javascript
import { pipeline, TextStreamer } from "@huggingface/transformers";

// Create a text generation pipeline
const generator = await pipeline(
  "text-generation",
  "onnx-community/Qwen2.5-Coder-0.5B-Instruct",
  { dtype: "q4" },
);

// Define the list of messages
const messages = [
  { role: "system", content: "You are a helpful assistant." },
  { role: "user", content: "Write a quick sort algorithm." },
];

// Create text streamer
const streamer = new TextStreamer(generator.tokenizer, {
  skip_prompt: true,
  // Optionally, do something with the text (e.g., write to a textbox)
  // callback_function: (text) => { /* Do something with text */ },
});

// Generate a response
const result = await generator(messages, {
  max_new_tokens: 512,
  do_sample: false,
  streamer,
});
```

--------------------------------

### Text Generation Pipeline with Custom Parameters in Transformers.js

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/pipelines.md

Shows how to create a text generation pipeline for creative writing tasks, such as generating a poem. It includes examples of specifying generation parameters like max_new_tokens, temperature, and repetition_penalty.

```javascript
const poet = await pipeline(
  "text2text-generation",
  "Xenova/LaMini-Flan-T5-783M",
);
const result = await poet("Write me a love poem about cheese.", {
  max_new_tokens: 200,
  temperature: 0.9,
  repetition_penalty: 2.0,
  no_repeat_ngram_size: 3,
});
```

--------------------------------

### Initialize Object Detection Pipeline with Transformers.js

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/vanilla-js.md

Instantiates an object detection pipeline using the pipeline() function with a specified model. It includes updating the UI status to inform the user about the model loading process.

```javascript
status.textContent = "Loading model...";
const detector = await pipeline("object-detection", "Xenova/detr-resnet-50");
status.textContent = "Ready";
```

--------------------------------

### Preload Transformers.js Pipeline (JavaScript)

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/node.md

This snippet shows how to proactively load the Transformers.js classification pipeline when the server starts, rather than waiting for the first request. This can improve the response time for the initial classification task by performing the loading asynchronously in the background.

```javascript
MyClassificationPipeline.getInstance();
```

--------------------------------

### Format Code with Prettier

Source: https://github.com/huggingface/transformers.js/blob/main/CONTRIBUTING.md

Commands to enforce consistent code style across the project. Use these to format all files or verify compliance without modifying source files.

```bash
pnpm format
pnpm format:check
```

--------------------------------

### Configure Local Model Path (JavaScript)

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/node.md

This example illustrates how to configure Transformers.js to use local model files instead of downloading them from the Hugging Face Hub. By setting `env.localModelPath`, you specify a custom directory where your local models are stored. This is useful for offline development or when using private models.

```javascript
// Specify a custom location for models (defaults to '/models/').
env.localModelPath = "/path/to/models/";
```

--------------------------------

### Generate Tiny Random Model (Python)

Source: https://github.com/huggingface/transformers.js/blob/main/CONTRIBUTING.md

Generates a small, random model configuration and pushes it to the Hugging Face Hub for testing purposes. This is useful when a specific model architecture doesn't have a pre-existing tiny version for testing.

```python
from transformers import AutoConfig, AutoModelForCausalLM
config = AutoConfig.for_model("my_model", num_hidden_layers=2, hidden_size=64, ...)
model = AutoModelForCausalLM.from_config(config)
model.push_to_hub("hf-internal-testing/tiny-random-MyModelForCausalLM")
```

--------------------------------

### Define AI Tools with Zod Validation

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/next-ai-sdk.md

Creates a set of tools using the AI SDK's tool function, incorporating Zod schemas for input validation. Includes examples of static data retrieval, mathematical operations, and browser-based geolocation requiring user approval.

```typescript
import { tool } from "ai";
import z from "zod";

export const createTools = () => ({
  getCurrentTime: tool({
    description: "Get the current date and time.",
    inputSchema: z.object({}),
    execute: async () => {
      const now = new Date();
      return {
        timestamp: now.toISOString(),
        date: now.toLocaleDateString("en-US", {
          weekday: "long", year: "numeric", month: "long", day: "numeric",
        }),
        time: now.toLocaleTimeString("en-US", {
          hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: true,
        }),
        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
      };
    },
  }),
  randomNumber: tool({
    description: "Generate a random integer between min and max (inclusive).",
    inputSchema: z.object({
      min: z.number().describe("The minimum value (inclusive)"),
      max: z.number().describe("The maximum value (inclusive)"),
    }),
    execute: async ({ min, max }) => {
      return Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min) + 1)) + Math.ceil(min);
    },
  }),
  getLocation: tool({
    description: "Get the user's current geographic location.",
    inputSchema: z.object({}),
    needsApproval: true, // requires user confirmation before executing
    execute: async () => {
      return new Promise((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(
          (pos) => resolve({
            latitude: pos.coords.latitude,
            longitude: pos.coords.longitude,
          }),
          (err) => reject(err.message),
        );
      });
    },
  }),
});
```

--------------------------------

### Clone Transformers.js Repository (Shell)

Source: https://github.com/huggingface/transformers.js/blob/main/CONTRIBUTING.md

Clones the Hugging Face Transformers.js repository from GitHub to your local machine and sets up the base repository as a remote. This is the first step in setting up your development environment.

```shell
git clone git@github.com:<your Github handle>/transformers.js.git
cd transformers.js
```

--------------------------------

### Configure Per-module Dtypes for Florence-2

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/guides/dtypes.md

Demonstrates how to initialize a Florence-2 model with specific quantization dtypes for different internal modules, such as vision encoders and decoders, using the WebGPU device.

```javascript
import { Florence2ForConditionalGeneration } from "@huggingface/transformers";

const model = await Florence2ForConditionalGeneration.from_pretrained(
  "onnx-community/Florence-2-base-ft",
  {
    dtype: {
      embed_tokens: "fp16",
      vision_encoder: "fp16",
      encoder_model: "q4",
      decoder_model_merged: "q4",
    },
    device: "webgpu",
  },
);
```

--------------------------------

### Execute Project Tests

Source: https://github.com/huggingface/transformers.js/blob/main/CONTRIBUTING.md

Commands to run unit tests using Jest. Supports running the full suite, filtering by package, or targeting specific test files.

```bash
pnpm test
pnpm --filter @huggingface/transformers test
cd packages/transformers
pnpm test -- ./tests/models.test.js
```

--------------------------------

### Set up Client Component and Web Worker in Next.js

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/next.md

This code snippet initializes a Next.js client component and sets up a web worker for background processing. It includes state management for results and readiness, and a callback for worker messages. Dependencies include React hooks like `useState`, `useEffect`, `useRef`, and `useCallback`.

```jsx
'use client'

import { useState, useEffect, useRef, useCallback } from 'react'

export default function Home() {
  /* TODO: Add state variables */

  // Create a reference to the worker object.
  const worker = useRef(null);

  // We use the `useEffect` hook to set up the worker as soon as the `App` component is mounted.
  useEffect(() => {
    if (!worker.current) {
      // Create the worker if it does not yet exist.
      worker.current = new Worker(new URL('./worker.js', import.meta.url), {
        type: 'module'
      });
    }

    // Create a callback function for messages from the worker thread.
    const onMessageReceived = (e) => { /* TODO: See below */};

    // Attach the callback function as an event listener.
    worker.current.addEventListener('message', onMessageReceived);

    // Define a cleanup function for when the component is unmounted.
    return () => worker.current.removeEventListener('message', onMessageReceived);
  });

  const classify = useCallback((text) => {
    if (worker.current) {
      worker.current.postMessage({ text });
    }
  }, []);

  return ( /* TODO: See below */ )
}

```

--------------------------------

### Compute text embeddings on WebGPU

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/guides/webgpu.md

Initializes a feature-extraction pipeline with WebGPU acceleration to compute and normalize embeddings for a list of strings.

```js
import { pipeline } from "@huggingface/transformers";

// Create a feature-extraction pipeline
const extractor = await pipeline(
  "feature-extraction",
  "mixedbread-ai/mxbai-embed-xsmall-v1",
  { device: "webgpu" },
);

// Compute embeddings
const texts = ["Hello world!", "This is an example sentence."];
const embeddings = await extractor(texts, { pooling: "mean", normalize: true });
console.log(embeddings.tolist());
// [
//   [-0.016986183822155, 0.03228696808218956, -0.0013630966423079371, ... ],
//   [0.09050482511520386, 0.07207386940717697, 0.05762749910354614, ... ],
// ]
```

--------------------------------

### Initialize useChat with Transformers.js

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/integrations/vercel-ai-sdk.md

Shows how to instantiate the custom transport and integrate it into the useChat hook within a React component.

```typescript
import { useChat } from "@ai-sdk/react";
import { transformersJS, TransformersUIMessage } from "@browser-ai/transformers-js";

const model = transformersJS("HuggingFaceTB/SmolLM2-360M-Instruct", {
  device: "webgpu",
  worker: new Worker(new URL("./worker.ts", import.meta.url), { type: "module" }),
});

const { sendMessage, messages, stop } = useChat<TransformersUIMessage>({
  transport: new TransformersChatTransport(model),
});
```

--------------------------------

### Perform automatic speech recognition on WebGPU

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/guides/webgpu.md

Uses the OpenAI Whisper model to transcribe audio from a URL using WebGPU acceleration.

```js
import { pipeline } from "@huggingface/transformers";

// Create automatic speech recognition pipeline
const transcriber = await pipeline(
  "automatic-speech-recognition",
  "onnx-community/whisper-tiny.en",
  { device: "webgpu" },
);

// Transcribe audio from a URL
const url =
  "https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/jfk.wav";
const output = await transcriber(url);
console.log(output);
// { text: ' And so my fellow Americans ask not what your country can do for you, ask what you can do for your country.' }
```

--------------------------------

### Build Next.js Application for Production

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/next.md

Command to build the Next.js application for production deployment. This command optimizes the application by bundling assets and generating static files, typically in an 'out' folder.

```bash
npm run build

```

--------------------------------

### Generate Text with Transformers.js

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/integrations/vercel-ai-sdk.md

Demonstrates how to perform text generation using the Vercel AI SDK, supporting both streaming and non-streaming responses.

```javascript
import { streamText } from "ai";
import { transformersJS } from "@browser-ai/transformers-js";

const result = streamText({
  model: transformersJS("HuggingFaceTB/SmolLM2-360M-Instruct"),
  prompt: "Invent a new holiday and describe its traditions.",
});

for await (const textPart of result.textStream) {
  console.log(textPart);
}
```

```javascript
import { generateText } from "ai";
import { transformersJS } from "@browser-ai/transformers-js";

const result = await generateText({
  model: transformersJS("HuggingFaceTB/SmolLM2-360M-Instruct"),
  prompt: "Invent a new holiday and describe its traditions.",
});
console.log(result.text);
```

--------------------------------

### HTML Structure for Image Upload

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/vanilla-js.md

Sets up the basic HTML for a file upload input, an image container, and a status display. It uses a styled label to act as a custom file upload button.

```html
<main class="container">
  <label class="custom-file-upload">
    <input id="file-upload" type="file" accept="image/*" />
    <img
      class="upload-icon"
      src="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/upload-icon.png"
    />
    Upload image
  </label>
  <div id="image-container"></div>
  <p id="status"></p>
</main>
```

--------------------------------

### Import Transformers.js using ES Modules CDN

Source: https://github.com/huggingface/transformers.js/blob/main/README.md

Import the library directly in vanilla JavaScript projects using a CDN link with type module. This method is suitable for projects without bundlers.

```html
<script type="module">
    import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.2.0';
</script>
```

--------------------------------

### Initialize Whisper Speech Recognition Pipeline

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/guides/node-audio-processing.md

Initializes the automatic speech recognition pipeline using the 'Xenova/whisper-tiny.en' model. This sets up the model for transcribing audio input.

```javascript
let transcriber = await pipeline(
  "automatic-speech-recognition",
  "Xenova/whisper-tiny.en",
);
```

--------------------------------

### Track Model Download Progress

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/integrations/vercel-ai-sdk.md

Monitor the download status of large model files to provide user feedback before initiating inference.

```javascript
import { streamText } from "ai";
import { transformersJS } from "@browser-ai/transformers-js";

const model = transformersJS("HuggingFaceTB/SmolLM2-360M-Instruct");
const availability = await model.availability();

if (availability === "downloadable") {
  await model.createSessionWithProgress(({ progress }) => {
    console.log(`Download progress: ${Math.round(progress * 100)}%`);
  });
}

const result = streamText({ model, prompt: "Hello!" });
```

--------------------------------

### Perform image classification on WebGPU

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/guides/webgpu.md

Classifies an image from a URL using the MobileNetV4 model with WebGPU acceleration.

```js
import { pipeline } from "@huggingface/transformers";

// Create image classification pipeline
const classifier = await pipeline(
  "image-classification",
  "onnx-community/mobilenetv4_conv_small.e2400_r224_in1k",
  { device: "webgpu" },
);

// Classify an image from a URL
const url =
  "https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/tiger.jpg";
const output = await classifier(url);
console.log(output);
// [
//   { label: 'tiger, Panthera tigris', score: 0.6149784922599792 },
//   { label: 'tiger cat', score: 0.30281734466552734 },
//   { label: 'tabby, tabby cat', score: 0.0019135422771796584 },
//   { label: 'lynx, catamount', score: 0.0012161266058683395 },
//   { label: 'Egyptian cat', score: 0.0011465961579233408 }
// ]
```

--------------------------------

### Load and Preprocess Audio Data for Whisper

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/guides/node-audio-processing.md

Loads an audio file from a URL, converts it to a Buffer, and then uses the `wavefile` library to process it. The audio is converted to a 32-bit float format and resampled to 16000 Hz, which are requirements for the Whisper model.

```javascript
// Load audio data
let url =
  "https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/jfk.wav";
let buffer = Buffer.from(await fetch(url).then((x) => x.arrayBuffer()));

// Read .wav file and convert it to required format
let wav = new wavefile.WaveFile(buffer);
wav.toBitDepth("32f"); // Pipeline expects input as a Float32Array
wav.toSampleRate(16000); // Whisper expects audio with a sampling rate of 16000
let audioData = wav.getSamples();
if (Array.isArray(audioData)) {
  if (audioData.length > 1) {
    const SCALING_FACTOR = Math.sqrt(2);

    // Merge channels (into first channel to save memory)
    for (let i = 0; i < audioData[0].length; ++i) {
      audioData[0][i] =
        (SCALING_FACTOR * (audioData[0][i] + audioData[1][i])) / 2;
    }
  }

  // Select first channel
  audioData = audioData[0];
}
```

--------------------------------

### Sentiment Analysis Pipeline in Python (Original)

Source: https://github.com/huggingface/transformers.js/blob/main/README.md

This is the original Python code for setting up a sentiment analysis pipeline. It serves as a reference for the JavaScript implementation.

```python
from transformers import pipeline

# Allocate a pipeline for sentiment-analysis
pipe = pipeline('sentiment-analysis')

out = pipe('I love transformers!')
# [{'label': 'POSITIVE', 'score': 0.999806941}]
```

--------------------------------

### Implement dynamic quantization selection

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/guides/dtypes.md

Shows how to programmatically select the most efficient available quantization from a prioritized list, falling back to full-precision if necessary.

```javascript
const dtypes = await ModelRegistry.get_available_dtypes("onnx-community/Qwen3-0.6B-ONNX");

// Pick the smallest available quantization, falling back to fp32
const preferred = ["q4", "q8", "fp16", "fp32"];
const dtype = preferred.find((d) => dtypes.includes(d)) ?? "fp32";

const generator = await pipeline("text-generation", "onnx-community/Qwen3-0.6B-ONNX", { dtype });
```

--------------------------------

### Initialize pipeline with custom quantization using dtype

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/guides/dtypes.md

Demonstrates how to load a model with a specific quantization level (e.g., 4-bit) using the dtype parameter within the pipeline configuration. This replaces the legacy boolean quantized option.

```javascript
import { pipeline } from "@huggingface/transformers";

// Create a text generation pipeline
const generator = await pipeline(
  "text-generation",
  "onnx-community/Qwen2.5-0.5B-Instruct",
  { dtype: "q4", device: "webgpu" },
);

// Define the list of messages
const messages = [
  { role: "system", content: "You are a helpful assistant." },
  { role: "user", content: "Tell me a funny joke." },
];

// Generate a response
const output = await generator(messages, { max_new_tokens: 128 });
console.log(output[0].generated_text.at(-1).content);
```

--------------------------------

### Offload Inference to Web Workers

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/integrations/vercel-ai-sdk.md

Improve main-thread performance by running model inference inside a dedicated Web Worker.

```typescript
import { TransformersJSWorkerHandler } from "@browser-ai/transformers-js";

const handler = new TransformersJSWorkerHandler();
self.onmessage = (msg: MessageEvent) => {
  handler.onmessage(msg);
};
```

```javascript
const model = transformersJS("HuggingFaceTB/SmolLM2-360M-Instruct", {
  device: "webgpu",
  worker: new Worker(new URL("./worker.ts", import.meta.url), {
    type: "module",
  }),
});
```

--------------------------------

### Perform Audio Transcription

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/integrations/vercel-ai-sdk.md

Transcribe audio files into text with timestamps using the experimental transcription API.

```javascript
import { experimental_transcribe as transcribe } from "ai";
import { transformersJS } from "@browser-ai/transformers-js";

const transcript = await transcribe({
  model: transformersJS.transcription("Xenova/whisper-base"),
  audio: audioFile,
});
console.log(transcript.text);
console.log(transcript.segments);
```

--------------------------------

### Implement Pipeline Singleton

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/next.md

Creates a singleton class to manage the lifecycle of the Transformers.js pipeline, ensuring it is only initialized once and persists across hot reloads in development.

```javascript
import { pipeline } from "@huggingface/transformers";

const P = () =>
  class PipelineSingleton {
    static task = "text-classification";
    static model = "Xenova/distilbert-base-uncased-finetuned-sst-2-english";
    static instance = null;

    static async getInstance(progress_callback = null) {
      if (this.instance === null) {
        this.instance = pipeline(this.task, this.model, {
          progress_callback,
        });
      }
      return this.instance;
    }
  };

let PipelineSingleton;
if (process.env.NODE_ENV !== "production") {
  if (!global.PipelineSingleton) {
    global.PipelineSingleton = P();
  }
  PipelineSingleton = global.PipelineSingleton;
} else {
  PipelineSingleton = P();
}
export default PipelineSingleton;
```

--------------------------------

### Implement Singleton Translation Pipeline in Web Worker

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/react.md

Defines a worker script using the singleton pattern to ensure the translation model is loaded only once and executed outside the main UI thread.

```javascript
import { pipeline, TextStreamer } from "@huggingface/transformers";

class MyTranslationPipeline {
  static task = "translation";
  static model = "Xenova/nllb-200-distilled-600M";
  static instance = null;

  static async getInstance(progress_callback = null) {
    this.instance ??= pipeline(this.task, this.model, { progress_callback });
    return this.instance;
  }
}
```

--------------------------------

### Full Florence-2 Inference Pipeline with Per-module Dtypes

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/guides/dtypes.md

A complete implementation showing model loading with custom dtypes, image processing, prompt construction, text generation, and post-processing for the Florence-2 model.

```javascript
import {
  Florence2ForConditionalGeneration,
  AutoProcessor,
  AutoTokenizer,
  RawImage,
} from "@huggingface/transformers";

const model_id = "onnx-community/Florence-2-base-ft";
const model = await Florence2ForConditionalGeneration.from_pretrained(
  model_id,
  {
    dtype: {
      embed_tokens: "fp16",
      vision_encoder: "fp16",
      encoder_model: "q4",
      decoder_model_merged: "q4",
    },
    device: "webgpu",
  },
);
const processor = await AutoProcessor.from_pretrained(model_id);
const tokenizer = await AutoTokenizer.from_pretrained(model_id);

const url = "https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/transformers/tasks/car.jpg";
const image = await RawImage.fromURL(url);
const vision_inputs = await processor(image);

const task = "<MORE_DETAILED_CAPTION>";
const prompts = processor.construct_prompts(task);
const text_inputs = tokenizer(prompts);

const generated_ids = await model.generate({
  ...text_inputs,
  ...vision_inputs,
  max_new_tokens: 100,
});

const generated_text = tokenizer.batch_decode(generated_ids, {
  skip_special_tokens: false,
})[0];

const result = processor.post_process_generation(
  generated_text,
  task,
  image.size,
);
console.log(result);
```

--------------------------------

### Define Model Configurations for Transformers.js

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/tutorials/next-ai-sdk.md

Defines available ONNX models from Hugging Face for use with Transformers.js. Includes model ID, display name, target device (e.g., 'webgpu'), data type, and whether it supports Web Workers.

```typescript
import { WorkerLoadOptions } from "@browser-ai/transformers-js";

export interface ModelConfig extends Omit<WorkerLoadOptions, "modelId"> {
  id: string;
  name: string;
  supportsWorker?: boolean;
}

export const MODELS: ModelConfig[] = [
  {
    id: "onnx-community/Qwen3-0.6B-ONNX",
    name: "Qwen3 0.6B",
    device: "webgpu",
    dtype: "q4f16",
    supportsWorker: true,
  },
  {
    id: "onnx-community/granite-4.0-350m-ONNX-web",
    name: "Granite 4.0 350M",
    device: "webgpu",
    dtype: "fp16",
    supportsWorker: true,
  },
];
```

--------------------------------

### Implement Tool Calling with Transformers.js

Source: https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/integrations/vercel-ai-sdk.md

Demonstrates how to use the streamText function with a Transformers.js model to execute defined tools. It requires the 'ai' SDK and 'zod' for schema validation, enabling multi-step reasoning capabilities.

```javascript
import { streamText, tool, stepCountIs } from "ai";
import { transformersJS } from "@browser-ai/transformers-js";
import { z } from "zod";

const result = await streamText({
  model: transformersJS("onnx-community/Qwen3-0.6B-ONNX"),
  messages: [{ role: "user", content: "What's the weather in San Francisco?" }],
  tools: {
    weather: tool({
      description: "Get the weather in a location",
      inputSchema: z.object({
        location: z.string().describe("The location to get the weather for"),
      }),
      execute: async ({ location }) => ({
        location,
        temperature: 72 + Math.floor(Math.random() * 21) - 10,
      }),
    }),
  },
  stopWhen: stepCountIs(5),
});
```

--------------------------------

### Run Sentiment Analysis Model with 4-bit Quantization

Source: https://github.com/huggingface/transformers.js/blob/main/README.md

Utilize 4-bit quantization (`dtype: 'q4'`) for the model to reduce its size and potentially improve performance in resource-constrained environments. This is particularly useful for browser-based applications.

```javascript
// Run the model at 4-bit quantization
const pipe = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english', {
  dtype: 'q4',
});
```