Hugging Face's logo

Spaces:
Vokturz
/
transformers-js-playground
Running

App Files Community
transformers-js-playground / README.md
Vokturz's picture
Vokturz
Update README.md
363a465 verified
preview code
|
raw
history blame contribute delete
3.25 kB
metadata
title: Transformers.js Playground
emoji: 🤗
colorFrom: indigo
colorTo: blue
sdk: static
pinned: false
app_build_command: npm run build
app_file: dist/index.html

In-Browser AI with Hugging Face Transformers.js

This project is a web-based application built with React and TypeScript that demonstrates how to run Hugging Face Transformers models directly in the browser. It leverages the power of the transformers.js library to perform various NLP tasks like text generation, text classification, and zero-shot classification without any server-side backend for the model inference.

The entire process, from model loading to inference, happens on the client-side, ensuring user privacy and showcasing the capabilities of modern web technologies like Web Workers and WebGPU.

✨ Features

  • Multiple Pipelines: Supports several NLP tasks:
    • Text Generation
    • Text Classification
    • Zero-Shot Classification
  • Dynamic Model Loading: Fetches and runs compatible models directly from the Hugging Face Hub based on the selected pipeline.
  • In-Browser Inference: All machine learning computations are performed in the user's browser using Hugging Face Transformers.js. No data is sent to a server.
  • Non-Blocking UI: Uses Web Workers to run the heavy model computations in a background thread, ensuring the main UI remains responsive and smooth.
  • Hardware Acceleration: Leverages WebGPU for significantly faster model performance on supported hardware.
  • Model Quantization: Allows users to select different quantization levels (e.g., fp32, int8) to balance performance and precision.
  • Modern Tech Stack: Built with React, TypeScript, and styled with Tailwind CSS.

🏗️ How It Works

The application's architecture is designed to offload heavy machine learning tasks from the main UI thread, providing a seamless user experience.

  1. Pipeline and Model Selection: The user first selects an NLP pipeline (e.g., "Text Generation"). The application then calls the Hugging Face Hub API to fetch a list of compatible models for that task.
  2. Model Loading via Worker: When the user selects a model and clicks "Load Model", the main application dispatches a message to a dedicated Web Worker.
  3. Background Processing: The Web Worker, running in a separate thread, receives the message. It uses the transformers.js library to download the model files and load the pipeline. This process can be monitored on the UI via progress updates sent from the worker.
  4. Inference: Once the model is loaded, the user can input text. This input is sent to the worker, which performs the inference using the loaded model and WebGPU for acceleration.
  5. Displaying Results: The worker sends the prediction results back to the main thread, which then updates the UI to display the output to the user.

This separation of concerns ensures that the computationally intensive work of the AI model does not freeze the user's browser.

🚀 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

You'll need to have Node.js and npm (or pnpm) installed on your machine.