<meta charset="utf-8" /><meta http-equiv="content-security-policy" content=""><meta name="hf:doc:metadata" content="{&quot;local&quot;:&quot;tch-hp-vi-hugging-face-hub&quot;,&quot;sections&quot;:[{&quot;local&quot;:&quot;ti-m-hnh-t-hugging-face-hub&quot;,&quot;title&quot;:&quot;Tải mô hình từ Hugging Face Hub&quot;},{&quot;local&quot;:&quot;ti-t-hugging-face-spaces&quot;,&quot;title&quot;:&quot;Tải từ Hugging Face Spaces&quot;}],&quot;title&quot;:&quot;Tích hợp với Hugging Face Hub&quot;}" data-svelte="svelte-1phssyn">
	<link rel="modulepreload" href="/docs/course/pr_363/vi/_app/assets/pages/__layout.svelte-hf-doc-builder.css">
	<link rel="modulepreload" href="/docs/course/pr_363/vi/_app/start-hf-doc-builder.js">
	<link rel="modulepreload" href="/docs/course/pr_363/vi/_app/chunks/vendor-hf-doc-builder.js">
	<link rel="modulepreload" href="/docs/course/pr_363/vi/_app/chunks/paths-hf-doc-builder.js">
	<link rel="modulepreload" href="/docs/course/pr_363/vi/_app/pages/__layout.svelte-hf-doc-builder.js">
	<link rel="modulepreload" href="/docs/course/pr_363/vi/_app/pages/chapter9/5.mdx-hf-doc-builder.js">
	<link rel="modulepreload" href="/docs/course/pr_363/vi/_app/chunks/IconCopyLink-hf-doc-builder.js">
	<link rel="modulepreload" href="/docs/course/pr_363/vi/_app/chunks/CodeBlock-hf-doc-builder.js">
	<link rel="modulepreload" href="/docs/course/pr_363/vi/_app/chunks/DocNotebookDropdown-hf-doc-builder.js"> 





<h1 class="relative group"><a id="tch-hp-vi-hugging-face-hub" 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="#tch-hp-vi-hugging-face-hub"><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>Tích hợp với Hugging Face Hub
	</span></h1>



<div class="flex space-x-1 absolute z-10 right-0 top-0">
	<a href="https://colab.research.google.com/github/huggingface/notebooks/blob/master/course/vi/chapter9/section5.ipynb" target="_blank"><img alt="Open In Colab" class="!m-0" src="https://colab.research.google.com/assets/colab-badge.svg"></a>
	<a href="https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/vi/chapter9/section5.ipynb" target="_blank"><img alt="Open In Studio Lab" class="!m-0" src="https://studiolab.sagemaker.aws/studiolab.svg"></a></div>
<p>Để làm cho cuộc sống của bạn trở nên dễ dàng hơn, Gradio tích hợp trực tiếp với Hugging Face Hub và Hugging Face Spaces. Bạn có thể tải các bản demo từ Hub và Spaces chỉ với <em>một dòng mã</em>.</p>
<h3 class="relative group"><a id="ti-m-hnh-t-hugging-face-hub" 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="#ti-m-hnh-t-hugging-face-hub"><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>Tải mô hình từ Hugging Face Hub
	</span></h3>

<p>Để bắt đầu, hãy chọn một trong số hàng nghìn mô hình Hugging Face được cung cấp thông qua Hub, như được mô tả trong <a href="/course/chapter4/2">Chương 4</a>.</p>
<p>Sử dụng phương thức <code>Interface.load()</code> đặc biệt, bạn truyền <code>&quot;model/&quot;</code> (hoặc, tương đương, <code>&quot;huggingface/&quot;</code>) theo sau là tên mô hình. Ví dụ: đây là mã để tạo bản demo cho <a href="https://huggingface.co/EleutherAI/gpt-j-6B" rel="nofollow">GPT-J</a>, một mô hình ngôn ngữ lớn, hãy thêm một số đầu vào mẫu:</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><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr

title = <span class="hljs-string">&quot;GPT-J-6B&quot;</span>
description = <span class="hljs-string">&quot;Gradio Demo for GPT-J 6B, a transformer model trained using Ben Wang&#x27;s Mesh Transformer JAX. &#x27;GPT-J&#x27; refers to the class of model, while &#x27;6B&#x27; represents the number of trainable parameters. To use it, simply add your text, or click one of the examples to load them. Read more at the links below.&quot;</span>
article = <span class="hljs-string">&quot;&lt;p style=&#x27;text-align: center&#x27;&gt;&lt;a href=&#x27;https://github.com/kingoflolz/mesh-transformer-jax&#x27; target=&#x27;_blank&#x27;&gt;GPT-J-6B: A 6 Billion Parameter Autoregressive Language Model&lt;/a&gt;&lt;/p&gt;&quot;</span>
examples = [
    [<span class="hljs-string">&quot;The tower is 324 metres (1,063 ft) tall,&quot;</span>],
    [<span class="hljs-string">&quot;The Moon&#x27;s orbit around Earth has&quot;</span>],
    [<span class="hljs-string">&quot;The smooth Borealis basin in the Northern Hemisphere covers 40%&quot;</span>],
]
gr.Interface.load(
    <span class="hljs-string">&quot;huggingface/EleutherAI/gpt-j-6B&quot;</span>,
    inputs=gr.Textbox(lines=<span class="hljs-number">5</span>, label=<span class="hljs-string">&quot;Input Text&quot;</span>),
    title=title,
    description=description,
    article=article,
    examples=examples,
    enable_queue=<span class="hljs-literal">True</span>,
).launch()<!-- HTML_TAG_END --></pre></div>
<p>Đoạn mã trên sẽ tạo ra giao diện bên dưới:</p>
<iframe src="https://hf.space/gradioiframe/course-demos/gpt-j-6B/+" frameborder="0" height="750" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
<p>Tải mô hình theo cách này sử dụng <a href="https://huggingface.co/inference-api" rel="nofollow">API luận suy</a> của Hugging Face, thay vì tải mô hình trong bộ nhớ. Điều này lý tưởng cho các mô hình lớn như GPT-J hoặc T0pp, những mô hình yêu cầu nhiều RAM.</p>
<h3 class="relative group"><a id="ti-t-hugging-face-spaces" 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="#ti-t-hugging-face-spaces"><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>Tải từ Hugging Face Spaces
	</span></h3>

<p>Để tải bất kỳ Space nào từ Hugging Face Hub và tạo lại nó cục bộ, bạn có thể truyền  <code>spaces/</code> vào <code>Interface</code>, theo sau là tên của Space.</p>
<p>Bạn có nhớ bản demo từ phần 1 xóa nền của hình ảnh không? Hãy tải nó từ Hugging Face Spaces:</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><!-- HTML_TAG_START -->gr.Interface.load(<span class="hljs-string">&quot;spaces/abidlabs/remove-bg&quot;</span>).launch()<!-- HTML_TAG_END --></pre></div>
<iframe src="https://hf.space/gradioiframe/course-demos/remove-bg-original/+" frameborder="0" height="650" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
<p>Một trong những điều thú vị khi tải các bản demo từ Hub hoặc Spaces là bạn tùy chỉnh chúng bằng cách ghi đè bất kỳ thông số nào. Ở đây, chúng ta thêm tiêu đề và làm cho tiêu đề đó hoạt động với webcam:</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><!-- HTML_TAG_START -->gr.Interface.load(
    <span class="hljs-string">&quot;spaces/abidlabs/remove-bg&quot;</span>, inputs=<span class="hljs-string">&quot;webcam&quot;</span>, title=<span class="hljs-string">&quot;Remove your webcam background!&quot;</span>
).launch()<!-- HTML_TAG_END --></pre></div>
<iframe src="https://hf.space/gradioiframe/course-demos/Remove-bg/+" frameborder="0" height="550" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
<p>Bây giờ chúng ta đã khám phá một số cách để tích hợp Gradio với Hugging Face Hub, hãy cùng xem xét một số tính năng nâng cao của lớp <code>Interface</code>. Đó là chủ đề của phần tiếp theo!</p>


		<script type="module" data-hydrate="sns39x">
		import { start } from "/docs/course/pr_363/vi/_app/start-hf-doc-builder.js";
		start({
			target: document.querySelector('[data-hydrate="sns39x"]').parentNode,
			paths: {"base":"/docs/course/pr_363/vi","assets":"/docs/course/pr_363/vi"},
			session: {},
			route: false,
			spa: false,
			trailing_slash: "never",
			hydrate: {
				status: 200,
				error: null,
				nodes: [
					import("/docs/course/pr_363/vi/_app/pages/__layout.svelte-hf-doc-builder.js"),
						import("/docs/course/pr_363/vi/_app/pages/chapter9/5.mdx-hf-doc-builder.js")
				],
				params: {}
			}
		});
	</script>
