import{S as Ni,i as Li,s as Ri,e as l,k as u,w as $,t as a,M as Gi,c as n,d as o,m as h,a as r,x as j,h as s,b as p,N as Io,F as e,g as c,y as T,q as C,o as I,B,v as Mi}from"../../chunks/vendor-1e8b365d.js";import{T as zi}from"../../chunks/Tip-62b14c6e.js";import{I as ze}from"../../chunks/IconCopyLink-483c28ba.js";import{C as Bo}from"../../chunks/CodeBlock-e5764662.js";function Yi(Po){let w;return{c(){w=a("\u{1F64B}If you're not familiar with the `with` statement in Python, we recommend checking out the excellent [tutorial](https://realpython.com/python-with-statement/) from Real Python. Come back here after reading that \u{1F917}")},l(R){w=s(R,"\u{1F64B}If you're not familiar with the `with` statement in Python, we recommend checking out the excellent [tutorial](https://realpython.com/python-with-statement/) from Real Python. Come back here after reading that \u{1F917}")},m(R,N){c(R,w,N)},d(R){R&&o(w)}}}function Hi(Po){let w,R,N,oe,st,ke,Oa,lt,Aa,qo,P,Da,nt,Sa,Fa,rt,Na,La,it,Ra,Ga,Oo,G,Ma,ct,za,Ya,pt,Ha,Wa,Ao,ae,ut,Ee,Ua,ht,Ja,Ka,Qa,dt,J,Va,ft,Xa,Za,mt,es,ts,Do,K,se,wt,$e,os,gt,as,So,q,ss,vt,ls,ns,bt,rs,is,yt,cs,ps,Fo,O,xt,us,hs,_t,ds,fs,kt,ms,ws,Et,gs,No,Ye,vs,Lo,Q,le,$t,je,bs,jt,ys,Ro,He,xs,Go,Te,Mo,b,Kn,zo,We,_s,Yo,A,ne,Ce,ks,Tt,Es,$s,js,re,Ts,Cs,Ct,Ie,Is,It,Bs,Ps,qs,V,y,Os,Bt,As,Ds,Pt,Ss,Fs,qt,Ns,Ls,Ot,Rs,Gs,Ms,d,zs,At,Ys,Hs,Dt,Ws,Us,St,Js,Ks,Ft,Qs,Vs,Nt,Xs,Zs,Lt,el,tl,Rt,ol,al,sl,Be,ll,Pe,nl,rl,il,Gt,L,cl,Mt,pl,ul,zt,hl,dl,Yt,fl,ml,Ho,X,ie,Ht,qe,wl,Wt,gl,Wo,g,vl,Ut,bl,yl,Jt,xl,_l,Kt,kl,El,Qt,$l,jl,Uo,D,Tl,Vt,Cl,Il,Xt,Bl,Pl,Oe,ql,Ol,Jo,S,Al,Zt,Dl,Sl,eo,Fl,Nl,to,Ll,Rl,Ko,ce,Gl,oo,Ml,zl,Qo,Ae,Vo,x,Qn,Xo,pe,Yl,ao,Hl,Wl,Zo,Z,ue,so,De,Ul,lo,Jl,ea,he,Kl,no,Ql,Vl,ta,v,Xl,ro,Zl,en,io,tn,on,co,an,sn,po,ln,nn,oa,M,rn,uo,cn,pn,ho,un,hn,aa,z,Ue,fo,dn,fn,mn,Je,mo,wn,gn,vn,Ke,wo,bn,yn,sa,Qe,xn,la,Se,na,_,Vn,ra,ee,de,go,Fe,_n,vo,kn,ia,Y,En,bo,$n,jn,yo,Tn,Cn,ca,Ne,pa,k,Xn,ua,te,fe,xo,Le,In,_o,Bn,ha,me,Pn,ko,qn,On,da,Ve,An,fa,Re,ma,E,Zn,wa,f,Dn,Eo,Sn,Fn,$o,Nn,Ln,jo,Rn,Gn,To,Mn,zn,Ge,Yn,Hn,ga;return ke=new ze({}),$e=new ze({}),je=new ze({}),Te=new Bo({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()`}}),re=new zi({props:{$$slots:{default:[Yi]},$$scope:{ctx:Po}}}),qe=new ze({}),Ae=new Bo({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()`}}),De=new ze({}),Se=new Bo({props:{code:`import gradio as gr

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


def complete_with_gpt(text):
    # Use the last 50 characters of the text as context
    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"># Use the last 50 characters of the text as context</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()`}}),Fe=new ze({}),Ne=new Bo({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()`}}),Le=new ze({}),Re=new Bo({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(){w=l("meta"),R=u(),N=l("h1"),oe=l("a"),st=l("span"),$(ke.$$.fragment),Oa=u(),lt=l("span"),Aa=a("Introduction to Gradio Blocks"),qo=u(),P=l("p"),Da=a("In the previous sections we have explored and created demos using the "),nt=l("code"),Sa=a("Interface"),Fa=a(" class. In this section we will introduce our "),rt=l("strong"),Na=a("newly developed"),La=a(" low-level API called "),it=l("code"),Ra=a("gradio.Blocks"),Ga=a("."),Oo=u(),G=l("p"),Ma=a("Now, what\u2019s the difference between "),ct=l("code"),za=a("Interface"),Ya=a(" and "),pt=l("code"),Ha=a("Blocks"),Wa=a("?"),Ao=u(),ae=l("ul"),ut=l("li"),Ee=l("p"),Ua=a("\u26A1 "),ht=l("code"),Ja=a("Interface"),Ka=a(": a high-level API that allows you to create a full machine learning demo simply by providing a list of inputs and outputs."),Qa=u(),dt=l("li"),J=l("p"),Va=a("\u{1F9F1} "),ft=l("code"),Xa=a("Blocks"),Za=a(": a low-level API that allows you to have full control over the data flows and layout of your application. You can build very complex, multi-step applications using "),mt=l("code"),es=a("Blocks"),ts=a(" (as in \u201Cbuilding blocks\u201D)."),Do=u(),K=l("h3"),se=l("a"),wt=l("span"),$($e.$$.fragment),os=u(),gt=l("span"),as=a("Why Blocks \u{1F9F1}?"),So=u(),q=l("p"),ss=a("As we saw in the previous sections, the "),vt=l("code"),ls=a("Interface"),ns=a(" class allows you to easily create full-fledged machine learning demos with just a few lines of code. The "),bt=l("code"),rs=a("Interface"),is=a(" API is extremely easy to use but lacks the flexibility that the "),yt=l("code"),cs=a("Blocks"),ps=a(" API provides. For example, you might want to:"),Fo=u(),O=l("ul"),xt=l("li"),us=a("Group together related demos as multiple tabs in one web application"),hs=u(),_t=l("li"),ds=a("Change the layout of your demo, e.g. to specify where the inputs and outputs are located"),fs=u(),kt=l("li"),ms=a("Have multi-step interfaces, in which the output of one model becomes the input to the next model, or have more flexible data flows in general"),ws=u(),Et=l("li"),gs=a("Change a component\u2019s properties (for example, the choices in a dropdown) or its visibility based on user input"),No=u(),Ye=l("p"),vs=a("We will explore all of these concepts below."),Lo=u(),Q=l("h3"),le=l("a"),$t=l("span"),$(je.$$.fragment),bs=u(),jt=l("span"),ys=a("Creating a simple demo using Blocks"),Ro=u(),He=l("p"),xs=a("After you have installed Gradio, run the code below as a Python script, a Jupyter notebook, or a Colab notebook."),Go=u(),$(Te.$$.fragment),Mo=u(),b=l("iframe"),zo=u(),We=l("p"),_s=a("This simple example above introduces 4 concepts that underlie Blocks:"),Yo=u(),A=l("ol"),ne=l("li"),Ce=l("p"),ks=a("Blocks allow you to build web applications that combine markdown, HTML, buttons, and interactive components simply by instantiating objects in Python inside of a "),Tt=l("code"),Es=a("with gradio.Blocks"),$s=a(" context."),js=u(),$(re.$$.fragment),Ts=a(`
The order in which you instantiate components matters as each element gets rendered into the web app in the order it was created. (More complex layouts are discussed below)`),Cs=u(),Ct=l("li"),Ie=l("p"),Is=a("You can define regular Python functions anywhere in your code and run them with user input using "),It=l("code"),Bs=a("Blocks"),Ps=a(". In our example, we have a simple function that \u201Cflips\u201D the input text, but you can write any Python function, from a simple calculation to processing the predictions from a machine learning model."),qs=u(),V=l("li"),y=l("p"),Os=a("You can assign events to any "),Bt=l("code"),As=a("Blocks"),Ds=a(" component. This will run your function when the component is clicked, changed, etc. When you assign an event, you pass in three parameters: "),Pt=l("code"),Ss=a("fn"),Fs=a(": the function that should be called, "),qt=l("code"),Ns=a("inputs"),Ls=a(": the (list) of input component(s), and "),Ot=l("code"),Rs=a("outputs"),Gs=a(": the (list) of output components that should be called."),Ms=u(),d=l("p"),zs=a("In the example above, we run the "),At=l("code"),Ys=a("flip_text()"),Hs=a(" function when the value in the "),Dt=l("code"),Ws=a("Textbox"),Us=a(" named input "),St=l("code"),Js=a("input"),Ks=a(" changes. The event reads the value in "),Ft=l("code"),Qs=a("input"),Vs=a(", passes it as the name parameter to "),Nt=l("code"),Xs=a("flip_text()"),Zs=a(", which then returns a value that gets assigned to our second "),Lt=l("code"),el=a("Textbox"),tl=a(" named "),Rt=l("code"),ol=a("output"),al=a("."),sl=u(),Be=l("p"),ll=a("To see a list of events that each component supports, see the Gradio "),Pe=l("a"),nl=a("documentation"),rl=a("."),il=u(),Gt=l("li"),L=l("p"),cl=a("Blocks automatically figures out whether a component should be interactive (accept user input) or not, based on the event triggers you define. In our example, the first textbox is interactive, since its value is used by the "),Mt=l("code"),pl=a("flip_text()"),ul=a(" function. The second textbox is not interactive, since its value is never used as an input. In some cases, you might want to override this, which you can do by passing a boolean to the "),zt=l("code"),hl=a("interactive"),dl=a(" parameter of the component (e.g. "),Yt=l("code"),fl=a('gr.Textbox(placeholder="Flip this text", interactive=True)'),ml=a(")."),Ho=u(),X=l("h3"),ie=l("a"),Ht=l("span"),$(qe.$$.fragment),wl=u(),Wt=l("span"),gl=a("Customizing the layout of your demo"),Wo=u(),g=l("p"),vl=a("How can we use "),Ut=l("code"),bl=a("Blocks"),yl=a(" to customize the layout of our demo? By default, "),Jt=l("code"),xl=a("Blocks"),_l=a(" renders the components that you create vertically in one column. You can change that by creating additional columns "),Kt=l("code"),kl=a("with gradio.Column():"),El=a(" or rows "),Qt=l("code"),$l=a("with gradio.Row():"),jl=a(" and creating components within those contexts."),Uo=u(),D=l("p"),Tl=a("Here\u2019s what you should keep in mind: any components created under a "),Vt=l("code"),Cl=a("Column"),Il=a(" (this is also the default) will be laid out vertically. Any component created under a "),Xt=l("code"),Bl=a("Row"),Pl=a(" will be laid out horizontally, similar to the "),Oe=l("a"),ql=a("flexbox model in web development"),Ol=a("."),Jo=u(),S=l("p"),Al=a("Finally, you can also create tabs for your demo by using the "),Zt=l("code"),Dl=a("with gradio.Tabs()"),Sl=a(" context manager. Within this context, you can create multiple tabs by specifying "),eo=l("code"),Fl=a("with gradio.TabItem(name_of_tab):"),Nl=a(" children. Any component created inside of a "),to=l("code"),Ll=a("with gradio.TabItem(name_of_tab):"),Rl=a(" context appears in that tab."),Ko=u(),ce=l("p"),Gl=a("Now let\u2019s add a "),oo=l("code"),Ml=a("flip_image()"),zl=a(" function to our demo and add a new tab that flips images. Below is an example with 2 tabs and also uses a Row:"),Qo=u(),$(Ae.$$.fragment),Vo=u(),x=l("iframe"),Xo=u(),pe=l("p"),Yl=a("You\u2019ll notice that in this example, we\u2019ve also created a "),ao=l("code"),Hl=a("Button"),Wl=a(" component in each tab, and we\u2019ve assigned a click event to each button, which is what actually runs the function."),Zo=u(),Z=l("h3"),ue=l("a"),so=l("span"),$(De.$$.fragment),Ul=u(),lo=l("span"),Jl=a("Exploring events and state"),ea=u(),he=l("p"),Kl=a("Just as you can control the layout, "),no=l("code"),Ql=a("Blocks"),Vl=a(" gives you fine-grained control over what events trigger function calls. Each component and many layouts have specific events that they support."),ta=u(),v=l("p"),Xl=a("For example, the "),ro=l("code"),Zl=a("Textbox"),en=a(" component has 2 events: "),io=l("code"),tn=a("change()"),on=a(" (when the value inside of the textbox changes), and "),co=l("code"),an=a("submit()"),sn=a(" (when a user presses the enter key while focused on the textbox). More complex components can have even more events: for example, the "),po=l("code"),ln=a("Audio"),nn=a(" component also has separate events for when the audio file is played, cleared, paused, etc. See the documentation for the events each component supports."),oa=u(),M=l("p"),rn=a("You can attach event trigger to none, one, or more of these events. You create an event trigger by calling the name of the event on the component instance as a function \u2014 e.g. "),uo=l("code"),cn=a("textbox.change(...)"),pn=a(" or "),ho=l("code"),un=a("btn.click(...)"),hn=a(". The function takes in three parameters, as discussed above:"),aa=u(),z=l("ul"),Ue=l("li"),fo=l("code"),dn=a("fn"),fn=a(": the function to run"),mn=u(),Je=l("li"),mo=l("code"),wn=a("inputs"),gn=a(": a (list of) component(s) whose values should supplied as the input parameters to the function. Each component\u2019s value gets mapped to the corresponding function parameter, in order. This parameter can be None if the function does not take any parameters."),vn=u(),Ke=l("li"),wo=l("code"),bn=a("outputs"),yn=a(": a (list of) component(s) whose values should be updated based on the values returned by the function. Each return value sets the corresponding component\u2019s value, in order. This parameter can be None if the function does not return anything."),sa=u(),Qe=l("p"),xn=a("You can even make the input and output component be the same component, as we do in this example that uses a GPT model to do text completion:"),la=u(),$(Se.$$.fragment),na=u(),_=l("iframe"),ra=u(),ee=l("h3"),de=l("a"),go=l("span"),$(Fe.$$.fragment),_n=u(),vo=l("span"),kn=a("Creating multi-step demos"),ia=u(),Y=l("p"),En=a("In some cases, you might want a "),bo=l("em"),$n=a("multi-step demo"),jn=a(", in which you reuse the output of one function as the input to the next. This is really easy to do with "),yo=l("code"),Tn=a("Blocks"),Cn=a(", as you can use a component for the input of one event trigger but the output of another. Take a look at the text component in the example below, its value is the result of a speech-to-text model, but also gets passed into a sentiment analysis model:"),ca=u(),$(Ne.$$.fragment),pa=u(),k=l("iframe"),ua=u(),te=l("h3"),fe=l("a"),xo=l("span"),$(Le.$$.fragment),In=u(),_o=l("span"),Bn=a("Updating Component Properties"),ha=u(),me=l("p"),Pn=a("So far, we have seen how to create events to update the value of another component. But what happens if you want to change other properties of a component, like the visibility of a textbox or the choices in a radio button group? You can do this by returning a component class\u2019s "),ko=l("code"),qn=a("update()"),On=a(" method instead of a regular return value from your function."),da=u(),Ve=l("p"),An=a("This is most easily illustrated with an example:"),fa=u(),$(Re.$$.fragment),ma=u(),E=l("iframe"),wa=u(),f=l("p"),Dn=a("We just explored all the core concepts of "),Eo=l("code"),Sn=a("Blocks"),Fn=a("! Just like with "),$o=l("code"),Nn=a("Interfaces"),Ln=a(", you can create cool demos that can be shared by using "),jo=l("code"),Rn=a("share=True"),Gn=a(" in the "),To=l("code"),Mn=a("launch()"),zn=a(" method or deployed on "),Ge=l("a"),Yn=a("Hugging Face Spaces"),Hn=a("."),this.h()},l(t){const i=Gi('[data-svelte="svelte-1phssyn"]',document.head);w=n(i,"META",{name:!0,content:!0}),i.forEach(o),R=h(t),N=n(t,"H1",{class:!0});var Me=r(N);oe=n(Me,"A",{id:!0,class:!0,href:!0});var er=r(oe);st=n(er,"SPAN",{});var tr=r(st);j(ke.$$.fragment,tr),tr.forEach(o),er.forEach(o),Oa=h(Me),lt=n(Me,"SPAN",{});var or=r(lt);Aa=s(or,"Introduction to Gradio Blocks"),or.forEach(o),Me.forEach(o),qo=h(t),P=n(t,"P",{});var we=r(P);Da=s(we,"In the previous sections we have explored and created demos using the "),nt=n(we,"CODE",{});var ar=r(nt);Sa=s(ar,"Interface"),ar.forEach(o),Fa=s(we," class. In this section we will introduce our "),rt=n(we,"STRONG",{});var sr=r(rt);Na=s(sr,"newly developed"),sr.forEach(o),La=s(we," low-level API called "),it=n(we,"CODE",{});var lr=r(it);Ra=s(lr,"gradio.Blocks"),lr.forEach(o),Ga=s(we,"."),we.forEach(o),Oo=h(t),G=n(t,"P",{});var Xe=r(G);Ma=s(Xe,"Now, what\u2019s the difference between "),ct=n(Xe,"CODE",{});var nr=r(ct);za=s(nr,"Interface"),nr.forEach(o),Ya=s(Xe," and "),pt=n(Xe,"CODE",{});var rr=r(pt);Ha=s(rr,"Blocks"),rr.forEach(o),Wa=s(Xe,"?"),Xe.forEach(o),Ao=h(t),ae=n(t,"UL",{});var va=r(ae);ut=n(va,"LI",{});var ir=r(ut);Ee=n(ir,"P",{});var ba=r(Ee);Ua=s(ba,"\u26A1 "),ht=n(ba,"CODE",{});var cr=r(ht);Ja=s(cr,"Interface"),cr.forEach(o),Ka=s(ba,": a high-level API that allows you to create a full machine learning demo simply by providing a list of inputs and outputs."),ba.forEach(o),ir.forEach(o),Qa=h(va),dt=n(va,"LI",{});var pr=r(dt);J=n(pr,"P",{});var Ze=r(J);Va=s(Ze,"\u{1F9F1} "),ft=n(Ze,"CODE",{});var ur=r(ft);Xa=s(ur,"Blocks"),ur.forEach(o),Za=s(Ze,": a low-level API that allows you to have full control over the data flows and layout of your application. You can build very complex, multi-step applications using "),mt=n(Ze,"CODE",{});var hr=r(mt);es=s(hr,"Blocks"),hr.forEach(o),ts=s(Ze," (as in \u201Cbuilding blocks\u201D)."),Ze.forEach(o),pr.forEach(o),va.forEach(o),Do=h(t),K=n(t,"H3",{class:!0});var ya=r(K);se=n(ya,"A",{id:!0,class:!0,href:!0});var dr=r(se);wt=n(dr,"SPAN",{});var fr=r(wt);j($e.$$.fragment,fr),fr.forEach(o),dr.forEach(o),os=h(ya),gt=n(ya,"SPAN",{});var mr=r(gt);as=s(mr,"Why Blocks \u{1F9F1}?"),mr.forEach(o),ya.forEach(o),So=h(t),q=n(t,"P",{});var ge=r(q);ss=s(ge,"As we saw in the previous sections, the "),vt=n(ge,"CODE",{});var wr=r(vt);ls=s(wr,"Interface"),wr.forEach(o),ns=s(ge," class allows you to easily create full-fledged machine learning demos with just a few lines of code. The "),bt=n(ge,"CODE",{});var gr=r(bt);rs=s(gr,"Interface"),gr.forEach(o),is=s(ge," API is extremely easy to use but lacks the flexibility that the "),yt=n(ge,"CODE",{});var vr=r(yt);cs=s(vr,"Blocks"),vr.forEach(o),ps=s(ge," API provides. For example, you might want to:"),ge.forEach(o),Fo=h(t),O=n(t,"UL",{});var ve=r(O);xt=n(ve,"LI",{});var br=r(xt);us=s(br,"Group together related demos as multiple tabs in one web application"),br.forEach(o),hs=h(ve),_t=n(ve,"LI",{});var yr=r(_t);ds=s(yr,"Change the layout of your demo, e.g. to specify where the inputs and outputs are located"),yr.forEach(o),fs=h(ve),kt=n(ve,"LI",{});var xr=r(kt);ms=s(xr,"Have multi-step interfaces, in which the output of one model becomes the input to the next model, or have more flexible data flows in general"),xr.forEach(o),ws=h(ve),Et=n(ve,"LI",{});var _r=r(Et);gs=s(_r,"Change a component\u2019s properties (for example, the choices in a dropdown) or its visibility based on user input"),_r.forEach(o),ve.forEach(o),No=h(t),Ye=n(t,"P",{});var kr=r(Ye);vs=s(kr,"We will explore all of these concepts below."),kr.forEach(o),Lo=h(t),Q=n(t,"H3",{class:!0});var xa=r(Q);le=n(xa,"A",{id:!0,class:!0,href:!0});var Er=r(le);$t=n(Er,"SPAN",{});var $r=r($t);j(je.$$.fragment,$r),$r.forEach(o),Er.forEach(o),bs=h(xa),jt=n(xa,"SPAN",{});var jr=r(jt);ys=s(jr,"Creating a simple demo using Blocks"),jr.forEach(o),xa.forEach(o),Ro=h(t),He=n(t,"P",{});var Tr=r(He);xs=s(Tr,"After you have installed Gradio, run the code below as a Python script, a Jupyter notebook, or a Colab notebook."),Tr.forEach(o),Go=h(t),j(Te.$$.fragment,t),Mo=h(t),b=n(t,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),r(b).forEach(o),zo=h(t),We=n(t,"P",{});var Cr=r(We);_s=s(Cr,"This simple example above introduces 4 concepts that underlie Blocks:"),Cr.forEach(o),Yo=h(t),A=n(t,"OL",{});var be=r(A);ne=n(be,"LI",{});var Co=r(ne);Ce=n(Co,"P",{});var _a=r(Ce);ks=s(_a,"Blocks allow you to build web applications that combine markdown, HTML, buttons, and interactive components simply by instantiating objects in Python inside of a "),Tt=n(_a,"CODE",{});var Ir=r(Tt);Es=s(Ir,"with gradio.Blocks"),Ir.forEach(o),$s=s(_a," context."),_a.forEach(o),js=h(Co),j(re.$$.fragment,Co),Ts=s(Co,`
The order in which you instantiate components matters as each element gets rendered into the web app in the order it was created. (More complex layouts are discussed below)`),Co.forEach(o),Cs=h(be),Ct=n(be,"LI",{});var Br=r(Ct);Ie=n(Br,"P",{});var ka=r(Ie);Is=s(ka,"You can define regular Python functions anywhere in your code and run them with user input using "),It=n(ka,"CODE",{});var Pr=r(It);Bs=s(Pr,"Blocks"),Pr.forEach(o),Ps=s(ka,". In our example, we have a simple function that \u201Cflips\u201D the input text, but you can write any Python function, from a simple calculation to processing the predictions from a machine learning model."),ka.forEach(o),Br.forEach(o),qs=h(be),V=n(be,"LI",{});var et=r(V);y=n(et,"P",{});var H=r(y);Os=s(H,"You can assign events to any "),Bt=n(H,"CODE",{});var qr=r(Bt);As=s(qr,"Blocks"),qr.forEach(o),Ds=s(H," component. This will run your function when the component is clicked, changed, etc. When you assign an event, you pass in three parameters: "),Pt=n(H,"CODE",{});var Or=r(Pt);Ss=s(Or,"fn"),Or.forEach(o),Fs=s(H,": the function that should be called, "),qt=n(H,"CODE",{});var Ar=r(qt);Ns=s(Ar,"inputs"),Ar.forEach(o),Ls=s(H,": the (list) of input component(s), and "),Ot=n(H,"CODE",{});var Dr=r(Ot);Rs=s(Dr,"outputs"),Dr.forEach(o),Gs=s(H,": the (list) of output components that should be called."),H.forEach(o),Ms=h(et),d=n(et,"P",{});var m=r(d);zs=s(m,"In the example above, we run the "),At=n(m,"CODE",{});var Sr=r(At);Ys=s(Sr,"flip_text()"),Sr.forEach(o),Hs=s(m," function when the value in the "),Dt=n(m,"CODE",{});var Fr=r(Dt);Ws=s(Fr,"Textbox"),Fr.forEach(o),Us=s(m," named input "),St=n(m,"CODE",{});var Nr=r(St);Js=s(Nr,"input"),Nr.forEach(o),Ks=s(m," changes. The event reads the value in "),Ft=n(m,"CODE",{});var Lr=r(Ft);Qs=s(Lr,"input"),Lr.forEach(o),Vs=s(m,", passes it as the name parameter to "),Nt=n(m,"CODE",{});var Rr=r(Nt);Xs=s(Rr,"flip_text()"),Rr.forEach(o),Zs=s(m,", which then returns a value that gets assigned to our second "),Lt=n(m,"CODE",{});var Gr=r(Lt);el=s(Gr,"Textbox"),Gr.forEach(o),tl=s(m," named "),Rt=n(m,"CODE",{});var Mr=r(Rt);ol=s(Mr,"output"),Mr.forEach(o),al=s(m,"."),m.forEach(o),sl=h(et),Be=n(et,"P",{});var Ea=r(Be);ll=s(Ea,"To see a list of events that each component supports, see the Gradio "),Pe=n(Ea,"A",{href:!0,rel:!0});var zr=r(Pe);nl=s(zr,"documentation"),zr.forEach(o),rl=s(Ea,"."),Ea.forEach(o),et.forEach(o),il=h(be),Gt=n(be,"LI",{});var Yr=r(Gt);L=n(Yr,"P",{});var ye=r(L);cl=s(ye,"Blocks automatically figures out whether a component should be interactive (accept user input) or not, based on the event triggers you define. In our example, the first textbox is interactive, since its value is used by the "),Mt=n(ye,"CODE",{});var Hr=r(Mt);pl=s(Hr,"flip_text()"),Hr.forEach(o),ul=s(ye," function. The second textbox is not interactive, since its value is never used as an input. In some cases, you might want to override this, which you can do by passing a boolean to the "),zt=n(ye,"CODE",{});var Wr=r(zt);hl=s(Wr,"interactive"),Wr.forEach(o),dl=s(ye," parameter of the component (e.g. "),Yt=n(ye,"CODE",{});var Ur=r(Yt);fl=s(Ur,'gr.Textbox(placeholder="Flip this text", interactive=True)'),Ur.forEach(o),ml=s(ye,")."),ye.forEach(o),Yr.forEach(o),be.forEach(o),Ho=h(t),X=n(t,"H3",{class:!0});var $a=r(X);ie=n($a,"A",{id:!0,class:!0,href:!0});var Jr=r(ie);Ht=n(Jr,"SPAN",{});var Kr=r(Ht);j(qe.$$.fragment,Kr),Kr.forEach(o),Jr.forEach(o),wl=h($a),Wt=n($a,"SPAN",{});var Qr=r(Wt);gl=s(Qr,"Customizing the layout of your demo"),Qr.forEach(o),$a.forEach(o),Wo=h(t),g=n(t,"P",{});var W=r(g);vl=s(W,"How can we use "),Ut=n(W,"CODE",{});var Vr=r(Ut);bl=s(Vr,"Blocks"),Vr.forEach(o),yl=s(W," to customize the layout of our demo? By default, "),Jt=n(W,"CODE",{});var Xr=r(Jt);xl=s(Xr,"Blocks"),Xr.forEach(o),_l=s(W," renders the components that you create vertically in one column. You can change that by creating additional columns "),Kt=n(W,"CODE",{});var Zr=r(Kt);kl=s(Zr,"with gradio.Column():"),Zr.forEach(o),El=s(W," or rows "),Qt=n(W,"CODE",{});var ei=r(Qt);$l=s(ei,"with gradio.Row():"),ei.forEach(o),jl=s(W," and creating components within those contexts."),W.forEach(o),Uo=h(t),D=n(t,"P",{});var xe=r(D);Tl=s(xe,"Here\u2019s what you should keep in mind: any components created under a "),Vt=n(xe,"CODE",{});var ti=r(Vt);Cl=s(ti,"Column"),ti.forEach(o),Il=s(xe," (this is also the default) will be laid out vertically. Any component created under a "),Xt=n(xe,"CODE",{});var oi=r(Xt);Bl=s(oi,"Row"),oi.forEach(o),Pl=s(xe," will be laid out horizontally, similar to the "),Oe=n(xe,"A",{href:!0,rel:!0});var ai=r(Oe);ql=s(ai,"flexbox model in web development"),ai.forEach(o),Ol=s(xe,"."),xe.forEach(o),Jo=h(t),S=n(t,"P",{});var _e=r(S);Al=s(_e,"Finally, you can also create tabs for your demo by using the "),Zt=n(_e,"CODE",{});var si=r(Zt);Dl=s(si,"with gradio.Tabs()"),si.forEach(o),Sl=s(_e," context manager. Within this context, you can create multiple tabs by specifying "),eo=n(_e,"CODE",{});var li=r(eo);Fl=s(li,"with gradio.TabItem(name_of_tab):"),li.forEach(o),Nl=s(_e," children. Any component created inside of a "),to=n(_e,"CODE",{});var ni=r(to);Ll=s(ni,"with gradio.TabItem(name_of_tab):"),ni.forEach(o),Rl=s(_e," context appears in that tab."),_e.forEach(o),Ko=h(t),ce=n(t,"P",{});var ja=r(ce);Gl=s(ja,"Now let\u2019s add a "),oo=n(ja,"CODE",{});var ri=r(oo);Ml=s(ri,"flip_image()"),ri.forEach(o),zl=s(ja," function to our demo and add a new tab that flips images. Below is an example with 2 tabs and also uses a Row:"),ja.forEach(o),Qo=h(t),j(Ae.$$.fragment,t),Vo=h(t),x=n(t,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),r(x).forEach(o),Xo=h(t),pe=n(t,"P",{});var Ta=r(pe);Yl=s(Ta,"You\u2019ll notice that in this example, we\u2019ve also created a "),ao=n(Ta,"CODE",{});var ii=r(ao);Hl=s(ii,"Button"),ii.forEach(o),Wl=s(Ta," component in each tab, and we\u2019ve assigned a click event to each button, which is what actually runs the function."),Ta.forEach(o),Zo=h(t),Z=n(t,"H3",{class:!0});var Ca=r(Z);ue=n(Ca,"A",{id:!0,class:!0,href:!0});var ci=r(ue);so=n(ci,"SPAN",{});var pi=r(so);j(De.$$.fragment,pi),pi.forEach(o),ci.forEach(o),Ul=h(Ca),lo=n(Ca,"SPAN",{});var ui=r(lo);Jl=s(ui,"Exploring events and state"),ui.forEach(o),Ca.forEach(o),ea=h(t),he=n(t,"P",{});var Ia=r(he);Kl=s(Ia,"Just as you can control the layout, "),no=n(Ia,"CODE",{});var hi=r(no);Ql=s(hi,"Blocks"),hi.forEach(o),Vl=s(Ia," gives you fine-grained control over what events trigger function calls. Each component and many layouts have specific events that they support."),Ia.forEach(o),ta=h(t),v=n(t,"P",{});var U=r(v);Xl=s(U,"For example, the "),ro=n(U,"CODE",{});var di=r(ro);Zl=s(di,"Textbox"),di.forEach(o),en=s(U," component has 2 events: "),io=n(U,"CODE",{});var fi=r(io);tn=s(fi,"change()"),fi.forEach(o),on=s(U," (when the value inside of the textbox changes), and "),co=n(U,"CODE",{});var mi=r(co);an=s(mi,"submit()"),mi.forEach(o),sn=s(U," (when a user presses the enter key while focused on the textbox). More complex components can have even more events: for example, the "),po=n(U,"CODE",{});var wi=r(po);ln=s(wi,"Audio"),wi.forEach(o),nn=s(U," component also has separate events for when the audio file is played, cleared, paused, etc. See the documentation for the events each component supports."),U.forEach(o),oa=h(t),M=n(t,"P",{});var tt=r(M);rn=s(tt,"You can attach event trigger to none, one, or more of these events. You create an event trigger by calling the name of the event on the component instance as a function \u2014 e.g. "),uo=n(tt,"CODE",{});var gi=r(uo);cn=s(gi,"textbox.change(...)"),gi.forEach(o),pn=s(tt," or "),ho=n(tt,"CODE",{});var vi=r(ho);un=s(vi,"btn.click(...)"),vi.forEach(o),hn=s(tt,". The function takes in three parameters, as discussed above:"),tt.forEach(o),aa=h(t),z=n(t,"UL",{});var ot=r(z);Ue=n(ot,"LI",{});var Wn=r(Ue);fo=n(Wn,"CODE",{});var bi=r(fo);dn=s(bi,"fn"),bi.forEach(o),fn=s(Wn,": the function to run"),Wn.forEach(o),mn=h(ot),Je=n(ot,"LI",{});var Un=r(Je);mo=n(Un,"CODE",{});var yi=r(mo);wn=s(yi,"inputs"),yi.forEach(o),gn=s(Un,": a (list of) component(s) whose values should supplied as the input parameters to the function. Each component\u2019s value gets mapped to the corresponding function parameter, in order. This parameter can be None if the function does not take any parameters."),Un.forEach(o),vn=h(ot),Ke=n(ot,"LI",{});var Jn=r(Ke);wo=n(Jn,"CODE",{});var xi=r(wo);bn=s(xi,"outputs"),xi.forEach(o),yn=s(Jn,": a (list of) component(s) whose values should be updated based on the values returned by the function. Each return value sets the corresponding component\u2019s value, in order. This parameter can be None if the function does not return anything."),Jn.forEach(o),ot.forEach(o),sa=h(t),Qe=n(t,"P",{});var _i=r(Qe);xn=s(_i,"You can even make the input and output component be the same component, as we do in this example that uses a GPT model to do text completion:"),_i.forEach(o),la=h(t),j(Se.$$.fragment,t),na=h(t),_=n(t,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),r(_).forEach(o),ra=h(t),ee=n(t,"H3",{class:!0});var Ba=r(ee);de=n(Ba,"A",{id:!0,class:!0,href:!0});var ki=r(de);go=n(ki,"SPAN",{});var Ei=r(go);j(Fe.$$.fragment,Ei),Ei.forEach(o),ki.forEach(o),_n=h(Ba),vo=n(Ba,"SPAN",{});var $i=r(vo);kn=s($i,"Creating multi-step demos"),$i.forEach(o),Ba.forEach(o),ia=h(t),Y=n(t,"P",{});var at=r(Y);En=s(at,"In some cases, you might want a "),bo=n(at,"EM",{});var ji=r(bo);$n=s(ji,"multi-step demo"),ji.forEach(o),jn=s(at,", in which you reuse the output of one function as the input to the next. This is really easy to do with "),yo=n(at,"CODE",{});var Ti=r(yo);Tn=s(Ti,"Blocks"),Ti.forEach(o),Cn=s(at,", as you can use a component for the input of one event trigger but the output of another. Take a look at the text component in the example below, its value is the result of a speech-to-text model, but also gets passed into a sentiment analysis model:"),at.forEach(o),ca=h(t),j(Ne.$$.fragment,t),pa=h(t),k=n(t,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),r(k).forEach(o),ua=h(t),te=n(t,"H3",{class:!0});var Pa=r(te);fe=n(Pa,"A",{id:!0,class:!0,href:!0});var Ci=r(fe);xo=n(Ci,"SPAN",{});var Ii=r(xo);j(Le.$$.fragment,Ii),Ii.forEach(o),Ci.forEach(o),In=h(Pa),_o=n(Pa,"SPAN",{});var Bi=r(_o);Bn=s(Bi,"Updating Component Properties"),Bi.forEach(o),Pa.forEach(o),ha=h(t),me=n(t,"P",{});var qa=r(me);Pn=s(qa,"So far, we have seen how to create events to update the value of another component. But what happens if you want to change other properties of a component, like the visibility of a textbox or the choices in a radio button group? You can do this by returning a component class\u2019s "),ko=n(qa,"CODE",{});var Pi=r(ko);qn=s(Pi,"update()"),Pi.forEach(o),On=s(qa," method instead of a regular return value from your function."),qa.forEach(o),da=h(t),Ve=n(t,"P",{});var qi=r(Ve);An=s(qi,"This is most easily illustrated with an example:"),qi.forEach(o),fa=h(t),j(Re.$$.fragment,t),ma=h(t),E=n(t,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),r(E).forEach(o),wa=h(t),f=n(t,"P",{});var F=r(f);Dn=s(F,"We just explored all the core concepts of "),Eo=n(F,"CODE",{});var Oi=r(Eo);Sn=s(Oi,"Blocks"),Oi.forEach(o),Fn=s(F,"! Just like with "),$o=n(F,"CODE",{});var Ai=r($o);Nn=s(Ai,"Interfaces"),Ai.forEach(o),Ln=s(F,", you can create cool demos that can be shared by using "),jo=n(F,"CODE",{});var Di=r(jo);Rn=s(Di,"share=True"),Di.forEach(o),Gn=s(F," in the "),To=n(F,"CODE",{});var Si=r(To);Mn=s(Si,"launch()"),Si.forEach(o),zn=s(F," method or deployed on "),Ge=n(F,"A",{href:!0,rel:!0});var Fi=r(Ge);Yn=s(Fi,"Hugging Face Spaces"),Fi.forEach(o),Hn=s(F,"."),F.forEach(o),this.h()},h(){p(w,"name","hf:doc:metadata"),p(w,"content",JSON.stringify(Wi)),p(oe,"id","introduction-to-gradio-blocks"),p(oe,"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(oe,"href","#introduction-to-gradio-blocks"),p(N,"class","relative group"),p(se,"id","why-blocks"),p(se,"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(se,"href","#why-blocks"),p(K,"class","relative group"),p(le,"id","creating-a-simple-demo-using-blocks"),p(le,"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(le,"href","#creating-a-simple-demo-using-blocks"),p(Q,"class","relative group"),Io(b.src,Kn="https://hf.space/gradioiframe/course-demos/flip_text/+")||p(b,"src",Kn),p(b,"frameborder","0"),p(b,"height","400"),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(Pe,"href","https://www.gradio.app/docs/"),p(Pe,"rel","nofollow"),p(ie,"id","customizing-the-layout-of-your-demo"),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","#customizing-the-layout-of-your-demo"),p(X,"class","relative group"),p(Oe,"href","https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"),p(Oe,"rel","nofollow"),Io(x.src,Qn="https://hf.space/gradioiframe/course-demos/flip_text_image/+")||p(x,"src",Qn),p(x,"frameborder","0"),p(x,"height","450"),p(x,"title","Gradio app"),p(x,"class","container p-0 flex-grow space-iframe"),p(x,"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(x,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),p(ue,"id","exploring-events-and-state"),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","#exploring-events-and-state"),p(Z,"class","relative group"),Io(_.src,Vn="https://hf.space/gradioiframe/course-demos/blocks_gpt/+")||p(_,"src",Vn),p(_,"frameborder","0"),p(_,"height","300"),p(_,"title","Gradio app"),p(_,"class","container p-0 flex-grow space-iframe"),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(_,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),p(de,"id","creating-multistep-demos"),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","#creating-multistep-demos"),p(ee,"class","relative group"),Io(k.src,Xn="https://hf.space/gradioiframe/course-demos/blocks_multi_step/+")||p(k,"src",Xn),p(k,"frameborder","0"),p(k,"height","550"),p(k,"title","Gradio app"),p(k,"class","container p-0 flex-grow space-iframe"),p(k,"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(k,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),p(fe,"id","updating-component-properties"),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","#updating-component-properties"),p(te,"class","relative group"),Io(E.src,Zn="https://hf.space/gradioiframe/course-demos/blocks_update_component_properties/+")||p(E,"src",Zn),p(E,"frameborder","0"),p(E,"height","300"),p(E,"title","Gradio app"),p(E,"class","container p-0 flex-grow space-iframe"),p(E,"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(E,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),p(Ge,"href","https://huggingface.co/spaces"),p(Ge,"rel","nofollow")},m(t,i){e(document.head,w),c(t,R,i),c(t,N,i),e(N,oe),e(oe,st),T(ke,st,null),e(N,Oa),e(N,lt),e(lt,Aa),c(t,qo,i),c(t,P,i),e(P,Da),e(P,nt),e(nt,Sa),e(P,Fa),e(P,rt),e(rt,Na),e(P,La),e(P,it),e(it,Ra),e(P,Ga),c(t,Oo,i),c(t,G,i),e(G,Ma),e(G,ct),e(ct,za),e(G,Ya),e(G,pt),e(pt,Ha),e(G,Wa),c(t,Ao,i),c(t,ae,i),e(ae,ut),e(ut,Ee),e(Ee,Ua),e(Ee,ht),e(ht,Ja),e(Ee,Ka),e(ae,Qa),e(ae,dt),e(dt,J),e(J,Va),e(J,ft),e(ft,Xa),e(J,Za),e(J,mt),e(mt,es),e(J,ts),c(t,Do,i),c(t,K,i),e(K,se),e(se,wt),T($e,wt,null),e(K,os),e(K,gt),e(gt,as),c(t,So,i),c(t,q,i),e(q,ss),e(q,vt),e(vt,ls),e(q,ns),e(q,bt),e(bt,rs),e(q,is),e(q,yt),e(yt,cs),e(q,ps),c(t,Fo,i),c(t,O,i),e(O,xt),e(xt,us),e(O,hs),e(O,_t),e(_t,ds),e(O,fs),e(O,kt),e(kt,ms),e(O,ws),e(O,Et),e(Et,gs),c(t,No,i),c(t,Ye,i),e(Ye,vs),c(t,Lo,i),c(t,Q,i),e(Q,le),e(le,$t),T(je,$t,null),e(Q,bs),e(Q,jt),e(jt,ys),c(t,Ro,i),c(t,He,i),e(He,xs),c(t,Go,i),T(Te,t,i),c(t,Mo,i),c(t,b,i),c(t,zo,i),c(t,We,i),e(We,_s),c(t,Yo,i),c(t,A,i),e(A,ne),e(ne,Ce),e(Ce,ks),e(Ce,Tt),e(Tt,Es),e(Ce,$s),e(ne,js),T(re,ne,null),e(ne,Ts),e(A,Cs),e(A,Ct),e(Ct,Ie),e(Ie,Is),e(Ie,It),e(It,Bs),e(Ie,Ps),e(A,qs),e(A,V),e(V,y),e(y,Os),e(y,Bt),e(Bt,As),e(y,Ds),e(y,Pt),e(Pt,Ss),e(y,Fs),e(y,qt),e(qt,Ns),e(y,Ls),e(y,Ot),e(Ot,Rs),e(y,Gs),e(V,Ms),e(V,d),e(d,zs),e(d,At),e(At,Ys),e(d,Hs),e(d,Dt),e(Dt,Ws),e(d,Us),e(d,St),e(St,Js),e(d,Ks),e(d,Ft),e(Ft,Qs),e(d,Vs),e(d,Nt),e(Nt,Xs),e(d,Zs),e(d,Lt),e(Lt,el),e(d,tl),e(d,Rt),e(Rt,ol),e(d,al),e(V,sl),e(V,Be),e(Be,ll),e(Be,Pe),e(Pe,nl),e(Be,rl),e(A,il),e(A,Gt),e(Gt,L),e(L,cl),e(L,Mt),e(Mt,pl),e(L,ul),e(L,zt),e(zt,hl),e(L,dl),e(L,Yt),e(Yt,fl),e(L,ml),c(t,Ho,i),c(t,X,i),e(X,ie),e(ie,Ht),T(qe,Ht,null),e(X,wl),e(X,Wt),e(Wt,gl),c(t,Wo,i),c(t,g,i),e(g,vl),e(g,Ut),e(Ut,bl),e(g,yl),e(g,Jt),e(Jt,xl),e(g,_l),e(g,Kt),e(Kt,kl),e(g,El),e(g,Qt),e(Qt,$l),e(g,jl),c(t,Uo,i),c(t,D,i),e(D,Tl),e(D,Vt),e(Vt,Cl),e(D,Il),e(D,Xt),e(Xt,Bl),e(D,Pl),e(D,Oe),e(Oe,ql),e(D,Ol),c(t,Jo,i),c(t,S,i),e(S,Al),e(S,Zt),e(Zt,Dl),e(S,Sl),e(S,eo),e(eo,Fl),e(S,Nl),e(S,to),e(to,Ll),e(S,Rl),c(t,Ko,i),c(t,ce,i),e(ce,Gl),e(ce,oo),e(oo,Ml),e(ce,zl),c(t,Qo,i),T(Ae,t,i),c(t,Vo,i),c(t,x,i),c(t,Xo,i),c(t,pe,i),e(pe,Yl),e(pe,ao),e(ao,Hl),e(pe,Wl),c(t,Zo,i),c(t,Z,i),e(Z,ue),e(ue,so),T(De,so,null),e(Z,Ul),e(Z,lo),e(lo,Jl),c(t,ea,i),c(t,he,i),e(he,Kl),e(he,no),e(no,Ql),e(he,Vl),c(t,ta,i),c(t,v,i),e(v,Xl),e(v,ro),e(ro,Zl),e(v,en),e(v,io),e(io,tn),e(v,on),e(v,co),e(co,an),e(v,sn),e(v,po),e(po,ln),e(v,nn),c(t,oa,i),c(t,M,i),e(M,rn),e(M,uo),e(uo,cn),e(M,pn),e(M,ho),e(ho,un),e(M,hn),c(t,aa,i),c(t,z,i),e(z,Ue),e(Ue,fo),e(fo,dn),e(Ue,fn),e(z,mn),e(z,Je),e(Je,mo),e(mo,wn),e(Je,gn),e(z,vn),e(z,Ke),e(Ke,wo),e(wo,bn),e(Ke,yn),c(t,sa,i),c(t,Qe,i),e(Qe,xn),c(t,la,i),T(Se,t,i),c(t,na,i),c(t,_,i),c(t,ra,i),c(t,ee,i),e(ee,de),e(de,go),T(Fe,go,null),e(ee,_n),e(ee,vo),e(vo,kn),c(t,ia,i),c(t,Y,i),e(Y,En),e(Y,bo),e(bo,$n),e(Y,jn),e(Y,yo),e(yo,Tn),e(Y,Cn),c(t,ca,i),T(Ne,t,i),c(t,pa,i),c(t,k,i),c(t,ua,i),c(t,te,i),e(te,fe),e(fe,xo),T(Le,xo,null),e(te,In),e(te,_o),e(_o,Bn),c(t,ha,i),c(t,me,i),e(me,Pn),e(me,ko),e(ko,qn),e(me,On),c(t,da,i),c(t,Ve,i),e(Ve,An),c(t,fa,i),T(Re,t,i),c(t,ma,i),c(t,E,i),c(t,wa,i),c(t,f,i),e(f,Dn),e(f,Eo),e(Eo,Sn),e(f,Fn),e(f,$o),e($o,Nn),e(f,Ln),e(f,jo),e(jo,Rn),e(f,Gn),e(f,To),e(To,Mn),e(f,zn),e(f,Ge),e(Ge,Yn),e(f,Hn),ga=!0},p(t,[i]){const Me={};i&2&&(Me.$$scope={dirty:i,ctx:t}),re.$set(Me)},i(t){ga||(C(ke.$$.fragment,t),C($e.$$.fragment,t),C(je.$$.fragment,t),C(Te.$$.fragment,t),C(re.$$.fragment,t),C(qe.$$.fragment,t),C(Ae.$$.fragment,t),C(De.$$.fragment,t),C(Se.$$.fragment,t),C(Fe.$$.fragment,t),C(Ne.$$.fragment,t),C(Le.$$.fragment,t),C(Re.$$.fragment,t),ga=!0)},o(t){I(ke.$$.fragment,t),I($e.$$.fragment,t),I(je.$$.fragment,t),I(Te.$$.fragment,t),I(re.$$.fragment,t),I(qe.$$.fragment,t),I(Ae.$$.fragment,t),I(De.$$.fragment,t),I(Se.$$.fragment,t),I(Fe.$$.fragment,t),I(Ne.$$.fragment,t),I(Le.$$.fragment,t),I(Re.$$.fragment,t),ga=!1},d(t){o(w),t&&o(R),t&&o(N),B(ke),t&&o(qo),t&&o(P),t&&o(Oo),t&&o(G),t&&o(Ao),t&&o(ae),t&&o(Do),t&&o(K),B($e),t&&o(So),t&&o(q),t&&o(Fo),t&&o(O),t&&o(No),t&&o(Ye),t&&o(Lo),t&&o(Q),B(je),t&&o(Ro),t&&o(He),t&&o(Go),B(Te,t),t&&o(Mo),t&&o(b),t&&o(zo),t&&o(We),t&&o(Yo),t&&o(A),B(re),t&&o(Ho),t&&o(X),B(qe),t&&o(Wo),t&&o(g),t&&o(Uo),t&&o(D),t&&o(Jo),t&&o(S),t&&o(Ko),t&&o(ce),t&&o(Qo),B(Ae,t),t&&o(Vo),t&&o(x),t&&o(Xo),t&&o(pe),t&&o(Zo),t&&o(Z),B(De),t&&o(ea),t&&o(he),t&&o(ta),t&&o(v),t&&o(oa),t&&o(M),t&&o(aa),t&&o(z),t&&o(sa),t&&o(Qe),t&&o(la),B(Se,t),t&&o(na),t&&o(_),t&&o(ra),t&&o(ee),B(Fe),t&&o(ia),t&&o(Y),t&&o(ca),B(Ne,t),t&&o(pa),t&&o(k),t&&o(ua),t&&o(te),B(Le),t&&o(ha),t&&o(me),t&&o(da),t&&o(Ve),t&&o(fa),B(Re,t),t&&o(ma),t&&o(E),t&&o(wa),t&&o(f)}}}const Wi={local:"introduction-to-gradio-blocks",sections:[{local:"why-blocks",title:"Why Blocks \u{1F9F1}?"},{local:"creating-a-simple-demo-using-blocks",title:"Creating a simple demo using Blocks"},{local:"customizing-the-layout-of-your-demo",title:"Customizing the layout of your demo"},{local:"exploring-events-and-state",title:"Exploring events and state"},{local:"creating-multistep-demos",title:"Creating multi-step demos"},{local:"updating-component-properties",title:"Updating Component Properties"}],title:"Introduction to Gradio Blocks"};function Ui(Po){return Mi(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Xi extends Ni{constructor(w){super();Li(this,w,Ui,Hi,Ri,{})}}export{Xi as default,Wi as metadata};
