import{s as ge,a as Te,n as Ce,o as ke}from"../chunks/scheduler.cc52f4b9.js";import{S as Ge,i as Ze,e as o,s as a,c as u,h as Be,a as i,d as t,b as n,f as ie,g as y,j as m,k as p,l as $e,m as s,n as h,t as w,o as J,p as j}from"../chunks/index.9480bb2b.js";import{C as xe,H as re,E as We}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.52103c90.js";import{C as Ie}from"../chunks/CodeBlock.c5404643.js";import{D as Ae}from"../chunks/DocNotebookDropdown.ea74f0e0.js";function Qe(ce){let M,R,v,_,d,q,U,Y,b,N,f,me="現在我們可以構建和共享一個基本接口, 讓我們來探索一些更高級的特性, 如狀態和解釋。",z,T,X,I,Me="Gradio 支持 <em>會話狀態</em>, 其中數據在頁面加載中的多個提交中持續存在。會話狀態對於構建演示很有用, 例如, 你希望在用戶與模型交互時保留數據的聊天機器人。請注意, 會話狀態不會在模型的不同用戶之間共享數據。",V,g,ue="要將數據存儲在會話狀態中, 你需要做三件事:",F,C,ye="<li>向函數中傳遞一個 <em>額外的參數</em> , 該參數表示接口的狀態。</li> <li>在函數結束時, 將狀態的更新值作為 <em>額外的返回值</em> 返回。</li> <li>在創建<code>接口</code>時添加 ‘state’ 輸入和 ‘state’ 輸出組件。</li>",H,k,he="請參閱下面的聊天機器人示例:",L,G,D,r,we,K,Z,Je="請注意輸出組件的狀態如何在提交之間保持不變。注意: 可以給 state 參數傳入一個默認值, 作為 state 的初始值。",P,B,O,$,je="大多數機器學習模型都是黑盒子, 函數的內部邏輯對終端用戶是隱藏的。為了提高透明度, 我們通過簡單地將 Interface 類中的解釋關鍵字設置為默認值, 使向模型添加解釋變得非常容易。這允許你的用戶理解輸入的哪些部分負責輸出。看看下面這個簡單的接口, 它顯示了一個還包括解釋的圖像分類器:",ee,x,le,W,de="通過提交一個輸入, 然後單擊輸出組件下的Interpret來測試解釋功能。",te,c,Ue,se,A,be='除了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> 中可以看到一個例子。',ae,Q,fe="這結束了我們對Gradio的<code>Interface</code>類的深入研究。正如我們所看到的, 這個類使用幾行Python代碼創建機器學習演示變得簡單。然而, 有時你會想通過改變佈局或鏈接多個預測函數來定製你的demo。如果我們能以某種方式將 <code>接口</code> 分成可定製的 “塊”, 那不是很好嗎? 幸運的是, 有! 這是最後一部分的主題。",ne,S,pe,E,oe;return d=new xe({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"}}),U=new re({props:{title:"高級接口功能",local:"高級接口功能",headingTag:"h1"}}),b=new Ae({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"}]}}),T=new re({props:{title:"使用狀態保存數據",local:"使用狀態保存數據",headingTag:"h3"}}),G=new Ie({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}}),B=new re({props:{title:"通過解釋來理解預測",local:"通過解釋來理解預測",headingTag:"h3"}}),x=new Ie({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}}),S=new We({props:{source:"https://github.com/huggingface/course/blob/main/chapters/zh-TW/chapter9/6.mdx"}}),{c(){M=o("meta"),R=a(),v=o("p"),_=a(),u(d.$$.fragment),q=a(),u(U.$$.fragment),Y=a(),u(b.$$.fragment),N=a(),f=o("p"),f.textContent=me,z=a(),u(T.$$.fragment),X=a(),I=o("p"),I.innerHTML=Me,V=a(),g=o("p"),g.textContent=ue,F=a(),C=o("ol"),C.innerHTML=ye,H=a(),k=o("p"),k.textContent=he,L=a(),u(G.$$.fragment),D=a(),r=o("iframe"),K=a(),Z=o("p"),Z.textContent=Je,P=a(),u(B.$$.fragment),O=a(),$=o("p"),$.textContent=je,ee=a(),u(x.$$.fragment),le=a(),W=o("p"),W.textContent=de,te=a(),c=o("iframe"),se=a(),A=o("p"),A.innerHTML=be,ae=a(),Q=o("p"),Q.innerHTML=fe,ne=a(),u(S.$$.fragment),pe=a(),E=o("p"),this.h()},l(e){const l=Be("svelte-u9bgzb",document.head);M=i(l,"META",{name:!0,content:!0}),l.forEach(t),R=n(e),v=i(e,"P",{}),ie(v).forEach(t),_=n(e),y(d.$$.fragment,e),q=n(e),y(U.$$.fragment,e),Y=n(e),y(b.$$.fragment,e),N=n(e),f=i(e,"P",{"data-svelte-h":!0}),m(f)!=="svelte-x51h71"&&(f.textContent=me),z=n(e),y(T.$$.fragment,e),X=n(e),I=i(e,"P",{"data-svelte-h":!0}),m(I)!=="svelte-1cc60o"&&(I.innerHTML=Me),V=n(e),g=i(e,"P",{"data-svelte-h":!0}),m(g)!=="svelte-zuau5n"&&(g.textContent=ue),F=n(e),C=i(e,"OL",{"data-svelte-h":!0}),m(C)!=="svelte-67hbs5"&&(C.innerHTML=ye),H=n(e),k=i(e,"P",{"data-svelte-h":!0}),m(k)!=="svelte-f104y5"&&(k.textContent=he),L=n(e),y(G.$$.fragment,e),D=n(e),r=i(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),ie(r).forEach(t),K=n(e),Z=i(e,"P",{"data-svelte-h":!0}),m(Z)!=="svelte-1qf57y9"&&(Z.textContent=Je),P=n(e),y(B.$$.fragment,e),O=n(e),$=i(e,"P",{"data-svelte-h":!0}),m($)!=="svelte-1psqlkg"&&($.textContent=je),ee=n(e),y(x.$$.fragment,e),le=n(e),W=i(e,"P",{"data-svelte-h":!0}),m(W)!=="svelte-3q3puo"&&(W.textContent=de),te=n(e),c=i(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),ie(c).forEach(t),se=n(e),A=i(e,"P",{"data-svelte-h":!0}),m(A)!=="svelte-9mllfu"&&(A.innerHTML=be),ae=n(e),Q=i(e,"P",{"data-svelte-h":!0}),m(Q)!=="svelte-16becp1"&&(Q.innerHTML=fe),ne=n(e),y(S.$$.fragment,e),pe=n(e),E=i(e,"P",{}),ie(E).forEach(t),this.h()},h(){p(M,"name","hf:doc:metadata"),p(M,"content",Se),Te(r.src,we="https://course-demos-Chatbot-Demo.hf.space")||p(r,"src",we),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"),Te(c.src,Ue="https://course-demos-gradio-image-interpretation.hf.space")||p(c,"src",Ue),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(e,l){$e(document.head,M),s(e,R,l),s(e,v,l),s(e,_,l),h(d,e,l),s(e,q,l),h(U,e,l),s(e,Y,l),h(b,e,l),s(e,N,l),s(e,f,l),s(e,z,l),h(T,e,l),s(e,X,l),s(e,I,l),s(e,V,l),s(e,g,l),s(e,F,l),s(e,C,l),s(e,H,l),s(e,k,l),s(e,L,l),h(G,e,l),s(e,D,l),s(e,r,l),s(e,K,l),s(e,Z,l),s(e,P,l),h(B,e,l),s(e,O,l),s(e,$,l),s(e,ee,l),h(x,e,l),s(e,le,l),s(e,W,l),s(e,te,l),s(e,c,l),s(e,se,l),s(e,A,l),s(e,ae,l),s(e,Q,l),s(e,ne,l),h(S,e,l),s(e,pe,l),s(e,E,l),oe=!0},p:Ce,i(e){oe||(w(d.$$.fragment,e),w(U.$$.fragment,e),w(b.$$.fragment,e),w(T.$$.fragment,e),w(G.$$.fragment,e),w(B.$$.fragment,e),w(x.$$.fragment,e),w(S.$$.fragment,e),oe=!0)},o(e){J(d.$$.fragment,e),J(U.$$.fragment,e),J(b.$$.fragment,e),J(T.$$.fragment,e),J(G.$$.fragment,e),J(B.$$.fragment,e),J(x.$$.fragment,e),J(S.$$.fragment,e),oe=!1},d(e){e&&(t(R),t(v),t(_),t(q),t(Y),t(N),t(f),t(z),t(X),t(I),t(V),t(g),t(F),t(C),t(H),t(k),t(L),t(D),t(r),t(K),t(Z),t(P),t(O),t($),t(ee),t(le),t(W),t(te),t(c),t(se),t(A),t(ae),t(Q),t(ne),t(pe),t(E)),t(M),j(d,e),j(U,e),j(b,e),j(T,e),j(G,e),j(B,e),j(x,e),j(S,e)}}}const Se='{"title":"高級接口功能","local":"高級接口功能","sections":[{"title":"使用狀態保存數據","local":"使用狀態保存數據","sections":[],"depth":3},{"title":"通過解釋來理解預測","local":"通過解釋來理解預測","sections":[],"depth":3}],"depth":1}';function ve(ce){return ke(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Ne extends Ge{constructor(M){super(),Ze(this,M,ve,Qe,ge,{})}}export{Ne as component};
