Transformers.js v3 릴리스, WebGPU 가속, 확장된 모델 지원 및 서버‑사이드 JavaScript 호환성 추가

TL;DR

Transformers.js v3는 WebGPU 가속(최대 100배 빠른 WASM 대비), 새로운 양자화 포맷, 120개의 모델 아키텍처 지원, Node.js(ESM + CJS), Deno 및 Bun과의 호환성을 추가하여 브라우저와 서버‑사이드 JavaScript 런타임에서 고성능 추론을 직접 가능하게 합니다.

빠른 설치

NPM에서 라이브러리를 설치할 수 있습니다:

npm i @huggingface/transformers

ES 모듈 또는 CDN을 통해 파이프라인을 가져올 수 있습니다:

import { pipeline } from "@huggingface/transformers";
// or
import { pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0";

전체 문서는 https://hf.co/docs/transformers.js 에서 확인할 수 있습니다.

WebGPU 지원 – 대규모 속도 향상

WebGPU는 GPU를 일반 목적 연산에 노출하는 최신 웹 표준으로, WebGL을 대체합니다. 2024년 10월 현재 약 70 %의 브라우저가 WebGPU를 지원하지만, 일부는 기능 플래그가 필요할 수 있습니다(Firefox dom.webgpu.enabled, Safari WebGPU, 오래된 Chromium enable-unsafe-webgpu).

Transformers.js에서 WebGPU 활성화

라이브러리는 ONNX Runtime Web과 통합됩니다; 모델을 로드할 때 device: "webgpu"를 전달하면 GPU 가속을 간단히 활성화할 수 있습니다.

텍스트 임베딩 예시

const extractor = await pipeline(
  "feature-extraction",
  "mixedbread-ai/mxbai-embed-xsmall-v1",
  { device: "webgpu" }
);
const embeddings = await extractor(["Hello world!", "Example sentence."], { pooling: "mean", normalize: true });
console.log(embeddings.tolist());

Whisper ASR 예시

const transcriber = await pipeline(
  "automatic-speech-recognition",
  "onnx-community/whisper-tiny.en",
  { device: "webgpu" }
);
const output = await transcriber("https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/jfk.wav");
console.log(output);

이미지 분류 예시

const classifier = await pipeline(
  "image-classification",
  "onnx-community/mobilenetv4_conv_small.e2400_r224_in1k",
  { device: "webgpu" }
);
const result = await classifier("https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/tiger.jpg");
console.log(result);

이 데모들은 WASM에서 몇 초가 걸리던 추론이 이제 GPU에서 실시간으로 실행된다는 것을 보여줍니다.

새로운 양자화 포맷 (dtype 매개변수)

이전에는 라이브러리가 이진 quantized 플래그(q8 vs fp32)를 제공했습니다. 버전 3에서는 이를 유연한 dtype 인자로 교체했으며, 다음과 같은 다양한 정밀도를 선택할 수 있습니다:

  • 전체 정밀도: "fp32"
  • 반 정밀도: "fp16"
  • 8비트: "q8", "int8", "uint8"
  • 4비트: "q4", "bnb4", "q4f16"

기본 사용법 – 4비트 Qwen2.5

const generator = await pipeline(
  "text-generation",
  "onnx-community/Qwen2.5-0.5B-Instruct",
  { dtype: "q4", device: "webgpu" }
);
const msgs = [{ role: "system", content: "You are a helpful assistant." }, { role: "user", content: "Tell me a funny joke." }];
const out = await generator(msgs, { max_new_tokens: 128 });
console.log(out[0].generated_text.at(-1).content);

인코더‑디코더 모델을 위한 모듈별 dtype

Whisper, Florence‑2와 같은 일부 모델은 양자화에 민감합니다. 이제 모듈 이름에서 dtype로 매핑을 제공할 수 있습니다:

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",
  }
);

전체 예시는 모델, 프로세서, 토크나이저를 로드하고 이미지를 준비한 뒤 상세 캡션을 생성하여 모듈별 양자화의 실용적 영향을 보여줍니다.

120개의 지원 아키텍처 – 더 넓은 모달리티 커버리지

Transformers.js v3는 이제 텍스트, 비전, 오디오, 멀티모달 작업을 아우르는 120개의 모델 패밀리를 지원합니다. 주요 추가 항목은 다음과 같습니다:

  • Phi‑3 및 Phi‑3.5 (디바이스에서 실행되는 고성능 LLM)
  • Gemma 및 Gemma 2 (Google의 오픈 모델)
  • LLaVA, Moondream, Florence‑2 (비전‑언어)
  • MusicGen (오디오 생성)
  • Depth Pro, RT‑DETR, Sapiens, PyAnnote (특수 비전 및 오디오 작업)

원본 게시물의 버블 다이어그램이 이러한 새로운 패밀리를 시각화합니다. 전체 목록은 https://huggingface.co/docs/transformers.js/index#models 에서 확인할 수 있습니다.

예제 프로젝트 및 템플릿 – WebGPU 시연

이번 릴리스에는 WebGPU 가속을 보여주는 25개의 새로운 예제 저장소가 포함됩니다. 주요 예시는 다음과 같습니다:

  • Phi‑3.5 WebGPU – 3.8 B 파라미터 LLM을 브라우저에서 완전히 실행
  • Whisper Turbo WebGPU – Whisper 모델을 GPU에서 사용해 실시간 음성‑텍스트 변환

모든 예제는 https://github.com/huggingface/transformers.js-examples 에서 호스팅되며, 해당 위치에 통합될 예정입니다.

허브에 1,200개 이상의 사전 변환 모델

커뮤니티는 이미 1,200개가 넘는 모델을 Transformers.js에 필요한 ONNX 포맷으로 변환했습니다. 검색 가능한 목록은 https://hf.co/models?library=transformers.js 에 있습니다.

맞춤형 모델을 변환하려면 제공된 스크립트를 사용하세요:

python -m scripts.convert --quantize --model_id <model_name_or_path>

업로드 후에는 transformers.js 태그를 저장소에 추가하여 검색성을 높입니다.

서버‑사이드 JavaScript 런타임 지원

Transformers.js v3는 가장 인기 있는 세 가지 런타임에서 실행됩니다:

런타임 호환성 예시 저장소
Node.js (ESM + CJS) 전체 지원, npm 패키지 https://github.com/huggingface/transformers.js-examples/tree/main/node-esm
Deno 보안 기본값, 실험적 WebGPU https://github.com/huggingface/transformers.js-examples/tree/main/deno-embed
Bun 고성능 번들러 및 런타임 https://github.com/huggingface/transformers.js-examples/tree/main/bun

이를 통해 개발자는 Python 의존성 없이 서버, 엣지 디바이스, 혹은 서버리스 함수에서 추론을 실행할 수 있습니다.

NPM 및 GitHub 새 위치

패키지는 이제 공식 Hugging Face 스코프인 @huggingface/transformers(이전 @xenova/transformers)로 배포됩니다.

소스 코드는 https://github.com/huggingface/transformers.js 로 이동했습니다. 이는 이슈 트래킹, 풀‑리퀘스트 기여, 커뮤니티 참여를 Hugging Face 조직 아래에 집중시킵니다.

시사점

  • Performance: WebGPU는 브라우저 기반 추론을 데스크톱 수준 속도로 끌어올려, 인터랙티브 채팅, 실시간 전사, 디바이스 비전 등 실시간 애플리케이션을 가능하게 합니다.
  • Flexibility: 확장된 dtype API와 모듈별 양자화를 통해 개발자는 메모리, 지연시간, 정확도 사이의 균형을 다양한 하드웨어에 맞춰 조정할 수 있습니다.
  • Ecosystem growth: 120개의 아키텍처와 1,200개 이상의 사전 변환 모델을 지원함으로써 JavaScript 환경에서 최신 모델을 사용하는 장벽이 낮아집니다.
  • Portability: Node.js, Deno, Bun과의 호환성 덕분에 동일 코드를 브라우저, 서버리스 백엔드, 엣지 런타임 어디서든 실행할 수 있어 배포 파이프라인이 단순해집니다.
  • Community alignment: 패키지와 저장소를 Hugging Face 조직 아래로 옮김으로써 브랜드가 통합되고, 더 넓은 HF 생태계의 기여를 촉진합니다.

시작 체크리스트

  1. npm 또는 CDN을 통해 @huggingface/transformers를 설치합니다.
  2. Hub에서 모델을 선택합니다 (transformers.js 태그가 있는지 확인).
  3. 디바이스를 결정합니다 ("cpu", "wasm", 또는 "webgpu").
  4. 필요에 따라 양자화를 위한 dtype 또는 모듈별 dtype 매핑을 선택합니다.
  5. 고수준 pipeline API 또는 저수준 모델 클래스를 사용해 추론을 실행합니다.
  6. 필요에 따라 동일한 코드를 Node.js, Deno, 또는 Bun에 배포합니다.

참고 자료

이 글은 2024‑10‑22에 발표된 공식 Hugging Face 블로그 포스트 “Transformers.js v3: WebGPU Support, New Models & Tasks, and More…”를 요약한 것입니다.

Sources