import{s as ot,f as He,n as pt,o as it}from"../chunks/scheduler.37c15a92.js";import{S as rt,i as mt,g as o,s as a,r as y,A as ct,h as p,f as l,c as n,j as D,u as w,x as r,k as i,y as ut,a as s,v as f,d as h,t as M,w as b}from"../chunks/index.2bf4358c.js";import{C as F}from"../chunks/CodeBlock.4f5fc1ad.js";import{D as dt}from"../chunks/DocNotebookDropdown.d9dfeb24.js";import{H as nt}from"../chunks/Heading.8ada512a.js";function yt(_e){let d,O,A,ee,j,te,J,le,x,We="让我们从安装 Gradio 开始吧！ 由于它是一个 Python 包，只需运行：",se,T,Ve="<code>$ pip install gradio</code>",ae,g,Re=`您可以在任何地方运行 Gradio，无论是从您最喜欢的 Python IDE、Jupyter notebook 还是 Google Colab 🤯！
所以无论你在哪里运行 Python，都可以安装 Gradio！`,ne,k,Pe="让我们从一个简单的“Hello World”示例开始，熟悉 Gradio 语法：",oe,G,pe,v,Xe="让我们看一下上面的代码：",ie,$,qe="-首先，我们定义一个名为 <code>greet()</code> 的函数。 在这种情况下，它是一个在您的名字前添加“Hello”的简单函数，但它通常可以是 <em>any</em> Python 函数。 例如，在机器学习应用程序中，此函数将<em>调用模型以对输入进行预测</em>并返回输出。",re,U,Se="<li>然后，我们创建一个带有三个参数的 Gradio <code>Interface</code>，<code>fn</code>、<code>inputs</code> 和 <code>outputs</code>。 这些参数定义了预测函数，以及我们想要的输入和输出组件的<em>type</em>。 在我们的例子中，两个组件都是简单的文本框。</li> <li>然后我们在我们创建的 <code>Interface</code> 上调用 <code>launch()</code> 方法。</li>",me,B,Qe='如果你运行这段代码，下面的界面会自动出现在 Jupyter/Colab notebook 中，或者在浏览器中弹出 <strong><a href="http://localhost:7860/" rel="nofollow">http://localhost:7860</a></strong> 如果运行 从一个脚本。',ce,m,Ye,ue,C,Ee="立即尝试使用您自己的姓名或其他输入来使用此 GUI！",de,I,Ne="您会注意到，在这个 GUI 中，Gradio 自动推断输入参数的名称 (<code>name</code>)并将其应用为文本框顶部的标签。 如果你想改变它怎么办？或者，如果您想以其他方式自定义文本框？ 在这种情况下，您可以实例化一个表示输入组件的类对象。",ye,Z,Le="看看下面的例子：",we,H,fe,c,ze,he,_,Fe="在这里，我们创建了一个带有标签、占位符和一组行数的输入文本框。您可以对输出文本框执行相同的操作，但我们现在将其保留。",Me,W,Ae="我们已经看到，只需几行代码，Gradio 就可以让您围绕任何具有任何类型输入或输出的函数创建一个简单的界面。 在本节中，我们从一个简单的文本框开始，但在接下来的部分中，我们将介绍其他类型的输入和输出。 现在让我们看看在 Gradio 应用程序中包含一些 NLP。",be,V,je,R,Ke="现在让我们构建一个简单的界面，让您可以演示像 GPT-2 这样的<strong>文本生成</strong>模型。",Je,P,De=`我们将使用 🤗 Transformers 中的 <code>pipeline()</code> 函数加载我们的模型。
如果您需要快速复习，您可以返回到 <a href="/course/chapter1/3#text-generation">第 1 章中的那个部分</a>。`,xe,X,Oe="首先，我们定义一个接受文本提示并返回文本完成的预测函数：",Te,q,ge,S,et="此函数完成您提供的提示，您可以使用自己的输入提示运行它以查看它是如何工作的。 这是一个示例（您可能会得到不同的完成）：",ke,Q,Ge,Y,ve,E,tt="现在我们有了一个生成预测的函数，我们可以像之前一样创建和启动一个“接口”：",$e,N,Ue,L,lt="就是这样！ 您现在可以使用此接口使用 GPT-2 模型生成文本，如下所示 🤯.",Be,u,st,Ce,z,at="继续阅读以了解如何使用 Gradio 构建其他类型的演示！",Ie,K,Ze;return j=new nt({props:{title:"构建你的第一个演示",local:"构建你的第一个演示",headingTag:"h1"}}),J=new dt({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/chapter9/section2.ipynb"},{label:"Aws Studio",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/chapter9/section2.ipynb"}]}}),G=new F({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQSUwQWRlZiUyMGdyZWV0KG5hbWUpJTNBJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwJTIySGVsbG8lMjAlMjIlMjAlMkIlMjBuYW1lJTBBJTBBJTBBZGVtbyUyMCUzRCUyMGdyLkludGVyZmFjZShmbiUzRGdyZWV0JTJDJTIwaW5wdXRzJTNEJTIydGV4dCUyMiUyQyUyMG91dHB1dHMlM0QlMjJ0ZXh0JTIyKSUwQSUwQWRlbW8ubGF1bmNoKCk=",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_">greet</span>(<span class="hljs-params">name</span>):
    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;Hello &quot;</span> + name


demo = gr.Interface(fn=greet, inputs=<span class="hljs-string">&quot;text&quot;</span>, outputs=<span class="hljs-string">&quot;text&quot;</span>)

demo.launch()`,wrap:!1}}),H=new F({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQSUwQWRlZiUyMGdyZWV0KG5hbWUpJTNBJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwJTIySGVsbG8lMjAlMjIlMjAlMkIlMjBuYW1lJTBBJTBBJTBBJTIzJTIwV2UlMjBpbnN0YW50aWF0ZSUyMHRoZSUyMFRleHRib3glMjBjbGFzcyUwQXRleHRib3glMjAlM0QlMjBnci5UZXh0Ym94KGxhYmVsJTNEJTIyVHlwZSUyMHlvdXIlMjBuYW1lJTIwaGVyZSUzQSUyMiUyQyUyMHBsYWNlaG9sZGVyJTNEJTIySm9obiUyMERvZSUyMiUyQyUyMGxpbmVzJTNEMiklMEElMEFnci5JbnRlcmZhY2UoZm4lM0RncmVldCUyQyUyMGlucHV0cyUzRHRleHRib3glMkMlMjBvdXRwdXRzJTNEJTIydGV4dCUyMikubGF1bmNoKCk=",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_">greet</span>(<span class="hljs-params">name</span>):
    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;Hello &quot;</span> + name


<span class="hljs-comment"># We instantiate the Textbox class</span>
textbox = gr.Textbox(label=<span class="hljs-string">&quot;Type your name here:&quot;</span>, placeholder=<span class="hljs-string">&quot;John Doe&quot;</span>, lines=<span class="hljs-number">2</span>)

gr.Interface(fn=greet, inputs=textbox, outputs=<span class="hljs-string">&quot;text&quot;</span>).launch()`,wrap:!1}}),V=new nt({props:{title:"🤖 包括模型预测",local:"🤖 包括模型预测",headingTag:"h2"}}),q=new F({props:{code:"ZnJvbSUyMHRyYW5zZm9ybWVycyUyMGltcG9ydCUyMHBpcGVsaW5lJTBBJTBBbW9kZWwlMjAlM0QlMjBwaXBlbGluZSglMjJ0ZXh0LWdlbmVyYXRpb24lMjIpJTBBJTBBJTBBZGVmJTIwcHJlZGljdChwcm9tcHQpJTNBJTBBJTIwJTIwJTIwJTIwY29tcGxldGlvbiUyMCUzRCUyMG1vZGVsKHByb21wdCklNUIwJTVEJTVCJTIyZ2VuZXJhdGVkX3RleHQlMjIlNUQlMEElMjAlMjAlMjAlMjByZXR1cm4lMjBjb21wbGV0aW9u",highlighted:`<span class="hljs-keyword">from</span> transformers <span class="hljs-keyword">import</span> pipeline

model = pipeline(<span class="hljs-string">&quot;text-generation&quot;</span>)


<span class="hljs-keyword">def</span> <span class="hljs-title function_">predict</span>(<span class="hljs-params">prompt</span>):
    completion = model(prompt)[<span class="hljs-number">0</span>][<span class="hljs-string">&quot;generated_text&quot;</span>]
    <span class="hljs-keyword">return</span> completion`,wrap:!1}}),Q=new F({props:{code:"cHJlZGljdCglMjJNeSUyMGZhdm9yaXRlJTIwcHJvZ3JhbW1pbmclMjBsYW5ndWFnZSUyMGlzJTIyKQ==",highlighted:'<span class="hljs-function"><span class="hljs-title">predict</span><span class="hljs-params">(<span class="hljs-string">&quot;My favorite programming language is&quot;</span>)</span></span>',wrap:!1}}),Y=new F({props:{code:"JTNFJTNFJTIwTXklMjBmYXZvcml0ZSUyMHByb2dyYW1taW5nJTIwbGFuZ3VhZ2UlMjBpcyUyMEhhc2tlbGwuJTIwSSUyMHJlYWxseSUyMGVuam95ZWQlMjB0aGUlMjBIYXNrZWxsJTIwbGFuZ3VhZ2UlMkMlMjBidXQlMjBpdCUyMGRvZXNuJ3QlMjBoYXZlJTIwYWxsJTIwdGhlJTIwZmVhdHVyZXMlMjB0aGF0JTIwY2FuJTIwYmUlMjBhcHBsaWVkJTIwdG8lMjBhbnklMjBvdGhlciUyMGxhbmd1YWdlLiUyMEZvciUyMGV4YW1wbGUlMkMlMjBhbGwlMjBpdCUyMGRvZXMlMjBpcyUyMGNvbXBpbGUlMjB0byUyMGElMjBieXRlJTIwYXJyYXku",highlighted:'&gt;&gt; My favorite programming language <span class="hljs-keyword">is</span> Haskell. I really enjoyed <span class="hljs-keyword">the</span> Haskell language, <span class="hljs-keyword">but</span> <span class="hljs-keyword">it</span> doesn&#x27;t have all <span class="hljs-keyword">the</span> features <span class="hljs-keyword">that</span> can be applied <span class="hljs-keyword">to</span> any other language. For example, all <span class="hljs-keyword">it</span> <span class="hljs-keyword">does</span> <span class="hljs-keyword">is</span> compile <span class="hljs-keyword">to</span> a byte array.',wrap:!1}}),N=new F({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQWdyLkludGVyZmFjZShmbiUzRHByZWRpY3QlMkMlMjBpbnB1dHMlM0QlMjJ0ZXh0JTIyJTJDJTIwb3V0cHV0cyUzRCUyMnRleHQlMjIpLmxhdW5jaCgp",highlighted:`<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr

gr.Interface(fn=predict, inputs=<span class="hljs-string">&quot;text&quot;</span>, outputs=<span class="hljs-string">&quot;text&quot;</span>).launch()`,wrap:!1}}),{c(){d=o("meta"),O=a(),A=o("p"),ee=a(),y(j.$$.fragment),te=a(),y(J.$$.fragment),le=a(),x=o("p"),x.textContent=We,se=a(),T=o("p"),T.innerHTML=Ve,ae=a(),g=o("p"),g.textContent=Re,ne=a(),k=o("p"),k.textContent=Pe,oe=a(),y(G.$$.fragment),pe=a(),v=o("p"),v.textContent=Xe,ie=a(),$=o("p"),$.innerHTML=qe,re=a(),U=o("ul"),U.innerHTML=Se,me=a(),B=o("p"),B.innerHTML=Qe,ce=a(),m=o("iframe"),ue=a(),C=o("p"),C.textContent=Ee,de=a(),I=o("p"),I.innerHTML=Ne,ye=a(),Z=o("p"),Z.textContent=Le,we=a(),y(H.$$.fragment),fe=a(),c=o("iframe"),he=a(),_=o("p"),_.textContent=Fe,Me=a(),W=o("p"),W.textContent=Ae,be=a(),y(V.$$.fragment),je=a(),R=o("p"),R.innerHTML=Ke,Je=a(),P=o("p"),P.innerHTML=De,xe=a(),X=o("p"),X.textContent=Oe,Te=a(),y(q.$$.fragment),ge=a(),S=o("p"),S.textContent=et,ke=a(),y(Q.$$.fragment),Ge=a(),y(Y.$$.fragment),ve=a(),E=o("p"),E.textContent=tt,$e=a(),y(N.$$.fragment),Ue=a(),L=o("p"),L.textContent=lt,Be=a(),u=o("iframe"),Ce=a(),z=o("p"),z.textContent=at,Ie=a(),K=o("p"),this.h()},l(e){const t=ct("svelte-u9bgzb",document.head);d=p(t,"META",{name:!0,content:!0}),t.forEach(l),O=n(e),A=p(e,"P",{}),D(A).forEach(l),ee=n(e),w(j.$$.fragment,e),te=n(e),w(J.$$.fragment,e),le=n(e),x=p(e,"P",{"data-svelte-h":!0}),r(x)!=="svelte-13kpg45"&&(x.textContent=We),se=n(e),T=p(e,"P",{"data-svelte-h":!0}),r(T)!=="svelte-sv8g3f"&&(T.innerHTML=Ve),ae=n(e),g=p(e,"P",{"data-svelte-h":!0}),r(g)!=="svelte-12hdhgp"&&(g.textContent=Re),ne=n(e),k=p(e,"P",{"data-svelte-h":!0}),r(k)!=="svelte-1rxpupk"&&(k.textContent=Pe),oe=n(e),w(G.$$.fragment,e),pe=n(e),v=p(e,"P",{"data-svelte-h":!0}),r(v)!=="svelte-1h9q0nw"&&(v.textContent=Xe),ie=n(e),$=p(e,"P",{"data-svelte-h":!0}),r($)!=="svelte-1hloex4"&&($.innerHTML=qe),re=n(e),U=p(e,"UL",{"data-svelte-h":!0}),r(U)!=="svelte-1w1xsak"&&(U.innerHTML=Se),me=n(e),B=p(e,"P",{"data-svelte-h":!0}),r(B)!=="svelte-14i60of"&&(B.innerHTML=Qe),ce=n(e),m=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),D(m).forEach(l),ue=n(e),C=p(e,"P",{"data-svelte-h":!0}),r(C)!=="svelte-1a96120"&&(C.textContent=Ee),de=n(e),I=p(e,"P",{"data-svelte-h":!0}),r(I)!=="svelte-1jsb1w6"&&(I.innerHTML=Ne),ye=n(e),Z=p(e,"P",{"data-svelte-h":!0}),r(Z)!=="svelte-tqqosc"&&(Z.textContent=Le),we=n(e),w(H.$$.fragment,e),fe=n(e),c=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),D(c).forEach(l),he=n(e),_=p(e,"P",{"data-svelte-h":!0}),r(_)!=="svelte-33e9jk"&&(_.textContent=Fe),Me=n(e),W=p(e,"P",{"data-svelte-h":!0}),r(W)!=="svelte-kxv5bf"&&(W.textContent=Ae),be=n(e),w(V.$$.fragment,e),je=n(e),R=p(e,"P",{"data-svelte-h":!0}),r(R)!=="svelte-1gvdm82"&&(R.innerHTML=Ke),Je=n(e),P=p(e,"P",{"data-svelte-h":!0}),r(P)!=="svelte-pcdk6z"&&(P.innerHTML=De),xe=n(e),X=p(e,"P",{"data-svelte-h":!0}),r(X)!=="svelte-1hw79n6"&&(X.textContent=Oe),Te=n(e),w(q.$$.fragment,e),ge=n(e),S=p(e,"P",{"data-svelte-h":!0}),r(S)!=="svelte-1huilbm"&&(S.textContent=et),ke=n(e),w(Q.$$.fragment,e),Ge=n(e),w(Y.$$.fragment,e),ve=n(e),E=p(e,"P",{"data-svelte-h":!0}),r(E)!=="svelte-crn2qx"&&(E.textContent=tt),$e=n(e),w(N.$$.fragment,e),Ue=n(e),L=p(e,"P",{"data-svelte-h":!0}),r(L)!=="svelte-1cx3751"&&(L.textContent=lt),Be=n(e),u=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),D(u).forEach(l),Ce=n(e),z=p(e,"P",{"data-svelte-h":!0}),r(z)!=="svelte-1xbhefn"&&(z.textContent=at),Ie=n(e),K=p(e,"P",{}),D(K).forEach(l),this.h()},h(){i(d,"name","hf:doc:metadata"),i(d,"content",wt),He(m.src,Ye="https://course-demos-hello-world.hf.space")||i(m,"src",Ye),i(m,"frameborder","0"),i(m,"height","250"),i(m,"title","Gradio app"),i(m,"class","container p-0 flex-grow space-iframe"),i(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"),i(m,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),He(c.src,ze="https://course-demos-hello-world-custom.hf.space")||i(c,"src",ze),i(c,"frameborder","0"),i(c,"height","300"),i(c,"title","Gradio app"),i(c,"class","container p-0 flex-grow space-iframe"),i(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"),i(c,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),He(u.src,st="https://course-demos-gpt-2.hf.space")||i(u,"src",st),i(u,"frameborder","0"),i(u,"height","300"),i(u,"title","Gradio app"),i(u,"class","container p-0 flex-grow space-iframe"),i(u,"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"),i(u,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads")},m(e,t){ut(document.head,d),s(e,O,t),s(e,A,t),s(e,ee,t),f(j,e,t),s(e,te,t),f(J,e,t),s(e,le,t),s(e,x,t),s(e,se,t),s(e,T,t),s(e,ae,t),s(e,g,t),s(e,ne,t),s(e,k,t),s(e,oe,t),f(G,e,t),s(e,pe,t),s(e,v,t),s(e,ie,t),s(e,$,t),s(e,re,t),s(e,U,t),s(e,me,t),s(e,B,t),s(e,ce,t),s(e,m,t),s(e,ue,t),s(e,C,t),s(e,de,t),s(e,I,t),s(e,ye,t),s(e,Z,t),s(e,we,t),f(H,e,t),s(e,fe,t),s(e,c,t),s(e,he,t),s(e,_,t),s(e,Me,t),s(e,W,t),s(e,be,t),f(V,e,t),s(e,je,t),s(e,R,t),s(e,Je,t),s(e,P,t),s(e,xe,t),s(e,X,t),s(e,Te,t),f(q,e,t),s(e,ge,t),s(e,S,t),s(e,ke,t),f(Q,e,t),s(e,Ge,t),f(Y,e,t),s(e,ve,t),s(e,E,t),s(e,$e,t),f(N,e,t),s(e,Ue,t),s(e,L,t),s(e,Be,t),s(e,u,t),s(e,Ce,t),s(e,z,t),s(e,Ie,t),s(e,K,t),Ze=!0},p:pt,i(e){Ze||(h(j.$$.fragment,e),h(J.$$.fragment,e),h(G.$$.fragment,e),h(H.$$.fragment,e),h(V.$$.fragment,e),h(q.$$.fragment,e),h(Q.$$.fragment,e),h(Y.$$.fragment,e),h(N.$$.fragment,e),Ze=!0)},o(e){M(j.$$.fragment,e),M(J.$$.fragment,e),M(G.$$.fragment,e),M(H.$$.fragment,e),M(V.$$.fragment,e),M(q.$$.fragment,e),M(Q.$$.fragment,e),M(Y.$$.fragment,e),M(N.$$.fragment,e),Ze=!1},d(e){e&&(l(O),l(A),l(ee),l(te),l(le),l(x),l(se),l(T),l(ae),l(g),l(ne),l(k),l(oe),l(pe),l(v),l(ie),l($),l(re),l(U),l(me),l(B),l(ce),l(m),l(ue),l(C),l(de),l(I),l(ye),l(Z),l(we),l(fe),l(c),l(he),l(_),l(Me),l(W),l(be),l(je),l(R),l(Je),l(P),l(xe),l(X),l(Te),l(ge),l(S),l(ke),l(Ge),l(ve),l(E),l($e),l(Ue),l(L),l(Be),l(u),l(Ce),l(z),l(Ie),l(K)),l(d),b(j,e),b(J,e),b(G,e),b(H,e),b(V,e),b(q,e),b(Q,e),b(Y,e),b(N,e)}}}const wt='{"title":"构建你的第一个演示","local":"构建你的第一个演示","sections":[{"title":"🤖 包括模型预测","local":"🤖 包括模型预测","sections":[],"depth":2}],"depth":1}';function ft(_e){return it(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class xt extends rt{constructor(d){super(),mt(this,d,ft,yt,ot,{})}}export{xt as component};
