import{s as pt,f as He,n as rt,o as it}from"../chunks/scheduler.37c15a92.js";import{S as mt,i as ct,g as o,s as a,r as d,A as ut,h as p,f as l,c as n,j as O,u as w,x as i,k as r,y as dt,a as s,v as f,d as y,t as h,w as J}from"../chunks/index.2bf4358c.js";import{C as A}from"../chunks/CodeBlock.4e987730.js";import{D as wt}from"../chunks/DocNotebookDropdown.efc1fb7c.js";import{H as ot,E as ft}from"../chunks/getInferenceSnippets.1837c472.js";function yt(Ve){let M,ee,D,te,b,le,T,se,g,Xe="让我们从安装 Gradio 开始吧！与安装其他 Python 包一样，只需运行：",ae,j,ne,U,Qe="Gradio 支持所有常见的平台，无论是从你最喜欢的 Python IDE、Jupyter notebook 还是 Google Colab 🤯！",oe,x,Pe="所以无论你在哪里运行 Python，都可以安装 Gradio！",pe,$,Re="让我们从一个简单的“Hello World”示例开始熟悉 Gradio 语法：",re,G,ie,k,qe="让我们逐步解释上面的代码：",me,I,Se="<li>首先，我们定义一个名为 <code>greet()</code> 的函数。在这个例子中，它是一个在你的名字前添加“Hello”的简单函数，不过它可以被替换为任意的 Python 函数。例如，在机器学习的演示中，该函数可以调用机器学习模型对输入进行预测并返回输出。</li> <li>然后，我们创建一个带有三个参数 <code>fn</code> 、 <code>inputs</code> 和 <code>outputs</code> 的 Gradio <code>Interface</code> 。这些参数定义了预测函数，以及我们想要的输入和输出组件的类型。在我们的这个例子中，输入和输出组件都是简单的文本框。</li> <li>最后我们调用创建的 <code>Interface</code> 上的 <code>launch()</code> 方法。</li>",ce,C,Ye='如果你运行这段代码，下面的界面会自动出现在 Jupyter/Colab notebook 中，或者如果在一个脚本中运行，会自动在浏览器中弹出 <strong><a href="http://localhost:7860" rel="nofollow">http://localhost:7860</a></strong> 。',ue,m,Fe,de,v,ze="现在，试着使用你自己的名字或其他的输入来试一试这个 GUI！",we,B,Ee="你会注意到，在这个 GUI 中，在这个例子中，Gradio 会根据输入参数的名称（<code>name</code>）自动推断文本框顶部的标签。如果你想改变这个标签怎么办？或者，如果你想自定义这个文本框的其他属性？在这种情况下，你可以实例化一个表示输入组件的类。",fe,Z,Le="看看下面的例子：",ye,W,he,c,Ne,Je,_,Ae="在上面的代码中，我们创建了一个带有自定义标签、预设的占位符和固定行数的输入文本框。同时，你也可以自定义输出文本框，但我们现在先不管它。",Me,H,De="我们已经看到，只需几行代码，Gradio 就能让你围绕任何函数创建一个简单的界面，同时兼容各种类型的输入或输出。在本节中，我们先从一个简单的文本框开始，但在接下来的节中，我们将介绍其他类型的输入和输出。现在让我们看一下如何在 Gradio 应用中包含一些自然语言处理（NLP）模型。",be,V,Te,X,Ke="现在让我们构建一个简单的界面，让你可以在这个界面中演示像 GPT-2 这样的<strong>文本生成</strong>模型。",ge,Q,Oe=`我们将使用 🤗 Transformers 中的 <code>pipeline()</code> 函数加载我们的模型。
如果你需要快速复习，你可以返回到 <a href="/course/chapter1/3#text-generation">第一章</a> 进行回顾。`,je,P,et="首先，我们定义一个预测函数，它接收一个文本输入并返回文本生成的结果：",Ue,R,xe,q,tt="此函数会不断接龙补全输入，你可以自己尝试各种输入来查看它是如何运行的。下面是一个示例（你可能会得到不同的输出结果）：",$e,S,Ge,Y,ke,F,lt="现在我们有了一个生成预测的函数，接下来可以像之前一样创建和启动一个 <code>Interface</code> ：",Ie,z,Ce,E,st="就是这样！你现在可以在 Interface 创建的 Web 网页上使用 GPT-2 模型生成文本，如下所示 🤯：",ve,u,at,Be,L,nt="接下来，让我们一起了解一下如何使用 Gradio 构建其他输入输出类型的演示！",Ze,N,We,K,_e;return b=new ot({props:{title:"构建你的第一个演示",local:"构建你的第一个演示",headingTag:"h1"}}),T=new wt({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"}]}}),j=new A({props:{code:"cGlwJTIwaW5zdGFsbCUyMGdyYWRpbyUwQQ==",highlighted:`pip install gradio
`,wrap:!1}}),G=new A({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}}),W=new A({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQSUwQWRlZiUyMGdyZWV0KG5hbWUpJTNBJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwJTIySGVsbG8lMjAlMjIlMjAlMkIlMjBuYW1lJTBBJTBBJTBBJTIzJTIwJUU2JTg4JTkxJUU0JUJCJUFDJUU1JUIwJTg2JUU2JTk2JTg3JUU2JTlDJUFDJUU2JUExJTg2JUU3JUIxJUJCJUU1JUFFJTlFJUU0JUJFJThCJUU1JThDJTk2JTBBdGV4dGJveCUyMCUzRCUyMGdyLlRleHRib3gobGFiZWwlM0QlMjJUeXBlJTIweW91ciUyMG5hbWUlMjBoZXJlJTNBJTIyJTJDJTIwcGxhY2Vob2xkZXIlM0QlMjJKb2huJTIwRG9lJTIyJTJDJTIwbGluZXMlM0QyKSUwQSUwQWdyLkludGVyZmFjZShmbiUzRGdyZWV0JTJDJTIwaW5wdXRzJTNEdGV4dGJveCUyQyUyMG91dHB1dHMlM0QlMjJ0ZXh0JTIyKS5sYXVuY2goKQ==",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"># 我们将文本框类实例化</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 ot({props:{title:"🤖 使用模型预测",local:"🤖 使用模型预测",headingTag:"h2"}}),R=new A({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}}),S=new A({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 A({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}}),z=new A({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}}),N=new ft({props:{source:"https://github.com/huggingface/course/blob/main/chapters/zh-CN/chapter9/2.mdx"}}),{c(){M=o("meta"),ee=a(),D=o("p"),te=a(),d(b.$$.fragment),le=a(),d(T.$$.fragment),se=a(),g=o("p"),g.textContent=Xe,ae=a(),d(j.$$.fragment),ne=a(),U=o("p"),U.textContent=Qe,oe=a(),x=o("p"),x.textContent=Pe,pe=a(),$=o("p"),$.textContent=Re,re=a(),d(G.$$.fragment),ie=a(),k=o("p"),k.textContent=qe,me=a(),I=o("ul"),I.innerHTML=Se,ce=a(),C=o("p"),C.innerHTML=Ye,ue=a(),m=o("iframe"),de=a(),v=o("p"),v.textContent=ze,we=a(),B=o("p"),B.innerHTML=Ee,fe=a(),Z=o("p"),Z.textContent=Le,ye=a(),d(W.$$.fragment),he=a(),c=o("iframe"),Je=a(),_=o("p"),_.textContent=Ae,Me=a(),H=o("p"),H.textContent=De,be=a(),d(V.$$.fragment),Te=a(),X=o("p"),X.innerHTML=Ke,ge=a(),Q=o("p"),Q.innerHTML=Oe,je=a(),P=o("p"),P.textContent=et,Ue=a(),d(R.$$.fragment),xe=a(),q=o("p"),q.textContent=tt,$e=a(),d(S.$$.fragment),Ge=a(),d(Y.$$.fragment),ke=a(),F=o("p"),F.innerHTML=lt,Ie=a(),d(z.$$.fragment),Ce=a(),E=o("p"),E.textContent=st,ve=a(),u=o("iframe"),Be=a(),L=o("p"),L.textContent=nt,Ze=a(),d(N.$$.fragment),We=a(),K=o("p"),this.h()},l(e){const t=ut("svelte-u9bgzb",document.head);M=p(t,"META",{name:!0,content:!0}),t.forEach(l),ee=n(e),D=p(e,"P",{}),O(D).forEach(l),te=n(e),w(b.$$.fragment,e),le=n(e),w(T.$$.fragment,e),se=n(e),g=p(e,"P",{"data-svelte-h":!0}),i(g)!=="svelte-14r1l45"&&(g.textContent=Xe),ae=n(e),w(j.$$.fragment,e),ne=n(e),U=p(e,"P",{"data-svelte-h":!0}),i(U)!=="svelte-11u8tjg"&&(U.textContent=Qe),oe=n(e),x=p(e,"P",{"data-svelte-h":!0}),i(x)!=="svelte-m9srgt"&&(x.textContent=Pe),pe=n(e),$=p(e,"P",{"data-svelte-h":!0}),i($)!=="svelte-d8y4tk"&&($.textContent=Re),re=n(e),w(G.$$.fragment,e),ie=n(e),k=p(e,"P",{"data-svelte-h":!0}),i(k)!=="svelte-804y8a"&&(k.textContent=qe),me=n(e),I=p(e,"UL",{"data-svelte-h":!0}),i(I)!=="svelte-1n3kmpd"&&(I.innerHTML=Se),ce=n(e),C=p(e,"P",{"data-svelte-h":!0}),i(C)!=="svelte-13ean5n"&&(C.innerHTML=Ye),ue=n(e),m=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),O(m).forEach(l),de=n(e),v=p(e,"P",{"data-svelte-h":!0}),i(v)!=="svelte-8eh90z"&&(v.textContent=ze),we=n(e),B=p(e,"P",{"data-svelte-h":!0}),i(B)!=="svelte-11o2aju"&&(B.innerHTML=Ee),fe=n(e),Z=p(e,"P",{"data-svelte-h":!0}),i(Z)!=="svelte-tqqosc"&&(Z.textContent=Le),ye=n(e),w(W.$$.fragment,e),he=n(e),c=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),O(c).forEach(l),Je=n(e),_=p(e,"P",{"data-svelte-h":!0}),i(_)!=="svelte-1mgzc85"&&(_.textContent=Ae),Me=n(e),H=p(e,"P",{"data-svelte-h":!0}),i(H)!=="svelte-1nnnv7h"&&(H.textContent=De),be=n(e),w(V.$$.fragment,e),Te=n(e),X=p(e,"P",{"data-svelte-h":!0}),i(X)!=="svelte-1wyvxhu"&&(X.innerHTML=Ke),ge=n(e),Q=p(e,"P",{"data-svelte-h":!0}),i(Q)!=="svelte-10jy9dt"&&(Q.innerHTML=Oe),je=n(e),P=p(e,"P",{"data-svelte-h":!0}),i(P)!=="svelte-1jk7hhy"&&(P.textContent=et),Ue=n(e),w(R.$$.fragment,e),xe=n(e),q=p(e,"P",{"data-svelte-h":!0}),i(q)!=="svelte-1772wow"&&(q.textContent=tt),$e=n(e),w(S.$$.fragment,e),Ge=n(e),w(Y.$$.fragment,e),ke=n(e),F=p(e,"P",{"data-svelte-h":!0}),i(F)!=="svelte-o7thcq"&&(F.innerHTML=lt),Ie=n(e),w(z.$$.fragment,e),Ce=n(e),E=p(e,"P",{"data-svelte-h":!0}),i(E)!=="svelte-avnz2"&&(E.textContent=st),ve=n(e),u=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),O(u).forEach(l),Be=n(e),L=p(e,"P",{"data-svelte-h":!0}),i(L)!=="svelte-lewjhk"&&(L.textContent=nt),Ze=n(e),w(N.$$.fragment,e),We=n(e),K=p(e,"P",{}),O(K).forEach(l),this.h()},h(){r(M,"name","hf:doc:metadata"),r(M,"content",ht),He(m.src,Fe="https://course-demos-hello-world.hf.space")||r(m,"src",Fe),r(m,"frameborder","0"),r(m,"height","250"),r(m,"title","Gradio app"),r(m,"class","container p-0 flex-grow space-iframe"),r(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"),r(m,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),He(c.src,Ne="https://course-demos-hello-world-custom.hf.space")||r(c,"src",Ne),r(c,"frameborder","0"),r(c,"height","300"),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"),He(u.src,at="https://course-demos-gpt-2.hf.space")||r(u,"src",at),r(u,"frameborder","0"),r(u,"height","300"),r(u,"title","Gradio app"),r(u,"class","container p-0 flex-grow space-iframe"),r(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"),r(u,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads")},m(e,t){dt(document.head,M),s(e,ee,t),s(e,D,t),s(e,te,t),f(b,e,t),s(e,le,t),f(T,e,t),s(e,se,t),s(e,g,t),s(e,ae,t),f(j,e,t),s(e,ne,t),s(e,U,t),s(e,oe,t),s(e,x,t),s(e,pe,t),s(e,$,t),s(e,re,t),f(G,e,t),s(e,ie,t),s(e,k,t),s(e,me,t),s(e,I,t),s(e,ce,t),s(e,C,t),s(e,ue,t),s(e,m,t),s(e,de,t),s(e,v,t),s(e,we,t),s(e,B,t),s(e,fe,t),s(e,Z,t),s(e,ye,t),f(W,e,t),s(e,he,t),s(e,c,t),s(e,Je,t),s(e,_,t),s(e,Me,t),s(e,H,t),s(e,be,t),f(V,e,t),s(e,Te,t),s(e,X,t),s(e,ge,t),s(e,Q,t),s(e,je,t),s(e,P,t),s(e,Ue,t),f(R,e,t),s(e,xe,t),s(e,q,t),s(e,$e,t),f(S,e,t),s(e,Ge,t),f(Y,e,t),s(e,ke,t),s(e,F,t),s(e,Ie,t),f(z,e,t),s(e,Ce,t),s(e,E,t),s(e,ve,t),s(e,u,t),s(e,Be,t),s(e,L,t),s(e,Ze,t),f(N,e,t),s(e,We,t),s(e,K,t),_e=!0},p:rt,i(e){_e||(y(b.$$.fragment,e),y(T.$$.fragment,e),y(j.$$.fragment,e),y(G.$$.fragment,e),y(W.$$.fragment,e),y(V.$$.fragment,e),y(R.$$.fragment,e),y(S.$$.fragment,e),y(Y.$$.fragment,e),y(z.$$.fragment,e),y(N.$$.fragment,e),_e=!0)},o(e){h(b.$$.fragment,e),h(T.$$.fragment,e),h(j.$$.fragment,e),h(G.$$.fragment,e),h(W.$$.fragment,e),h(V.$$.fragment,e),h(R.$$.fragment,e),h(S.$$.fragment,e),h(Y.$$.fragment,e),h(z.$$.fragment,e),h(N.$$.fragment,e),_e=!1},d(e){e&&(l(ee),l(D),l(te),l(le),l(se),l(g),l(ae),l(ne),l(U),l(oe),l(x),l(pe),l($),l(re),l(ie),l(k),l(me),l(I),l(ce),l(C),l(ue),l(m),l(de),l(v),l(we),l(B),l(fe),l(Z),l(ye),l(he),l(c),l(Je),l(_),l(Me),l(H),l(be),l(Te),l(X),l(ge),l(Q),l(je),l(P),l(Ue),l(xe),l(q),l($e),l(Ge),l(ke),l(F),l(Ie),l(Ce),l(E),l(ve),l(u),l(Be),l(L),l(Ze),l(We),l(K)),l(M),J(b,e),J(T,e),J(j,e),J(G,e),J(W,e),J(V,e),J(R,e),J(S,e),J(Y,e),J(z,e),J(N,e)}}}const ht='{"title":"构建你的第一个演示","local":"构建你的第一个演示","sections":[{"title":"🤖 使用模型预测","local":"🤖 使用模型预测","sections":[],"depth":2}],"depth":1}';function Jt(Ve){return it(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Ut extends mt{constructor(M){super(),ct(this,M,Jt,yt,pt,{})}}export{Ut as component};
