Transformers.js ที่รันได้โดยตรงในเบราว์เซอร์

 (github.com/xenova)
3 คะแนน โดย GN⁺ 2024-04-13 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Transformers.js เป็นไลบรารีสำหรับรันโมเดล 🤗 Transformers ในเบราว์เซอร์โดยไม่ต้องมีเซิร์ฟเวอร์ โดยมุ่งให้มีความสามารถเทียบเท่าและมี API ใกล้เคียงกับ Python transformers ของ Hugging Face
  • การรันโมเดลใช้ ONNX Runtime และโมเดลที่พรีเทรนด้วย PyTorch·TensorFlow·JAX สามารถแปลงเป็น ONNX เพื่อใช้งานได้ด้วย 🤗 Optimum
  • สามารถเรียกใช้งานงานอย่างการวิเคราะห์อารมณ์ด้วย API แบบ pipeline ในลักษณะคล้าย Python และเลือกโมเดลอื่นได้โดยระบุ model ID หรือพาธเป็นอาร์กิวเมนต์ตัวที่สอง
  • ค่าปริยายในการรันบนเบราว์เซอร์คือ CPU แบบ WASM และสามารถเลือกให้รันด้วย WebGPU ได้ผ่าน device: 'webgpu' แต่ WebGPU API ยังเป็นฟีเจอร์ทดลองในหลายเบราว์เซอร์
  • ในสภาพแวดล้อมที่ทรัพยากรจำกัดอย่างเว็บเบราว์เซอร์ สามารถเลือกชนิดข้อมูลอย่าง "fp32", "fp16", "q8", "q4" ผ่าน dtype เพื่อปรับแบนด์วิดท์และประสิทธิภาพได้

รัน Transformers ในเบราว์เซอร์

  • Transformers.js เป็นไลบรารีที่ออกแบบมาเพื่อให้รัน 🤗 Transformers ได้โดยตรงในเบราว์เซอร์โดยไม่ต้องมีเซิร์ฟเวอร์
  • ตั้งเป้าให้มีประสบการณ์ใช้งานที่เทียบเท่ากับไลบรารี Python transformers ของ Hugging Face ในเชิงความสามารถ และสามารถรันโมเดลพรีเทรนเดียวกันได้ด้วย API ที่ใกล้เคียงกันมาก
  • งานที่รองรับครอบคลุมหลายโมดาลิตี
    • การประมวลผลภาษาธรรมชาติ: การจัดประเภทข้อความ, การรู้จำชื่อเฉพาะ, การตอบคำถาม, language modeling, การสรุปความ, การแปล, ปรนัยหลายตัวเลือก, การสร้างข้อความ
    • คอมพิวเตอร์วิทัศน์: การจัดประเภทภาพ, การตรวจจับวัตถุ, การแบ่งส่วนภาพ, การประมาณค่าความลึก
    • เสียง: การรู้จำเสียงพูดอัตโนมัติ, การจัดประเภทเสียง, การแปลงข้อความเป็นเสียงพูด
    • มัลติโหมด: embeddings, zero-shot audio classification, zero-shot image classification, zero-shot object detection

วิธีรันและการแปลงโมเดล

  • การรันโมเดลใช้ ONNX Runtime
  • โมเดล PyTorch, TensorFlow, JAX ที่พรีเทรนไว้แล้วสามารถแปลงเป็น ONNX ได้ด้วย 🤗 Optimum
  • เอกสารทั้งหมดมีให้ที่ Transformers.js documentation

การติดตั้งและการใช้งานในเบราว์เซอร์

  • ติดตั้งแพ็กเกจ NPM ได้ด้วยคำสั่งต่อไปนี้
npm i @huggingface/transformers
  • สามารถใช้งานใน vanilla JS ได้โดยไม่ต้องมี bundler และ import เป็น ES Modules ผ่าน CDN หรือ static hosting ได้
<script type="module">
    import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.2.0';
</script>

pipeline API ที่คล้ายกับ Python

  • API แบบ pipeline เป็นวิธีที่ง่ายที่สุดในการรันโมเดลในไลบรารี โดยรวมโมเดลพรีเทรน, การเตรียมข้อมูลนำเข้า, และการประมวลผลผลลัพธ์หลังรันไว้ด้วยกัน
  • เช่นเดียวกับตัวอย่าง sentiment analysis ใน 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}]
  • หากต้องการใช้โมเดลอื่น ให้ระบุ model ID หรือพาธ เป็นอาร์กิวเมนต์ตัวที่สองของฟังก์ชัน pipeline
const pipe = await pipeline(
  'sentiment-analysis',
  'Xenova/bert-base-multilingual-uncased-sentiment'
);

CPU, WebGPU และตัวเลือกการควอนไทซ์

  • ค่าปริยายของการรันในเบราว์เซอร์คือการรันบน CPU แบบ WASM
  • หากต้องการรันบน 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/';
  • การตั้งค่าที่ใช้งานได้ทั้งหมดมีอยู่ใน API Reference
  • เมื่อต้องแปลงโมเดล PyTorch เป็น ONNX แนะนำให้ใช้วิธีคำสั่งเดียวผ่าน Optimum

งานที่รองรับและขอบเขตของโมเดล

  • หากต้องการหาโมเดลที่เข้ากันได้บน Hugging Face Hub สามารถกรองด้วยแท็กไลบรารี transformers.js ได้
  • งานที่รองรับครอบคลุม NLP, วิชัน, เสียง, มัลติโหมด และ reinforcement learning โดยบางงานยังไม่รองรับ
    • ฝั่ง NLP รองรับ 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 และอีกจำนวนมาก
  • หากงานหรือโมเดลที่ต้องการไม่มีในรายการ หรือยังไม่รองรับ สามารถเปิดคำขอฟีเจอร์ได้

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-04-13
ความคิดเห็นจาก Hacker News
  • ไลบรารีนี้เจ๋งมาก เคยใช้ใน Observable Notebook อยู่หลายครั้ง เพราะทำเดโมเร็ว ๆ ขึ้นมาได้ง่ายสุด ๆ
    CLIP ในเบราว์เซอร์: https://observablehq.com/@simonw/openai-clip-in-a-browser
    ตรวจจับวัตถุในภาพด้วย detra-resnet-50: https://observablehq.com/@simonw/detect-objects-in-images
    ขนาดโมเดลตอนแรกอาจดูเหมือนเป็นข้อจำกัด แต่ก็มีแอปอยู่ไม่น้อยที่การบอกผู้ใช้ซึ่งมีโน้ตบุ๊กและการเชื่อมต่อที่ดีให้รอโหลดสักประมาณ 30 วินาทีนั้นไม่ได้ดูไม่สมเหตุสมผล
    รีลีสล่าสุดเพิ่มการรองรับ quantization ของ binary embedding แล้ว เลยอยากลองมาก: https://github.com/xenova/transformers.js/releases/tag/2.17....
    • binary embedding น่าจะต้องมีการ จัดอันดับใหม่ เพิ่มเติม แต่คงน่าสนุกถ้าได้ทดสอบดู
      ผมทำแพ็กเกจ npm ของ transformers.js v3 ไว้แล้ว และน่าจะต้องอัปเดต ยังไม่แน่ใจว่ารวมฟีเจอร์นี้ไว้หรือยัง
      ที่ผ่านมาดูแล fork ไว้เพื่อให้รันบน bun เป็นหลัก แต่พอ v3 ออก จะรองรับ bun อย่างจริงจัง อย่างไรก็ตาม WebGPU คงใช้ไม่ได้ แต่ก็เป็นฟีเจอร์เสริม
      [แก้ไข: ถ้าอยากใช้ให้ DM มา ไม่อยากโปรโมต fork]
  • กำลังใช้ไลบรารีนี้สร้าง embedding ด้วย gte-small (~0.07GB) แล้วเก็บไว้ใน Upstash Vector
    แม้จะมีแค่ 384 มิติ แต่ทำงานกับข้อความระดับย่อหน้าได้ดีจนน่าประหลาดใจ ในตารางจัดอันดับก็ยังอยู่สูงกว่า text-embedding-ada-002
    https://huggingface.co/spaces/mteb/leaderboard
  • พอดแคสต์ Syntax เพิ่งออกเอพิโสดที่พูดถึง Transformers.js และนักพัฒนา
    https://syntax.fm/show/740/local-ai-models-in-javascript-mac...
  • transformers.js เป็นไลบรารีที่เจ๋งจริง ๆ
    ผมทำเว็บแอปเล็ก ๆ สำหรับ ลบพื้นหลัง รูปภาพด้วยโมเดล RMBG1.4 ของ BRIA AI: https://aether.nco.dev
    ชอบมากตรงที่ไม่ต้องส่งข้อมูลไป API และยังรันบนสมาร์ตโฟนได้ด้วย คิดว่าในอนาคตจะมีโปรเจกต์จำนวนมากขึ้นที่ใช้มันกับโมเดล vision, language และ utility ขนาดเล็กอื่น ๆ (เช่น ประมาณความลึก ลบพื้นหลัง ฯลฯ) และอนาคตของเว็บก็ดูสดใส
    โปรเจกต์ถัดไปก็กำลังทำอยู่แล้ว และที่นั่นก็คงจะใช้ transformers.js อีกแน่นอน
    • กำลังใช้กับโปรเจกต์ง่าย ๆ: https://github.com/sroussey/ellmers
      แผนคือทดสอบ embedding และกลยุทธ์การค้นหาสำหรับ กลยุทธ์ RAG หลายแบบที่จะใช้บนเซิร์ฟเวอร์หรือแอป Electron
  • เจ๋งมากก็จริง แต่น่าเสียดายที่ดูเหมือน การใช้งานจริง จะค่อนข้างต่ำ โมเดลโดยทั่วไปมีขนาดค่อนข้างใหญ่ ดังนั้นต่อให้เบราว์เซอร์รันได้ แต่การเอาโมเดลมาถึงเบราว์เซอร์ก็ต้องเป็นหนึ่งในสองแบบนี้
    1. ดาวน์โหลดไฟล์ใหญ่ทุกครั้งที่เข้าเว็บไซต์
    2. ดาวน์โหลดไฟล์ใหญ่และใช้พื้นที่จัดเก็บสูงสำหรับทุกไซต์ที่ใช้โมเดลใหญ่ เช่น 150 เว็บไซต์ × โมเดล 800MB ก็ใช้พื้นที่ 120GB
      ทั้งสองแบบไม่น่าใช้
      ระยะยาว เบราว์เซอร์อาจควรฝังโมเดลบางส่วนไว้และเปิดให้ใช้ผ่าน Web API มาตรฐาน แต่ยังไม่เคยได้ยินว่ามีความพยายามแบบนั้นกำลังดำเนินอยู่

โมเดลจะถูก แคชแยกตามโดเมน (ใช้ Web Cache API) จึงไม่จำเป็นต้องดาวน์โหลดใหม่ทุกครั้งที่โหลดหน้าเว็บ หากต้องการคงโมเดลไว้ข้ามโดเมน ก็สามารถสร้างส่วนขยายเบราว์เซอร์ด้วยไลบรารีนี้ได้
ส่วนที่พูดถึงท้ายสุดนั้นมีความพยายามที่กำลังดำเนินอยู่ แต่ยังไม่ถึงขั้นที่จะเล่าได้

  • นี่แทบจะเป็นปัญหาเดียวกับที่กวนใจเกมบนเว็บมาตั้งแต่เดโม Unreal/Unity asm.js รุ่นแรกเมื่อ 10 ปีก่อน และตลอดมานี้แทบไม่มีความคืบหน้าไปในทางแก้ไขเลย
    เว็บแอปที่ต้องใช้ข้อมูลระดับกิกะไบต์บนไคลเอนต์นั้นสร้างให้ใช้งานได้จริงได้ยาก ไม่มีวิธีที่มั่นคงพอจะรับประกันได้ว่าข้อมูลจะค้างอยู่ในแคชนานเท่าที่ผู้ใช้ต้องการ และถึงแม้จะแคชได้อย่างมั่นคง นโยบาย การแบ่งพาร์ทิชันแคช ของเบราว์เซอร์ก็ทำให้แต่ละไซต์ที่ใช้โมเดลเดียวกันต้องดาวน์โหลดและใช้พื้นที่จัดเก็บซ้ำกัน
  • โมเดลมีขนาดไม่เกิน 80MB ส่วนที่เหลือเป็น LLM จึงอยู่นอกขอบเขต Whisper มีขนาด 40MB และ embedding มีขนาด 23MB
    ข้อความในคอมเมนต์เดิมอย่าง “ดูไม่เหมาะกับการใช้งานจริงอย่างยิ่ง”, “โดยทั่วไปโมเดลค่อนข้างใหญ่” และ “150 เว็บไซต์ × โมเดล 800MB” ดูเหมือนเป็นการใส่เงื่อนไขกำกับตัวเองอยู่แล้วว่าผู้เขียนยังเข้าใจไม่เพียงพอ
  • บางโมเดลมีขนาดค่อนข้างเล็ก จึงคุ้มค่าที่จะรันแบบ on-device มากกว่าส่งข้อมูลทั้งหมดไปให้เซิร์ฟเวอร์ประมวลผล
    อีกข้อดีใหญ่คือ transformers รันบน Node.js ได้ด้วย การสร้างสภาพแวดล้อมรันไทม์นั้นง่ายกว่าการจัดชุด Python กับ dependency แปลก ๆ ให้เข้ากันได้มาก
  • เรื่องนี้ไม่ใช่ปัญหาเฉพาะของเบราว์เซอร์ แต่เป็นปัญหาโดยเนื้อแท้ของ การประมวลผล AI บนอุปกรณ์
    น่าจะดีขึ้นได้เมื่อระบบปฏิบัติการเริ่มติดตั้งโมเดลไว้ล่วงหน้า และผู้พัฒนาเบราว์เซอร์ก็มี API ที่นำไปใช้ได้
    ถึงอย่างนั้น สำหรับงานส่วนใหญ่ โมเดลที่โฮสต์บนคลาวด์ก็น่าจะดีกว่ามากอยู่เสมอ
  • แบบนี้เราจะสร้าง ปลั๊กอินเบราว์เซอร์ ที่เลือกจักรยานหรือสะพานทั้งหมดใน CAPTCHA ของ Google ได้แล้วหรือเปล่า?
  • ฝึกโมเดลไม่ได้หรือ? เมื่อหลายปีก่อนเคยลองสร้างและฝึก neural network ขนาดเล็กในเบราว์เซอร์ เลยสงสัยว่าตอนนี้ถ้าใช้ custom transformer ขนาดเล็ก วิธีแบบนั้นจะทำงานได้ดีกว่าหรือไม่
    • ในทางทฤษฎีทำได้แน่นอน แต่เหตุผลที่ยังไม่ถูกนำไปทำจริงน่าจะเป็นปัญหาด้านประสิทธิภาพ
      มี benchmark ของ WebGPU embedding บน Hugging Face Space ให้พอประเมินการทำงานแบบ forward pass ได้: https://huggingface.co/spaces/Xenova/webgpu-embedding-benchm...
      ตัวมันเองน่าประทับใจ แต่ถ้าใช้ latency ระดับนั้นมาฝึกโมเดลคงทรมานทีเดียว ที่ fp16, batch 32, sequence length 512 การทำ forward pass ของโมเดล 22 ล้านพารามิเตอร์ใช้เวลาประมาณ 500ms
  • แบบนี้ไม่ได้เปิดโอกาสให้รันโมเดลแบบนี้ใน serverless function ของ Node.js ด้วยหรือ?
    ดูเหมือนว่าน่าจะมีศักยภาพสำหรับการคาดการณ์แบบ on-demand แน่นอน
  • รองรับ การเร่งความเร็ว บน Apple Silicon หรือไม่?