Transformers.js yang Bisa Dijalankan Langsung di Browser

 (github.com/xenova)
3 poin oleh GN⁺ 2024-04-13 | 1 komentar | Bagikan ke WhatsApp
  • Transformers.js adalah library untuk menjalankan model 🤗 Transformers di browser tanpa server, dengan tujuan menghadirkan pengalaman yang setara secara fungsional dan API yang mirip dengan transformers Python dari Hugging Face
  • Untuk menjalankan model, library ini menggunakan ONNX Runtime, dan model pralatih PyTorch·TensorFlow·JAX dapat dikonversi ke ONNX menggunakan 🤗 Optimum
  • Dengan API pipeline, tugas seperti analisis sentimen dapat dipanggil dengan cara yang mirip Python, dan model lain dapat dipilih dengan menentukan ID model atau path sebagai argumen kedua
  • Eksekusi default di browser menggunakan CPU berbasis WASM, dan eksekusi WebGPU dapat dipilih dengan device: 'webgpu', tetapi API WebGPU masih eksperimental di beberapa browser
  • Dalam lingkungan dengan sumber daya terbatas seperti browser web, tipe data seperti "fp32", "fp16", "q8", dan "q4" dapat dipilih melalui dtype untuk menyesuaikan bandwidth dan performa

Menjalankan Transformers di Browser

  • Transformers.js adalah library yang dirancang untuk menjalankan 🤗 Transformers langsung di browser tanpa server
  • Library ini menargetkan pengalaman penggunaan yang setara secara fungsional dengan library Python transformers dari Hugging Face, sehingga model pralatih yang sama dapat dijalankan dengan API yang sangat mirip
  • Tugas yang didukung mencakup berbagai modalitas
    • Pemrosesan bahasa alami: klasifikasi teks, pengenalan entitas bernama, tanya jawab, language modeling, peringkasan, penerjemahan, pilihan ganda, pembuatan teks
    • Computer vision: klasifikasi gambar, deteksi objek, segmentasi, estimasi kedalaman
    • Audio: pengenalan suara otomatis, klasifikasi audio, text-to-speech
    • Multimodal: embedding, klasifikasi audio zero-shot, klasifikasi gambar zero-shot, deteksi objek zero-shot

Cara Eksekusi dan Konversi Model

Instalasi dan Penggunaan di Browser

  • Paket NPM diinstal dengan perintah berikut
npm i @huggingface/transformers
  • Dapat juga digunakan di vanilla JS tanpa bundler, dan diimpor sebagai ES Modules melalui CDN atau static hosting
<script type="module">
    import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.2.0';
</script>

API pipeline yang Mirip Python

  • API pipeline adalah cara termudah untuk menjalankan model di library ini dengan menggabungkan model pralatih, preprocessing input, dan postprocessing output
  • Mirip dengan contoh analisis sentimen di transformers Python, di JavaScript juga bisa membuat pipeline('sentiment-analysis'), memasukkan teks, lalu menerima hasilnya
import { pipeline } from '@huggingface/transformers';

const pipe = await pipeline('sentiment-analysis');
const out = await pipe('I love transformers!');
// [{'label': 'POSITIVE', 'score': 0.999817686}]
  • Untuk menggunakan model lain, tentukan ID model atau path sebagai argumen kedua pada fungsi pipeline
const pipe = await pipeline(
  'sentiment-analysis',
  'Xenova/bert-base-multilingual-uncased-sentiment'
);

Opsi CPU, WebGPU, dan Kuantisasi

  • Default eksekusi di browser adalah CPU berbasis WASM
  • Untuk menjalankan di GPU, atur device: 'webgpu'
const pipe = await pipeline(
  'sentiment-analysis',
  'Xenova/distilbert-base-uncased-finetuned-sst-2-english',
  {
    device: 'webgpu',
  }
);
  • Detail lebih lanjut tentang WebGPU tersedia di WebGPU guide
  • Karena WebGPU API masih eksperimental di beberapa browser, pengguna diarahkan untuk mengirim bug report WebGPU jika terjadi masalah
  • Dalam lingkungan browser web dengan sumber daya terbatas, penggunaan model terkuantisasi direkomendasikan
    • Gunakan opsi dtype untuk memilih tipe data model
    • Pilihan umum adalah "fp32" sebagai default WebGPU, "fp16", "q8" sebagai default WASM, dan "q4"
    • Detail lebih lanjut tersedia di quantization guide
const pipe = await pipeline(
  'sentiment-analysis',
  'Xenova/distilbert-base-uncased-finetuned-sst-2-english',
  {
    dtype: 'q4',
  }
);

Konfigurasi Kustom

import { env } from '@huggingface/transformers';

env.localModelPath = '/path/to/models/';
env.allowRemoteModels = false;
env.backends.onnx.wasm.wasmPaths = '/path/to/files/';
  • Seluruh konfigurasi yang tersedia ada di API Reference
  • Saat mengonversi model PyTorch ke ONNX, pendekatan satu perintah menggunakan Optimum direkomendasikan

Tugas yang Didukung dan Cakupan Model

  • Untuk mencari model yang kompatibel di Hugging Face Hub, gunakan filter tag library transformers.js
  • Tugas yang didukung mencakup NLP, vision, audio, multimodal, dan reinforcement learning, meski beberapa tugas masih belum didukung
    • Di NLP, yang didukung antara lain fill-mask, question-answering, summarization, text-classification, text-generation, token-classification, translation, zero-shot-classification, feature-extraction, dan lainnya
    • Di vision, yang didukung antara lain background-removal, depth-estimation, image-classification, image-segmentation, image-to-image, object-detection, image-feature-extraction, dan lainnya
    • Di audio, yang didukung adalah audio-classification, automatic-speech-recognition, dan text-to-speech
    • Di multimodal, yang didukung antara lain document-question-answering, image-to-text, zero-shot audio/image classification, zero-shot object detection, dan lainnya
  • Tugas yang belum didukung juga disebutkan secara eksplisit
    • table-question-answering, mask-generation, video-classification, unconditional-image-generation
    • audio-to-audio, tabular-classification, tabular-regression
    • text-to-image, visual-question-answering
  • Daftar arsitektur model yang didukung mencakup banyak keluarga model seperti BERT, BART, CLIP, DistilBERT, Whisper, Llama, Qwen, Gemma, Phi, Segment Anything, ViT, dan lainnya
  • Jika tugas atau model yang diinginkan tidak ada dalam daftar atau belum didukung, pengguna dapat membuka feature request

Bacaan terkait

1 komentar

 
GN⁺ 2024-04-13
Komentar Hacker News
  • Library ini benar-benar keren. Sangat mudah untuk menjalankan demo cepat, jadi saya sudah beberapa kali memakainya di notebook Observable
    CLIP di browser: https://observablehq.com/@simonw/openai-clip-in-a-browser
    Deteksi objek gambar dengan detra-resnet-50: https://observablehq.com/@simonw/detect-objects-in-images
    Ukuran model awalnya terasa seperti batasan, tetapi ada cukup banyak aplikasi yang tidak terlalu masuk akal untuk dianggap mustahil hanya karena meminta pengguna dengan laptop dan koneksi yang bagus menunggu sekitar 30 detik saat loading
    Rilis terbaru menambahkan dukungan untuk kuantisasi embedding biner, jadi saya benar-benar ingin mencobanya: https://github.com/xenova/transformers.js/releases/tag/2.17....
    • Embedding biner mungkin membutuhkan reranking tambahan, tetapi sepertinya menarik untuk diuji
      Saya sudah membuat paket npm untuk transformers.js v3 dan sepertinya perlu diperbarui. Belum yakin apakah fitur ini sudah termasuk di dalamnya
      Saya mempertahankan fork terutama agar bisa berjalan di bun, dan ketika v3 dirilis nanti rencananya akan mendukung bun dengan baik. Namun WebGPU tidak akan berfungsi, meski itu fitur opsional
      [Edit: kalau ingin memakainya, kirim DM. Saya tidak ingin mempromosikan fork]
  • Saya memakai library ini untuk membuat embedding gte-small (~0,07GB) dan menyimpannya di Upstash Vector
    Walau hanya 384 dimensi, hasilnya mengejutkan bagus untuk teks per paragraf. Di leaderboard pun peringkatnya lebih tinggi daripada text-embedding-ada-002
    https://huggingface.co/spaces/mteb/leaderboard
  • Podcast Syntax baru-baru ini merilis episode tentang Transformers.js dan pengembangnya
    https://syntax.fm/show/740/local-ai-models-in-javascript-mac...
  • transformers.js benar-benar library yang keren
    Saya membuat webapp kecil untuk menghapus latar belakang gambar dengan model RMBG1.4 dari BRIA AI: https://aether.nco.dev
    Sangat menyenangkan karena tidak perlu mengirim data ke API dan tetap berjalan di smartphone. Ke depannya saya rasa akan makin banyak proyek yang memakai ini untuk model vision, bahasa, dan utilitas kecil lainnya (estimasi kedalaman, penghapusan latar belakang, dll.), dan masa depan web terlihat cerah
    Proyek berikutnya juga sudah sedang dikerjakan, dan di sana saya hampir pasti akan memakai transformers.js lagi
    • Saya memakainya untuk proyek sederhana: https://github.com/sroussey/ellmers
      Rencananya adalah menguji embedding dan strategi pencarian untuk berbagai strategi RAG yang akan dipakai di server atau aplikasi Electron
  • Benar-benar keren, tetapi sayangnya kepraktisannya terlihat cukup rendah. Model umumnya cukup besar, jadi meskipun browser bisa menjalankannya, untuk membawanya sampai ke browser diperlukan salah satu dari dua hal ini
    1. Download besar setiap kali mengunjungi situs web
    2. Download besar dan penggunaan penyimpanan tinggi untuk setiap situs yang memakai model besar. Misalnya 150 situs × model 800MB berarti memakai penyimpanan 120GB
      Keduanya kurang bagus
      Dalam jangka panjang, mungkin pendekatan yang tepat adalah browser menyertakan beberapa model bawaan dan mengeksposnya lewat Web API yang distandardisasi, tetapi saya belum mendengar ada upaya seperti itu sedang berjalan

Model di-cache per domain (menggunakan Web Cache API), jadi tidak perlu diunduh ulang setiap kali halaman dimuat. Jika ingin mempertahankan model lintas domain, Anda bisa membuat ekstensi browser dengan library ini
Bagian yang disebut terakhir sedang diupayakan, tetapi belum pada tahap yang bisa dibicarakan

  • Ini hampir sama dengan masalah yang telah mengganggu game web sejak demo asm.js Unreal/Unity pertama 10 tahun lalu, dan selama ini nyaris tidak ada kemajuan menuju solusi
    Webapp yang membutuhkan data bergigabita di sisi klien sulit dibuat secara praktis. Tidak ada cara andal untuk menjamin data akan tetap berada di cache selama yang diinginkan pengguna, dan sekalipun bisa di-cache dengan andal, karena kebijakan cache partitioning browser, setiap situs yang memakai model yang sama harus mengunduh dan memakai ruang penyimpanan secara duplikat
  • Modelnya di bawah 80MB, dan sisanya adalah LLM sehingga di luar cakupan. Whisper 40MB, embedding 23MB
    Bagian dalam komentar asli seperti “tampak sangat tidak praktis”, “model umumnya cukup besar”, dan “150 situs × model 800MB” tampaknya justru memberi catatan bahwa pemahamannya kurang
  • Beberapa model cukup kecil sehingga layak dijalankan on-device daripada mengirim semua data ke server untuk diproses
    Keunggulan besar lainnya adalah transformers juga berjalan di Node.js. Menyiapkan runtime jauh lebih mudah daripada mencocokkan kombinasi aneh Python dan dependensinya
  • Ini bukan hanya masalah browser, melainkan masalah mendasar dalam pemrosesan AI on-device
    Sepertinya akan membaik ketika sistem operasi mulai memasang model terlebih dahulu dan vendor browser juga menyediakan API yang bisa digunakan
    Meski begitu, untuk sebagian besar pekerjaan, model yang di-host di cloud kemungkinan besar akan selalu jauh lebih baik
  • Jadi sekarang kita bisa membuat plugin browser yang memilih semua sepeda atau jembatan di CAPTCHA Google?
  • Apakah pelatihan tidak mungkin? Beberapa tahun lalu saya pernah mencoba membuat dan melatih neural network kecil di browser, dan sekarang saya penasaran apakah pendekatan seperti itu akan berjalan lebih baik dengan custom transformer kecil
    • Secara teori jelas mungkin, tetapi kemungkinan masalah performa adalah alasan mengapa itu belum diimplementasikan
      Ada benchmark embedding WebGPU di Hugging Face Space yang bisa dipakai untuk memperkirakan operasi forward pass: https://huggingface.co/spaces/Xenova/webgpu-embedding-benchm...
      Itu sendiri mengesankan, tetapi pelatihan dengan latensi tersebut sepertinya akan menyakitkan. Pada fp16, batch 32, panjang sekuens 512, forward pass model 22 juta parameter memakan waktu sekitar 500ms
  • Bukankah ini juga membuka kemungkinan menjalankan model seperti ini di fungsi serverless Node.js?
    Sepertinya jelas ada potensi untuk prediksi on-demand
  • Apakah mendukung akselerasi Apple Silicon?