Buckets:
| <meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"Comprendre la classe <i> Interface </i>","local":"comprendre-la-classe-i-interface-i","sections":[{"title":"Comment créer une interface","local":"comment-créer-une-interface","sections":[],"depth":2},{"title":"Un exemple simple avec audio","local":"un-exemple-simple-avec-audio","sections":[],"depth":2},{"title":"Gérer les entrées et sorties multiples","local":"gérer-les-entrées-et-sorties-multiples","sections":[{"title":"La méthode launch()","local":"la-méthode-launch","sections":[],"depth":3}],"depth":2},{"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/72.c3d569c3.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":"Comprendre la classe <i> Interface </i>","local":"comprendre-la-classe-i-interface-i","sections":[{"title":"Comment créer une interface","local":"comment-créer-une-interface","sections":[],"depth":2},{"title":"Un exemple simple avec audio","local":"un-exemple-simple-avec-audio","sections":[],"depth":2},{"title":"Gérer les entrées et sorties multiples","local":"gérer-les-entrées-et-sorties-multiples","sections":[{"title":"La méthode launch()","local":"la-méthode-launch","sections":[],"depth":3}],"depth":2},{"title":"✏️ Appliquons ça !","local":"-appliquons-ça-","sections":[],"depth":2}],"depth":1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <h1 class="relative group"><a id="comprendre-la-classe-i-interface-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="#comprendre-la-classe-i-interface-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>Comprendre la classe <i> Interface </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-pnhlej">Dans cette section, nous allons examiner de plus près la classe <code>Interface</code>, et comprendre les principaux paramètres utilisés pour en créer une.</p> <h2 class="relative group"><a id="comment-créer-une-interface" 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="#comment-créer-une-interface"><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>Comment créer une interface</span></h2> <p data-svelte-h="svelte-i8pl6i">Vous remarquerez que la classe <code>Interface</code> a 3 paramètres obligatoires :</p> <p data-svelte-h="svelte-5xxju6"><code>Interface(fn, inputs, outputs, ...)</code></p> <p data-svelte-h="svelte-1go2sl4">Ces paramètres sont :</p> <ul data-svelte-h="svelte-jfynuh"><li><code>fn</code>: la fonction de prédiction qui est enveloppée par l’interface <em>Gradio</em>. Cette fonction peut prendre un ou plusieurs paramètres et retourner une ou plusieurs valeurs.</li> <li><code>inputs</code>: le(s) type(s) de composant(s) d’entrée. <em>Gradio</em> fournit de nombreux composants préconstruits tels que<code>"image"</code> ou <code>"mic"</code>.</li> <li><code>outputs</code>: le(s) type(s) de composant(s) de sortie. Encore une fois, <em>Gradio</em> fournit de nombreux composants pré-construits, par ex. <code>"image"</code> ou <code>"label"</code>.</li></ul> <p data-svelte-h="svelte-s6boen">Pour une liste complète des composants, <a href="https://gradio.app/docs" rel="nofollow">jetez un coup d’œil à la documentation de <em>Gradio</em></a>. Chaque composant préconstruit peut être personnalisé en instanciant la classe correspondant au composant.</p> <p data-svelte-h="svelte-op7vtp">Par exemple, comme nous l’avons vu dans la <a href="/course/fr/chapter9/2">section précédente</a>, au lieu de passer le paramètre <code>inputs</code> par <code>"textbox"</code>, vous pouvez passer un composant <code>Textbox(lines=7, label="Prompt")</code> pour créer une zone de texte avec 7 lignes et un label.</p> <p data-svelte-h="svelte-1e28b11">Voyons un autre exemple, cette fois avec un composant <code>Audio</code>.</p> <h2 class="relative group"><a id="un-exemple-simple-avec-audio" 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="#un-exemple-simple-avec-audio"><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>Un exemple simple avec audio</span></h2> <p data-svelte-h="svelte-1b5p006">Comme mentionné précédemment, <em>Gradio</em> fournit de nombreuses entrées et sorties différentes. | |
| Construisons donc une <code>Interface</code> qui fonctionne avec l’audio.</p> <p data-svelte-h="svelte-13jci01">Dans cet exemple, nous allons construire une fonction audio-vers-audio qui prend un fichier audio et l’inverse simplement.</p> <p data-svelte-h="svelte-1r7h0mb">Nous utiliserons comme entrée le composant <code>Audio</code>. Lorsque vous utilisez le composant <code>Audio</code>, vous pouvez spécifier si vous voulez que la <code>source</code> de l’audio soit un fichier que l’utilisateur télécharge ou un microphone avec lequel l’utilisateur enregistre sa voix. Dans ce cas, nous allons choisir un microphone. Juste pour le plaisir, nous allons ajouter une étiquette à notre <code>Audio</code> qui dit « <em>Speak here…</em> » (Parler ici).</p> <p data-svelte-h="svelte-ke7a4j">De plus, nous aimerions recevoir l’audio sous la forme d’un tableau numpy afin de pouvoir facilement l’inverser. Nous allons donc définir le <code>"type"</code> comme étant <code>"numpy"</code>, ce qui permet de passer les données d’entrée comme un <em>tuple</em> de (<code>sample_rate</code>, <code>data</code>) dans notre fonction.</p> <p data-svelte-h="svelte-elipx6">Nous utiliserons également le composant de sortie <code>Audio</code> qui peut automatiquement rendre un <em>tuple</em> avec un taux d’échantillonnage et un tableau numpy de données comme un fichier audio lisible. | |
| Dans ce cas, nous n’avons pas besoin de faire de personnalisation, donc nous utiliserons le raccourci de la chaîne <code>"audio"</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">import</span> numpy <span class="hljs-keyword">as</span> np | |
| <span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr | |
| <span class="hljs-keyword">def</span> <span class="hljs-title function_">reverse_audio</span>(<span class="hljs-params">audio</span>): | |
| sr, data = audio | |
| reversed_audio = (sr, np.flipud(data)) | |
| <span class="hljs-keyword">return</span> reversed_audio | |
| mic = gr.Audio(source=<span class="hljs-string">"microphone"</span>, <span class="hljs-built_in">type</span>=<span class="hljs-string">"numpy"</span>, label=<span class="hljs-string">"Speak here..."</span>) | |
| gr.Interface(reverse_audio, mic, <span class="hljs-string">"audio"</span>).launch()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-bdrl7v">Le code ci-dessus produira une interface comme celle qui suit (si votre navigateur ne vous demande pas l’autorisation pour accéder au microphone, <a href="https://huggingface.co/spaces/course-demos/audio-reverse" target="_blank">ouvrez la démo dans un onglet séparé</a>).</p> <iframe src="https://course-demos-audio-reverse.hf.space" frameborder="0" height="250" 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-1pkferk">Vous devriez maintenant être capable d’enregistrer votre voix et de vous entendre parler à l’envers. Effrayant 👻 !</p> <h2 class="relative group"><a id="gérer-les-entrées-et-sorties-multiples" 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="#gérer-les-entrées-et-sorties-multiples"><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>Gérer les entrées et sorties multiples</span></h2> <p data-svelte-h="svelte-15yf0pp">Imaginons que nous ayons une fonction plus compliquée, avec plusieurs entrées et sorties. | |
| Dans l’exemple ci-dessous, nous avons une fonction qui prend un index de liste déroulante, une valeur de curseur et un nombre, et renvoie un échantillon audio d’une tonalité musicale.</p> <p data-svelte-h="svelte-1qox5wf">Regardez comment nous passons une liste de composants d’entrée et de sortie, et voyez si vous pouvez suivre ce qui se passe.</p> <p data-svelte-h="svelte-1buha6f">La clé ici est que lorsque vous passez :</p> <ul data-svelte-h="svelte-1u77mhf"><li>une liste de composants d’entrée, chaque composant correspond à un paramètre dans l’ordre.</li> <li>une liste de composants de sortie, chaque composant correspond à une valeur retournée.</li></ul> <p data-svelte-h="svelte-1y8qj54">L’extrait de code ci-dessous montre comment trois composants d’entrée correspondent aux trois arguments de la fonction <code>generate_tone()</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">import</span> numpy <span class="hljs-keyword">as</span> np | |
| <span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr | |
| notes = [<span class="hljs-string">"C"</span>, <span class="hljs-string">"C#"</span>, <span class="hljs-string">"D"</span>, <span class="hljs-string">"D#"</span>, <span class="hljs-string">"E"</span>, <span class="hljs-string">"F"</span>, <span class="hljs-string">"F#"</span>, <span class="hljs-string">"G"</span>, <span class="hljs-string">"G#"</span>, <span class="hljs-string">"A"</span>, <span class="hljs-string">"A#"</span>, <span class="hljs-string">"B"</span>] | |
| <span class="hljs-keyword">def</span> <span class="hljs-title function_">generate_tone</span>(<span class="hljs-params">note, octave, duration</span>): | |
| sr = <span class="hljs-number">48000</span> | |
| a4_freq, tones_from_a4 = <span class="hljs-number">440</span>, <span class="hljs-number">12</span> * (octave - <span class="hljs-number">4</span>) + (note - <span class="hljs-number">9</span>) | |
| frequency = a4_freq * <span class="hljs-number">2</span> ** (tones_from_a4 / <span class="hljs-number">12</span>) | |
| duration = <span class="hljs-built_in">int</span>(duration) | |
| audio = np.linspace(<span class="hljs-number">0</span>, duration, duration * sr) | |
| audio = (<span class="hljs-number">20000</span> * np.sin(audio * (<span class="hljs-number">2</span> * np.pi * frequency))).astype(np.int16) | |
| <span class="hljs-keyword">return</span> (sr, audio) | |
| gr.Interface( | |
| generate_tone, | |
| [ | |
| gr.Dropdown(notes, <span class="hljs-built_in">type</span>=<span class="hljs-string">"index"</span>), | |
| gr.Slider(minimum=<span class="hljs-number">4</span>, maximum=<span class="hljs-number">6</span>, step=<span class="hljs-number">1</span>), | |
| gr.Textbox(<span class="hljs-built_in">type</span>=<span class="hljs-string">"number"</span>, value=<span class="hljs-number">1</span>, label=<span class="hljs-string">"Duration in seconds"</span>), | |
| ], | |
| <span class="hljs-string">"audio"</span>, | |
| ).launch()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-generate-tone.hf.space" frameborder="0" height="450" 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="la-méthode-launch" 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="#la-méthode-launch"><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>La méthode launch()</span></h3> <p data-svelte-h="svelte-8ys7zg">Jusqu’à présent, nous avons utilisé la méthode <code>launch()</code> pour lancer l’interface, mais nous n’avons pas vraiment discuté de ce qu’elle fait.</p> <p data-svelte-h="svelte-h5bu5b">Par défaut, la méthode <code>launch()</code> lancera la démo dans un serveur web qui tourne localement. Si vous exécutez votre code dans un <em>notebook</em> Jupyter ou Colab, <em>Gradio</em> va intégrer l’interface graphique de la démo dans le <em>notebook</em> afin que vous puissiez l’utiliser facilement.</p> <p data-svelte-h="svelte-1n3rxi3">Vous pouvez personnaliser le comportement de <code>launch()</code> à travers différents paramètres :</p> <ul data-svelte-h="svelte-fqr9m7"><li><code>inline</code> : si vous voulez afficher l’interface en ligne sur les <em>notebooks</em> Python.</li> <li><code>inbrowser</code> : pour lancer automatiquement l’interface dans un nouvel onglet du navigateur par défaut.</li> <li><code>share</code> : si vous voulez créer un lien public partageable depuis votre ordinateur pour l’interface. Un peu comme un lien Google Drive !</li></ul> <p data-svelte-h="svelte-1egkbda">Nous couvrirons le paramètre <code>share</code> plus en détail dans la section suivante !</p> <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-89td6r">Construisons une interface qui vous permette de faire la démonstration d’un modèle de <strong>reconnaissance vocale</strong>. | |
| Pour rendre la chose intéressante, nous accepterons <em>soit</em> une entrée micro, soit un fichier téléchargé.</p> <p data-svelte-h="svelte-1x985e1">Comme d’habitude, nous allons charger notre modèle de reconnaissance vocale en utilisant la fonction <code>pipeline()</code> de 🤗 <em>Transformers</em>. | |
| Si vous avez besoin d’un rafraîchissement rapide, vous pouvez revenir à <a href="/course/fr/chapter1/3">cette section du chapitre 1</a>. Ensuite, nous allons implémenter une fonction <code>transcribe_audio()</code> qui traite l’audio et retourne la transcription (en anglais). Enfin, nous allons envelopper cette fonction dans une <code>Interface</code> avec les composants <code>Audio</code> pour les entrées et juste le texte pour la sortie. Au total, le code de cette application est le suivant :</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> transformers <span class="hljs-keyword">import</span> pipeline | |
| <span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr | |
| model = pipeline(<span class="hljs-string">"automatic-speech-recognition"</span>) | |
| <span class="hljs-keyword">def</span> <span class="hljs-title function_">transcribe_audio</span>(<span class="hljs-params">mic=<span class="hljs-literal">None</span>, file=<span class="hljs-literal">None</span></span>): | |
| <span class="hljs-keyword">if</span> mic <span class="hljs-keyword">is</span> <span class="hljs-keyword">not</span> <span class="hljs-literal">None</span>: | |
| audio = mic | |
| <span class="hljs-keyword">elif</span> file <span class="hljs-keyword">is</span> <span class="hljs-keyword">not</span> <span class="hljs-literal">None</span>: | |
| audio = file | |
| <span class="hljs-keyword">else</span>: | |
| <span class="hljs-keyword">return</span> <span class="hljs-string">"You must either provide a mic recording or a file"</span> | |
| transcription = model(audio)[<span class="hljs-string">"text"</span>] | |
| <span class="hljs-keyword">return</span> transcription | |
| gr.Interface( | |
| fn=transcribe_audio, | |
| inputs=[ | |
| gr.Audio(source=<span class="hljs-string">"microphone"</span>, <span class="hljs-built_in">type</span>=<span class="hljs-string">"filepath"</span>, optional=<span class="hljs-literal">True</span>), | |
| gr.Audio(source=<span class="hljs-string">"upload"</span>, <span class="hljs-built_in">type</span>=<span class="hljs-string">"filepath"</span>, optional=<span class="hljs-literal">True</span>), | |
| ], | |
| outputs=<span class="hljs-string">"text"</span>, | |
| ).launch()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-14izswp">Si votre navigateur ne vous demande pas l’autorisation pour accéder au microphone, <a href="https://huggingface.co/spaces/course-demos/audio-reverse" target="_blank">ouvrez la démo dans un onglet séparé</a>.</p> <iframe src="https://course-demos-asr.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-1b6901k">Voilà, c’est fait ! Vous pouvez maintenant utiliser cette interface pour transcrire de l’audio. Remarquez ici qu’en passant le paramètre <code>optional</code> à <code>True</code>, nous permettons à l’utilisateur de soit fournir un microphone ou un fichier audio (ou aucun des deux, mais cela retournera un message d’erreur).</p> <p data-svelte-h="svelte-rm725e">Continuez pour voir comment partager votre interface avec d’autres !</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/3.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, 72], | |
| data, | |
| form: null, | |
| error: null | |
| }); | |
| }); | |
| } | |
| </script> | |
Xet Storage Details
- Size:
- 31.6 kB
- Xet hash:
- 71775df12bd5014e637e78d8a861387ca5b627a8e6748d327d0d7e924b53e671
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.