course/pr_1213/ru/_app/immutable/nodes/74.acef098a.js

import{s as gl,a as Ul,n as Rl,o as Al}from"../chunks/scheduler.893fe8c9.js";import{S as kl,i as Cl,e as i,s as a,c as u,h as El,a as o,d as t,b as n,f as ol,g as j,j as M,k as p,l as Ql,m as s,n as w,t as y,o as J,p as h}from"../chunks/index.2d09ebb4.js";import{C as Bl,H as rl,E as Dl}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.fd8a275b.js";import{C as Il}from"../chunks/CodeBlock.d42a674a.js";import{C as Gl}from"../chunks/CourseFloatingBanner.e3aeab73.js";function Zl(cl){let m,W,x,z,d,_,T,N,f,q,b,Ml="Теперь, когда мы можем создать базовый интерфейс и поделиться им, давайте изучим некоторые более продвинутые возможности, такие как состояние и интерпретации.",S,U,X,I,ml=`Gradio поддерживает <em>состояние сеанса</em>, когда данные сохраняются при нескольких отправках в рамках
загруженной страницы. Состояние сессии полезно для создания демо, например, чат-ботов, где необходимо
сохранять данные по мере того, как пользователь взаимодействует с моделью. Обратите внимание, что состояние сессии не позволяет обмениваться данными между разными пользователями вашей модели.`,Y,g,ul="Чтобы хранить данные о состоянии сеанса, необходимо выполнить три действия:",F,R,jl="<li>Передайте в вашу функцию <em>дополнительный параметр</em>, который представляет собой состояние интерфейса.</li> <li>В завершении работы функции верните обновленное значение состояния в качестве <em>дополнительного возвращаемого значения</em>.</li> <li>Добавьте входной компонент ‘state’ и выходной компонент ‘state’ при создании вашего <code>Interface</code>.</li>",V,A,wl="Посмотрите пример чатбота ниже:",H,k,L,r,yl,K,C,Jl=`Обратите внимание, что состояние выходного компонента сохраняется при всех отправках данных.
Примечание: в параметр state можно передать значение по умолчанию,
которое используется в качестве начального значения состояния.`,O,E,P,Q,hl="Большинство моделей машинного обучения представляют собой “черные ящики”, и внутренняя логика функции скрыта от конечного пользователя. Чтобы стимулировать прозрачность, мы упростили добавление интерпретации в вашу модель, просто задав ключевое слово interpretation в классе Interface по умолчанию. Это позволит вашим пользователям понять, какие части входных данных отвечают за вывод. Взгляните на простой интерфейс ниже, который показывает классификатор изображений, также включающий интерпретацию:",ll,B,el,D,dl="Проверьте функцию интерпретации, отправив входные данные и нажав кнопку Интерпретировать (Interpret) под компонентом вывода.",tl,c,Tl,sl,G,fl='Помимо метода интерпретации, предоставляемого Gradio по умолчанию, вы также можете задать <code>shap</code> для параметра <code>interpretation</code> и установить параметр <code>num_shap</code>. При этом используется интерпретация на основе Шэпли, о которой вы можете подробнее прочитать <a href="https://christophm.github.io/interpretable-ml-book/shap.html" rel="nofollow">здесь</a>. Наконец, в параметр <code>interpretation</code> можно передать собственную функцию интерпретации. Пример можно посмотреть на странице Gradio, посвященной началу работы <a href="https://gradio.app/getting_started/" rel="nofollow">здесь</a>.',al,Z,bl="На этом мы завершаем наше глубокое погружение в класс <code>Interface</code> в Gradio. Как мы уже видели, этот класс позволяет создавать демо машинного обучения в несколько строк кода на Python. Однако иногда возникает необходимость доработать демо, изменив его макет или соединив несколько функций предсказания в цепочку. Было бы здорово, если бы мы могли как-то разделить <code>Interface</code> на настраиваемые “блоки”? К счастью, такая возможность есть! Этой теме посвящен последний раздел.",nl,$,pl,v,il;return d=new Bl({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"}}),T=new rl({props:{title:"Расширенные возможности Interface",local:"advanced-interface-features",headingTag:"h1"}}),f=new Gl({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"}]}}),U=new rl({props:{title:"Использование состояния для сохранения данных",local:"using-state-to-persist-data",headingTag:"h3"}}),k=new Il({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}}),E=new rl({props:{title:"Использование интерпретации для понимания прогнозов",local:"using-interpretation-to-understand-predictions",headingTag:"h3"}}),B=new Il({props:{code:"aW1wb3J0JTIwcmVxdWVzdHMlMEFpbXBvcnQlMjB0ZW5zb3JmbG93JTIwYXMlMjB0ZiUwQSUwQWltcG9ydCUyMGdyYWRpbyUyMGFzJTIwZ3IlMEElMEFpbmNlcHRpb25fbmV0JTIwJTNEJTIwdGYua2VyYXMuYXBwbGljYXRpb25zLk1vYmlsZU5ldFYyKCklMjAlMjAlMjMlMjAlRDAlQjclRDAlQjAlRDAlQjMlRDElODAlRDElODMlRDAlQjclRDAlQjglRDAlQkMlMjAlRDAlQkMlRDAlQkUlRDAlQjQlRDAlQjUlRDAlQkIlRDElOEMlMEElMEElMjMlMjAlRDAlOTclRDAlQjAlRDAlQjMlRDElODAlRDElODMlRDAlQjclRDAlQjglRDAlQkMlMjAlRDElODclRDAlQjUlRDAlQkIlRDAlQkUlRDAlQjIlRDAlQjUlRDAlQkElRDAlQkUlRDElODclRDAlQjglRDElODIlRDAlQjAlRDAlQjUlRDAlQkMlRDElOEIlRDAlQjUlMjAlRDAlQkMlRDAlQjUlRDElODIlRDAlQkElRDAlQjglMjAlRDAlQjQlRDAlQkIlRDElOEYlMjBJbWFnZU5ldC4lMEFyZXNwb25zZSUyMCUzRCUyMHJlcXVlc3RzLmdldCglMjJodHRwcyUzQSUyRiUyRmdpdC5pbyUyRkpKa1lOJTIyKSUwQWxhYmVscyUyMCUzRCUyMHJlc3BvbnNlLnRleHQuc3BsaXQoJTIyJTVDbiUyMiklMEElMEElMEFkZWYlMjBjbGFzc2lmeV9pbWFnZShpbnApJTNBJTBBJTIwJTIwJTIwJTIwaW5wJTIwJTNEJTIwaW5wLnJlc2hhcGUoKC0xJTJDJTIwMjI0JTJDJTIwMjI0JTJDJTIwMykpJTBBJTIwJTIwJTIwJTIwaW5wJTIwJTNEJTIwdGYua2VyYXMuYXBwbGljYXRpb25zLm1vYmlsZW5ldF92Mi5wcmVwcm9jZXNzX2lucHV0KGlucCklMEElMjAlMjAlMjAlMjBwcmVkaWN0aW9uJTIwJTNEJTIwaW5jZXB0aW9uX25ldC5wcmVkaWN0KGlucCkuZmxhdHRlbigpJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwJTdCbGFiZWxzJTVCaSU1RCUzQSUyMGZsb2F0KHByZWRpY3Rpb24lNUJpJTVEKSUyMGZvciUyMGklMjBpbiUyMHJhbmdlKDEwMDApJTdEJTBBJTBBJTBBaW1hZ2UlMjAlM0QlMjBnci5JbWFnZShzaGFwZSUzRCgyMjQlMkMlMjAyMjQpKSUwQWxhYmVsJTIwJTNEJTIwZ3IuTGFiZWwobnVtX3RvcF9jbGFzc2VzJTNEMyklMEElMEF0aXRsZSUyMCUzRCUyMCUyMkdyYWRpbyUyMEltYWdlJTIwQ2xhc3NpZmljdGlvbiUyMCUyQiUyMEludGVycHJldGF0aW9uJTIwRXhhbXBsZSUyMiUwQWdyLkludGVyZmFjZSglMEElMjAlMjAlMjAlMjBmbiUzRGNsYXNzaWZ5X2ltYWdlJTJDJTIwaW5wdXRzJTNEaW1hZ2UlMkMlMjBvdXRwdXRzJTNEbGFiZWwlMkMlMjBpbnRlcnByZXRhdGlvbiUzRCUyMmRlZmF1bHQlMjIlMkMlMjB0aXRsZSUzRHRpdGxlJTBBKS5sYXVuY2goKQ==",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"># загрузим модель</span>

<span class="hljs-comment"># Загрузим человекочитаемые метки для 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}}),$=new Dl({props:{source:"https://github.com/huggingface/course/blob/main/chapters/ru/chapter9/6.mdx"}}),{c(){m=i("meta"),W=a(),x=i("p"),z=a(),u(d.$$.fragment),_=a(),u(T.$$.fragment),N=a(),u(f.$$.fragment),q=a(),b=i("p"),b.textContent=Ml,S=a(),u(U.$$.fragment),X=a(),I=i("p"),I.innerHTML=ml,Y=a(),g=i("p"),g.textContent=ul,F=a(),R=i("ol"),R.innerHTML=jl,V=a(),A=i("p"),A.textContent=wl,H=a(),u(k.$$.fragment),L=a(),r=i("iframe"),K=a(),C=i("p"),C.textContent=Jl,O=a(),u(E.$$.fragment),P=a(),Q=i("p"),Q.textContent=hl,ll=a(),u(B.$$.fragment),el=a(),D=i("p"),D.textContent=dl,tl=a(),c=i("iframe"),sl=a(),G=i("p"),G.innerHTML=fl,al=a(),Z=i("p"),Z.innerHTML=bl,nl=a(),u($.$$.fragment),pl=a(),v=i("p"),this.h()},l(l){const e=El("svelte-u9bgzb",document.head);m=o(e,"META",{name:!0,content:!0}),e.forEach(t),W=n(l),x=o(l,"P",{}),ol(x).forEach(t),z=n(l),j(d.$$.fragment,l),_=n(l),j(T.$$.fragment,l),N=n(l),j(f.$$.fragment,l),q=n(l),b=o(l,"P",{"data-svelte-h":!0}),M(b)!=="svelte-2ua2mn"&&(b.textContent=Ml),S=n(l),j(U.$$.fragment,l),X=n(l),I=o(l,"P",{"data-svelte-h":!0}),M(I)!=="svelte-uhvo1l"&&(I.innerHTML=ml),Y=n(l),g=o(l,"P",{"data-svelte-h":!0}),M(g)!=="svelte-191syp1"&&(g.textContent=ul),F=n(l),R=o(l,"OL",{"data-svelte-h":!0}),M(R)!=="svelte-1l66zjj"&&(R.innerHTML=jl),V=n(l),A=o(l,"P",{"data-svelte-h":!0}),M(A)!=="svelte-p704vx"&&(A.textContent=wl),H=n(l),j(k.$$.fragment,l),L=n(l),r=o(l,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),ol(r).forEach(t),K=n(l),C=o(l,"P",{"data-svelte-h":!0}),M(C)!=="svelte-uhgvnk"&&(C.textContent=Jl),O=n(l),j(E.$$.fragment,l),P=n(l),Q=o(l,"P",{"data-svelte-h":!0}),M(Q)!=="svelte-1nvvviw"&&(Q.textContent=hl),ll=n(l),j(B.$$.fragment,l),el=n(l),D=o(l,"P",{"data-svelte-h":!0}),M(D)!=="svelte-hgd0jk"&&(D.textContent=dl),tl=n(l),c=o(l,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),ol(c).forEach(t),sl=n(l),G=o(l,"P",{"data-svelte-h":!0}),M(G)!=="svelte-n2izi1"&&(G.innerHTML=fl),al=n(l),Z=o(l,"P",{"data-svelte-h":!0}),M(Z)!=="svelte-17mu0rx"&&(Z.innerHTML=bl),nl=n(l),j($.$$.fragment,l),pl=n(l),v=o(l,"P",{}),ol(v).forEach(t),this.h()},h(){p(m,"name","hf:doc:metadata"),p(m,"content",$l),Ul(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"),Ul(c.src,Tl="https://course-demos-gradio-image-interpretation.hf.space")||p(c,"src",Tl),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){Ql(document.head,m),s(l,W,e),s(l,x,e),s(l,z,e),w(d,l,e),s(l,_,e),w(T,l,e),s(l,N,e),w(f,l,e),s(l,q,e),s(l,b,e),s(l,S,e),w(U,l,e),s(l,X,e),s(l,I,e),s(l,Y,e),s(l,g,e),s(l,F,e),s(l,R,e),s(l,V,e),s(l,A,e),s(l,H,e),w(k,l,e),s(l,L,e),s(l,r,e),s(l,K,e),s(l,C,e),s(l,O,e),w(E,l,e),s(l,P,e),s(l,Q,e),s(l,ll,e),w(B,l,e),s(l,el,e),s(l,D,e),s(l,tl,e),s(l,c,e),s(l,sl,e),s(l,G,e),s(l,al,e),s(l,Z,e),s(l,nl,e),w($,l,e),s(l,pl,e),s(l,v,e),il=!0},p:Rl,i(l){il||(y(d.$$.fragment,l),y(T.$$.fragment,l),y(f.$$.fragment,l),y(U.$$.fragment,l),y(k.$$.fragment,l),y(E.$$.fragment,l),y(B.$$.fragment,l),y($.$$.fragment,l),il=!0)},o(l){J(d.$$.fragment,l),J(T.$$.fragment,l),J(f.$$.fragment,l),J(U.$$.fragment,l),J(k.$$.fragment,l),J(E.$$.fragment,l),J(B.$$.fragment,l),J($.$$.fragment,l),il=!1},d(l){l&&(t(W),t(x),t(z),t(_),t(N),t(q),t(b),t(S),t(X),t(I),t(Y),t(g),t(F),t(R),t(V),t(A),t(H),t(L),t(r),t(K),t(C),t(O),t(P),t(Q),t(ll),t(el),t(D),t(tl),t(c),t(sl),t(G),t(al),t(Z),t(nl),t(pl),t(v)),t(m),h(d,l),h(T,l),h(f,l),h(U,l),h(k,l),h(E,l),h(B,l),h($,l)}}}const $l='{"title":"Расширенные возможности Interface","local":"advanced-interface-features","sections":[{"title":"Использование состояния для сохранения данных","local":"using-state-to-persist-data","sections":[],"depth":3},{"title":"Использование интерпретации для понимания прогнозов","local":"using-interpretation-to-understand-predictions","sections":[],"depth":3}],"depth":1}';function xl(cl){return Al(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class ql extends kl{constructor(m){super(),Cl(this,m,xl,Zl,gl,{})}}export{ql as component};