import{s as Ie,a as Te,n as Ce,o as Ge}from"../chunks/scheduler.893fe8c9.js";import{S as ke,i as xe,e as r,s as l,c as M,h as Ze,a as p,d as a,b as i,f as pe,g as d,j as u,k as n,l as ve,m as s,n as y,t as h,o as w,p as f}from"../chunks/index.6ee278c6.js";import{C as Be,H as oe,E as $e}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.ea3ad860.js";import{C as ge}from"../chunks/CodeBlock.8bdd5f33.js";import{C as Ae}from"../chunks/CourseFloatingBanner.c25cfa5e.js";function ze(ce){let m,E,S,R,j,_,J,N,b,Y,U,ue="Acum că putem construi și partaja o interfață de bază, să explorăm câteva caracteristici mai avansate precum starea și interpretarea.",q,T,X,g,me=`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.`,F,I,Me="Pentru a stoca date într-o stare de sesiune, trebuie să faceți trei lucruri:",V,C,de="<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>",H,G,ye="Vedeți exemplul de chatbot de mai jos:",L,k,D,o,he,P,x,we=`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.`,K,Z,O,v,fe="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:",ee,B,te,$,je="Testați funcția de interpretare prin trimiterea unei intrări apoi făcând clic pe Interpret sub componenta de ieșire.",ae,c,Je,se,A,be=`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>.`,le,z,Ue="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.",ie,W,ne,Q,re;return j=new Be({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"}}),J=new oe({props:{title:"Caracteristici avansate ale Interface",local:"advanced-interface-features",headingTag:"h1"}}),b=new Ae({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"}]}}),T=new oe({props:{title:"Folosirea stării pentru a persista datele",local:"using-state-to-persist-data",headingTag:"h3"}}),k=new ge({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}}),Z=new oe({props:{title:"Folosirea interpretării pentru a înțelege predicțiile",local:"using-interpretation-to-understand-predictions",headingTag:"h3"}}),B=new ge({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}}),W=new $e({props:{source:"https://github.com/huggingface/course/blob/main/chapters/ro/chapter9/6.mdx"}}),{c(){m=r("meta"),E=l(),S=r("p"),R=l(),M(j.$$.fragment),_=l(),M(J.$$.fragment),N=l(),M(b.$$.fragment),Y=l(),U=r("p"),U.textContent=ue,q=l(),M(T.$$.fragment),X=l(),g=r("p"),g.innerHTML=me,F=l(),I=r("p"),I.textContent=Me,V=l(),C=r("ol"),C.innerHTML=de,H=l(),G=r("p"),G.textContent=ye,L=l(),M(k.$$.fragment),D=l(),o=r("iframe"),P=l(),x=r("p"),x.textContent=we,K=l(),M(Z.$$.fragment),O=l(),v=r("p"),v.textContent=fe,ee=l(),M(B.$$.fragment),te=l(),$=r("p"),$.textContent=je,ae=l(),c=r("iframe"),se=l(),A=r("p"),A.innerHTML=be,le=l(),z=r("p"),z.innerHTML=Ue,ie=l(),M(W.$$.fragment),ne=l(),Q=r("p"),this.h()},l(e){const t=Ze("svelte-u9bgzb",document.head);m=p(t,"META",{name:!0,content:!0}),t.forEach(a),E=i(e),S=p(e,"P",{}),pe(S).forEach(a),R=i(e),d(j.$$.fragment,e),_=i(e),d(J.$$.fragment,e),N=i(e),d(b.$$.fragment,e),Y=i(e),U=p(e,"P",{"data-svelte-h":!0}),u(U)!=="svelte-13xly6x"&&(U.textContent=ue),q=i(e),d(T.$$.fragment,e),X=i(e),g=p(e,"P",{"data-svelte-h":!0}),u(g)!=="svelte-5cxxeu"&&(g.innerHTML=me),F=i(e),I=p(e,"P",{"data-svelte-h":!0}),u(I)!=="svelte-1fwezb6"&&(I.textContent=Me),V=i(e),C=p(e,"OL",{"data-svelte-h":!0}),u(C)!=="svelte-8mii0f"&&(C.innerHTML=de),H=i(e),G=p(e,"P",{"data-svelte-h":!0}),u(G)!=="svelte-1fbxlrs"&&(G.textContent=ye),L=i(e),d(k.$$.fragment,e),D=i(e),o=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),pe(o).forEach(a),P=i(e),x=p(e,"P",{"data-svelte-h":!0}),u(x)!=="svelte-10l1rjn"&&(x.textContent=we),K=i(e),d(Z.$$.fragment,e),O=i(e),v=p(e,"P",{"data-svelte-h":!0}),u(v)!=="svelte-rgau0l"&&(v.textContent=fe),ee=i(e),d(B.$$.fragment,e),te=i(e),$=p(e,"P",{"data-svelte-h":!0}),u($)!=="svelte-1w1lgxd"&&($.textContent=je),ae=i(e),c=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),pe(c).forEach(a),se=i(e),A=p(e,"P",{"data-svelte-h":!0}),u(A)!=="svelte-frm5wc"&&(A.innerHTML=be),le=i(e),z=p(e,"P",{"data-svelte-h":!0}),u(z)!=="svelte-ec91xv"&&(z.innerHTML=Ue),ie=i(e),d(W.$$.fragment,e),ne=i(e),Q=p(e,"P",{}),pe(Q).forEach(a),this.h()},h(){n(m,"name","hf:doc:metadata"),n(m,"content",We),Te(o.src,he="https://course-demos-Chatbot-Demo.hf.space")||n(o,"src",he),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"),Te(c.src,Je="https://course-demos-gradio-image-interpretation.hf.space")||n(c,"src",Je),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){ve(document.head,m),s(e,E,t),s(e,S,t),s(e,R,t),y(j,e,t),s(e,_,t),y(J,e,t),s(e,N,t),y(b,e,t),s(e,Y,t),s(e,U,t),s(e,q,t),y(T,e,t),s(e,X,t),s(e,g,t),s(e,F,t),s(e,I,t),s(e,V,t),s(e,C,t),s(e,H,t),s(e,G,t),s(e,L,t),y(k,e,t),s(e,D,t),s(e,o,t),s(e,P,t),s(e,x,t),s(e,K,t),y(Z,e,t),s(e,O,t),s(e,v,t),s(e,ee,t),y(B,e,t),s(e,te,t),s(e,$,t),s(e,ae,t),s(e,c,t),s(e,se,t),s(e,A,t),s(e,le,t),s(e,z,t),s(e,ie,t),y(W,e,t),s(e,ne,t),s(e,Q,t),re=!0},p:Ce,i(e){re||(h(j.$$.fragment,e),h(J.$$.fragment,e),h(b.$$.fragment,e),h(T.$$.fragment,e),h(k.$$.fragment,e),h(Z.$$.fragment,e),h(B.$$.fragment,e),h(W.$$.fragment,e),re=!0)},o(e){w(j.$$.fragment,e),w(J.$$.fragment,e),w(b.$$.fragment,e),w(T.$$.fragment,e),w(k.$$.fragment,e),w(Z.$$.fragment,e),w(B.$$.fragment,e),w(W.$$.fragment,e),re=!1},d(e){e&&(a(E),a(S),a(R),a(_),a(N),a(Y),a(U),a(q),a(X),a(g),a(F),a(I),a(V),a(C),a(H),a(G),a(L),a(D),a(o),a(P),a(x),a(K),a(O),a(v),a(ee),a(te),a($),a(ae),a(c),a(se),a(A),a(le),a(z),a(ie),a(ne),a(Q)),a(m),f(j,e),f(J,e),f(b,e),f(T,e),f(k,e),f(Z,e),f(B,e),f(W,e)}}}const We='{"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 Se(ce){return Ge(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Ye extends ke{constructor(m){super(),xe(this,m,Se,ze,Ie,{})}}export{Ye as component};
