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