import{s as Ul,f as dl,n as fl,o as Il}from"../chunks/scheduler.37c15a92.js";import{S as bl,i as gl,g as o,s as a,r as C,A as Rl,h as i,f as s,c as n,j as al,u as E,x as M,k as p,y as Al,a as t,v as Q,d as B,t as D,w as G}from"../chunks/index.2bf4358c.js";import{C as Tl}from"../chunks/CodeBlock.4f5fc1ad.js";import{C as kl}from"../chunks/CourseFloatingBanner.06521e8b.js";import{H as nl}from"../chunks/Heading.8ada512a.js";function Cl(pl){let m,x,Z,W,u,$,j,z,w,ol="Теперь, когда мы можем создать базовый интерфейс и поделиться им, давайте изучим некоторые более продвинутые возможности, такие как состояние и интерпретации.",_,J,N,y,il=`Gradio поддерживает <em>состояние сеанса</em>, когда данные сохраняются при нескольких отправках в рамках
загруженной страницы. Состояние сессии полезно для создания демо, например, чат-ботов, где необходимо
сохранять данные по мере того, как пользователь взаимодействует с моделью. Обратите внимание, что состояние сессии не позволяет обмениваться данными между разными пользователями вашей модели.`,q,h,rl="Чтобы хранить данные о состоянии сеанса, необходимо выполнить три действия:",X,d,cl="<li>Передайте в вашу функцию <em>дополнительный параметр</em>, который представляет собой состояние интерфейса.</li> <li>В завершении работы функции верните обновленное значение состояния в качестве <em>дополнительного возвращаемого значения</em>.</li> <li>Добавьте входной компонент ‘state’ и выходной компонент ‘state’ при создании вашего <code>Interface</code>.</li>",S,T,Ml="Посмотрите пример чатбота ниже:",Y,U,F,r,ml,V,f,ul=`Обратите внимание, что состояние выходного компонента сохраняется при всех отправках данных.
Примечание: в параметр state можно передать значение по умолчанию,
которое используется в качестве начального значения состояния.`,H,I,L,b,jl="Большинство моделей машинного обучения представляют собой “черные ящики”, и внутренняя логика функции скрыта от конечного пользователя. Чтобы стимулировать прозрачность, мы упростили добавление интерпретации в вашу модель, просто задав ключевое слово interpretation в классе Interface по умолчанию. Это позволит вашим пользователям понять, какие части входных данных отвечают за вывод. Взгляните на простой интерфейс ниже, который показывает классификатор изображений, также включающий интерпретацию:",K,g,P,R,wl="Проверьте функцию интерпретации, отправив входные данные и нажав кнопку Интерпретировать (Interpret) под компонентом вывода.",O,c,Jl,ll,A,yl='Помимо метода интерпретации, предоставляемого 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>.',el,k,hl="На этом мы завершаем наше глубокое погружение в класс <code>Interface</code> в Gradio. Как мы уже видели, этот класс позволяет создавать демо машинного обучения в несколько строк кода на Python. Однако иногда возникает необходимость доработать демо, изменив его макет или соединив несколько функций предсказания в цепочку. Было бы здорово, если бы мы могли как-то разделить <code>Interface</code> на настраиваемые “блоки”? К счастью, такая возможность есть! Этой теме посвящен последний раздел.",sl,v,tl;return u=new nl({props:{title:"Расширенные возможности Interface",local:"advanced-interface-features",headingTag:"h1"}}),j=new kl({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"}]}}),J=new nl({props:{title:"Использование состояния для сохранения данных",local:"using-state-to-persist-data",headingTag:"h3"}}),U=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}}),I=new nl({props:{title:"Использование интерпретации для понимания прогнозов",local:"using-interpretation-to-understand-predictions",headingTag:"h3"}}),g=new Tl({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}}),{c(){m=o("meta"),x=a(),Z=o("p"),W=a(),C(u.$$.fragment),$=a(),C(j.$$.fragment),z=a(),w=o("p"),w.textContent=ol,_=a(),C(J.$$.fragment),N=a(),y=o("p"),y.innerHTML=il,q=a(),h=o("p"),h.textContent=rl,X=a(),d=o("ol"),d.innerHTML=cl,S=a(),T=o("p"),T.textContent=Ml,Y=a(),C(U.$$.fragment),F=a(),r=o("iframe"),V=a(),f=o("p"),f.textContent=ul,H=a(),C(I.$$.fragment),L=a(),b=o("p"),b.textContent=jl,K=a(),C(g.$$.fragment),P=a(),R=o("p"),R.textContent=wl,O=a(),c=o("iframe"),ll=a(),A=o("p"),A.innerHTML=yl,el=a(),k=o("p"),k.innerHTML=hl,sl=a(),v=o("p"),this.h()},l(l){const e=Rl("svelte-u9bgzb",document.head);m=i(e,"META",{name:!0,content:!0}),e.forEach(s),x=n(l),Z=i(l,"P",{}),al(Z).forEach(s),W=n(l),E(u.$$.fragment,l),$=n(l),E(j.$$.fragment,l),z=n(l),w=i(l,"P",{"data-svelte-h":!0}),M(w)!=="svelte-2ua2mn"&&(w.textContent=ol),_=n(l),E(J.$$.fragment,l),N=n(l),y=i(l,"P",{"data-svelte-h":!0}),M(y)!=="svelte-uhvo1l"&&(y.innerHTML=il),q=n(l),h=i(l,"P",{"data-svelte-h":!0}),M(h)!=="svelte-191syp1"&&(h.textContent=rl),X=n(l),d=i(l,"OL",{"data-svelte-h":!0}),M(d)!=="svelte-1l66zjj"&&(d.innerHTML=cl),S=n(l),T=i(l,"P",{"data-svelte-h":!0}),M(T)!=="svelte-p704vx"&&(T.textContent=Ml),Y=n(l),E(U.$$.fragment,l),F=n(l),r=i(l,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),al(r).forEach(s),V=n(l),f=i(l,"P",{"data-svelte-h":!0}),M(f)!=="svelte-uhgvnk"&&(f.textContent=ul),H=n(l),E(I.$$.fragment,l),L=n(l),b=i(l,"P",{"data-svelte-h":!0}),M(b)!=="svelte-1nvvviw"&&(b.textContent=jl),K=n(l),E(g.$$.fragment,l),P=n(l),R=i(l,"P",{"data-svelte-h":!0}),M(R)!=="svelte-hgd0jk"&&(R.textContent=wl),O=n(l),c=i(l,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),al(c).forEach(s),ll=n(l),A=i(l,"P",{"data-svelte-h":!0}),M(A)!=="svelte-n2izi1"&&(A.innerHTML=yl),el=n(l),k=i(l,"P",{"data-svelte-h":!0}),M(k)!=="svelte-17mu0rx"&&(k.innerHTML=hl),sl=n(l),v=i(l,"P",{}),al(v).forEach(s),this.h()},h(){p(m,"name","hf:doc:metadata"),p(m,"content",El),dl(r.src,ml="https://course-demos-Chatbot-Demo.hf.space")||p(r,"src",ml),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"),dl(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){Al(document.head,m),t(l,x,e),t(l,Z,e),t(l,W,e),Q(u,l,e),t(l,$,e),Q(j,l,e),t(l,z,e),t(l,w,e),t(l,_,e),Q(J,l,e),t(l,N,e),t(l,y,e),t(l,q,e),t(l,h,e),t(l,X,e),t(l,d,e),t(l,S,e),t(l,T,e),t(l,Y,e),Q(U,l,e),t(l,F,e),t(l,r,e),t(l,V,e),t(l,f,e),t(l,H,e),Q(I,l,e),t(l,L,e),t(l,b,e),t(l,K,e),Q(g,l,e),t(l,P,e),t(l,R,e),t(l,O,e),t(l,c,e),t(l,ll,e),t(l,A,e),t(l,el,e),t(l,k,e),t(l,sl,e),t(l,v,e),tl=!0},p:fl,i(l){tl||(B(u.$$.fragment,l),B(j.$$.fragment,l),B(J.$$.fragment,l),B(U.$$.fragment,l),B(I.$$.fragment,l),B(g.$$.fragment,l),tl=!0)},o(l){D(u.$$.fragment,l),D(j.$$.fragment,l),D(J.$$.fragment,l),D(U.$$.fragment,l),D(I.$$.fragment,l),D(g.$$.fragment,l),tl=!1},d(l){l&&(s(x),s(Z),s(W),s($),s(z),s(w),s(_),s(N),s(y),s(q),s(h),s(X),s(d),s(S),s(T),s(Y),s(F),s(r),s(V),s(f),s(H),s(L),s(b),s(K),s(P),s(R),s(O),s(c),s(ll),s(A),s(el),s(k),s(sl),s(v)),s(m),G(u,l),G(j,l),G(J,l),G(U,l),G(I,l),G(g,l)}}}const El='{"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 Ql(pl){return Il(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class xl extends bl{constructor(m){super(),gl(this,m,Ql,Cl,Ul,{})}}export{xl as component};
