Buckets:

hf-doc-build
/

doc-dev

Files

xet

hf-doc-build/doc-dev / transformers.js /pr_1113 /en /guides /webgpu.html

rtrm

about 2 months ago

download

raw

18.6 kB

	<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"Running models on WebGPU","local":"running-models-on-webgpu","sections":[{"title":"Usage in Transformers.js v3","local":"usage-in-transformersjs-v3","sections":[],"depth":2},{"title":"Reporting bugs and providing feedback","local":"reporting-bugs-and-providing-feedback","sections":[],"depth":2}],"depth":1}">
	<link href="/docs/transformers.js/pr_1113/en/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
	<link rel="modulepreload" href="/docs/transformers.js/pr_1113/en/_app/immutable/entry/start.88a6e140.js">
	<link rel="modulepreload" href="/docs/transformers.js/pr_1113/en/_app/immutable/chunks/scheduler.0219f8bd.js">
	<link rel="modulepreload" href="/docs/transformers.js/pr_1113/en/_app/immutable/chunks/singletons.c59c6d8d.js">
	<link rel="modulepreload" href="/docs/transformers.js/pr_1113/en/_app/immutable/chunks/paths.8e090985.js">
	<link rel="modulepreload" href="/docs/transformers.js/pr_1113/en/_app/immutable/entry/app.0003020d.js">
	<link rel="modulepreload" href="/docs/transformers.js/pr_1113/en/_app/immutable/chunks/index.f61edf3b.js">
	<link rel="modulepreload" href="/docs/transformers.js/pr_1113/en/_app/immutable/nodes/0.25c65ab2.js">
	<link rel="modulepreload" href="/docs/transformers.js/pr_1113/en/_app/immutable/nodes/27.1a1c2ae5.js">
	<link rel="modulepreload" href="/docs/transformers.js/pr_1113/en/_app/immutable/chunks/Tip.5d1e3ef4.js">
	<link rel="modulepreload" href="/docs/transformers.js/pr_1113/en/_app/immutable/chunks/CodeBlock.38e566ae.js">
	<link rel="modulepreload" href="/docs/transformers.js/pr_1113/en/_app/immutable/chunks/EditOnGithub.48fa589f.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"Running models on WebGPU","local":"running-models-on-webgpu","sections":[{"title":"Usage in Transformers.js v3","local":"usage-in-transformersjs-v3","sections":[],"depth":2},{"title":"Reporting bugs and providing feedback","local":"reporting-bugs-and-providing-feedback","sections":[],"depth":2}],"depth":1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <h1 class="relative group"><a id="running-models-on-webgpu" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#running-models-on-webgpu"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Running models on WebGPU</span></h1> <p data-svelte-h="svelte-19qhkg2">WebGPU is a new web standard for accelerated graphics and compute. The <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API" rel="nofollow">API</a> enables web developers to use the underlying system’s GPU to carry out high-performance computations directly in the browser. WebGPU is the successor to <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API" rel="nofollow">WebGL</a> and provides significantly better performance, because it allows for more direct interaction with modern GPUs. Lastly, it supports general-purpose GPU computations, which makes it just perfect for machine learning!</p> <div class="course-tip course-tip-orange bg-gradient-to-br dark:bg-gradient-to-r before:border-orange-500 dark:before:border-orange-800 from-orange-50 dark:from-gray-900 to-white dark:to-gray-950 border border-orange-50 text-orange-700 dark:text-gray-400"><p data-svelte-h="svelte-1iuesxc"><br>
	As of October 2024, global WebGPU support is around 70% (according to <a href="https://caniuse.com/webgpu" rel="nofollow">caniuse.com</a>), meaning some users may not be able to use the API.</p> <p data-svelte-h="svelte-mcs3ta">If the following demos do not work in your browser, you may need to enable it using a feature flag:</p> <ul data-svelte-h="svelte-ty8cnp"><li>Firefox: with the <code>dom.webgpu.enabled</code> flag (see <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Experimental_features#:~:text=tested%20by%20Firefox.-,WebGPU%20API,-The%20WebGPU%20API" rel="nofollow">here</a>).</li> <li>Safari: with the <code>WebGPU</code> feature flag (see <a href="https://webkit.org/blog/14879/webgpu-now-available-for-testing-in-safari-technology-preview/" rel="nofollow">here</a>).</li> <li>Older Chromium browsers (on Windows, macOS, Linux): with the <code>enable-unsafe-webgpu</code> flag (see <a href="https://developer.chrome.com/docs/web-platform/webgpu/troubleshooting-tips" rel="nofollow">here</a>).</li></ul></div> <h2 class="relative group"><a id="usage-in-transformersjs-v3" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#usage-in-transformersjs-v3"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Usage in Transformers.js v3</span></h2> <p data-svelte-h="svelte-1dmideb">Thanks to our collaboration with <a href="https://www.npmjs.com/package/onnxruntime-web" rel="nofollow">ONNX Runtime Web</a>, enabling WebGPU acceleration is as simple as setting <code>device: 'webgpu'</code> when loading a model. Let’s see some examples!</p> <p data-svelte-h="svelte-1sxt5g1"><strong>Example:</strong> Compute text embeddings on WebGPU (<a href="https://v2.scrimba.com/s06a2smeej" rel="nofollow">demo</a>)</p> <div class="code-block relative"><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> { pipeline } <span class="hljs-keyword">from</span> <span class="hljs-string">"@huggingface/transformers"</span>;

	<span class="hljs-comment">// Create a feature-extraction pipeline</span>
	<span class="hljs-keyword">const</span> extractor = <span class="hljs-keyword">await</span> <span class="hljs-title function_">pipeline</span>(
	<span class="hljs-string">"feature-extraction"</span>,
	<span class="hljs-string">"mixedbread-ai/mxbai-embed-xsmall-v1"</span>,
	{ <span class="hljs-attr">device</span>: <span class="hljs-string">"webgpu"</span> },
	);

	<span class="hljs-comment">// Compute embeddings</span>
	<span class="hljs-keyword">const</span> texts = [<span class="hljs-string">"Hello world!"</span>, <span class="hljs-string">"This is an example sentence."</span>];
	<span class="hljs-keyword">const</span> embeddings = <span class="hljs-keyword">await</span> <span class="hljs-title function_">extractor</span>(texts, { <span class="hljs-attr">pooling</span>: <span class="hljs-string">"mean"</span>, <span class="hljs-attr">normalize</span>: <span class="hljs-literal">true</span> });
	<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(embeddings.<span class="hljs-title function_">tolist</span>());
	<span class="hljs-comment">// [</span>
	<span class="hljs-comment">// [-0.016986183822155, 0.03228696808218956, -0.0013630966423079371, ... ],</span>
	<span class="hljs-comment">// [0.09050482511520386, 0.07207386940717697, 0.05762749910354614, ... ],</span>
	<span class="hljs-comment">// ]</span><!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1jn61pt"><strong>Example:</strong> Perform automatic speech recognition with OpenAI whisper on WebGPU (<a href="https://v2.scrimba.com/s0oi76h82g" rel="nofollow">demo</a>)</p> <div class="code-block relative"><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> { pipeline } <span class="hljs-keyword">from</span> <span class="hljs-string">"@huggingface/transformers"</span>;

	<span class="hljs-comment">// Create automatic speech recognition pipeline</span>
	<span class="hljs-keyword">const</span> transcriber = <span class="hljs-keyword">await</span> <span class="hljs-title function_">pipeline</span>(
	<span class="hljs-string">"automatic-speech-recognition"</span>,
	<span class="hljs-string">"onnx-community/whisper-tiny.en"</span>,
	{ <span class="hljs-attr">device</span>: <span class="hljs-string">"webgpu"</span> },
	);

	<span class="hljs-comment">// Transcribe audio from a URL</span>
	<span class="hljs-keyword">const</span> url = <span class="hljs-string">"https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/jfk.wav"</span>;
	<span class="hljs-keyword">const</span> output = <span class="hljs-keyword">await</span> <span class="hljs-title function_">transcriber</span>(url);
	<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(output);
	<span class="hljs-comment">// { text: ' And so my fellow Americans ask not what your country can do for you, ask what you can do for your country.' }</span><!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1rgic84"><strong>Example:</strong> Perform image classification with MobileNetV4 on WebGPU (<a href="https://v2.scrimba.com/s0fv2uab1t" rel="nofollow">demo</a>)</p> <div class="code-block relative"><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> { pipeline } <span class="hljs-keyword">from</span> <span class="hljs-string">"@huggingface/transformers"</span>;

	<span class="hljs-comment">// Create image classification pipeline</span>
	<span class="hljs-keyword">const</span> classifier = <span class="hljs-keyword">await</span> <span class="hljs-title function_">pipeline</span>(
	<span class="hljs-string">"image-classification"</span>,
	<span class="hljs-string">"onnx-community/mobilenetv4_conv_small.e2400_r224_in1k"</span>,
	{ <span class="hljs-attr">device</span>: <span class="hljs-string">"webgpu"</span> },
	);

	<span class="hljs-comment">// Classify an image from a URL</span>
	<span class="hljs-keyword">const</span> url = <span class="hljs-string">"https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/tiger.jpg"</span>;
	<span class="hljs-keyword">const</span> output = <span class="hljs-keyword">await</span> <span class="hljs-title function_">classifier</span>(url);
	<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(output);
	<span class="hljs-comment">// [</span>
	<span class="hljs-comment">// { label: 'tiger, Panthera tigris', score: 0.6149784922599792 },</span>
	<span class="hljs-comment">// { label: 'tiger cat', score: 0.30281734466552734 },</span>
	<span class="hljs-comment">// { label: 'tabby, tabby cat', score: 0.0019135422771796584 },</span>
	<span class="hljs-comment">// { label: 'lynx, catamount', score: 0.0012161266058683395 },</span>
	<span class="hljs-comment">// { label: 'Egyptian cat', score: 0.0011465961579233408 }</span>
	<span class="hljs-comment">// ]</span><!-- HTML_TAG_END --></pre></div> <h2 class="relative group"><a id="reporting-bugs-and-providing-feedback" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#reporting-bugs-and-providing-feedback"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Reporting bugs and providing feedback</span></h2> <p data-svelte-h="svelte-h8vsz1">Due to the experimental nature of WebGPU, especially in non-Chromium browsers, you may experience issues when trying to run a model (even it it can run in WASM). If you do, please open <a href="https://github.com/huggingface/transformers.js/issues/new?title=%5BWebGPU%5D%20Error%20running%20MODEL_GOES_HERE&assignees=&labels=bug,webgpu&projects=&template=1_bug-report.yml" rel="nofollow">an issue on GitHub</a> and we’ll do our best to address it. Thanks!</p> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/transformers.js/blob/main/docs/source/guides/webgpu.md" target="_blank"><span data-svelte-h="svelte-1kd6by1"><</span> <span data-svelte-h="svelte-x0xyl0">></span> <span data-svelte-h="svelte-1dajgef"><span class="underline ml-1.5">Update</span> on GitHub</span></a> <p></p>

	<script>
	{
	__sveltekit_kuyevp = {
	assets: "/docs/transformers.js/pr_1113/en",
	base: "/docs/transformers.js/pr_1113/en",
	env: {}
	};

	const element = document.currentScript.parentElement;

	const data = [null,null];

	Promise.all([
	import("/docs/transformers.js/pr_1113/en/_app/immutable/entry/start.88a6e140.js"),
	import("/docs/transformers.js/pr_1113/en/_app/immutable/entry/app.0003020d.js")
	]).then(([kit, app]) => {
	kit.start(app, element, {
	node_ids: [0, 27],
	data,
	form: null,
	error: null
	});
	});
	}
	</script>

Xet Storage Details

Size:: 18.6 kB
Xet hash:: f9746380c4a034e02116bdfcc9e10ccc4b7d493611e81be71190412ac0ce2c69

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.