Hugging Face's logo
Back to Articles

Unlock the Power of AI in Your Browser with Transformers.js

Community Article Published November 19, 2024
Upvote
2
Luigi's avatar
luigi12345 Luigi

Run state-of-the-art machine learning models directly in your browser—for free!

Artificial Intelligence is no longer confined to research labs and large corporations. With Transformers.js, you can run cutting-edge machine learning models right in your browser without the need for a server or backend infrastructure. Whether you're a developer looking to integrate AI into your application or a curious user eager to explore AI capabilities, Transformers.js opens up a world of possibilities.

Why Transformers.js?

  • No Server Required: Run models entirely in the browser, keeping data local and reducing latency.
  • Free and Open Source: No need for expensive GPU servers or cloud services.
  • Easy Integration: Bring AI into your web applications with minimal setup.
  • Privacy First: Since computations are done on the client side, user data doesn't leave the browser.

Table of Contents

  1. Getting Started
  2. 10 Free AI Demos You Can Try Right Now
  3. Supported Tasks and Models
  4. How to Use AI Without Coding
  5. Deploy AI Apps for Free
  6. Integrate AI into Your Application
  7. Conclusion

Getting Started

Quick Tour

Transformers.js brings the power of Hugging Face's transformers Python library to the JavaScript ecosystem. It uses ONNX Runtime to run models efficiently in the browser.

To get started, you don't need any prior experience with machine learning or AI.

Using the Web Interface:

For Developers:

Install the package via npm:

npm install @xenova/transformers

Or include it directly in your HTML:

<script src="https://cdn.jsdelivr.net/npm/@xenova/transformers/dist/transformers.min.js"></script>

Now, you can load a model and run inference:

// Load the pipeline for text generation
const { pipeline } = require('@xenova/transformers');
const generator = await pipeline('text-generation', 'gpt2');

// Generate text
const output = await generator('Once upon a time,');
console.log(output);

It's that simple!

10 Free AI Demos You Can Try Right Now

Want to experience the magic of AI without writing a single line of code? Here are 10 free AI demos powered by Transformers.js that you can try directly in your browser.

1. Whisper Web: Speech Recognition in Your Browser

Description: Convert your speech into text using OpenAI's Whisper model.

  • Features: Supports multiple languages and works entirely offline.
  • Try it Now: Whisper Web Demo
  • Code Repository: GitHub

Use Case: If you need to convert audio recordings, podcasts, or live speech into text effortlessly, Whisper Web offers a seamless solution right in your browser.

2. Doodle Dash: Real-Time Sketch Recognition Game

Description: Draw sketches and let the AI guess what you've drawn in real-time.

Use Case: Perfect for educators and students, Doodle Dash makes learning about AI and machine learning engaging and entertaining.

3. Code Playground: AI-Powered Code Completion

Description: Write code in your browser with real-time AI suggestions.

Use Case: Enhance your coding workflow with intelligent code completions, reducing errors and increasing productivity.

4. Semantic Image Search (Client-Side)

Description: Search for images using text queries. All processing happens in your browser.

Use Case: Ideal for developers looking to integrate image search functionality into their applications without compromising user privacy.

5. Vanilla JavaScript Object Detection

Description: Detect objects in images using pure JavaScript, no frameworks needed.

Use Case: Perfect for developers who prefer minimal dependencies and want to understand the fundamentals of object detection.

6. React Translator: Multilingual Translation Website

Description: Translate text between multiple languages using a React web app.

Use Case: Build multilingual applications that cater to a global audience with ease.

7. Text-to-Speech (Client-Side)

Description: Convert text into natural-sounding speech right in your browser.

Use Case: Enhance accessibility or create interactive voice-based applications without relying on external APIs.

8. Next.js Sentiment Analysis (Client-Side)

Description: Determine the sentiment of text inputs entirely in the browser.

Use Case: Integrate sentiment analysis into your Next.js applications to gauge user feedback or monitor social media sentiment.

9. Node.js Sentiment Analysis API

Description: Build your own sentiment analysis API using Node.js.

  • Features: Scalable and easy to integrate with other services.
  • Code Repository: GitHub

Use Case: Create backend services that analyze text sentiment, useful for customer service bots, feedback systems, and more.

10. Transformers.js Demo Site: A Collection of Demos

Description: Explore a variety of AI capabilities all in one place.

  • Features: Multiple demos including text generation, translation, and more.
  • Try it Now: Demo Site
  • Code Repository: GitHub

Use Case: A one-stop-shop to explore and experiment with different AI models and tasks without any setup.

Ready to create your own app? Check out the Transformers.js template on Hugging Face to get started in one click!

Supported Tasks and Models

Transformers.js supports a wide range of tasks across Natural Language Processing, Vision, Audio, and Multimodal domains.

Natural Language Processing

Task Description Links
Text Classification Assign labels or categories to text. Docs Models
Question Answering Answer questions based on context. Docs Models
Text Generation Generate text based on a prompt. Docs Models
Translation Translate text between languages. Docs Models
Summarization Summarize long texts into concise summaries. Docs Models
Zero-Shot Classification Classify text into custom labels without additional training. Docs Models

...and many more!

Vision

Task Description Links
Image Classification Assign labels to images. Docs Models
Object Detection Detect objects within images. Docs Models
Image Segmentation Segment images into regions. Docs Models
Depth Estimation Estimate depth from images. Docs Models

Audio

Task Description Links
Automatic Speech Recognition Transcribe speech to text. Docs Models
Audio Classification Classify audio clips. Docs Models
Text-to-Speech Convert text into speech audio. Docs Models

Multimodal

Task Description Links
Image-to-Text Generate text descriptions from images. Docs Models
Zero-Shot Image Classification Classify images with custom labels without training. Docs Models
Zero-Shot Audio Classification Classify audio clips with custom labels without training. Docs Models
Document Question Answering Answer questions based on document images. Docs Models

How to Use AI Without Coding

You don't need to be a developer to harness the power of AI. Here's how you can use and even deploy AI applications without writing code.

1. Try Online Demos

All the demos listed above are accessible via your browser. Simply click on the demo links and start interacting with AI models instantly.

2. Use Hugging Face Spaces

Hugging Face Spaces is a free platform where you can find and deploy AI applications.

  • Explore Spaces: Browse through a wide range of AI apps created by the community.
  • Duplicate a Space: Want to customize an app? You can duplicate an existing Space and make changes via a simple web interface.
  • No Coding Required: Many Spaces offer settings and configurations that you can adjust without touching code.

3. Deploy to Your Own Domain

You can deploy AI apps to your own domain for free using platforms like Hugging Face Spaces, Vercel, or GitHub Pages.

Deploy on Hugging Face Spaces

  1. Step 1: Sign up for a free Hugging Face account.
  2. Step 2: Go to the Transformers.js template.
  3. Step 3: Fill in the details and click "Create Space".
  4. Step 4: Your app will be deployed and hosted for free. You can even set a custom domain.

Deploy on Vercel

  1. Step 1: Fork or download the code from the demo's GitHub repository.
  2. Step 2: Sign up for a free Vercel account.
  3. Step 3: Import the project and follow the deployment instructions.
  4. Step 4: Your app will be live on a Vercel URL, and you can add a custom domain.

Deploy on GitHub Pages

  1. Step 1: Fork the repository of the demo you want to deploy.
  2. Step 2: Enable GitHub Pages in the repository settings.
  3. Step 3: Your app will be accessible at https://yourusername.github.io/repository-name.

Deploy AI Apps for Free

Deploying your AI-powered applications has never been easier. Here are some platforms where you can host your AI apps for free:

1. Hugging Face Spaces

Hugging Face Spaces allows you to deploy AI applications effortlessly. It's integrated with GitHub, making it seamless to update your app.

  • Pros: Easy integration with Hugging Face models, community support.
  • Cons: Limited customization compared to other platforms.

2. Vercel

Vercel is a popular platform for deploying frontend applications, including those built with React, Next.js, and more.

  • Pros: Fast deployments, automatic scaling, easy integration with GitHub.
  • Cons: Limited server-side capabilities on the free tier.

3. GitHub Pages

GitHub Pages is ideal for hosting static websites directly from your GitHub repository.

  • Pros: Completely free, easy to set up, integrates with GitHub.
  • Cons: Limited to static content; dynamic functionalities require additional services.

Integrate AI into Your Application

Integrating AI into your web application has never been easier. Here's a step-by-step guide to get you started.

1. Install Transformers.js

If you're using Node.js or a module bundler:

npm install @xenova/transformers

For direct browser usage, include the script:

<script src="https://cdn.jsdelivr.net/npm/@xenova/transformers/dist/transformers.min.js"></script>

2. Choose a Task and Model

Decide what you want your application to do. Visit the Hugging Face Model Hub to find models compatible with Transformers.js.

For example, to perform sentiment analysis:

const { pipeline } = require('@xenova/transformers');
const classifier = await pipeline('sentiment-analysis');

3. Run Inference

Use the loaded pipeline to process inputs:

const result = await classifier('I love using Transformers.js!');
console.log(result);
// Output: [{ label: 'POSITIVE', score: 0.9998 }]

4. Optimize and Customize

Transformers.js allows for customization to suit your needs:

  • Model Quantization: Reduce model size for faster loading.
  • Cache Models Locally: Improve performance by caching models in IndexedDB.
  • Backend Selection: Choose between WebGL, WebAssembly, or WebGPU for computation.

5. Deploy and Share

Once your application is ready, deploy it and share it with the world! You can host it on platforms like Hugging Face Spaces, Vercel, or GitHub Pages for free.

Conclusion

Transformers.js democratizes access to advanced AI models by bringing them directly into the browser. Whether you're building a personal project, enhancing a web application, or experimenting with AI, Transformers.js provides a powerful and accessible toolset.

Join the Community

Start harnessing the power of AI in your browser today with Transformers.js!

Note: This article is inspired by and incorporates content from the Transformers.js documentation and examples.

Upvote
2