transformers.js/pr_1655/en/_app/immutable/nodes/32.669c221e.js

import{s as dl,o as ul,n as bl}from"../chunks/scheduler.6efaaf90.js";import{S as Il,i as Cl,e as J,s as n,c as p,h as fl,a as U,d as a,b as e,f as hl,g as r,j as w,k as Tl,l as gl,m as t,n as o,t as c,o as M,p as i}from"../chunks/index.eb3e1f0f.js";import{T as kl}from"../chunks/Tip.292c2c3d.js";import{C as Zl,H as j,E as Bl}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.763c1abb.js";import{C as m}from"../chunks/CodeBlock.26db3458.js";function Nl(ys){let y,d="For best tool calling results, use reasoning models like Qwen3 which handle multi-step reasoning well.";return{c(){y=J("p"),y.textContent=d},l(h){y=U(h,"P",{"data-svelte-h":!0}),w(y)!=="svelte-1r5qhhm"&&(y.textContent=d)},m(h,Ms){t(h,y,Ms)},p:bl,d(h){h&&a(y)}}}function $l(ys){let y,d,h,Ms,u,Js,b,Us,I,nl='<a href="https://ai-sdk.dev/" rel="nofollow">Vercel AI SDK</a> is a popular toolkit for building AI-powered applications. With <a href="https://www.browser-ai.dev/docs/ai-sdk-v6/transformers-js" rel="nofollow"><code>@browser-ai/transformers-js</code></a>, you can use Transformers.js as a model provider for the AI SDK, enabling in-browser (and server-side) inference with a clean, declarative API.',js,C,el='This guide covers the core concepts and API patterns. For a full step-by-step project walkthrough, see the <a href="../tutorials/next-ai-sdk">Building a Next.js AI Chatbot</a> tutorial.',ws,f,ms,g,pl=`The <code>@browser-ai/transformers-js</code> provider builds on top of <code>@huggingface/transformers</code> to give you a standard AI SDK interface — handling Web Worker setup, message passing, progress tracking, streaming, interrupt handling, and state management, so you can use the same <code>streamText</code>, <code>generateText</code>, and <code>useChat</code> APIs you’d use with any other AI SDK provider.
Read more about this <a href="https://www.browser-ai.dev/docs/ai-sdk-v6/transformers-js/why" rel="nofollow">here</a>.`,hs,k,Ts,Z,ds,B,rl="<thead><tr><th>@browser-ai/transformers-js</th> <th>AI SDK</th> <th>Notes</th></tr></thead> <tbody><tr><td>v2.0.0+</td> <td>v6.x</td> <td>Current stable</td></tr> <tr><td>v1.0.0</td> <td>v5.x</td> <td>Legacy</td></tr></tbody>",us,N,bs,$,Is,W,Cs,Q,fs,S,gs,v,ks,V,Zs,G,Bs,z,Ns,E,$s,R,Ws,X,Qs,F,ol="For better performance, run model inference off the main thread with a Web Worker.",Ss,Y,cl="<strong>1. Create <code>worker.ts</code>:</strong>",vs,H,Vs,q,Ml="<strong>2. Pass the worker when creating the model:</strong>",Gs,x,zs,A,Es,_,il="Models are downloaded on first use. Track progress to provide a better UX:",Rs,L,Xs,K,Fs,T,Ys,D,Hs,P,yl='Tool calling also supports <a href="https://ai-sdk.dev/docs/ai-sdk-core/tools-and-tool-calling#tool-execution-approval" rel="nofollow">tool execution approval (<code>needsApproval</code>)</a> for human-in-the-loop workflows.',qs,O,xs,ss,Jl='When using the <code>useChat</code> hook, you create a <a href="https://ai-sdk.dev/docs/ai-sdk-ui/transport" rel="nofollow">custom transport</a> to handle client-side inference. Here’s a minimal example:',As,ls,_s,as,Ul="Then use it in your component:",Ls,ts,Ks,ns,Ds,es,jl="If the device doesn’t support in-browser inference, you can fall back to a server-side model:",Ps,ps,Os,rs,sl,os,wl='<li><a href="../tutorials/next-ai-sdk">Building a Next.js AI Chatbot</a> — a step-by-step tutorial building a full chatbot with tool calling</li> <li><a href="https://www.browser-ai.dev/docs/ai-sdk-v6/transformers-js" rel="nofollow"><code>@browser-ai/transformers-js</code> documentation</a></li> <li><a href="https://ai-sdk.dev/" rel="nofollow">Vercel AI SDK documentation</a></li>',ll,cs,al,is,tl;return u=new Zl({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"}}),b=new j({props:{title:"Using Transformers.js with the Vercel AI SDK",local:"using-transformersjs-with-the-vercel-ai-sdk",headingTag:"h1"}}),f=new j({props:{title:"Why use the Vercel AI SDK with Transformers.js?",local:"why-use-the-vercel-ai-sdk-with-transformersjs",headingTag:"h2"}}),k=new j({props:{title:"Installation",local:"installation",headingTag:"h2"}}),Z=new m({props:{code:"bnBtJTIwaW5zdGFsbCUyMCU0MGJyb3dzZXItYWklMkZ0cmFuc2Zvcm1lcnMtanMlMjAlNDBodWdnaW5nZmFjZSUyRnRyYW5zZm9ybWVycyUyMGFpJTIwJTQwYWktc2RrJTJGcmVhY3Q=",highlighted:"npm install @browser-ai/transformers-js @huggingface/transformers ai @ai-sdk/react",wrap:!1}}),N=new j({props:{title:"Text generation",local:"text-generation",headingTag:"h2"}}),$=new j({props:{title:"Streaming text",local:"streaming-text",headingTag:"h3"}}),W=new m({props:{code:"aW1wb3J0JTIwJTdCJTIwc3RyZWFtVGV4dCUyMCU3RCUyMGZyb20lMjAlMjJhaSUyMiUzQiUwQWltcG9ydCUyMCU3QiUyMHRyYW5zZm9ybWVyc0pTJTIwJTdEJTIwZnJvbSUyMCUyMiU0MGJyb3dzZXItYWklMkZ0cmFuc2Zvcm1lcnMtanMlMjIlM0IlMEElMEFjb25zdCUyMHJlc3VsdCUyMCUzRCUyMHN0cmVhbVRleHQoJTdCJTBBJTIwJTIwbW9kZWwlM0ElMjB0cmFuc2Zvcm1lcnNKUyglMjJIdWdnaW5nRmFjZVRCJTJGU21vbExNMi0zNjBNLUluc3RydWN0JTIyKSUyQyUwQSUyMCUyMHByb21wdCUzQSUyMCUyMkludmVudCUyMGElMjBuZXclMjBob2xpZGF5JTIwYW5kJTIwZGVzY3JpYmUlMjBpdHMlMjB0cmFkaXRpb25zLiUyMiUyQyUwQSU3RCklM0IlMEElMEFmb3IlMjBhd2FpdCUyMChjb25zdCUyMHRleHRQYXJ0JTIwb2YlMjByZXN1bHQudGV4dFN0cmVhbSklMjAlN0IlMEElMjAlMjBjb25zb2xlLmxvZyh0ZXh0UGFydCklM0IlMEElN0Q=",highlighted:`<span class="hljs-keyword">import</span> { streamText } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;ai&quot;</span>;
<span class="hljs-keyword">import</span> { transformersJS } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@browser-ai/transformers-js&quot;</span>;

<span class="hljs-keyword">const</span> result = <span class="hljs-title function_">streamText</span>({
  <span class="hljs-attr">model</span>: <span class="hljs-title function_">transformersJS</span>(<span class="hljs-string">&quot;HuggingFaceTB/SmolLM2-360M-Instruct&quot;</span>),
  <span class="hljs-attr">prompt</span>: <span class="hljs-string">&quot;Invent a new holiday and describe its traditions.&quot;</span>,
});

<span class="hljs-keyword">for</span> <span class="hljs-keyword">await</span> (<span class="hljs-keyword">const</span> textPart <span class="hljs-keyword">of</span> result.<span class="hljs-property">textStream</span>) {
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(textPart);
}`,wrap:!1}}),Q=new j({props:{title:"Non-streaming text",local:"non-streaming-text",headingTag:"h3"}}),S=new m({props:{code:"aW1wb3J0JTIwJTdCJTIwZ2VuZXJhdGVUZXh0JTIwJTdEJTIwZnJvbSUyMCUyMmFpJTIyJTNCJTBBaW1wb3J0JTIwJTdCJTIwdHJhbnNmb3JtZXJzSlMlMjAlN0QlMjBmcm9tJTIwJTIyJTQwYnJvd3Nlci1haSUyRnRyYW5zZm9ybWVycy1qcyUyMiUzQiUwQSUwQWNvbnN0JTIwcmVzdWx0JTIwJTNEJTIwYXdhaXQlMjBnZW5lcmF0ZVRleHQoJTdCJTBBJTIwJTIwbW9kZWwlM0ElMjB0cmFuc2Zvcm1lcnNKUyglMjJIdWdnaW5nRmFjZVRCJTJGU21vbExNMi0zNjBNLUluc3RydWN0JTIyKSUyQyUwQSUyMCUyMHByb21wdCUzQSUyMCUyMkludmVudCUyMGElMjBuZXclMjBob2xpZGF5JTIwYW5kJTIwZGVzY3JpYmUlMjBpdHMlMjB0cmFkaXRpb25zLiUyMiUyQyUwQSU3RCklM0IlMEFjb25zb2xlLmxvZyhyZXN1bHQudGV4dCklM0I=",highlighted:`<span class="hljs-keyword">import</span> { generateText } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;ai&quot;</span>;
<span class="hljs-keyword">import</span> { transformersJS } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@browser-ai/transformers-js&quot;</span>;

<span class="hljs-keyword">const</span> result = <span class="hljs-keyword">await</span> <span class="hljs-title function_">generateText</span>({
  <span class="hljs-attr">model</span>: <span class="hljs-title function_">transformersJS</span>(<span class="hljs-string">&quot;HuggingFaceTB/SmolLM2-360M-Instruct&quot;</span>),
  <span class="hljs-attr">prompt</span>: <span class="hljs-string">&quot;Invent a new holiday and describe its traditions.&quot;</span>,
});
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result.<span class="hljs-property">text</span>);`,wrap:!1}}),v=new j({props:{title:"Text embeddings",local:"text-embeddings",headingTag:"h2"}}),V=new m({props:{code:"aW1wb3J0JTIwJTdCJTIwZW1iZWQlMkMlMjBlbWJlZE1hbnklMjAlN0QlMjBmcm9tJTIwJTIyYWklMjIlM0IlMEFpbXBvcnQlMjAlN0IlMjB0cmFuc2Zvcm1lcnNKUyUyMCU3RCUyMGZyb20lMjAlMjIlNDBicm93c2VyLWFpJTJGdHJhbnNmb3JtZXJzLWpzJTIyJTNCJTBBJTBBJTJGJTJGJTIwU2luZ2xlJTIwZW1iZWRkaW5nJTBBY29uc3QlMjAlN0IlMjBlbWJlZGRpbmclMjAlN0QlMjAlM0QlMjBhd2FpdCUyMGVtYmVkKCU3QiUwQSUyMCUyMG1vZGVsJTNBJTIwdHJhbnNmb3JtZXJzSlMuZW1iZWRkaW5nKCUyMlN1cGFiYXNlJTJGZ3RlLXNtYWxsJTIyKSUyQyUwQSUyMCUyMHZhbHVlJTNBJTIwJTIySGVsbG8lMkMlMjB3b3JsZCElMjIlMkMlMEElN0QpJTNCJTBBJTBBJTJGJTJGJTIwTXVsdGlwbGUlMjBlbWJlZGRpbmdzJTBBY29uc3QlMjAlN0IlMjBlbWJlZGRpbmdzJTIwJTdEJTIwJTNEJTIwYXdhaXQlMjBlbWJlZE1hbnkoJTdCJTBBJTIwJTIwbW9kZWwlM0ElMjB0cmFuc2Zvcm1lcnNKUy5lbWJlZGRpbmcoJTIyU3VwYWJhc2UlMkZndGUtc21hbGwlMjIpJTJDJTBBJTIwJTIwdmFsdWVzJTNBJTIwJTVCJTIySGVsbG8lMjIlMkMlMjAlMjJXb3JsZCUyMiUyQyUyMCUyMkFJJTIyJTVEJTJDJTBBJTdEKSUzQg==",highlighted:`<span class="hljs-keyword">import</span> { embed, embedMany } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;ai&quot;</span>;
<span class="hljs-keyword">import</span> { transformersJS } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@browser-ai/transformers-js&quot;</span>;

<span class="hljs-comment">// Single embedding</span>
<span class="hljs-keyword">const</span> { embedding } = <span class="hljs-keyword">await</span> <span class="hljs-title function_">embed</span>({
  <span class="hljs-attr">model</span>: transformersJS.<span class="hljs-title function_">embedding</span>(<span class="hljs-string">&quot;Supabase/gte-small&quot;</span>),
  <span class="hljs-attr">value</span>: <span class="hljs-string">&quot;Hello, world!&quot;</span>,
});

<span class="hljs-comment">// Multiple embeddings</span>
<span class="hljs-keyword">const</span> { embeddings } = <span class="hljs-keyword">await</span> <span class="hljs-title function_">embedMany</span>({
  <span class="hljs-attr">model</span>: transformersJS.<span class="hljs-title function_">embedding</span>(<span class="hljs-string">&quot;Supabase/gte-small&quot;</span>),
  <span class="hljs-attr">values</span>: [<span class="hljs-string">&quot;Hello&quot;</span>, <span class="hljs-string">&quot;World&quot;</span>, <span class="hljs-string">&quot;AI&quot;</span>],
});`,wrap:!1}}),G=new j({props:{title:"Audio transcription",local:"audio-transcription",headingTag:"h2"}}),z=new m({props:{code:"aW1wb3J0JTIwJTdCJTIwZXhwZXJpbWVudGFsX3RyYW5zY3JpYmUlMjBhcyUyMHRyYW5zY3JpYmUlMjAlN0QlMjBmcm9tJTIwJTIyYWklMjIlM0IlMEFpbXBvcnQlMjAlN0IlMjB0cmFuc2Zvcm1lcnNKUyUyMCU3RCUyMGZyb20lMjAlMjIlNDBicm93c2VyLWFpJTJGdHJhbnNmb3JtZXJzLWpzJTIyJTNCJTBBJTBBY29uc3QlMjB0cmFuc2NyaXB0JTIwJTNEJTIwYXdhaXQlMjB0cmFuc2NyaWJlKCU3QiUwQSUyMCUyMG1vZGVsJTNBJTIwdHJhbnNmb3JtZXJzSlMudHJhbnNjcmlwdGlvbiglMjJYZW5vdmElMkZ3aGlzcGVyLWJhc2UlMjIpJTJDJTBBJTIwJTIwYXVkaW8lM0ElMjBhdWRpb0ZpbGUlMkMlMEElN0QpJTNCJTBBY29uc29sZS5sb2codHJhbnNjcmlwdC50ZXh0KSUzQiUwQWNvbnNvbGUubG9nKHRyYW5zY3JpcHQuc2VnbWVudHMpJTNCJTIwJTJGJTJGJTIwc2VnbWVudHMlMjB3aXRoJTIwdGltZXN0YW1wcw==",highlighted:`<span class="hljs-keyword">import</span> { experimental_transcribe <span class="hljs-keyword">as</span> transcribe } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;ai&quot;</span>;
<span class="hljs-keyword">import</span> { transformersJS } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@browser-ai/transformers-js&quot;</span>;

<span class="hljs-keyword">const</span> transcript = <span class="hljs-keyword">await</span> <span class="hljs-title function_">transcribe</span>({
  <span class="hljs-attr">model</span>: transformersJS.<span class="hljs-title function_">transcription</span>(<span class="hljs-string">&quot;Xenova/whisper-base&quot;</span>),
  <span class="hljs-attr">audio</span>: audioFile,
});
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(transcript.<span class="hljs-property">text</span>);
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(transcript.<span class="hljs-property">segments</span>); <span class="hljs-comment">// segments with timestamps</span>`,wrap:!1}}),E=new j({props:{title:"Vision models",local:"vision-models",headingTag:"h2"}}),R=new m({props:{code:"aW1wb3J0JTIwJTdCJTIwc3RyZWFtVGV4dCUyMCU3RCUyMGZyb20lMjAlMjJhaSUyMiUzQiUwQWltcG9ydCUyMCU3QiUyMHRyYW5zZm9ybWVyc0pTJTIwJTdEJTIwZnJvbSUyMCUyMiU0MGJyb3dzZXItYWklMkZ0cmFuc2Zvcm1lcnMtanMlMjIlM0IlMEElMEFjb25zdCUyMHJlc3VsdCUyMCUzRCUyMHN0cmVhbVRleHQoJTdCJTBBJTIwJTIwbW9kZWwlM0ElMjB0cmFuc2Zvcm1lcnNKUyglMjJIdWdnaW5nRmFjZVRCJTJGU21vbFZMTS0yNTZNLUluc3RydWN0JTIyJTJDJTIwJTdCJTBBJTIwJTIwJTIwJTIwaXNWaXNpb25Nb2RlbCUzQSUyMHRydWUlMkMlMEElMjAlMjAlMjAlMjBkZXZpY2UlM0ElMjAlMjJ3ZWJncHUlMjIlMkMlMEElMjAlMjAlN0QpJTJDJTBBJTIwJTIwbWVzc2FnZXMlM0ElMjAlNUIlMEElMjAlMjAlMjAlMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjByb2xlJTNBJTIwJTIydXNlciUyMiUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMGNvbnRlbnQlM0ElMjAlNUIlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlN0IlMjB0eXBlJTNBJTIwJTIydGV4dCUyMiUyQyUyMHRleHQlM0ElMjAlMjJEZXNjcmliZSUyMHRoaXMlMjBpbWFnZSUyMiUyMCU3RCUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3QiUyMHR5cGUlM0ElMjAlMjJpbWFnZSUyMiUyQyUyMGltYWdlJTNBJTIwc29tZUltYWdlQmxvYk9yVXJsJTIwJTdEJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTVEJTJDJTBBJTIwJTIwJTIwJTIwJTdEJTJDJTBBJTIwJTIwJTVEJTJDJTBBJTdEKSUzQiUwQSUwQWZvciUyMGF3YWl0JTIwKGNvbnN0JTIwY2h1bmslMjBvZiUyMHJlc3VsdC50ZXh0U3RyZWFtKSUyMCU3QiUwQSUyMCUyMGNvbnNvbGUubG9nKGNodW5rKSUzQiUwQSU3RA==",highlighted:`<span class="hljs-keyword">import</span> { streamText } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;ai&quot;</span>;
<span class="hljs-keyword">import</span> { transformersJS } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@browser-ai/transformers-js&quot;</span>;

<span class="hljs-keyword">const</span> result = <span class="hljs-title function_">streamText</span>({
  <span class="hljs-attr">model</span>: <span class="hljs-title function_">transformersJS</span>(<span class="hljs-string">&quot;HuggingFaceTB/SmolVLM-256M-Instruct&quot;</span>, {
    <span class="hljs-attr">isVisionModel</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-attr">device</span>: <span class="hljs-string">&quot;webgpu&quot;</span>,
  }),
  <span class="hljs-attr">messages</span>: [
    {
      <span class="hljs-attr">role</span>: <span class="hljs-string">&quot;user&quot;</span>,
      <span class="hljs-attr">content</span>: [
        { <span class="hljs-attr">type</span>: <span class="hljs-string">&quot;text&quot;</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">&quot;Describe this image&quot;</span> },
        { <span class="hljs-attr">type</span>: <span class="hljs-string">&quot;image&quot;</span>, <span class="hljs-attr">image</span>: someImageBlobOrUrl },
      ],
    },
  ],
});

<span class="hljs-keyword">for</span> <span class="hljs-keyword">await</span> (<span class="hljs-keyword">const</span> chunk <span class="hljs-keyword">of</span> result.<span class="hljs-property">textStream</span>) {
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(chunk);
}`,wrap:!1}}),X=new j({props:{title:"Web Worker offloading",local:"web-worker-offloading",headingTag:"h2"}}),H=new m({props:{code:"aW1wb3J0JTIwJTdCJTIwVHJhbnNmb3JtZXJzSlNXb3JrZXJIYW5kbGVyJTIwJTdEJTIwZnJvbSUyMCUyMiU0MGJyb3dzZXItYWklMkZ0cmFuc2Zvcm1lcnMtanMlMjIlM0IlMEElMEFjb25zdCUyMGhhbmRsZXIlMjAlM0QlMjBuZXclMjBUcmFuc2Zvcm1lcnNKU1dvcmtlckhhbmRsZXIoKSUzQiUwQXNlbGYub25tZXNzYWdlJTIwJTNEJTIwKG1zZyUzQSUyME1lc3NhZ2VFdmVudCklMjAlM0QlM0UlMjAlN0IlMEElMjAlMjBoYW5kbGVyLm9ubWVzc2FnZShtc2cpJTNCJTBBJTdEJTNC",highlighted:`<span class="hljs-keyword">import</span> { <span class="hljs-title class_">TransformersJSWorkerHandler</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@browser-ai/transformers-js&quot;</span>;

<span class="hljs-keyword">const</span> handler = <span class="hljs-keyword">new</span> <span class="hljs-title class_">TransformersJSWorkerHandler</span>();
self.<span class="hljs-property">onmessage</span> = <span class="hljs-function">(<span class="hljs-params">msg: MessageEvent</span>) =&gt;</span> {
  handler.<span class="hljs-title function_">onmessage</span>(msg);
};`,wrap:!1}}),x=new m({props:{code:"aW1wb3J0JTIwJTdCJTIwc3RyZWFtVGV4dCUyMCU3RCUyMGZyb20lMjAlMjJhaSUyMiUzQiUwQWltcG9ydCUyMCU3QiUyMHRyYW5zZm9ybWVyc0pTJTIwJTdEJTIwZnJvbSUyMCUyMiU0MGJyb3dzZXItYWklMkZ0cmFuc2Zvcm1lcnMtanMlMjIlM0IlMEElMEFjb25zdCUyMG1vZGVsJTIwJTNEJTIwdHJhbnNmb3JtZXJzSlMoJTIySHVnZ2luZ0ZhY2VUQiUyRlNtb2xMTTItMzYwTS1JbnN0cnVjdCUyMiUyQyUyMCU3QiUwQSUyMCUyMGRldmljZSUzQSUyMCUyMndlYmdwdSUyMiUyQyUwQSUyMCUyMHdvcmtlciUzQSUyMG5ldyUyMFdvcmtlcihuZXclMjBVUkwoJTIyLiUyRndvcmtlci50cyUyMiUyQyUyMGltcG9ydC5tZXRhLnVybCklMkMlMjAlN0IlMEElMjAlMjAlMjAlMjB0eXBlJTNBJTIwJTIybW9kdWxlJTIyJTJDJTBBJTIwJTIwJTdEKSUyQyUwQSU3RCklM0IlMEElMEFjb25zdCUyMHJlc3VsdCUyMCUzRCUyMHN0cmVhbVRleHQoJTdCJTBBJTIwJTIwbW9kZWwlMkMlMEElMjAlMjBtZXNzYWdlcyUzQSUyMCU1QiU3QiUyMHJvbGUlM0ElMjAlMjJ1c2VyJTIyJTJDJTIwY29udGVudCUzQSUyMCUyMkhlbGxvISUyMiUyMCU3RCU1RCUyQyUwQSU3RCklM0I=",highlighted:`<span class="hljs-keyword">import</span> { streamText } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;ai&quot;</span>;
<span class="hljs-keyword">import</span> { transformersJS } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@browser-ai/transformers-js&quot;</span>;

<span class="hljs-keyword">const</span> model = <span class="hljs-title function_">transformersJS</span>(<span class="hljs-string">&quot;HuggingFaceTB/SmolLM2-360M-Instruct&quot;</span>, {
  <span class="hljs-attr">device</span>: <span class="hljs-string">&quot;webgpu&quot;</span>,
  <span class="hljs-attr">worker</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Worker</span>(<span class="hljs-keyword">new</span> <span class="hljs-title function_">URL</span>(<span class="hljs-string">&quot;./worker.ts&quot;</span>, <span class="hljs-keyword">import</span>.<span class="hljs-property">meta</span>.<span class="hljs-property">url</span>), {
    <span class="hljs-attr">type</span>: <span class="hljs-string">&quot;module&quot;</span>,
  }),
});

<span class="hljs-keyword">const</span> result = <span class="hljs-title function_">streamText</span>({
  model,
  <span class="hljs-attr">messages</span>: [{ <span class="hljs-attr">role</span>: <span class="hljs-string">&quot;user&quot;</span>, <span class="hljs-attr">content</span>: <span class="hljs-string">&quot;Hello!&quot;</span> }],
});`,wrap:!1}}),A=new j({props:{title:"Download progress tracking",local:"download-progress-tracking",headingTag:"h2"}}),L=new m({props:{code:"aW1wb3J0JTIwJTdCJTIwc3RyZWFtVGV4dCUyMCU3RCUyMGZyb20lMjAlMjJhaSUyMiUzQiUwQWltcG9ydCUyMCU3QiUyMHRyYW5zZm9ybWVyc0pTJTIwJTdEJTIwZnJvbSUyMCUyMiU0MGJyb3dzZXItYWklMkZ0cmFuc2Zvcm1lcnMtanMlMjIlM0IlMEElMEFjb25zdCUyMG1vZGVsJTIwJTNEJTIwdHJhbnNmb3JtZXJzSlMoJTIySHVnZ2luZ0ZhY2VUQiUyRlNtb2xMTTItMzYwTS1JbnN0cnVjdCUyMiklM0IlMEFjb25zdCUyMGF2YWlsYWJpbGl0eSUyMCUzRCUyMGF3YWl0JTIwbW9kZWwuYXZhaWxhYmlsaXR5KCklM0IlMEElMEFpZiUyMChhdmFpbGFiaWxpdHklMjAlM0QlM0QlM0QlMjAlMjJ1bmF2YWlsYWJsZSUyMiklMjAlN0IlMEElMjAlMjBjb25zb2xlLmxvZyglMjJCcm93c2VyJTIwZG9lc24ndCUyMHN1cHBvcnQlMjBUcmFuc2Zvcm1lcnMuanMlMjIpJTNCJTBBJTdEJTIwZWxzZSUyMGlmJTIwKGF2YWlsYWJpbGl0eSUyMCUzRCUzRCUzRCUyMCUyMmRvd25sb2FkYWJsZSUyMiklMjAlN0IlMEElMjAlMjBhd2FpdCUyMG1vZGVsLmNyZWF0ZVNlc3Npb25XaXRoUHJvZ3Jlc3MoKCU3QiUyMHByb2dyZXNzJTIwJTdEKSUyMCUzRCUzRSUyMCU3QiUwQSUyMCUyMCUyMCUyMGNvbnNvbGUubG9nKCU2MERvd25sb2FkJTIwcHJvZ3Jlc3MlM0ElMjAlMjQlN0JNYXRoLnJvdW5kKHByb2dyZXNzJTIwKiUyMDEwMCklN0QlMjUlNjApJTNCJTBBJTIwJTIwJTdEKSUzQiUwQSU3RCUwQSUwQSUyRiUyRiUyME1vZGVsJTIwaXMlMjByZWFkeSUwQWNvbnN0JTIwcmVzdWx0JTIwJTNEJTIwc3RyZWFtVGV4dCglN0IlMjBtb2RlbCUyQyUyMHByb21wdCUzQSUyMCUyMkhlbGxvISUyMiUyMCU3RCklM0I=",highlighted:`<span class="hljs-keyword">import</span> { streamText } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;ai&quot;</span>;
<span class="hljs-keyword">import</span> { transformersJS } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@browser-ai/transformers-js&quot;</span>;

<span class="hljs-keyword">const</span> model = <span class="hljs-title function_">transformersJS</span>(<span class="hljs-string">&quot;HuggingFaceTB/SmolLM2-360M-Instruct&quot;</span>);
<span class="hljs-keyword">const</span> availability = <span class="hljs-keyword">await</span> model.<span class="hljs-title function_">availability</span>();

<span class="hljs-keyword">if</span> (availability === <span class="hljs-string">&quot;unavailable&quot;</span>) {
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;Browser doesn&#x27;t support Transformers.js&quot;</span>);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (availability === <span class="hljs-string">&quot;downloadable&quot;</span>) {
  <span class="hljs-keyword">await</span> model.<span class="hljs-title function_">createSessionWithProgress</span>(<span class="hljs-function">(<span class="hljs-params">{ progress }</span>) =&gt;</span> {
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">\`Download progress: <span class="hljs-subst">\${<span class="hljs-built_in">Math</span>.round(progress * <span class="hljs-number">100</span>)}</span>%\`</span>);
  });
}

<span class="hljs-comment">// Model is ready</span>
<span class="hljs-keyword">const</span> result = <span class="hljs-title function_">streamText</span>({ model, <span class="hljs-attr">prompt</span>: <span class="hljs-string">&quot;Hello!&quot;</span> });`,wrap:!1}}),K=new j({props:{title:"Tool calling",local:"tool-calling",headingTag:"h2"}}),T=new kl({props:{$$slots:{default:[Nl]},$$scope:{ctx:ys}}}),D=new m({props:{code:"aW1wb3J0JTIwJTdCJTIwc3RyZWFtVGV4dCUyQyUyMHRvb2wlMkMlMjBzdGVwQ291bnRJcyUyMCU3RCUyMGZyb20lMjAlMjJhaSUyMiUzQiUwQWltcG9ydCUyMCU3QiUyMHRyYW5zZm9ybWVyc0pTJTIwJTdEJTIwZnJvbSUyMCUyMiU0MGJyb3dzZXItYWklMkZ0cmFuc2Zvcm1lcnMtanMlMjIlM0IlMEFpbXBvcnQlMjAlN0IlMjB6JTIwJTdEJTIwZnJvbSUyMCUyMnpvZCUyMiUzQiUwQSUwQWNvbnN0JTIwcmVzdWx0JTIwJTNEJTIwYXdhaXQlMjBzdHJlYW1UZXh0KCU3QiUwQSUyMCUyMG1vZGVsJTNBJTIwdHJhbnNmb3JtZXJzSlMoJTIyb25ueC1jb21tdW5pdHklMkZRd2VuMy0wLjZCLU9OTlglMjIpJTJDJTBBJTIwJTIwbWVzc2FnZXMlM0ElMjAlNUIlN0IlMjByb2xlJTNBJTIwJTIydXNlciUyMiUyQyUyMGNvbnRlbnQlM0ElMjAlMjJXaGF0J3MlMjB0aGUlMjB3ZWF0aGVyJTIwaW4lMjBTYW4lMjBGcmFuY2lzY28lM0YlMjIlMjAlN0QlNUQlMkMlMEElMjAlMjB0b29scyUzQSUyMCU3QiUwQSUyMCUyMCUyMCUyMHdlYXRoZXIlM0ElMjB0b29sKCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMGRlc2NyaXB0aW9uJTNBJTIwJTIyR2V0JTIwdGhlJTIwd2VhdGhlciUyMGluJTIwYSUyMGxvY2F0aW9uJTIyJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwaW5wdXRTY2hlbWElM0ElMjB6Lm9iamVjdCglN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBsb2NhdGlvbiUzQSUyMHouc3RyaW5nKCkuZGVzY3JpYmUoJTIyVGhlJTIwbG9jYXRpb24lMjB0byUyMGdldCUyMHRoZSUyMHdlYXRoZXIlMjBmb3IlMjIpJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTdEKSUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMGV4ZWN1dGUlM0ElMjBhc3luYyUyMCglN0IlMjBsb2NhdGlvbiUyMCU3RCklMjAlM0QlM0UlMjAoJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwbG9jYXRpb24lMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjB0ZW1wZXJhdHVyZSUzQSUyMDcyJTIwJTJCJTIwTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpJTIwKiUyMDIxKSUyMC0lMjAxMCUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCU3RCklMkMlMEElMjAlMjAlMjAlMjAlN0QpJTJDJTBBJTIwJTIwJTdEJTJDJTBBJTIwJTIwc3RvcFdoZW4lM0ElMjBzdGVwQ291bnRJcyg1KSUyQyUwQSU3RCklM0I=",highlighted:`<span class="hljs-keyword">import</span> { streamText, tool, stepCountIs } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;ai&quot;</span>;
<span class="hljs-keyword">import</span> { transformersJS } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@browser-ai/transformers-js&quot;</span>;
<span class="hljs-keyword">import</span> { z } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;zod&quot;</span>;

<span class="hljs-keyword">const</span> result = <span class="hljs-keyword">await</span> <span class="hljs-title function_">streamText</span>({
  <span class="hljs-attr">model</span>: <span class="hljs-title function_">transformersJS</span>(<span class="hljs-string">&quot;onnx-community/Qwen3-0.6B-ONNX&quot;</span>),
  <span class="hljs-attr">messages</span>: [{ <span class="hljs-attr">role</span>: <span class="hljs-string">&quot;user&quot;</span>, <span class="hljs-attr">content</span>: <span class="hljs-string">&quot;What&#x27;s the weather in San Francisco?&quot;</span> }],
  <span class="hljs-attr">tools</span>: {
    <span class="hljs-attr">weather</span>: <span class="hljs-title function_">tool</span>({
      <span class="hljs-attr">description</span>: <span class="hljs-string">&quot;Get the weather in a location&quot;</span>,
      <span class="hljs-attr">inputSchema</span>: z.<span class="hljs-title function_">object</span>({
        <span class="hljs-attr">location</span>: z.<span class="hljs-title function_">string</span>().<span class="hljs-title function_">describe</span>(<span class="hljs-string">&quot;The location to get the weather for&quot;</span>),
      }),
      <span class="hljs-attr">execute</span>: <span class="hljs-keyword">async</span> ({ location }) =&gt; ({
        location,
        <span class="hljs-attr">temperature</span>: <span class="hljs-number">72</span> + <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() * <span class="hljs-number">21</span>) - <span class="hljs-number">10</span>,
      }),
    }),
  },
  <span class="hljs-attr">stopWhen</span>: <span class="hljs-title function_">stepCountIs</span>(<span class="hljs-number">5</span>),
});`,wrap:!1}}),O=new j({props:{title:"useChat with custom transport",local:"usechat-with-custom-transport",headingTag:"h2"}}),ls=new m({props:{code:"aW1wb3J0JTIwJTdCJTBBJTIwJTIwQ2hhdFRyYW5zcG9ydCUyQyUyMFVJTWVzc2FnZUNodW5rJTJDJTIwc3RyZWFtVGV4dCUyQyUwQSUyMCUyMGNvbnZlcnRUb01vZGVsTWVzc2FnZXMlMkMlMjBDaGF0UmVxdWVzdE9wdGlvbnMlMkMlMEElN0QlMjBmcm9tJTIwJTIyYWklMjIlM0IlMEFpbXBvcnQlMjAlN0IlMEElMjAlMjBUcmFuc2Zvcm1lcnNKU0xhbmd1YWdlTW9kZWwlMkMlMEElMjAlMjBUcmFuc2Zvcm1lcnNVSU1lc3NhZ2UlMkMlMEElN0QlMjBmcm9tJTIwJTIyJTQwYnJvd3Nlci1haSUyRnRyYW5zZm9ybWVycy1qcyUyMiUzQiUwQSUwQWV4cG9ydCUyMGNsYXNzJTIwVHJhbnNmb3JtZXJzQ2hhdFRyYW5zcG9ydCUwQSUyMCUyMGltcGxlbWVudHMlMjBDaGF0VHJhbnNwb3J0JTNDVHJhbnNmb3JtZXJzVUlNZXNzYWdlJTNFJTBBJTdCJTBBJTIwJTIwY29uc3RydWN0b3IocHJpdmF0ZSUyMHJlYWRvbmx5JTIwbW9kZWwlM0ElMjBUcmFuc2Zvcm1lcnNKU0xhbmd1YWdlTW9kZWwpJTIwJTdCJTdEJTBBJTBBJTIwJTIwYXN5bmMlMjBzZW5kTWVzc2FnZXMoJTBBJTIwJTIwJTIwJTIwb3B0aW9ucyUzQSUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMGNoYXRJZCUzQSUyMHN0cmluZyUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMG1lc3NhZ2VzJTNBJTIwVHJhbnNmb3JtZXJzVUlNZXNzYWdlJTVCJTVEJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwYWJvcnRTaWduYWwlM0ElMjBBYm9ydFNpZ25hbCUyMCU3QyUyMHVuZGVmaW5lZCUzQiUwQSUyMCUyMCUyMCUyMCU3RCUyMCUyNiUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMHRyaWdnZXIlM0ElMjAlMjJzdWJtaXQtbWVzc2FnZSUyMiUyMCU3QyUyMCUyMnN1Ym1pdC10b29sLXJlc3VsdCUyMiUyMCU3QyUyMCUyMnJlZ2VuZXJhdGUtbWVzc2FnZSUyMiUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMG1lc3NhZ2VJZCUzQSUyMHN0cmluZyUyMCU3QyUyMHVuZGVmaW5lZCUzQiUwQSUyMCUyMCUyMCUyMCU3RCUyMCUyNiUyMENoYXRSZXF1ZXN0T3B0aW9ucyUyQyUwQSUyMCUyMCklM0ElMjBQcm9taXNlJTNDUmVhZGFibGVTdHJlYW0lM0NVSU1lc3NhZ2VDaHVuayUzRSUzRSUyMCU3QiUwQSUyMCUyMCUyMCUyMGNvbnN0JTIwcHJvbXB0JTIwJTNEJTIwYXdhaXQlMjBjb252ZXJ0VG9Nb2RlbE1lc3NhZ2VzKG9wdGlvbnMubWVzc2FnZXMpJTNCJTBBJTIwJTIwJTIwJTIwY29uc3QlMjByZXN1bHQlMjAlM0QlMjBzdHJlYW1UZXh0KCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMG1vZGVsJTNBJTIwdGhpcy5tb2RlbCUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMG1lc3NhZ2VzJTNBJTIwcHJvbXB0JTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwYWJvcnRTaWduYWwlM0ElMjBvcHRpb25zLmFib3J0U2lnbmFsJTJDJTBBJTIwJTIwJTIwJTIwJTdEKSUzQiUwQSUyMCUyMCUyMCUyMHJldHVybiUyMHJlc3VsdC50b1VJTWVzc2FnZVN0cmVhbSgpJTNCJTBBJTIwJTIwJTdEJTBBJTBBJTIwJTIwYXN5bmMlMjByZWNvbm5lY3RUb1N0cmVhbSgpJTNBJTIwUHJvbWlzZSUzQ1JlYWRhYmxlU3RyZWFtJTNDVUlNZXNzYWdlQ2h1bmslM0UlMjAlN0MlMjBudWxsJTNFJTIwJTdCJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwbnVsbCUzQiUyMCUyRiUyRiUyMGNsaWVudC1zaWRlJTIwQUklMjBkb2Vzbid0JTIwc3VwcG9ydCUyMHN0cmVhbSUyMHJlY29ubmVjdGlvbiUwQSUyMCUyMCU3RCUwQSU3RA==",highlighted:`<span class="hljs-keyword">import</span> {
  <span class="hljs-title class_">ChatTransport</span>, <span class="hljs-title class_">UIMessageChunk</span>, streamText,
  convertToModelMessages, <span class="hljs-title class_">ChatRequestOptions</span>,
} <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;ai&quot;</span>;
<span class="hljs-keyword">import</span> {
  <span class="hljs-title class_">TransformersJSLanguageModel</span>,
  <span class="hljs-title class_">TransformersUIMessage</span>,
} <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@browser-ai/transformers-js&quot;</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">TransformersChatTransport</span>
  <span class="hljs-keyword">implements</span> <span class="hljs-title class_">ChatTransport</span>&lt;<span class="hljs-title class_">TransformersUIMessage</span>&gt;
{
  <span class="hljs-title function_">constructor</span>(<span class="hljs-params"><span class="hljs-keyword">private</span> <span class="hljs-keyword">readonly</span> model: TransformersJSLanguageModel</span>) {}

  <span class="hljs-keyword">async</span> <span class="hljs-title function_">sendMessages</span>(
    <span class="hljs-attr">options</span>: {
      <span class="hljs-attr">chatId</span>: <span class="hljs-built_in">string</span>;
      <span class="hljs-attr">messages</span>: <span class="hljs-title class_">TransformersUIMessage</span>[];
      <span class="hljs-attr">abortSignal</span>: <span class="hljs-title class_">AbortSignal</span> | <span class="hljs-literal">undefined</span>;
    } &amp; {
      <span class="hljs-attr">trigger</span>: <span class="hljs-string">&quot;submit-message&quot;</span> | <span class="hljs-string">&quot;submit-tool-result&quot;</span> | <span class="hljs-string">&quot;regenerate-message&quot;</span>;
      <span class="hljs-attr">messageId</span>: <span class="hljs-built_in">string</span> | <span class="hljs-literal">undefined</span>;
    } &amp; <span class="hljs-title class_">ChatRequestOptions</span>,
  ): <span class="hljs-title class_">Promise</span>&lt;<span class="hljs-title class_">ReadableStream</span>&lt;<span class="hljs-title class_">UIMessageChunk</span>&gt;&gt; {
    <span class="hljs-keyword">const</span> prompt = <span class="hljs-keyword">await</span> <span class="hljs-title function_">convertToModelMessages</span>(options.<span class="hljs-property">messages</span>);
    <span class="hljs-keyword">const</span> result = <span class="hljs-title function_">streamText</span>({
      <span class="hljs-attr">model</span>: <span class="hljs-variable language_">this</span>.<span class="hljs-property">model</span>,
      <span class="hljs-attr">messages</span>: prompt,
      <span class="hljs-attr">abortSignal</span>: options.<span class="hljs-property">abortSignal</span>,
    });
    <span class="hljs-keyword">return</span> result.<span class="hljs-title function_">toUIMessageStream</span>();
  }

  <span class="hljs-keyword">async</span> <span class="hljs-title function_">reconnectToStream</span>(): <span class="hljs-title class_">Promise</span>&lt;<span class="hljs-title class_">ReadableStream</span>&lt;<span class="hljs-title class_">UIMessageChunk</span>&gt; | <span class="hljs-literal">null</span>&gt; {
    <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>; <span class="hljs-comment">// client-side AI doesn&#x27;t support stream reconnection</span>
  }
}`,wrap:!1}}),ts=new m({props:{code:"aW1wb3J0JTIwJTdCJTIwdXNlQ2hhdCUyMCU3RCUyMGZyb20lMjAlMjIlNDBhaS1zZGslMkZyZWFjdCUyMiUzQiUwQWltcG9ydCUyMCU3QiUyMHRyYW5zZm9ybWVyc0pTJTJDJTIwVHJhbnNmb3JtZXJzVUlNZXNzYWdlJTIwJTdEJTIwZnJvbSUyMCUyMiU0MGJyb3dzZXItYWklMkZ0cmFuc2Zvcm1lcnMtanMlMjIlM0IlMEElMEFjb25zdCUyMG1vZGVsJTIwJTNEJTIwdHJhbnNmb3JtZXJzSlMoJTIySHVnZ2luZ0ZhY2VUQiUyRlNtb2xMTTItMzYwTS1JbnN0cnVjdCUyMiUyQyUyMCU3QiUwQSUyMCUyMGRldmljZSUzQSUyMCUyMndlYmdwdSUyMiUyQyUwQSUyMCUyMHdvcmtlciUzQSUyMG5ldyUyMFdvcmtlcihuZXclMjBVUkwoJTIyLiUyRndvcmtlci50cyUyMiUyQyUyMGltcG9ydC5tZXRhLnVybCklMkMlMjAlN0IlMjB0eXBlJTNBJTIwJTIybW9kdWxlJTIyJTIwJTdEKSUyQyUwQSU3RCklM0IlMEElMEFjb25zdCUyMCU3QiUyMHNlbmRNZXNzYWdlJTJDJTIwbWVzc2FnZXMlMkMlMjBzdG9wJTIwJTdEJTIwJTNEJTIwdXNlQ2hhdCUzQ1RyYW5zZm9ybWVyc1VJTWVzc2FnZSUzRSglN0IlMEElMjAlMjB0cmFuc3BvcnQlM0ElMjBuZXclMjBUcmFuc2Zvcm1lcnNDaGF0VHJhbnNwb3J0KG1vZGVsKSUyQyUwQSU3RCklM0I=",highlighted:`<span class="hljs-keyword">import</span> { useChat } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@ai-sdk/react&quot;</span>;
<span class="hljs-keyword">import</span> { transformersJS, <span class="hljs-title class_">TransformersUIMessage</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@browser-ai/transformers-js&quot;</span>;

<span class="hljs-keyword">const</span> model = <span class="hljs-title function_">transformersJS</span>(<span class="hljs-string">&quot;HuggingFaceTB/SmolLM2-360M-Instruct&quot;</span>, {
  <span class="hljs-attr">device</span>: <span class="hljs-string">&quot;webgpu&quot;</span>,
  <span class="hljs-attr">worker</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Worker</span>(<span class="hljs-keyword">new</span> <span class="hljs-title function_">URL</span>(<span class="hljs-string">&quot;./worker.ts&quot;</span>, <span class="hljs-keyword">import</span>.<span class="hljs-property">meta</span>.<span class="hljs-property">url</span>), { <span class="hljs-attr">type</span>: <span class="hljs-string">&quot;module&quot;</span> }),
});

<span class="hljs-keyword">const</span> { sendMessage, messages, stop } = useChat&lt;<span class="hljs-title class_">TransformersUIMessage</span>&gt;({
  <span class="hljs-attr">transport</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">TransformersChatTransport</span>(model),
});`,wrap:!1}}),ns=new j({props:{title:"Browser compatibility fallback",local:"browser-compatibility-fallback",headingTag:"h2"}}),ps=new m({props:{code:"aW1wb3J0JTIwJTdCJTBBJTIwJTIwdHJhbnNmb3JtZXJzSlMlMkMlMjBUcmFuc2Zvcm1lcnNVSU1lc3NhZ2UlMkMlMEElMjAlMjBkb2VzQnJvd3NlclN1cHBvcnRUcmFuc2Zvcm1lcnNKUyUyQyUwQSU3RCUyMGZyb20lMjAlMjIlNDBicm93c2VyLWFpJTJGdHJhbnNmb3JtZXJzLWpzJTIyJTNCJTBBJTBBY29uc3QlMjAlN0IlMjBzZW5kTWVzc2FnZSUyQyUyMG1lc3NhZ2VzJTJDJTIwc3RvcCUyMCU3RCUyMCUzRCUyMHVzZUNoYXQlM0NUcmFuc2Zvcm1lcnNVSU1lc3NhZ2UlM0UoJTdCJTBBJTIwJTIwdHJhbnNwb3J0JTNBJTIwZG9lc0Jyb3dzZXJTdXBwb3J0VHJhbnNmb3JtZXJzSlMoKSUwQSUyMCUyMCUyMCUyMCUzRiUyMG5ldyUyMFRyYW5zZm9ybWVyc0NoYXRUcmFuc3BvcnQobW9kZWwpJTBBJTIwJTIwJTIwJTIwJTNBJTIwbmV3JTIwRGVmYXVsdENoYXRUcmFuc3BvcnQoJTdCJTIwYXBpJTNBJTIwJTIyJTJGYXBpJTJGY2hhdCUyMiUyMCU3RCklMkMlMEElN0QpJTNC",highlighted:`<span class="hljs-keyword">import</span> {
  transformersJS, <span class="hljs-title class_">TransformersUIMessage</span>,
  doesBrowserSupportTransformersJS,
} <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@browser-ai/transformers-js&quot;</span>;

<span class="hljs-keyword">const</span> { sendMessage, messages, stop } = useChat&lt;<span class="hljs-title class_">TransformersUIMessage</span>&gt;({
  <span class="hljs-attr">transport</span>: <span class="hljs-title function_">doesBrowserSupportTransformersJS</span>()
    ? <span class="hljs-keyword">new</span> <span class="hljs-title class_">TransformersChatTransport</span>(model)
    : <span class="hljs-keyword">new</span> <span class="hljs-title class_">DefaultChatTransport</span>({ <span class="hljs-attr">api</span>: <span class="hljs-string">&quot;/api/chat&quot;</span> }),
});`,wrap:!1}}),rs=new j({props:{title:"Further reading",local:"further-reading",headingTag:"h2"}}),cs=new Bl({props:{source:"https://github.com/huggingface/transformers.js/blob/main/packages/transformers/docs/source/integrations/vercel-ai-sdk.md"}}),{c(){y=J("meta"),d=n(),h=J("p"),Ms=n(),p(u.$$.fragment),Js=n(),p(b.$$.fragment),Us=n(),I=J("p"),I.innerHTML=nl,js=n(),C=J("p"),C.innerHTML=el,ws=n(),p(f.$$.fragment),ms=n(),g=J("p"),g.innerHTML=pl,hs=n(),p(k.$$.fragment),Ts=n(),p(Z.$$.fragment),ds=n(),B=J("table"),B.innerHTML=rl,us=n(),p(N.$$.fragment),bs=n(),p($.$$.fragment),Is=n(),p(W.$$.fragment),Cs=n(),p(Q.$$.fragment),fs=n(),p(S.$$.fragment),gs=n(),p(v.$$.fragment),ks=n(),p(V.$$.fragment),Zs=n(),p(G.$$.fragment),Bs=n(),p(z.$$.fragment),Ns=n(),p(E.$$.fragment),$s=n(),p(R.$$.fragment),Ws=n(),p(X.$$.fragment),Qs=n(),F=J("p"),F.textContent=ol,Ss=n(),Y=J("p"),Y.innerHTML=cl,vs=n(),p(H.$$.fragment),Vs=n(),q=J("p"),q.innerHTML=Ml,Gs=n(),p(x.$$.fragment),zs=n(),p(A.$$.fragment),Es=n(),_=J("p"),_.textContent=il,Rs=n(),p(L.$$.fragment),Xs=n(),p(K.$$.fragment),Fs=n(),p(T.$$.fragment),Ys=n(),p(D.$$.fragment),Hs=n(),P=J("p"),P.innerHTML=yl,qs=n(),p(O.$$.fragment),xs=n(),ss=J("p"),ss.innerHTML=Jl,As=n(),p(ls.$$.fragment),_s=n(),as=J("p"),as.textContent=Ul,Ls=n(),p(ts.$$.fragment),Ks=n(),p(ns.$$.fragment),Ds=n(),es=J("p"),es.textContent=jl,Ps=n(),p(ps.$$.fragment),Os=n(),p(rs.$$.fragment),sl=n(),os=J("ul"),os.innerHTML=wl,ll=n(),p(cs.$$.fragment),al=n(),is=J("p"),this.h()},l(s){const l=fl("svelte-u9bgzb",document.head);y=U(l,"META",{name:!0,content:!0}),l.forEach(a),d=e(s),h=U(s,"P",{}),hl(h).forEach(a),Ms=e(s),r(u.$$.fragment,s),Js=e(s),r(b.$$.fragment,s),Us=e(s),I=U(s,"P",{"data-svelte-h":!0}),w(I)!=="svelte-13bb1lx"&&(I.innerHTML=nl),js=e(s),C=U(s,"P",{"data-svelte-h":!0}),w(C)!=="svelte-1aw8z9h"&&(C.innerHTML=el),ws=e(s),r(f.$$.fragment,s),ms=e(s),g=U(s,"P",{"data-svelte-h":!0}),w(g)!=="svelte-1lmvjg2"&&(g.innerHTML=pl),hs=e(s),r(k.$$.fragment,s),Ts=e(s),r(Z.$$.fragment,s),ds=e(s),B=U(s,"TABLE",{"data-svelte-h":!0}),w(B)!=="svelte-59idsn"&&(B.innerHTML=rl),us=e(s),r(N.$$.fragment,s),bs=e(s),r($.$$.fragment,s),Is=e(s),r(W.$$.fragment,s),Cs=e(s),r(Q.$$.fragment,s),fs=e(s),r(S.$$.fragment,s),gs=e(s),r(v.$$.fragment,s),ks=e(s),r(V.$$.fragment,s),Zs=e(s),r(G.$$.fragment,s),Bs=e(s),r(z.$$.fragment,s),Ns=e(s),r(E.$$.fragment,s),$s=e(s),r(R.$$.fragment,s),Ws=e(s),r(X.$$.fragment,s),Qs=e(s),F=U(s,"P",{"data-svelte-h":!0}),w(F)!=="svelte-ju3r8a"&&(F.textContent=ol),Ss=e(s),Y=U(s,"P",{"data-svelte-h":!0}),w(Y)!=="svelte-1fxxuk6"&&(Y.innerHTML=cl),vs=e(s),r(H.$$.fragment,s),Vs=e(s),q=U(s,"P",{"data-svelte-h":!0}),w(q)!=="svelte-169f07w"&&(q.innerHTML=Ml),Gs=e(s),r(x.$$.fragment,s),zs=e(s),r(A.$$.fragment,s),Es=e(s),_=U(s,"P",{"data-svelte-h":!0}),w(_)!=="svelte-1ra694b"&&(_.textContent=il),Rs=e(s),r(L.$$.fragment,s),Xs=e(s),r(K.$$.fragment,s),Fs=e(s),r(T.$$.fragment,s),Ys=e(s),r(D.$$.fragment,s),Hs=e(s),P=U(s,"P",{"data-svelte-h":!0}),w(P)!=="svelte-y1fimj"&&(P.innerHTML=yl),qs=e(s),r(O.$$.fragment,s),xs=e(s),ss=U(s,"P",{"data-svelte-h":!0}),w(ss)!=="svelte-1bo2xue"&&(ss.innerHTML=Jl),As=e(s),r(ls.$$.fragment,s),_s=e(s),as=U(s,"P",{"data-svelte-h":!0}),w(as)!=="svelte-h4haiy"&&(as.textContent=Ul),Ls=e(s),r(ts.$$.fragment,s),Ks=e(s),r(ns.$$.fragment,s),Ds=e(s),es=U(s,"P",{"data-svelte-h":!0}),w(es)!=="svelte-1st7jqf"&&(es.textContent=jl),Ps=e(s),r(ps.$$.fragment,s),Os=e(s),r(rs.$$.fragment,s),sl=e(s),os=U(s,"UL",{"data-svelte-h":!0}),w(os)!=="svelte-1rsn7wn"&&(os.innerHTML=wl),ll=e(s),r(cs.$$.fragment,s),al=e(s),is=U(s,"P",{}),hl(is).forEach(a),this.h()},h(){Tl(y,"name","hf:doc:metadata"),Tl(y,"content",Wl)},m(s,l){gl(document.head,y),t(s,d,l),t(s,h,l),t(s,Ms,l),o(u,s,l),t(s,Js,l),o(b,s,l),t(s,Us,l),t(s,I,l),t(s,js,l),t(s,C,l),t(s,ws,l),o(f,s,l),t(s,ms,l),t(s,g,l),t(s,hs,l),o(k,s,l),t(s,Ts,l),o(Z,s,l),t(s,ds,l),t(s,B,l),t(s,us,l),o(N,s,l),t(s,bs,l),o($,s,l),t(s,Is,l),o(W,s,l),t(s,Cs,l),o(Q,s,l),t(s,fs,l),o(S,s,l),t(s,gs,l),o(v,s,l),t(s,ks,l),o(V,s,l),t(s,Zs,l),o(G,s,l),t(s,Bs,l),o(z,s,l),t(s,Ns,l),o(E,s,l),t(s,$s,l),o(R,s,l),t(s,Ws,l),o(X,s,l),t(s,Qs,l),t(s,F,l),t(s,Ss,l),t(s,Y,l),t(s,vs,l),o(H,s,l),t(s,Vs,l),t(s,q,l),t(s,Gs,l),o(x,s,l),t(s,zs,l),o(A,s,l),t(s,Es,l),t(s,_,l),t(s,Rs,l),o(L,s,l),t(s,Xs,l),o(K,s,l),t(s,Fs,l),o(T,s,l),t(s,Ys,l),o(D,s,l),t(s,Hs,l),t(s,P,l),t(s,qs,l),o(O,s,l),t(s,xs,l),t(s,ss,l),t(s,As,l),o(ls,s,l),t(s,_s,l),t(s,as,l),t(s,Ls,l),o(ts,s,l),t(s,Ks,l),o(ns,s,l),t(s,Ds,l),t(s,es,l),t(s,Ps,l),o(ps,s,l),t(s,Os,l),o(rs,s,l),t(s,sl,l),t(s,os,l),t(s,ll,l),o(cs,s,l),t(s,al,l),t(s,is,l),tl=!0},p(s,[l]){const ml={};l&2&&(ml.$$scope={dirty:l,ctx:s}),T.$set(ml)},i(s){tl||(c(u.$$.fragment,s),c(b.$$.fragment,s),c(f.$$.fragment,s),c(k.$$.fragment,s),c(Z.$$.fragment,s),c(N.$$.fragment,s),c($.$$.fragment,s),c(W.$$.fragment,s),c(Q.$$.fragment,s),c(S.$$.fragment,s),c(v.$$.fragment,s),c(V.$$.fragment,s),c(G.$$.fragment,s),c(z.$$.fragment,s),c(E.$$.fragment,s),c(R.$$.fragment,s),c(X.$$.fragment,s),c(H.$$.fragment,s),c(x.$$.fragment,s),c(A.$$.fragment,s),c(L.$$.fragment,s),c(K.$$.fragment,s),c(T.$$.fragment,s),c(D.$$.fragment,s),c(O.$$.fragment,s),c(ls.$$.fragment,s),c(ts.$$.fragment,s),c(ns.$$.fragment,s),c(ps.$$.fragment,s),c(rs.$$.fragment,s),c(cs.$$.fragment,s),tl=!0)},o(s){M(u.$$.fragment,s),M(b.$$.fragment,s),M(f.$$.fragment,s),M(k.$$.fragment,s),M(Z.$$.fragment,s),M(N.$$.fragment,s),M($.$$.fragment,s),M(W.$$.fragment,s),M(Q.$$.fragment,s),M(S.$$.fragment,s),M(v.$$.fragment,s),M(V.$$.fragment,s),M(G.$$.fragment,s),M(z.$$.fragment,s),M(E.$$.fragment,s),M(R.$$.fragment,s),M(X.$$.fragment,s),M(H.$$.fragment,s),M(x.$$.fragment,s),M(A.$$.fragment,s),M(L.$$.fragment,s),M(K.$$.fragment,s),M(T.$$.fragment,s),M(D.$$.fragment,s),M(O.$$.fragment,s),M(ls.$$.fragment,s),M(ts.$$.fragment,s),M(ns.$$.fragment,s),M(ps.$$.fragment,s),M(rs.$$.fragment,s),M(cs.$$.fragment,s),tl=!1},d(s){s&&(a(d),a(h),a(Ms),a(Js),a(Us),a(I),a(js),a(C),a(ws),a(ms),a(g),a(hs),a(Ts),a(ds),a(B),a(us),a(bs),a(Is),a(Cs),a(fs),a(gs),a(ks),a(Zs),a(Bs),a(Ns),a($s),a(Ws),a(Qs),a(F),a(Ss),a(Y),a(vs),a(Vs),a(q),a(Gs),a(zs),a(Es),a(_),a(Rs),a(Xs),a(Fs),a(Ys),a(Hs),a(P),a(qs),a(xs),a(ss),a(As),a(_s),a(as),a(Ls),a(Ks),a(Ds),a(es),a(Ps),a(Os),a(sl),a(os),a(ll),a(al),a(is)),a(y),i(u,s),i(b,s),i(f,s),i(k,s),i(Z,s),i(N,s),i($,s),i(W,s),i(Q,s),i(S,s),i(v,s),i(V,s),i(G,s),i(z,s),i(E,s),i(R,s),i(X,s),i(H,s),i(x,s),i(A,s),i(L,s),i(K,s),i(T,s),i(D,s),i(O,s),i(ls,s),i(ts,s),i(ns,s),i(ps,s),i(rs,s),i(cs,s)}}}const Wl='{"title":"Using Transformers.js with the Vercel AI SDK","local":"using-transformersjs-with-the-vercel-ai-sdk","sections":[{"title":"Why use the Vercel AI SDK with Transformers.js?","local":"why-use-the-vercel-ai-sdk-with-transformersjs","sections":[],"depth":2},{"title":"Installation","local":"installation","sections":[],"depth":2},{"title":"Text generation","local":"text-generation","sections":[{"title":"Streaming text","local":"streaming-text","sections":[],"depth":3},{"title":"Non-streaming text","local":"non-streaming-text","sections":[],"depth":3}],"depth":2},{"title":"Text embeddings","local":"text-embeddings","sections":[],"depth":2},{"title":"Audio transcription","local":"audio-transcription","sections":[],"depth":2},{"title":"Vision models","local":"vision-models","sections":[],"depth":2},{"title":"Web Worker offloading","local":"web-worker-offloading","sections":[],"depth":2},{"title":"Download progress tracking","local":"download-progress-tracking","sections":[],"depth":2},{"title":"Tool calling","local":"tool-calling","sections":[],"depth":2},{"title":"useChat with custom transport","local":"usechat-with-custom-transport","sections":[],"depth":2},{"title":"Browser compatibility fallback","local":"browser-compatibility-fallback","sections":[],"depth":2},{"title":"Further reading","local":"further-reading","sections":[],"depth":2}],"depth":1}';function Ql(ys){return ul(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class El extends Il{constructor(y){super(),Cl(this,y,Ql,$l,dl,{})}}export{El as component};