hub/main/en/models-widgets.html

<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;Widgets&quot;,&quot;local&quot;:&quot;widgets&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;What’s a widget?&quot;,&quot;local&quot;:&quot;whats-a-widget&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Enabling a widget&quot;,&quot;local&quot;:&quot;enabling-a-widget&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;How can I control my model’s widget example input?&quot;,&quot;local&quot;:&quot;how-can-i-control-my-models-widget-example-input&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3}],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Example outputs&quot;,&quot;local&quot;:&quot;example-outputs&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;What are all the possible task/widget types?&quot;,&quot;local&quot;:&quot;what-are-all-the-possible-taskwidget-types&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;How can I control my model’s widget Inference API parameters?&quot;,&quot;local&quot;:&quot;how-can-i-control-my-models-widget-inference-api-parameters&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2}],&quot;depth&quot;:1}">
		<link href="/docs/hub/main/en/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
		<link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/entry/start.d0cd5065.js">
		<link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/chunks/scheduler.d6170356.js">
		<link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/chunks/singletons.d032f1eb.js">
		<link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/chunks/paths.752f1c6b.js">
		<link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/entry/app.b6abe3c1.js">
		<link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/chunks/index.fcd4cc08.js">
		<link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/nodes/0.f045427f.js">
		<link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/nodes/84.ace401f0.js">
		<link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/chunks/CodeBlock.7b16bdef.js">
		<link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/chunks/EditOnGithub.da2b595c.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;Widgets&quot;,&quot;local&quot;:&quot;widgets&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;What’s a widget?&quot;,&quot;local&quot;:&quot;whats-a-widget&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Enabling a widget&quot;,&quot;local&quot;:&quot;enabling-a-widget&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;How can I control my model’s widget example input?&quot;,&quot;local&quot;:&quot;how-can-i-control-my-models-widget-example-input&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3}],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Example outputs&quot;,&quot;local&quot;:&quot;example-outputs&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;What are all the possible task/widget types?&quot;,&quot;local&quot;:&quot;what-are-all-the-possible-taskwidget-types&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;How can I control my model’s widget Inference API parameters?&quot;,&quot;local&quot;:&quot;how-can-i-control-my-models-widget-inference-api-parameters&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2}],&quot;depth&quot;:1}"><!-- HEAD_svelte-u9bgzb_END -->      <p></p>  <h1 class="relative group"><a id="widgets" 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="#widgets"><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>Widgets</span></h1>  <h2 class="relative group"><a id="whats-a-widget" 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="#whats-a-widget"><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>What’s a widget?</span></h2> <p data-svelte-h="svelte-1qsy47i">Many model repos have a widget that allows anyone to run inferences directly in the browser!</p> <p data-svelte-h="svelte-ajb03f">Here are some examples:</p> <ul data-svelte-h="svelte-18kaf2m"><li><a href="https://huggingface.co/spacy/en_core_web_sm?text=My+name+is+Sarah+and+I+live+in+London" rel="nofollow">Named Entity Recognition</a> using <a href="https://spacy.io/" rel="nofollow">spaCy</a>.</li> <li><a href="https://huggingface.co/google/vit-base-patch16-224" rel="nofollow">Image Classification</a> using <a href="https://github.com/huggingface/transformers" rel="nofollow">🤗 Transformers</a></li> <li><a href="https://huggingface.co/julien-c/ljspeech_tts_train_tacotron2_raw_phn_tacotron_g2p_en_no_space_train" rel="nofollow">Text to Speech</a> using <a href="https://github.com/espnet/espnet" rel="nofollow">ESPnet</a>.</li> <li><a href="https://huggingface.co/osanseviero/full-sentence-distillroberta3" rel="nofollow">Sentence Similarity</a> using <a href="https://github.com/UKPLab/sentence-transformers" rel="nofollow">Sentence Transformers</a>.</li></ul> <p data-svelte-h="svelte-m4dehs">You can try out all the widgets <a href="https://huggingface-widgets.netlify.app/" rel="nofollow">here</a>.</p>  <h2 class="relative group"><a id="enabling-a-widget" 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="#enabling-a-widget"><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>Enabling a widget</span></h2> <p data-svelte-h="svelte-cjamyi">A widget is automatically created for your model when you upload it to the Hub. To determine which pipeline and widget to display (<code>text-classification</code>, <code>token-classification</code>, <code>translation</code>, etc.), we analyze information in the repo, such as the metadata provided in the model card and configuration files. This information is mapped to a single <code>pipeline_tag</code>. We choose to expose <strong>only one</strong> widget per model for simplicity.</p> <p data-svelte-h="svelte-wr97rt">For most use cases, we determine the model type from the tags. For example, if there is <code>tag: text-classification</code> in the <a href="./model-cards">model card metadata</a>, the inferred <code>pipeline_tag</code> will be <code>text-classification</code>.</p> <p data-svelte-h="svelte-1pqm7i5">For some libraries, such as 🤗  <code>Transformers</code>, the model type should be inferred automatically based from configuration files (<code>config.json</code>). The architecture can determine the type: for example, <code>AutoModelForTokenClassification</code> corresponds to <code>token-classification</code>. If you’re interested in this, you can see pseudo-code in <a href="https://gist.github.com/julien-c/857ba86a6c6a895ecd90e7f7cab48046" rel="nofollow">this gist</a>.</p> <p data-svelte-h="svelte-1yrgvkb"><strong>You can always manually override your pipeline type with <code>pipeline_tag: xxx</code> in your <a href="./model-cards#model-card-metadata">model card metadata</a>.</strong> (You can also use the metadata GUI editor to do this).</p>  <h3 class="relative group"><a id="how-can-i-control-my-models-widget-example-input" 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="#how-can-i-control-my-models-widget-example-input"><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>How can I control my model’s widget example input?</span></h3> <p data-svelte-h="svelte-1h9t2di">You can specify the widget input in the model card metadata section:</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-attr">widget:</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">text:</span> <span class="hljs-string">&quot;Jens Peter Hansen kommer fra Danmark&quot;</span><!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-17lmrxk">You can provide more than one example input. In the examples dropdown menu of the widget, they will appear as <code>Example 1</code>, <code>Example 2</code>, etc. Optionally, you can supply <code>example_title</code> as well.</p> <div class="flex justify-center" data-svelte-h="svelte-eajj7p"><img class="block dark:hidden" width="500" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/widget_input_examples.gif"> <img class="hidden dark:block" width="500" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/widget_input_examples-dark.gif"></div> <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-attr">widget:</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">text:</span> <span class="hljs-string">&quot;Is this review positive or negative? Review: Best cast iron skillet you will ever buy.&quot;</span>
  <span class="hljs-attr">example_title:</span> <span class="hljs-string">&quot;Sentiment analysis&quot;</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">text:</span> <span class="hljs-string">&quot;Barack Obama nominated Hilary Clinton as his secretary of state on Monday. He chose her because she had ...&quot;</span>
  <span class="hljs-attr">example_title:</span> <span class="hljs-string">&quot;Coreference resolution&quot;</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">text:</span> <span class="hljs-string">&quot;On a shelf, there are five books: a gray book, a red book, a purple book, a blue book, and a black book ...&quot;</span>
  <span class="hljs-attr">example_title:</span> <span class="hljs-string">&quot;Logic puzzles&quot;</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">text:</span> <span class="hljs-string">&quot;The two men running to become New York City&#x27;s next mayor will face off in their first debate Wednesday night ...&quot;</span>
  <span class="hljs-attr">example_title:</span> <span class="hljs-string">&quot;Reading comprehension&quot;</span><!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1xtseom">Moreover, you can specify non-text example inputs in the model card metadata. Refer <a href="./models-widgets-examples">here</a> for a complete list of sample input formats for all widget types. For vision &amp; audio widget types, provide example inputs with <code>src</code> rather than <code>text</code>.</p> <p data-svelte-h="svelte-1j0gpnt">For example, allow users to choose from two sample audio files for automatic speech recognition tasks by:</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-attr">widget:</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">src:</span> <span class="hljs-string">https://example.org/somewhere/speech_samples/sample1.flac</span>
  <span class="hljs-attr">example_title:</span> <span class="hljs-string">Speech</span> <span class="hljs-string">sample</span> <span class="hljs-number">1</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">src:</span> <span class="hljs-string">https://example.org/somewhere/speech_samples/sample2.flac</span>
  <span class="hljs-attr">example_title:</span> <span class="hljs-string">Speech</span> <span class="hljs-string">sample</span> <span class="hljs-number">2</span><!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-uxbekb">Note that you can also include example files in your model repository and use
them as:</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-attr">widget:</span>
  <span class="hljs-bullet">-</span> <span class="hljs-attr">src:</span> <span class="hljs-string">https://huggingface.co/username/model_repo/resolve/main/sample1.flac</span>
    <span class="hljs-attr">example_title:</span> <span class="hljs-string">Custom</span> <span class="hljs-string">Speech</span> <span class="hljs-string">Sample</span> <span class="hljs-number">1</span><!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-8bu0yj">But even more convenient, if the file lives in the corresponding model repo, you can just use the filename or file path inside the repo:</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-attr">widget:</span>
  <span class="hljs-bullet">-</span> <span class="hljs-attr">src:</span> <span class="hljs-string">sample1.flac</span>
    <span class="hljs-attr">example_title:</span> <span class="hljs-string">Custom</span> <span class="hljs-string">Speech</span> <span class="hljs-string">Sample</span> <span class="hljs-number">1</span><!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-10p5e3g">or if it was nested inside the repo:</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-attr">widget:</span>
  <span class="hljs-bullet">-</span> <span class="hljs-attr">src:</span> <span class="hljs-string">nested/directory/sample1.flac</span><!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-183vuj8">We provide example inputs for some languages and most widget types in <a href="https://github.com/huggingface/huggingface.js/blob/main/packages/tasks/src/default-widget-inputs.ts" rel="nofollow">default-widget-inputs.ts file</a>. If some examples are missing, we welcome PRs from the community to add them!</p>  <h2 class="relative group"><a id="example-outputs" 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="#example-outputs"><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>Example outputs</span></h2> <p data-svelte-h="svelte-rp3w3t">As an extension to example inputs, for each widget example, you can also optionally describe the corresponding model output, directly in the <code>output</code> property.</p> <p data-svelte-h="svelte-pffdxy">This is useful when the model is not yet supported by the Inference API (for instance, the model library is not yet supported or the model is too large) so that the model page can still showcase how the model works and what results it gives.</p> <p data-svelte-h="svelte-ebo948">For instance, for an <a href="./models-widgets-examples#automatic-speech-recognition">automatic-speech-recognition</a> model:</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-attr">widget:</span>
  <span class="hljs-bullet">-</span> <span class="hljs-attr">src:</span> <span class="hljs-string">sample1.flac</span>
    <span class="hljs-attr">output:</span>
      <span class="hljs-attr">text:</span> <span class="hljs-string">&quot;Hello my name is Julien&quot;</span><!-- HTML_TAG_END --></pre></div> <div class="flex justify-center" data-svelte-h="svelte-fqfbqo"><img class="block dark:hidden" width="450" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-asr-light.png"> <img class="hidden dark:block" width="450" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-asr-dark.png"></div> <p data-svelte-h="svelte-1t5n2ux">The <code>output</code> property should be a YAML dictionary that represents the Inference API output.</p> <p data-svelte-h="svelte-9l7pg4">For a model that outputs text, see the example above.</p> <p data-svelte-h="svelte-11h93mq">For a model that outputs labels (like a <a href="./models-widgets-examples#text-classification">text-classification</a> model for instance), output should look like this:</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-attr">widget:</span>
  <span class="hljs-bullet">-</span> <span class="hljs-attr">text:</span> <span class="hljs-string">&quot;I liked this movie&quot;</span>
    <span class="hljs-attr">output:</span>
      <span class="hljs-bullet">-</span> <span class="hljs-attr">label:</span> <span class="hljs-string">POSITIVE</span>
        <span class="hljs-attr">score:</span> <span class="hljs-number">0.8</span>
      <span class="hljs-bullet">-</span> <span class="hljs-attr">label:</span> <span class="hljs-string">NEGATIVE</span>
        <span class="hljs-attr">score:</span> <span class="hljs-number">0.2</span><!-- HTML_TAG_END --></pre></div> <div class="flex justify-center" data-svelte-h="svelte-p35uh0"><img class="block dark:hidden" width="450" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-textcls-light.png"> <img class="hidden dark:block" width="450" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-textcls-dark.png"></div> <p data-svelte-h="svelte-1g5fcxd">Finally, for a model that outputs an image, audio, or any other kind of asset, the output should include a <code>url</code> property linking to either a file name or path inside the repo or a remote URL. For example, for a text-to-image model:</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-attr">widget:</span>
  <span class="hljs-bullet">-</span> <span class="hljs-attr">text:</span> <span class="hljs-string">&quot;picture of a futuristic tiger, artstation&quot;</span>
    <span class="hljs-attr">output:</span>
      <span class="hljs-attr">url:</span> <span class="hljs-string">images/tiger.jpg</span><!-- HTML_TAG_END --></pre></div> <div class="flex justify-center" data-svelte-h="svelte-1v74q7u"><img class="block dark:hidden" width="450" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-text2img-light.png"> <img class="hidden dark:block" width="450" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-text2img-dark.png"></div> <p data-svelte-h="svelte-s384jz">We can also surface the example outputs in the Hugging Face UI, for instance, for a text-to-image model to display a gallery of cool image generations.</p> <div class="flex justify-center" data-svelte-h="svelte-zec0us"><img width="650" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/models-gallery.png"></div>  <h2 class="relative group"><a id="what-are-all-the-possible-taskwidget-types" 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="#what-are-all-the-possible-taskwidget-types"><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>What are all the possible task/widget types?</span></h2> <p data-svelte-h="svelte-rngjk9">You can find all the supported tasks in <a href="https://github.com/huggingface/huggingface.js/blob/main/packages/tasks/src/pipelines.ts" rel="nofollow">pipelines.ts file</a>.</p> <p data-svelte-h="svelte-sxlman">Here are some links to examples:</p> <ul data-svelte-h="svelte-a7zabr"><li><code>text-classification</code>, for instance <a href="https://huggingface.co/FacebookAI/roberta-large-mnli" rel="nofollow"><code>FacebookAI/roberta-large-mnli</code></a></li> <li><code>token-classification</code>, for instance <a href="https://huggingface.co/dbmdz/bert-large-cased-finetuned-conll03-english" rel="nofollow"><code>dbmdz/bert-large-cased-finetuned-conll03-english</code></a></li> <li><code>question-answering</code>, for instance <a href="https://huggingface.co/distilbert/distilbert-base-uncased-distilled-squad" rel="nofollow"><code>distilbert/distilbert-base-uncased-distilled-squad</code></a></li> <li><code>translation</code>, for instance <a href="https://huggingface.co/google-t5/t5-base" rel="nofollow"><code>google-t5/t5-base</code></a></li> <li><code>summarization</code>, for instance <a href="https://huggingface.co/facebook/bart-large-cnn" rel="nofollow"><code>facebook/bart-large-cnn</code></a></li> <li><code>conversational</code>, for instance <a href="https://huggingface.co/facebook/blenderbot-400M-distill" rel="nofollow"><code>facebook/blenderbot-400M-distill</code></a></li> <li><code>text-generation</code>, for instance <a href="https://huggingface.co/openai-community/gpt2" rel="nofollow"><code>openai-community/gpt2</code></a></li> <li><code>fill-mask</code>, for instance <a href="https://huggingface.co/distilbert/distilroberta-base" rel="nofollow"><code>distilbert/distilroberta-base</code></a></li> <li><code>zero-shot-classification</code> (implemented on top of a nli <code>text-classification</code> model), for instance <a href="https://huggingface.co/facebook/bart-large-mnli" rel="nofollow"><code>facebook/bart-large-mnli</code></a></li> <li><code>table-question-answering</code>, for instance <a href="https://huggingface.co/google/tapas-base-finetuned-wtq" rel="nofollow"><code>google/tapas-base-finetuned-wtq</code></a></li> <li><code>sentence-similarity</code>, for instance <a href="/osanseviero/full-sentence-distillroberta2"><code>osanseviero/full-sentence-distillroberta2</code></a></li></ul>  <h2 class="relative group"><a id="how-can-i-control-my-models-widget-inference-api-parameters" 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="#how-can-i-control-my-models-widget-inference-api-parameters"><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>How can I control my model’s widget Inference API parameters?</span></h2> <p data-svelte-h="svelte-1qwkj5c">Generally, the Inference API for a model uses the default pipeline settings associated with each task. But if you’d like to change the pipeline’s default settings and specify additional inference parameters, you can configure the parameters directly through the model card metadata. Refer <a href="https://huggingface.co/docs/api-inference/detailed_parameters" rel="nofollow">here</a> for some of the most commonly used parameters associated with each task.</p> <p data-svelte-h="svelte-1vzcpab">For example, if you want to specify an aggregation strategy for a NER task in the widget:</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-attr">inference:</span>
  <span class="hljs-attr">parameters:</span>
    <span class="hljs-attr">aggregation_strategy:</span> <span class="hljs-string">&quot;none&quot;</span><!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1o5v8b7">Or if you’d like to change the temperature for a summarization task in the widget:</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-attr">inference:</span>
  <span class="hljs-attr">parameters:</span>
    <span class="hljs-attr">temperature:</span> <span class="hljs-number">0.7</span><!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-ptyv2t">The Serverless inference API allows you to send HTTP requests to models in the Hugging Face Hub programatically. ⚡⚡ Learn more about it by reading the <a href="./models-inference">Inference API documentation</a>. Finally, you can also deploy all those models to dedicated <a href="https://huggingface.co/docs/inference-endpoints" rel="nofollow">Inference Endpoints</a>.</p> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/hub-docs/blob/main/docs/hub/models-widgets.md" target="_blank"><span data-svelte-h="svelte-1kd6by1">&lt;</span> <span data-svelte-h="svelte-x0xyl0">&gt;</span> <span data-svelte-h="svelte-1dajgef"><span class="underline ml-1.5">Update</span> on GitHub</span></a>  <p></p> 
			
			<script>
				{
					__sveltekit_1vatp3t = {
						assets: "/docs/hub/main/en",
						base: "/docs/hub/main/en",
						env: {}
					};

					const element = document.currentScript.parentElement;

					const data = [null,null];

					Promise.all([
						import("/docs/hub/main/en/_app/immutable/entry/start.d0cd5065.js"),
						import("/docs/hub/main/en/_app/immutable/entry/app.b6abe3c1.js")
					]).then(([kit, app]) => {
						kit.start(app, element, {
							node_ids: [0, 84],
							data,
							form: null,
							error: null
						});
					});
				}
			</script>