Buckets:

hf-doc-build
/

doc-dev

Files

xet

hf-doc-build/doc-dev / course /pr_1007 /fr /chapter9 /5.html

rtrm

28 days ago

download

raw

20 kB

	<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"Intégrations avec le <i> Hub d’Hugging Face </i>","local":"intégrations-avec-le-i-hub-dhugging-face-i","sections":[{"title":"Chargement de modèles depuis le <i> Hub d’Hugging Face </i>","local":"chargement-de-modèles-depuis-le-i-hub-dhugging-face-i","sections":[],"depth":3},{"title":"Chargement depuis <i> Hugging Face Spaces </i>","local":"chargement-depuis-i-hugging-face-spaces-i","sections":[],"depth":3}],"depth":1}">
	<link href="/docs/course/pr_1007/fr/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
	<link rel="modulepreload" href="/docs/course/pr_1007/fr/_app/immutable/entry/start.0dcef240.js">
	<link rel="modulepreload" href="/docs/course/pr_1007/fr/_app/immutable/chunks/scheduler.37c15a92.js">
	<link rel="modulepreload" href="/docs/course/pr_1007/fr/_app/immutable/chunks/singletons.f3bf6ff5.js">
	<link rel="modulepreload" href="/docs/course/pr_1007/fr/_app/immutable/chunks/index.18351ede.js">
	<link rel="modulepreload" href="/docs/course/pr_1007/fr/_app/immutable/chunks/paths.4129b87c.js">
	<link rel="modulepreload" href="/docs/course/pr_1007/fr/_app/immutable/entry/app.e06c0eda.js">
	<link rel="modulepreload" href="/docs/course/pr_1007/fr/_app/immutable/chunks/index.2bf4358c.js">
	<link rel="modulepreload" href="/docs/course/pr_1007/fr/_app/immutable/nodes/0.d3d72fb7.js">
	<link rel="modulepreload" href="/docs/course/pr_1007/fr/_app/immutable/chunks/each.e59479a4.js">
	<link rel="modulepreload" href="/docs/course/pr_1007/fr/_app/immutable/nodes/74.6e9e9bff.js">
	<link rel="modulepreload" href="/docs/course/pr_1007/fr/_app/immutable/chunks/CodeBlock.4e987730.js">
	<link rel="modulepreload" href="/docs/course/pr_1007/fr/_app/immutable/chunks/CourseFloatingBanner.6add7356.js">
	<link rel="modulepreload" href="/docs/course/pr_1007/fr/_app/immutable/chunks/getInferenceSnippets.1837c472.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"Intégrations avec le <i> Hub d’Hugging Face </i>","local":"intégrations-avec-le-i-hub-dhugging-face-i","sections":[{"title":"Chargement de modèles depuis le <i> Hub d’Hugging Face </i>","local":"chargement-de-modèles-depuis-le-i-hub-dhugging-face-i","sections":[],"depth":3},{"title":"Chargement depuis <i> Hugging Face Spaces </i>","local":"chargement-depuis-i-hugging-face-spaces-i","sections":[],"depth":3}],"depth":1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <h1 class="relative group"><a id="intégrations-avec-le-i-hub-dhugging-face-i" 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="#intégrations-avec-le-i-hub-dhugging-face-i"><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>Intégrations avec le <i> Hub d’Hugging Face </i></span></h1> <div class="flex space-x-1 absolute z-10 right-0 top-0"><a href="https://discuss.huggingface.co/t/chapter-9-questions" target="_blank"><img alt="Ask a Question" class="!m-0" src="https://img.shields.io/badge/Ask%20a%20question-ffcb4c.svg?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTEgMTA0IDEwNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMyMzFmMjA7fS5jbHMtMntmaWxsOiNmZmY5YWU7fS5jbHMtM3tmaWxsOiMwMGFlZWY7fS5jbHMtNHtmaWxsOiMwMGE5NGY7fS5jbHMtNXtmaWxsOiNmMTVkMjI7fS5jbHMtNntmaWxsOiNlMzFiMjM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5EaXNjb3Vyc2VfbG9nbzwvdGl0bGU+PGcgaWQ9IkxheWVyXzIiPjxnIGlkPSJMYXllcl8zIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik01MS44NywwQzIzLjcxLDAsMCwyMi44MywwLDUxYzAsLjkxLDAsNTIuODEsMCw1Mi44MWw1MS44Ni0uMDVjMjguMTYsMCw1MS0yMy43MSw1MS01MS44N1M4MCwwLDUxLjg3LDBaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNTIuMzcsMTkuNzRBMzEuNjIsMzEuNjIsMCwwLDAsMjQuNTgsNjYuNDFsLTUuNzIsMTguNEwzOS40LDgwLjE3YTMxLjYxLDMxLjYxLDAsMSwwLDEzLTYwLjQzWiIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTc3LjQ1LDMyLjEyYTMxLjYsMzEuNiwwLDAsMS0zOC4wNSw0OEwxOC44Niw4NC44MmwyMC45MS0yLjQ3QTMxLjYsMzEuNiwwLDAsMCw3Ny40NSwzMi4xMloiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik03MS42MywyNi4yOUEzMS42LDMxLjYsMCwwLDEsMzguOCw3OEwxOC44Niw4NC44MiwzOS40LDgwLjE3QTMxLjYsMzEuNiwwLDAsMCw3MS42MywyNi4yOVoiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Ik0yNi40Nyw2Ny4xMWEzMS42MSwzMS42MSwwLDAsMSw1MS0zNUEzMS42MSwzMS42MSwwLDAsMCwyNC41OCw2Ni40MWwtNS43MiwxOC40WiIvPjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0iTTI0LjU4LDY2LjQxQTMxLjYxLDMxLjYxLDAsMCwxLDcxLjYzLDI2LjI5YTMxLjYxLDMxLjYxLDAsMCwwLTQ5LDM5LjYzbC0zLjc2LDE4LjlaIi8+PC9nPjwvZz48L3N2Zz4="></a> <div class="relative colab-dropdown "> <button class=" " type="button"> <img alt="Open In Colab" class="!m-0" src="https://colab.research.google.com/assets/colab-badge.svg"> </button> </div> <div class="relative colab-dropdown "> <button class=" " type="button"> <img alt="Open In Studio Lab" class="!m-0" src="https://studiolab.sagemaker.aws/studiolab.svg"> </button> </div></div> <p data-svelte-h="svelte-1u7du8r">Pour vous rendre la vie encore plus facile, <em>Gradio</em> s’intègre directement avec <em>Hub</em> et <em>Spaces</em>.
	Vous pouvez charger des démos depuis le <em>Hub</em> et les <em>Spaces</em> avec seulement <em>une ligne de code</em>.</p> <h3 class="relative group"><a id="chargement-de-modèles-depuis-le-i-hub-dhugging-face-i" 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="#chargement-de-modèles-depuis-le-i-hub-dhugging-face-i"><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>Chargement de modèles depuis le <i> Hub d’Hugging Face </i></span></h3> <p data-svelte-h="svelte-azmpzc">Pour commencer, choisissez un des milliers de modèles qu’<em>Hugging Face</em> offre à travers le <em>Hub</em>, comme décrit dans le <a href="/course/fr/chapter4/2">chapitre 4</a>.</p> <p data-svelte-h="svelte-be60uu">En utilisant la méthode spéciale <code>Interface.load()</code>, vous passez <code>"model/"</code> (ou, de manière équivalente, <code>"huggingface/"</code>) suivi du nom du modèle.
	Par exemple, voici le code pour construire une démo pour le <a href="https://huggingface.co/EleutherAI/gpt-j-6B" rel="nofollow">GPT-J</a>, un grand modèle de langue, ajouter quelques exemples d’entrées :</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr

	title = <span class="hljs-string">"GPT-J-6B"</span>
	description = <span class="hljs-string">"Gradio Demo for GPT-J 6B, a transformer model trained using Ben Wang's Mesh Transformer JAX. 'GPT-J' refers to the class of model, while '6B' 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."</span>
	<span class="hljs-comment"># Démo Gradio pour GPT-J 6B, un modèle de transformer entraîné avec le Mesh Transformer JAX de Ben Wang. GPT-J fait référence à la classe du modèle, tandis que '6B' représente le nombre de paramètres entraînables. Pour l'utiliser, il suffit d'ajouter votre texte, ou de cliquer sur l'un des exemples pour le charger. Pour en savoir plus, consultez les liens ci-dessous.</span>
	article = <span class="hljs-string">"<p style='text-align: center'><a href='https://github.com/kingoflolz/mesh-transformer-jax' target='_blank'>GPT-J-6B: A 6 Billion Parameter Autoregressive Language Model</a></p>"</span>
	<span class="hljs-comment"># GPT-J-6B : Un modèle linguistique autorégressif à 6 milliards de paramètres</span>
	examples = [
	[<span class="hljs-string">"The tower is 324 metres (1,063 ft) tall,"</span>],
	<span class="hljs-comment"># La tour mesure 324 mètres (1 063 pieds) de haut,</span>
	[<span class="hljs-string">"The Moon's orbit around Earth has"</span>],
	<span class="hljs-comment"># L'orbite de la Lune autour de la Terre a</span>
	[<span class="hljs-string">"The smooth Borealis basin in the Northern Hemisphere covers 40%"</span>],
	<span class="hljs-comment"># Le bassin de Borealis dans l'hémisphère nord couvre 40 %.</span>
	]
	gr.Interface.load(
	<span class="hljs-string">"huggingface/EleutherAI/gpt-j-6B"</span>,
	inputs=gr.Textbox(lines=<span class="hljs-number">5</span>, label=<span class="hljs-string">"Input Text"</span>),
	title=title,
	description=description,
	article=article,
	examples=examples,
	enable_queue=<span class="hljs-literal">True</span>,
	).launch()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1x6fprf">Le code ci-dessus produira l’interface ci-dessous :</p> <iframe src="https://hf.space/gradioiframe/akhaliq/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 data-svelte-h="svelte-1pgca6g">Le chargement d’un modèle de cette manière utilise l’<a href="https://huggingface.co/inference-api" rel="nofollow">API d’Inference</a> de <em>Hugging Face</em> au lieu de charger le modèle en mémoire. C’est idéal pour les modèles énormes comme GPT-J ou T0pp qui nécessitent beaucoup de RAM.</p> <h3 class="relative group"><a id="chargement-depuis-i-hugging-face-spaces-i" 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="#chargement-depuis-i-hugging-face-spaces-i"><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>Chargement depuis <i> Hugging Face Spaces </i></span></h3> <p data-svelte-h="svelte-9bl6v9">Pour charger n’importe quel <em>Space</em> depuis le <em>Hub</em> et le recréer localement, vous pouvez passer <code>spaces/</code> à l’<code>Interface</code>, suivi du nom du <em>Space</em>.</p> <p data-svelte-h="svelte-q3bfqw">Vous vous souvenez de la démo de la section 1 qui supprime le fond d’une image ? Chargeons-la à partir de <em>Hugging Face Spaces</em> :</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 -->gr.Interface.load(<span class="hljs-string">"spaces/abidlabs/remove-bg"</span>).launch()<!-- HTML_TAG_END --></pre></div> <iframe src="https://hf.space/gradioiframe/abidlabs/remove-bg/+" 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 data-svelte-h="svelte-1aeu0m8">L’un des avantages du chargement de démos à partir du <em>Hub</em> ou de <em>Spaces</em> est que vous pouvez les personnaliser en remplaçant n’importe lequel des paramètres. Ici, nous ajoutons un titre et faisons en sorte qu’elle fonctionne avec une webcam à la place :</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 -->gr.Interface.load(
	<span class="hljs-string">"spaces/abidlabs/remove-bg"</span>, inputs=<span class="hljs-string">"webcam"</span>, title=<span class="hljs-string">"Remove your webcam background!"</span>
	).launch()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-Remove-bg.hf.space" 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 data-svelte-h="svelte-1urnxch">Maintenant que nous avons exploré quelques façons d’intégrer <em>Gradio</em> avec le <em>Hub</em>, jetons un coup d’oeil à certaines fonctionnalités avancées de la classe <code>Interface</code>. C’est le sujet de la prochaine section !</p> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/course/blob/main/chapters/fr/chapter9/5.mdx" target="_blank"><span data-svelte-h="svelte-1kd6by1"><</span> <span data-svelte-h="svelte-x0xyl0">></span> <span data-svelte-h="svelte-1dajgef"><span class="underline ml-1.5">Update</span> on GitHub</span></a> <p></p>

	<script>
	{
	__sveltekit_4ugnx6 = {
	assets: "/docs/course/pr_1007/fr",
	base: "/docs/course/pr_1007/fr",
	env: {}
	};

	const element = document.currentScript.parentElement;

	const data = [null,null];

	Promise.all([
	import("/docs/course/pr_1007/fr/_app/immutable/entry/start.0dcef240.js"),
	import("/docs/course/pr_1007/fr/_app/immutable/entry/app.e06c0eda.js")
	]).then(([kit, app]) => {
	kit.start(app, element, {
	node_ids: [0, 74],
	data,
	form: null,
	error: null
	});
	});
	}
	</script>

Xet Storage Details

Size:: 20 kB
Xet hash:: c04c4a42b2975354c90c9f10dea1474845b8097823e001a82d46d5edf5ace201

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