Leveraging Hugging Face with TypeScript using huggingface.js

Explore how to integrate Hugging Face models into your TypeScript projects using the huggingface.js library for natural language processing (NLP), computer vision, and more.

---

🧠 Introduction

Hugging Face is a leading platform for accessing state-of-the-art machine learning models. Its Transformers library makes powerful models like BERT and GPT easily accessible for developers and researchers.

With huggingface.js, you can run these models in your JavaScript or TypeScript web apps directly in the browser, no server needed.

In this post, you'll learn:

• How to set up Hugging Face with TypeScript.
• How to use pre-trained models like image-to-text and text-generation.
• Real-world code examples for NLP and vision tasks.
• Helpful resources to keep learning.

---

⚙️ 1. Getting Started

1. Create a Hugging Face account
   👉 Go to huggingface.co and sign up.

2. Generate your API token
   Navigate to your Settings > Access Tokens and copy your API key.

3. Store your token in a .env file: TOKEN=your_huggingface_token

---

🛠 2. Setting Up a TypeScript Project

Install the required libraries:

npm install @huggingface/inference dotenv
In your TypeScript code:

import { HfInference } from '@huggingface/inference';
import * as dotenv from 'dotenv';

dotenv.config();

const inference = new HfInference(process.env.TOKEN!);

🖼️ 3. Example: Image-to-Text with Transformers.js

Let’s caption an image using the vit-gpt2-image-captioning model:

const model = 'nlpconnect/vit-gpt2-image-captioning';
const imageUrl = 'https://images.pexels.com/photos/673020/pexels-photo-673020.jpeg';

const response = await fetch(imageUrl);
const imageBlob = await response.blob();

const result = await inference.imageToText({
  data: imageBlob,
  model
});

console.log(result);
// Output: { generated_text: 'a mountain range with a sky background' }

💬 4. Example: Text-Based Models

You can also use NLP models for tasks like Q&A or text generation:

Question Answering

await inference.questionAnswer({
  model: 'deepset/roberta-base-squad2',
  inputs: {
    question: 'What is the capital of France?',
    context: 'The capital of France is Paris.'
  }
});

Expected output:

{ 
  score: 0.97, 
  start: 25, 
  end: 30, 
  answer: 'Paris' 
}

Text Generation

await inference.textGeneration({
  model: 'gpt2',
  inputs: 'The answer to the universe is'
});

Expected output:

{
  generated_text: "The answer to the universe is really no-one at all. It's just an internal one. A single one at that..."
}

🔊 5. Bonus: Audio & Vision Models

Speech Recognition

await inference.automaticSpeechRecognition({
  model: 'facebook/wav2vec2-large-960h-lv60-self',
  data: readFileSync('test/sample1.flac')
});

Image Classification

await inference.imageClassification({
  model: 'google/vit-base-patch16-224',
  data: readFileSync('test/cheetah.png')
});

🧩 6. Using Built-in Model Wrappers

For quicker experimentation, you can explore ready-to-use functions in the Huggingface.js inference docs.

import { HfInference } from '@huggingface/inference';

const hf = new HfInference('your access token');

await hf.textClassification({
  model: 'distilbert-base-uncased-finetuned-sst-2-english',
  inputs: 'I love this product!'
});

✅ 7. Conclusion

Hugging Face, together with TypeScript and huggingface.js, offers a powerful yet easy-to-use stack for integrating AI features into web apps — no backend required.

From question answering to image captioning, you can start building intelligent applications today.

📚 8. Additional Resources

Hugging Face Documentation – Complete reference for using models and APIs.

Hugging Face Community Forum – Ask questions and connect with developers.

Huggingface.js GitHub Repo – Explore and contribute to the library.

Image Captioning Model Example – Try the model used in this blog.

Thank you for reading! Happy coding! 👨‍💻✨