import{s as es,f as Oe,n as ss,o as ts}from"../chunks/scheduler.37c15a92.js";import{S as ls,i as as,g as o,s as a,r as d,A as ns,h as i,f as t,c as n,j as We,u as m,x as r,k as u,y as os,a as l,v as M,d as y,t as J,w as U}from"../chunks/index.2bf4358c.js";import{Y as is}from"../chunks/Youtube.1e50a667.js";import{C as Re}from"../chunks/CodeBlock.4f5fc1ad.js";import{C as rs}from"../chunks/CourseFloatingBanner.15ba07e6.js";import{H as D,E as us}from"../chunks/EditOnGithub.8916dc7c.js";function ps(Ge){let T,P,A,K,b,O,g,ee,w,Ze="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>).",se,j,ze="Nous aborderons ces deux approches sous peu. Mais avant de partager votre démo, vous voudrez peut-être la peaufiner 💅.",te,f,le,h,xe='<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"/>',ae,v,Qe="Pour ajouter du contenu supplémentaire à votre démo, la classe <code>Interface</code> supporte quelques paramètres optionnels :",ne,I,Se=`<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>`,oe,C,ie,k,$e="En utilisant les options ci-dessus, nous obtenons une interface plus complète. Essayez l’interface ci-dessous :",re,p,He,ue,B,pe,q,Ne=`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> :`,ce,W,de,R,Ye="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.",me,G,Xe="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éé.",Me,Z,ye,z,Ve="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 ?",Je,x,Fe='<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.',Ue,Q,Te,S,he,$,Ee='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.',be,H,Le='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> :',ge,N,we,Y,Ae="Maintenant que nous avons une fonction <code>predict()</code>. La prochaine étape est de définir et de lancer notre interface <em>Gradio</em> :",je,X,fe,c,_e,ve,V,De="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 !).",Ie,F,Pe=`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.`,Ce,E,Ke="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> !",ke,L,Be,_,qe;return b=new D({props:{title:"Partager ses démos avec les autres",local:"partager-ses-démos-avec-les-autres",headingTag:"h1"}}),g=new rs({props:{chapter:9,classNames:"absolute z-10 right-0 top-0",notebooks:[{label:"English",value:"https://colab.research.google.com/github/huggingface/notebooks/blob/master/course/en/chapter9/section4.ipynb"},{label:"Français",value:"https://colab.research.google.com/github/huggingface/notebooks/blob/master/course/fr/chapter9/section4.ipynb"},{label:"English",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/en/chapter9/section4.ipynb"},{label:"Français",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/fr/chapter9/section4.ipynb"}]}}),f=new D({props:{title:"Polir votre démo <i> Gradio </i>",local:"polir-votre-démo-i-gradio-i",headingTag:"h3"}}),C=new Re({props:{code:"dGl0bGUlMjAlM0QlMjAlMjJBc2slMjBSaWNrJTIwYSUyMFF1ZXN0aW9uJTIyJTIwJTIwJTIzJTIwJTIyUG9zZXolMjB1bmUlMjBxdWVzdGlvbiUyMCVDMyVBMCUyMFJpY2slMjIlMEFkZXNjcmlwdGlvbiUyMCUzRCUyMCUyMiUyMiUyMiUwQVRoZSUyMGJvdCUyMHdhcyUyMHRyYWluZWQlMjB0byUyMGFuc3dlciUyMHF1ZXN0aW9ucyUyMGJhc2VkJTIwb24lMjBSaWNrJTIwYW5kJTIwTW9ydHklMjBkaWFsb2d1ZXMuJTIwQXNrJTIwUmljayUyMGFueXRoaW5nISUwQSUyMyUyMExlJTIwcm9ib3QlMjBhJTIwJUMzJUE5dCVDMyVBOSUyMGVudHJhJUMzJUFFbiVDMyVBOSUyMCVDMyVBMCUyMHIlQzMlQTlwb25kcmUlMjAlQzMlQTAlMjBkZXMlMjBxdWVzdGlvbnMlMjBiYXMlQzMlQTllcyUyMHN1ciUyMGxlcyUyMGRpYWxvZ3VlcyUyMGRlJTIwUmljayUyMGV0JTIwTW9ydHkuJTBBJTIzJTIwRGVtYW5kZXolMjAlQzMlQTAlMjBSaWNrJTIwY2UlMjBxdWUlMjB2b3VzJTIwdm91bGV6JTIwISUwQSUzQ2ltZyUyMHNyYyUzRCUyMmh0dHBzJTNBJTJGJTJGaHVnZ2luZ2ZhY2UuY28lMkZzcGFjZXMlMkZjb3Vyc2UtZGVtb3MlMkZSaWNrX2FuZF9Nb3J0eV9RQSUyRnJlc29sdmUlMkZtYWluJTJGcmljay5wbmclMjIlMjB3aWR0aCUzRDIwMHB4JTNFJTBBJTIyJTIyJTIyJTBBJTBBYXJ0aWNsZSUyMCUzRCUyMCUyMkNoZWNrJTIwb3V0JTIwJTVCdGhlJTIwb3JpZ2luYWwlMjBSaWNrJTIwYW5kJTIwTW9ydHklMjBCb3QlNUQoaHR0cHMlM0ElMkYlMkZodWdnaW5nZmFjZS5jbyUyRnNwYWNlcyUyRmtpbmdhYnpwcm8lMkZSaWNrX2FuZF9Nb3J0eV9Cb3QpJTIwdGhhdCUyMHRoaXMlMjBkZW1vJTIwaXMlMjBiYXNlZCUyMG9mZiUyMG9mLiUyMiUwQSUyMyUyMEpldGV6JTIwdW4lMjBjb3VwJTIwZCclQzUlOTNpbCUyMGF1JTIwJTVCYm90JTIwb3JpZ2luYWwlMjBSaWNrJTIwZXQlMjBNb3J0eSU1RChodHRwcyUzQSUyRiUyRmh1Z2dpbmdmYWNlLmNvJTJGc3BhY2VzJTJGa2luZ2FienBybyUyRlJpY2tfYW5kX01vcnR5X0JvdCklMjBzdXIlMjBsZXF1ZWwlMjBjZXR0ZSUyMGQlQzMlQTltbyUyMGVzdCUyMGJhcyVDMyVBOWUuJTBBJTBBZ3IuSW50ZXJmYWNlKCUwQSUyMCUyMCUyMCUyMGZuJTNEcHJlZGljdCUyQyUwQSUyMCUyMCUyMCUyMGlucHV0cyUzRCUyMnRleHRib3glMjIlMkMlMEElMjAlMjAlMjAlMjBvdXRwdXRzJTNEJTIydGV4dCUyMiUyQyUwQSUyMCUyMCUyMCUyMHRpdGxlJTNEdGl0bGUlMkMlMEElMjAlMjAlMjAlMjBkZXNjcmlwdGlvbiUzRGRlc2NyaXB0aW9uJTJDJTBBJTIwJTIwJTIwJTIwYXJ0aWNsZSUzRGFydGljbGUlMkMlMEElMjAlMjAlMjAlMjBleGFtcGxlcyUzRCU1QiU1QiUyMldoYXQlMjBhcmUlMjB5b3UlMjBkb2luZyUzRiUyMiU1RCUyQyUyMCU1QiUyMldoZXJlJTIwc2hvdWxkJTIwd2UlMjB0aW1lJTIwdHJhdmVsJTIwdG8lM0YlMjIlNUQlNUQlMkMlMEElMjAlMjAlMjAlMjAlMjMlMjAlNUIlMjJRdWUlMjBmYWl0ZXMtdm91cyUyMCUzRiUyMiU1RCUyQyUyMCU1QiUyMk8lQzMlQjklMjBkZXZyaW9ucy1ub3VzJTIwdm95YWdlciUyMGRhbnMlMjBsZSUyMHRlbXBzJTIwJTNGJTIyJTVEJTBBKS5sYXVuY2goKQ==",highlighted:`title = <span class="hljs-string">&quot;Ask Rick a Question&quot;</span>  <span class="hljs-comment"># &quot;Posez une question à Rick&quot;</span>
description = <span class="hljs-string">&quot;&quot;&quot;
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 !
&lt;img src=&quot;https://huggingface.co/spaces/course-demos/Rick_and_Morty_QA/resolve/main/rick.png&quot; width=200px&gt;
&quot;&quot;&quot;</span>

article = <span class="hljs-string">&quot;Check out [the original Rick and Morty Bot](https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot) that this demo is based off of.&quot;</span>
<span class="hljs-comment"># Jetez un coup d&#x27;œ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">&quot;textbox&quot;</span>,
    outputs=<span class="hljs-string">&quot;text&quot;</span>,
    title=title,
    description=description,
    article=article,
    examples=[[<span class="hljs-string">&quot;What are you doing?&quot;</span>], [<span class="hljs-string">&quot;Where should we time travel to?&quot;</span>]],
    <span class="hljs-comment"># [&quot;Que faites-vous ?&quot;], [&quot;Où devrions-nous voyager dans le temps ?&quot;]</span>
).launch()`,wrap:!1}}),B=new D({props:{title:"Partager votre démo avec des liens temporaires",local:"partager-votre-démo-avec-des-liens-temporaires",headingTag:"h3"}}),W=new Re({props:{code:"Z3IuSW50ZXJmYWNlKGNsYXNzaWZ5X2ltYWdlJTJDJTIwJTIyaW1hZ2UlMjIlMkMlMjAlMjJsYWJlbCUyMikubGF1bmNoKHNoYXJlJTNEVHJ1ZSk=",highlighted:'gr.Interface(classify_image, <span class="hljs-string">&quot;image&quot;</span>, <span class="hljs-string">&quot;label&quot;</span>).launch(share=<span class="hljs-literal">True</span>)',wrap:!1}}),Z=new D({props:{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",headingTag:"h3"}}),Q=new is({props:{id:"LS9Y2wDVI0k"}}),S=new D({props:{title:"✏️ Appliquons ça !",local:"-appliquons-ça-",headingTag:"h2"}}),N=new Re({props:{code:"ZnJvbSUyMHBhdGhsaWIlMjBpbXBvcnQlMjBQYXRoJTBBaW1wb3J0JTIwdG9yY2glMEFpbXBvcnQlMjBncmFkaW8lMjBhcyUyMGdyJTBBZnJvbSUyMHRvcmNoJTIwaW1wb3J0JTIwbm4lMEElMEFMQUJFTFMlMjAlM0QlMjBQYXRoKCUyMmNsYXNzX25hbWVzLnR4dCUyMikucmVhZF90ZXh0KCkuc3BsaXRsaW5lcygpJTBBJTBBbW9kZWwlMjAlM0QlMjBubi5TZXF1ZW50aWFsKCUwQSUyMCUyMCUyMCUyMG5uLkNvbnYyZCgxJTJDJTIwMzIlMkMlMjAzJTJDJTIwcGFkZGluZyUzRCUyMnNhbWUlMjIpJTJDJTBBJTIwJTIwJTIwJTIwbm4uUmVMVSgpJTJDJTBBJTIwJTIwJTIwJTIwbm4uTWF4UG9vbDJkKDIpJTJDJTBBJTIwJTIwJTIwJTIwbm4uQ29udjJkKDMyJTJDJTIwNjQlMkMlMjAzJTJDJTIwcGFkZGluZyUzRCUyMnNhbWUlMjIpJTJDJTBBJTIwJTIwJTIwJTIwbm4uUmVMVSgpJTJDJTBBJTIwJTIwJTIwJTIwbm4uTWF4UG9vbDJkKDIpJTJDJTBBJTIwJTIwJTIwJTIwbm4uQ29udjJkKDY0JTJDJTIwMTI4JTJDJTIwMyUyQyUyMHBhZGRpbmclM0QlMjJzYW1lJTIyKSUyQyUwQSUyMCUyMCUyMCUyMG5uLlJlTFUoKSUyQyUwQSUyMCUyMCUyMCUyMG5uLk1heFBvb2wyZCgyKSUyQyUwQSUyMCUyMCUyMCUyMG5uLkZsYXR0ZW4oKSUyQyUwQSUyMCUyMCUyMCUyMG5uLkxpbmVhcigxMTUyJTJDJTIwMjU2KSUyQyUwQSUyMCUyMCUyMCUyMG5uLlJlTFUoKSUyQyUwQSUyMCUyMCUyMCUyMG5uLkxpbmVhcigyNTYlMkMlMjBsZW4oTEFCRUxTKSklMkMlMEEpJTBBc3RhdGVfZGljdCUyMCUzRCUyMHRvcmNoLmxvYWQoJTIycHl0b3JjaF9tb2RlbC5iaW4lMjIlMkMlMjBtYXBfbG9jYXRpb24lM0QlMjJjcHUlMjIpJTBBbW9kZWwubG9hZF9zdGF0ZV9kaWN0KHN0YXRlX2RpY3QlMkMlMjBzdHJpY3QlM0RGYWxzZSklMEFtb2RlbC5ldmFsKCklMEElMEElMEFkZWYlMjBwcmVkaWN0KGltKSUzQSUwQSUyMCUyMCUyMCUyMHglMjAlM0QlMjB0b3JjaC50ZW5zb3IoaW0lMkMlMjBkdHlwZSUzRHRvcmNoLmZsb2F0MzIpLnVuc3F1ZWV6ZSgwKS51bnNxdWVlemUoMCklMjAlMkYlMjAyNTUuMCUwQSUyMCUyMCUyMCUyMHdpdGglMjB0b3JjaC5ub19ncmFkKCklM0ElMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBvdXQlMjAlM0QlMjBtb2RlbCh4KSUwQSUyMCUyMCUyMCUyMHByb2JhYmlsaXRpZXMlMjAlM0QlMjB0b3JjaC5ubi5mdW5jdGlvbmFsLnNvZnRtYXgob3V0JTVCMCU1RCUyQyUyMGRpbSUzRDApJTBBJTIwJTIwJTIwJTIwdmFsdWVzJTJDJTIwaW5kaWNlcyUyMCUzRCUyMHRvcmNoLnRvcGsocHJvYmFiaWxpdGllcyUyQyUyMDUpJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwJTdCTEFCRUxTJTVCaSU1RCUzQSUyMHYuaXRlbSgpJTIwZm9yJTIwaSUyQyUyMHYlMjBpbiUyMHppcChpbmRpY2VzJTJDJTIwdmFsdWVzKSU3RA==",highlighted:`<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">&quot;class_names.txt&quot;</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">&quot;same&quot;</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">&quot;same&quot;</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">&quot;same&quot;</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">&quot;pytorch_model.bin&quot;</span>, map_location=<span class="hljs-string">&quot;cpu&quot;</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)}`,wrap:!1}}),X=new Re({props:{code:"aW50ZXJmYWNlJTIwJTNEJTIwZ3IuSW50ZXJmYWNlKCUwQSUyMCUyMCUyMCUyMHByZWRpY3QlMkMlMEElMjAlMjAlMjAlMjBpbnB1dHMlM0QlMjJza2V0Y2hwYWQlMjIlMkMlMEElMjAlMjAlMjAlMjBvdXRwdXRzJTNEJTIybGFiZWwlMjIlMkMlMEElMjAlMjAlMjAlMjB0aGVtZSUzRCUyMmh1Z2dpbmdmYWNlJTIyJTJDJTBBJTIwJTIwJTIwJTIwdGl0bGUlM0QlMjJTa2V0Y2glMjBSZWNvZ25pdGlvbiUyMiUyQyUwQSUyMCUyMCUyMCUyMGRlc2NyaXB0aW9uJTNEJTIyV2hvJTIwd2FudHMlMjB0byUyMHBsYXklMjBQaWN0aW9uYXJ5JTNGJTIwRHJhdyUyMGElMjBjb21tb24lMjBvYmplY3QlMjBsaWtlJTIwYSUyMHNob3ZlbCUyMG9yJTIwYSUyMGxhcHRvcCUyQyUyMGFuZCUyMHRoZSUyMGFsZ29yaXRobSUyMHdpbGwlMjBndWVzcyUyMGluJTIwcmVhbCUyMHRpbWUhJTIyJTJDJTBBJTIwJTIwJTIwJTIwJTIzJTIwUXVpJTIwdmV1dCUyMGpvdWVyJTIwYXUlMjBQaWN0aW9uYXJ5JTIwJTNGJTIwRGVzc2luZXolMjB1biUyMG9iamV0JTIwY291cmFudCUyMGNvbW1lJTIwdW5lJTIwcGVsbGUlMjBvdSUyMHVuJTIwb3JkaW5hdGV1ciUyMHBvcnRhYmxlJTJDJTIwZXQlMjBsJ2FsZ29yaXRobWUlMjBsZSUyMGRldmluZXJhJTIwZW4lMjB0ZW1wcyUyMHIlQzMlQTllbCUyMCElMEElMjAlMjAlMjAlMjBhcnRpY2xlJTNEJTIyJTNDcCUyMHN0eWxlJTNEJ3RleHQtYWxpZ24lM0ElMjBjZW50ZXInJTNFU2tldGNoJTIwUmVjb2duaXRpb24lMjAlN0MlMjBEZW1vJTIwTW9kZWwlM0MlMkZwJTNFJTIyJTJDJTBBJTIwJTIwJTIwJTIwbGl2ZSUzRFRydWUlMkMlMEEpJTBBaW50ZXJmYWNlLmxhdW5jaChzaGFyZSUzRFRydWUp",highlighted:`interface = gr.Interface(
    predict,
    inputs=<span class="hljs-string">&quot;sketchpad&quot;</span>,
    outputs=<span class="hljs-string">&quot;label&quot;</span>,
    theme=<span class="hljs-string">&quot;huggingface&quot;</span>,
    title=<span class="hljs-string">&quot;Sketch Recognition&quot;</span>,
    description=<span class="hljs-string">&quot;Who wants to play Pictionary? Draw a common object like a shovel or a laptop, and the algorithm will guess in real time!&quot;</span>,
    <span class="hljs-comment"># Qui veut jouer au Pictionary ? Dessinez un objet courant comme une pelle ou un ordinateur portable, et l&#x27;algorithme le devinera en temps réel !</span>
    article=<span class="hljs-string">&quot;&lt;p style=&#x27;text-align: center&#x27;&gt;Sketch Recognition | Demo Model&lt;/p&gt;&quot;</span>,
    live=<span class="hljs-literal">True</span>,
)
interface.launch(share=<span class="hljs-literal">True</span>)`,wrap:!1}}),L=new us({props:{source:"https://github.com/huggingface/course/blob/main/chapters/fr/chapter9/4.mdx"}}),{c(){T=o("meta"),P=a(),A=o("p"),K=a(),d(b.$$.fragment),O=a(),d(g.$$.fragment),ee=a(),w=o("p"),w.innerHTML=Ze,se=a(),j=o("p"),j.textContent=ze,te=a(),d(f.$$.fragment),le=a(),h=o("div"),h.innerHTML=xe,ae=a(),v=o("p"),v.innerHTML=Qe,ne=a(),I=o("ul"),I.innerHTML=Se,oe=a(),d(C.$$.fragment),ie=a(),k=o("p"),k.textContent=$e,re=a(),p=o("iframe"),ue=a(),d(B.$$.fragment),pe=a(),q=o("p"),q.innerHTML=Ne,ce=a(),d(W.$$.fragment),de=a(),R=o("p"),R.innerHTML=Ye,me=a(),G=o("p"),G.innerHTML=Xe,Me=a(),d(Z.$$.fragment),ye=a(),z=o("p"),z.textContent=Ve,Je=a(),x=o("p"),x.innerHTML=Fe,Ue=a(),d(Q.$$.fragment),Te=a(),d(S.$$.fragment),he=a(),$=o("p"),$.innerHTML=Ee,be=a(),H=o("p"),H.innerHTML=Le,ge=a(),d(N.$$.fragment),we=a(),Y=o("p"),Y.innerHTML=Ae,je=a(),d(X.$$.fragment),fe=a(),c=o("iframe"),ve=a(),V=o("p"),V.innerHTML=De,Ie=a(),F=o("p"),F.innerHTML=Pe,Ce=a(),E=o("p"),E.innerHTML=Ke,ke=a(),d(L.$$.fragment),Be=a(),_=o("p"),this.h()},l(e){const s=ns("svelte-u9bgzb",document.head);T=i(s,"META",{name:!0,content:!0}),s.forEach(t),P=n(e),A=i(e,"P",{}),We(A).forEach(t),K=n(e),m(b.$$.fragment,e),O=n(e),m(g.$$.fragment,e),ee=n(e),w=i(e,"P",{"data-svelte-h":!0}),r(w)!=="svelte-1pv9c9u"&&(w.innerHTML=Ze),se=n(e),j=i(e,"P",{"data-svelte-h":!0}),r(j)!=="svelte-tdakb4"&&(j.textContent=ze),te=n(e),m(f.$$.fragment,e),le=n(e),h=i(e,"DIV",{class:!0,"data-svelte-h":!0}),r(h)!=="svelte-nclpfp"&&(h.innerHTML=xe),ae=n(e),v=i(e,"P",{"data-svelte-h":!0}),r(v)!=="svelte-1mx1mul"&&(v.innerHTML=Qe),ne=n(e),I=i(e,"UL",{"data-svelte-h":!0}),r(I)!=="svelte-19p09n4"&&(I.innerHTML=Se),oe=n(e),m(C.$$.fragment,e),ie=n(e),k=i(e,"P",{"data-svelte-h":!0}),r(k)!=="svelte-p3efr5"&&(k.textContent=$e),re=n(e),p=i(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),We(p).forEach(t),ue=n(e),m(B.$$.fragment,e),pe=n(e),q=i(e,"P",{"data-svelte-h":!0}),r(q)!=="svelte-xbvkgr"&&(q.innerHTML=Ne),ce=n(e),m(W.$$.fragment,e),de=n(e),R=i(e,"P",{"data-svelte-h":!0}),r(R)!=="svelte-5tsctd"&&(R.innerHTML=Ye),me=n(e),G=i(e,"P",{"data-svelte-h":!0}),r(G)!=="svelte-1pomryx"&&(G.innerHTML=Xe),Me=n(e),m(Z.$$.fragment,e),ye=n(e),z=i(e,"P",{"data-svelte-h":!0}),r(z)!=="svelte-1k4kmpa"&&(z.textContent=Ve),Je=n(e),x=i(e,"P",{"data-svelte-h":!0}),r(x)!=="svelte-16es9j0"&&(x.innerHTML=Fe),Ue=n(e),m(Q.$$.fragment,e),Te=n(e),m(S.$$.fragment,e),he=n(e),$=i(e,"P",{"data-svelte-h":!0}),r($)!=="svelte-135t63w"&&($.innerHTML=Ee),be=n(e),H=i(e,"P",{"data-svelte-h":!0}),r(H)!=="svelte-1aakq01"&&(H.innerHTML=Le),ge=n(e),m(N.$$.fragment,e),we=n(e),Y=i(e,"P",{"data-svelte-h":!0}),r(Y)!=="svelte-1ggz5t5"&&(Y.innerHTML=Ae),je=n(e),m(X.$$.fragment,e),fe=n(e),c=i(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),We(c).forEach(t),ve=n(e),V=i(e,"P",{"data-svelte-h":!0}),r(V)!=="svelte-1x8nbne"&&(V.innerHTML=De),Ie=n(e),F=i(e,"P",{"data-svelte-h":!0}),r(F)!=="svelte-kdq647"&&(F.innerHTML=Pe),Ce=n(e),E=i(e,"P",{"data-svelte-h":!0}),r(E)!=="svelte-gr9m8y"&&(E.innerHTML=Ke),ke=n(e),m(L.$$.fragment,e),Be=n(e),_=i(e,"P",{}),We(_).forEach(t),this.h()},h(){u(T,"name","hf:doc:metadata"),u(T,"content",cs),u(h,"class","flex justify-center"),Oe(p.src,He="https://course-demos-Rick-and-Morty-QA.hf.space")||u(p,"src",He),u(p,"frameborder","0"),u(p,"height","800"),u(p,"title","Gradio app"),u(p,"class","container p-0 flex-grow space-iframe"),u(p,"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"),u(p,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),Oe(c.src,_e="https://course-demos-Sketch-Recognition.hf.space")||u(c,"src",_e),u(c,"frameborder","0"),u(c,"height","650"),u(c,"title","Gradio app"),u(c,"class","container p-0 flex-grow space-iframe"),u(c,"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"),u(c,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads")},m(e,s){os(document.head,T),l(e,P,s),l(e,A,s),l(e,K,s),M(b,e,s),l(e,O,s),M(g,e,s),l(e,ee,s),l(e,w,s),l(e,se,s),l(e,j,s),l(e,te,s),M(f,e,s),l(e,le,s),l(e,h,s),l(e,ae,s),l(e,v,s),l(e,ne,s),l(e,I,s),l(e,oe,s),M(C,e,s),l(e,ie,s),l(e,k,s),l(e,re,s),l(e,p,s),l(e,ue,s),M(B,e,s),l(e,pe,s),l(e,q,s),l(e,ce,s),M(W,e,s),l(e,de,s),l(e,R,s),l(e,me,s),l(e,G,s),l(e,Me,s),M(Z,e,s),l(e,ye,s),l(e,z,s),l(e,Je,s),l(e,x,s),l(e,Ue,s),M(Q,e,s),l(e,Te,s),M(S,e,s),l(e,he,s),l(e,$,s),l(e,be,s),l(e,H,s),l(e,ge,s),M(N,e,s),l(e,we,s),l(e,Y,s),l(e,je,s),M(X,e,s),l(e,fe,s),l(e,c,s),l(e,ve,s),l(e,V,s),l(e,Ie,s),l(e,F,s),l(e,Ce,s),l(e,E,s),l(e,ke,s),M(L,e,s),l(e,Be,s),l(e,_,s),qe=!0},p:ss,i(e){qe||(y(b.$$.fragment,e),y(g.$$.fragment,e),y(f.$$.fragment,e),y(C.$$.fragment,e),y(B.$$.fragment,e),y(W.$$.fragment,e),y(Z.$$.fragment,e),y(Q.$$.fragment,e),y(S.$$.fragment,e),y(N.$$.fragment,e),y(X.$$.fragment,e),y(L.$$.fragment,e),qe=!0)},o(e){J(b.$$.fragment,e),J(g.$$.fragment,e),J(f.$$.fragment,e),J(C.$$.fragment,e),J(B.$$.fragment,e),J(W.$$.fragment,e),J(Z.$$.fragment,e),J(Q.$$.fragment,e),J(S.$$.fragment,e),J(N.$$.fragment,e),J(X.$$.fragment,e),J(L.$$.fragment,e),qe=!1},d(e){e&&(t(P),t(A),t(K),t(O),t(ee),t(w),t(se),t(j),t(te),t(le),t(h),t(ae),t(v),t(ne),t(I),t(oe),t(ie),t(k),t(re),t(p),t(ue),t(pe),t(q),t(ce),t(de),t(R),t(me),t(G),t(Me),t(ye),t(z),t(Je),t(x),t(Ue),t(Te),t(he),t($),t(be),t(H),t(ge),t(we),t(Y),t(je),t(fe),t(c),t(ve),t(V),t(Ie),t(F),t(Ce),t(E),t(ke),t(Be),t(_)),t(T),U(b,e),U(g,e),U(f,e),U(C,e),U(B,e),U(W,e),U(Z,e),U(Q,e),U(S,e),U(N,e),U(X,e),U(L,e)}}}const cs='{"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}';function ds(Ge){return ts(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class hs extends ls{constructor(T){super(),as(this,T,ds,ps,es,{})}}export{hs as component};
