import{s as Il,a as Ul,n as Cl,o as Gl}from"../chunks/scheduler.cc52f4b9.js";import{S as kl,i as Bl,e as o,s as a,c as u,h as El,a as i,d as t,b as n,f as il,g as y,j as M,k as p,l as Al,m as s,n as j,t as w,o as d,p as h}from"../chunks/index.9480bb2b.js";import{C as Nl,H as rl,E as Ql}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.009dc98d.js";import{C as gl}from"../chunks/CodeBlock.184aadb6.js";import{D as Zl}from"../chunks/DocNotebookDropdown.6e3674fe.js";function $l(cl){let m,S,W,R,J,_,f,q,T,V,b,Ml="现在我们已经能够构建和共享基本界面了，让我们来探索一些 Interface 更高级的功能，比如会话状态和解释。",z,U,Y,g,ml="Gradio 支持存储会话状态，以及保留多次提交的数据。会话状态对于构建聊天机器人等需要在用户与模型交互时保持数据的演示非常有用。请注意，会话状态不会在不同用户之间共享数据。",X,I,ul="要将数据存储在会话状态中，你需要做三件事：",F,C,yl="<li>向预测函数中传递一个额外的参数，该参数表示 Interface 此时的状态。</li> <li>在预测函数结束时，将状态的更新值添加到函数的返回值中。</li> <li>在创建 <code>Interface</code> 时添加 <code>state</code> 输入和 <code>state</code> 输出组件。</li>",H,G,jl="请参考下面的聊天机器人示例：",L,k,K,r,wl,P,B,dl=`请注意，输出组件的每次提交都被记录了下来。
注：我们还可以向状态参数传递一个默认值，该值会作为会话状态的初始值。`,D,E,O,A,hl="大多数机器学习模型都是黑盒子，函数的内部逻辑对使用的用户是隐藏的。为了提高透明度，我们设计了一个功能，使得为模型添加解释非常简单，只需将 Interface 类中的 interpretation 参数设置为 <code>default</code> 即可。这样，你的用户就可以理解输入的哪些部分对输出有影响。请看下面的简单界面示例，显示了一个带有解释功能的图像分类器：",ll,N,el,Q,Jl=`提交一个输入，单击输出组件中的“Interpret”按钮，将显示图像中的哪一部分区域对
分类的结果产生了影响。`,tl,c,fl,sl,Z,Tl='除了 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">这里</a> 阅读关于 <code>shap</code> 更多的信息。最后，还可以将自己的解释函数传入 <code>interpretation</code> 参数。在 Gradio 的 <a href="https://gradio.app/getting_started/" rel="nofollow">开始页面</a> 中可以看到一个例子。',al,$,bl="这就是我们对 Gradio 的 <code>Interface</code> 类的深入研究。正如我们所看到的，这个类使得用几行 Python 代码创建机器学习演示变得简单。然而，有时你会想通过改变布局或将多个预测函数链接在一起来定制你的演示。如果我们能以某种方式将 <code>Interface</code> 拆分可定制的 “块”，那不是很好吗？幸运的是，我们可以做到！这是最后一节的主题。",nl,x,pl,v,ol;return J=new Nl({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"}}),f=new rl({props:{title:"Interface 的高级功能",local:"Interface 的高级功能",headingTag:"h1"}}),T=new Zl({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"}]}}),U=new rl({props:{title:"使用会话状态保存数据",local:"使用会话状态保存数据",headingTag:"h3"}}),k=new gl({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}}),E=new rl({props:{title:"通过解释来理解预测",local:"通过解释来理解预测",headingTag:"h3"}}),N=new gl({props:{code:"aW1wb3J0JTIwcmVxdWVzdHMlMEFpbXBvcnQlMjB0ZW5zb3JmbG93JTIwYXMlMjB0ZiUwQSUwQWltcG9ydCUyMGdyYWRpbyUyMGFzJTIwZ3IlMEElMEFpbmNlcHRpb25fbmV0JTIwJTNEJTIwdGYua2VyYXMuYXBwbGljYXRpb25zLk1vYmlsZU5ldFYyKCklMjAlMjAlMjMlMjAlRTUlOEElQTAlRTglQkQlQkQlRTYlQTglQTElRTUlOUUlOEIlMEElMEElMjMlMjAlRTQlQjglOEIlRTglQkQlQkQlMjBJbWFnZU5ldCUyMCVFNyU5QSU4NCVFNSU4RiVBRiVFOCVBRiVCQiVFNiVBMCU4NyVFNyVBRCVCRSUwQXJlc3BvbnNlJTIwJTNEJTIwcmVxdWVzdHMuZ2V0KCUyMmh0dHBzJTNBJTJGJTJGZ2l0LmlvJTJGSkprWU4lMjIpJTBBbGFiZWxzJTIwJTNEJTIwcmVzcG9uc2UudGV4dC5zcGxpdCglMjIlNUNuJTIyKSUwQSUwQSUwQWRlZiUyMGNsYXNzaWZ5X2ltYWdlKGlucCklM0ElMEElMjAlMjAlMjAlMjBpbnAlMjAlM0QlMjBpbnAucmVzaGFwZSgoLTElMkMlMjAyMjQlMkMlMjAyMjQlMkMlMjAzKSklMEElMjAlMjAlMjAlMjBpbnAlMjAlM0QlMjB0Zi5rZXJhcy5hcHBsaWNhdGlvbnMubW9iaWxlbmV0X3YyLnByZXByb2Nlc3NfaW5wdXQoaW5wKSUwQSUyMCUyMCUyMCUyMHByZWRpY3Rpb24lMjAlM0QlMjBpbmNlcHRpb25fbmV0LnByZWRpY3QoaW5wKS5mbGF0dGVuKCklMEElMjAlMjAlMjAlMjByZXR1cm4lMjAlN0JsYWJlbHMlNUJpJTVEJTNBJTIwZmxvYXQocHJlZGljdGlvbiU1QmklNUQpJTIwZm9yJTIwaSUyMGluJTIwcmFuZ2UoMTAwMCklN0QlMEElMEElMEFpbWFnZSUyMCUzRCUyMGdyLkltYWdlKHNoYXBlJTNEKDIyNCUyQyUyMDIyNCkpJTBBbGFiZWwlMjAlM0QlMjBnci5MYWJlbChudW1fdG9wX2NsYXNzZXMlM0QzKSUwQSUwQXRpdGxlJTIwJTNEJTIwJTIyR3JhZGlvJTIwSW1hZ2UlMjBDbGFzc2lmaWN0aW9uJTIwJTJCJTIwSW50ZXJwcmV0YXRpb24lMjBFeGFtcGxlJTIyJTBBZ3IuSW50ZXJmYWNlKCUwQSUyMCUyMCUyMCUyMGZuJTNEY2xhc3NpZnlfaW1hZ2UlMkMlMjBpbnB1dHMlM0RpbWFnZSUyQyUyMG91dHB1dHMlM0RsYWJlbCUyQyUyMGludGVycHJldGF0aW9uJTNEJTIyZGVmYXVsdCUyMiUyQyUyMHRpdGxlJTNEdGl0bGUlMEEpLmxhdW5jaCgp",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"># 加载模型</span>

<span class="hljs-comment"># 下载 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}}),x=new Ql({props:{source:"https://github.com/huggingface/course/blob/main/chapters/zh-CN/chapter9/6.mdx"}}),{c(){m=o("meta"),S=a(),W=o("p"),R=a(),u(J.$$.fragment),_=a(),u(f.$$.fragment),q=a(),u(T.$$.fragment),V=a(),b=o("p"),b.textContent=Ml,z=a(),u(U.$$.fragment),Y=a(),g=o("p"),g.textContent=ml,X=a(),I=o("p"),I.textContent=ul,F=a(),C=o("ol"),C.innerHTML=yl,H=a(),G=o("p"),G.textContent=jl,L=a(),u(k.$$.fragment),K=a(),r=o("iframe"),P=a(),B=o("p"),B.textContent=dl,D=a(),u(E.$$.fragment),O=a(),A=o("p"),A.innerHTML=hl,ll=a(),u(N.$$.fragment),el=a(),Q=o("p"),Q.textContent=Jl,tl=a(),c=o("iframe"),sl=a(),Z=o("p"),Z.innerHTML=Tl,al=a(),$=o("p"),$.innerHTML=bl,nl=a(),u(x.$$.fragment),pl=a(),v=o("p"),this.h()},l(l){const e=El("svelte-u9bgzb",document.head);m=i(e,"META",{name:!0,content:!0}),e.forEach(t),S=n(l),W=i(l,"P",{}),il(W).forEach(t),R=n(l),y(J.$$.fragment,l),_=n(l),y(f.$$.fragment,l),q=n(l),y(T.$$.fragment,l),V=n(l),b=i(l,"P",{"data-svelte-h":!0}),M(b)!=="svelte-djsadf"&&(b.textContent=Ml),z=n(l),y(U.$$.fragment,l),Y=n(l),g=i(l,"P",{"data-svelte-h":!0}),M(g)!=="svelte-8rb7o"&&(g.textContent=ml),X=n(l),I=i(l,"P",{"data-svelte-h":!0}),M(I)!=="svelte-1i7evrf"&&(I.textContent=ul),F=n(l),C=i(l,"OL",{"data-svelte-h":!0}),M(C)!=="svelte-1rk3mg8"&&(C.innerHTML=yl),H=n(l),G=i(l,"P",{"data-svelte-h":!0}),M(G)!=="svelte-13dngbh"&&(G.textContent=jl),L=n(l),y(k.$$.fragment,l),K=n(l),r=i(l,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),il(r).forEach(t),P=n(l),B=i(l,"P",{"data-svelte-h":!0}),M(B)!=="svelte-1071byc"&&(B.textContent=dl),D=n(l),y(E.$$.fragment,l),O=n(l),A=i(l,"P",{"data-svelte-h":!0}),M(A)!=="svelte-1qd70a6"&&(A.innerHTML=hl),ll=n(l),y(N.$$.fragment,l),el=n(l),Q=i(l,"P",{"data-svelte-h":!0}),M(Q)!=="svelte-1pm8yr7"&&(Q.textContent=Jl),tl=n(l),c=i(l,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),il(c).forEach(t),sl=n(l),Z=i(l,"P",{"data-svelte-h":!0}),M(Z)!=="svelte-167e4wc"&&(Z.innerHTML=Tl),al=n(l),$=i(l,"P",{"data-svelte-h":!0}),M($)!=="svelte-1c2izjr"&&($.innerHTML=bl),nl=n(l),y(x.$$.fragment,l),pl=n(l),v=i(l,"P",{}),il(v).forEach(t),this.h()},h(){p(m,"name","hf:doc:metadata"),p(m,"content",xl),Ul(r.src,wl="https://course-demos-Chatbot-Demo.hf.space")||p(r,"src",wl),p(r,"frameborder","0"),p(r,"height","350"),p(r,"title","Gradio app"),p(r,"class","container p-0 flex-grow space-iframe"),p(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"),p(r,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),Ul(c.src,fl="https://course-demos-gradio-image-interpretation.hf.space")||p(c,"src",fl),p(c,"frameborder","0"),p(c,"height","570"),p(c,"title","Gradio app"),p(c,"class","container p-0 flex-grow space-iframe"),p(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"),p(c,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads")},m(l,e){Al(document.head,m),s(l,S,e),s(l,W,e),s(l,R,e),j(J,l,e),s(l,_,e),j(f,l,e),s(l,q,e),j(T,l,e),s(l,V,e),s(l,b,e),s(l,z,e),j(U,l,e),s(l,Y,e),s(l,g,e),s(l,X,e),s(l,I,e),s(l,F,e),s(l,C,e),s(l,H,e),s(l,G,e),s(l,L,e),j(k,l,e),s(l,K,e),s(l,r,e),s(l,P,e),s(l,B,e),s(l,D,e),j(E,l,e),s(l,O,e),s(l,A,e),s(l,ll,e),j(N,l,e),s(l,el,e),s(l,Q,e),s(l,tl,e),s(l,c,e),s(l,sl,e),s(l,Z,e),s(l,al,e),s(l,$,e),s(l,nl,e),j(x,l,e),s(l,pl,e),s(l,v,e),ol=!0},p:Cl,i(l){ol||(w(J.$$.fragment,l),w(f.$$.fragment,l),w(T.$$.fragment,l),w(U.$$.fragment,l),w(k.$$.fragment,l),w(E.$$.fragment,l),w(N.$$.fragment,l),w(x.$$.fragment,l),ol=!0)},o(l){d(J.$$.fragment,l),d(f.$$.fragment,l),d(T.$$.fragment,l),d(U.$$.fragment,l),d(k.$$.fragment,l),d(E.$$.fragment,l),d(N.$$.fragment,l),d(x.$$.fragment,l),ol=!1},d(l){l&&(t(S),t(W),t(R),t(_),t(q),t(V),t(b),t(z),t(Y),t(g),t(X),t(I),t(F),t(C),t(H),t(G),t(L),t(K),t(r),t(P),t(B),t(D),t(O),t(A),t(ll),t(el),t(Q),t(tl),t(c),t(sl),t(Z),t(al),t($),t(nl),t(pl),t(v)),t(m),h(J,l),h(f,l),h(T,l),h(U,l),h(k,l),h(E,l),h(N,l),h(x,l)}}}const xl='{"title":"Interface 的高级功能","local":"Interface 的高级功能","sections":[{"title":"使用会话状态保存数据","local":"使用会话状态保存数据","sections":[],"depth":3},{"title":"通过解释来理解预测","local":"通过解释来理解预测","sections":[],"depth":3}],"depth":1}';function Wl(cl){return Gl(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Vl extends kl{constructor(m){super(),Bl(this,m,Wl,$l,Il,{})}}export{Vl as component};
