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