import{S as ho,i as fo,s as go,e as a,k as m,w as Pt,t as l,M as yo,c as r,d as t,m as d,a as i,x as Rt,h as s,b as c,Z as Tt,G as o,g as u,y as Nt,q as Lt,o as Mt,B as Ot,v as bo}from"../../chunks/vendor-hf-doc-builder.js";import{T as wo}from"../../chunks/Tip-hf-doc-builder.js";import{I as po}from"../../chunks/IconCopyLink-hf-doc-builder.js";function vo(de){let h,g,y,b;return{c(){h=l("\u{1F440} Check out "),g=a("a"),y=l("Hugging Face Spaces"),b=l(" to see many recent examples of machine learning demos built by the machine learning community!"),this.h()},l(p){h=s(p,"\u{1F440} Check out "),g=r(p,"A",{href:!0,target:!0});var f=i(g);y=s(f,"Hugging Face Spaces"),f.forEach(t),b=s(p," to see many recent examples of machine learning demos built by the machine learning community!"),this.h()},h(){c(g,"href","https://huggingface.co/spaces"),c(g,"target","_blank")},m(p,f){u(p,h,f),u(p,g,f),o(g,y),u(p,b,f)},d(p){p&&t(h),p&&t(g),p&&t(b)}}}function _o(de){let h,g,y,b,p,f,Oe,Z,He,pe,G,qe,V,Fe,Ce,he,q,ze,fe,k,F,X,De,Ue,je,C,Y,We,Be,Qe,A,ee,Je,Ke,te,Ze,Ve,Xe,z,oe,Ye,et,ge,D,tt,ye,U,ot,be,j,N,at,ae,rt,it,we,w,Ht,ve,W,x,lt,re,st,nt,B,ct,ut,_e,v,qt,ke,Q,L,mt,ie,dt,pt,Ee,_,Ft,xe,E,ht,le,ft,gt,se,yt,bt,$e,I,Ge,$,S,ne,M,wt,ce,vt,Ae,P,_t,ue,kt,Et,Ie,R,xt,O,$t,Gt,Se;return f=new po({}),I=new wo({props:{$$slots:{default:[vo]},$$scope:{ctx:de}}}),M=new po({}),{c(){h=a("meta"),g=m(),y=a("h1"),b=a("a"),p=a("span"),Pt(f.$$.fragment),Oe=m(),Z=a("span"),He=l("Introduction to Gradio"),pe=m(),G=a("p"),qe=l("In this chapter we will be learning about how to build "),V=a("strong"),Fe=l("interactive demos"),Ce=l(" for your machine learning models."),he=m(),q=a("p"),ze=l("Why build a demo or a GUI for your machine learning model in the first place? Demos allow:"),fe=m(),k=a("ul"),F=a("li"),X=a("strong"),De=l("Machine learning developers"),Ue=l(" to easily present their work to a wide audience including non-technical teams or customers"),je=m(),C=a("li"),Y=a("strong"),We=l("Researchers"),Be=l(" to more easily reproduce machine learning models and behavior"),Qe=m(),A=a("li"),ee=a("strong"),Je=l("Quality testers"),Ke=l(" or "),te=a("strong"),Ze=l("end users"),Ve=l(" to more easily identify and debug failure points of models"),Xe=m(),z=a("li"),oe=a("strong"),Ye=l("Diverse users"),et=l(" to discover algorithmic biases in models"),ge=m(),D=a("p"),tt=l("We\u2019ll be using the Gradio library to build demos for our models. Gradio allows you to build, customize, and share web-based demos for any machine learning model, entirely in Python."),ye=m(),U=a("p"),ot=l("Here are some examples of machine learning demos built with Gradio:"),be=m(),j=a("ul"),N=a("li"),at=l("A "),ae=a("strong"),rt=l("sketch recognition"),it=l(" model that takes in a sketch and outputs labels of what it thinks is being drawn:"),we=m(),w=a("iframe"),ve=m(),W=a("ul"),x=a("li"),lt=l("An extractive "),re=a("strong"),st=l("question answering"),nt=l(" model that takes in a context paragraph and a quest and outputs a response and a probability score (we discussed this kind of model "),B=a("a"),ct=l("in Chapter 7"),ut=l("):"),_e=m(),v=a("iframe"),ke=m(),Q=a("ul"),L=a("li"),mt=l("A "),ie=a("strong"),dt=l("background removal"),pt=l(" model that takes in an image and outputs the image with the background removed:"),Ee=m(),_=a("iframe"),xe=m(),E=a("p"),ht=l("This chapter is broken down into sections which include both "),le=a("em"),ft=l("concepts"),gt=l(" and "),se=a("em"),yt=l("applications"),bt=l(". After you learn the concept in each section, you\u2019ll apply it to build a particular kind of demo, ranging from image classification to speech recognition. By the time you finish this chapter, you\u2019ll be able to build these demos (and many more!) in just a few lines of Python code."),$e=m(),Pt(I.$$.fragment),Ge=m(),$=a("h2"),S=a("a"),ne=a("span"),Pt(M.$$.fragment),wt=m(),ce=a("span"),vt=l("Gradio blocks party \u{1F973}"),Ae=m(),P=a("p"),_t=l("If you want to put the knowledge from this chapter to good use, come join the Gradio blocks party! This is a community event that\u2019s hosted by Hugging Face on "),ue=a("strong"),kt=l("May 16-31"),Et=l(". During this event, you\u2019ll build cool machine learning demos with Gradio and be in the running to win Hugging Face swag and prizes!"),Ie=m(),R=a("p"),xt=l("Check out the "),O=a("a"),$t=l("event description"),Gt=l(" for details on how to participate - we can\u2019t wait to see what you\u2019ll build \u{1F917}!"),this.h()},l(e){const n=yo('[data-svelte="svelte-1phssyn"]',document.head);h=r(n,"META",{name:!0,content:!0}),n.forEach(t),g=d(e),y=r(e,"H1",{class:!0});var H=i(y);b=r(H,"A",{id:!0,class:!0,href:!0});var Ct=i(b);p=r(Ct,"SPAN",{});var zt=i(p);Rt(f.$$.fragment,zt),zt.forEach(t),Ct.forEach(t),Oe=d(H),Z=r(H,"SPAN",{});var Dt=i(Z);He=s(Dt,"Introduction to Gradio"),Dt.forEach(t),H.forEach(t),pe=d(e),G=r(e,"P",{});var Pe=i(G);qe=s(Pe,"In this chapter we will be learning about how to build "),V=r(Pe,"STRONG",{});var Ut=i(V);Fe=s(Ut,"interactive demos"),Ut.forEach(t),Ce=s(Pe," for your machine learning models."),Pe.forEach(t),he=d(e),q=r(e,"P",{});var jt=i(q);ze=s(jt,"Why build a demo or a GUI for your machine learning model in the first place? Demos allow:"),jt.forEach(t),fe=d(e),k=r(e,"UL",{});var T=i(k);F=r(T,"LI",{});var At=i(F);X=r(At,"STRONG",{});var Wt=i(X);De=s(Wt,"Machine learning developers"),Wt.forEach(t),Ue=s(At," to easily present their work to a wide audience including non-technical teams or customers"),At.forEach(t),je=d(T),C=r(T,"LI",{});var It=i(C);Y=r(It,"STRONG",{});var Bt=i(Y);We=s(Bt,"Researchers"),Bt.forEach(t),Be=s(It," to more easily reproduce machine learning models and behavior"),It.forEach(t),Qe=d(T),A=r(T,"LI",{});var me=i(A);ee=r(me,"STRONG",{});var Qt=i(ee);Je=s(Qt,"Quality testers"),Qt.forEach(t),Ke=s(me," or "),te=r(me,"STRONG",{});var Jt=i(te);Ze=s(Jt,"end users"),Jt.forEach(t),Ve=s(me," to more easily identify and debug failure points of models"),me.forEach(t),Xe=d(T),z=r(T,"LI",{});var St=i(z);oe=r(St,"STRONG",{});var Kt=i(oe);Ye=s(Kt,"Diverse users"),Kt.forEach(t),et=s(St," to discover algorithmic biases in models"),St.forEach(t),T.forEach(t),ge=d(e),D=r(e,"P",{});var Zt=i(D);tt=s(Zt,"We\u2019ll be using the Gradio library to build demos for our models. Gradio allows you to build, customize, and share web-based demos for any machine learning model, entirely in Python."),Zt.forEach(t),ye=d(e),U=r(e,"P",{});var Vt=i(U);ot=s(Vt,"Here are some examples of machine learning demos built with Gradio:"),Vt.forEach(t),be=d(e),j=r(e,"UL",{});var Xt=i(j);N=r(Xt,"LI",{});var Re=i(N);at=s(Re,"A "),ae=r(Re,"STRONG",{});var Yt=i(ae);rt=s(Yt,"sketch recognition"),Yt.forEach(t),it=s(Re," model that takes in a sketch and outputs labels of what it thinks is being drawn:"),Re.forEach(t),Xt.forEach(t),we=d(e),w=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),i(w).forEach(t),ve=d(e),W=r(e,"UL",{});var eo=i(W);x=r(eo,"LI",{});var J=i(x);lt=s(J,"An extractive "),re=r(J,"STRONG",{});var to=i(re);st=s(to,"question answering"),to.forEach(t),nt=s(J," model that takes in a context paragraph and a quest and outputs a response and a probability score (we discussed this kind of model "),B=r(J,"A",{href:!0});var oo=i(B);ct=s(oo,"in Chapter 7"),oo.forEach(t),ut=s(J,"):"),J.forEach(t),eo.forEach(t),_e=d(e),v=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),i(v).forEach(t),ke=d(e),Q=r(e,"UL",{});var ao=i(Q);L=r(ao,"LI",{});var Te=i(L);mt=s(Te,"A "),ie=r(Te,"STRONG",{});var ro=i(ie);dt=s(ro,"background removal"),ro.forEach(t),pt=s(Te," model that takes in an image and outputs the image with the background removed:"),Te.forEach(t),ao.forEach(t),Ee=d(e),_=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),i(_).forEach(t),xe=d(e),E=r(e,"P",{});var K=i(E);ht=s(K,"This chapter is broken down into sections which include both "),le=r(K,"EM",{});var io=i(le);ft=s(io,"concepts"),io.forEach(t),gt=s(K," and "),se=r(K,"EM",{});var lo=i(se);yt=s(lo,"applications"),lo.forEach(t),bt=s(K,". After you learn the concept in each section, you\u2019ll apply it to build a particular kind of demo, ranging from image classification to speech recognition. By the time you finish this chapter, you\u2019ll be able to build these demos (and many more!) in just a few lines of Python code."),K.forEach(t),$e=d(e),Rt(I.$$.fragment,e),Ge=d(e),$=r(e,"H2",{class:!0});var Ne=i($);S=r(Ne,"A",{id:!0,class:!0,href:!0});var so=i(S);ne=r(so,"SPAN",{});var no=i(ne);Rt(M.$$.fragment,no),no.forEach(t),so.forEach(t),wt=d(Ne),ce=r(Ne,"SPAN",{});var co=i(ce);vt=s(co,"Gradio blocks party \u{1F973}"),co.forEach(t),Ne.forEach(t),Ae=d(e),P=r(e,"P",{});var Le=i(P);_t=s(Le,"If you want to put the knowledge from this chapter to good use, come join the Gradio blocks party! This is a community event that\u2019s hosted by Hugging Face on "),ue=r(Le,"STRONG",{});var uo=i(ue);kt=s(uo,"May 16-31"),uo.forEach(t),Et=s(Le,". During this event, you\u2019ll build cool machine learning demos with Gradio and be in the running to win Hugging Face swag and prizes!"),Le.forEach(t),Ie=d(e),R=r(e,"P",{});var Me=i(R);xt=s(Me,"Check out the "),O=r(Me,"A",{href:!0,rel:!0});var mo=i(O);$t=s(mo,"event description"),mo.forEach(t),Gt=s(Me," for details on how to participate - we can\u2019t wait to see what you\u2019ll build \u{1F917}!"),Me.forEach(t),this.h()},h(){c(h,"name","hf:doc:metadata"),c(h,"content",JSON.stringify(ko)),c(b,"id","introduction-to-gradio"),c(b,"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"),c(b,"href","#introduction-to-gradio"),c(y,"class","relative group"),Tt(w.src,Ht="https://hf.space/gradioiframe/course-demos/draw2/+")||c(w,"src",Ht),c(w,"frameborder","0"),c(w,"height","450"),c(w,"title","Gradio app"),c(w,"class","container p-0 flex-grow space-iframe"),c(w,"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"),c(w,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),c(B,"href","/course/chapter7/7"),Tt(v.src,qt="https://hf.space/gradioiframe/course-demos/question-answering-simple/+")||c(v,"src",qt),c(v,"frameborder","0"),c(v,"height","640"),c(v,"title","Gradio app"),c(v,"class","container p-0 flex-grow space-iframe"),c(v,"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"),c(v,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),Tt(_.src,Ft="https://hf.space/gradioiframe/course-demos/remove-bg-original/+")||c(_,"src",Ft),c(_,"frameborder","0"),c(_,"height","640"),c(_,"title","Gradio app"),c(_,"class","container p-0 flex-grow space-iframe"),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"),c(_,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),c(S,"id","gradio-blocks-party"),c(S,"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"),c(S,"href","#gradio-blocks-party"),c($,"class","relative group"),c(O,"href","https://github.com/AK391/community-events/blob/main/gradio-blocks/README.md"),c(O,"rel","nofollow")},m(e,n){o(document.head,h),u(e,g,n),u(e,y,n),o(y,b),o(b,p),Nt(f,p,null),o(y,Oe),o(y,Z),o(Z,He),u(e,pe,n),u(e,G,n),o(G,qe),o(G,V),o(V,Fe),o(G,Ce),u(e,he,n),u(e,q,n),o(q,ze),u(e,fe,n),u(e,k,n),o(k,F),o(F,X),o(X,De),o(F,Ue),o(k,je),o(k,C),o(C,Y),o(Y,We),o(C,Be),o(k,Qe),o(k,A),o(A,ee),o(ee,Je),o(A,Ke),o(A,te),o(te,Ze),o(A,Ve),o(k,Xe),o(k,z),o(z,oe),o(oe,Ye),o(z,et),u(e,ge,n),u(e,D,n),o(D,tt),u(e,ye,n),u(e,U,n),o(U,ot),u(e,be,n),u(e,j,n),o(j,N),o(N,at),o(N,ae),o(ae,rt),o(N,it),u(e,we,n),u(e,w,n),u(e,ve,n),u(e,W,n),o(W,x),o(x,lt),o(x,re),o(re,st),o(x,nt),o(x,B),o(B,ct),o(x,ut),u(e,_e,n),u(e,v,n),u(e,ke,n),u(e,Q,n),o(Q,L),o(L,mt),o(L,ie),o(ie,dt),o(L,pt),u(e,Ee,n),u(e,_,n),u(e,xe,n),u(e,E,n),o(E,ht),o(E,le),o(le,ft),o(E,gt),o(E,se),o(se,yt),o(E,bt),u(e,$e,n),Nt(I,e,n),u(e,Ge,n),u(e,$,n),o($,S),o(S,ne),Nt(M,ne,null),o($,wt),o($,ce),o(ce,vt),u(e,Ae,n),u(e,P,n),o(P,_t),o(P,ue),o(ue,kt),o(P,Et),u(e,Ie,n),u(e,R,n),o(R,xt),o(R,O),o(O,$t),o(R,Gt),Se=!0},p(e,[n]){const H={};n&2&&(H.$$scope={dirty:n,ctx:e}),I.$set(H)},i(e){Se||(Lt(f.$$.fragment,e),Lt(I.$$.fragment,e),Lt(M.$$.fragment,e),Se=!0)},o(e){Mt(f.$$.fragment,e),Mt(I.$$.fragment,e),Mt(M.$$.fragment,e),Se=!1},d(e){t(h),e&&t(g),e&&t(y),Ot(f),e&&t(pe),e&&t(G),e&&t(he),e&&t(q),e&&t(fe),e&&t(k),e&&t(ge),e&&t(D),e&&t(ye),e&&t(U),e&&t(be),e&&t(j),e&&t(we),e&&t(w),e&&t(ve),e&&t(W),e&&t(_e),e&&t(v),e&&t(ke),e&&t(Q),e&&t(Ee),e&&t(_),e&&t(xe),e&&t(E),e&&t($e),Ot(I,e),e&&t(Ge),e&&t($),Ot(M),e&&t(Ae),e&&t(P),e&&t(Ie),e&&t(R)}}}const ko={local:"introduction-to-gradio",sections:[{local:"gradio-blocks-party",title:"Gradio blocks party \u{1F973}"}],title:"Introduction to Gradio"};function Eo(de){return bo(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Ao extends ho{constructor(h){super();fo(this,h,Eo,_o,go,{})}}export{Ao as default,ko as metadata};
