Tarayıcıda doğrudan çalışabilen Transformers.js

 (github.com/xenova)
3 puan yazan GN⁺ 2024-04-13 | 1 yorum | WhatsApp'ta paylaş
  • Transformers.js, 🤗 Transformers modellerini sunucu olmadan tarayıcıda çalıştırmak için kullanılan bir kütüphanedir; Hugging Face’in Python transformers kütüphanesiyle işlevsel olarak eşdeğer ve benzer bir API deneyimi sunmayı hedefler
  • Model çalıştırmak için ONNX Runtime kullanır; önceden eğitilmiş PyTorch, TensorFlow ve JAX modelleri 🤗 Optimum ile ONNX’e dönüştürülerek kullanılabilir
  • pipeline API’siyle duygu analizi gibi görevler Python’a benzer şekilde çağrılabilir; farklı bir model seçmek için ikinci argüman olarak model ID’si veya yol belirtilebilir
  • Tarayıcıdaki varsayılan çalışma modu WASM tabanlı CPU’dur; device: 'webgpu' ile WebGPU çalıştırması seçilebilir, ancak WebGPU API’si birçok tarayıcıda hâlâ deneyseldir
  • Web tarayıcısı gibi kaynakları kısıtlı ortamlarda dtype ile "fp32", "fp16", "q8", "q4" gibi veri tipleri seçilerek bant genişliği ve performans ayarlanabilir

Tarayıcıda çalışan Transformers

  • Transformers.js, 🤗 Transformers’ı sunucu olmadan doğrudan tarayıcıda çalıştırmak için tasarlanmış bir kütüphanedir
  • Hugging Face’in Python transformers kütüphanesiyle işlevsel olarak eşdeğer bir kullanım deneyimi hedefler ve aynı önceden eğitilmiş modelleri çok benzer bir API ile çalıştırabilir
  • Desteklenen görevler birden fazla modaliteye yayılır
    • Doğal dil işleme: metin sınıflandırma, adlandırılmış varlık tanıma, soru-cevap, dil modelleme, özetleme, çeviri, çoktan seçmeli, metin üretimi
    • Bilgisayarlı görü: görüntü sınıflandırma, nesne algılama, segmentasyon, derinlik tahmini
    • Ses: otomatik konuşma tanıma, ses sınıflandırma, metinden konuşmaya
    • Çok modlu: embedding, zero-shot ses sınıflandırma, zero-shot görüntü sınıflandırma, zero-shot nesne algılama

Çalışma biçimi ve model dönüştürme

Kurulum ve tarayıcıda kullanım

  • NPM paketi şu komutla kurulur
npm i @huggingface/transformers
  • Bundler olmadan vanilla JS ile de kullanılabilir; CDN veya statik hosting üzerinden ES Modules olarak içe aktarılabilir
<script type="module">
    import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.2.0';
</script>

Python’a benzer pipeline API

  • pipeline API’si, önceden eğitilmiş modeli, giriş ön işleme ve çıkış son işleme adımlarını bir araya getirerek kütüphanede model çalıştırmanın en kolay yoludur
  • Python transformers içindeki duygu analizi örneğine benzer şekilde JavaScript’te de pipeline('sentiment-analysis') oluşturup metin girerek sonuç alınabilir
import { pipeline } from '@huggingface/transformers';

const pipe = await pipeline('sentiment-analysis');
const out = await pipe('I love transformers!');
// [{'label': 'POSITIVE', 'score': 0.999817686}]
  • Farklı bir model kullanmak için pipeline fonksiyonunun ikinci argümanında model ID’si veya yolu belirtilir
const pipe = await pipeline(
  'sentiment-analysis',
  'Xenova/bert-base-multilingual-uncased-sentiment'
);

CPU, WebGPU, nicemleme seçenekleri

  • Tarayıcıda varsayılan çalışma modu WASM tabanlı CPU çalıştırmasıdır
  • GPU’da çalıştırmak için device: 'webgpu' ayarlanır
const pipe = await pipeline(
  'sentiment-analysis',
  'Xenova/distilbert-base-uncased-finetuned-sst-2-english',
  {
    device: 'webgpu',
  }
);
  • WebGPU ile ilgili ayrıntılar WebGPU guide içinde yer alır
  • WebGPU API’si birçok tarayıcıda hâlâ deneysel olduğundan, sorun yaşanırsa WebGPU hata raporu gönderilmesi önerilir
  • Kaynakları kısıtlı web tarayıcısı ortamlarında nicemlenmiş modellerin kullanılması tavsiye edilir
    • dtype seçeneğiyle model veri tipi belirlenir
    • Yaygın seçenekler "fp32" WebGPU varsayılanı, "fp16", "q8" WASM varsayılanı ve "q4" olarak sıralanır
    • Ayrıntılar için quantization guide sayfasına bakılabilir
const pipe = await pipeline(
  'sentiment-analysis',
  'Xenova/distilbert-base-uncased-finetuned-sst-2-english',
  {
    dtype: 'q4',
  }
);

Özel yapılandırma

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

env.localModelPath = '/path/to/models/';
env.allowRemoteModels = false;
env.backends.onnx.wasm.wasmPaths = '/path/to/files/';
  • Kullanılabilen tüm ayarlar API Reference içinde yer alır
  • PyTorch modellerini ONNX’e dönüştürürken Optimum kullanan tek komutlu yaklaşım önerilir

Desteklenen görevler ve model kapsamı

  • Hugging Face Hub üzerinde uyumlu modelleri bulmak için transformers.js kütüphane etiketiyle filtreleme yapılabilir
  • Desteklenen görevler doğal dil işleme, görü, ses, çok modlu ve pekiştirmeli öğrenme alanlarına yayılır; bazı görevler ise henüz desteklenmemektedir
    • Doğal dil işlemede fill-mask, question-answering, summarization, text-classification, text-generation, token-classification, translation, zero-shot-classification, feature-extraction ve benzeri görevler desteklenir
    • Görü alanında background-removal, depth-estimation, image-classification, image-segmentation, image-to-image, object-detection, image-feature-extraction ve benzeri görevler desteklenir
    • Seste audio-classification, automatic-speech-recognition ve text-to-speech desteklenir
    • Çok modluda document-question-answering, image-to-text, zero-shot audio/image classification, zero-shot object detection ve benzeri görevler desteklenir
  • Henüz desteklenmeyen görevler de açıkça belirtilmiştir
    • table-question-answering, mask-generation, video-classification, unconditional-image-generation
    • audio-to-audio, tabular-classification, tabular-regression
    • text-to-image, visual-question-answering
  • Desteklenen model mimarileri listesinde BERT, BART, CLIP, DistilBERT, Whisper, Llama, Qwen, Gemma, Phi, Segment Anything, ViT dahil çok sayıda model ailesi yer alır
  • İstenen görev veya model listede yoksa ya da henüz desteklenmiyorsa bir özellik talebi açılabilir

İlgili okumalar

1 yorum

 
GN⁺ 2024-04-13
Hacker News yorumları
  • Bu kütüphane gerçekten harika. Hızlı bir demo ayağa kaldırmak çok kolay olduğu için Observable notebook’larda birkaç kez kullandım
    Tarayıcıda CLIP: https://observablehq.com/@simonw/openai-clip-in-a-browser
    detra-resnet-50 ile görüntü nesne tespiti: https://observablehq.com/@simonw/detect-objects-in-images
    Model boyutu ilk başta bir kısıt gibi geliyor, ama iyi bir dizüstü bilgisayarı ve bağlantısı olan bir kullanıcıya yükleme için yaklaşık 30 saniye beklemesi gerektiğini söylemenin makul dışı olmadığı epey uygulama var
    En son sürüme ikili embedding niceleme desteği eklendi; mutlaka denemek istiyorum: https://github.com/xenova/transformers.js/releases/tag/2.17....
    • İkili embedding’ler ek bir yeniden sıralama gerektirecek, ama test etmesi eğlenceli olabilir
      transformers.js v3 için bir npm paketi hazırlamıştım, güncellemem gerekecek gibi. Bu özelliği henüz içerip içermediğinden emin değilim
      Çatalı esas olarak bun üzerinde çalıştırmak için tutuyordum; v3 yayınlanınca bun’u düzgün desteklemeyi planlıyorlar. Yalnız WebGPU çalışmayacak, ama bu isteğe bağlı bir özellik
      [Düzenleme: Kullanmak istersen DM at. Çatalın reklamını yapmak istemiyorum]
  • Bu kütüphaneyle gte-small (~0,07 GB) embedding’leri oluşturup Upstash Vector’de saklıyorum
    Yalnızca 384 boyutlu ama paragraf düzeyindeki metinlerde şaşırtıcı derecede iyi çalışıyor. Sıralama tablosunda da text-embedding-ada-002’nin üstünde yer alıyor
    https://huggingface.co/spaces/mteb/leaderboard
  • Syntax podcast’i yakın zamanda Transformers.js ve geliştiricisini konu alan bir bölüm yayımladı
    https://syntax.fm/show/740/local-ai-models-in-javascript-mac...
  • transformers.js gerçekten harika bir kütüphane
    BRIA AI’ın RMBG1.4 modeliyle görüntü arka planı kaldırma yapan küçük bir web uygulaması yaptım: https://aether.nco.dev
    Verileri bir API’ye göndermek zorunda olmamak ve akıllı telefonda da çalışması çok güzel. İleride küçük görme, dil ve diğer yardımcı modeller (derinlik tahmini, arka plan kaldırma vb.) için bunu kullanan daha çok proje göreceğimizi düşünüyorum; web’in geleceği parlak görünüyor
    Sıradaki proje üzerinde de şimdiden çalışıyorum ve onda da kesinlikle transformers.js’i tekrar kullanacağım
    • Basit bir projede kullanıyorum: https://github.com/sroussey/ellmers
      Planım, sunucuda veya Electron uygulamasında kullanılacak çeşitli RAG stratejileri için embedding ve arama stratejilerini test etmek
  • Gerçekten harika, ama ne yazık ki pratikliği oldukça düşük görünüyor. Modeller genelde epey büyük olduğundan, tarayıcı çalıştırabilse bile onları tarayıcıya getirme sürecinde şu ikisinden biri gerekiyor
    1. Web sitesini her ziyaret ettiğinizde büyük bir indirme
    2. Büyük model kullanan her site için büyük bir indirme ve yüksek depolama kullanımı. Örneğin 150 site × 800 MB model, 120 GB depolama kullanır
      İkisi de pek iyi değil
      Uzun vadede doğru yaklaşım, tarayıcının bazı modelleri yerleşik olarak sunup standartlaştırılmış bir web API’siyle dışa açması olabilir; ama böyle bir çalışmanın sürdüğünü henüz duymadım

Modeller alana göre önbelleğe alınır (Web Cache API kullanılarak); sayfa her yüklendiğinde yeniden indirilmesi gerekmez. Modelleri alan adları arasında kalıcı tutmak istiyorsanız bu kütüphaneyle bir tarayıcı uzantısı oluşturabilirsiniz
Son söylediğim kısım için çalışmalar sürüyor, ama henüz konuşulabilecek aşamada değil

  • 10 yıl önceki ilk Unreal/Unity asm.js demosundan beri web oyunlarının başını ağrıtan sorunla neredeyse aynı; bu süre içinde çözüm yönünde pek ilerleme olmadı
    İstemcide gigabaytlarca veri gerektiren web uygulamalarını pratik biçimde yapmak zor. Kullanıcının istediği kadar uzun süre önbellekte kalacağını garanti edecek güvenilir bir yol yok; güvenilir şekilde önbelleğe alınabilse bile tarayıcıların önbellek bölümleme politikası yüzünden aynı modeli kullanan her site için indirme ve depolama alanı mükerrer hale geliyor
  • Modeller 80 MB’ın altında; geri kalanı LLM olduğu için kapsam dışında. Whisper 40 MB, embedding ise 23 MB
    Asıl yorumdaki “çok pratik dışı görünüyor”, “modeller genelde oldukça büyük”, “150 site × 800 MB model” gibi kısımlar, kişinin kendi anlayış eksikliğini de zaten bir çekince olarak koyduğunu gösteriyor gibi
  • Bazı modeller epey küçük; bu yüzden tüm veriyi işlemek için sunucuya göndermektense cihaz üzerinde çalıştırmaya değer
    Bir diğer büyük avantaj da transformers’ın Node.js’te de çalışması. Python ve bağımlılıklarının tuhaf kombinasyonunu tutturmaktansa çalışma ortamını oluşturmak çok daha kolay
  • Bu yalnızca tarayıcıya özgü bir sorun değil; cihaz üzerinde yapay zeka işlemenin özünde olan bir sorun
    İşletim sistemleri modelleri önceden yüklemeye ve tarayıcı üreticilerinin de kullanabileceği API’ler sunmaya başladığında daha iyi olacak gibi
    Yine de çoğu iş için bulutta barındırılan modellerin her zaman çok daha iyi olma ihtimali yüksek
  • Artık Google CAPTCHA’da bisikletleri ya da köprüleri seçen bir tarayıcı eklentisi yapabilecek miyiz?
  • Eğitim mümkün değil mi? Birkaç yıl önce tarayıcıda küçük bir sinir ağı oluşturup eğitme işiyle uğraşmıştım; şimdi küçük bir özel transformer ile bu yaklaşımın daha iyi çalışıp çalışmayacağını merak ediyorum
    • Teorik olarak kesinlikle mümkün, ama muhtemelen henüz uygulanmamış olmasının nedeni performans sorunu
      Hugging Face Space’te WebGPU embedding benchmark’ı var; ileri yayılım performansını buradan kabaca görebilirsiniz: https://huggingface.co/spaces/Xenova/webgpu-embedding-benchm...
      Kendi başına etkileyici, ama bu gecikmeyle eğitim acı verici olur gibi. fp16, batch 32, sequence length 512’de 22 milyon parametreli bir modelin ileri yayılımı yaklaşık 500 ms sürüyor
  • Bu, Node.js serverless function içinde böyle modelleri çalıştırma ihtimalini de açmıyor mu?
    İsteğe bağlı tahmin için de kesinlikle bir potansiyel doğuyor gibi
  • Apple Silicon hızlandırma desteği var mı?