import{s as Tt,f as Ut,n as ft,o as It}from"../chunks/scheduler.37c15a92.js";import{S as Ct,i as kt,g as c,s as e,r as B,A as vt,h as o,f as l,c as a,j as it,u as Z,x as r,k as i,y as Gt,a as s,v as x,d as Q,t as S,w as $}from"../chunks/index.2bf4358c.js";import{C as jt}from"../chunks/CodeBlock.4e987730.js";import{D as Bt}from"../chunks/DocNotebookDropdown.d9dfeb24.js";import{H as ct,E as Zt}from"../chunks/index.fb305b5e.js";function xt(ot){let m,W,A,z,u,N,M,R,y,ht="Bây giờ chúng ta có thể xây dựng và chia sẻ giao diện cơ bản, hãy cùng khám phá một số tính năng nâng cao hơn như trạng thái và diễn giải.",_,g,q,d,pt="Gradio hỗ trợ <em>trạng thái phiên</em>, nơi dữ liệu tồn tại qua nhiều lần gửi trong một tải trang. Trạng thái phiên hữu ích khi xây dựng các bản demo, chẳng hạn như chatbot ở nơi bạn muốn giữ nguyên dữ liệu khi người dùng tương tác với mô hình. Lưu ý rằng trạng thái phiên không chia sẻ dữ liệu giữa những người dùng khác nhau trong mô hình của bạn.",Y,J,rt="Để lưu trữ dữ liệu ở trạng thái phiên, bạn cần thực hiện ba việc:",X,w,mt="<li>Truyền một <em>tham số bổ sung</em> vào hàm của bạn, nó thể hiện trạng thái của giao diện.</li> <li>Khi kết thúc hàm, trả về giá trị đã cập nhật của trạng thái dưới dạng <em>giá trị trả về bổ sung</em>.</li> <li>Thêm thành phần đầu vào ‘state’ và đầu ra ‘state’ khi tạo <code>Interface</code> của bạn.</li>",V,b,ut="Xem ví dụ về chatbot bên dưới:",H,U,F,h,Mt,D,j,yt=`Lưu ý trạng thái của thành phần đầu ra vẫn tồn tại qua các lần gửi.
Lưu ý: bạn có thể chuyển giá trị mặc định vào tham số trạng thái, được sử dụng làm giá trị ban đầu của trạng thái.`,L,T,K,f,gt="Hầu hết các mô hình học máy là hộp đen và logic bên trong của hàm bị ẩn khỏi người dùng cuối. Để khuyến khích tính minh bạch, chúng tôi đã giúp bạn dễ dàng thêm thông dịch vào mô hình của mình bằng cách chỉ cần đặt từ khóa thông dịch trong lớp Interface thành mặc định. Điều này cho phép người dùng của bạn hiểu những phần nào của đầu vào chịu trách nhiệm cho đầu ra. Hãy xem giao diện đơn giản bên dưới hiển thị bộ phân loại hình ảnh đồng thời bao gồm phần diễn giải:",P,I,O,C,dt="Kiểm tra hàm thông dịch bằng cách gửi đầu vào, sau đó nhấp vào Interpret tương ứng diễn giải bên dưới thành phần đầu ra.",tt,p,Jt,nt,k,wt=`Bên cạnh phương pháp diễn giải mặc định mà Gradio cung cấp, bạn cũng có thể chỉ định <code>shap</code> cho tham số <code>interpretation</code> và đặt tham số <code>num_shap</code>. Điều này sử dụng diễn giải dựa trên Shapley, bạn có thể đọc thêm về <a href="https://christophm.github.io/interpretable-ml-book/shap.html" rel="nofollow">tại đây</a>.
Cuối cùng, bạn cũng có thể chuyển hàm thông dịch của riêng mình vào tham số <code>interpretation</code>. Xem ví dụ trong trang bắt đầu của Gradio <a href="https://gradio.app/getting_started/" rel="nofollow">tại đây</a>.`,lt,v,bt="Điều này kết thúc việc đi sâu vào lớp <code>Interface</code> của Gradio. Như chúng ta đã thấy, lớp này giúp việc tạo trình diễn học máy trở nên đơn giản trong một vài dòng mã Python. Tuy nhiên, đôi khi bạn sẽ muốn tùy chỉnh bản demo của mình bằng cách thay đổi bố cục hoặc xâu chuỗi nhiều hàm dự đoán lại với nhau. Sẽ thật tuyệt nếu bằng cách nào đó chúng ta có thể chia <code>Interface</code> thành các “khối” có thể tùy chỉnh? May mắn thay, có! Đó là chủ đề của phần cuối cùng.",st,G,et,E,at;return u=new ct({props:{title:"Các tính năng nâng cao của Interface",local:"các-tính-năng-nâng-cao-của-interface",headingTag:"h1"}}),M=new Bt({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/vi/chapter9/section6.ipynb"},{label:"Aws Studio",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/vi/chapter9/section6.ipynb"}]}}),g=new ct({props:{title:"Sử dụng trạng thái để duy trì dữ liệu",local:"sử-dụng-trạng-thái-để-duy-trì-dữ-liệu",headingTag:"h3"}}),U=new jt({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}}),T=new ct({props:{title:"Sử dụng diễn giải để hiểu các dự đoán",local:"sử-dụng-diễn-giải-để-hiểu-các-dự-đoán",headingTag:"h3"}}),I=new jt({props:{code:"aW1wb3J0JTIwcmVxdWVzdHMlMEFpbXBvcnQlMjB0ZW5zb3JmbG93JTIwYXMlMjB0ZiUwQSUwQWltcG9ydCUyMGdyYWRpbyUyMGFzJTIwZ3IlMEElMEFpbmNlcHRpb25fbmV0JTIwJTNEJTIwdGYua2VyYXMuYXBwbGljYXRpb25zLk1vYmlsZU5ldFYyKCklMjAlMjAlMjMlMjB0JUUxJUJBJUEzaSUyMG0lQzMlQjQlMjBoJUMzJUFDbmglMEElMEElMjMlMjBUJUUxJUJBJUEzaSUyMG5oJUMzJUEzbiUyMGNvbiUyMG5nJUM2JUIwJUUxJUJCJTlEaSUyMCVDNCU5MSVFMSVCQiU4RGMlMjAlQzQlOTElQzYlQjAlRTElQkIlQTNjJTIwY2hvJTIwSW1hZ2VOZXQuJTBBcmVzcG9uc2UlMjAlM0QlMjByZXF1ZXN0cy5nZXQoJTIyaHR0cHMlM0ElMkYlMkZnaXQuaW8lMkZKSmtZTiUyMiklMEFsYWJlbHMlMjAlM0QlMjByZXNwb25zZS50ZXh0LnNwbGl0KCUyMiU1Q24lMjIpJTBBJTBBJTBBZGVmJTIwY2xhc3NpZnlfaW1hZ2UoaW5wKSUzQSUwQSUyMCUyMCUyMCUyMGlucCUyMCUzRCUyMGlucC5yZXNoYXBlKCgtMSUyQyUyMDIyNCUyQyUyMDIyNCUyQyUyMDMpKSUwQSUyMCUyMCUyMCUyMGlucCUyMCUzRCUyMHRmLmtlcmFzLmFwcGxpY2F0aW9ucy5tb2JpbGVuZXRfdjIucHJlcHJvY2Vzc19pbnB1dChpbnApJTBBJTIwJTIwJTIwJTIwcHJlZGljdGlvbiUyMCUzRCUyMGluY2VwdGlvbl9uZXQucHJlZGljdChpbnApLmZsYXR0ZW4oKSUwQSUyMCUyMCUyMCUyMHJldHVybiUyMCU3QmxhYmVscyU1QmklNUQlM0ElMjBmbG9hdChwcmVkaWN0aW9uJTVCaSU1RCklMjBmb3IlMjBpJTIwaW4lMjByYW5nZSgxMDAwKSU3RCUwQSUwQSUwQWltYWdlJTIwJTNEJTIwZ3IuSW1hZ2Uoc2hhcGUlM0QoMjI0JTJDJTIwMjI0KSklMEFsYWJlbCUyMCUzRCUyMGdyLkxhYmVsKG51bV90b3BfY2xhc3NlcyUzRDMpJTBBJTBBdGl0bGUlMjAlM0QlMjAlMjJHcmFkaW8lMjBJbWFnZSUyMENsYXNzaWZpY3Rpb24lMjAlMkIlMjBJbnRlcnByZXRhdGlvbiUyMEV4YW1wbGUlMjIlMEFnci5JbnRlcmZhY2UoJTBBJTIwJTIwJTIwJTIwZm4lM0RjbGFzc2lmeV9pbWFnZSUyQyUyMGlucHV0cyUzRGltYWdlJTJDJTIwb3V0cHV0cyUzRGxhYmVsJTJDJTIwaW50ZXJwcmV0YXRpb24lM0QlMjJkZWZhdWx0JTIyJTJDJTIwdGl0bGUlM0R0aXRsZSUwQSkubGF1bmNoKCk=",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"># tải mô hình</span>

<span class="hljs-comment"># Tải nhãn con người đọc được cho 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}}),G=new Zt({props:{source:"https://github.com/huggingface/course/blob/main/chapters/vi/chapter9/6.mdx"}}),{c(){m=c("meta"),W=e(),A=c("p"),z=e(),B(u.$$.fragment),N=e(),B(M.$$.fragment),R=e(),y=c("p"),y.textContent=ht,_=e(),B(g.$$.fragment),q=e(),d=c("p"),d.innerHTML=pt,Y=e(),J=c("p"),J.textContent=rt,X=e(),w=c("ol"),w.innerHTML=mt,V=e(),b=c("p"),b.textContent=ut,H=e(),B(U.$$.fragment),F=e(),h=c("iframe"),D=e(),j=c("p"),j.textContent=yt,L=e(),B(T.$$.fragment),K=e(),f=c("p"),f.textContent=gt,P=e(),B(I.$$.fragment),O=e(),C=c("p"),C.textContent=dt,tt=e(),p=c("iframe"),nt=e(),k=c("p"),k.innerHTML=wt,lt=e(),v=c("p"),v.innerHTML=bt,st=e(),B(G.$$.fragment),et=e(),E=c("p"),this.h()},l(t){const n=vt("svelte-u9bgzb",document.head);m=o(n,"META",{name:!0,content:!0}),n.forEach(l),W=a(t),A=o(t,"P",{}),it(A).forEach(l),z=a(t),Z(u.$$.fragment,t),N=a(t),Z(M.$$.fragment,t),R=a(t),y=o(t,"P",{"data-svelte-h":!0}),r(y)!=="svelte-123kffg"&&(y.textContent=ht),_=a(t),Z(g.$$.fragment,t),q=a(t),d=o(t,"P",{"data-svelte-h":!0}),r(d)!=="svelte-1b05z2j"&&(d.innerHTML=pt),Y=a(t),J=o(t,"P",{"data-svelte-h":!0}),r(J)!=="svelte-s0bszo"&&(J.textContent=rt),X=a(t),w=o(t,"OL",{"data-svelte-h":!0}),r(w)!=="svelte-1agcbd1"&&(w.innerHTML=mt),V=a(t),b=o(t,"P",{"data-svelte-h":!0}),r(b)!=="svelte-3hcc1w"&&(b.textContent=ut),H=a(t),Z(U.$$.fragment,t),F=a(t),h=o(t,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),it(h).forEach(l),D=a(t),j=o(t,"P",{"data-svelte-h":!0}),r(j)!=="svelte-1ay4493"&&(j.textContent=yt),L=a(t),Z(T.$$.fragment,t),K=a(t),f=o(t,"P",{"data-svelte-h":!0}),r(f)!=="svelte-daxd5l"&&(f.textContent=gt),P=a(t),Z(I.$$.fragment,t),O=a(t),C=o(t,"P",{"data-svelte-h":!0}),r(C)!=="svelte-1uei318"&&(C.textContent=dt),tt=a(t),p=o(t,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),it(p).forEach(l),nt=a(t),k=o(t,"P",{"data-svelte-h":!0}),r(k)!=="svelte-u6k88k"&&(k.innerHTML=wt),lt=a(t),v=o(t,"P",{"data-svelte-h":!0}),r(v)!=="svelte-1oiysvl"&&(v.innerHTML=bt),st=a(t),Z(G.$$.fragment,t),et=a(t),E=o(t,"P",{}),it(E).forEach(l),this.h()},h(){i(m,"name","hf:doc:metadata"),i(m,"content",Qt),Ut(h.src,Mt="https://course-demos-Chatbot-Demo.hf.space")||i(h,"src",Mt),i(h,"frameborder","0"),i(h,"height","350"),i(h,"title","Gradio app"),i(h,"class","container p-0 flex-grow space-iframe"),i(h,"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"),i(h,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),Ut(p.src,Jt="https://course-demos-gradio-image-interpretation.hf.space")||i(p,"src",Jt),i(p,"frameborder","0"),i(p,"height","570"),i(p,"title","Gradio app"),i(p,"class","container p-0 flex-grow space-iframe"),i(p,"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"),i(p,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads")},m(t,n){Gt(document.head,m),s(t,W,n),s(t,A,n),s(t,z,n),x(u,t,n),s(t,N,n),x(M,t,n),s(t,R,n),s(t,y,n),s(t,_,n),x(g,t,n),s(t,q,n),s(t,d,n),s(t,Y,n),s(t,J,n),s(t,X,n),s(t,w,n),s(t,V,n),s(t,b,n),s(t,H,n),x(U,t,n),s(t,F,n),s(t,h,n),s(t,D,n),s(t,j,n),s(t,L,n),x(T,t,n),s(t,K,n),s(t,f,n),s(t,P,n),x(I,t,n),s(t,O,n),s(t,C,n),s(t,tt,n),s(t,p,n),s(t,nt,n),s(t,k,n),s(t,lt,n),s(t,v,n),s(t,st,n),x(G,t,n),s(t,et,n),s(t,E,n),at=!0},p:ft,i(t){at||(Q(u.$$.fragment,t),Q(M.$$.fragment,t),Q(g.$$.fragment,t),Q(U.$$.fragment,t),Q(T.$$.fragment,t),Q(I.$$.fragment,t),Q(G.$$.fragment,t),at=!0)},o(t){S(u.$$.fragment,t),S(M.$$.fragment,t),S(g.$$.fragment,t),S(U.$$.fragment,t),S(T.$$.fragment,t),S(I.$$.fragment,t),S(G.$$.fragment,t),at=!1},d(t){t&&(l(W),l(A),l(z),l(N),l(R),l(y),l(_),l(q),l(d),l(Y),l(J),l(X),l(w),l(V),l(b),l(H),l(F),l(h),l(D),l(j),l(L),l(K),l(f),l(P),l(O),l(C),l(tt),l(p),l(nt),l(k),l(lt),l(v),l(st),l(et),l(E)),l(m),$(u,t),$(M,t),$(g,t),$(U,t),$(T,t),$(I,t),$(G,t)}}}const Qt='{"title":"Các tính năng nâng cao của Interface","local":"các-tính-năng-nâng-cao-của-interface","sections":[{"title":"Sử dụng trạng thái để duy trì dữ liệu","local":"sử-dụng-trạng-thái-để-duy-trì-dữ-liệu","sections":[],"depth":3},{"title":"Sử dụng diễn giải để hiểu các dự đoán","local":"sử-dụng-diễn-giải-để-hiểu-các-dự-đoán","sections":[],"depth":3}],"depth":1}';function St(ot){return It(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Nt extends Ct{constructor(m){super(),kt(this,m,St,xt,Tt,{})}}export{Nt as component};
