import{s as fl,f as bl,n as Il,o as gl}from"../chunks/scheduler.37c15a92.js";import{S as Cl,i as kl,g as o,s as a,r as B,A as Gl,h as i,f as s,c as n,j as pl,u as x,x as m,k as p,y as Zl,a as t,v as $,d as W,t as A,w as Q}from"../chunks/index.2bf4358c.js";import{C as Tl}from"../chunks/CodeBlock.4e987730.js";import{D as Bl}from"../chunks/DocNotebookDropdown.efc1fb7c.js";import{H as ol,E as xl}from"../chunks/getInferenceSnippets.1837c472.js";function $l(il){let M,E,v,R,u,_,y,q,h,rl="現在我們可以構建和共享一個基本接口, 讓我們來探索一些更高級的特性, 如狀態和解釋。",Y,w,N,J,cl="Gradio 支持 <em>會話狀態</em>, 其中數據在頁面加載中的多個提交中持續存在。會話狀態對於構建演示很有用, 例如, 你希望在用戶與模型交互時保留數據的聊天機器人。請注意, 會話狀態不會在模型的不同用戶之間共享數據。",z,j,ml="要將數據存儲在會話狀態中, 你需要做三件事:",X,d,Ml="<li>向函數中傳遞一個 <em>額外的參數</em> , 該參數表示接口的狀態。</li> <li>在函數結束時, 將狀態的更新值作為 <em>額外的返回值</em> 返回。</li> <li>在創建<code>接口</code>時添加 ‘state’ 輸入和 ‘state’ 輸出組件。</li>",V,U,ul="請參閱下面的聊天機器人示例:",F,b,H,r,yl,D,T,hl="請注意輸出組件的狀態如何在提交之間保持不變。注意: 可以給 state 參數傳入一個默認值, 作為 state 的初始值。",L,f,K,I,wl="大多數機器學習模型都是黑盒子, 函數的內部邏輯對終端用戶是隱藏的。為了提高透明度, 我們通過簡單地將 Interface 類中的解釋關鍵字設置為默認值, 使向模型添加解釋變得非常容易。這允許你的用戶理解輸入的哪些部分負責輸出。看看下面這個簡單的接口, 它顯示了一個還包括解釋的圖像分類器:",P,g,O,C,Jl="通過提交一個輸入, 然後單擊輸出組件下的Interpret來測試解釋功能。",ll,c,jl,el,k,dl='除了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> 中可以看到一個例子。',sl,G,Ul="這結束了我們對Gradio的<code>Interface</code>類的深入研究。正如我們所看到的, 這個類使用幾行Python代碼創建機器學習演示變得簡單。然而, 有時你會想通過改變佈局或鏈接多個預測函數來定製你的demo。如果我們能以某種方式將 <code>接口</code> 分成可定製的 “塊”, 那不是很好嗎? 幸運的是, 有! 這是最後一部分的主題。",tl,Z,al,S,nl;return u=new ol({props:{title:"高級接口功能",local:"高級接口功能",headingTag:"h1"}}),y=new Bl({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 ol({props:{title:"使用狀態保存數據",local:"使用狀態保存數據",headingTag:"h3"}}),b=new Tl({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 ol({props:{title:"通過解釋來理解預測",local:"通過解釋來理解預測",headingTag:"h3"}}),g=new Tl({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 xl({props:{source:"https://github.com/huggingface/course/blob/main/chapters/zh-TW/chapter9/6.mdx"}}),{c(){M=o("meta"),E=a(),v=o("p"),R=a(),B(u.$$.fragment),_=a(),B(y.$$.fragment),q=a(),h=o("p"),h.textContent=rl,Y=a(),B(w.$$.fragment),N=a(),J=o("p"),J.innerHTML=cl,z=a(),j=o("p"),j.textContent=ml,X=a(),d=o("ol"),d.innerHTML=Ml,V=a(),U=o("p"),U.textContent=ul,F=a(),B(b.$$.fragment),H=a(),r=o("iframe"),D=a(),T=o("p"),T.textContent=hl,L=a(),B(f.$$.fragment),K=a(),I=o("p"),I.textContent=wl,P=a(),B(g.$$.fragment),O=a(),C=o("p"),C.textContent=Jl,ll=a(),c=o("iframe"),el=a(),k=o("p"),k.innerHTML=dl,sl=a(),G=o("p"),G.innerHTML=Ul,tl=a(),B(Z.$$.fragment),al=a(),S=o("p"),this.h()},l(l){const e=Gl("svelte-u9bgzb",document.head);M=i(e,"META",{name:!0,content:!0}),e.forEach(s),E=n(l),v=i(l,"P",{}),pl(v).forEach(s),R=n(l),x(u.$$.fragment,l),_=n(l),x(y.$$.fragment,l),q=n(l),h=i(l,"P",{"data-svelte-h":!0}),m(h)!=="svelte-x51h71"&&(h.textContent=rl),Y=n(l),x(w.$$.fragment,l),N=n(l),J=i(l,"P",{"data-svelte-h":!0}),m(J)!=="svelte-1cc60o"&&(J.innerHTML=cl),z=n(l),j=i(l,"P",{"data-svelte-h":!0}),m(j)!=="svelte-zuau5n"&&(j.textContent=ml),X=n(l),d=i(l,"OL",{"data-svelte-h":!0}),m(d)!=="svelte-67hbs5"&&(d.innerHTML=Ml),V=n(l),U=i(l,"P",{"data-svelte-h":!0}),m(U)!=="svelte-f104y5"&&(U.textContent=ul),F=n(l),x(b.$$.fragment,l),H=n(l),r=i(l,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),pl(r).forEach(s),D=n(l),T=i(l,"P",{"data-svelte-h":!0}),m(T)!=="svelte-1qf57y9"&&(T.textContent=hl),L=n(l),x(f.$$.fragment,l),K=n(l),I=i(l,"P",{"data-svelte-h":!0}),m(I)!=="svelte-1psqlkg"&&(I.textContent=wl),P=n(l),x(g.$$.fragment,l),O=n(l),C=i(l,"P",{"data-svelte-h":!0}),m(C)!=="svelte-3q3puo"&&(C.textContent=Jl),ll=n(l),c=i(l,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),pl(c).forEach(s),el=n(l),k=i(l,"P",{"data-svelte-h":!0}),m(k)!=="svelte-9mllfu"&&(k.innerHTML=dl),sl=n(l),G=i(l,"P",{"data-svelte-h":!0}),m(G)!=="svelte-16becp1"&&(G.innerHTML=Ul),tl=n(l),x(Z.$$.fragment,l),al=n(l),S=i(l,"P",{}),pl(S).forEach(s),this.h()},h(){p(M,"name","hf:doc:metadata"),p(M,"content",Wl),bl(r.src,yl="https://course-demos-Chatbot-Demo.hf.space")||p(r,"src",yl),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"),bl(c.src,jl="https://course-demos-gradio-image-interpretation.hf.space")||p(c,"src",jl),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){Zl(document.head,M),t(l,E,e),t(l,v,e),t(l,R,e),$(u,l,e),t(l,_,e),$(y,l,e),t(l,q,e),t(l,h,e),t(l,Y,e),$(w,l,e),t(l,N,e),t(l,J,e),t(l,z,e),t(l,j,e),t(l,X,e),t(l,d,e),t(l,V,e),t(l,U,e),t(l,F,e),$(b,l,e),t(l,H,e),t(l,r,e),t(l,D,e),t(l,T,e),t(l,L,e),$(f,l,e),t(l,K,e),t(l,I,e),t(l,P,e),$(g,l,e),t(l,O,e),t(l,C,e),t(l,ll,e),t(l,c,e),t(l,el,e),t(l,k,e),t(l,sl,e),t(l,G,e),t(l,tl,e),$(Z,l,e),t(l,al,e),t(l,S,e),nl=!0},p:Il,i(l){nl||(W(u.$$.fragment,l),W(y.$$.fragment,l),W(w.$$.fragment,l),W(b.$$.fragment,l),W(f.$$.fragment,l),W(g.$$.fragment,l),W(Z.$$.fragment,l),nl=!0)},o(l){A(u.$$.fragment,l),A(y.$$.fragment,l),A(w.$$.fragment,l),A(b.$$.fragment,l),A(f.$$.fragment,l),A(g.$$.fragment,l),A(Z.$$.fragment,l),nl=!1},d(l){l&&(s(E),s(v),s(R),s(_),s(q),s(h),s(Y),s(N),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(ll),s(c),s(el),s(k),s(sl),s(G),s(tl),s(al),s(S)),s(M),Q(u,l),Q(y,l),Q(w,l),Q(b,l),Q(f,l),Q(g,l),Q(Z,l)}}}const Wl='{"title":"高級接口功能","local":"高級接口功能","sections":[{"title":"使用狀態保存數據","local":"使用狀態保存數據","sections":[],"depth":3},{"title":"通過解釋來理解預測","local":"通過解釋來理解預測","sections":[],"depth":3}],"depth":1}';function Al(il){return gl(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class _l extends Cl{constructor(M){super(),kl(this,M,Al,$l,fl,{})}}export{_l as component};
