- Transformers.js는 서버 없이 브라우저에서 🤗 Transformers 모델을 실행하기 위한 라이브러리로, Hugging Face의 Python
transformers와 기능적으로 동등하고 유사한 API를 목표로 함
- 모델 실행에는 ONNX Runtime을 사용하며, PyTorch·TensorFlow·JAX 사전학습 모델은 🤗 Optimum으로 ONNX 변환해 사용할 수 있음
pipeline API로 감성 분석 같은 작업을 Python과 비슷한 방식으로 호출하며, 모델 ID나 경로를 두 번째 인자로 지정해 다른 모델을 선택할 수 있음- 브라우저 기본 실행은 WASM 기반 CPU이며,
device: 'webgpu'로 WebGPU 실행을 선택할 수 있지만 WebGPU API는 여러 브라우저에서 아직 실험적임
- 웹 브라우저처럼 자원이 제한된 환경에서는
dtype으로 "fp32", "fp16", "q8", "q4" 같은 데이터 타입을 선택해 대역폭과 성능을 조정할 수 있음
브라우저에서 실행하는 Transformers
- Transformers.js는 서버 없이 브라우저에서 🤗 Transformers를 직접 실행하도록 설계된 라이브러리임
- Hugging Face의 Python transformers 라이브러리와 기능적으로 동등한 사용 경험을 목표로 하며, 같은 사전학습 모델을 매우 유사한 API로 실행할 수 있음
- 지원 작업은 여러 모달리티에 걸쳐 있음
- 자연어 처리: 텍스트 분류, 개체명 인식, 질의응답, 언어 모델링, 요약, 번역, 객관식, 텍스트 생성
- 컴퓨터 비전: 이미지 분류, 객체 탐지, 세그멘테이션, 깊이 추정
- 오디오: 자동 음성 인식, 오디오 분류, 텍스트 음성 변환
- 멀티모달: 임베딩, 제로샷 오디오 분류, 제로샷 이미지 분류, 제로샷 객체 탐지
실행 방식과 모델 변환
설치와 브라우저 사용
npm i @huggingface/transformers
- 번들러 없이 vanilla JS에서도 사용할 수 있으며, CDN이나 정적 호스팅을 통해 ES Modules로 가져올 수 있음
<script type="module">
import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.2.0';
</script>
Python과 비슷한 pipeline API
pipeline API는 사전학습 모델, 입력 전처리, 출력 후처리를 묶어 라이브러리에서 모델을 실행하는 가장 쉬운 방법임- Python
transformers의 감성 분석 예제와 유사하게 JavaScript에서도 pipeline('sentiment-analysis')를 만들고 텍스트를 입력해 결과를 받을 수 있음
import { pipeline } from '@huggingface/transformers';
const pipe = await pipeline('sentiment-analysis');
const out = await pipe('I love transformers!');
// [{'label': 'POSITIVE', 'score': 0.999817686}]
- 다른 모델을 쓰려면
pipeline 함수의 두 번째 인자로 모델 ID 또는 경로를 지정함
const pipe = await pipeline(
'sentiment-analysis',
'Xenova/bert-base-multilingual-uncased-sentiment'
);
CPU, WebGPU, 양자화 옵션
- 브라우저 실행 기본값은 WASM 기반 CPU 실행임
- GPU에서 실행하려면
device: 'webgpu'를 설정함
const pipe = await pipeline(
'sentiment-analysis',
'Xenova/distilbert-base-uncased-finetuned-sst-2-english',
{
device: 'webgpu',
}
);
- WebGPU 관련 자세한 내용은 WebGPU guide에 있음
- WebGPU API는 여러 브라우저에서 아직 실험적이므로 문제가 발생하면 WebGPU 버그 리포트를 제출하도록 안내함
- 자원이 제한된 웹 브라우저 환경에서는 양자화된 모델 사용이 권장됨
dtype 옵션으로 모델 데이터 타입을 선택함- 일반적인 선택지는
"fp32" WebGPU 기본값, "fp16", "q8" WASM 기본값, "q4"임
- 자세한 내용은 quantization guide에 있음
const pipe = await pipeline(
'sentiment-analysis',
'Xenova/distilbert-base-uncased-finetuned-sst-2-english',
{
dtype: 'q4',
}
);
커스텀 설정
import { env } from '@huggingface/transformers';
env.localModelPath = '/path/to/models/';
env.allowRemoteModels = false;
env.backends.onnx.wasm.wasmPaths = '/path/to/files/';
지원 작업과 모델 범위
- Hugging Face Hub에서 호환 모델을 찾으려면 transformers.js 라이브러리 태그로 필터링할 수 있음
- 지원 작업은 자연어 처리, 비전, 오디오, 멀티모달, 강화학습에 걸쳐 있으며 일부 작업은 아직 지원되지 않음
- 자연어 처리에서는 fill-mask, question-answering, summarization, text-classification, text-generation, token-classification, translation, zero-shot-classification, feature-extraction 등이 지원됨
- 비전에서는 background-removal, depth-estimation, image-classification, image-segmentation, image-to-image, object-detection, image-feature-extraction 등이 지원됨
- 오디오에서는 audio-classification, automatic-speech-recognition, text-to-speech가 지원됨
- 멀티모달에서는 document-question-answering, image-to-text, zero-shot audio/image classification, zero-shot object detection 등이 지원됨
- 아직 지원되지 않는 작업도 명시되어 있음
- table-question-answering, mask-generation, video-classification, unconditional-image-generation
- audio-to-audio, tabular-classification, tabular-regression
- text-to-image, visual-question-answering
- 지원 모델 아키텍처 목록에는 BERT, BART, CLIP, DistilBERT, Whisper, Llama, Qwen, Gemma, Phi, Segment Anything, ViT 등 다수의 모델 계열이 포함됨
- 원하는 작업이나 모델이 목록에 없거나 아직 지원되지 않으면 기능 요청을 열 수 있음