Transformers.js: (v2) testing 20 AI models in single HTML
5 min readDec 7, 2023
ปัญหาของ transformers.js ตอนนี้ โค้ดมีการปรับปรุงเร็วมาก คราวที่แล้วใช้ version 2.6.0 ตามคู่มือใน Hugging Face ซึ่งมีปัญหาทดสอบเรียกใช้ model หลายตัวไม่ได้ ผมจึงเปลี่ยนไปอ้างอิงใน GitHub แทน ใช้ version ล่าสุด และอ้างอิงคู่มือในนั้นแทน ทำให้โค้ดที่ปรับปรุงใหม่คราวนี้มี model ที่สามารถทดสอบได้ถึง 20 ตัว เพิ่มความสามารถให้ส่งรูปภาพไปประมวลผลได้ ทำให้รองรับการทดสอบทั้ง Natural Language, Vision และ Multimodal
ในเวอร์ชั่นนี้ ปรับปรุงโค้ดส่วนของ spec ให้เพิ่ม model ใหม่ ๆ ได้ง่าย รองรับ input ที่เป็นรูปภาพ (image url) แทนที่จะเป็นข้อความ (text) ดังนั้นจึงเพิ่มส่วนที่สามารถเลือกรูปภาพที่อยู่ในเครื่อง โดยแปลงเป็น data:image base64 เข้ามาด้วย
model ไหนที่เป็น vision หรือใช้รูปภาพ ภายใน spec จะกำหนดไว้ว่า src = "image"
ไม่ต้องระบุ url ที่เป็นเพจข้อมูลอ้างอิงของ model ไว้ใน spec สามารถเอาชื่อ model มาใช้เป็น path ได้อัตโนมัติ https://huggingface.co/{model_name}
$scope.speclist = [
/* natural language */
{
label: 'text unmasker',
task: 'fill-mask',
model:'Xenova/bert-base-cased',
sample: 'The goal of life is [MASK].',
},
{
label: 'text Q&A',
task: 'question-answering',
model:'Xenova/distilbert-base-uncased-distilled-squad',
sample: 'Who was Jim Henson?',
options: 'Jim Henson was a nice puppet.',
},
{
label: 'text summarizer',
task: 'summarization',
model:'Xenova/distilbart-cnn-6-6',
sample: 'The tower is 324 metres (1,063 ft) tall, about the same height as an 81-storey building, ' +
'and the tallest structure in Paris. Its base is square, measuring 125 metres (410 ft) on each side. ' +
'During its construction, the Eiffel Tower surpassed the Washington Monument to become the tallest ' +
'man-made structure in the world, a title it held for 41 years until the Chrysler Building in New ' +
'York City was finished in 1930. It was the first structure to reach a height of 300 metres. Due to ' +
'the addition of a broadcasting aerial at the top of the tower in 1957, it is now taller than the ' +
'Chrysler Building by 5.2 metres (17 ft). Excluding transmitters, the Eiffel Tower is the second ' +
'tallest free-standing structure in France after the Millau Viaduct.',
options: { max_new_tokens: 100 },
},
{
label: 'text classifier',
task: 'sentiment-analysis',
model: 'Xenova/distilbert-base-uncased-finetuned-sst-2-english',
sample: 'I love transformers!'
},
{
label: 'text reviewer',
task: 'sentiment-analysis',
model:'Xenova/bert-base-multilingual-uncased-sentiment',
sample: 'The Shawshank Redemption is a true masterpiece of cinema.'
},
{
label: 'text generator',
task: 'text-generation',
model:'Xenova/distilgpt2',
sample: 'Once upon a time, there was',
options: {
temperature: 2,
max_new_tokens: 10,
repetition_penalty: 1.5,
no_repeat_ngram_size: 2,
num_beams: 2,
num_return_sequences: 2,
},
},
{
label: 'code generator',
task: 'text-generation',
model:'Xenova/codegen-350M-mono',
sample: 'def fib(n):',
options: { max_new_tokens: 44 },
},
{
label: 'text2text generator',
task: 'text2text-generation',
model:'Xenova/LaMini-Flan-T5-783M',
sample: 'Write me a love poem about cheese.',
options: {
max_new_tokens: 200,
temperature: 0.9,
repetition_penalty: 2.0,
no_repeat_ngram_size: 3,
},
},
{
label: 'token classifier',
task: 'token-classification',
model:'Xenova/bert-base-NER',
sample: 'My name is Sarah and I live in London',
},
{
label: 'text translator',
task: 'translation',
model:'Xenova/nllb-200-distilled-600M',
sample: 'I like to walk my dog.',
options: {
src_lang: 'eng_Latn',
// tgt_lang: 'ell_Grek'
tgt_lang: 'tha_Thai'
},
},
{
label: 'text zero-shot classifier',
task: 'zero-shot-classification',
model:'Xenova/mobilebert-uncased-mnli',
sample: 'Last week I upgraded my iOS version and ever since then my phone has been overheating whenever I use your app.',
options: [ 'mobile', 'billing', 'website', 'account access' ],
},
/* vision */
{
label: 'image classifier',
task: 'image-classification',
model:'Xenova/vit-base-patch16-224',
src: 'image',
sample: 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/tiger.jpg',
options: { topk: 3 },
},
{
label: 'image segmenter',
task: 'image-segmentation',
model:'Xenova/detr-resnet-50-panoptic',
src: 'image',
sample: 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/cats.jpg',
},
{
label: 'image detector',
task: 'object-detection',
model:'Xenova/detr-resnet-50',
src: 'image',
sample: 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/cats.jpg',
options: {
threshold: 0.5,
percentage: true,
},
},
/* mutimodal */
{
label: 'image document Q&A',
task: 'document-question-answering',
model:'Xenova/donut-base-finetuned-docvqa',
src: 'image',
sample: 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/invoice.png',
options: 'What is the invoice number?',
},
{
label: 'image doc recognitor',
task: 'image-to-text',
model:'Xenova/nougat-small',
src: 'image',
sample: 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/nougat_paper.png',
options: {
min_length: 1,
max_new_tokens: 40,
},
// postload: function (spec, pipe) {
// spec.options.bad_words_ids = [pipe.tokenizer.unk_token_id]
// }
},
{
label: 'image captioner',
task: 'image-to-text',
model:'Xenova/vit-gpt2-image-captioning',
src: 'image',
sample: 'https://xenova.github.io/transformers.js/images/football-match.jpg',
options: {
max_length: 16,
num_beams: 4,
},
},
{
label: 'image handwritten reader',
task: 'image-to-text',
model:'Xenova/trocr-small-handwritten',
src: 'image',
sample: 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/handwriting.jpg',
},
{
label: 'image zero-shot classifier',
task: 'zero-shot-image-classification',
model:'Xenova/clip-vit-base-patch32',
src: 'image',
sample: 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/tiger.jpg',
options: ['tiger', 'horse', 'dog'],
},
{
label: 'image zero-shot detector',
task: 'zero-shot-object-detection',
model:'Xenova/owlvit-base-patch32',
src: 'image',
sample: 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/astronaut.png',
options: ['human face', 'rocket', 'helmet', 'american flag'],
},
]รายละเอียดของ AI model ต่าง ๆ ขอละไว้ไม่อธิบาย บางตัวที่ไม่เข้าใจผมก็ข้ามไปก่อน่ เช่น Sentence Similarity สรุปคร่าว ๆ ตามรายชื่อดังนี้
Natural Language
- text unmasker
https://huggingface.co/Xenova/bert-base-cased - text Q&A
https://huggingface.co/Xenova/distilbert-base-uncased-distilled-squad - text summarizer
https://huggingface.co/Xenova/distilbart-cnn-6-6 - text classifier
https://huggingface.co/Xenova/distilbert-base-uncased-finetuned-sst-2-english - text reviewer
https://huggingface.co/Xenova/bert-base-multilingual-uncased-sentiment - text generator
https://huggingface.co/Xenova/distilgpt2 - code generator
https://huggingface.co/Xenova/codegen-350M-mono - text2text generator
https://huggingface.co/Xenova/LaMini-Flan-T5-783M - token classifier
https://huggingface.co/Xenova/bert-base-NER - text translator
https://huggingface.co/Xenova/nllb-200-distilled-600M - text zero-shot classifier
https://huggingface.co/Xenova/mobilebert-uncased-mnli
Vision
- image classifier
https://huggingface.co/Xenova/vit-base-patch16-224 - image segmenter
https://huggingface.co/Xenova/detr-resnet-50-panoptic - image detector
https://huggingface.co/Xenova/detr-resnet-50
Multimodal
- image document Q&A
https://huggingface.co/Xenova/donut-base-finetuned-docvqa - image doc recognitor
https://huggingface.co/Xenova/nougat-small - image captioner
https://huggingface.co/Xenova/vit-gpt2-image-captioning - image handwritten reader
https://huggingface.co/Xenova/trocr-small-handwritten - image zero-shot classifier
https://huggingface.co/Xenova/clip-vit-base-patch32 - image zero-shot detector
https://huggingface.co/Xenova/owlvit-base-patch32
image captioner เป็นตัวที่ทดลองได้งาน โดยการใช้วิธีหารูปภาพจาก Unsplash (สามารถใช้เมาส์คลิ๊กขวา copy image address มาวางในช่อง image url)
source code
โค้ดทั้งหมดอยู่ในไฟล์ HTML ไฟล์เดียว test-transformers-v2.html เหมือน version แรก สามารถ download มาไว้ในโฟล์เดอร์แล้วเปิดด้วย browser ได้เลย ไม่ต้องมี http server
อ้างอิง
- GitHub
https://github.com/xenova/transformers.js - Hugging Face
https://huggingface.co/docs/transformers.js/index - Demo (GitHub Pages)
https://xenova.github.io/transformers.js/