course/pr_1021/rum/_app/immutable/nodes/98.5ba6e772.js

import{s as Te,f as be,n as ge,o as Ie}from"../chunks/scheduler.37c15a92.js";import{S as Ce,i as Ge,g as r,s as l,r as v,A as ke,h as p,f as a,c as i,j as ne,u as x,x as u,k as n,y as Ze,a as s,v as B,d as A,t as $,w as W}from"../chunks/index.2bf4358c.js";import{C as Ue}from"../chunks/CodeBlock.4e987730.js";import{C as ve}from"../chunks/CourseFloatingBanner.6add7356.js";import{H as re,E as xe}from"../chunks/getInferenceSnippets.ebf8be91.js";function Be(pe){let m,S,z,E,M,R,d,_,y,oe="Acum că putem construi și partaja o interfață de bază, să explorăm câteva caracteristici mai avansate precum starea și interpretarea.",N,h,Y,w,ce=`Gradio are suport pentru <em>starea sesiunii</em>, unde datele persistă prin multiple trimiteri într-o
încărcare de pagină. Starea sesiunii este utilă pentru construirea demo-urilor, de exemplu, chatbot-uri unde doriți să
persistați datele pe măsură ce utilizatorul interacționează cu modelul. Rețineți că starea sesiunii nu partajează datele între diferiți utilizatori ai modelului dvs.`,q,f,ue="Pentru a stoca date într-o stare de sesiune, trebuie să faceți trei lucruri:",X,j,me="<li>Transmiteți un <em>parametru suplimentar</em> în funcția dvs., care reprezintă starea interfeței.</li> <li>La sfârșitul funcției, returnați valoarea actualizată a stării ca o <em>valoare de returnare suplimentară</em>.</li> <li>Adăugați componentele de intrare ‘state’ și ieșire ‘state’ când creați <code>Interface</code>-ul dvs.</li>",F,J,Me="Vedeți exemplul de chatbot de mai jos:",V,b,H,o,de,L,U,ye=`Observați cum starea componentei de ieșire persistă prin trimiteri.
Notă: puteți transmite o valoare implicită la parametrul state,
care este folosită ca valoarea inițială a stării.`,D,T,P,g,he="Majoritatea modelelor de machine learning sunt cutii negre și logica internă a funcției este ascunsă de utilizatorul final. Pentru a încuraja transparența, am făcut foarte ușor să adăugați interpretare la modelul dvs. prin simpla setare a cuvântului cheie interpretation în clasa Interface la default. Aceasta permite utilizatorilor dvs. să înțeleagă ce părți ale intrării sunt responsabile pentru ieșire. Aruncați o privire la interfața simplă de mai jos care arată un clasificator de imagini care include și interpretare:",K,I,O,C,we="Testați funcția de interpretare prin trimiterea unei intrări apoi făcând clic pe Interpret sub componenta de ieșire.",ee,c,fe,te,G,je=`Pe lângă metoda de interpretare implicită pe care o oferă Gradio, puteți specifica și <code>shap</code> pentru parametrul <code>interpretation</code> și să setați parametrul <code>num_shap</code>. Aceasta folosește interpretarea bazată pe Shapley, despre care puteți citi mai multe <a href="https://christophm.github.io/interpretable-ml-book/shap.html" rel="nofollow">aici</a>.
În final, puteți transmite și propria funcție de interpretare în parametrul <code>interpretation</code>. Vedeți un exemplu în pagina de început a Gradio <a href="https://gradio.app/getting_started/" rel="nofollow">aici</a>.`,ae,k,Je="Aceasta încheie explorarea noastră profundă a clasei <code>Interface</code> din Gradio. Așa cum am văzut, această clasă face simplu să creați demo-uri de machine learning în câteva linii de cod Python. Cu toate acestea, uneori veți dori să personalizați demo-ul prin schimbarea layout-ului sau înlănțuirea mai multor funcții de predicție împreună. Nu ar fi frumos dacă am putea cumva să împărțim <code>Interface</code>-ul în “blocuri” personalizabile? Din fericire, se poate! Aceasta este tema secțiunii finale.",se,Z,le,Q,ie;return M=new re({props:{title:"Caracteristici avansate ale Interface",local:"advanced-interface-features",headingTag:"h1"}}),d=new ve({props:{chapter:9,classNames:"absolute z-10 right-0 top-0",notebooks:[{label:"Google Colab",value:"https://colab.research.google.com/github/huggingface/notebooks/blob/master/course/en/chapter9/section6.ipynb"},{label:"Aws Studio",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/en/chapter9/section6.ipynb"}]}}),h=new re({props:{title:"Folosirea stării pentru a persista datele",local:"using-state-to-persist-data",headingTag:"h3"}}),b=new Ue({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 re({props:{title:"Folosirea interpretării pentru a înțelege predicțiile",local:"using-interpretation-to-understand-predictions",headingTag:"h3"}}),I=new Ue({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/rum/chapter9/6.mdx"}}),{c(){m=r("meta"),S=l(),z=r("p"),E=l(),v(M.$$.fragment),R=l(),v(d.$$.fragment),_=l(),y=r("p"),y.textContent=oe,N=l(),v(h.$$.fragment),Y=l(),w=r("p"),w.innerHTML=ce,q=l(),f=r("p"),f.textContent=ue,X=l(),j=r("ol"),j.innerHTML=me,F=l(),J=r("p"),J.textContent=Me,V=l(),v(b.$$.fragment),H=l(),o=r("iframe"),L=l(),U=r("p"),U.textContent=ye,D=l(),v(T.$$.fragment),P=l(),g=r("p"),g.textContent=he,K=l(),v(I.$$.fragment),O=l(),C=r("p"),C.textContent=we,ee=l(),c=r("iframe"),te=l(),G=r("p"),G.innerHTML=je,ae=l(),k=r("p"),k.innerHTML=Je,se=l(),v(Z.$$.fragment),le=l(),Q=r("p"),this.h()},l(e){const t=ke("svelte-u9bgzb",document.head);m=p(t,"META",{name:!0,content:!0}),t.forEach(a),S=i(e),z=p(e,"P",{}),ne(z).forEach(a),E=i(e),x(M.$$.fragment,e),R=i(e),x(d.$$.fragment,e),_=i(e),y=p(e,"P",{"data-svelte-h":!0}),u(y)!=="svelte-13xly6x"&&(y.textContent=oe),N=i(e),x(h.$$.fragment,e),Y=i(e),w=p(e,"P",{"data-svelte-h":!0}),u(w)!=="svelte-5cxxeu"&&(w.innerHTML=ce),q=i(e),f=p(e,"P",{"data-svelte-h":!0}),u(f)!=="svelte-1fwezb6"&&(f.textContent=ue),X=i(e),j=p(e,"OL",{"data-svelte-h":!0}),u(j)!=="svelte-8mii0f"&&(j.innerHTML=me),F=i(e),J=p(e,"P",{"data-svelte-h":!0}),u(J)!=="svelte-1fbxlrs"&&(J.textContent=Me),V=i(e),x(b.$$.fragment,e),H=i(e),o=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),ne(o).forEach(a),L=i(e),U=p(e,"P",{"data-svelte-h":!0}),u(U)!=="svelte-10l1rjn"&&(U.textContent=ye),D=i(e),x(T.$$.fragment,e),P=i(e),g=p(e,"P",{"data-svelte-h":!0}),u(g)!=="svelte-rgau0l"&&(g.textContent=he),K=i(e),x(I.$$.fragment,e),O=i(e),C=p(e,"P",{"data-svelte-h":!0}),u(C)!=="svelte-1w1lgxd"&&(C.textContent=we),ee=i(e),c=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),ne(c).forEach(a),te=i(e),G=p(e,"P",{"data-svelte-h":!0}),u(G)!=="svelte-frm5wc"&&(G.innerHTML=je),ae=i(e),k=p(e,"P",{"data-svelte-h":!0}),u(k)!=="svelte-ec91xv"&&(k.innerHTML=Je),se=i(e),x(Z.$$.fragment,e),le=i(e),Q=p(e,"P",{}),ne(Q).forEach(a),this.h()},h(){n(m,"name","hf:doc:metadata"),n(m,"content",Ae),be(o.src,de="https://course-demos-Chatbot-Demo.hf.space")||n(o,"src",de),n(o,"frameborder","0"),n(o,"height","350"),n(o,"title","Gradio app"),n(o,"class","container p-0 flex-grow space-iframe"),n(o,"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"),n(o,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),be(c.src,fe="https://course-demos-gradio-image-interpretation.hf.space")||n(c,"src",fe),n(c,"frameborder","0"),n(c,"height","570"),n(c,"title","Gradio app"),n(c,"class","container p-0 flex-grow space-iframe"),n(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"),n(c,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads")},m(e,t){Ze(document.head,m),s(e,S,t),s(e,z,t),s(e,E,t),B(M,e,t),s(e,R,t),B(d,e,t),s(e,_,t),s(e,y,t),s(e,N,t),B(h,e,t),s(e,Y,t),s(e,w,t),s(e,q,t),s(e,f,t),s(e,X,t),s(e,j,t),s(e,F,t),s(e,J,t),s(e,V,t),B(b,e,t),s(e,H,t),s(e,o,t),s(e,L,t),s(e,U,t),s(e,D,t),B(T,e,t),s(e,P,t),s(e,g,t),s(e,K,t),B(I,e,t),s(e,O,t),s(e,C,t),s(e,ee,t),s(e,c,t),s(e,te,t),s(e,G,t),s(e,ae,t),s(e,k,t),s(e,se,t),B(Z,e,t),s(e,le,t),s(e,Q,t),ie=!0},p:ge,i(e){ie||(A(M.$$.fragment,e),A(d.$$.fragment,e),A(h.$$.fragment,e),A(b.$$.fragment,e),A(T.$$.fragment,e),A(I.$$.fragment,e),A(Z.$$.fragment,e),ie=!0)},o(e){$(M.$$.fragment,e),$(d.$$.fragment,e),$(h.$$.fragment,e),$(b.$$.fragment,e),$(T.$$.fragment,e),$(I.$$.fragment,e),$(Z.$$.fragment,e),ie=!1},d(e){e&&(a(S),a(z),a(E),a(R),a(_),a(y),a(N),a(Y),a(w),a(q),a(f),a(X),a(j),a(F),a(J),a(V),a(H),a(o),a(L),a(U),a(D),a(P),a(g),a(K),a(O),a(C),a(ee),a(c),a(te),a(G),a(ae),a(k),a(se),a(le),a(Q)),a(m),W(M,e),W(d,e),W(h,e),W(b,e),W(T,e),W(I,e),W(Z,e)}}}const Ae='{"title":"Caracteristici avansate ale Interface","local":"advanced-interface-features","sections":[{"title":"Folosirea stării pentru a persista datele","local":"using-state-to-persist-data","sections":[],"depth":3},{"title":"Folosirea interpretării pentru a înțelege predicțiile","local":"using-interpretation-to-understand-predictions","sections":[],"depth":3}],"depth":1}';function $e(pe){return Ie(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Re extends Ce{constructor(m){super(),Ge(this,m,$e,Be,Te,{})}}export{Re as component};