import{VoxtralForConditionalGeneration,VoxtralProcessor,TextStreamer,read_audio}from"@huggingface/transformers";// Load the processor and modelconstmodel_id="onnx-community/Voxtral-Mini-3B-2507-ONNX";constprocessor=awaitVoxtralProcessor.from_pretrained(model_id);constmodel=awaitVoxtralForConditionalGeneration.from_pretrained(model_id,{dtype:{embed_tokens:"fp16",// "fp32", "fp16", "q8", "q4"audio_encoder:"q4",// "fp32", "fp16", "q8", "q4", "q4f16"decoder_model_merged:"q4",// "q4", "q4f16"},device:"webgpu",},);// Prepare the conversationconstconversation=[{"role":"user","content":[{"type":"audio"},{"type":"text","text":"lang:en [TRANSCRIBE]"},],}];consttext=processor.apply_chat_template(conversation,{tokenize:false});constaudio=awaitread_audio("http://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/mlk.wav",16000);constinputs=awaitprocessor(text,audio);// Generate the responseconstgenerated_ids=awaitmodel.generate({    ...inputs,max_new_tokens:256,streamer:newTextStreamer(processor.tokenizer,{skip_special_tokens:true,skip_prompt:true}),});// Decode the generated tokensconstnew_tokens=generated_ids.slice(null,[inputs.input_ids.dims.at(-1),null]);constgenerated_texts=processor.batch_decode(new_tokens,{skip_special_tokens:true},);console.log(generated_texts[0]);// I have a dream that one day this nation will rise up and live out the true meaning of its creed.

import{pipeline,TextStreamer}from"@huggingface/transformers";// Create a text generation pipelineconstgenerator=awaitpipeline("text-generation","onnx-community/LFM2-350M-ONNX",{dtype:"q4"},);// Define the list of messagesconstmessages=[{role:"system",content:"You are a helpful assistant."},{role:"user",content:"What is the capital of France?"},];// Generate a responseconstoutput=awaitgenerator(messages,{max_new_tokens:512,do_sample:false,streamer:newTextStreamer(generator.tokenizer,{skip_prompt:true,skip_special_tokens:true}),});console.log(output[0].generated_text.at(-1).content);// The capital of France is Paris. It is a vibrant city known for its historical landmarks, art, fashion, and gastronomy.

import{pipeline,TextStreamer}from"@huggingface/transformers";// Create a text generation pipelineconstgenerator=awaitpipeline("text-generation","onnx-community/ettin-decoder-150m-ONNX",{dtype:"fp32"},);// Generate a responseconsttext="Q: What is the capital of France?\nA:";constoutput=awaitgenerator(text,{max_new_tokens:128,streamer:newTextStreamer(generator.tokenizer,{skip_prompt:true,skip_special_tokens:true}),});console.log(output[0].generated_text);

Warning

Due to the model's large size, we currently only support Node.js, Deno, and Bun execution.
In-browser WebGPU support is actively being worked on, so stay tuned for an update!

import{AutoProcessor,AutoModelForImageTextToText,load_image,TextStreamer,}from"@huggingface/transformers";// Load processor and modelconstmodel_id="onnx-community/gemma-3n-E2B-it-ONNX";constprocessor=awaitAutoProcessor.from_pretrained(model_id);constmodel=awaitAutoModelForImageTextToText.from_pretrained(model_id,{dtype:{embed_tokens:"q8",audio_encoder:"q8",vision_encoder:"fp16",decoder_model_merged:"q4",},device:"cpu",// NOTE: WebGPU support coming soon!});// Prepare promptconstmessages=[{role:"user",content:[{type:"image"},{type:"text",text:"Describe this image in detail."},],},];constprompt=processor.apply_chat_template(messages,{add_generation_prompt:true,});// Prepare inputsconsturl="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/bee.jpg";constimage=awaitload_image(url);constaudio=null;constinputs=awaitprocessor(prompt,image,audio,{add_special_tokens:false,});// Generate outputconstoutputs=awaitmodel.generate({  ...inputs,max_new_tokens:512,do_sample:false,streamer:newTextStreamer(processor.tokenizer,{skip_prompt:true,skip_special_tokens:false,// callback_function: (text) => { /* Do something with the streamed output */ },}),});// Decode outputconstdecoded=processor.batch_decode(outputs.slice(null,[inputs.input_ids.dims.at(-1),null]),{skip_special_tokens:true},);console.log(decoded[0]);

import{AutoProcessor,AutoModelForImageTextToText,TextStreamer,}from"@huggingface/transformers";importwavefilefrom"wavefile";// Load processor and modelconstmodel_id="onnx-community/gemma-3n-E2B-it-ONNX";constprocessor=awaitAutoProcessor.from_pretrained(model_id);constmodel=awaitAutoModelForImageTextToText.from_pretrained(model_id,{dtype:{embed_tokens:"q8",audio_encoder:"q4",vision_encoder:"fp16",decoder_model_merged:"q4",},device:"cpu",// NOTE: WebGPU support coming soon!});// Prepare promptconstmessages=[{role:"user",content:[{type:"audio"},{type:"text",text:"Transcribe this audio verbatim."},],},];constprompt=processor.apply_chat_template(messages,{add_generation_prompt:true,});// Prepare inputsconsturl="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/jfk.wav";constbuffer=Buffer.from(awaitfetch(url).then((x)=>x.arrayBuffer()));constwav=newwavefile.WaveFile(buffer);wav.toBitDepth("32f");// Pipeline expects input as a Float32Arraywav.toSampleRate(processor.feature_extractor.config.sampling_rate);letaudioData=wav.getSamples();if(Array.isArray(audioData)){if(audioData.length>1){for(leti=0;i<audioData[0].length;++i){audioData[0][i]=(Math.sqrt(2)*(audioData[0][i]+audioData[1][i]))/2;}}audioData=audioData[0];}constimage=null;constaudio=audioData;constinputs=awaitprocessor(prompt,image,audio,{add_special_tokens:false,});// Generate outputconstoutputs=awaitmodel.generate({  ...inputs,max_new_tokens:512,do_sample:false,streamer:newTextStreamer(processor.tokenizer,{skip_prompt:true,skip_special_tokens:false,// callback_function: (text) => { /* Do something with the streamed output */ },}),});// Decode outputconstdecoded=processor.batch_decode(outputs.slice(null,[inputs.input_ids.dims.at(-1),null]),{skip_special_tokens:true},);console.log(decoded[0]);

import{pipeline,matmul}from"@huggingface/transformers";// Create a feature extraction pipelineconstextractor=awaitpipeline("feature-extraction","onnx-community/Qwen3-Embedding-0.6B-ONNX",{dtype:"fp32",// Options: "fp32", "fp16", "q8"// device: "webgpu",},);functionget_detailed_instruct(task_description,query){return`Instruct:${task_description}\nQuery:${query}`;}// Each query must come with a one-sentence instruction that describes the taskconsttask="Given a web search query, retrieve relevant passages that answer the query";constqueries=[get_detailed_instruct(task,"What is the capital of China?"),get_detailed_instruct(task,"Explain gravity"),];// No need to add instruction for retrieval documentsconstdocuments=["The capital of China is Beijing.","Gravity is a force that attracts two bodies towards each other. It gives weight to physical objects and is responsible for the movement of planets around the sun.",];constinput_texts=[...queries, ...documents];// Extract embeddings for queries and documentsconstoutput=awaitextractor(input_texts,{pooling:"last_token",normalize:true,});constscores=awaitmatmul(output.slice([0,queries.length]),// Query embeddingsoutput.slice([queries.length,null]).transpose(1,0),// Document embeddings);console.log(scores.tolist());// [//   [ 0.7645590305328369, 0.14142560958862305 ],//   [ 0.13549776375293732, 0.599955141544342 ]// ]

import{AutoProcessor,AutoModelForImageTextToText,load_image,TextStreamer,}from"@huggingface/transformers";// Load processor and modelconstmodel_id="onnx-community/FastVLM-0.5B-ONNX";constprocessor=awaitAutoProcessor.from_pretrained(model_id);constmodel=awaitAutoModelForImageTextToText.from_pretrained(model_id,{dtype:{embed_tokens:"fp16",vision_encoder:"q4",decoder_model_merged:"q4",},});// Prepare promptconstmessages=[{role:"user",content:"<image>Describe this image in detail.",},];constprompt=processor.apply_cha...