import{s as fe,f as be,n as Ie,o as ge}from"../chunks/scheduler.37c15a92.js";import{S as Ce,i as Ge,g as p,s as a,r as B,A as ke,h as i,f as s,c as n,j as oe,u as x,x as M,k as o,y as Ze,a as t,v as $,d as W,t as A,w as v}from"../chunks/index.2bf4358c.js";import{C as Te}from"../chunks/CodeBlock.4f5fc1ad.js";import{D as Be}from"../chunks/DocNotebookDropdown.d9dfeb24.js";import{H as pe,E as xe}from"../chunks/EditOnGithub.8916dc7c.js";function $e(ie){let m,E,Q,R,u,_,y,q,h,re="现在我们可以构建和共享一个基本接口, 让我们来探索一些更高级的特性, 如状态和解释。",N,w,Y,J,ce="Gradio 支持 <em>会话状态</em>, 其中数据在页面加载中的多个提交中持续存在。会话状态对于构建演示很有用, 例如, 你希望在用户与模型交互时保留数据的聊天机器人。请注意, 会话状态不会在模型的不同用户之间共享数据。",z,j,Me="要将数据存储在会话状态中, 你需要做三件事:",X,d,me="<li>向函数中传递一个 <em>额外的参数</em> , 该参数表示接口的状态。</li> <li>在函数结束时, 将状态的更新值作为 <em>额外的返回值</em> 返回。</li> <li>在创建<code>接口</code>时添加 ‘state’ 输入和 ‘state’ 输出组件。</li>",V,U,ue="请参阅下面的聊天机器人示例:",F,b,H,r,ye,D,T,he="请注意输出组件的状态如何在提交之间保持不变。注意: 可以给 state 参数传入一个默认值, 作为 state 的初始值。",L,f,K,I,we="大多数机器学习模型都是黑盒子, 函数的内部逻辑对终端用户是隐藏的。为了提高透明度, 我们通过简单地将 Interface 类中的解释关键字设置为默认值, 使向模型添加解释变得非常容易。这允许你的用户理解输入的哪些部分负责输出。看看下面这个简单的接口, 它显示了一个还包括解释的图像分类器:",P,g,O,C,Je="通过提交一个输入, 然后单击输出组件下的Interpret来测试解释功能。",ee,c,je,le,G,de='除了Gradio提供的默认解释方法之外, 你还可以为 <code>interpretation</code> 参数指定 <code>shap</code>, 并设置 <code>num_shap</code> 参数。这使用基于 Shapley 的解释, 你可以在 <a href="https://christophm.github.io/interpretable-ml-book/shap.html" rel="nofollow">here</a> 阅读更多信息。最后, 还可以将自己的解释函数传入 <code>interpretation</code> 参数。在Gradio的入门页面 <a href="https://gradio.app/getting_started/" rel="nofollow">here</a> 中可以看到一个例子。',se,k,Ue="这结束了我们对Gradio的<code>Interface</code>类的深入研究。正如我们所看到的, 这个类使用几行Python代码创建机器学习演示变得简单。然而, 有时你会想通过改变布局或链接多个预测函数来定制你的demo。如果我们能以某种方式将 <code>接口</code> 分成可定制的 “块”, 那不是很好吗? 幸运的是, 有! 这是最后一部分的主题。",te,Z,ae,S,ne;return u=new pe({props:{title:"高级接口功能",local:"高级接口功能",headingTag:"h1"}}),y=new Be({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/section6.ipynb"},{label:"Aws Studio",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/chapter9/section6.ipynb"}]}}),w=new pe({props:{title:"使用状态保存数据",local:"使用状态保存数据",headingTag:"h3"}}),b=new Te({props:{code:"aW1wb3J0JTIwcmFuZG9tJTBBJTBBaW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQSUwQWRlZiUyMGNoYXQobWVzc2FnZSUyQyUyMGhpc3RvcnkpJTNBJTBBJTIwJTIwJTIwJTIwaGlzdG9yeSUyMCUzRCUyMGhpc3RvcnklMjBvciUyMCU1QiU1RCUwQSUyMCUyMCUyMCUyMGlmJTIwbWVzc2FnZS5zdGFydHN3aXRoKCUyMkhvdyUyMG1hbnklMjIpJTNBJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwcmVzcG9uc2UlMjAlM0QlMjByYW5kb20ucmFuZGludCgxJTJDJTIwMTApJTBBJTIwJTIwJTIwJTIwZWxpZiUyMG1lc3NhZ2Uuc3RhcnRzd2l0aCglMjJIb3clMjIpJTNBJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwcmVzcG9uc2UlMjAlM0QlMjByYW5kb20uY2hvaWNlKCU1QiUyMkdyZWF0JTIyJTJDJTIwJTIyR29vZCUyMiUyQyUyMCUyMk9rYXklMjIlMkMlMjAlMjJCYWQlMjIlNUQpJTBBJTIwJTIwJTIwJTIwZWxpZiUyMG1lc3NhZ2Uuc3RhcnRzd2l0aCglMjJXaGVyZSUyMiklM0ElMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjByZXNwb25zZSUyMCUzRCUyMHJhbmRvbS5jaG9pY2UoJTVCJTIySGVyZSUyMiUyQyUyMCUyMlRoZXJlJTIyJTJDJTIwJTIyU29tZXdoZXJlJTIyJTVEKSUwQSUyMCUyMCUyMCUyMGVsc2UlM0ElMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjByZXNwb25zZSUyMCUzRCUyMCUyMkklMjBkb24ndCUyMGtub3clMjIlMEElMjAlMjAlMjAlMjBoaXN0b3J5LmFwcGVuZCgobWVzc2FnZSUyQyUyMHJlc3BvbnNlKSklMEElMjAlMjAlMjAlMjByZXR1cm4lMjBoaXN0b3J5JTJDJTIwaGlzdG9yeSUwQSUwQSUwQWlmYWNlJTIwJTNEJTIwZ3IuSW50ZXJmYWNlKCUwQSUyMCUyMCUyMCUyMGNoYXQlMkMlMEElMjAlMjAlMjAlMjAlNUIlMjJ0ZXh0JTIyJTJDJTIwJTIyc3RhdGUlMjIlNUQlMkMlMEElMjAlMjAlMjAlMjAlNUIlMjJjaGF0Ym90JTIyJTJDJTIwJTIyc3RhdGUlMjIlNUQlMkMlMEElMjAlMjAlMjAlMjBhbGxvd19zY3JlZW5zaG90JTNERmFsc2UlMkMlMEElMjAlMjAlMjAlMjBhbGxvd19mbGFnZ2luZyUzRCUyMm5ldmVyJTIyJTJDJTBBKSUwQWlmYWNlLmxhdW5jaCgp",highlighted:`<span class="hljs-keyword">import</span> random

<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_">chat</span>(<span class="hljs-params">message, history</span>):
    history = history <span class="hljs-keyword">or</span> []
    <span class="hljs-keyword">if</span> message.startswith(<span class="hljs-string">&quot;How many&quot;</span>):
        response = random.randint(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>)
    <span class="hljs-keyword">elif</span> message.startswith(<span class="hljs-string">&quot;How&quot;</span>):
        response = random.choice([<span class="hljs-string">&quot;Great&quot;</span>, <span class="hljs-string">&quot;Good&quot;</span>, <span class="hljs-string">&quot;Okay&quot;</span>, <span class="hljs-string">&quot;Bad&quot;</span>])
    <span class="hljs-keyword">elif</span> message.startswith(<span class="hljs-string">&quot;Where&quot;</span>):
        response = random.choice([<span class="hljs-string">&quot;Here&quot;</span>, <span class="hljs-string">&quot;There&quot;</span>, <span class="hljs-string">&quot;Somewhere&quot;</span>])
    <span class="hljs-keyword">else</span>:
        response = <span class="hljs-string">&quot;I don&#x27;t know&quot;</span>
    history.append((message, response))
    <span class="hljs-keyword">return</span> history, history


iface = gr.Interface(
    chat,
    [<span class="hljs-string">&quot;text&quot;</span>, <span class="hljs-string">&quot;state&quot;</span>],
    [<span class="hljs-string">&quot;chatbot&quot;</span>, <span class="hljs-string">&quot;state&quot;</span>],
    allow_screenshot=<span class="hljs-literal">False</span>,
    allow_flagging=<span class="hljs-string">&quot;never&quot;</span>,
)
iface.launch()`,wrap:!1}}),f=new pe({props:{title:"通过解释来理解预测",local:"通过解释来理解预测",headingTag:"h3"}}),g=new Te({props:{code:"aW1wb3J0JTIwcmVxdWVzdHMlMEFpbXBvcnQlMjB0ZW5zb3JmbG93JTIwYXMlMjB0ZiUwQSUwQWltcG9ydCUyMGdyYWRpbyUyMGFzJTIwZ3IlMEElMEFpbmNlcHRpb25fbmV0JTIwJTNEJTIwdGYua2VyYXMuYXBwbGljYXRpb25zLk1vYmlsZU5ldFYyKCklMjAlMjAlMjMlMjBsb2FkJTIwdGhlJTIwbW9kZWwlMEElMEElMjMlMjBEb3dubG9hZCUyMGh1bWFuLXJlYWRhYmxlJTIwbGFiZWxzJTIwZm9yJTIwSW1hZ2VOZXQuJTBBcmVzcG9uc2UlMjAlM0QlMjByZXF1ZXN0cy5nZXQoJTIyaHR0cHMlM0ElMkYlMkZnaXQuaW8lMkZKSmtZTiUyMiklMEFsYWJlbHMlMjAlM0QlMjByZXNwb25zZS50ZXh0LnNwbGl0KCUyMiU1Q24lMjIpJTBBJTBBJTBBZGVmJTIwY2xhc3NpZnlfaW1hZ2UoaW5wKSUzQSUwQSUyMCUyMCUyMCUyMGlucCUyMCUzRCUyMGlucC5yZXNoYXBlKCgtMSUyQyUyMDIyNCUyQyUyMDIyNCUyQyUyMDMpKSUwQSUyMCUyMCUyMCUyMGlucCUyMCUzRCUyMHRmLmtlcmFzLmFwcGxpY2F0aW9ucy5tb2JpbGVuZXRfdjIucHJlcHJvY2Vzc19pbnB1dChpbnApJTBBJTIwJTIwJTIwJTIwcHJlZGljdGlvbiUyMCUzRCUyMGluY2VwdGlvbl9uZXQucHJlZGljdChpbnApLmZsYXR0ZW4oKSUwQSUyMCUyMCUyMCUyMHJldHVybiUyMCU3QmxhYmVscyU1QmklNUQlM0ElMjBmbG9hdChwcmVkaWN0aW9uJTVCaSU1RCklMjBmb3IlMjBpJTIwaW4lMjByYW5nZSgxMDAwKSU3RCUwQSUwQSUwQWltYWdlJTIwJTNEJTIwZ3IuSW1hZ2Uoc2hhcGUlM0QoMjI0JTJDJTIwMjI0KSklMEFsYWJlbCUyMCUzRCUyMGdyLkxhYmVsKG51bV90b3BfY2xhc3NlcyUzRDMpJTBBJTBBdGl0bGUlMjAlM0QlMjAlMjJHcmFkaW8lMjBJbWFnZSUyMENsYXNzaWZpY3Rpb24lMjAlMkIlMjBJbnRlcnByZXRhdGlvbiUyMEV4YW1wbGUlMjIlMEFnci5JbnRlcmZhY2UoJTBBJTIwJTIwJTIwJTIwZm4lM0RjbGFzc2lmeV9pbWFnZSUyQyUyMGlucHV0cyUzRGltYWdlJTJDJTIwb3V0cHV0cyUzRGxhYmVsJTJDJTIwaW50ZXJwcmV0YXRpb24lM0QlMjJkZWZhdWx0JTIyJTJDJTIwdGl0bGUlM0R0aXRsZSUwQSkubGF1bmNoKCk=",highlighted:`<span class="hljs-keyword">import</span> requests
<span class="hljs-keyword">import</span> tensorflow <span class="hljs-keyword">as</span> tf

<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr

inception_net = tf.keras.applications.MobileNetV2()  <span class="hljs-comment"># load the model</span>

<span class="hljs-comment"># Download human-readable labels for ImageNet.</span>
response = requests.get(<span class="hljs-string">&quot;https://git.io/JJkYN&quot;</span>)
labels = response.text.split(<span class="hljs-string">&quot;\\n&quot;</span>)


<span class="hljs-keyword">def</span> <span class="hljs-title function_">classify_image</span>(<span class="hljs-params">inp</span>):
    inp = inp.reshape((-<span class="hljs-number">1</span>, <span class="hljs-number">224</span>, <span class="hljs-number">224</span>, <span class="hljs-number">3</span>))
    inp = tf.keras.applications.mobilenet_v2.preprocess_input(inp)
    prediction = inception_net.predict(inp).flatten()
    <span class="hljs-keyword">return</span> {labels[i]: <span class="hljs-built_in">float</span>(prediction[i]) <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-built_in">range</span>(<span class="hljs-number">1000</span>)}


image = gr.Image(shape=(<span class="hljs-number">224</span>, <span class="hljs-number">224</span>))
label = gr.Label(num_top_classes=<span class="hljs-number">3</span>)

title = <span class="hljs-string">&quot;Gradio Image Classifiction + Interpretation Example&quot;</span>
gr.Interface(
    fn=classify_image, inputs=image, outputs=label, interpretation=<span class="hljs-string">&quot;default&quot;</span>, title=title
).launch()`,wrap:!1}}),Z=new xe({props:{source:"https://github.com/huggingface/course/blob/main/chapters/zh-CN/chapter9/6.mdx"}}),{c(){m=p("meta"),E=a(),Q=p("p"),R=a(),B(u.$$.fragment),_=a(),B(y.$$.fragment),q=a(),h=p("p"),h.textContent=re,N=a(),B(w.$$.fragment),Y=a(),J=p("p"),J.innerHTML=ce,z=a(),j=p("p"),j.textContent=Me,X=a(),d=p("ol"),d.innerHTML=me,V=a(),U=p("p"),U.textContent=ue,F=a(),B(b.$$.fragment),H=a(),r=p("iframe"),D=a(),T=p("p"),T.textContent=he,L=a(),B(f.$$.fragment),K=a(),I=p("p"),I.textContent=we,P=a(),B(g.$$.fragment),O=a(),C=p("p"),C.textContent=Je,ee=a(),c=p("iframe"),le=a(),G=p("p"),G.innerHTML=de,se=a(),k=p("p"),k.innerHTML=Ue,te=a(),B(Z.$$.fragment),ae=a(),S=p("p"),this.h()},l(e){const l=ke("svelte-u9bgzb",document.head);m=i(l,"META",{name:!0,content:!0}),l.forEach(s),E=n(e),Q=i(e,"P",{}),oe(Q).forEach(s),R=n(e),x(u.$$.fragment,e),_=n(e),x(y.$$.fragment,e),q=n(e),h=i(e,"P",{"data-svelte-h":!0}),M(h)!=="svelte-1njo2d0"&&(h.textContent=re),N=n(e),x(w.$$.fragment,e),Y=n(e),J=i(e,"P",{"data-svelte-h":!0}),M(J)!=="svelte-13iexw"&&(J.innerHTML=ce),z=n(e),j=i(e,"P",{"data-svelte-h":!0}),M(j)!=="svelte-52u7b5"&&(j.textContent=Me),X=n(e),d=i(e,"OL",{"data-svelte-h":!0}),M(d)!=="svelte-py0t3w"&&(d.innerHTML=me),V=n(e),U=i(e,"P",{"data-svelte-h":!0}),M(U)!=="svelte-acbgvf"&&(U.textContent=ue),F=n(e),x(b.$$.fragment,e),H=n(e),r=i(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),oe(r).forEach(s),D=n(e),T=i(e,"P",{"data-svelte-h":!0}),M(T)!=="svelte-qgn2e2"&&(T.textContent=he),L=n(e),x(f.$$.fragment,e),K=n(e),I=i(e,"P",{"data-svelte-h":!0}),M(I)!=="svelte-x0uo6q"&&(I.textContent=we),P=n(e),x(g.$$.fragment,e),O=n(e),C=i(e,"P",{"data-svelte-h":!0}),M(C)!=="svelte-qloega"&&(C.textContent=Je),ee=n(e),c=i(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),oe(c).forEach(s),le=n(e),G=i(e,"P",{"data-svelte-h":!0}),M(G)!=="svelte-hyesi6"&&(G.innerHTML=de),se=n(e),k=i(e,"P",{"data-svelte-h":!0}),M(k)!=="svelte-3fjgax"&&(k.innerHTML=Ue),te=n(e),x(Z.$$.fragment,e),ae=n(e),S=i(e,"P",{}),oe(S).forEach(s),this.h()},h(){o(m,"name","hf:doc:metadata"),o(m,"content",We),be(r.src,ye="https://course-demos-Chatbot-Demo.hf.space")||o(r,"src",ye),o(r,"frameborder","0"),o(r,"height","350"),o(r,"title","Gradio app"),o(r,"class","container p-0 flex-grow space-iframe"),o(r,"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"),o(r,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),be(c.src,je="https://course-demos-gradio-image-interpretation.hf.space")||o(c,"src",je),o(c,"frameborder","0"),o(c,"height","570"),o(c,"title","Gradio app"),o(c,"class","container p-0 flex-grow space-iframe"),o(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"),o(c,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads")},m(e,l){Ze(document.head,m),t(e,E,l),t(e,Q,l),t(e,R,l),$(u,e,l),t(e,_,l),$(y,e,l),t(e,q,l),t(e,h,l),t(e,N,l),$(w,e,l),t(e,Y,l),t(e,J,l),t(e,z,l),t(e,j,l),t(e,X,l),t(e,d,l),t(e,V,l),t(e,U,l),t(e,F,l),$(b,e,l),t(e,H,l),t(e,r,l),t(e,D,l),t(e,T,l),t(e,L,l),$(f,e,l),t(e,K,l),t(e,I,l),t(e,P,l),$(g,e,l),t(e,O,l),t(e,C,l),t(e,ee,l),t(e,c,l),t(e,le,l),t(e,G,l),t(e,se,l),t(e,k,l),t(e,te,l),$(Z,e,l),t(e,ae,l),t(e,S,l),ne=!0},p:Ie,i(e){ne||(W(u.$$.fragment,e),W(y.$$.fragment,e),W(w.$$.fragment,e),W(b.$$.fragment,e),W(f.$$.fragment,e),W(g.$$.fragment,e),W(Z.$$.fragment,e),ne=!0)},o(e){A(u.$$.fragment,e),A(y.$$.fragment,e),A(w.$$.fragment,e),A(b.$$.fragment,e),A(f.$$.fragment,e),A(g.$$.fragment,e),A(Z.$$.fragment,e),ne=!1},d(e){e&&(s(E),s(Q),s(R),s(_),s(q),s(h),s(N),s(Y),s(J),s(z),s(j),s(X),s(d),s(V),s(U),s(F),s(H),s(r),s(D),s(T),s(L),s(K),s(I),s(P),s(O),s(C),s(ee),s(c),s(le),s(G),s(se),s(k),s(te),s(ae),s(S)),s(m),v(u,e),v(y,e),v(w,e),v(b,e),v(f,e),v(g,e),v(Z,e)}}}const We='{"title":"高级接口功能","local":"高级接口功能","sections":[{"title":"使用状态保存数据","local":"使用状态保存数据","sections":[],"depth":3},{"title":"通过解释来理解预测","local":"通过解释来理解预测","sections":[],"depth":3}],"depth":1}';function Ae(ie){return ge(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class _e extends Ce{constructor(m){super(),Ge(this,m,Ae,$e,fe,{})}}export{_e as component};
