import{S as Hl,i as zl,s as Vl,e as o,k as p,w as k,t as h,M as Kl,c as a,d as e,m as g,a as s,x as y,h as c,b as r,N as qe,G as n,g as i,y as _,q as x,o as w,B as E,v as Ul}from"../../chunks/vendor-hf-doc-builder.js";import{T as Jl}from"../../chunks/Tip-hf-doc-builder.js";import{I as Mt}from"../../chunks/IconCopyLink-hf-doc-builder.js";import{C as Pe}from"../../chunks/CodeBlock-hf-doc-builder.js";import{D as Wl}from"../../chunks/DocNotebookDropdown-hf-doc-builder.js";function Ql(Ie){let f;return{c(){f=h("\u{1F64B}N\u1EBFu b\u1EA1n kh\xF4ng quen v\u1EDBi c\xE2u l\u1EC7nh `with` trong Python, ch\xFAng t\xF4i khuy\xEAn b\u1EA1n n\xEAn xem [h\u01B0\u1EDBng d\u1EABn](https://realpython.com/python-with-statement/)  tuy\u1EC7t v\u1EDDi t\u1EEB Real Python. Quay l\u1EA1i \u0111\xE2y sau khi \u0111\u1ECDc xong \u{1F917}")},l(G){f=c(G,"\u{1F64B}N\u1EBFu b\u1EA1n kh\xF4ng quen v\u1EDBi c\xE2u l\u1EC7nh `with` trong Python, ch\xFAng t\xF4i khuy\xEAn b\u1EA1n n\xEAn xem [h\u01B0\u1EDBng d\u1EABn](https://realpython.com/python-with-statement/)  tuy\u1EC7t v\u1EDDi t\u1EEB Real Python. Quay l\u1EA1i \u0111\xE2y sau khi \u0111\u1ECDc xong \u{1F917}")},m(G,N){i(G,f,N)},d(G){G&&e(f)}}}function Xl(Ie){let f,G,N,et,an,_t,Fh,sn,Lh,De,xt,Oe,P,Gh,ln,Rh,Mh,rn,Hh,zh,pn,Vh,Kh,Ae,R,Uh,gn,Jh,Wh,mn,Qh,Xh,Se,ht,un,wt,Yh,dn,Zh,tc,nc,fn,J,ec,bn,hc,cc,vn,oc,ac,Ne,W,ct,kn,Et,sc,yn,lc,Fe,I,ic,_n,rc,pc,xn,gc,mc,wn,uc,dc,Le,D,En,fc,bc,$n,vc,kc,Tn,yc,_c,jn,xc,Ge,Ht,wc,Re,Q,ot,Bn,$t,Ec,Cn,$c,Me,zt,Tc,He,Tt,ze,$,Ya,Ve,Vt,jc,Ke,Kt,jt,Bc,qn,Cc,qc,Ue,at,Je,Ut,Pc,We,F,Pn,Bt,Ic,In,Dc,Oc,Ac,X,T,Sc,Dn,Nc,Fc,On,Lc,Gc,An,Rc,Mc,Sn,Hc,zc,Vc,m,Kc,Nn,Uc,Jc,Fn,Wc,Qc,Ln,Xc,Yc,Gn,Zc,to,Rn,no,eo,Mn,ho,co,Hn,oo,ao,so,Ct,lo,qt,io,ro,po,zn,L,go,Vn,mo,uo,Kn,fo,bo,Un,vo,ko,Qe,Y,st,Jn,Pt,yo,Wn,_o,Xe,b,xo,Qn,wo,Eo,Xn,$o,To,Yn,jo,Bo,Zn,Co,qo,Ye,O,Po,te,Io,Do,ne,Oo,Ao,It,So,No,Ze,A,Fo,ee,Lo,Go,he,Ro,Mo,ce,Ho,zo,th,lt,Vo,oe,Ko,Uo,nh,Dt,eh,j,Za,hh,it,Jo,ae,Wo,Qo,ch,Z,rt,se,Ot,Xo,le,Yo,oh,pt,Zo,ie,ta,na,ah,v,ea,re,ha,ca,pe,oa,aa,ge,sa,la,me,ia,ra,sh,M,pa,ue,ga,ma,de,ua,da,lh,H,Jt,fe,fa,ba,va,Wt,be,ka,ya,_a,Qt,ve,xa,wa,ih,Xt,Ea,rh,At,ph,B,ts,gh,tt,gt,ke,St,$a,ye,Ta,mh,z,ja,_e,Ba,Ca,xe,qa,Pa,uh,Nt,dh,C,ns,fh,nt,mt,we,Ft,Ia,Ee,Da,bh,ut,Oa,$e,Aa,Sa,vh,Yt,Na,kh,Lt,yh,q,es,_h,u,Fa,Te,La,Ga,je,Ra,Ma,Be,Ha,za,Ce,Va,Ka,Gt,Ua,Ja,xh;return _t=new Mt({}),xt=new Wl({props:{classNames:"absolute z-10 right-0 top-0",options:[{label:"Google Colab",value:"https://colab.research.google.com/github/huggingface/notebooks/blob/master/course/vi/chapter9/section7.ipynb"},{label:"Aws Studio",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/vi/chapter9/section7.ipynb"}]}}),Et=new Mt({}),$t=new Mt({}),Tt=new Pe({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()`}}),at=new Jl({props:{$$slots:{default:[Ql]},$$scope:{ctx:Ie}}}),Pt=new Mt({}),Dt=new Pe({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()`}}),Ot=new Mt({}),At=new Pe({props:{code:`import gradio as gr

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


def complete_with_gpt(text):
    # S\u1EED d\u1EE5ng 50 k\xED t\u1EF1 cu\u1ED1i c\u1EE7a v\u0103n b\u1EA3n l\xE0m ng\u1EEF c\u1EA3nh
    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"># S\u1EED d\u1EE5ng 50 k\xED t\u1EF1 cu\u1ED1i c\u1EE7a v\u0103n b\u1EA3n l\xE0m ng\u1EEF c\u1EA3nh</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()`}}),St=new Mt({}),Nt=new Pe({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()`}}),Ft=new Mt({}),Lt=new Pe({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(){f=o("meta"),G=p(),N=o("h1"),et=o("a"),an=o("span"),k(_t.$$.fragment),Fh=p(),sn=o("span"),Lh=h("Gi\u1EDBi thi\u1EC7u v\u1EC1 Gradio Blocks"),De=p(),k(xt.$$.fragment),Oe=p(),P=o("p"),Gh=h("Trong c\xE1c ph\u1EA7n tr\u01B0\u1EDBc, ch\xFAng ta \u0111\xE3 t\xECm hi\u1EC3u v\xE0 t\u1EA1o c\xE1c b\u1EA3n demo b\u1EB1ng c\xE1ch s\u1EED d\u1EE5ng l\u1EDBp "),ln=o("code"),Rh=h("Interface"),Mh=h(". Trong ph\u1EA7n n\xE0y, ch\xFAng t\xF4i s\u1EBD gi\u1EDBi thi\u1EC7u API c\u1EA5p th\u1EA5p "),rn=o("strong"),Hh=h("m\u1EDBi \u0111\u01B0\u1EE3c ph\xE1t tri\u1EC3n"),zh=h(" c\u1EE7a m\xECnh c\xF3 t\xEAn l\xE0 "),pn=o("code"),Vh=h("gradio.Blocks"),Kh=h("."),Ae=p(),R=o("p"),Uh=h("B\xE2y gi\u1EDD, s\u1EF1 kh\xE1c bi\u1EC7t gi\u1EEFa "),gn=o("code"),Jh=h("Interface"),Wh=h(" v\xE0 "),mn=o("code"),Qh=h("Blocks"),Xh=h("l\xE0 g\xEC?"),Se=p(),ht=o("ul"),un=o("li"),wt=o("p"),Yh=h("\u26A1 "),dn=o("code"),Zh=h("Interface"),tc=h(": m\u1ED9t API c\u1EA5p cao cho ph\xE9p b\u1EA1n t\u1EA1o m\u1ED9t b\u1EA3n demo h\u1ECDc m\xE1y \u0111\u1EA7y \u0111\u1EE7 ch\u1EC9 \u0111\u01A1n gi\u1EA3n b\u1EB1ng c\xE1ch cung c\u1EA5p danh s\xE1ch c\xE1c \u0111\u1EA7u v\xE0o v\xE0 \u0111\u1EA7u ra."),nc=p(),fn=o("li"),J=o("p"),ec=h("\u{1F9F1} "),bn=o("code"),hc=h("Blocks"),cc=h(": m\u1ED9t API c\u1EA5p th\u1EA5p cho ph\xE9p b\u1EA1n c\xF3 to\xE0n quy\u1EC1n ki\u1EC3m so\xE1t c\xE1c lu\u1ED3ng d\u1EEF li\u1EC7u v\xE0 b\u1ED1 c\u1EE5c c\u1EE7a \u1EE9ng d\u1EE5ng c\u1EE7a m\xECnh. B\u1EA1n c\xF3 th\u1EC3 x\xE2y d\u1EF1ng c\xE1c \u1EE9ng d\u1EE5ng nhi\u1EC1u b\u01B0\u1EDBc, r\u1EA5t ph\u1EE9c t\u1EA1p b\u1EB1ng c\xE1ch s\u1EED d\u1EE5ng "),vn=o("code"),oc=h("Blocks"),ac=h(" (nh\u01B0 trong \u201Cc\xE1c kh\u1ED1i x\xE2y d\u1EF1ng\u201D)."),Ne=p(),W=o("h3"),ct=o("a"),kn=o("span"),k(Et.$$.fragment),sc=p(),yn=o("span"),lc=h("T\u1EA1i sao l\u1EA1i l\xE0 Blocks \u{1F9F1}?"),Fe=p(),I=o("p"),ic=h("Nh\u01B0 ch\xFAng ta \u0111\xE3 th\u1EA5y trong c\xE1c ph\u1EA7n tr\u01B0\u1EDBc, l\u1EDBp "),_n=o("code"),rc=h("Interface"),pc=h(" cho ph\xE9p b\u1EA1n d\u1EC5 d\xE0ng t\u1EA1o c\xE1c b\u1EA3n demo h\u1ECDc m\xE1y ch\xEDnh th\u1EE9c ch\u1EC9 v\u1EDBi m\u1ED9t v\xE0i d\xF2ng m\xE3. API "),xn=o("code"),gc=h("Interface"),mc=h(" c\u1EF1c k\u1EF3 d\u1EC5 s\u1EED d\u1EE5ng nh\u01B0ng thi\u1EBFu t\xEDnh linh ho\u1EA1t m\xE0 API "),wn=o("code"),uc=h("Blocks"),dc=h(" cung c\u1EA5p. V\xED d\u1EE5: b\u1EA1n c\xF3 th\u1EC3 mu\u1ED1n:"),Le=p(),D=o("ul"),En=o("li"),fc=h("Nh\xF3m c\xE1c b\u1EA3n demo c\xF3 li\xEAn quan l\u1EA1i v\u1EDBi nhau d\u01B0\u1EDBi d\u1EA1ng nhi\u1EC1u tab trong m\u1ED9t \u1EE9ng d\u1EE5ng web"),bc=p(),$n=o("li"),vc=h("Thay \u0111\u1ED5i b\u1ED1 c\u1EE5c c\u1EE7a b\u1EA3n demo c\u1EE7a b\u1EA1n, v\xED d\u1EE5: \u0111\u1EC3 ch\u1EC9 \u0111\u1ECBnh v\u1ECB tr\xED c\u1EE7a c\xE1c \u0111\u1EA7u v\xE0o v\xE0 \u0111\u1EA7u ra"),kc=p(),Tn=o("li"),yc=h("C\xF3 giao di\u1EC7n nhi\u1EC1u b\u01B0\u1EDBc, trong \u0111\xF3 \u0111\u1EA7u ra c\u1EE7a m\u1ED9t m\xF4 h\xECnh tr\u1EDF th\xE0nh \u0111\u1EA7u v\xE0o cho m\xF4 h\xECnh ti\u1EBFp theo ho\u1EB7c c\xF3 c\xE1c lu\u1ED3ng d\u1EEF li\u1EC7u linh ho\u1EA1t h\u01A1n n\xF3i chung"),_c=p(),jn=o("li"),xc=h("Thay \u0111\u1ED5i thu\u1ED9c t\xEDnh c\u1EE7a m\u1ED9t th\xE0nh ph\u1EA7n (v\xED d\u1EE5: c\xE1c l\u1EF1a ch\u1ECDn trong danh s\xE1ch th\u1EA3 xu\u1ED1ng) ho\u1EB7c kh\u1EA3 n\u0103ng hi\u1EC3n th\u1ECB c\u1EE7a n\xF3 d\u1EF1a tr\xEAn \u0111\u1EA7u v\xE0o c\u1EE7a ng\u01B0\u1EDDi d\xF9ng"),Ge=p(),Ht=o("p"),wc=h("Ch\xFAng ta s\u1EBD kh\xE1m ph\xE1 t\u1EA5t c\u1EA3 c\xE1c kh\xE1i ni\u1EC7m n\xE0y trong c\xE1c ph\u1EA7n ti\u1EBFp theo."),Re=p(),Q=o("h3"),ot=o("a"),Bn=o("span"),k($t.$$.fragment),Ec=p(),Cn=o("span"),$c=h("T\u1EA1o m\u1ED9t b\u1EA3n demo \u0111\u01A1n gi\u1EA3n b\u1EB1ng c\xE1ch s\u1EED d\u1EE5ng Blocks"),Me=p(),zt=o("p"),Tc=h("Sau khi b\u1EA1n \u0111\xE3 c\xE0i \u0111\u1EB7t Gradio, h\xE3y ch\u1EA1y m\xE3 b\xEAn d\u01B0\u1EDBi d\u01B0\u1EDBi d\u1EA1ng t\u1EADp l\u1EC7nh Python, notebook Jupyter ho\u1EB7c s\u1ED5 ghi ch\xE9p Colab."),He=p(),k(Tt.$$.fragment),ze=p(),$=o("iframe"),Ve=p(),Vt=o("p"),jc=h("V\xED d\u1EE5 \u0111\u01A1n gi\u1EA3n \u1EDF tr\xEAn gi\u1EDBi thi\u1EC7u 4 kh\xE1i ni\u1EC7m l\xE0m n\u1EC1n t\u1EA3ng cho Blocks:"),Ke=p(),Kt=o("ol"),jt=o("li"),Bc=h("Blocks cho ph\xE9p b\u1EA1n x\xE2y d\u1EF1ng c\xE1c \u1EE9ng d\u1EE5ng web k\u1EBFt h\u1EE3p markdown, HTML, c\xE1c n\xFAt v\xE0 c\xE1c th\xE0nh ph\u1EA7n t\u01B0\u01A1ng t\xE1c \u0111\u01A1n gi\u1EA3n b\u1EB1ng c\xE1ch kh\u1EDFi t\u1EA1o c\xE1c \u0111\u1ED1i t\u01B0\u1EE3ng b\u1EB1ng Python b\xEAn trong ng\u1EEF c\u1EA3nh "),qn=o("code"),Cc=h("with gradio.Blocks"),qc=h("."),Ue=p(),k(at.$$.fragment),Je=p(),Ut=o("p"),Pc=h("Th\u1EE9 t\u1EF1 m\xE0 b\u1EA1n kh\u1EDFi t\u1EA1o c\xE1c th\xE0nh ph\u1EA7n quan tr\u1ECDng khi m\u1ED7i ph\u1EA7n t\u1EED \u0111\u01B0\u1EE3c hi\u1EC3n th\u1ECB v\xE0o \u1EE9ng d\u1EE5ng web theo th\u1EE9 t\u1EF1 n\xF3 \u0111\u01B0\u1EE3c t\u1EA1o. (C\xE1c b\u1ED1 c\u1EE5c ph\u1EE9c t\u1EA1p h\u01A1n \u0111\u01B0\u1EE3c th\u1EA3o lu\u1EADn b\xEAn d\u01B0\u1EDBi)"),We=p(),F=o("ol"),Pn=o("li"),Bt=o("p"),Ic=h("B\u1EA1n c\xF3 th\u1EC3 x\xE1c \u0111\u1ECBnh c\xE1c h\xE0m Python th\xF4ng th\u01B0\u1EDDng \u1EDF b\u1EA5t k\u1EF3 \u0111\xE2u trong m\xE3 c\u1EE7a m\xECnh v\xE0 ch\u1EA1y ch\xFAng v\u1EDBi \u0111\u1EA7u v\xE0o c\u1EE7a ng\u01B0\u1EDDi d\xF9ng b\u1EB1ng c\xE1ch s\u1EED d\u1EE5ng "),In=o("code"),Dc=h("Blocks"),Oc=h(". Trong v\xED d\u1EE5 c\u1EE7a m\xECnh, ch\xFAng ta c\xF3 m\u1ED9t h\xE0m \u0111\u01A1n gi\u1EA3n \u201Cl\u1EADt\u201D v\u0103n b\u1EA3n \u0111\u1EA7u v\xE0o, nh\u01B0ng b\u1EA1n c\xF3 th\u1EC3 vi\u1EBFt b\u1EA5t k\u1EF3 h\xE0m Python n\xE0o, t\u1EEB m\u1ED9t ph\xE9p t\xEDnh \u0111\u01A1n gi\u1EA3n \u0111\u1EBFn x\u1EED l\xFD c\xE1c d\u1EF1 \u0111o\xE1n t\u1EEB m\u1ED9t m\xF4 h\xECnh h\u1ECDc m\xE1y."),Ac=p(),X=o("li"),T=o("p"),Sc=h("B\u1EA1n c\xF3 th\u1EC3 g\xE1n c\xE1c s\u1EF1 ki\u1EC7n cho b\u1EA5t k\u1EF3 th\xE0nh ph\u1EA7n "),Dn=o("code"),Nc=h("Blocks"),Fc=h(" n\xE0o. \u0110i\u1EC1u n\xE0y s\u1EBD ch\u1EA1y h\xE0m c\u1EE7a b\u1EA1n khi th\xE0nh ph\u1EA7n \u0111\u01B0\u1EE3c nh\u1EA5p, thay \u0111\u1ED5i, v.v. Khi b\u1EA1n g\xE1n m\u1ED9t s\u1EF1 ki\u1EC7n, b\u1EA1n truy\u1EC1n v\xE0o ba tham s\u1ED1: "),On=o("code"),Lc=h("fn"),Gc=h(": h\xE0m c\u1EA7n \u0111\u01B0\u1EE3c g\u1ECDi,"),An=o("code"),Rc=h("inputs"),Mc=h(": (danh s\xE1ch) th\xE0nh ph\u1EA7n \u0111\u1EA7u v\xE0o (s), v\xE0 "),Sn=o("code"),Hc=h("outputs"),zc=h(": (danh s\xE1ch) c\xE1c th\xE0nh ph\u1EA7n \u0111\u1EA7u ra c\u1EA7n \u0111\u01B0\u1EE3c g\u1ECDi."),Vc=p(),m=o("p"),Kc=h("Trong v\xED d\u1EE5 tr\xEAn, ch\xFAng t\xF4i ch\u1EA1y h\xE0m "),Nn=o("code"),Uc=h("flip_text()"),Jc=h(" khi gi\xE1 tr\u1ECB trong "),Fn=o("code"),Wc=h("Textbox"),Qc=h(" c\xF3 t\xEAn \u0111\u1EA7u v\xE0o "),Ln=o("code"),Xc=h("input"),Yc=h(" thay \u0111\u1ED5i. S\u1EF1 ki\u1EC7n \u0111\u1ECDc gi\xE1 tr\u1ECB trong "),Gn=o("code"),Zc=h("input"),to=h(", truy\u1EC1n n\xF3 l\xE0m tham s\u1ED1 t\xEAn cho "),Rn=o("code"),no=h("flip_text()"),eo=h(", sau \u0111\xF3 tr\u1EA3 v\u1EC1 m\u1ED9t gi\xE1 tr\u1ECB \u0111\u01B0\u1EE3c g\xE1n cho "),Mn=o("code"),ho=h("Textbox"),co=h(" th\u1EE9 hai c\u1EE7a ch\xFAng ta c\xF3 t\xEAn l\xE0 "),Hn=o("code"),oo=h("output"),ao=h("."),so=p(),Ct=o("p"),lo=h("\u0110\u1EC3 xem danh s\xE1ch c\xE1c s\u1EF1 ki\u1EC7n m\xE0 m\u1ED7i th\xE0nh ph\u1EA7n h\u1ED7 tr\u1EE3, h\xE3y xem "),qt=o("a"),io=h("t\xE0i li\u1EC7u"),ro=h(" Gradio."),po=p(),zn=o("li"),L=o("p"),go=h("C\xE1c kh\u1ED1i t\u1EF1 \u0111\u1ED9ng t\xECm ra li\u1EC7u m\u1ED9t th\xE0nh ph\u1EA7n c\xF3 n\xEAn t\u01B0\u01A1ng t\xE1c (ch\u1EA5p nh\u1EADn \u0111\u1EA7u v\xE0o c\u1EE7a ng\u01B0\u1EDDi d\xF9ng) hay kh\xF4ng, d\u1EF1a tr\xEAn c\xE1c tr\xECnh k\xEDch ho\u1EA1t s\u1EF1 ki\u1EC7n m\xE0 b\u1EA1n x\xE1c \u0111\u1ECBnh. Trong v\xED d\u1EE5 c\u1EE7a ch\xFAng ta, h\u1ED9p v\u0103n b\u1EA3n \u0111\u1EA7u ti\xEAn l\xE0 t\u01B0\u01A1ng t\xE1c, v\xEC gi\xE1 tr\u1ECB c\u1EE7a n\xF3 \u0111\u01B0\u1EE3c s\u1EED d\u1EE5ng b\u1EDFi h\xE0m "),Vn=o("code"),mo=h("flip_text()"),uo=h(". H\u1ED9p v\u0103n b\u1EA3n th\u1EE9 hai kh\xF4ng t\u01B0\u01A1ng t\xE1c, v\xEC gi\xE1 tr\u1ECB c\u1EE7a n\xF3 kh\xF4ng bao gi\u1EDD \u0111\u01B0\u1EE3c s\u1EED d\u1EE5ng l\xE0m \u0111\u1EA7u v\xE0o. Trong m\u1ED9t s\u1ED1 tr\u01B0\u1EDDng h\u1EE3p, b\u1EA1n c\xF3 th\u1EC3 mu\u1ED1n ghi \u0111\xE8 \u0111i\u1EC1u n\xE0y, b\u1EA1n c\xF3 th\u1EC3 th\u1EF1c hi\u1EC7n b\u1EB1ng c\xE1ch truy\u1EC1n m\u1ED9t boolean \u0111\u1EBFn tham s\u1ED1 "),Kn=o("code"),fo=h("interactive"),bo=h(" c\u1EE7a th\xE0nh ph\u1EA7n (v\xED d\u1EE5:"),Un=o("code"),vo=h('gr.Textbox(placeholder="Flip this text", interactive=True)'),ko=h(")."),Qe=p(),Y=o("h3"),st=o("a"),Jn=o("span"),k(Pt.$$.fragment),yo=p(),Wn=o("span"),_o=h("T\xF9y ch\u1EC9nh b\u1ED1 c\u1EE5c c\u1EE7a b\u1EA3n demo c\u1EE7a b\u1EA1n"),Xe=p(),b=o("p"),xo=h("L\xE0m c\xE1ch n\xE0o ch\xFAng ta c\xF3 th\u1EC3 s\u1EED d\u1EE5ng "),Qn=o("code"),wo=h("Blocks"),Eo=h(" \u0111\u1EC3 t\xF9y ch\u1EC9nh b\u1ED1 c\u1EE5c b\u1EA3n demo c\u1EE7a m\xECnh? Theo m\u1EB7c \u0111\u1ECBnh, "),Xn=o("code"),$o=h("Blocks"),To=h(" hi\u1EC3n th\u1ECB c\xE1c th\xE0nh ph\u1EA7n m\xE0 b\u1EA1n t\u1EA1o theo chi\u1EC1u d\u1ECDc trong m\u1ED9t c\u1ED9t. B\u1EA1n c\xF3 th\u1EC3 thay \u0111\u1ED5i \u0111i\u1EC1u \u0111\xF3 b\u1EB1ng c\xE1ch t\u1EA1o c\xE1c c\u1ED9t b\u1ED5 sung "),Yn=o("code"),jo=h("with gradio.Column():"),Bo=h(" ho\u1EB7c c\xE1c h\xE0ng "),Zn=o("code"),Co=h("with gradio.Row():"),qo=h(" v\xE0 t\u1EA1o c\xE1c th\xE0nh ph\u1EA7n trong c\xE1c ng\u1EEF c\u1EA3nh \u0111\xF3."),Ye=p(),O=o("p"),Po=h("\u0110\xE2y l\xE0 nh\u1EEFng g\xEC b\u1EA1n n\xEAn ghi nh\u1EDB: b\u1EA5t k\u1EF3 th\xE0nh ph\u1EA7n n\xE0o \u0111\u01B0\u1EE3c t\u1EA1o trong m\u1ED9t "),te=o("code"),Io=h("Column"),Do=h(" (\u0111\xE2y c\u0169ng l\xE0 m\u1EB7c \u0111\u1ECBnh) s\u1EBD \u0111\u01B0\u1EE3c b\u1ED1 tr\xED theo chi\u1EC1u d\u1ECDc. B\u1EA5t k\u1EF3 th\xE0nh ph\u1EA7n n\xE0o \u0111\u01B0\u1EE3c t\u1EA1o trong m\u1ED9t "),ne=o("code"),Oo=h("Row"),Ao=h(" s\u1EBD \u0111\u01B0\u1EE3c b\u1ED1 tr\xED theo chi\u1EC1u ngang, t\u01B0\u01A1ng t\u1EF1 nh\u01B0 "),It=o("a"),So=h("m\xF4 h\xECnh flexbox trong ph\xE1t tri\u1EC3n web"),No=h("."),Ze=p(),A=o("p"),Fo=h("Cu\u1ED1i c\xF9ng, b\u1EA1n c\u0169ng c\xF3 th\u1EC3 t\u1EA1o c\xE1c tab cho b\u1EA3n demo c\u1EE7a m\xECnh b\u1EB1ng c\xE1ch s\u1EED d\u1EE5ng tr\xECnh qu\u1EA3n l\xFD ng\u1EEF c\u1EA3nh "),ee=o("code"),Lo=h("with gradio.Tabs()"),Go=h(". Trong ng\u1EEF c\u1EA3nh n\xE0y, b\u1EA1n c\xF3 th\u1EC3 t\u1EA1o nhi\u1EC1u tab b\u1EB1ng c\xE1ch ch\u1EC9 \u0111\u1ECBnh "),he=o("code"),Ro=h("with gradio.TabItem(name_of_tab):"),Mo=h(" children. B\u1EA5t k\u1EF3 th\xE0nh ph\u1EA7n n\xE0o \u0111\u01B0\u1EE3c t\u1EA1o b\xEAn trong ng\u1EEF c\u1EA3nh "),ce=o("code"),Ho=h("with gradio.TabItem(name_of_tab):"),zo=h(" s\u1EBD xu\u1EA5t hi\u1EC7n trong tab \u0111\xF3."),th=p(),lt=o("p"),Vo=h("B\xE2y gi\u1EDD, h\xE3y th\xEAm m\u1ED9t h\xE0m "),oe=o("code"),Ko=h("flip_image()"),Uo=h(" v\xE0o b\u1EA3n demo c\u1EE7a ch\xFAng ta v\xE0 th\xEAm m\u1ED9t tab m\u1EDBi \u0111\u1EC3 l\u1EADt h\xECnh \u1EA3nh. D\u01B0\u1EDBi \u0111\xE2y l\xE0 m\u1ED9t v\xED d\u1EE5 v\u1EDBi 2 tab v\xE0 c\u0169ng s\u1EED d\u1EE5ng Row:"),nh=p(),k(Dt.$$.fragment),eh=p(),j=o("iframe"),hh=p(),it=o("p"),Jo=h("B\u1EA1n s\u1EBD nh\u1EADn th\u1EA5y r\u1EB1ng trong v\xED d\u1EE5 n\xE0y, ch\xFAng ta c\u0169ng \u0111\xE3 t\u1EA1o ra m\u1ED9t th\xE0nh ph\u1EA7n "),ae=o("code"),Wo=h("Button"),Qo=h(" trong m\u1ED7i tab v\xE0 ch\u1EC9 \u0111\u1ECBnh m\u1ED9t s\u1EF1 ki\u1EC7n nh\u1EA5p chu\u1ED9t cho m\u1ED7i n\xFAt, \u0111\xF3 l\xE0 nh\u1EEFng g\xEC th\u1EF1c s\u1EF1 ch\u1EA1y h\xE0m."),ch=p(),Z=o("h3"),rt=o("a"),se=o("span"),k(Ot.$$.fragment),Xo=p(),le=o("span"),Yo=h("Kh\xE1m ph\xE1 c\xE1c s\u1EF1 ki\u1EC7n v\xE0 tr\u1EA1ng th\xE1i"),oh=p(),pt=o("p"),Zo=h("C\u0169ng gi\u1ED1ng nh\u01B0 b\u1EA1n c\xF3 th\u1EC3 ki\u1EC3m so\xE1t b\u1ED1 c\u1EE5c, "),ie=o("code"),ta=h("Blocks"),na=h(" cung c\u1EA5p cho b\u1EA1n kh\u1EA3 n\u0103ng ki\u1EC3m so\xE1t chi ti\u1EBFt \u0111\u1ED1i v\u1EDBi nh\u1EEFng s\u1EF1 ki\u1EC7n n\xE0o k\xEDch ho\u1EA1t h\xE0m g\u1ECDi. M\u1ED7i th\xE0nh ph\u1EA7n v\xE0 nhi\u1EC1u b\u1ED1 c\u1EE5c c\xF3 c\xE1c s\u1EF1 ki\u1EC7n c\u1EE5 th\u1EC3 m\xE0 ch\xFAng h\u1ED7 tr\u1EE3."),ah=p(),v=o("p"),ea=h("V\xED d\u1EE5: th\xE0nh ph\u1EA7n "),re=o("code"),ha=h("Textbox"),ca=h(" c\xF3 2 s\u1EF1 ki\u1EC7n: "),pe=o("code"),oa=h("change()"),aa=h(" (khi gi\xE1 tr\u1ECB b\xEAn trong h\u1ED9p v\u0103n b\u1EA3n thay \u0111\u1ED5i) v\xE0 "),ge=o("code"),sa=h("submit()"),la=h(" (khi ng\u01B0\u1EDDi d\xF9ng nh\u1EA5n ph\xEDm enter trong khi t\u1EADp trung v\xE0o h\u1ED9p v\u0103n b\u1EA3n). C\xE1c th\xE0nh ph\u1EA7n ph\u1EE9c t\u1EA1p h\u01A1n c\xF3 th\u1EC3 c\xF3 nhi\u1EC1u s\u1EF1 ki\u1EC7n h\u01A1n n\u1EEFa: v\xED d\u1EE5: th\xE0nh ph\u1EA7n "),me=o("code"),ia=h("Audio"),ra=h(" c\u0169ng c\xF3 c\xE1c s\u1EF1 ki\u1EC7n ri\xEAng bi\u1EC7t khi t\u1EC7p \xE2m thanh \u0111\u01B0\u1EE3c ph\xE1t, x\xF3a, t\u1EA1m d\u1EEBng, v.v. Xem t\xE0i li\u1EC7u v\u1EC1 c\xE1c s\u1EF1 ki\u1EC7n m\xE0 m\u1ED7i th\xE0nh ph\u1EA7n h\u1ED7 tr\u1EE3."),sh=p(),M=o("p"),pa=h("B\u1EA1n c\xF3 th\u1EC3 \u0111\xEDnh k\xE8m tr\xECnh k\xEDch ho\u1EA1t s\u1EF1 ki\u1EC7n cho kh\xF4ng, m\u1ED9t ho\u1EB7c nhi\u1EC1u s\u1EF1 ki\u1EC7n n\xE0y. B\u1EA1n t\u1EA1o m\u1ED9t tr\xECnh k\xEDch ho\u1EA1t s\u1EF1 ki\u1EC7n b\u1EB1ng c\xE1ch g\u1ECDi t\xEAn c\u1EE7a s\u1EF1 ki\u1EC7n tr\xEAn c\xE1 th\u1EC3 th\xE0nh ph\u1EA7n d\u01B0\u1EDBi d\u1EA1ng m\u1ED9t h\xE0m - v\xED d\u1EE5: "),ue=o("code"),ga=h("textbox.change(...)"),ma=h(" ho\u1EB7c "),de=o("code"),ua=h("btn.click(...)"),da=h(". H\xE0m nh\u1EADn ba tham s\u1ED1, nh\u01B0 \u0111\xE3 th\u1EA3o lu\u1EADn \u1EDF tr\xEAn:"),lh=p(),H=o("ul"),Jt=o("li"),fe=o("code"),fa=h("fn"),ba=h(": h\xE0m \u0111\u1EC3 ch\u1EA1y"),va=p(),Wt=o("li"),be=o("code"),ka=h("input"),ya=h(": m\u1ED9t (danh s\xE1ch) (c\xE1c) th\xE0nh ph\u1EA7n c\xF3 gi\xE1 tr\u1ECB s\u1EBD \u0111\u01B0\u1EE3c cung c\u1EA5p l\xE0m tham s\u1ED1 \u0111\u1EA7u v\xE0o cho h\xE0m. Gi\xE1 tr\u1ECB c\u1EE7a m\u1ED7i th\xE0nh ph\u1EA7n \u0111\u01B0\u1EE3c \xE1nh x\u1EA1 t\u1EDBi tham s\u1ED1 h\xE0m t\u01B0\u01A1ng \u1EE9ng, theo th\u1EE9 t\u1EF1. Tham s\u1ED1 n\xE0y c\xF3 th\u1EC3 l\xE0 None n\u1EBFu h\xE0m kh\xF4ng nh\u1EADn b\u1EA5t k\u1EF3 tham s\u1ED1 n\xE0o."),_a=p(),Qt=o("li"),ve=o("code"),xa=h("outputs"),wa=h(": m\u1ED9t (danh s\xE1ch) (c\xE1c) th\xE0nh ph\u1EA7n c\xF3 gi\xE1 tr\u1ECB c\u1EA7n \u0111\u01B0\u1EE3c c\u1EADp nh\u1EADt d\u1EF1a tr\xEAn c\xE1c gi\xE1 tr\u1ECB \u0111\u01B0\u1EE3c tr\u1EA3 v\u1EC1 b\u1EDFi h\xE0m. M\u1ED7i gi\xE1 tr\u1ECB tr\u1EA3 v\u1EC1 \u0111\u1EB7t gi\xE1 tr\u1ECB c\u1EE7a th\xE0nh ph\u1EA7n t\u01B0\u01A1ng \u1EE9ng, theo th\u1EE9 t\u1EF1. Tham s\u1ED1 n\xE0y c\xF3 th\u1EC3 l\xE0 None n\u1EBFu h\xE0m kh\xF4ng tr\u1EA3 v\u1EC1 b\u1EA5t k\u1EF3 th\u1EE9 g\xEC."),ih=p(),Xt=o("p"),Ea=h("B\u1EA1n th\u1EADm ch\xED c\xF3 th\u1EC3 \u0111\u1EB7t th\xE0nh ph\u1EA7n \u0111\u1EA7u v\xE0o v\xE0 \u0111\u1EA7u ra l\xE0 th\xE0nh ph\u1EA7n gi\u1ED1ng nhau, nh\u01B0 ch\xFAng ta l\xE0m trong v\xED d\u1EE5 n\xE0y s\u1EED d\u1EE5ng m\xF4 h\xECnh GPT \u0111\u1EC3 ho\xE0n th\xE0nh v\u0103n b\u1EA3n:"),rh=p(),k(At.$$.fragment),ph=p(),B=o("iframe"),gh=p(),tt=o("h3"),gt=o("a"),ke=o("span"),k(St.$$.fragment),$a=p(),ye=o("span"),Ta=h("T\u1EA1o b\u1EA3n demo \u0111a b\u01B0\u1EDBc"),mh=p(),z=o("p"),ja=h("Trong m\u1ED9t s\u1ED1 tr\u01B0\u1EDDng h\u1EE3p, b\u1EA1n c\xF3 th\u1EC3 mu\u1ED1n c\xF3 "),_e=o("em"),Ba=h("b\u1EA3n demo \u0111a b\u01B0\u1EDBc"),Ca=h(", trong \u0111\xF3 b\u1EA1n s\u1EED d\u1EE5ng l\u1EA1i \u0111\u1EA7u ra c\u1EE7a m\u1ED9t h\xE0m l\xE0m \u0111\u1EA7u v\xE0o cho h\xE0m ti\u1EBFp theo. \u0110i\u1EC1u n\xE0y th\u1EF1c s\u1EF1 d\u1EC5 th\u1EF1c hi\u1EC7n v\u1EDBi "),xe=o("code"),qa=h("Blocks"),Pa=h(", v\xEC b\u1EA1n c\xF3 th\u1EC3 s\u1EED d\u1EE5ng m\u1ED9t th\xE0nh ph\u1EA7n cho \u0111\u1EA7u v\xE0o c\u1EE7a m\u1ED9t tr\xECnh k\xEDch ho\u1EA1t s\u1EF1 ki\u1EC7n nh\u01B0ng l\u1EA1i l\xE0 \u0111\u1EA7u ra c\u1EE7a m\u1ED9t th\xE0nh ph\u1EA7n kh\xE1c. H\xE3y xem th\xE0nh ph\u1EA7n v\u0103n b\u1EA3n trong v\xED d\u1EE5 b\xEAn d\u01B0\u1EDBi, gi\xE1 tr\u1ECB c\u1EE7a n\xF3 l\xE0 k\u1EBFt qu\u1EA3 \u0111\u1EA7u ra c\u1EE7a m\xF4 h\xECnh nh\u1EADn d\u1EA1ng gi\u1ECDng n\xF3i, nh\u01B0ng c\u0169ng \u0111\u01B0\u1EE3c truy\u1EC1n v\xE0o m\xF4 h\xECnh ph\xE2n t\xEDch t\xECnh c\u1EA3m:"),uh=p(),k(Nt.$$.fragment),dh=p(),C=o("iframe"),fh=p(),nt=o("h3"),mt=o("a"),we=o("span"),k(Ft.$$.fragment),Ia=p(),Ee=o("span"),Da=h("C\u1EADp nh\u1EADt Thu\u1ED9c t\xEDnh Th\xE0nh ph\u1EA7n"),bh=p(),ut=o("p"),Oa=h("Cho \u0111\u1EBFn nay, ch\xFAng ta \u0111\xE3 th\u1EA5y c\xE1ch t\u1EA1o c\xE1c s\u1EF1 ki\u1EC7n \u0111\u1EC3 c\u1EADp nh\u1EADt gi\xE1 tr\u1ECB c\u1EE7a m\u1ED9t th\xE0nh ph\u1EA7n kh\xE1c. Nh\u01B0ng \u0111i\u1EC1u g\xEC s\u1EBD x\u1EA3y ra n\u1EBFu b\u1EA1n mu\u1ED1n thay \u0111\u1ED5i c\xE1c thu\u1ED9c t\xEDnh kh\xE1c c\u1EE7a m\u1ED9t th\xE0nh ph\u1EA7n, nh\u01B0 kh\u1EA3 n\u0103ng hi\u1EC3n th\u1ECB c\u1EE7a h\u1ED9p v\u0103n b\u1EA3n ho\u1EB7c c\xE1c l\u1EF1a ch\u1ECDn trong nh\xF3m n\xFAt radio? B\u1EA1n c\xF3 th\u1EC3 th\u1EF1c hi\u1EC7n vi\u1EC7c n\xE0y b\u1EB1ng c\xE1ch tr\u1EA3 v\u1EC1 ph\u01B0\u01A1ng th\u1EE9c "),$e=o("code"),Aa=h("update()"),Sa=h(" c\u1EE7a l\u1EDBp th\xE0nh ph\u1EA7n thay v\xEC gi\xE1 tr\u1ECB tr\u1EA3 v\u1EC1 th\xF4ng th\u01B0\u1EDDng t\u1EEB h\xE0m c\u1EE7a b\u1EA1n."),vh=p(),Yt=o("p"),Na=h("\u0110i\u1EC1u n\xE0y \u0111\u01B0\u1EE3c minh h\u1ECDa d\u1EC5 d\xE0ng nh\u1EA5t b\u1EB1ng m\u1ED9t v\xED d\u1EE5:"),kh=p(),k(Lt.$$.fragment),yh=p(),q=o("iframe"),_h=p(),u=o("p"),Fa=h("Ch\xFAng ta v\u1EEBa kh\xE1m ph\xE1 t\u1EA5t c\u1EA3 c\xE1c kh\xE1i ni\u1EC7m c\u1ED1t l\xF5i c\u1EE7a "),Te=o("code"),La=h("Blocks"),Ga=h("! C\u0169ng gi\u1ED1ng nh\u01B0 v\u1EDBi "),je=o("code"),Ra=h("Interfaces"),Ma=h(", b\u1EA1n c\xF3 th\u1EC3 t\u1EA1o c\xE1c b\u1EA3n demo th\xFA v\u1ECB c\xF3 th\u1EC3 \u0111\u01B0\u1EE3c chia s\u1EBB b\u1EB1ng c\xE1ch s\u1EED d\u1EE5ng "),Be=o("code"),Ha=h("share=True"),za=h(" trong ph\u01B0\u01A1ng th\u1EE9c "),Ce=o("code"),Va=h("launch()"),Ka=h(" ho\u1EB7c tri\u1EC3n khai tr\xEAn "),Gt=o("a"),Ua=h("Hugging Face Spaces"),Ja=h("."),this.h()},l(t){const l=Kl('[data-svelte="svelte-1phssyn"]',document.head);f=a(l,"META",{name:!0,content:!0}),l.forEach(e),G=g(t),N=a(t,"H1",{class:!0});var Rt=s(N);et=a(Rt,"A",{id:!0,class:!0,href:!0});var hs=s(et);an=a(hs,"SPAN",{});var cs=s(an);y(_t.$$.fragment,cs),cs.forEach(e),hs.forEach(e),Fh=g(Rt),sn=a(Rt,"SPAN",{});var os=s(sn);Lh=c(os,"Gi\u1EDBi thi\u1EC7u v\u1EC1 Gradio Blocks"),os.forEach(e),Rt.forEach(e),De=g(t),y(xt.$$.fragment,t),Oe=g(t),P=a(t,"P",{});var dt=s(P);Gh=c(dt,"Trong c\xE1c ph\u1EA7n tr\u01B0\u1EDBc, ch\xFAng ta \u0111\xE3 t\xECm hi\u1EC3u v\xE0 t\u1EA1o c\xE1c b\u1EA3n demo b\u1EB1ng c\xE1ch s\u1EED d\u1EE5ng l\u1EDBp "),ln=a(dt,"CODE",{});var as=s(ln);Rh=c(as,"Interface"),as.forEach(e),Mh=c(dt,". Trong ph\u1EA7n n\xE0y, ch\xFAng t\xF4i s\u1EBD gi\u1EDBi thi\u1EC7u API c\u1EA5p th\u1EA5p "),rn=a(dt,"STRONG",{});var ss=s(rn);Hh=c(ss,"m\u1EDBi \u0111\u01B0\u1EE3c ph\xE1t tri\u1EC3n"),ss.forEach(e),zh=c(dt," c\u1EE7a m\xECnh c\xF3 t\xEAn l\xE0 "),pn=a(dt,"CODE",{});var ls=s(pn);Vh=c(ls,"gradio.Blocks"),ls.forEach(e),Kh=c(dt,"."),dt.forEach(e),Ae=g(t),R=a(t,"P",{});var Zt=s(R);Uh=c(Zt,"B\xE2y gi\u1EDD, s\u1EF1 kh\xE1c bi\u1EC7t gi\u1EEFa "),gn=a(Zt,"CODE",{});var is=s(gn);Jh=c(is,"Interface"),is.forEach(e),Wh=c(Zt," v\xE0 "),mn=a(Zt,"CODE",{});var rs=s(mn);Qh=c(rs,"Blocks"),rs.forEach(e),Xh=c(Zt,"l\xE0 g\xEC?"),Zt.forEach(e),Se=g(t),ht=a(t,"UL",{});var wh=s(ht);un=a(wh,"LI",{});var ps=s(un);wt=a(ps,"P",{});var Eh=s(wt);Yh=c(Eh,"\u26A1 "),dn=a(Eh,"CODE",{});var gs=s(dn);Zh=c(gs,"Interface"),gs.forEach(e),tc=c(Eh,": m\u1ED9t API c\u1EA5p cao cho ph\xE9p b\u1EA1n t\u1EA1o m\u1ED9t b\u1EA3n demo h\u1ECDc m\xE1y \u0111\u1EA7y \u0111\u1EE7 ch\u1EC9 \u0111\u01A1n gi\u1EA3n b\u1EB1ng c\xE1ch cung c\u1EA5p danh s\xE1ch c\xE1c \u0111\u1EA7u v\xE0o v\xE0 \u0111\u1EA7u ra."),Eh.forEach(e),ps.forEach(e),nc=g(wh),fn=a(wh,"LI",{});var ms=s(fn);J=a(ms,"P",{});var tn=s(J);ec=c(tn,"\u{1F9F1} "),bn=a(tn,"CODE",{});var us=s(bn);hc=c(us,"Blocks"),us.forEach(e),cc=c(tn,": m\u1ED9t API c\u1EA5p th\u1EA5p cho ph\xE9p b\u1EA1n c\xF3 to\xE0n quy\u1EC1n ki\u1EC3m so\xE1t c\xE1c lu\u1ED3ng d\u1EEF li\u1EC7u v\xE0 b\u1ED1 c\u1EE5c c\u1EE7a \u1EE9ng d\u1EE5ng c\u1EE7a m\xECnh. B\u1EA1n c\xF3 th\u1EC3 x\xE2y d\u1EF1ng c\xE1c \u1EE9ng d\u1EE5ng nhi\u1EC1u b\u01B0\u1EDBc, r\u1EA5t ph\u1EE9c t\u1EA1p b\u1EB1ng c\xE1ch s\u1EED d\u1EE5ng "),vn=a(tn,"CODE",{});var ds=s(vn);oc=c(ds,"Blocks"),ds.forEach(e),ac=c(tn," (nh\u01B0 trong \u201Cc\xE1c kh\u1ED1i x\xE2y d\u1EF1ng\u201D)."),tn.forEach(e),ms.forEach(e),wh.forEach(e),Ne=g(t),W=a(t,"H3",{class:!0});var $h=s(W);ct=a($h,"A",{id:!0,class:!0,href:!0});var fs=s(ct);kn=a(fs,"SPAN",{});var bs=s(kn);y(Et.$$.fragment,bs),bs.forEach(e),fs.forEach(e),sc=g($h),yn=a($h,"SPAN",{});var vs=s(yn);lc=c(vs,"T\u1EA1i sao l\u1EA1i l\xE0 Blocks \u{1F9F1}?"),vs.forEach(e),$h.forEach(e),Fe=g(t),I=a(t,"P",{});var ft=s(I);ic=c(ft,"Nh\u01B0 ch\xFAng ta \u0111\xE3 th\u1EA5y trong c\xE1c ph\u1EA7n tr\u01B0\u1EDBc, l\u1EDBp "),_n=a(ft,"CODE",{});var ks=s(_n);rc=c(ks,"Interface"),ks.forEach(e),pc=c(ft," cho ph\xE9p b\u1EA1n d\u1EC5 d\xE0ng t\u1EA1o c\xE1c b\u1EA3n demo h\u1ECDc m\xE1y ch\xEDnh th\u1EE9c ch\u1EC9 v\u1EDBi m\u1ED9t v\xE0i d\xF2ng m\xE3. API "),xn=a(ft,"CODE",{});var ys=s(xn);gc=c(ys,"Interface"),ys.forEach(e),mc=c(ft," c\u1EF1c k\u1EF3 d\u1EC5 s\u1EED d\u1EE5ng nh\u01B0ng thi\u1EBFu t\xEDnh linh ho\u1EA1t m\xE0 API "),wn=a(ft,"CODE",{});var _s=s(wn);uc=c(_s,"Blocks"),_s.forEach(e),dc=c(ft," cung c\u1EA5p. V\xED d\u1EE5: b\u1EA1n c\xF3 th\u1EC3 mu\u1ED1n:"),ft.forEach(e),Le=g(t),D=a(t,"UL",{});var bt=s(D);En=a(bt,"LI",{});var xs=s(En);fc=c(xs,"Nh\xF3m c\xE1c b\u1EA3n demo c\xF3 li\xEAn quan l\u1EA1i v\u1EDBi nhau d\u01B0\u1EDBi d\u1EA1ng nhi\u1EC1u tab trong m\u1ED9t \u1EE9ng d\u1EE5ng web"),xs.forEach(e),bc=g(bt),$n=a(bt,"LI",{});var ws=s($n);vc=c(ws,"Thay \u0111\u1ED5i b\u1ED1 c\u1EE5c c\u1EE7a b\u1EA3n demo c\u1EE7a b\u1EA1n, v\xED d\u1EE5: \u0111\u1EC3 ch\u1EC9 \u0111\u1ECBnh v\u1ECB tr\xED c\u1EE7a c\xE1c \u0111\u1EA7u v\xE0o v\xE0 \u0111\u1EA7u ra"),ws.forEach(e),kc=g(bt),Tn=a(bt,"LI",{});var Es=s(Tn);yc=c(Es,"C\xF3 giao di\u1EC7n nhi\u1EC1u b\u01B0\u1EDBc, trong \u0111\xF3 \u0111\u1EA7u ra c\u1EE7a m\u1ED9t m\xF4 h\xECnh tr\u1EDF th\xE0nh \u0111\u1EA7u v\xE0o cho m\xF4 h\xECnh ti\u1EBFp theo ho\u1EB7c c\xF3 c\xE1c lu\u1ED3ng d\u1EEF li\u1EC7u linh ho\u1EA1t h\u01A1n n\xF3i chung"),Es.forEach(e),_c=g(bt),jn=a(bt,"LI",{});var $s=s(jn);xc=c($s,"Thay \u0111\u1ED5i thu\u1ED9c t\xEDnh c\u1EE7a m\u1ED9t th\xE0nh ph\u1EA7n (v\xED d\u1EE5: c\xE1c l\u1EF1a ch\u1ECDn trong danh s\xE1ch th\u1EA3 xu\u1ED1ng) ho\u1EB7c kh\u1EA3 n\u0103ng hi\u1EC3n th\u1ECB c\u1EE7a n\xF3 d\u1EF1a tr\xEAn \u0111\u1EA7u v\xE0o c\u1EE7a ng\u01B0\u1EDDi d\xF9ng"),$s.forEach(e),bt.forEach(e),Ge=g(t),Ht=a(t,"P",{});var Ts=s(Ht);wc=c(Ts,"Ch\xFAng ta s\u1EBD kh\xE1m ph\xE1 t\u1EA5t c\u1EA3 c\xE1c kh\xE1i ni\u1EC7m n\xE0y trong c\xE1c ph\u1EA7n ti\u1EBFp theo."),Ts.forEach(e),Re=g(t),Q=a(t,"H3",{class:!0});var Th=s(Q);ot=a(Th,"A",{id:!0,class:!0,href:!0});var js=s(ot);Bn=a(js,"SPAN",{});var Bs=s(Bn);y($t.$$.fragment,Bs),Bs.forEach(e),js.forEach(e),Ec=g(Th),Cn=a(Th,"SPAN",{});var Cs=s(Cn);$c=c(Cs,"T\u1EA1o m\u1ED9t b\u1EA3n demo \u0111\u01A1n gi\u1EA3n b\u1EB1ng c\xE1ch s\u1EED d\u1EE5ng Blocks"),Cs.forEach(e),Th.forEach(e),Me=g(t),zt=a(t,"P",{});var qs=s(zt);Tc=c(qs,"Sau khi b\u1EA1n \u0111\xE3 c\xE0i \u0111\u1EB7t Gradio, h\xE3y ch\u1EA1y m\xE3 b\xEAn d\u01B0\u1EDBi d\u01B0\u1EDBi d\u1EA1ng t\u1EADp l\u1EC7nh Python, notebook Jupyter ho\u1EB7c s\u1ED5 ghi ch\xE9p Colab."),qs.forEach(e),He=g(t),y(Tt.$$.fragment,t),ze=g(t),$=a(t,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),s($).forEach(e),Ve=g(t),Vt=a(t,"P",{});var Ps=s(Vt);jc=c(Ps,"V\xED d\u1EE5 \u0111\u01A1n gi\u1EA3n \u1EDF tr\xEAn gi\u1EDBi thi\u1EC7u 4 kh\xE1i ni\u1EC7m l\xE0m n\u1EC1n t\u1EA3ng cho Blocks:"),Ps.forEach(e),Ke=g(t),Kt=a(t,"OL",{});var Is=s(Kt);jt=a(Is,"LI",{});var jh=s(jt);Bc=c(jh,"Blocks cho ph\xE9p b\u1EA1n x\xE2y d\u1EF1ng c\xE1c \u1EE9ng d\u1EE5ng web k\u1EBFt h\u1EE3p markdown, HTML, c\xE1c n\xFAt v\xE0 c\xE1c th\xE0nh ph\u1EA7n t\u01B0\u01A1ng t\xE1c \u0111\u01A1n gi\u1EA3n b\u1EB1ng c\xE1ch kh\u1EDFi t\u1EA1o c\xE1c \u0111\u1ED1i t\u01B0\u1EE3ng b\u1EB1ng Python b\xEAn trong ng\u1EEF c\u1EA3nh "),qn=a(jh,"CODE",{});var Ds=s(qn);Cc=c(Ds,"with gradio.Blocks"),Ds.forEach(e),qc=c(jh,"."),jh.forEach(e),Is.forEach(e),Ue=g(t),y(at.$$.fragment,t),Je=g(t),Ut=a(t,"P",{});var Os=s(Ut);Pc=c(Os,"Th\u1EE9 t\u1EF1 m\xE0 b\u1EA1n kh\u1EDFi t\u1EA1o c\xE1c th\xE0nh ph\u1EA7n quan tr\u1ECDng khi m\u1ED7i ph\u1EA7n t\u1EED \u0111\u01B0\u1EE3c hi\u1EC3n th\u1ECB v\xE0o \u1EE9ng d\u1EE5ng web theo th\u1EE9 t\u1EF1 n\xF3 \u0111\u01B0\u1EE3c t\u1EA1o. (C\xE1c b\u1ED1 c\u1EE5c ph\u1EE9c t\u1EA1p h\u01A1n \u0111\u01B0\u1EE3c th\u1EA3o lu\u1EADn b\xEAn d\u01B0\u1EDBi)"),Os.forEach(e),We=g(t),F=a(t,"OL",{start:!0});var nn=s(F);Pn=a(nn,"LI",{});var As=s(Pn);Bt=a(As,"P",{});var Bh=s(Bt);Ic=c(Bh,"B\u1EA1n c\xF3 th\u1EC3 x\xE1c \u0111\u1ECBnh c\xE1c h\xE0m Python th\xF4ng th\u01B0\u1EDDng \u1EDF b\u1EA5t k\u1EF3 \u0111\xE2u trong m\xE3 c\u1EE7a m\xECnh v\xE0 ch\u1EA1y ch\xFAng v\u1EDBi \u0111\u1EA7u v\xE0o c\u1EE7a ng\u01B0\u1EDDi d\xF9ng b\u1EB1ng c\xE1ch s\u1EED d\u1EE5ng "),In=a(Bh,"CODE",{});var Ss=s(In);Dc=c(Ss,"Blocks"),Ss.forEach(e),Oc=c(Bh,". Trong v\xED d\u1EE5 c\u1EE7a m\xECnh, ch\xFAng ta c\xF3 m\u1ED9t h\xE0m \u0111\u01A1n gi\u1EA3n \u201Cl\u1EADt\u201D v\u0103n b\u1EA3n \u0111\u1EA7u v\xE0o, nh\u01B0ng b\u1EA1n c\xF3 th\u1EC3 vi\u1EBFt b\u1EA5t k\u1EF3 h\xE0m Python n\xE0o, t\u1EEB m\u1ED9t ph\xE9p t\xEDnh \u0111\u01A1n gi\u1EA3n \u0111\u1EBFn x\u1EED l\xFD c\xE1c d\u1EF1 \u0111o\xE1n t\u1EEB m\u1ED9t m\xF4 h\xECnh h\u1ECDc m\xE1y."),Bh.forEach(e),As.forEach(e),Ac=g(nn),X=a(nn,"LI",{});var en=s(X);T=a(en,"P",{});var V=s(T);Sc=c(V,"B\u1EA1n c\xF3 th\u1EC3 g\xE1n c\xE1c s\u1EF1 ki\u1EC7n cho b\u1EA5t k\u1EF3 th\xE0nh ph\u1EA7n "),Dn=a(V,"CODE",{});var Ns=s(Dn);Nc=c(Ns,"Blocks"),Ns.forEach(e),Fc=c(V," n\xE0o. \u0110i\u1EC1u n\xE0y s\u1EBD ch\u1EA1y h\xE0m c\u1EE7a b\u1EA1n khi th\xE0nh ph\u1EA7n \u0111\u01B0\u1EE3c nh\u1EA5p, thay \u0111\u1ED5i, v.v. Khi b\u1EA1n g\xE1n m\u1ED9t s\u1EF1 ki\u1EC7n, b\u1EA1n truy\u1EC1n v\xE0o ba tham s\u1ED1: "),On=a(V,"CODE",{});var Fs=s(On);Lc=c(Fs,"fn"),Fs.forEach(e),Gc=c(V,": h\xE0m c\u1EA7n \u0111\u01B0\u1EE3c g\u1ECDi,"),An=a(V,"CODE",{});var Ls=s(An);Rc=c(Ls,"inputs"),Ls.forEach(e),Mc=c(V,": (danh s\xE1ch) th\xE0nh ph\u1EA7n \u0111\u1EA7u v\xE0o (s), v\xE0 "),Sn=a(V,"CODE",{});var Gs=s(Sn);Hc=c(Gs,"outputs"),Gs.forEach(e),zc=c(V,": (danh s\xE1ch) c\xE1c th\xE0nh ph\u1EA7n \u0111\u1EA7u ra c\u1EA7n \u0111\u01B0\u1EE3c g\u1ECDi."),V.forEach(e),Vc=g(en),m=a(en,"P",{});var d=s(m);Kc=c(d,"Trong v\xED d\u1EE5 tr\xEAn, ch\xFAng t\xF4i ch\u1EA1y h\xE0m "),Nn=a(d,"CODE",{});var Rs=s(Nn);Uc=c(Rs,"flip_text()"),Rs.forEach(e),Jc=c(d," khi gi\xE1 tr\u1ECB trong "),Fn=a(d,"CODE",{});var Ms=s(Fn);Wc=c(Ms,"Textbox"),Ms.forEach(e),Qc=c(d," c\xF3 t\xEAn \u0111\u1EA7u v\xE0o "),Ln=a(d,"CODE",{});var Hs=s(Ln);Xc=c(Hs,"input"),Hs.forEach(e),Yc=c(d," thay \u0111\u1ED5i. S\u1EF1 ki\u1EC7n \u0111\u1ECDc gi\xE1 tr\u1ECB trong "),Gn=a(d,"CODE",{});var zs=s(Gn);Zc=c(zs,"input"),zs.forEach(e),to=c(d,", truy\u1EC1n n\xF3 l\xE0m tham s\u1ED1 t\xEAn cho "),Rn=a(d,"CODE",{});var Vs=s(Rn);no=c(Vs,"flip_text()"),Vs.forEach(e),eo=c(d,", sau \u0111\xF3 tr\u1EA3 v\u1EC1 m\u1ED9t gi\xE1 tr\u1ECB \u0111\u01B0\u1EE3c g\xE1n cho "),Mn=a(d,"CODE",{});var Ks=s(Mn);ho=c(Ks,"Textbox"),Ks.forEach(e),co=c(d," th\u1EE9 hai c\u1EE7a ch\xFAng ta c\xF3 t\xEAn l\xE0 "),Hn=a(d,"CODE",{});var Us=s(Hn);oo=c(Us,"output"),Us.forEach(e),ao=c(d,"."),d.forEach(e),so=g(en),Ct=a(en,"P",{});var Ch=s(Ct);lo=c(Ch,"\u0110\u1EC3 xem danh s\xE1ch c\xE1c s\u1EF1 ki\u1EC7n m\xE0 m\u1ED7i th\xE0nh ph\u1EA7n h\u1ED7 tr\u1EE3, h\xE3y xem "),qt=a(Ch,"A",{href:!0,rel:!0});var Js=s(qt);io=c(Js,"t\xE0i li\u1EC7u"),Js.forEach(e),ro=c(Ch," Gradio."),Ch.forEach(e),en.forEach(e),po=g(nn),zn=a(nn,"LI",{});var Ws=s(zn);L=a(Ws,"P",{});var vt=s(L);go=c(vt,"C\xE1c kh\u1ED1i t\u1EF1 \u0111\u1ED9ng t\xECm ra li\u1EC7u m\u1ED9t th\xE0nh ph\u1EA7n c\xF3 n\xEAn t\u01B0\u01A1ng t\xE1c (ch\u1EA5p nh\u1EADn \u0111\u1EA7u v\xE0o c\u1EE7a ng\u01B0\u1EDDi d\xF9ng) hay kh\xF4ng, d\u1EF1a tr\xEAn c\xE1c tr\xECnh k\xEDch ho\u1EA1t s\u1EF1 ki\u1EC7n m\xE0 b\u1EA1n x\xE1c \u0111\u1ECBnh. Trong v\xED d\u1EE5 c\u1EE7a ch\xFAng ta, h\u1ED9p v\u0103n b\u1EA3n \u0111\u1EA7u ti\xEAn l\xE0 t\u01B0\u01A1ng t\xE1c, v\xEC gi\xE1 tr\u1ECB c\u1EE7a n\xF3 \u0111\u01B0\u1EE3c s\u1EED d\u1EE5ng b\u1EDFi h\xE0m "),Vn=a(vt,"CODE",{});var Qs=s(Vn);mo=c(Qs,"flip_text()"),Qs.forEach(e),uo=c(vt,". H\u1ED9p v\u0103n b\u1EA3n th\u1EE9 hai kh\xF4ng t\u01B0\u01A1ng t\xE1c, v\xEC gi\xE1 tr\u1ECB c\u1EE7a n\xF3 kh\xF4ng bao gi\u1EDD \u0111\u01B0\u1EE3c s\u1EED d\u1EE5ng l\xE0m \u0111\u1EA7u v\xE0o. Trong m\u1ED9t s\u1ED1 tr\u01B0\u1EDDng h\u1EE3p, b\u1EA1n c\xF3 th\u1EC3 mu\u1ED1n ghi \u0111\xE8 \u0111i\u1EC1u n\xE0y, b\u1EA1n c\xF3 th\u1EC3 th\u1EF1c hi\u1EC7n b\u1EB1ng c\xE1ch truy\u1EC1n m\u1ED9t boolean \u0111\u1EBFn tham s\u1ED1 "),Kn=a(vt,"CODE",{});var Xs=s(Kn);fo=c(Xs,"interactive"),Xs.forEach(e),bo=c(vt," c\u1EE7a th\xE0nh ph\u1EA7n (v\xED d\u1EE5:"),Un=a(vt,"CODE",{});var Ys=s(Un);vo=c(Ys,'gr.Textbox(placeholder="Flip this text", interactive=True)'),Ys.forEach(e),ko=c(vt,")."),vt.forEach(e),Ws.forEach(e),nn.forEach(e),Qe=g(t),Y=a(t,"H3",{class:!0});var qh=s(Y);st=a(qh,"A",{id:!0,class:!0,href:!0});var Zs=s(st);Jn=a(Zs,"SPAN",{});var tl=s(Jn);y(Pt.$$.fragment,tl),tl.forEach(e),Zs.forEach(e),yo=g(qh),Wn=a(qh,"SPAN",{});var nl=s(Wn);_o=c(nl,"T\xF9y ch\u1EC9nh b\u1ED1 c\u1EE5c c\u1EE7a b\u1EA3n demo c\u1EE7a b\u1EA1n"),nl.forEach(e),qh.forEach(e),Xe=g(t),b=a(t,"P",{});var K=s(b);xo=c(K,"L\xE0m c\xE1ch n\xE0o ch\xFAng ta c\xF3 th\u1EC3 s\u1EED d\u1EE5ng "),Qn=a(K,"CODE",{});var el=s(Qn);wo=c(el,"Blocks"),el.forEach(e),Eo=c(K," \u0111\u1EC3 t\xF9y ch\u1EC9nh b\u1ED1 c\u1EE5c b\u1EA3n demo c\u1EE7a m\xECnh? Theo m\u1EB7c \u0111\u1ECBnh, "),Xn=a(K,"CODE",{});var hl=s(Xn);$o=c(hl,"Blocks"),hl.forEach(e),To=c(K," hi\u1EC3n th\u1ECB c\xE1c th\xE0nh ph\u1EA7n m\xE0 b\u1EA1n t\u1EA1o theo chi\u1EC1u d\u1ECDc trong m\u1ED9t c\u1ED9t. B\u1EA1n c\xF3 th\u1EC3 thay \u0111\u1ED5i \u0111i\u1EC1u \u0111\xF3 b\u1EB1ng c\xE1ch t\u1EA1o c\xE1c c\u1ED9t b\u1ED5 sung "),Yn=a(K,"CODE",{});var cl=s(Yn);jo=c(cl,"with gradio.Column():"),cl.forEach(e),Bo=c(K," ho\u1EB7c c\xE1c h\xE0ng "),Zn=a(K,"CODE",{});var ol=s(Zn);Co=c(ol,"with gradio.Row():"),ol.forEach(e),qo=c(K," v\xE0 t\u1EA1o c\xE1c th\xE0nh ph\u1EA7n trong c\xE1c ng\u1EEF c\u1EA3nh \u0111\xF3."),K.forEach(e),Ye=g(t),O=a(t,"P",{});var kt=s(O);Po=c(kt,"\u0110\xE2y l\xE0 nh\u1EEFng g\xEC b\u1EA1n n\xEAn ghi nh\u1EDB: b\u1EA5t k\u1EF3 th\xE0nh ph\u1EA7n n\xE0o \u0111\u01B0\u1EE3c t\u1EA1o trong m\u1ED9t "),te=a(kt,"CODE",{});var al=s(te);Io=c(al,"Column"),al.forEach(e),Do=c(kt," (\u0111\xE2y c\u0169ng l\xE0 m\u1EB7c \u0111\u1ECBnh) s\u1EBD \u0111\u01B0\u1EE3c b\u1ED1 tr\xED theo chi\u1EC1u d\u1ECDc. B\u1EA5t k\u1EF3 th\xE0nh ph\u1EA7n n\xE0o \u0111\u01B0\u1EE3c t\u1EA1o trong m\u1ED9t "),ne=a(kt,"CODE",{});var sl=s(ne);Oo=c(sl,"Row"),sl.forEach(e),Ao=c(kt," s\u1EBD \u0111\u01B0\u1EE3c b\u1ED1 tr\xED theo chi\u1EC1u ngang, t\u01B0\u01A1ng t\u1EF1 nh\u01B0 "),It=a(kt,"A",{href:!0,rel:!0});var ll=s(It);So=c(ll,"m\xF4 h\xECnh flexbox trong ph\xE1t tri\u1EC3n web"),ll.forEach(e),No=c(kt,"."),kt.forEach(e),Ze=g(t),A=a(t,"P",{});var yt=s(A);Fo=c(yt,"Cu\u1ED1i c\xF9ng, b\u1EA1n c\u0169ng c\xF3 th\u1EC3 t\u1EA1o c\xE1c tab cho b\u1EA3n demo c\u1EE7a m\xECnh b\u1EB1ng c\xE1ch s\u1EED d\u1EE5ng tr\xECnh qu\u1EA3n l\xFD ng\u1EEF c\u1EA3nh "),ee=a(yt,"CODE",{});var il=s(ee);Lo=c(il,"with gradio.Tabs()"),il.forEach(e),Go=c(yt,". Trong ng\u1EEF c\u1EA3nh n\xE0y, b\u1EA1n c\xF3 th\u1EC3 t\u1EA1o nhi\u1EC1u tab b\u1EB1ng c\xE1ch ch\u1EC9 \u0111\u1ECBnh "),he=a(yt,"CODE",{});var rl=s(he);Ro=c(rl,"with gradio.TabItem(name_of_tab):"),rl.forEach(e),Mo=c(yt," children. B\u1EA5t k\u1EF3 th\xE0nh ph\u1EA7n n\xE0o \u0111\u01B0\u1EE3c t\u1EA1o b\xEAn trong ng\u1EEF c\u1EA3nh "),ce=a(yt,"CODE",{});var pl=s(ce);Ho=c(pl,"with gradio.TabItem(name_of_tab):"),pl.forEach(e),zo=c(yt," s\u1EBD xu\u1EA5t hi\u1EC7n trong tab \u0111\xF3."),yt.forEach(e),th=g(t),lt=a(t,"P",{});var Ph=s(lt);Vo=c(Ph,"B\xE2y gi\u1EDD, h\xE3y th\xEAm m\u1ED9t h\xE0m "),oe=a(Ph,"CODE",{});var gl=s(oe);Ko=c(gl,"flip_image()"),gl.forEach(e),Uo=c(Ph," v\xE0o b\u1EA3n demo c\u1EE7a ch\xFAng ta v\xE0 th\xEAm m\u1ED9t tab m\u1EDBi \u0111\u1EC3 l\u1EADt h\xECnh \u1EA3nh. D\u01B0\u1EDBi \u0111\xE2y l\xE0 m\u1ED9t v\xED d\u1EE5 v\u1EDBi 2 tab v\xE0 c\u0169ng s\u1EED d\u1EE5ng Row:"),Ph.forEach(e),nh=g(t),y(Dt.$$.fragment,t),eh=g(t),j=a(t,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),s(j).forEach(e),hh=g(t),it=a(t,"P",{});var Ih=s(it);Jo=c(Ih,"B\u1EA1n s\u1EBD nh\u1EADn th\u1EA5y r\u1EB1ng trong v\xED d\u1EE5 n\xE0y, ch\xFAng ta c\u0169ng \u0111\xE3 t\u1EA1o ra m\u1ED9t th\xE0nh ph\u1EA7n "),ae=a(Ih,"CODE",{});var ml=s(ae);Wo=c(ml,"Button"),ml.forEach(e),Qo=c(Ih," trong m\u1ED7i tab v\xE0 ch\u1EC9 \u0111\u1ECBnh m\u1ED9t s\u1EF1 ki\u1EC7n nh\u1EA5p chu\u1ED9t cho m\u1ED7i n\xFAt, \u0111\xF3 l\xE0 nh\u1EEFng g\xEC th\u1EF1c s\u1EF1 ch\u1EA1y h\xE0m."),Ih.forEach(e),ch=g(t),Z=a(t,"H3",{class:!0});var Dh=s(Z);rt=a(Dh,"A",{id:!0,class:!0,href:!0});var ul=s(rt);se=a(ul,"SPAN",{});var dl=s(se);y(Ot.$$.fragment,dl),dl.forEach(e),ul.forEach(e),Xo=g(Dh),le=a(Dh,"SPAN",{});var fl=s(le);Yo=c(fl,"Kh\xE1m ph\xE1 c\xE1c s\u1EF1 ki\u1EC7n v\xE0 tr\u1EA1ng th\xE1i"),fl.forEach(e),Dh.forEach(e),oh=g(t),pt=a(t,"P",{});var Oh=s(pt);Zo=c(Oh,"C\u0169ng gi\u1ED1ng nh\u01B0 b\u1EA1n c\xF3 th\u1EC3 ki\u1EC3m so\xE1t b\u1ED1 c\u1EE5c, "),ie=a(Oh,"CODE",{});var bl=s(ie);ta=c(bl,"Blocks"),bl.forEach(e),na=c(Oh," cung c\u1EA5p cho b\u1EA1n kh\u1EA3 n\u0103ng ki\u1EC3m so\xE1t chi ti\u1EBFt \u0111\u1ED1i v\u1EDBi nh\u1EEFng s\u1EF1 ki\u1EC7n n\xE0o k\xEDch ho\u1EA1t h\xE0m g\u1ECDi. M\u1ED7i th\xE0nh ph\u1EA7n v\xE0 nhi\u1EC1u b\u1ED1 c\u1EE5c c\xF3 c\xE1c s\u1EF1 ki\u1EC7n c\u1EE5 th\u1EC3 m\xE0 ch\xFAng h\u1ED7 tr\u1EE3."),Oh.forEach(e),ah=g(t),v=a(t,"P",{});var U=s(v);ea=c(U,"V\xED d\u1EE5: th\xE0nh ph\u1EA7n "),re=a(U,"CODE",{});var vl=s(re);ha=c(vl,"Textbox"),vl.forEach(e),ca=c(U," c\xF3 2 s\u1EF1 ki\u1EC7n: "),pe=a(U,"CODE",{});var kl=s(pe);oa=c(kl,"change()"),kl.forEach(e),aa=c(U," (khi gi\xE1 tr\u1ECB b\xEAn trong h\u1ED9p v\u0103n b\u1EA3n thay \u0111\u1ED5i) v\xE0 "),ge=a(U,"CODE",{});var yl=s(ge);sa=c(yl,"submit()"),yl.forEach(e),la=c(U," (khi ng\u01B0\u1EDDi d\xF9ng nh\u1EA5n ph\xEDm enter trong khi t\u1EADp trung v\xE0o h\u1ED9p v\u0103n b\u1EA3n). C\xE1c th\xE0nh ph\u1EA7n ph\u1EE9c t\u1EA1p h\u01A1n c\xF3 th\u1EC3 c\xF3 nhi\u1EC1u s\u1EF1 ki\u1EC7n h\u01A1n n\u1EEFa: v\xED d\u1EE5: th\xE0nh ph\u1EA7n "),me=a(U,"CODE",{});var _l=s(me);ia=c(_l,"Audio"),_l.forEach(e),ra=c(U," c\u0169ng c\xF3 c\xE1c s\u1EF1 ki\u1EC7n ri\xEAng bi\u1EC7t khi t\u1EC7p \xE2m thanh \u0111\u01B0\u1EE3c ph\xE1t, x\xF3a, t\u1EA1m d\u1EEBng, v.v. Xem t\xE0i li\u1EC7u v\u1EC1 c\xE1c s\u1EF1 ki\u1EC7n m\xE0 m\u1ED7i th\xE0nh ph\u1EA7n h\u1ED7 tr\u1EE3."),U.forEach(e),sh=g(t),M=a(t,"P",{});var hn=s(M);pa=c(hn,"B\u1EA1n c\xF3 th\u1EC3 \u0111\xEDnh k\xE8m tr\xECnh k\xEDch ho\u1EA1t s\u1EF1 ki\u1EC7n cho kh\xF4ng, m\u1ED9t ho\u1EB7c nhi\u1EC1u s\u1EF1 ki\u1EC7n n\xE0y. B\u1EA1n t\u1EA1o m\u1ED9t tr\xECnh k\xEDch ho\u1EA1t s\u1EF1 ki\u1EC7n b\u1EB1ng c\xE1ch g\u1ECDi t\xEAn c\u1EE7a s\u1EF1 ki\u1EC7n tr\xEAn c\xE1 th\u1EC3 th\xE0nh ph\u1EA7n d\u01B0\u1EDBi d\u1EA1ng m\u1ED9t h\xE0m - v\xED d\u1EE5: "),ue=a(hn,"CODE",{});var xl=s(ue);ga=c(xl,"textbox.change(...)"),xl.forEach(e),ma=c(hn," ho\u1EB7c "),de=a(hn,"CODE",{});var wl=s(de);ua=c(wl,"btn.click(...)"),wl.forEach(e),da=c(hn,". H\xE0m nh\u1EADn ba tham s\u1ED1, nh\u01B0 \u0111\xE3 th\u1EA3o lu\u1EADn \u1EDF tr\xEAn:"),hn.forEach(e),lh=g(t),H=a(t,"UL",{});var cn=s(H);Jt=a(cn,"LI",{});var Wa=s(Jt);fe=a(Wa,"CODE",{});var El=s(fe);fa=c(El,"fn"),El.forEach(e),ba=c(Wa,": h\xE0m \u0111\u1EC3 ch\u1EA1y"),Wa.forEach(e),va=g(cn),Wt=a(cn,"LI",{});var Qa=s(Wt);be=a(Qa,"CODE",{});var $l=s(be);ka=c($l,"input"),$l.forEach(e),ya=c(Qa,": m\u1ED9t (danh s\xE1ch) (c\xE1c) th\xE0nh ph\u1EA7n c\xF3 gi\xE1 tr\u1ECB s\u1EBD \u0111\u01B0\u1EE3c cung c\u1EA5p l\xE0m tham s\u1ED1 \u0111\u1EA7u v\xE0o cho h\xE0m. Gi\xE1 tr\u1ECB c\u1EE7a m\u1ED7i th\xE0nh ph\u1EA7n \u0111\u01B0\u1EE3c \xE1nh x\u1EA1 t\u1EDBi tham s\u1ED1 h\xE0m t\u01B0\u01A1ng \u1EE9ng, theo th\u1EE9 t\u1EF1. Tham s\u1ED1 n\xE0y c\xF3 th\u1EC3 l\xE0 None n\u1EBFu h\xE0m kh\xF4ng nh\u1EADn b\u1EA5t k\u1EF3 tham s\u1ED1 n\xE0o."),Qa.forEach(e),_a=g(cn),Qt=a(cn,"LI",{});var Xa=s(Qt);ve=a(Xa,"CODE",{});var Tl=s(ve);xa=c(Tl,"outputs"),Tl.forEach(e),wa=c(Xa,": m\u1ED9t (danh s\xE1ch) (c\xE1c) th\xE0nh ph\u1EA7n c\xF3 gi\xE1 tr\u1ECB c\u1EA7n \u0111\u01B0\u1EE3c c\u1EADp nh\u1EADt d\u1EF1a tr\xEAn c\xE1c gi\xE1 tr\u1ECB \u0111\u01B0\u1EE3c tr\u1EA3 v\u1EC1 b\u1EDFi h\xE0m. M\u1ED7i gi\xE1 tr\u1ECB tr\u1EA3 v\u1EC1 \u0111\u1EB7t gi\xE1 tr\u1ECB c\u1EE7a th\xE0nh ph\u1EA7n t\u01B0\u01A1ng \u1EE9ng, theo th\u1EE9 t\u1EF1. Tham s\u1ED1 n\xE0y c\xF3 th\u1EC3 l\xE0 None n\u1EBFu h\xE0m kh\xF4ng tr\u1EA3 v\u1EC1 b\u1EA5t k\u1EF3 th\u1EE9 g\xEC."),Xa.forEach(e),cn.forEach(e),ih=g(t),Xt=a(t,"P",{});var jl=s(Xt);Ea=c(jl,"B\u1EA1n th\u1EADm ch\xED c\xF3 th\u1EC3 \u0111\u1EB7t th\xE0nh ph\u1EA7n \u0111\u1EA7u v\xE0o v\xE0 \u0111\u1EA7u ra l\xE0 th\xE0nh ph\u1EA7n gi\u1ED1ng nhau, nh\u01B0 ch\xFAng ta l\xE0m trong v\xED d\u1EE5 n\xE0y s\u1EED d\u1EE5ng m\xF4 h\xECnh GPT \u0111\u1EC3 ho\xE0n th\xE0nh v\u0103n b\u1EA3n:"),jl.forEach(e),rh=g(t),y(At.$$.fragment,t),ph=g(t),B=a(t,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),s(B).forEach(e),gh=g(t),tt=a(t,"H3",{class:!0});var Ah=s(tt);gt=a(Ah,"A",{id:!0,class:!0,href:!0});var Bl=s(gt);ke=a(Bl,"SPAN",{});var Cl=s(ke);y(St.$$.fragment,Cl),Cl.forEach(e),Bl.forEach(e),$a=g(Ah),ye=a(Ah,"SPAN",{});var ql=s(ye);Ta=c(ql,"T\u1EA1o b\u1EA3n demo \u0111a b\u01B0\u1EDBc"),ql.forEach(e),Ah.forEach(e),mh=g(t),z=a(t,"P",{});var on=s(z);ja=c(on,"Trong m\u1ED9t s\u1ED1 tr\u01B0\u1EDDng h\u1EE3p, b\u1EA1n c\xF3 th\u1EC3 mu\u1ED1n c\xF3 "),_e=a(on,"EM",{});var Pl=s(_e);Ba=c(Pl,"b\u1EA3n demo \u0111a b\u01B0\u1EDBc"),Pl.forEach(e),Ca=c(on,", trong \u0111\xF3 b\u1EA1n s\u1EED d\u1EE5ng l\u1EA1i \u0111\u1EA7u ra c\u1EE7a m\u1ED9t h\xE0m l\xE0m \u0111\u1EA7u v\xE0o cho h\xE0m ti\u1EBFp theo. \u0110i\u1EC1u n\xE0y th\u1EF1c s\u1EF1 d\u1EC5 th\u1EF1c hi\u1EC7n v\u1EDBi "),xe=a(on,"CODE",{});var Il=s(xe);qa=c(Il,"Blocks"),Il.forEach(e),Pa=c(on,", v\xEC b\u1EA1n c\xF3 th\u1EC3 s\u1EED d\u1EE5ng m\u1ED9t th\xE0nh ph\u1EA7n cho \u0111\u1EA7u v\xE0o c\u1EE7a m\u1ED9t tr\xECnh k\xEDch ho\u1EA1t s\u1EF1 ki\u1EC7n nh\u01B0ng l\u1EA1i l\xE0 \u0111\u1EA7u ra c\u1EE7a m\u1ED9t th\xE0nh ph\u1EA7n kh\xE1c. H\xE3y xem th\xE0nh ph\u1EA7n v\u0103n b\u1EA3n trong v\xED d\u1EE5 b\xEAn d\u01B0\u1EDBi, gi\xE1 tr\u1ECB c\u1EE7a n\xF3 l\xE0 k\u1EBFt qu\u1EA3 \u0111\u1EA7u ra c\u1EE7a m\xF4 h\xECnh nh\u1EADn d\u1EA1ng gi\u1ECDng n\xF3i, nh\u01B0ng c\u0169ng \u0111\u01B0\u1EE3c truy\u1EC1n v\xE0o m\xF4 h\xECnh ph\xE2n t\xEDch t\xECnh c\u1EA3m:"),on.forEach(e),uh=g(t),y(Nt.$$.fragment,t),dh=g(t),C=a(t,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),s(C).forEach(e),fh=g(t),nt=a(t,"H3",{class:!0});var Sh=s(nt);mt=a(Sh,"A",{id:!0,class:!0,href:!0});var Dl=s(mt);we=a(Dl,"SPAN",{});var Ol=s(we);y(Ft.$$.fragment,Ol),Ol.forEach(e),Dl.forEach(e),Ia=g(Sh),Ee=a(Sh,"SPAN",{});var Al=s(Ee);Da=c(Al,"C\u1EADp nh\u1EADt Thu\u1ED9c t\xEDnh Th\xE0nh ph\u1EA7n"),Al.forEach(e),Sh.forEach(e),bh=g(t),ut=a(t,"P",{});var Nh=s(ut);Oa=c(Nh,"Cho \u0111\u1EBFn nay, ch\xFAng ta \u0111\xE3 th\u1EA5y c\xE1ch t\u1EA1o c\xE1c s\u1EF1 ki\u1EC7n \u0111\u1EC3 c\u1EADp nh\u1EADt gi\xE1 tr\u1ECB c\u1EE7a m\u1ED9t th\xE0nh ph\u1EA7n kh\xE1c. Nh\u01B0ng \u0111i\u1EC1u g\xEC s\u1EBD x\u1EA3y ra n\u1EBFu b\u1EA1n mu\u1ED1n thay \u0111\u1ED5i c\xE1c thu\u1ED9c t\xEDnh kh\xE1c c\u1EE7a m\u1ED9t th\xE0nh ph\u1EA7n, nh\u01B0 kh\u1EA3 n\u0103ng hi\u1EC3n th\u1ECB c\u1EE7a h\u1ED9p v\u0103n b\u1EA3n ho\u1EB7c c\xE1c l\u1EF1a ch\u1ECDn trong nh\xF3m n\xFAt radio? B\u1EA1n c\xF3 th\u1EC3 th\u1EF1c hi\u1EC7n vi\u1EC7c n\xE0y b\u1EB1ng c\xE1ch tr\u1EA3 v\u1EC1 ph\u01B0\u01A1ng th\u1EE9c "),$e=a(Nh,"CODE",{});var Sl=s($e);Aa=c(Sl,"update()"),Sl.forEach(e),Sa=c(Nh," c\u1EE7a l\u1EDBp th\xE0nh ph\u1EA7n thay v\xEC gi\xE1 tr\u1ECB tr\u1EA3 v\u1EC1 th\xF4ng th\u01B0\u1EDDng t\u1EEB h\xE0m c\u1EE7a b\u1EA1n."),Nh.forEach(e),vh=g(t),Yt=a(t,"P",{});var Nl=s(Yt);Na=c(Nl,"\u0110i\u1EC1u n\xE0y \u0111\u01B0\u1EE3c minh h\u1ECDa d\u1EC5 d\xE0ng nh\u1EA5t b\u1EB1ng m\u1ED9t v\xED d\u1EE5:"),Nl.forEach(e),kh=g(t),y(Lt.$$.fragment,t),yh=g(t),q=a(t,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),s(q).forEach(e),_h=g(t),u=a(t,"P",{});var S=s(u);Fa=c(S,"Ch\xFAng ta v\u1EEBa kh\xE1m ph\xE1 t\u1EA5t c\u1EA3 c\xE1c kh\xE1i ni\u1EC7m c\u1ED1t l\xF5i c\u1EE7a "),Te=a(S,"CODE",{});var Fl=s(Te);La=c(Fl,"Blocks"),Fl.forEach(e),Ga=c(S,"! C\u0169ng gi\u1ED1ng nh\u01B0 v\u1EDBi "),je=a(S,"CODE",{});var Ll=s(je);Ra=c(Ll,"Interfaces"),Ll.forEach(e),Ma=c(S,", b\u1EA1n c\xF3 th\u1EC3 t\u1EA1o c\xE1c b\u1EA3n demo th\xFA v\u1ECB c\xF3 th\u1EC3 \u0111\u01B0\u1EE3c chia s\u1EBB b\u1EB1ng c\xE1ch s\u1EED d\u1EE5ng "),Be=a(S,"CODE",{});var Gl=s(Be);Ha=c(Gl,"share=True"),Gl.forEach(e),za=c(S," trong ph\u01B0\u01A1ng th\u1EE9c "),Ce=a(S,"CODE",{});var Rl=s(Ce);Va=c(Rl,"launch()"),Rl.forEach(e),Ka=c(S," ho\u1EB7c tri\u1EC3n khai tr\xEAn "),Gt=a(S,"A",{href:!0,rel:!0});var Ml=s(Gt);Ua=c(Ml,"Hugging Face Spaces"),Ml.forEach(e),Ja=c(S,"."),S.forEach(e),this.h()},h(){r(f,"name","hf:doc:metadata"),r(f,"content",JSON.stringify(Yl)),r(et,"id","gii-thiu-v-gradio-blocks"),r(et,"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"),r(et,"href","#gii-thiu-v-gradio-blocks"),r(N,"class","relative group"),r(ct,"id","ti-sao-li-l-blocks"),r(ct,"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"),r(ct,"href","#ti-sao-li-l-blocks"),r(W,"class","relative group"),r(ot,"id","to-mt-bn-demo-n-gin-bng-cch-s-dng-blocks"),r(ot,"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"),r(ot,"href","#to-mt-bn-demo-n-gin-bng-cch-s-dng-blocks"),r(Q,"class","relative group"),qe($.src,Ya="https://hf.space/gradioiframe/course-demos/flip_text/+")||r($,"src",Ya),r($,"frameborder","0"),r($,"height","400"),r($,"title","Gradio app"),r($,"class","container p-0 flex-grow space-iframe"),r($,"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"),r($,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),r(qt,"href","https://www.gradio.app/docs/"),r(qt,"rel","nofollow"),r(F,"start","2"),r(st,"id","ty-chnh-b-cc-ca-bn-demo-ca-bn"),r(st,"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"),r(st,"href","#ty-chnh-b-cc-ca-bn-demo-ca-bn"),r(Y,"class","relative group"),r(It,"href","https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concept_of_Flexbox"),r(It,"rel","nofollow"),qe(j.src,Za="https://hf.space/gradioiframe/course-demos/flip_text_image/+")||r(j,"src",Za),r(j,"frameborder","0"),r(j,"height","450"),r(j,"title","Gradio app"),r(j,"class","container p-0 flex-grow space-iframe"),r(j,"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"),r(j,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),r(rt,"id","khm-ph-cc-s-kin-v-trng-thi"),r(rt,"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"),r(rt,"href","#khm-ph-cc-s-kin-v-trng-thi"),r(Z,"class","relative group"),qe(B.src,ts="https://hf.space/gradioiframe/course-demos/blocks_gpt/+")||r(B,"src",ts),r(B,"frameborder","0"),r(B,"height","300"),r(B,"title","Gradio app"),r(B,"class","container p-0 flex-grow space-iframe"),r(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"),r(B,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),r(gt,"id","to-bn-demo-a-bc"),r(gt,"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"),r(gt,"href","#to-bn-demo-a-bc"),r(tt,"class","relative group"),qe(C.src,ns="https://hf.space/gradioiframe/course-demos/blocks_multi_step/+")||r(C,"src",ns),r(C,"frameborder","0"),r(C,"height","600"),r(C,"title","Gradio app"),r(C,"class","container p-0 flex-grow space-iframe"),r(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"),r(C,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),r(mt,"id","cp-nht-thuc-tnh-thnh-phn"),r(mt,"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"),r(mt,"href","#cp-nht-thuc-tnh-thnh-phn"),r(nt,"class","relative group"),qe(q.src,es="https://hf.space/gradioiframe/course-demos/blocks_update_component_properties/+")||r(q,"src",es),r(q,"frameborder","0"),r(q,"height","300"),r(q,"title","Gradio app"),r(q,"class","container p-0 flex-grow space-iframe"),r(q,"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"),r(q,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),r(Gt,"href","https://huggingface.co/spaces"),r(Gt,"rel","nofollow")},m(t,l){n(document.head,f),i(t,G,l),i(t,N,l),n(N,et),n(et,an),_(_t,an,null),n(N,Fh),n(N,sn),n(sn,Lh),i(t,De,l),_(xt,t,l),i(t,Oe,l),i(t,P,l),n(P,Gh),n(P,ln),n(ln,Rh),n(P,Mh),n(P,rn),n(rn,Hh),n(P,zh),n(P,pn),n(pn,Vh),n(P,Kh),i(t,Ae,l),i(t,R,l),n(R,Uh),n(R,gn),n(gn,Jh),n(R,Wh),n(R,mn),n(mn,Qh),n(R,Xh),i(t,Se,l),i(t,ht,l),n(ht,un),n(un,wt),n(wt,Yh),n(wt,dn),n(dn,Zh),n(wt,tc),n(ht,nc),n(ht,fn),n(fn,J),n(J,ec),n(J,bn),n(bn,hc),n(J,cc),n(J,vn),n(vn,oc),n(J,ac),i(t,Ne,l),i(t,W,l),n(W,ct),n(ct,kn),_(Et,kn,null),n(W,sc),n(W,yn),n(yn,lc),i(t,Fe,l),i(t,I,l),n(I,ic),n(I,_n),n(_n,rc),n(I,pc),n(I,xn),n(xn,gc),n(I,mc),n(I,wn),n(wn,uc),n(I,dc),i(t,Le,l),i(t,D,l),n(D,En),n(En,fc),n(D,bc),n(D,$n),n($n,vc),n(D,kc),n(D,Tn),n(Tn,yc),n(D,_c),n(D,jn),n(jn,xc),i(t,Ge,l),i(t,Ht,l),n(Ht,wc),i(t,Re,l),i(t,Q,l),n(Q,ot),n(ot,Bn),_($t,Bn,null),n(Q,Ec),n(Q,Cn),n(Cn,$c),i(t,Me,l),i(t,zt,l),n(zt,Tc),i(t,He,l),_(Tt,t,l),i(t,ze,l),i(t,$,l),i(t,Ve,l),i(t,Vt,l),n(Vt,jc),i(t,Ke,l),i(t,Kt,l),n(Kt,jt),n(jt,Bc),n(jt,qn),n(qn,Cc),n(jt,qc),i(t,Ue,l),_(at,t,l),i(t,Je,l),i(t,Ut,l),n(Ut,Pc),i(t,We,l),i(t,F,l),n(F,Pn),n(Pn,Bt),n(Bt,Ic),n(Bt,In),n(In,Dc),n(Bt,Oc),n(F,Ac),n(F,X),n(X,T),n(T,Sc),n(T,Dn),n(Dn,Nc),n(T,Fc),n(T,On),n(On,Lc),n(T,Gc),n(T,An),n(An,Rc),n(T,Mc),n(T,Sn),n(Sn,Hc),n(T,zc),n(X,Vc),n(X,m),n(m,Kc),n(m,Nn),n(Nn,Uc),n(m,Jc),n(m,Fn),n(Fn,Wc),n(m,Qc),n(m,Ln),n(Ln,Xc),n(m,Yc),n(m,Gn),n(Gn,Zc),n(m,to),n(m,Rn),n(Rn,no),n(m,eo),n(m,Mn),n(Mn,ho),n(m,co),n(m,Hn),n(Hn,oo),n(m,ao),n(X,so),n(X,Ct),n(Ct,lo),n(Ct,qt),n(qt,io),n(Ct,ro),n(F,po),n(F,zn),n(zn,L),n(L,go),n(L,Vn),n(Vn,mo),n(L,uo),n(L,Kn),n(Kn,fo),n(L,bo),n(L,Un),n(Un,vo),n(L,ko),i(t,Qe,l),i(t,Y,l),n(Y,st),n(st,Jn),_(Pt,Jn,null),n(Y,yo),n(Y,Wn),n(Wn,_o),i(t,Xe,l),i(t,b,l),n(b,xo),n(b,Qn),n(Qn,wo),n(b,Eo),n(b,Xn),n(Xn,$o),n(b,To),n(b,Yn),n(Yn,jo),n(b,Bo),n(b,Zn),n(Zn,Co),n(b,qo),i(t,Ye,l),i(t,O,l),n(O,Po),n(O,te),n(te,Io),n(O,Do),n(O,ne),n(ne,Oo),n(O,Ao),n(O,It),n(It,So),n(O,No),i(t,Ze,l),i(t,A,l),n(A,Fo),n(A,ee),n(ee,Lo),n(A,Go),n(A,he),n(he,Ro),n(A,Mo),n(A,ce),n(ce,Ho),n(A,zo),i(t,th,l),i(t,lt,l),n(lt,Vo),n(lt,oe),n(oe,Ko),n(lt,Uo),i(t,nh,l),_(Dt,t,l),i(t,eh,l),i(t,j,l),i(t,hh,l),i(t,it,l),n(it,Jo),n(it,ae),n(ae,Wo),n(it,Qo),i(t,ch,l),i(t,Z,l),n(Z,rt),n(rt,se),_(Ot,se,null),n(Z,Xo),n(Z,le),n(le,Yo),i(t,oh,l),i(t,pt,l),n(pt,Zo),n(pt,ie),n(ie,ta),n(pt,na),i(t,ah,l),i(t,v,l),n(v,ea),n(v,re),n(re,ha),n(v,ca),n(v,pe),n(pe,oa),n(v,aa),n(v,ge),n(ge,sa),n(v,la),n(v,me),n(me,ia),n(v,ra),i(t,sh,l),i(t,M,l),n(M,pa),n(M,ue),n(ue,ga),n(M,ma),n(M,de),n(de,ua),n(M,da),i(t,lh,l),i(t,H,l),n(H,Jt),n(Jt,fe),n(fe,fa),n(Jt,ba),n(H,va),n(H,Wt),n(Wt,be),n(be,ka),n(Wt,ya),n(H,_a),n(H,Qt),n(Qt,ve),n(ve,xa),n(Qt,wa),i(t,ih,l),i(t,Xt,l),n(Xt,Ea),i(t,rh,l),_(At,t,l),i(t,ph,l),i(t,B,l),i(t,gh,l),i(t,tt,l),n(tt,gt),n(gt,ke),_(St,ke,null),n(tt,$a),n(tt,ye),n(ye,Ta),i(t,mh,l),i(t,z,l),n(z,ja),n(z,_e),n(_e,Ba),n(z,Ca),n(z,xe),n(xe,qa),n(z,Pa),i(t,uh,l),_(Nt,t,l),i(t,dh,l),i(t,C,l),i(t,fh,l),i(t,nt,l),n(nt,mt),n(mt,we),_(Ft,we,null),n(nt,Ia),n(nt,Ee),n(Ee,Da),i(t,bh,l),i(t,ut,l),n(ut,Oa),n(ut,$e),n($e,Aa),n(ut,Sa),i(t,vh,l),i(t,Yt,l),n(Yt,Na),i(t,kh,l),_(Lt,t,l),i(t,yh,l),i(t,q,l),i(t,_h,l),i(t,u,l),n(u,Fa),n(u,Te),n(Te,La),n(u,Ga),n(u,je),n(je,Ra),n(u,Ma),n(u,Be),n(Be,Ha),n(u,za),n(u,Ce),n(Ce,Va),n(u,Ka),n(u,Gt),n(Gt,Ua),n(u,Ja),xh=!0},p(t,[l]){const Rt={};l&2&&(Rt.$$scope={dirty:l,ctx:t}),at.$set(Rt)},i(t){xh||(x(_t.$$.fragment,t),x(xt.$$.fragment,t),x(Et.$$.fragment,t),x($t.$$.fragment,t),x(Tt.$$.fragment,t),x(at.$$.fragment,t),x(Pt.$$.fragment,t),x(Dt.$$.fragment,t),x(Ot.$$.fragment,t),x(At.$$.fragment,t),x(St.$$.fragment,t),x(Nt.$$.fragment,t),x(Ft.$$.fragment,t),x(Lt.$$.fragment,t),xh=!0)},o(t){w(_t.$$.fragment,t),w(xt.$$.fragment,t),w(Et.$$.fragment,t),w($t.$$.fragment,t),w(Tt.$$.fragment,t),w(at.$$.fragment,t),w(Pt.$$.fragment,t),w(Dt.$$.fragment,t),w(Ot.$$.fragment,t),w(At.$$.fragment,t),w(St.$$.fragment,t),w(Nt.$$.fragment,t),w(Ft.$$.fragment,t),w(Lt.$$.fragment,t),xh=!1},d(t){e(f),t&&e(G),t&&e(N),E(_t),t&&e(De),E(xt,t),t&&e(Oe),t&&e(P),t&&e(Ae),t&&e(R),t&&e(Se),t&&e(ht),t&&e(Ne),t&&e(W),E(Et),t&&e(Fe),t&&e(I),t&&e(Le),t&&e(D),t&&e(Ge),t&&e(Ht),t&&e(Re),t&&e(Q),E($t),t&&e(Me),t&&e(zt),t&&e(He),E(Tt,t),t&&e(ze),t&&e($),t&&e(Ve),t&&e(Vt),t&&e(Ke),t&&e(Kt),t&&e(Ue),E(at,t),t&&e(Je),t&&e(Ut),t&&e(We),t&&e(F),t&&e(Qe),t&&e(Y),E(Pt),t&&e(Xe),t&&e(b),t&&e(Ye),t&&e(O),t&&e(Ze),t&&e(A),t&&e(th),t&&e(lt),t&&e(nh),E(Dt,t),t&&e(eh),t&&e(j),t&&e(hh),t&&e(it),t&&e(ch),t&&e(Z),E(Ot),t&&e(oh),t&&e(pt),t&&e(ah),t&&e(v),t&&e(sh),t&&e(M),t&&e(lh),t&&e(H),t&&e(ih),t&&e(Xt),t&&e(rh),E(At,t),t&&e(ph),t&&e(B),t&&e(gh),t&&e(tt),E(St),t&&e(mh),t&&e(z),t&&e(uh),E(Nt,t),t&&e(dh),t&&e(C),t&&e(fh),t&&e(nt),E(Ft),t&&e(bh),t&&e(ut),t&&e(vh),t&&e(Yt),t&&e(kh),E(Lt,t),t&&e(yh),t&&e(q),t&&e(_h),t&&e(u)}}}const Yl={local:"gii-thiu-v-gradio-blocks",sections:[{local:"ti-sao-li-l-blocks",title:"T\u1EA1i sao l\u1EA1i l\xE0 Blocks \u{1F9F1}?"},{local:"to-mt-bn-demo-n-gin-bng-cch-s-dng-blocks",title:"T\u1EA1o m\u1ED9t b\u1EA3n demo \u0111\u01A1n gi\u1EA3n b\u1EB1ng c\xE1ch s\u1EED d\u1EE5ng Blocks"},{local:"ty-chnh-b-cc-ca-bn-demo-ca-bn",title:"T\xF9y ch\u1EC9nh b\u1ED1 c\u1EE5c c\u1EE7a b\u1EA3n demo c\u1EE7a b\u1EA1n"},{local:"khm-ph-cc-s-kin-v-trng-thi",title:"Kh\xE1m ph\xE1 c\xE1c s\u1EF1 ki\u1EC7n v\xE0 tr\u1EA1ng th\xE1i"},{local:"to-bn-demo-a-bc",title:"T\u1EA1o b\u1EA3n demo \u0111a b\u01B0\u1EDBc"},{local:"cp-nht-thuc-tnh-thnh-phn",title:"C\u1EADp nh\u1EADt Thu\u1ED9c t\xEDnh Th\xE0nh ph\u1EA7n"}],title:"Gi\u1EDBi thi\u1EC7u v\u1EC1 Gradio Blocks"};function Zl(Ie){return Ul(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class oi extends Hl{constructor(f){super();zl(this,f,Zl,Xl,Vl,{})}}export{oi as default,Yl as metadata};
