import{S as Ut,i as Ct,s as Ft,e as o,k as u,w as Tt,t as l,M as zt,c as r,d as t,m as d,a as i,x as Lt,h as s,b as c,N as st,F as a,g as m,y as Nt,q as Mt,o as Ot,B as qt,v as Ht}from"../../chunks/vendor-1e8b365d.js";import{T as Dt}from"../../chunks/Tip-62b14c6e.js";import{I as Wt}from"../../chunks/IconCopyLink-483c28ba.js";function Bt(oe){let f,b,g,y;return{c(){f=l("\u{1F440} Check out "),b=o("a"),g=l("Hugging Face Spaces"),y=l(" to see many recent examples of machine learning demos built by the machine learning community!"),this.h()},l(p){f=s(p,"\u{1F440} Check out "),b=r(p,"A",{href:!0,target:!0});var h=i(b);g=s(h,"Hugging Face Spaces"),h.forEach(t),y=s(p," to see many recent examples of machine learning demos built by the machine learning community!"),this.h()},h(){c(b,"href","https://huggingface.co/spaces"),c(b,"target","_blank")},m(p,h){m(p,f,h),m(p,b,h),a(b,g),m(p,y,h)},d(p){p&&t(f),p&&t(b),p&&t(y)}}}function jt(oe){let f,b,g,y,p,h,_e,W,ke,re,$,Ee,B,xe,$e,ie,T,Ge,le,k,L,j,Ie,Ae,Se,N,Q,Re,Pe,Te,G,J,Le,Ne,K,Me,Oe,qe,M,V,Ue,Ce,se,O,Fe,ne,q,ze,ce,U,S,He,X,De,We,me,w,nt,ue,C,x,Be,Y,je,Qe,F,Je,Ke,de,v,ct,pe,z,R,Ve,Z,Xe,Ye,fe,_,mt,he,E,Ze,ee,et,tt,te,at,ot,be,I,ge;return h=new Wt({}),I=new Dt({props:{$$slots:{default:[Bt]},$$scope:{ctx:oe}}}),{c(){f=o("meta"),b=u(),g=o("h1"),y=o("a"),p=o("span"),Tt(h.$$.fragment),_e=u(),W=o("span"),ke=l("Introduction to Gradio"),re=u(),$=o("p"),Ee=l("In this chapter we will be learning about how to build "),B=o("strong"),xe=l("interactive demos"),$e=l(" for your machine learning models."),ie=u(),T=o("p"),Ge=l("Why build a demo or a GUI for your machine learning model in the first place? Demos allow:"),le=u(),k=o("ul"),L=o("li"),j=o("strong"),Ie=l("Machine learning developers"),Ae=l(" to easily present their work to a wide audience including non-technical teams or customers"),Se=u(),N=o("li"),Q=o("strong"),Re=l("Researchers"),Pe=l(" to more easily reproduce machine learning models and behavior"),Te=u(),G=o("li"),J=o("strong"),Le=l("Quality testers"),Ne=l(" or "),K=o("strong"),Me=l("end users"),Oe=l(" to more easily identify and debug failure points of models"),qe=u(),M=o("li"),V=o("strong"),Ue=l("Diverse users"),Ce=l(" to discover algorithmic biases in models"),se=u(),O=o("p"),Fe=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."),ne=u(),q=o("p"),ze=l("Here are some examples of machine learning demos built with Gradio:"),ce=u(),U=o("ul"),S=o("li"),He=l("A "),X=o("strong"),De=l("sketch recognition"),We=l(" model that takes in a sketch and outputs labels of what it thinks is being drawn:"),me=u(),w=o("iframe"),ue=u(),C=o("ul"),x=o("li"),Be=l("An extractive "),Y=o("strong"),je=l("question answering"),Qe=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 "),F=o("a"),Je=l("in Chapter 7"),Ke=l("):"),de=u(),v=o("iframe"),pe=u(),z=o("ul"),R=o("li"),Ve=l("A "),Z=o("strong"),Xe=l("background removal"),Ye=l(" model that takes in an image and outputs the image with the background removed:"),fe=u(),_=o("iframe"),he=u(),E=o("p"),Ze=l("This chapter is broken down into sections which include both "),ee=o("em"),et=l("concepts"),tt=l(" and "),te=o("em"),at=l("applications"),ot=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."),be=u(),Tt(I.$$.fragment),this.h()},l(e){const n=zt('[data-svelte="svelte-1phssyn"]',document.head);f=r(n,"META",{name:!0,content:!0}),n.forEach(t),b=d(e),g=r(e,"H1",{class:!0});var P=i(g);y=r(P,"A",{id:!0,class:!0,href:!0});var ut=i(y);p=r(ut,"SPAN",{});var dt=i(p);Lt(h.$$.fragment,dt),dt.forEach(t),ut.forEach(t),_e=d(P),W=r(P,"SPAN",{});var pt=i(W);ke=s(pt,"Introduction to Gradio"),pt.forEach(t),P.forEach(t),re=d(e),$=r(e,"P",{});var ye=i($);Ee=s(ye,"In this chapter we will be learning about how to build "),B=r(ye,"STRONG",{});var ft=i(B);xe=s(ft,"interactive demos"),ft.forEach(t),$e=s(ye," for your machine learning models."),ye.forEach(t),ie=d(e),T=r(e,"P",{});var ht=i(T);Ge=s(ht,"Why build a demo or a GUI for your machine learning model in the first place? Demos allow:"),ht.forEach(t),le=d(e),k=r(e,"UL",{});var A=i(k);L=r(A,"LI",{});var rt=i(L);j=r(rt,"STRONG",{});var bt=i(j);Ie=s(bt,"Machine learning developers"),bt.forEach(t),Ae=s(rt," to easily present their work to a wide audience including non-technical teams or customers"),rt.forEach(t),Se=d(A),N=r(A,"LI",{});var it=i(N);Q=r(it,"STRONG",{});var gt=i(Q);Re=s(gt,"Researchers"),gt.forEach(t),Pe=s(it," to more easily reproduce machine learning models and behavior"),it.forEach(t),Te=d(A),G=r(A,"LI",{});var ae=i(G);J=r(ae,"STRONG",{});var yt=i(J);Le=s(yt,"Quality testers"),yt.forEach(t),Ne=s(ae," or "),K=r(ae,"STRONG",{});var wt=i(K);Me=s(wt,"end users"),wt.forEach(t),Oe=s(ae," to more easily identify and debug failure points of models"),ae.forEach(t),qe=d(A),M=r(A,"LI",{});var lt=i(M);V=r(lt,"STRONG",{});var vt=i(V);Ue=s(vt,"Diverse users"),vt.forEach(t),Ce=s(lt," to discover algorithmic biases in models"),lt.forEach(t),A.forEach(t),se=d(e),O=r(e,"P",{});var _t=i(O);Fe=s(_t,"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."),_t.forEach(t),ne=d(e),q=r(e,"P",{});var kt=i(q);ze=s(kt,"Here are some examples of machine learning demos built with Gradio:"),kt.forEach(t),ce=d(e),U=r(e,"UL",{});var Et=i(U);S=r(Et,"LI",{});var we=i(S);He=s(we,"A "),X=r(we,"STRONG",{});var xt=i(X);De=s(xt,"sketch recognition"),xt.forEach(t),We=s(we," model that takes in a sketch and outputs labels of what it thinks is being drawn:"),we.forEach(t),Et.forEach(t),me=d(e),w=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),i(w).forEach(t),ue=d(e),C=r(e,"UL",{});var $t=i(C);x=r($t,"LI",{});var H=i(x);Be=s(H,"An extractive "),Y=r(H,"STRONG",{});var Gt=i(Y);je=s(Gt,"question answering"),Gt.forEach(t),Qe=s(H," model that takes in a context paragraph and a quest and outputs a response and a probability score (we discussed this kind of model "),F=r(H,"A",{href:!0});var It=i(F);Je=s(It,"in Chapter 7"),It.forEach(t),Ke=s(H,"):"),H.forEach(t),$t.forEach(t),de=d(e),v=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),i(v).forEach(t),pe=d(e),z=r(e,"UL",{});var At=i(z);R=r(At,"LI",{});var ve=i(R);Ve=s(ve,"A "),Z=r(ve,"STRONG",{});var St=i(Z);Xe=s(St,"background removal"),St.forEach(t),Ye=s(ve," model that takes in an image and outputs the image with the background removed:"),ve.forEach(t),At.forEach(t),fe=d(e),_=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),i(_).forEach(t),he=d(e),E=r(e,"P",{});var D=i(E);Ze=s(D,"This chapter is broken down into sections which include both "),ee=r(D,"EM",{});var Rt=i(ee);et=s(Rt,"concepts"),Rt.forEach(t),tt=s(D," and "),te=r(D,"EM",{});var Pt=i(te);at=s(Pt,"applications"),Pt.forEach(t),ot=s(D,". 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."),D.forEach(t),be=d(e),Lt(I.$$.fragment,e),this.h()},h(){c(f,"name","hf:doc:metadata"),c(f,"content",JSON.stringify(Qt)),c(y,"id","introduction-to-gradio"),c(y,"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(y,"href","#introduction-to-gradio"),c(g,"class","relative group"),st(w.src,nt="https://hf.space/gradioiframe/abidlabs/draw2/+")||c(w,"src",nt),c(w,"frameborder","0"),c(w,"height","400"),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(F,"href","/course/chapter7/7"),st(v.src,ct="https://hf.space/gradioiframe/abidlabs/question-answering-simple/+")||c(v,"src",ct),c(v,"frameborder","0"),c(v,"height","420"),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"),st(_.src,mt="https://hf.space/gradioiframe/abidlabs/remove-bg/+")||c(_,"src",mt),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")},m(e,n){a(document.head,f),m(e,b,n),m(e,g,n),a(g,y),a(y,p),Nt(h,p,null),a(g,_e),a(g,W),a(W,ke),m(e,re,n),m(e,$,n),a($,Ee),a($,B),a(B,xe),a($,$e),m(e,ie,n),m(e,T,n),a(T,Ge),m(e,le,n),m(e,k,n),a(k,L),a(L,j),a(j,Ie),a(L,Ae),a(k,Se),a(k,N),a(N,Q),a(Q,Re),a(N,Pe),a(k,Te),a(k,G),a(G,J),a(J,Le),a(G,Ne),a(G,K),a(K,Me),a(G,Oe),a(k,qe),a(k,M),a(M,V),a(V,Ue),a(M,Ce),m(e,se,n),m(e,O,n),a(O,Fe),m(e,ne,n),m(e,q,n),a(q,ze),m(e,ce,n),m(e,U,n),a(U,S),a(S,He),a(S,X),a(X,De),a(S,We),m(e,me,n),m(e,w,n),m(e,ue,n),m(e,C,n),a(C,x),a(x,Be),a(x,Y),a(Y,je),a(x,Qe),a(x,F),a(F,Je),a(x,Ke),m(e,de,n),m(e,v,n),m(e,pe,n),m(e,z,n),a(z,R),a(R,Ve),a(R,Z),a(Z,Xe),a(R,Ye),m(e,fe,n),m(e,_,n),m(e,he,n),m(e,E,n),a(E,Ze),a(E,ee),a(ee,et),a(E,tt),a(E,te),a(te,at),a(E,ot),m(e,be,n),Nt(I,e,n),ge=!0},p(e,[n]){const P={};n&2&&(P.$$scope={dirty:n,ctx:e}),I.$set(P)},i(e){ge||(Mt(h.$$.fragment,e),Mt(I.$$.fragment,e),ge=!0)},o(e){Ot(h.$$.fragment,e),Ot(I.$$.fragment,e),ge=!1},d(e){t(f),e&&t(b),e&&t(g),qt(h),e&&t(re),e&&t($),e&&t(ie),e&&t(T),e&&t(le),e&&t(k),e&&t(se),e&&t(O),e&&t(ne),e&&t(q),e&&t(ce),e&&t(U),e&&t(me),e&&t(w),e&&t(ue),e&&t(C),e&&t(de),e&&t(v),e&&t(pe),e&&t(z),e&&t(fe),e&&t(_),e&&t(he),e&&t(E),e&&t(be),qt(I,e)}}}const Qt={local:"introduction-to-gradio",title:"Introduction to Gradio"};function Jt(oe){return Ht(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Yt extends Ut{constructor(f){super();Ct(this,f,Jt,jt,Ft,{})}}export{Yt as default,Qt as metadata};
