Buckets:

hf-doc-build
/

doc-dev

Files

xet

hf-doc-build/doc-dev / course /pr_1069 /fr /chapter9 /4.html

rtrm

27 days ago

download

raw

31.7 kB

	<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"Partager ses démos avec les autres","local":"partager-ses-démos-avec-les-autres","sections":[{"title":"Polir votre démo <i> Gradio </i>","local":"polir-votre-démo-i-gradio-i","sections":[],"depth":3},{"title":"Partager votre démo avec des liens temporaires","local":"partager-votre-démo-avec-des-liens-temporaires","sections":[],"depth":3},{"title":"Hébergement de votre démo sur <i> Hugging Face Spaces </i>","local":"hébergement-de-votre-démo-sur-i-hugging-face-spaces-i","sections":[],"depth":3},{"title":"✏️ Appliquons ça !","local":"-appliquons-ça-","sections":[],"depth":2}],"depth":1}">
	<link href="/docs/course/pr_1069/fr/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
	<link rel="modulepreload" href="/docs/course/pr_1069/fr/_app/immutable/entry/start.cea6db46.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/fr/_app/immutable/chunks/scheduler.37c15a92.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/fr/_app/immutable/chunks/singletons.2b29b91f.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/fr/_app/immutable/chunks/index.18351ede.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/fr/_app/immutable/chunks/paths.f6fdf97f.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/fr/_app/immutable/entry/app.3f6640b1.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/fr/_app/immutable/chunks/index.2bf4358c.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/fr/_app/immutable/nodes/0.b777de11.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/fr/_app/immutable/chunks/each.e59479a4.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/fr/_app/immutable/nodes/73.99d93b60.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/fr/_app/immutable/chunks/Youtube.1e50a667.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/fr/_app/immutable/chunks/CodeBlock.4e987730.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/fr/_app/immutable/chunks/CourseFloatingBanner.6add7356.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/fr/_app/immutable/chunks/getInferenceSnippets.24b50994.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"Partager ses démos avec les autres","local":"partager-ses-démos-avec-les-autres","sections":[{"title":"Polir votre démo <i> Gradio </i>","local":"polir-votre-démo-i-gradio-i","sections":[],"depth":3},{"title":"Partager votre démo avec des liens temporaires","local":"partager-votre-démo-avec-des-liens-temporaires","sections":[],"depth":3},{"title":"Hébergement de votre démo sur <i> Hugging Face Spaces </i>","local":"hébergement-de-votre-démo-sur-i-hugging-face-spaces-i","sections":[],"depth":3},{"title":"✏️ Appliquons ça !","local":"-appliquons-ça-","sections":[],"depth":2}],"depth":1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <h1 class="relative group"><a id="partager-ses-démos-avec-les-autres" 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="#partager-ses-démos-avec-les-autres"><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>Partager ses démos avec les autres</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-1pv9c9u">Maintenant que vous avez construit une démo, vous voudrez probablement la partager à d’autres personnes. Les démos <em>Gradio</em> peuvent être partagées de deux façons : en utilisant un lien de partage temporaire (<strong><em>temporary share link</em></strong>) ou un hébergement permanent (<strong><em>permanent hosting on Spaces</em></strong>).</p> <p data-svelte-h="svelte-tdakb4">Nous aborderons ces deux approches sous peu. Mais avant de partager votre démo, vous voudrez peut-être la peaufiner 💅.</p> <h3 class="relative group"><a id="polir-votre-démo-i-gradio-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="#polir-votre-démo-i-gradio-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>Polir votre démo <i> Gradio </i></span></h3> <div class="flex justify-center" data-svelte-h="svelte-nclpfp"><img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface-course/documentation-images/resolve/main/en/chapter9/gradio-demo-overview.png" alt="Overview of a gradio interface"> <img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface-course/documentation-images/resolve/main/en/chapter9/gradio-demo-overview-dark.png" alt="Overview of a gradio interface"></div> <p data-svelte-h="svelte-1mx1mul">Pour ajouter du contenu supplémentaire à votre démo, la classe <code>Interface</code> supporte quelques paramètres optionnels :</p> <ul data-svelte-h="svelte-19p09n4"><li><code>title</code> : vous pouvez donner un titre à votre démo, qui apparaît <em>au-dessus</em> des composants d’entrée et de sortie.</li> <li><code>description</code> : vous pouvez donner une description (en texte, Markdown, ou HTML) pour l’interface, qui apparaît au-dessus des composants d’entrée et de sortie et en dessous du titre.</li> <li><code>article</code> : vous pouvez également écrire un article étendu (en texte, Markdown ou HTML) expliquant l’interface. S’il est fourni, il apparaît <em>sous</em> les composants d’entrée et de sortie.</li> <li><code>theme</code> : vous n’aimez pas les couleurs par défaut ? Définissez le thème pour utiliser une des couleurs suivantes : <code>default</code>, <code>huggingface</code>, <code>grass</code>, <code>peach</code>. Vous pouvez également ajouter le préfixe <code>dark-</code>, par exemple <code>dark-peach</code> pour un thème sombre (ou juste <code>dark</code> pour le thème sombre par défaut).</li> <li><code>examples</code> : pour rendre votre démo <em>beaucoup plus facile à utiliser</em>, vous pouvez fournir quelques exemples d’entrées pour la fonction. Ceux-ci apparaissent sous les composants de l’interface utilisateur et peuvent être utilisés pour remplir l’interface. Ils doivent être fournis sous forme de liste imbriquée, dans laquelle la liste extérieure est constituée d’exemples et chaque liste intérieure est constituée d’une entrée correspondant à chaque composant d’entrée.</li> <li><code>live</code> : si vous voulez que votre modèle soit relancé à chaque fois que l’entrée change, vous pouvez mettre <code>live=True</code>. Ceci est utile pour les modèles rapides (nous verrons un exemple à la fin de cette section).
	En utilisant les options ci-dessus, nous obtenons une interface plus complète. Exécutez le code ci-dessous pour pouvoir discuter avec Rick et Morty :</li></ul> <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 -->title = <span class="hljs-string">"Ask Rick a Question"</span> <span class="hljs-comment"># "Posez une question à Rick"</span>
	description = <span class="hljs-string">"""
	The bot was trained to answer questions based on Rick and Morty dialogues. Ask Rick anything!
	# Le robot a été entraîné à répondre à des questions basées sur les dialogues de Rick et Morty.
	# Demandez à Rick ce que vous voulez !
	<img src="https://huggingface.co/spaces/course-demos/Rick_and_Morty_QA/resolve/main/rick.png" width=200px>
	"""</span>

	article = <span class="hljs-string">"Check out [the original Rick and Morty Bot](https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot) that this demo is based off of."</span>
	<span class="hljs-comment"># Jetez un coup d'œil au [bot original Rick et Morty](https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot) sur lequel cette démo est basée.</span>

	gr.Interface(
	fn=predict,
	inputs=<span class="hljs-string">"textbox"</span>,
	outputs=<span class="hljs-string">"text"</span>,
	title=title,
	description=description,
	article=article,
	examples=[[<span class="hljs-string">"What are you doing?"</span>], [<span class="hljs-string">"Where should we time travel to?"</span>]],
	<span class="hljs-comment"># ["Que faites-vous ?"], ["Où devrions-nous voyager dans le temps ?"]</span>
	).launch()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-p3efr5">En utilisant les options ci-dessus, nous obtenons une interface plus complète. Essayez l’interface ci-dessous :</p> <iframe src="https://course-demos-Rick-and-Morty-QA.hf.space" frameborder="0" height="800" 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> <h3 class="relative group"><a id="partager-votre-démo-avec-des-liens-temporaires" 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="#partager-votre-démo-avec-des-liens-temporaires"><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>Partager votre démo avec des liens temporaires</span></h3> <p data-svelte-h="svelte-xbvkgr">Maintenant que nous avons une démo fonctionnelle de notre modèle d’apprentissage automatique, apprenons à partager facilement un lien vers notre interface.
	Les interfaces peuvent être facilement partagées publiquement en mettant <code>share=True</code> dans la méthode <code>launch()</code> :</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(classify_image, <span class="hljs-string">"image"</span>, <span class="hljs-string">"label"</span>).launch(share=<span class="hljs-literal">True</span>)<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-5tsctd">Cela génère un lien public et partageable que vous pouvez envoyer à n’importe qui ! Lorsque vous envoyez ce lien, l’utilisateur de l’autre côté peut essayer le modèle dans son navigateur pendant 72 heures au maximum. Le traitement s’effectuant sur votre appareil (tant qu’il reste allumé !), vous n’avez pas à vous soucier de la mise en place de dépendances. Si vous travaillez à partir d’un <em>notebook</em> Google Colab, un lien de partage est toujours créé automatiquement. Il ressemble généralement à quelque chose comme ceci : <strong>XXXXX.gradio.app</strong>. Bien que le lien soit servi par un lien <em>Gradio</em>, nous ne sommes qu’un proxy pour votre serveur local, et nous ne stockons pas les données envoyées par les interfaces.</p> <p data-svelte-h="svelte-1pomryx">Gardez cependant à l’esprit que ces liens sont accessibles au public, ce qui signifie que n’importe qui peut utiliser votre modèle pour la prédiction ! Par conséquent, assurez-vous de ne pas exposer d’informations sensibles à travers les fonctions que vous écrivez, ou de permettre que des changements critiques se produisent sur votre appareil. Si vous définissez <code>share=False</code> (la valeur par défaut), seul un lien local est créé.</p> <h3 class="relative group"><a id="hébergement-de-votre-démo-sur-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="#hébergement-de-votre-démo-sur-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>Hébergement de votre démo sur <i> Hugging Face Spaces </i></span></h3> <p data-svelte-h="svelte-1k4kmpa">Un lien de partage que vous pouvez passer à vos collègues est cool, mais comment pouvez-vous héberger de façon permanente votre démo et la faire exister dans son propre « espace » sur internet ?</p> <p data-svelte-h="svelte-16es9j0"><em>Hugging Face Spaces</em> fournit l’infrastructure pour héberger de façon permanente votre démo <em>Gradio</em> sur internet et <strong>gratuitement</strong> ! <em>Spaces</em> vous permet de créer et de pousser vers un dépôt (public ou privé) le code de votre interface <em>Gradio</em>. Il sera placé dans un fichier <code>app.py</code>. <a href="https://huggingface.co/blog/gradio-spaces" rel="nofollow">Lisez ce tutoriel étape par étape</a> pour commencer ou regardez la vidéo ci-dessous.</p> <iframe class="w-full xl:w-4/6 h-80" src="https://www.youtube-nocookie.com/embed/LS9Y2wDVI0k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <h2 class="relative group"><a id="-appliquons-ça-" 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="#-appliquons-ça-"><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>✏️ Appliquons ça !</span></h2> <p data-svelte-h="svelte-135t63w">En utilisant ce que nous avons appris dans les sections précédentes, créons la démo de reconnaissance de croquis que nous avons décrit dans la <a href="/course/fr/chapter9/1">section un de ce chapitre</a>. Ajoutons quelques personnalisations à notre interface et définissons <code>share=True</code> pour créer un lien public que nous pouvons faire circuler.</p> <p data-svelte-h="svelte-1aakq01">Nous pouvons charger les étiquettes depuis <a href="https://huggingface.co/spaces/dawood/Sketch-Recognition/blob/main/class_names.txt" rel="nofollow">class_names.txt</a> et charger le modèle Pytorch pré-entraîné depuis <a href="https://huggingface.co/spaces/dawood/Sketch-Recognition/blob/main/pytorch_model.bin" rel="nofollow">pytorch_model.bin</a>. Téléchargez ces fichiers en suivant le lien et en cliquant sur « <em>download</em> » dans le coin supérieur gauche de l’aperçu du fichier. Regardons le code ci-dessous pour voir comment nous utilisons ces fichiers pour charger notre modèle et créer une fonction <code>predict()</code> :</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">from</span> pathlib <span class="hljs-keyword">import</span> Path
	<span class="hljs-keyword">import</span> torch
	<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr
	<span class="hljs-keyword">from</span> torch <span class="hljs-keyword">import</span> nn

	LABELS = Path(<span class="hljs-string">"class_names.txt"</span>).read_text().splitlines()

	model = nn.Sequential(
	nn.Conv2d(<span class="hljs-number">1</span>, <span class="hljs-number">32</span>, <span class="hljs-number">3</span>, padding=<span class="hljs-string">"same"</span>),
	nn.ReLU(),
	nn.MaxPool2d(<span class="hljs-number">2</span>),
	nn.Conv2d(<span class="hljs-number">32</span>, <span class="hljs-number">64</span>, <span class="hljs-number">3</span>, padding=<span class="hljs-string">"same"</span>),
	nn.ReLU(),
	nn.MaxPool2d(<span class="hljs-number">2</span>),
	nn.Conv2d(<span class="hljs-number">64</span>, <span class="hljs-number">128</span>, <span class="hljs-number">3</span>, padding=<span class="hljs-string">"same"</span>),
	nn.ReLU(),
	nn.MaxPool2d(<span class="hljs-number">2</span>),
	nn.Flatten(),
	nn.Linear(<span class="hljs-number">1152</span>, <span class="hljs-number">256</span>),
	nn.ReLU(),
	nn.Linear(<span class="hljs-number">256</span>, <span class="hljs-built_in">len</span>(LABELS)),
	)
	state_dict = torch.load(<span class="hljs-string">"pytorch_model.bin"</span>, map_location=<span class="hljs-string">"cpu"</span>)
	model.load_state_dict(state_dict, strict=<span class="hljs-literal">False</span>)
	model.<span class="hljs-built_in">eval</span>()


	<span class="hljs-keyword">def</span> <span class="hljs-title function_">predict</span>(<span class="hljs-params">im</span>):
	x = torch.tensor(im, dtype=torch.float32).unsqueeze(<span class="hljs-number">0</span>).unsqueeze(<span class="hljs-number">0</span>) / <span class="hljs-number">255.0</span>
	<span class="hljs-keyword">with</span> torch.no_grad():
	out = model(x)
	probabilities = torch.nn.functional.softmax(out[<span class="hljs-number">0</span>], dim=<span class="hljs-number">0</span>)
	values, indices = torch.topk(probabilities, <span class="hljs-number">5</span>)
	<span class="hljs-keyword">return</span> {LABELS[i]: v.item() <span class="hljs-keyword">for</span> i, v <span class="hljs-keyword">in</span> <span class="hljs-built_in">zip</span>(indices, values)}<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1ggz5t5">Maintenant que nous avons une fonction <code>predict()</code>. La prochaine étape est de définir et de lancer notre interface <em>Gradio</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 -->interface = gr.Interface(
	predict,
	inputs=<span class="hljs-string">"sketchpad"</span>,
	outputs=<span class="hljs-string">"label"</span>,
	theme=<span class="hljs-string">"huggingface"</span>,
	title=<span class="hljs-string">"Sketch Recognition"</span>,
	description=<span class="hljs-string">"Who wants to play Pictionary? Draw a common object like a shovel or a laptop, and the algorithm will guess in real time!"</span>,
	<span class="hljs-comment"># Qui veut jouer au Pictionary ? Dessinez un objet courant comme une pelle ou un ordinateur portable, et l'algorithme le devinera en temps réel !</span>
	article=<span class="hljs-string">"<p style='text-align: center'>Sketch Recognition \| Demo Model</p>"</span>,
	live=<span class="hljs-literal">True</span>,
	)
	interface.launch(share=<span class="hljs-literal">True</span>)<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-Sketch-Recognition.hf.space" 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-1x8nbne">Remarquez le paramètre <code>live=True</code> dans <code>Interface</code>, qui signifie que la démo de sketchs fait une prédiction chaque fois que quelqu’un dessine sur le bloc (pas de bouton de soumission !).</p> <p data-svelte-h="svelte-kdq647">De plus, nous avons également défini l’argument <code>share=True</code> dans la méthode <code>launch()</code>.
	Cela créera un lien public que vous pourrez envoyer à n’importe qui ! Lorsque vous envoyez ce lien, l’utilisateur de l’autre côté peut essayer le modèle de reconnaissance de croquis. Pour réitérer, vous pouvez également héberger le modèle sur <em>Hugging Face Spaces</em>, ce qui nous permet d’intégrer la démo ci-dessus.</p> <p data-svelte-h="svelte-gr9m8y">La prochaine fois, nous couvrirons d’autres façons dont <em>Gradio</em> peut être utilisé avec l’écosystème d’<em>Hugging Face</em> !</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/4.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_1sfisyd = {
	assets: "/docs/course/pr_1069/fr",
	base: "/docs/course/pr_1069/fr",
	env: {}
	};

	const element = document.currentScript.parentElement;

	const data = [null,null];

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

Xet Storage Details

Size:: 31.7 kB
Xet hash:: 7f82b59dc9cef088e1f43a748f4d4b052a66131bb0ff5afd3a51e1c0ee5c386d

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