import{S as Nu,i as Fu,s as Vu,e as l,k as c,w,t as o,M as Gu,c as n,d as s,m as d,a as r,x as E,h as a,b as p,N as Us,G as t,g as u,y as k,q,o as y,B as j,v as Hu}from"../../chunks/vendor-hf-doc-builder.js";import{T as Uu}from"../../chunks/Tip-hf-doc-builder.js";import{I as Je}from"../../chunks/IconCopyLink-hf-doc-builder.js";import{C as Js}from"../../chunks/CodeBlock-hf-doc-builder.js";import{D as Ju}from"../../chunks/DocNotebookDropdown-hf-doc-builder.js";function Wu(Ws){let x,I,$,C;return{c(){x=o("\u{1F64B}Si vous n'\xEAtes pas familier avec l'instruction `with` en Python, nous vous recommandons de consulter l'excellent "),I=l("a"),$=o("tutoriel"),C=o(" de Real Python. Revenez ici apr\xE8s l'avoir lu \u{1F917}"),this.h()},l(v){x=a(v,"\u{1F64B}Si vous n'\xEAtes pas familier avec l'instruction `with` en Python, nous vous recommandons de consulter l'excellent "),I=n(v,"A",{href:!0});var _=r(I);$=a(_,"tutoriel"),_.forEach(s),C=a(v," de Real Python. Revenez ici apr\xE8s l'avoir lu \u{1F917}"),this.h()},h(){p(I,"href","https://realpython.com/python-with-statement/")},m(v,_){u(v,x,_),u(v,I,_),t(I,$),u(v,C,_)},d(v){v&&s(x),v&&s(I),v&&s(C)}}}function Qu(Ws){let x,I,$,C,v,_,aa,We,la,mt,na,Qs,je,Ks,O,ra,ft,ia,ua,vt,pa,ca,ht,da,ma,Xs,V,fa,xt,va,ha,_t,xa,_a,Ys,re,gt,$e,ga,bt,ba,wa,Ea,wt,X,ka,Et,qa,ya,kt,ja,$a,Zs,Y,ie,qt,Ce,Ca,ze,za,yt,Pa,Da,eo,A,Ba,jt,Ta,Ia,$t,Oa,Aa,Ct,La,Sa,to,L,zt,Ma,Ra,Pt,Na,Fa,Dt,Va,Ga,Bt,Ha,so,Qe,Ua,oo,Z,ue,Tt,Pe,Ja,Ke,Wa,It,Qa,ao,S,Ka,Ot,Xa,Ya,At,Za,el,Lt,tl,sl,lo,De,no,z,Nr,ro,pe,ol,St,al,ll,io,Xe,ee,nl,Mt,rl,il,Rt,ul,pl,uo,ce,po,Ye,cl,co,te,Nt,Be,dl,Ft,ml,fl,vl,Vt,Te,hl,Gt,xl,_l,mo,G,Ze,Ht,gl,bl,wl,et,Ut,El,kl,ql,m,Jt,yl,jl,$l,Cl,Wt,zl,Pl,Qt,Dl,Bl,Kt,Tl,Il,Xt,Ol,Al,Yt,Ll,Sl,Zt,Ml,Rl,es,Nl,Fl,Ie,Vl,Gl,ts,Hl,Ul,fo,Oe,M,ss,Jl,Wl,os,Ql,Kl,as,Xl,Yl,ls,Zl,en,vo,se,de,ns,Ae,tn,rs,sn,ho,g,on,is,an,ln,us,nn,rn,ps,un,pn,cs,cn,dn,xo,R,mn,ds,fn,vn,ms,hn,xn,Le,_n,gn,_o,N,bn,fs,wn,En,vs,kn,qn,hs,yn,jn,go,H,$n,xs,Cn,zn,_s,Pn,Dn,bo,Se,wo,P,Fr,Eo,me,Bn,gs,Tn,In,ko,oe,fe,bs,Me,On,ws,An,qo,ve,Ln,Es,Sn,Mn,yo,b,Rn,ks,Nn,Fn,qs,Vn,Gn,ys,Hn,Un,js,Jn,Wn,jo,U,Qn,$s,Kn,Xn,Cs,Yn,Zn,$o,J,tt,zs,er,tr,sr,he,Ps,or,ar,Ds,lr,nr,rr,st,Bs,ir,ur,Co,ot,pr,zo,Re,Po,D,Vr,Do,ae,xe,Ts,Ne,cr,Is,dr,Bo,W,mr,Os,fr,vr,As,hr,xr,To,Fe,Io,B,Gr,Oo,le,_e,Ls,Ve,_r,Ss,gr,Ao,ge,br,Ms,wr,Er,Lo,at,kr,So,Ge,Mo,T,Hr,Ro,h,qr,Rs,yr,jr,Ns,$r,Cr,Fs,zr,Pr,Vs,Dr,Br,He,Gs,Tr,Ir,No;return _=new Je({}),je=new Ju({props:{classNames:"absolute z-10 right-0 top-0",options:[{label:"Google Colab",value:"https://colab.research.google.com/github/huggingface/notebooks/blob/master/course/chapter9/section7.ipynb"},{label:"Aws Studio",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/chapter9/section7.ipynb"}]}}),Ce=new Je({}),Pe=new Je({}),De=new Js({props:{code:`import gradio as gr


def flip_text(x):
    return x[::-1]


demo = gr.Blocks()

with demo:
    gr.Markdown(
        """
    # Flip Text!
    Start typing below to see the output.
    """
    )
    input = gr.Textbox(placeholder="Flip this text")
    output = gr.Textbox()

    input.change(fn=flip_text, inputs=input, outputs=output)

demo.launch()`,highlighted:`<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_">flip_text</span>(<span class="hljs-params">x</span>):
    <span class="hljs-keyword">return</span> x[::-<span class="hljs-number">1</span>]


demo = gr.Blocks()

<span class="hljs-keyword">with</span> demo:
    gr.Markdown(
        <span class="hljs-string">&quot;&quot;&quot;
    # Flip Text!
    Start typing below to see the output.
    &quot;&quot;&quot;</span>
    )
    <span class="hljs-built_in">input</span> = gr.Textbox(placeholder=<span class="hljs-string">&quot;Flip this text&quot;</span>)
    output = gr.Textbox()

    <span class="hljs-built_in">input</span>.change(fn=flip_text, inputs=<span class="hljs-built_in">input</span>, outputs=output)

demo.launch()`}}),ce=new Uu({props:{$$slots:{default:[Wu]},$$scope:{ctx:Ws}}}),Ae=new Je({}),Se=new Js({props:{code:`import numpy as np
import gradio as gr

demo = gr.Blocks()


def flip_text(x):
    return x[::-1]


def flip_image(x):
    return np.fliplr(x)


with demo:
    gr.Markdown("Flip text or image files using this demo.")
    with gr.Tabs():
        with gr.TabItem("Flip Text"):
            with gr.Row():
                text_input = gr.Textbox()
                text_output = gr.Textbox()
            text_button = gr.Button("Flip")
        with gr.TabItem("Flip Image"):
            with gr.Row():
                image_input = gr.Image()
                image_output = gr.Image()
            image_button = gr.Button("Flip")

    text_button.click(flip_text, inputs=text_input, outputs=text_output)
    image_button.click(flip_image, inputs=image_input, outputs=image_output)

demo.launch()`,highlighted:`<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

demo = gr.Blocks()


<span class="hljs-keyword">def</span> <span class="hljs-title function_">flip_text</span>(<span class="hljs-params">x</span>):
    <span class="hljs-keyword">return</span> x[::-<span class="hljs-number">1</span>]


<span class="hljs-keyword">def</span> <span class="hljs-title function_">flip_image</span>(<span class="hljs-params">x</span>):
    <span class="hljs-keyword">return</span> np.fliplr(x)


<span class="hljs-keyword">with</span> demo:
    gr.Markdown(<span class="hljs-string">&quot;Flip text or image files using this demo.&quot;</span>)
    <span class="hljs-keyword">with</span> gr.Tabs():
        <span class="hljs-keyword">with</span> gr.TabItem(<span class="hljs-string">&quot;Flip Text&quot;</span>):
            <span class="hljs-keyword">with</span> gr.Row():
                text_input = gr.Textbox()
                text_output = gr.Textbox()
            text_button = gr.Button(<span class="hljs-string">&quot;Flip&quot;</span>)
        <span class="hljs-keyword">with</span> gr.TabItem(<span class="hljs-string">&quot;Flip Image&quot;</span>):
            <span class="hljs-keyword">with</span> gr.Row():
                image_input = gr.Image()
                image_output = gr.Image()
            image_button = gr.Button(<span class="hljs-string">&quot;Flip&quot;</span>)

    text_button.click(flip_text, inputs=text_input, outputs=text_output)
    image_button.click(flip_image, inputs=image_input, outputs=image_output)

demo.launch()`}}),Me=new Je({}),Re=new Js({props:{code:`import gradio as gr

api = gr.Interface.load("huggingface/EleutherAI/gpt-j-6B")


def complete_with_gpt(text):
    # Utilise les 50 derniers caract\xE8res du texte comme contexte.
    return text[:-50] + api(text[-50:])


with gr.Blocks() as demo:
    textbox = gr.Textbox(placeholder="Type here and press enter...", lines=4)
    btn = gr.Button("Generate")

    btn.click(complete_with_gpt, textbox, textbox)

demo.launch()`,highlighted:`<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr

api = gr.Interface.load(<span class="hljs-string">&quot;huggingface/EleutherAI/gpt-j-6B&quot;</span>)


<span class="hljs-keyword">def</span> <span class="hljs-title function_">complete_with_gpt</span>(<span class="hljs-params">text</span>):
    <span class="hljs-comment"># Utilise les 50 derniers caract\xE8res du texte comme contexte.</span>
    <span class="hljs-keyword">return</span> text[:-<span class="hljs-number">50</span>] + api(text[-<span class="hljs-number">50</span>:])


<span class="hljs-keyword">with</span> gr.Blocks() <span class="hljs-keyword">as</span> demo:
    textbox = gr.Textbox(placeholder=<span class="hljs-string">&quot;Type here and press enter...&quot;</span>, lines=<span class="hljs-number">4</span>)
    btn = gr.Button(<span class="hljs-string">&quot;Generate&quot;</span>)

    btn.click(complete_with_gpt, textbox, textbox)

demo.launch()`}}),Ne=new Je({}),Fe=new Js({props:{code:`from transformers import pipeline

import gradio as gr

asr = pipeline("automatic-speech-recognition", "facebook/wav2vec2-base-960h")
classifier = pipeline("text-classification")


def speech_to_text(speech):
    text = asr(speech)["text"]
    return text


def text_to_sentiment(text):
    return classifier(text)[0]["label"]


demo = gr.Blocks()

with demo:
    audio_file = gr.Audio(type="filepath")
    text = gr.Textbox()
    label = gr.Label()

    b1 = gr.Button("Recognize Speech")
    b2 = gr.Button("Classify Sentiment")

    b1.click(speech_to_text, inputs=audio_file, outputs=text)
    b2.click(text_to_sentiment, inputs=text, outputs=label)

demo.launch()`,highlighted:`<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

asr = pipeline(<span class="hljs-string">&quot;automatic-speech-recognition&quot;</span>, <span class="hljs-string">&quot;facebook/wav2vec2-base-960h&quot;</span>)
classifier = pipeline(<span class="hljs-string">&quot;text-classification&quot;</span>)


<span class="hljs-keyword">def</span> <span class="hljs-title function_">speech_to_text</span>(<span class="hljs-params">speech</span>):
    text = asr(speech)[<span class="hljs-string">&quot;text&quot;</span>]
    <span class="hljs-keyword">return</span> text


<span class="hljs-keyword">def</span> <span class="hljs-title function_">text_to_sentiment</span>(<span class="hljs-params">text</span>):
    <span class="hljs-keyword">return</span> classifier(text)[<span class="hljs-number">0</span>][<span class="hljs-string">&quot;label&quot;</span>]


demo = gr.Blocks()

<span class="hljs-keyword">with</span> demo:
    audio_file = gr.Audio(<span class="hljs-built_in">type</span>=<span class="hljs-string">&quot;filepath&quot;</span>)
    text = gr.Textbox()
    label = gr.Label()

    b1 = gr.Button(<span class="hljs-string">&quot;Recognize Speech&quot;</span>)
    b2 = gr.Button(<span class="hljs-string">&quot;Classify Sentiment&quot;</span>)

    b1.click(speech_to_text, inputs=audio_file, outputs=text)
    b2.click(text_to_sentiment, inputs=text, outputs=label)

demo.launch()`}}),Ve=new Je({}),Ge=new Js({props:{code:`import gradio as gr


def change_textbox(choice):
    if choice == "short":
        return gr.Textbox.update(lines=2, visible=True)
    elif choice == "long":
        return gr.Textbox.update(lines=8, visible=True)
    else:
        return gr.Textbox.update(visible=False)


with gr.Blocks() as block:
    radio = gr.Radio(
        ["short", "long", "none"], label="What kind of essay would you like to write?"
    )
    text = gr.Textbox(lines=2, interactive=True)

    radio.change(fn=change_textbox, inputs=radio, outputs=text)
    block.launch()`,highlighted:`<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_">change_textbox</span>(<span class="hljs-params">choice</span>):
    <span class="hljs-keyword">if</span> choice == <span class="hljs-string">&quot;short&quot;</span>:
        <span class="hljs-keyword">return</span> gr.Textbox.update(lines=<span class="hljs-number">2</span>, visible=<span class="hljs-literal">True</span>)
    <span class="hljs-keyword">elif</span> choice == <span class="hljs-string">&quot;long&quot;</span>:
        <span class="hljs-keyword">return</span> gr.Textbox.update(lines=<span class="hljs-number">8</span>, visible=<span class="hljs-literal">True</span>)
    <span class="hljs-keyword">else</span>:
        <span class="hljs-keyword">return</span> gr.Textbox.update(visible=<span class="hljs-literal">False</span>)


<span class="hljs-keyword">with</span> gr.Blocks() <span class="hljs-keyword">as</span> block:
    radio = gr.Radio(
        [<span class="hljs-string">&quot;short&quot;</span>, <span class="hljs-string">&quot;long&quot;</span>, <span class="hljs-string">&quot;none&quot;</span>], label=<span class="hljs-string">&quot;What kind of essay would you like to write?&quot;</span>
    )
    text = gr.Textbox(lines=<span class="hljs-number">2</span>, interactive=<span class="hljs-literal">True</span>)

    radio.change(fn=change_textbox, inputs=radio, outputs=text)
    block.launch()`}}),{c(){x=l("meta"),I=c(),$=l("h1"),C=l("a"),v=l("span"),w(_.$$.fragment),aa=c(),We=l("span"),la=o("Introduction \xE0 la classe "),mt=l("i"),na=o("Blocks"),Qs=c(),w(je.$$.fragment),Ks=c(),O=l("p"),ra=o("Dans les sections pr\xE9c\xE9dentes, nous avons explor\xE9 et cr\xE9\xE9 des d\xE9mos en utilisant la classe "),ft=l("code"),ia=o("Interface"),ua=o(". Dans cette section, nous allons pr\xE9senter une "),vt=l("strong"),pa=o("nouvelle"),ca=o(" API de bas niveau appel\xE9e "),ht=l("code"),da=o("gradio.Blocks"),ma=o("."),Xs=c(),V=l("p"),fa=o("Quelle est la diff\xE9rence entre "),xt=l("code"),va=o("Interface"),ha=o(" et "),_t=l("code"),xa=o("Blocks"),_a=o(" ?"),Ys=c(),re=l("ul"),gt=l("li"),$e=l("p"),ga=o("\u26A1 "),bt=l("code"),ba=o("Interface"),wa=o(" : une API de haut niveau qui vous permet de cr\xE9er une d\xE9mo compl\xE8te d\u2019apprentissage automatique simplement en fournissant une liste d\u2019entr\xE9es et de sorties."),Ea=c(),wt=l("li"),X=l("p"),ka=o("\u{1F9F1} "),Et=l("code"),qa=o("Blocks"),ya=o(" : une API de bas niveau qui vous permet d\u2019avoir un contr\xF4le total sur les flux de donn\xE9es et la disposition de votre application. Vous pouvez construire des applications tr\xE8s complexes, en plusieurs \xE9tapes, en utilisant "),kt=l("code"),ja=o("Blocks"),$a=o("."),Zs=c(),Y=l("h3"),ie=l("a"),qt=l("span"),w(Ce.$$.fragment),Ca=c(),ze=l("span"),za=o("Pourquoi "),yt=l("i"),Pa=o("Blocks"),Da=o(" \u{1F9F1} ?"),eo=c(),A=l("p"),Ba=o("Comme nous l\u2019avons vu dans les sections pr\xE9c\xE9dentes, la classe "),jt=l("code"),Ta=o("Interface"),Ia=o(" vous permet de cr\xE9er facilement des d\xE9mos d\u2019apprentissage automatique \xE0 part enti\xE8re avec seulement quelques lignes de code. L\u2019API "),$t=l("code"),Oa=o("Interface"),Aa=o(" est extr\xEAmement facile \xE0 utiliser, mais elle n\u2019a pas la flexibilit\xE9 qu\u2019offre l\u2019API "),Ct=l("code"),La=o("Blocks"),Sa=o(". Par exemple, vous pourriez vouloir :"),to=c(),L=l("ul"),zt=l("li"),Ma=o("regrouper des d\xE9mos connexes sous forme d\u2019onglets multiples dans une application web,"),Ra=c(),Pt=l("li"),Na=o("modifier la mise en page de votre d\xE9mo, par exemple pour sp\xE9cifier l\u2019emplacement des entr\xE9es et des sorties,"),Fa=c(),Dt=l("li"),Va=o("disposer d\u2019interfaces multi-\xE9tapes dans lesquelles la sortie d\u2019un mod\xE8le devient l\u2019entr\xE9e du mod\xE8le suivant ou avoir des flux de donn\xE9es plus flexibles en g\xE9n\xE9ral,"),Ga=c(),Bt=l("li"),Ha=o("modifier les propri\xE9t\xE9s d\u2019un composant (par exemple, les choix dans une liste d\xE9roulante) ou sa visibilit\xE9 en fonction des entr\xE9es de l\u2019utilisateur."),so=c(),Qe=l("p"),Ua=o("Nous allons explorer tous ces concepts ci-dessous."),oo=c(),Z=l("h3"),ue=l("a"),Tt=l("span"),w(Pe.$$.fragment),Ja=c(),Ke=l("span"),Wa=o("Cr\xE9ation d'une d\xE9mo simple en utilisant "),It=l("i"),Qa=o("Blocks"),ao=c(),S=l("p"),Ka=o("Apr\xE8s avoir install\xE9 "),Ot=l("em"),Xa=o("Gradio"),Ya=o(", ex\xE9cutez le code ci-dessous sous forme de script Python, de "),At=l("em"),Za=o("notebook"),el=o(" Jupyter ou de "),Lt=l("em"),tl=o("notebook"),sl=o(" Colab."),lo=c(),w(De.$$.fragment),no=c(),z=l("iframe"),ro=c(),pe=l("p"),ol=o("Ce simple exemple ci-dessus introduit 4 concepts qui sous-tendent les "),St=l("em"),al=o("Blocks"),ll=o(" :"),io=c(),Xe=l("ol"),ee=l("li"),nl=o("Les "),Mt=l("em"),rl=o("Blocks"),il=o(" vous permettent de construire des applications web qui combinent Markdown, HTML, boutons et composants interactifs simplement en instanciant des objets en Python dans un contexte "),Rt=l("code"),ul=o("with gradio.Blocks"),pl=o("."),uo=c(),w(ce.$$.fragment),po=c(),Ye=l("p"),cl=o("L\u2019ordre dans lequel vous instanciez les composants est important car chaque \xE9l\xE9ment est restitu\xE9 dans l\u2019application Web dans l\u2019ordre o\xF9 il a \xE9t\xE9 cr\xE9\xE9. (Les mises en page plus complexes sont abord\xE9es ci-dessous)"),co=c(),te=l("ol"),Nt=l("li"),Be=l("p"),dl=o("Vous pouvez d\xE9finir des fonctions Python ordinaires n\u2019importe o\xF9 dans votre code et les ex\xE9cuter avec des entr\xE9es utilisateur en utilisant les "),Ft=l("code"),ml=o("Blocks"),fl=o(". Dans notre exemple, nous avons une fonction simple qui inverse le texte entr\xE9 mais vous pouvez \xE9crire n\u2019importe quelle fonction Python, du simple calcul au traitement des pr\xE9dictions d\u2019un mod\xE8le d\u2019apprentissage automatique."),vl=c(),Vt=l("li"),Te=l("p"),hl=o("Vous pouvez assigner des \xE9v\xE9nements \xE0 n\u2019importe quel composant "),Gt=l("code"),xl=o("Blocks"),_l=o(". Ainsi, votre fonction sera ex\xE9cut\xE9e lorsque le composant sera cliqu\xE9, modifi\xE9, etc. Lorsque vous assignez un \xE9v\xE9nement, vous passez trois param\xE8tres :"),mo=c(),G=l("ul"),Ze=l("li"),Ht=l("code"),gl=o("fn"),bl=o(" : la fonction qui doit \xEAtre appel\xE9e,"),wl=c(),et=l("li"),Ut=l("code"),El=o("inputs"),kl=o(" : la (liste) des composants d\u2019entr\xE9e"),ql=c(),m=l("li"),Jt=l("code"),yl=o("outputs"),jl=o(" : la (liste) des composants de sortie qui doivent \xEAtre appel\xE9s."),$l=l("br"),Cl=o(`
Dans l\u2019exemple ci-dessus, nous ex\xE9cutons la fonction `),Wt=l("code"),zl=o("flip_text()"),Pl=o(" lorsque la valeur de la "),Qt=l("code"),Dl=o("Textbox"),Bl=o(" nomm\xE9e input "),Kt=l("code"),Tl=o("input"),Il=o(" change. L\u2019\xE9v\xE9nement lit la valeur dans "),Xt=l("code"),Ol=o("input"),Al=o(", la passe comme param\xE8tre de nom \xE0 "),Yt=l("code"),Ll=o("flip_text()"),Sl=o(", qui renvoie alors une valeur qui est assign\xE9e \xE0 notre seconde "),Zt=l("code"),Ml=o("Textbox"),Rl=o(" nomm\xE9e "),es=l("code"),Nl=o("output"),Fl=o(`.
Pour voir la liste des \xE9v\xE9nements que chaque composant supporte, consultez la `),Ie=l("a"),Vl=o("documentation"),Gl=o(" de "),ts=l("em"),Hl=o("Gradio"),Ul=o("."),fo=c(),Oe=l("ol"),M=l("li"),ss=l("em"),Jl=o("Blocks"),Wl=o(" d\xE9termine automatiquement si un composant doit \xEAtre interactif (accepter les entr\xE9es de l\u2019utilisateur) ou non, en fonction des d\xE9clencheurs d\u2019\xE9v\xE9nements que vous d\xE9finissez. Dans notre exemple, la premi\xE8re zone de texte est interactive, puisque sa valeur est utilis\xE9e par la fonction "),os=l("code"),Ql=o("flip_text()"),Kl=o(". La deuxi\xE8me zone de texte n\u2019est pas interactive, puisque sa valeur n\u2019est jamais utilis\xE9e comme entr\xE9e. Dans certains cas, vous voudrez peut-\xEAtre passer outre, ce que vous pouvez faire en passant un bool\xE9en au param\xE8tre "),as=l("code"),Xl=o("interactive"),Yl=o(" du composant (par exemple, "),ls=l("code"),Zl=o('gr.Textbox(placeholder="Flip this text", interactive=True)'),en=o(")."),vo=c(),se=l("h3"),de=l("a"),ns=l("span"),w(Ae.$$.fragment),tn=c(),rs=l("span"),sn=o("Personnaliser la mise en page de votre d\xE9mo"),ho=c(),g=l("p"),on=o("Comment pouvons-nous utiliser "),is=l("code"),an=o("Blocks"),ln=o(" pour personnaliser la mise en page de notre d\xE9mo ? Par d\xE9faut, "),us=l("code"),nn=o("Blocks"),rn=o(" affiche verticalement dans une colonne les composants que vous cr\xE9ez. Vous pouvez changer cela en cr\xE9ant des colonnes suppl\xE9mentaires "),ps=l("code"),un=o("avec gradio.Column():"),pn=o(" ou des lignes "),cs=l("code"),cn=o("avec gradio.Row():"),dn=o(" et en cr\xE9ant des composants dans ces contextes."),xo=c(),R=l("p"),mn=o("Voici ce que vous devez garder \xE0 l\u2019esprit : tout composant cr\xE9\xE9 sous une "),ds=l("code"),fn=o("Column"),vn=o(" (c\u2019est aussi le d\xE9faut) sera dispos\xE9 verticalement. Tout composant cr\xE9\xE9 sous une "),ms=l("code"),hn=o("Row"),xn=o(" sera dispos\xE9 horizontalement, comme le "),Le=l("a"),_n=o("mod\xE8le flexbox dans le d\xE9veloppement web"),gn=o("."),_o=c(),N=l("p"),bn=o("Enfin, vous pouvez \xE9galement cr\xE9er des onglets pour votre d\xE9mo en utilisant le gestionnaire de contexte "),fs=l("code"),wn=o("with gradio.Tabs()"),En=o(". Dans ce contexte, vous pouvez cr\xE9er plusieurs onglets en sp\xE9cifiant des enfants "),vs=l("code"),kn=o("with gradio.TabItem(name_of_tab):"),qn=o(". Tout composant cr\xE9\xE9 dans un contexte "),hs=l("code"),yn=o("with gradio.TabItem(name_of_tab):"),jn=o(" appara\xEEt dans cet onglet."),go=c(),H=l("p"),$n=o("Maintenant, ajoutons une fonction "),xs=l("code"),Cn=o("flip_image()"),zn=o(" \xE0 notre d\xE9mo et ajoutons un nouvel onglet qui retourne les images. Vous trouverez ci-dessous un exemple avec 2 onglets et utilisant \xE9galement une "),_s=l("code"),Pn=o("Row"),Dn=o(" :"),bo=c(),w(Se.$$.fragment),wo=c(),P=l("iframe"),Eo=c(),me=l("p"),Bn=o("Vous remarquerez que dans cet exemple, nous avons \xE9galement cr\xE9\xE9 un composant "),gs=l("code"),Tn=o("Button"),In=o(" dans chaque onglet et avons assign\xE9 un \xE9v\xE9nement de clic \xE0 chaque bouton qui est l\u2019\xE9l\xE9ment qui ex\xE9cute r\xE9ellement la fonction."),ko=c(),oe=l("h3"),fe=l("a"),bs=l("span"),w(Me.$$.fragment),On=c(),ws=l("span"),An=o("Exploration des \xE9v\xE9nements et de l'\xE9tat"),qo=c(),ve=l("p"),Ln=o("De la m\xEAme mani\xE8re que vous pouvez contr\xF4ler la mise en page, "),Es=l("code"),Sn=o("Blocks"),Mn=o(" vous donne un contr\xF4le fin sur les \xE9v\xE9nements qui d\xE9clenchent les appels de fonction. Chaque composant et de nombreux layouts ont des \xE9v\xE9nements sp\xE9cifiques qu\u2019ils supportent."),yo=c(),b=l("p"),Rn=o("Par exemple, le composant "),ks=l("code"),Nn=o("Textbox"),Fn=o(" a 2 \xE9v\xE9nements : "),qs=l("code"),Vn=o("change()"),Gn=o(" (lorsque la valeur contenue dans la zone de texte change), et "),ys=l("code"),Hn=o("submit()"),Un=o(" (lorsqu\u2019un utilisateur appuie sur la touche Entr\xE9e alors qu\u2019il est concentr\xE9 sur la zone de texte). Les composants plus complexes peuvent avoir encore plus d\u2019\xE9v\xE9nements : par exemple, le composant "),js=l("code"),Jn=o("Audio"),Wn=o(" a aussi des \xE9v\xE9nements s\xE9par\xE9s pour quand le fichier audio est jou\xE9, effac\xE9, mis en pause, etc. Consultez la documentation pour conna\xEEtre les \xE9v\xE9nements pris en charge par chaque composant."),jo=c(),U=l("p"),Qn=o("Vous pouvez attacher un d\xE9clencheur d\u2019\xE9v\xE9nement \xE0 aucun, un ou plusieurs de ces \xE9v\xE9nements. Vous cr\xE9ez un d\xE9clencheur d\u2019\xE9v\xE9nement en appelant le nom de l\u2019\xE9v\xE9nement sur l\u2019instance du composant comme une fonction. Par exemple, "),$s=l("code"),Kn=o("textbox.change(...)"),Xn=o(" ou "),Cs=l("code"),Yn=o("btn.click(...)"),Zn=o(". La fonction prend trois param\xE8tres, comme indiqu\xE9 ci-dessus :"),$o=c(),J=l("ul"),tt=l("li"),zs=l("code"),er=o("fn"),tr=o(" : la fonction \xE0 ex\xE9cuter"),sr=c(),he=l("li"),Ps=l("code"),or=o("inputs"),ar=o(" : une (liste de) composante(s) dont les valeurs doivent \xEAtre fournies comme param\xE8tres d\u2019entr\xE9e \xE0 la fonction. La valeur de chaque composant est mise en correspondance avec le param\xE8tre de fonction correspondant, dans l\u2019ordre. Ce param\xE8tre peut \xEAtre "),Ds=l("code"),lr=o("None"),nr=o(" si la fonction ne prend aucun param\xE8tre."),rr=c(),st=l("li"),Bs=l("code"),ir=o("outputs"),ur=o(" : un (liste de) composant(s) dont les valeurs doivent \xEAtre mises \xE0 jour en fonction des valeurs retourn\xE9es par la fonction. Chaque valeur de retour met \xE0 jour la valeur du composant correspondant, dans l\u2019ordre. Ce param\xE8tre peut \xEAtre None si la fonction ne retourne rien."),Co=c(),ot=l("p"),pr=o("Vous pouvez m\xEAme faire en sorte que le composant d\u2019entr\xE9e et de sortie soit le m\xEAme composant, comme nous le faisons dans cet exemple qui utilise un mod\xE8le GPT pour compl\xE9ter du texte :"),zo=c(),w(Re.$$.fragment),Po=c(),D=l("iframe"),Do=c(),ae=l("h3"),xe=l("a"),Ts=l("span"),w(Ne.$$.fragment),cr=c(),Is=l("span"),dr=o("Cr\xE9ation de d\xE9mos multi-\xE9tapes"),Bo=c(),W=l("p"),mr=o("Dans certains cas, vous pouvez vouloir une "),Os=l("em"),fr=o("d\xE9mo multi-\xE9tapes"),vr=o(", dans laquelle vous r\xE9utilisez la sortie d\u2019une fonction comme entr\xE9e de la suivante. C\u2019est tr\xE8s facile \xE0 faire avec les "),As=l("code"),hr=o("Blocks"),xr=o(", car vous pouvez utiliser un composant pour l\u2019entr\xE9e d\u2019un d\xE9clencheur d\u2019\xE9v\xE9nement mais la sortie d\u2019un autre. Regardez le composant texte dans l\u2019exemple ci-dessous, sa valeur est le r\xE9sultat d\u2019un mod\xE8le de conversion de la parole en texte, mais il est \xE9galement transmis \xE0 un mod\xE8le d\u2019analyse des sentiments :"),To=c(),w(Fe.$$.fragment),Io=c(),B=l("iframe"),Oo=c(),le=l("h3"),_e=l("a"),Ls=l("span"),w(Ve.$$.fragment),_r=c(),Ss=l("span"),gr=o("Mise \xE0 jour des propri\xE9t\xE9s des composants"),Ao=c(),ge=l("p"),br=o("Jusqu\u2019\xE0 pr\xE9sent, nous avons vu comment cr\xE9er des \xE9v\xE9nements pour mettre \xE0 jour la valeur d\u2019un autre composant. Mais que se passe-t-il si vous voulez modifier d\u2019autres propri\xE9t\xE9s d\u2019un composant, comme la visibilit\xE9 d\u2019une zone de texte ou les choix dans un groupe de boutons radio ? Vous pouvez le faire en renvoyant la m\xE9thode "),Ms=l("code"),wr=o("update()"),Er=o(" d\u2019une classe de composant au lieu d\u2019une valeur de retour normale de votre fonction."),Lo=c(),at=l("p"),kr=o("L\u2019exemple le plus facile \xE0 illustrer est le suivant :"),So=c(),w(Ge.$$.fragment),Mo=c(),T=l("iframe"),Ro=c(),h=l("p"),qr=o("Nous venons d\u2019explorer tous les concepts de base des "),Rs=l("code"),yr=o("Blocks"),jr=o(" ! Tout comme avec "),Ns=l("code"),$r=o("Interface"),Cr=o(", vous pouvez cr\xE9er des d\xE9mos sympas qui peuvent \xEAtre partag\xE9es en utilisant "),Fs=l("code"),zr=o("share=True"),Pr=o(" dans la m\xE9thode "),Vs=l("code"),Dr=o("launch()"),Br=o(" ou d\xE9ploy\xE9es sur "),He=l("a"),Gs=l("em"),Tr=o("Spaces"),Ir=o("."),this.h()},l(e){const i=Gu('[data-svelte="svelte-1phssyn"]',document.head);x=n(i,"META",{name:!0,content:!0}),i.forEach(s),I=d(e),$=n(e,"H1",{class:!0});var Ue=r($);C=n(Ue,"A",{id:!0,class:!0,href:!0});var Ur=r(C);v=n(Ur,"SPAN",{});var Jr=r(v);E(_.$$.fragment,Jr),Jr.forEach(s),Ur.forEach(s),aa=d(Ue),We=n(Ue,"SPAN",{});var Or=r(We);la=a(Or,"Introduction \xE0 la classe "),mt=n(Or,"I",{});var Wr=r(mt);na=a(Wr,"Blocks"),Wr.forEach(s),Or.forEach(s),Ue.forEach(s),Qs=d(e),E(je.$$.fragment,e),Ks=d(e),O=n(e,"P",{});var be=r(O);ra=a(be,"Dans les sections pr\xE9c\xE9dentes, nous avons explor\xE9 et cr\xE9\xE9 des d\xE9mos en utilisant la classe "),ft=n(be,"CODE",{});var Qr=r(ft);ia=a(Qr,"Interface"),Qr.forEach(s),ua=a(be,". Dans cette section, nous allons pr\xE9senter une "),vt=n(be,"STRONG",{});var Kr=r(vt);pa=a(Kr,"nouvelle"),Kr.forEach(s),ca=a(be," API de bas niveau appel\xE9e "),ht=n(be,"CODE",{});var Xr=r(ht);da=a(Xr,"gradio.Blocks"),Xr.forEach(s),ma=a(be,"."),be.forEach(s),Xs=d(e),V=n(e,"P",{});var lt=r(V);fa=a(lt,"Quelle est la diff\xE9rence entre "),xt=n(lt,"CODE",{});var Yr=r(xt);va=a(Yr,"Interface"),Yr.forEach(s),ha=a(lt," et "),_t=n(lt,"CODE",{});var Zr=r(_t);xa=a(Zr,"Blocks"),Zr.forEach(s),_a=a(lt," ?"),lt.forEach(s),Ys=d(e),re=n(e,"UL",{});var Fo=r(re);gt=n(Fo,"LI",{});var ei=r(gt);$e=n(ei,"P",{});var Vo=r($e);ga=a(Vo,"\u26A1 "),bt=n(Vo,"CODE",{});var ti=r(bt);ba=a(ti,"Interface"),ti.forEach(s),wa=a(Vo," : une API de haut niveau qui vous permet de cr\xE9er une d\xE9mo compl\xE8te d\u2019apprentissage automatique simplement en fournissant une liste d\u2019entr\xE9es et de sorties."),Vo.forEach(s),ei.forEach(s),Ea=d(Fo),wt=n(Fo,"LI",{});var si=r(wt);X=n(si,"P",{});var nt=r(X);ka=a(nt,"\u{1F9F1} "),Et=n(nt,"CODE",{});var oi=r(Et);qa=a(oi,"Blocks"),oi.forEach(s),ya=a(nt," : une API de bas niveau qui vous permet d\u2019avoir un contr\xF4le total sur les flux de donn\xE9es et la disposition de votre application. Vous pouvez construire des applications tr\xE8s complexes, en plusieurs \xE9tapes, en utilisant "),kt=n(nt,"CODE",{});var ai=r(kt);ja=a(ai,"Blocks"),ai.forEach(s),$a=a(nt,"."),nt.forEach(s),si.forEach(s),Fo.forEach(s),Zs=d(e),Y=n(e,"H3",{class:!0});var Go=r(Y);ie=n(Go,"A",{id:!0,class:!0,href:!0});var li=r(ie);qt=n(li,"SPAN",{});var ni=r(qt);E(Ce.$$.fragment,ni),ni.forEach(s),li.forEach(s),Ca=d(Go),ze=n(Go,"SPAN",{});var Ho=r(ze);za=a(Ho,"Pourquoi "),yt=n(Ho,"I",{});var ri=r(yt);Pa=a(ri,"Blocks"),ri.forEach(s),Da=a(Ho," \u{1F9F1} ?"),Ho.forEach(s),Go.forEach(s),eo=d(e),A=n(e,"P",{});var we=r(A);Ba=a(we,"Comme nous l\u2019avons vu dans les sections pr\xE9c\xE9dentes, la classe "),jt=n(we,"CODE",{});var ii=r(jt);Ta=a(ii,"Interface"),ii.forEach(s),Ia=a(we," vous permet de cr\xE9er facilement des d\xE9mos d\u2019apprentissage automatique \xE0 part enti\xE8re avec seulement quelques lignes de code. L\u2019API "),$t=n(we,"CODE",{});var ui=r($t);Oa=a(ui,"Interface"),ui.forEach(s),Aa=a(we," est extr\xEAmement facile \xE0 utiliser, mais elle n\u2019a pas la flexibilit\xE9 qu\u2019offre l\u2019API "),Ct=n(we,"CODE",{});var pi=r(Ct);La=a(pi,"Blocks"),pi.forEach(s),Sa=a(we,". Par exemple, vous pourriez vouloir :"),we.forEach(s),to=d(e),L=n(e,"UL",{});var Ee=r(L);zt=n(Ee,"LI",{});var ci=r(zt);Ma=a(ci,"regrouper des d\xE9mos connexes sous forme d\u2019onglets multiples dans une application web,"),ci.forEach(s),Ra=d(Ee),Pt=n(Ee,"LI",{});var di=r(Pt);Na=a(di,"modifier la mise en page de votre d\xE9mo, par exemple pour sp\xE9cifier l\u2019emplacement des entr\xE9es et des sorties,"),di.forEach(s),Fa=d(Ee),Dt=n(Ee,"LI",{});var mi=r(Dt);Va=a(mi,"disposer d\u2019interfaces multi-\xE9tapes dans lesquelles la sortie d\u2019un mod\xE8le devient l\u2019entr\xE9e du mod\xE8le suivant ou avoir des flux de donn\xE9es plus flexibles en g\xE9n\xE9ral,"),mi.forEach(s),Ga=d(Ee),Bt=n(Ee,"LI",{});var fi=r(Bt);Ha=a(fi,"modifier les propri\xE9t\xE9s d\u2019un composant (par exemple, les choix dans une liste d\xE9roulante) ou sa visibilit\xE9 en fonction des entr\xE9es de l\u2019utilisateur."),fi.forEach(s),Ee.forEach(s),so=d(e),Qe=n(e,"P",{});var vi=r(Qe);Ua=a(vi,"Nous allons explorer tous ces concepts ci-dessous."),vi.forEach(s),oo=d(e),Z=n(e,"H3",{class:!0});var Uo=r(Z);ue=n(Uo,"A",{id:!0,class:!0,href:!0});var hi=r(ue);Tt=n(hi,"SPAN",{});var xi=r(Tt);E(Pe.$$.fragment,xi),xi.forEach(s),hi.forEach(s),Ja=d(Uo),Ke=n(Uo,"SPAN",{});var Ar=r(Ke);Wa=a(Ar,"Cr\xE9ation d'une d\xE9mo simple en utilisant "),It=n(Ar,"I",{});var _i=r(It);Qa=a(_i,"Blocks"),_i.forEach(s),Ar.forEach(s),Uo.forEach(s),ao=d(e),S=n(e,"P",{});var ke=r(S);Ka=a(ke,"Apr\xE8s avoir install\xE9 "),Ot=n(ke,"EM",{});var gi=r(Ot);Xa=a(gi,"Gradio"),gi.forEach(s),Ya=a(ke,", ex\xE9cutez le code ci-dessous sous forme de script Python, de "),At=n(ke,"EM",{});var bi=r(At);Za=a(bi,"notebook"),bi.forEach(s),el=a(ke," Jupyter ou de "),Lt=n(ke,"EM",{});var wi=r(Lt);tl=a(wi,"notebook"),wi.forEach(s),sl=a(ke," Colab."),ke.forEach(s),lo=d(e),E(De.$$.fragment,e),no=d(e),z=n(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),r(z).forEach(s),ro=d(e),pe=n(e,"P",{});var Jo=r(pe);ol=a(Jo,"Ce simple exemple ci-dessus introduit 4 concepts qui sous-tendent les "),St=n(Jo,"EM",{});var Ei=r(St);al=a(Ei,"Blocks"),Ei.forEach(s),ll=a(Jo," :"),Jo.forEach(s),io=d(e),Xe=n(e,"OL",{});var ki=r(Xe);ee=n(ki,"LI",{});var rt=r(ee);nl=a(rt,"Les "),Mt=n(rt,"EM",{});var qi=r(Mt);rl=a(qi,"Blocks"),qi.forEach(s),il=a(rt," vous permettent de construire des applications web qui combinent Markdown, HTML, boutons et composants interactifs simplement en instanciant des objets en Python dans un contexte "),Rt=n(rt,"CODE",{});var yi=r(Rt);ul=a(yi,"with gradio.Blocks"),yi.forEach(s),pl=a(rt,"."),rt.forEach(s),ki.forEach(s),uo=d(e),E(ce.$$.fragment,e),po=d(e),Ye=n(e,"P",{});var ji=r(Ye);cl=a(ji,"L\u2019ordre dans lequel vous instanciez les composants est important car chaque \xE9l\xE9ment est restitu\xE9 dans l\u2019application Web dans l\u2019ordre o\xF9 il a \xE9t\xE9 cr\xE9\xE9. (Les mises en page plus complexes sont abord\xE9es ci-dessous)"),ji.forEach(s),co=d(e),te=n(e,"OL",{start:!0});var Wo=r(te);Nt=n(Wo,"LI",{});var $i=r(Nt);Be=n($i,"P",{});var Qo=r(Be);dl=a(Qo,"Vous pouvez d\xE9finir des fonctions Python ordinaires n\u2019importe o\xF9 dans votre code et les ex\xE9cuter avec des entr\xE9es utilisateur en utilisant les "),Ft=n(Qo,"CODE",{});var Ci=r(Ft);ml=a(Ci,"Blocks"),Ci.forEach(s),fl=a(Qo,". Dans notre exemple, nous avons une fonction simple qui inverse le texte entr\xE9 mais vous pouvez \xE9crire n\u2019importe quelle fonction Python, du simple calcul au traitement des pr\xE9dictions d\u2019un mod\xE8le d\u2019apprentissage automatique."),Qo.forEach(s),$i.forEach(s),vl=d(Wo),Vt=n(Wo,"LI",{});var zi=r(Vt);Te=n(zi,"P",{});var Ko=r(Te);hl=a(Ko,"Vous pouvez assigner des \xE9v\xE9nements \xE0 n\u2019importe quel composant "),Gt=n(Ko,"CODE",{});var Pi=r(Gt);xl=a(Pi,"Blocks"),Pi.forEach(s),_l=a(Ko,". Ainsi, votre fonction sera ex\xE9cut\xE9e lorsque le composant sera cliqu\xE9, modifi\xE9, etc. Lorsque vous assignez un \xE9v\xE9nement, vous passez trois param\xE8tres :"),Ko.forEach(s),zi.forEach(s),Wo.forEach(s),mo=d(e),G=n(e,"UL",{});var it=r(G);Ze=n(it,"LI",{});var Lr=r(Ze);Ht=n(Lr,"CODE",{});var Di=r(Ht);gl=a(Di,"fn"),Di.forEach(s),bl=a(Lr," : la fonction qui doit \xEAtre appel\xE9e,"),Lr.forEach(s),wl=d(it),et=n(it,"LI",{});var Sr=r(et);Ut=n(Sr,"CODE",{});var Bi=r(Ut);El=a(Bi,"inputs"),Bi.forEach(s),kl=a(Sr," : la (liste) des composants d\u2019entr\xE9e"),Sr.forEach(s),ql=d(it),m=n(it,"LI",{});var f=r(m);Jt=n(f,"CODE",{});var Ti=r(Jt);yl=a(Ti,"outputs"),Ti.forEach(s),jl=a(f," : la (liste) des composants de sortie qui doivent \xEAtre appel\xE9s."),$l=n(f,"BR",{}),Cl=a(f,`
Dans l\u2019exemple ci-dessus, nous ex\xE9cutons la fonction `),Wt=n(f,"CODE",{});var Ii=r(Wt);zl=a(Ii,"flip_text()"),Ii.forEach(s),Pl=a(f," lorsque la valeur de la "),Qt=n(f,"CODE",{});var Oi=r(Qt);Dl=a(Oi,"Textbox"),Oi.forEach(s),Bl=a(f," nomm\xE9e input "),Kt=n(f,"CODE",{});var Ai=r(Kt);Tl=a(Ai,"input"),Ai.forEach(s),Il=a(f," change. L\u2019\xE9v\xE9nement lit la valeur dans "),Xt=n(f,"CODE",{});var Li=r(Xt);Ol=a(Li,"input"),Li.forEach(s),Al=a(f,", la passe comme param\xE8tre de nom \xE0 "),Yt=n(f,"CODE",{});var Si=r(Yt);Ll=a(Si,"flip_text()"),Si.forEach(s),Sl=a(f,", qui renvoie alors une valeur qui est assign\xE9e \xE0 notre seconde "),Zt=n(f,"CODE",{});var Mi=r(Zt);Ml=a(Mi,"Textbox"),Mi.forEach(s),Rl=a(f," nomm\xE9e "),es=n(f,"CODE",{});var Ri=r(es);Nl=a(Ri,"output"),Ri.forEach(s),Fl=a(f,`.
Pour voir la liste des \xE9v\xE9nements que chaque composant supporte, consultez la `),Ie=n(f,"A",{href:!0,rel:!0});var Ni=r(Ie);Vl=a(Ni,"documentation"),Ni.forEach(s),Gl=a(f," de "),ts=n(f,"EM",{});var Fi=r(ts);Hl=a(Fi,"Gradio"),Fi.forEach(s),Ul=a(f,"."),f.forEach(s),it.forEach(s),fo=d(e),Oe=n(e,"OL",{start:!0});var Vi=r(Oe);M=n(Vi,"LI",{});var ne=r(M);ss=n(ne,"EM",{});var Gi=r(ss);Jl=a(Gi,"Blocks"),Gi.forEach(s),Wl=a(ne," d\xE9termine automatiquement si un composant doit \xEAtre interactif (accepter les entr\xE9es de l\u2019utilisateur) ou non, en fonction des d\xE9clencheurs d\u2019\xE9v\xE9nements que vous d\xE9finissez. Dans notre exemple, la premi\xE8re zone de texte est interactive, puisque sa valeur est utilis\xE9e par la fonction "),os=n(ne,"CODE",{});var Hi=r(os);Ql=a(Hi,"flip_text()"),Hi.forEach(s),Kl=a(ne,". La deuxi\xE8me zone de texte n\u2019est pas interactive, puisque sa valeur n\u2019est jamais utilis\xE9e comme entr\xE9e. Dans certains cas, vous voudrez peut-\xEAtre passer outre, ce que vous pouvez faire en passant un bool\xE9en au param\xE8tre "),as=n(ne,"CODE",{});var Ui=r(as);Xl=a(Ui,"interactive"),Ui.forEach(s),Yl=a(ne," du composant (par exemple, "),ls=n(ne,"CODE",{});var Ji=r(ls);Zl=a(Ji,'gr.Textbox(placeholder="Flip this text", interactive=True)'),Ji.forEach(s),en=a(ne,")."),ne.forEach(s),Vi.forEach(s),vo=d(e),se=n(e,"H3",{class:!0});var Xo=r(se);de=n(Xo,"A",{id:!0,class:!0,href:!0});var Wi=r(de);ns=n(Wi,"SPAN",{});var Qi=r(ns);E(Ae.$$.fragment,Qi),Qi.forEach(s),Wi.forEach(s),tn=d(Xo),rs=n(Xo,"SPAN",{});var Ki=r(rs);sn=a(Ki,"Personnaliser la mise en page de votre d\xE9mo"),Ki.forEach(s),Xo.forEach(s),ho=d(e),g=n(e,"P",{});var Q=r(g);on=a(Q,"Comment pouvons-nous utiliser "),is=n(Q,"CODE",{});var Xi=r(is);an=a(Xi,"Blocks"),Xi.forEach(s),ln=a(Q," pour personnaliser la mise en page de notre d\xE9mo ? Par d\xE9faut, "),us=n(Q,"CODE",{});var Yi=r(us);nn=a(Yi,"Blocks"),Yi.forEach(s),rn=a(Q," affiche verticalement dans une colonne les composants que vous cr\xE9ez. Vous pouvez changer cela en cr\xE9ant des colonnes suppl\xE9mentaires "),ps=n(Q,"CODE",{});var Zi=r(ps);un=a(Zi,"avec gradio.Column():"),Zi.forEach(s),pn=a(Q," ou des lignes "),cs=n(Q,"CODE",{});var eu=r(cs);cn=a(eu,"avec gradio.Row():"),eu.forEach(s),dn=a(Q," et en cr\xE9ant des composants dans ces contextes."),Q.forEach(s),xo=d(e),R=n(e,"P",{});var qe=r(R);mn=a(qe,"Voici ce que vous devez garder \xE0 l\u2019esprit : tout composant cr\xE9\xE9 sous une "),ds=n(qe,"CODE",{});var tu=r(ds);fn=a(tu,"Column"),tu.forEach(s),vn=a(qe," (c\u2019est aussi le d\xE9faut) sera dispos\xE9 verticalement. Tout composant cr\xE9\xE9 sous une "),ms=n(qe,"CODE",{});var su=r(ms);hn=a(su,"Row"),su.forEach(s),xn=a(qe," sera dispos\xE9 horizontalement, comme le "),Le=n(qe,"A",{href:!0,rel:!0});var ou=r(Le);_n=a(ou,"mod\xE8le flexbox dans le d\xE9veloppement web"),ou.forEach(s),gn=a(qe,"."),qe.forEach(s),_o=d(e),N=n(e,"P",{});var ye=r(N);bn=a(ye,"Enfin, vous pouvez \xE9galement cr\xE9er des onglets pour votre d\xE9mo en utilisant le gestionnaire de contexte "),fs=n(ye,"CODE",{});var au=r(fs);wn=a(au,"with gradio.Tabs()"),au.forEach(s),En=a(ye,". Dans ce contexte, vous pouvez cr\xE9er plusieurs onglets en sp\xE9cifiant des enfants "),vs=n(ye,"CODE",{});var lu=r(vs);kn=a(lu,"with gradio.TabItem(name_of_tab):"),lu.forEach(s),qn=a(ye,". Tout composant cr\xE9\xE9 dans un contexte "),hs=n(ye,"CODE",{});var nu=r(hs);yn=a(nu,"with gradio.TabItem(name_of_tab):"),nu.forEach(s),jn=a(ye," appara\xEEt dans cet onglet."),ye.forEach(s),go=d(e),H=n(e,"P",{});var ut=r(H);$n=a(ut,"Maintenant, ajoutons une fonction "),xs=n(ut,"CODE",{});var ru=r(xs);Cn=a(ru,"flip_image()"),ru.forEach(s),zn=a(ut," \xE0 notre d\xE9mo et ajoutons un nouvel onglet qui retourne les images. Vous trouverez ci-dessous un exemple avec 2 onglets et utilisant \xE9galement une "),_s=n(ut,"CODE",{});var iu=r(_s);Pn=a(iu,"Row"),iu.forEach(s),Dn=a(ut," :"),ut.forEach(s),bo=d(e),E(Se.$$.fragment,e),wo=d(e),P=n(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),r(P).forEach(s),Eo=d(e),me=n(e,"P",{});var Yo=r(me);Bn=a(Yo,"Vous remarquerez que dans cet exemple, nous avons \xE9galement cr\xE9\xE9 un composant "),gs=n(Yo,"CODE",{});var uu=r(gs);Tn=a(uu,"Button"),uu.forEach(s),In=a(Yo," dans chaque onglet et avons assign\xE9 un \xE9v\xE9nement de clic \xE0 chaque bouton qui est l\u2019\xE9l\xE9ment qui ex\xE9cute r\xE9ellement la fonction."),Yo.forEach(s),ko=d(e),oe=n(e,"H3",{class:!0});var Zo=r(oe);fe=n(Zo,"A",{id:!0,class:!0,href:!0});var pu=r(fe);bs=n(pu,"SPAN",{});var cu=r(bs);E(Me.$$.fragment,cu),cu.forEach(s),pu.forEach(s),On=d(Zo),ws=n(Zo,"SPAN",{});var du=r(ws);An=a(du,"Exploration des \xE9v\xE9nements et de l'\xE9tat"),du.forEach(s),Zo.forEach(s),qo=d(e),ve=n(e,"P",{});var ea=r(ve);Ln=a(ea,"De la m\xEAme mani\xE8re que vous pouvez contr\xF4ler la mise en page, "),Es=n(ea,"CODE",{});var mu=r(Es);Sn=a(mu,"Blocks"),mu.forEach(s),Mn=a(ea," vous donne un contr\xF4le fin sur les \xE9v\xE9nements qui d\xE9clenchent les appels de fonction. Chaque composant et de nombreux layouts ont des \xE9v\xE9nements sp\xE9cifiques qu\u2019ils supportent."),ea.forEach(s),yo=d(e),b=n(e,"P",{});var K=r(b);Rn=a(K,"Par exemple, le composant "),ks=n(K,"CODE",{});var fu=r(ks);Nn=a(fu,"Textbox"),fu.forEach(s),Fn=a(K," a 2 \xE9v\xE9nements : "),qs=n(K,"CODE",{});var vu=r(qs);Vn=a(vu,"change()"),vu.forEach(s),Gn=a(K," (lorsque la valeur contenue dans la zone de texte change), et "),ys=n(K,"CODE",{});var hu=r(ys);Hn=a(hu,"submit()"),hu.forEach(s),Un=a(K," (lorsqu\u2019un utilisateur appuie sur la touche Entr\xE9e alors qu\u2019il est concentr\xE9 sur la zone de texte). Les composants plus complexes peuvent avoir encore plus d\u2019\xE9v\xE9nements : par exemple, le composant "),js=n(K,"CODE",{});var xu=r(js);Jn=a(xu,"Audio"),xu.forEach(s),Wn=a(K," a aussi des \xE9v\xE9nements s\xE9par\xE9s pour quand le fichier audio est jou\xE9, effac\xE9, mis en pause, etc. Consultez la documentation pour conna\xEEtre les \xE9v\xE9nements pris en charge par chaque composant."),K.forEach(s),jo=d(e),U=n(e,"P",{});var pt=r(U);Qn=a(pt,"Vous pouvez attacher un d\xE9clencheur d\u2019\xE9v\xE9nement \xE0 aucun, un ou plusieurs de ces \xE9v\xE9nements. Vous cr\xE9ez un d\xE9clencheur d\u2019\xE9v\xE9nement en appelant le nom de l\u2019\xE9v\xE9nement sur l\u2019instance du composant comme une fonction. Par exemple, "),$s=n(pt,"CODE",{});var _u=r($s);Kn=a(_u,"textbox.change(...)"),_u.forEach(s),Xn=a(pt," ou "),Cs=n(pt,"CODE",{});var gu=r(Cs);Yn=a(gu,"btn.click(...)"),gu.forEach(s),Zn=a(pt,". La fonction prend trois param\xE8tres, comme indiqu\xE9 ci-dessus :"),pt.forEach(s),$o=d(e),J=n(e,"UL",{});var ct=r(J);tt=n(ct,"LI",{});var Mr=r(tt);zs=n(Mr,"CODE",{});var bu=r(zs);er=a(bu,"fn"),bu.forEach(s),tr=a(Mr," : la fonction \xE0 ex\xE9cuter"),Mr.forEach(s),sr=d(ct),he=n(ct,"LI",{});var Hs=r(he);Ps=n(Hs,"CODE",{});var wu=r(Ps);or=a(wu,"inputs"),wu.forEach(s),ar=a(Hs," : une (liste de) composante(s) dont les valeurs doivent \xEAtre fournies comme param\xE8tres d\u2019entr\xE9e \xE0 la fonction. La valeur de chaque composant est mise en correspondance avec le param\xE8tre de fonction correspondant, dans l\u2019ordre. Ce param\xE8tre peut \xEAtre "),Ds=n(Hs,"CODE",{});var Eu=r(Ds);lr=a(Eu,"None"),Eu.forEach(s),nr=a(Hs," si la fonction ne prend aucun param\xE8tre."),Hs.forEach(s),rr=d(ct),st=n(ct,"LI",{});var Rr=r(st);Bs=n(Rr,"CODE",{});var ku=r(Bs);ir=a(ku,"outputs"),ku.forEach(s),ur=a(Rr," : un (liste de) composant(s) dont les valeurs doivent \xEAtre mises \xE0 jour en fonction des valeurs retourn\xE9es par la fonction. Chaque valeur de retour met \xE0 jour la valeur du composant correspondant, dans l\u2019ordre. Ce param\xE8tre peut \xEAtre None si la fonction ne retourne rien."),Rr.forEach(s),ct.forEach(s),Co=d(e),ot=n(e,"P",{});var qu=r(ot);pr=a(qu,"Vous pouvez m\xEAme faire en sorte que le composant d\u2019entr\xE9e et de sortie soit le m\xEAme composant, comme nous le faisons dans cet exemple qui utilise un mod\xE8le GPT pour compl\xE9ter du texte :"),qu.forEach(s),zo=d(e),E(Re.$$.fragment,e),Po=d(e),D=n(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),r(D).forEach(s),Do=d(e),ae=n(e,"H3",{class:!0});var ta=r(ae);xe=n(ta,"A",{id:!0,class:!0,href:!0});var yu=r(xe);Ts=n(yu,"SPAN",{});var ju=r(Ts);E(Ne.$$.fragment,ju),ju.forEach(s),yu.forEach(s),cr=d(ta),Is=n(ta,"SPAN",{});var $u=r(Is);dr=a($u,"Cr\xE9ation de d\xE9mos multi-\xE9tapes"),$u.forEach(s),ta.forEach(s),Bo=d(e),W=n(e,"P",{});var dt=r(W);mr=a(dt,"Dans certains cas, vous pouvez vouloir une "),Os=n(dt,"EM",{});var Cu=r(Os);fr=a(Cu,"d\xE9mo multi-\xE9tapes"),Cu.forEach(s),vr=a(dt,", dans laquelle vous r\xE9utilisez la sortie d\u2019une fonction comme entr\xE9e de la suivante. C\u2019est tr\xE8s facile \xE0 faire avec les "),As=n(dt,"CODE",{});var zu=r(As);hr=a(zu,"Blocks"),zu.forEach(s),xr=a(dt,", car vous pouvez utiliser un composant pour l\u2019entr\xE9e d\u2019un d\xE9clencheur d\u2019\xE9v\xE9nement mais la sortie d\u2019un autre. Regardez le composant texte dans l\u2019exemple ci-dessous, sa valeur est le r\xE9sultat d\u2019un mod\xE8le de conversion de la parole en texte, mais il est \xE9galement transmis \xE0 un mod\xE8le d\u2019analyse des sentiments :"),dt.forEach(s),To=d(e),E(Fe.$$.fragment,e),Io=d(e),B=n(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),r(B).forEach(s),Oo=d(e),le=n(e,"H3",{class:!0});var sa=r(le);_e=n(sa,"A",{id:!0,class:!0,href:!0});var Pu=r(_e);Ls=n(Pu,"SPAN",{});var Du=r(Ls);E(Ve.$$.fragment,Du),Du.forEach(s),Pu.forEach(s),_r=d(sa),Ss=n(sa,"SPAN",{});var Bu=r(Ss);gr=a(Bu,"Mise \xE0 jour des propri\xE9t\xE9s des composants"),Bu.forEach(s),sa.forEach(s),Ao=d(e),ge=n(e,"P",{});var oa=r(ge);br=a(oa,"Jusqu\u2019\xE0 pr\xE9sent, nous avons vu comment cr\xE9er des \xE9v\xE9nements pour mettre \xE0 jour la valeur d\u2019un autre composant. Mais que se passe-t-il si vous voulez modifier d\u2019autres propri\xE9t\xE9s d\u2019un composant, comme la visibilit\xE9 d\u2019une zone de texte ou les choix dans un groupe de boutons radio ? Vous pouvez le faire en renvoyant la m\xE9thode "),Ms=n(oa,"CODE",{});var Tu=r(Ms);wr=a(Tu,"update()"),Tu.forEach(s),Er=a(oa," d\u2019une classe de composant au lieu d\u2019une valeur de retour normale de votre fonction."),oa.forEach(s),Lo=d(e),at=n(e,"P",{});var Iu=r(at);kr=a(Iu,"L\u2019exemple le plus facile \xE0 illustrer est le suivant :"),Iu.forEach(s),So=d(e),E(Ge.$$.fragment,e),Mo=d(e),T=n(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),r(T).forEach(s),Ro=d(e),h=n(e,"P",{});var F=r(h);qr=a(F,"Nous venons d\u2019explorer tous les concepts de base des "),Rs=n(F,"CODE",{});var Ou=r(Rs);yr=a(Ou,"Blocks"),Ou.forEach(s),jr=a(F," ! Tout comme avec "),Ns=n(F,"CODE",{});var Au=r(Ns);$r=a(Au,"Interface"),Au.forEach(s),Cr=a(F,", vous pouvez cr\xE9er des d\xE9mos sympas qui peuvent \xEAtre partag\xE9es en utilisant "),Fs=n(F,"CODE",{});var Lu=r(Fs);zr=a(Lu,"share=True"),Lu.forEach(s),Pr=a(F," dans la m\xE9thode "),Vs=n(F,"CODE",{});var Su=r(Vs);Dr=a(Su,"launch()"),Su.forEach(s),Br=a(F," ou d\xE9ploy\xE9es sur "),He=n(F,"A",{href:!0,rel:!0});var Mu=r(He);Gs=n(Mu,"EM",{});var Ru=r(Gs);Tr=a(Ru,"Spaces"),Ru.forEach(s),Mu.forEach(s),Ir=a(F,"."),F.forEach(s),this.h()},h(){p(x,"name","hf:doc:metadata"),p(x,"content",JSON.stringify(Ku)),p(C,"id","introduction-la-classe-iblocksi"),p(C,"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"),p(C,"href","#introduction-la-classe-iblocksi"),p($,"class","relative group"),p(ie,"id","pourquoi-iblocksi"),p(ie,"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"),p(ie,"href","#pourquoi-iblocksi"),p(Y,"class","relative group"),p(ue,"id","cration-dune-dmo-simple-en-utilisant-iblocksi"),p(ue,"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"),p(ue,"href","#cration-dune-dmo-simple-en-utilisant-iblocksi"),p(Z,"class","relative group"),Us(z.src,Nr="https://hf.space/gradioiframe/course-demos/flip_text/+")||p(z,"src",Nr),p(z,"frameborder","0"),p(z,"height","400"),p(z,"title","Gradio app"),p(z,"class","container p-0 flex-grow space-iframe"),p(z,"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"),p(z,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),p(te,"start","2"),p(Ie,"href","https://www.gradio.app/docs/"),p(Ie,"rel","nofollow"),p(Oe,"start","4"),p(de,"id","personnaliser-la-mise-en-page-de-votre-dmo"),p(de,"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"),p(de,"href","#personnaliser-la-mise-en-page-de-votre-dmo"),p(se,"class","relative group"),p(Le,"href","https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"),p(Le,"rel","nofollow"),Us(P.src,Fr="https://hf.space/gradioiframe/course-demos/flip_text_image/+")||p(P,"src",Fr),p(P,"frameborder","0"),p(P,"height","450"),p(P,"title","Gradio app"),p(P,"class","container p-0 flex-grow space-iframe"),p(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"),p(P,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),p(fe,"id","exploration-des-vnements-et-de-ltat"),p(fe,"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"),p(fe,"href","#exploration-des-vnements-et-de-ltat"),p(oe,"class","relative group"),Us(D.src,Vr="https://hf.space/gradioiframe/course-demos/blocks_gpt/+")||p(D,"src",Vr),p(D,"frameborder","0"),p(D,"height","300"),p(D,"title","Gradio app"),p(D,"class","container p-0 flex-grow space-iframe"),p(D,"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"),p(D,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),p(xe,"id","cration-de-dmos-multitapes"),p(xe,"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"),p(xe,"href","#cration-de-dmos-multitapes"),p(ae,"class","relative group"),Us(B.src,Gr="https://hf.space/gradioiframe/course-demos/blocks_multi_step/+")||p(B,"src",Gr),p(B,"frameborder","0"),p(B,"height","550"),p(B,"title","Gradio app"),p(B,"class","container p-0 flex-grow space-iframe"),p(B,"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"),p(B,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),p(_e,"id","mise-jour-des-proprits-des-composants"),p(_e,"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"),p(_e,"href","#mise-jour-des-proprits-des-composants"),p(le,"class","relative group"),Us(T.src,Hr="https://hf.space/gradioiframe/course-demos/blocks_update_component_properties/+")||p(T,"src",Hr),p(T,"frameborder","0"),p(T,"height","300"),p(T,"title","Gradio app"),p(T,"class","container p-0 flex-grow space-iframe"),p(T,"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"),p(T,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),p(He,"href","https://huggingface.co/spaces"),p(He,"rel","nofollow")},m(e,i){t(document.head,x),u(e,I,i),u(e,$,i),t($,C),t(C,v),k(_,v,null),t($,aa),t($,We),t(We,la),t(We,mt),t(mt,na),u(e,Qs,i),k(je,e,i),u(e,Ks,i),u(e,O,i),t(O,ra),t(O,ft),t(ft,ia),t(O,ua),t(O,vt),t(vt,pa),t(O,ca),t(O,ht),t(ht,da),t(O,ma),u(e,Xs,i),u(e,V,i),t(V,fa),t(V,xt),t(xt,va),t(V,ha),t(V,_t),t(_t,xa),t(V,_a),u(e,Ys,i),u(e,re,i),t(re,gt),t(gt,$e),t($e,ga),t($e,bt),t(bt,ba),t($e,wa),t(re,Ea),t(re,wt),t(wt,X),t(X,ka),t(X,Et),t(Et,qa),t(X,ya),t(X,kt),t(kt,ja),t(X,$a),u(e,Zs,i),u(e,Y,i),t(Y,ie),t(ie,qt),k(Ce,qt,null),t(Y,Ca),t(Y,ze),t(ze,za),t(ze,yt),t(yt,Pa),t(ze,Da),u(e,eo,i),u(e,A,i),t(A,Ba),t(A,jt),t(jt,Ta),t(A,Ia),t(A,$t),t($t,Oa),t(A,Aa),t(A,Ct),t(Ct,La),t(A,Sa),u(e,to,i),u(e,L,i),t(L,zt),t(zt,Ma),t(L,Ra),t(L,Pt),t(Pt,Na),t(L,Fa),t(L,Dt),t(Dt,Va),t(L,Ga),t(L,Bt),t(Bt,Ha),u(e,so,i),u(e,Qe,i),t(Qe,Ua),u(e,oo,i),u(e,Z,i),t(Z,ue),t(ue,Tt),k(Pe,Tt,null),t(Z,Ja),t(Z,Ke),t(Ke,Wa),t(Ke,It),t(It,Qa),u(e,ao,i),u(e,S,i),t(S,Ka),t(S,Ot),t(Ot,Xa),t(S,Ya),t(S,At),t(At,Za),t(S,el),t(S,Lt),t(Lt,tl),t(S,sl),u(e,lo,i),k(De,e,i),u(e,no,i),u(e,z,i),u(e,ro,i),u(e,pe,i),t(pe,ol),t(pe,St),t(St,al),t(pe,ll),u(e,io,i),u(e,Xe,i),t(Xe,ee),t(ee,nl),t(ee,Mt),t(Mt,rl),t(ee,il),t(ee,Rt),t(Rt,ul),t(ee,pl),u(e,uo,i),k(ce,e,i),u(e,po,i),u(e,Ye,i),t(Ye,cl),u(e,co,i),u(e,te,i),t(te,Nt),t(Nt,Be),t(Be,dl),t(Be,Ft),t(Ft,ml),t(Be,fl),t(te,vl),t(te,Vt),t(Vt,Te),t(Te,hl),t(Te,Gt),t(Gt,xl),t(Te,_l),u(e,mo,i),u(e,G,i),t(G,Ze),t(Ze,Ht),t(Ht,gl),t(Ze,bl),t(G,wl),t(G,et),t(et,Ut),t(Ut,El),t(et,kl),t(G,ql),t(G,m),t(m,Jt),t(Jt,yl),t(m,jl),t(m,$l),t(m,Cl),t(m,Wt),t(Wt,zl),t(m,Pl),t(m,Qt),t(Qt,Dl),t(m,Bl),t(m,Kt),t(Kt,Tl),t(m,Il),t(m,Xt),t(Xt,Ol),t(m,Al),t(m,Yt),t(Yt,Ll),t(m,Sl),t(m,Zt),t(Zt,Ml),t(m,Rl),t(m,es),t(es,Nl),t(m,Fl),t(m,Ie),t(Ie,Vl),t(m,Gl),t(m,ts),t(ts,Hl),t(m,Ul),u(e,fo,i),u(e,Oe,i),t(Oe,M),t(M,ss),t(ss,Jl),t(M,Wl),t(M,os),t(os,Ql),t(M,Kl),t(M,as),t(as,Xl),t(M,Yl),t(M,ls),t(ls,Zl),t(M,en),u(e,vo,i),u(e,se,i),t(se,de),t(de,ns),k(Ae,ns,null),t(se,tn),t(se,rs),t(rs,sn),u(e,ho,i),u(e,g,i),t(g,on),t(g,is),t(is,an),t(g,ln),t(g,us),t(us,nn),t(g,rn),t(g,ps),t(ps,un),t(g,pn),t(g,cs),t(cs,cn),t(g,dn),u(e,xo,i),u(e,R,i),t(R,mn),t(R,ds),t(ds,fn),t(R,vn),t(R,ms),t(ms,hn),t(R,xn),t(R,Le),t(Le,_n),t(R,gn),u(e,_o,i),u(e,N,i),t(N,bn),t(N,fs),t(fs,wn),t(N,En),t(N,vs),t(vs,kn),t(N,qn),t(N,hs),t(hs,yn),t(N,jn),u(e,go,i),u(e,H,i),t(H,$n),t(H,xs),t(xs,Cn),t(H,zn),t(H,_s),t(_s,Pn),t(H,Dn),u(e,bo,i),k(Se,e,i),u(e,wo,i),u(e,P,i),u(e,Eo,i),u(e,me,i),t(me,Bn),t(me,gs),t(gs,Tn),t(me,In),u(e,ko,i),u(e,oe,i),t(oe,fe),t(fe,bs),k(Me,bs,null),t(oe,On),t(oe,ws),t(ws,An),u(e,qo,i),u(e,ve,i),t(ve,Ln),t(ve,Es),t(Es,Sn),t(ve,Mn),u(e,yo,i),u(e,b,i),t(b,Rn),t(b,ks),t(ks,Nn),t(b,Fn),t(b,qs),t(qs,Vn),t(b,Gn),t(b,ys),t(ys,Hn),t(b,Un),t(b,js),t(js,Jn),t(b,Wn),u(e,jo,i),u(e,U,i),t(U,Qn),t(U,$s),t($s,Kn),t(U,Xn),t(U,Cs),t(Cs,Yn),t(U,Zn),u(e,$o,i),u(e,J,i),t(J,tt),t(tt,zs),t(zs,er),t(tt,tr),t(J,sr),t(J,he),t(he,Ps),t(Ps,or),t(he,ar),t(he,Ds),t(Ds,lr),t(he,nr),t(J,rr),t(J,st),t(st,Bs),t(Bs,ir),t(st,ur),u(e,Co,i),u(e,ot,i),t(ot,pr),u(e,zo,i),k(Re,e,i),u(e,Po,i),u(e,D,i),u(e,Do,i),u(e,ae,i),t(ae,xe),t(xe,Ts),k(Ne,Ts,null),t(ae,cr),t(ae,Is),t(Is,dr),u(e,Bo,i),u(e,W,i),t(W,mr),t(W,Os),t(Os,fr),t(W,vr),t(W,As),t(As,hr),t(W,xr),u(e,To,i),k(Fe,e,i),u(e,Io,i),u(e,B,i),u(e,Oo,i),u(e,le,i),t(le,_e),t(_e,Ls),k(Ve,Ls,null),t(le,_r),t(le,Ss),t(Ss,gr),u(e,Ao,i),u(e,ge,i),t(ge,br),t(ge,Ms),t(Ms,wr),t(ge,Er),u(e,Lo,i),u(e,at,i),t(at,kr),u(e,So,i),k(Ge,e,i),u(e,Mo,i),u(e,T,i),u(e,Ro,i),u(e,h,i),t(h,qr),t(h,Rs),t(Rs,yr),t(h,jr),t(h,Ns),t(Ns,$r),t(h,Cr),t(h,Fs),t(Fs,zr),t(h,Pr),t(h,Vs),t(Vs,Dr),t(h,Br),t(h,He),t(He,Gs),t(Gs,Tr),t(h,Ir),No=!0},p(e,[i]){const Ue={};i&2&&(Ue.$$scope={dirty:i,ctx:e}),ce.$set(Ue)},i(e){No||(q(_.$$.fragment,e),q(je.$$.fragment,e),q(Ce.$$.fragment,e),q(Pe.$$.fragment,e),q(De.$$.fragment,e),q(ce.$$.fragment,e),q(Ae.$$.fragment,e),q(Se.$$.fragment,e),q(Me.$$.fragment,e),q(Re.$$.fragment,e),q(Ne.$$.fragment,e),q(Fe.$$.fragment,e),q(Ve.$$.fragment,e),q(Ge.$$.fragment,e),No=!0)},o(e){y(_.$$.fragment,e),y(je.$$.fragment,e),y(Ce.$$.fragment,e),y(Pe.$$.fragment,e),y(De.$$.fragment,e),y(ce.$$.fragment,e),y(Ae.$$.fragment,e),y(Se.$$.fragment,e),y(Me.$$.fragment,e),y(Re.$$.fragment,e),y(Ne.$$.fragment,e),y(Fe.$$.fragment,e),y(Ve.$$.fragment,e),y(Ge.$$.fragment,e),No=!1},d(e){s(x),e&&s(I),e&&s($),j(_),e&&s(Qs),j(je,e),e&&s(Ks),e&&s(O),e&&s(Xs),e&&s(V),e&&s(Ys),e&&s(re),e&&s(Zs),e&&s(Y),j(Ce),e&&s(eo),e&&s(A),e&&s(to),e&&s(L),e&&s(so),e&&s(Qe),e&&s(oo),e&&s(Z),j(Pe),e&&s(ao),e&&s(S),e&&s(lo),j(De,e),e&&s(no),e&&s(z),e&&s(ro),e&&s(pe),e&&s(io),e&&s(Xe),e&&s(uo),j(ce,e),e&&s(po),e&&s(Ye),e&&s(co),e&&s(te),e&&s(mo),e&&s(G),e&&s(fo),e&&s(Oe),e&&s(vo),e&&s(se),j(Ae),e&&s(ho),e&&s(g),e&&s(xo),e&&s(R),e&&s(_o),e&&s(N),e&&s(go),e&&s(H),e&&s(bo),j(Se,e),e&&s(wo),e&&s(P),e&&s(Eo),e&&s(me),e&&s(ko),e&&s(oe),j(Me),e&&s(qo),e&&s(ve),e&&s(yo),e&&s(b),e&&s(jo),e&&s(U),e&&s($o),e&&s(J),e&&s(Co),e&&s(ot),e&&s(zo),j(Re,e),e&&s(Po),e&&s(D),e&&s(Do),e&&s(ae),j(Ne),e&&s(Bo),e&&s(W),e&&s(To),j(Fe,e),e&&s(Io),e&&s(B),e&&s(Oo),e&&s(le),j(Ve),e&&s(Ao),e&&s(ge),e&&s(Lo),e&&s(at),e&&s(So),j(Ge,e),e&&s(Mo),e&&s(T),e&&s(Ro),e&&s(h)}}}const Ku={local:"introduction-la-classe-iblocksi",sections:[{local:"pourquoi-iblocksi",title:"Pourquoi <i>Blocks</i> \u{1F9F1} ?"},{local:"cration-dune-dmo-simple-en-utilisant-iblocksi",title:"Cr\xE9ation d'une d\xE9mo simple en utilisant <i>Blocks</i>"},{local:"personnaliser-la-mise-en-page-de-votre-dmo",title:"Personnaliser la mise en page de votre d\xE9mo"},{local:"exploration-des-vnements-et-de-ltat",title:"Exploration des \xE9v\xE9nements et de l'\xE9tat"},{local:"cration-de-dmos-multitapes",title:"Cr\xE9ation de d\xE9mos multi-\xE9tapes"},{local:"mise-jour-des-proprits-des-composants",title:"Mise \xE0 jour des propri\xE9t\xE9s des composants"}],title:"Introduction \xE0 la classe <i>Blocks</i>"};function Xu(Ws){return Hu(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class op extends Nu{constructor(x){super();Fu(this,x,Xu,Qu,Vu,{})}}export{op as default,Ku as metadata};
