import{s as st,f as Ce,n as at,o as nt}from"../chunks/scheduler.37c15a92.js";import{S as ot,i as pt,g as o,s as a,r as w,A as it,h as p,f as l,c as n,j as K,u as y,x as r,k as i,y as rt,a as s,v as f,d as J,t as h,w as M}from"../chunks/index.2bf4358c.js";import{C as z}from"../chunks/CodeBlock.4f5fc1ad.js";import{C as mt}from"../chunks/CourseFloatingBanner.06521e8b.js";import{H as lt}from"../chunks/Heading.8ada512a.js";function ct(Ze){let d,D,F,O,b,ee,g,te,T,Qe="Давайте начнем с установки Gradio! Поскольку это пакет для Python, просто выполните:",le,j,He="<code>$ pip install gradio</code>",se,x,_e=`Вы можете запускать Gradio где угодно, будь то ваша любимая IDE Python, Jupyter-блокнот или даже Google Colab 🤯!
Так что установите Gradio везде, где вы используете Python!`,ae,U,Ve="Давайте начнем с простого примера “Hello World”, чтобы познакомиться с синтаксисом Gradio:",ne,G,oe,I,We="Давайте пройдемся по приведенному выше коду:",pe,k,Re="<li>Сначала мы определяем функцию <code>greet()</code>. В данном случае это простая функция, которая добавляет “Hello” перед вашим именем, но это может быть <em>любая</em> функция Python в целом. Например, в приложениях машинного обучения эта функция будет <em>вызывать модель для прогнозирования</em> на входных данных и возвращать вывод.</li> <li>Затем мы создаем интерфейс Gradio <code>Interface</code> с тремя аргументами, <code>fn</code>, <code>inputs</code> и <code>outputs</code>. Эти аргументы определяют функцию прогнозирования, а также <em>тип</em> входных и выходных компонентов, которые мы хотим получить. В нашем случае оба компонента представляют собой простые текстовые поля.</li> <li>Затем мы вызываем метод <code>launch()</code> для созданного нами <code>Interface</code>.</li>",ie,v,Xe='Если вы запустите этот код, нижеприведенный интерфейс автоматически появится в блокноте Jupyter/Colab или откроется в браузере на <strong><a href="http://localhost:7860/" rel="nofollow">http://localhost:7860</a></strong> при запуске из скрипта.',re,m,Pe,me,$,qe="Попробуйте использовать этот GUI прямо сейчас с собственным именем или другими данными!",ce,B,Ee=`Вы заметите, что в этом GUI Gradio автоматически определил имя входного параметра (<code>name</code>)
и применил его в качестве метки поверх текстового поля. Что если вы захотите изменить это?
Или если вы хотите настроить текстовое поле каким-то другим способом? В этом случае вы можете
инстанцировать объект класса, представляющий компонент ввода.`,ue,C,Se="Посмотрите на пример ниже:",de,Z,we,c,Ye,ye,Q,Le=`Здесь мы создали текстовое поле ввода с меткой, заполнителем и заданным количеством строк.
То же самое можно сделать и для выходного текстового поля, но мы пока что остановимся на этом.`,fe,H,Ne=`Мы увидели, что с помощью всего нескольких строк кода Gradio позволяет создать простой интерфейс вокруг любой функции
с любыми входами и выходами. В этом разделе мы начали с
простого текстового поля, но в следующих разделах мы рассмотрим другие виды входов и выходов. Теперь давайте рассмотрим применение некоторого NLP в приложении Gradio.`,Je,_,he,V,ze="Теперь давайте рассмотрим простой интерфейс, который позволит продемонстрировать демо модели <strong>генерации текста (text-generation)</strong>, такой как GPT-2.",Me,W,Fe=`Мы загрузим нашу модель с помощью функции <code>pipeline()</code> из 🤗 Transformers.
Если вам нужно быстро освежить в памяти материал, вы можете вернуться к <a href="../chapter1/3#text-generation">этому разделу в Главе 1</a>.`,be,R,Ae="Сначала мы определяем функцию прогнозирования, которая принимает текстовую подсказку (text prompt) и возвращает ее завершение текста:",ge,X,Te,P,Ke="Эта функция завершает введенные вами подсказки, и вы можете запустить ее с вашими собственными подсказками, чтобы посмотреть, как она работает. Вот пример (вы можете получить другое завершение):",je,q,xe,E,Ue,S,De="Теперь, когда у нас есть функция для генерации прогнозов, мы можем создать и запустить <code>Interface</code> таким же образом, как мы делали это ранее:",Ge,Y,Ie,L,Oe="Вот и все! Теперь вы можете использовать этот интерфейс для генерации текста с помощью модели GPT-2, как показано ниже 🤯.",ke,u,et,ve,N,tt="Продолжайте читать, чтобы узнать, как создавать другие виды демо с помощью Gradio!",$e,A,Be;return b=new lt({props:{title:"Создание вашего первого демо",local:"building-your-first-demo",headingTag:"h1"}}),g=new mt({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/section2.ipynb"},{label:"Aws Studio",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/en/chapter9/section2.ipynb"}]}}),G=new z({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQSUwQWRlZiUyMGdyZWV0KG5hbWUpJTNBJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwJTIySGVsbG8lMjAlMjIlMjAlMkIlMjBuYW1lJTBBJTBBJTBBZGVtbyUyMCUzRCUyMGdyLkludGVyZmFjZShmbiUzRGdyZWV0JTJDJTIwaW5wdXRzJTNEJTIydGV4dCUyMiUyQyUyMG91dHB1dHMlM0QlMjJ0ZXh0JTIyKSUwQSUwQWRlbW8ubGF1bmNoKCk=",highlighted:`<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_">greet</span>(<span class="hljs-params">name</span>):
    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;Hello &quot;</span> + name


demo = gr.Interface(fn=greet, inputs=<span class="hljs-string">&quot;text&quot;</span>, outputs=<span class="hljs-string">&quot;text&quot;</span>)

demo.launch()`,wrap:!1}}),Z=new z({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQSUwQWRlZiUyMGdyZWV0KG5hbWUpJTNBJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwJTIySGVsbG8lMjAlMjIlMjAlMkIlMjBuYW1lJTBBJTBBJTBBJTIzJTIwJUQwJTlDJUQxJThCJTIwJUQwJUI4JUQwJUJEJUQxJTgxJUQxJTgyJUQwJUIwJUQwJUJEJUQxJTg2JUQwJUI4JUQxJTgwJUQxJTgzJUQwJUI1JUQwJUJDJTIwJUQwJUJBJUQwJUJCJUQwJUIwJUQxJTgxJUQxJTgxJTIwVGV4dGJveCUwQXRleHRib3glMjAlM0QlMjBnci5UZXh0Ym94KGxhYmVsJTNEJTIyVHlwZSUyMHlvdXIlMjBuYW1lJTIwaGVyZSUzQSUyMiUyQyUyMHBsYWNlaG9sZGVyJTNEJTIySm9obiUyMERvZSUyMiUyQyUyMGxpbmVzJTNEMiklMEElMEFnci5JbnRlcmZhY2UoZm4lM0RncmVldCUyQyUyMGlucHV0cyUzRHRleHRib3glMkMlMjBvdXRwdXRzJTNEJTIydGV4dCUyMikubGF1bmNoKCk=",highlighted:`<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_">greet</span>(<span class="hljs-params">name</span>):
    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;Hello &quot;</span> + name


<span class="hljs-comment"># Мы инстанцируем класс Textbox</span>
textbox = gr.Textbox(label=<span class="hljs-string">&quot;Type your name here:&quot;</span>, placeholder=<span class="hljs-string">&quot;John Doe&quot;</span>, lines=<span class="hljs-number">2</span>)

gr.Interface(fn=greet, inputs=textbox, outputs=<span class="hljs-string">&quot;text&quot;</span>).launch()`,wrap:!1}}),_=new lt({props:{title:"🤖 Добавление прогнозов модели",local:"including-model-predictions",headingTag:"h2"}}),X=new z({props:{code:"ZnJvbSUyMHRyYW5zZm9ybWVycyUyMGltcG9ydCUyMHBpcGVsaW5lJTBBJTBBbW9kZWwlMjAlM0QlMjBwaXBlbGluZSglMjJ0ZXh0LWdlbmVyYXRpb24lMjIpJTBBJTBBJTBBZGVmJTIwcHJlZGljdChwcm9tcHQpJTNBJTBBJTIwJTIwJTIwJTIwY29tcGxldGlvbiUyMCUzRCUyMG1vZGVsKHByb21wdCklNUIwJTVEJTVCJTIyZ2VuZXJhdGVkX3RleHQlMjIlNUQlMEElMjAlMjAlMjAlMjByZXR1cm4lMjBjb21wbGV0aW9u",highlighted:`<span class="hljs-keyword">from</span> transformers <span class="hljs-keyword">import</span> pipeline

model = pipeline(<span class="hljs-string">&quot;text-generation&quot;</span>)


<span class="hljs-keyword">def</span> <span class="hljs-title function_">predict</span>(<span class="hljs-params">prompt</span>):
    completion = model(prompt)[<span class="hljs-number">0</span>][<span class="hljs-string">&quot;generated_text&quot;</span>]
    <span class="hljs-keyword">return</span> completion`,wrap:!1}}),q=new z({props:{code:"cHJlZGljdCglMjJNeSUyMGZhdm9yaXRlJTIwcHJvZ3JhbW1pbmclMjBsYW5ndWFnZSUyMGlzJTIyKQ==",highlighted:'<span class="hljs-function"><span class="hljs-title">predict</span><span class="hljs-params">(<span class="hljs-string">&quot;My favorite programming language is&quot;</span>)</span></span>',wrap:!1}}),E=new z({props:{code:"JTNFJTNFJTIwTXklMjBmYXZvcml0ZSUyMHByb2dyYW1taW5nJTIwbGFuZ3VhZ2UlMjBpcyUyMEhhc2tlbGwuJTIwSSUyMHJlYWxseSUyMGVuam95ZWQlMjB0aGUlMjBIYXNrZWxsJTIwbGFuZ3VhZ2UlMkMlMjBidXQlMjBpdCUyMGRvZXNuJ3QlMjBoYXZlJTIwYWxsJTIwdGhlJTIwZmVhdHVyZXMlMjB0aGF0JTIwY2FuJTIwYmUlMjBhcHBsaWVkJTIwdG8lMjBhbnklMjBvdGhlciUyMGxhbmd1YWdlLiUyMEZvciUyMGV4YW1wbGUlMkMlMjBhbGwlMjBpdCUyMGRvZXMlMjBpcyUyMGNvbXBpbGUlMjB0byUyMGElMjBieXRlJTIwYXJyYXku",highlighted:'&gt;&gt; My favorite programming language <span class="hljs-keyword">is</span> Haskell. I really enjoyed <span class="hljs-keyword">the</span> Haskell language, <span class="hljs-keyword">but</span> <span class="hljs-keyword">it</span> doesn&#x27;t have all <span class="hljs-keyword">the</span> features <span class="hljs-keyword">that</span> can be applied <span class="hljs-keyword">to</span> any other language. For example, all <span class="hljs-keyword">it</span> <span class="hljs-keyword">does</span> <span class="hljs-keyword">is</span> compile <span class="hljs-keyword">to</span> a byte array.',wrap:!1}}),Y=new z({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQWdyLkludGVyZmFjZShmbiUzRHByZWRpY3QlMkMlMjBpbnB1dHMlM0QlMjJ0ZXh0JTIyJTJDJTIwb3V0cHV0cyUzRCUyMnRleHQlMjIpLmxhdW5jaCgp",highlighted:`<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr

gr.Interface(fn=predict, inputs=<span class="hljs-string">&quot;text&quot;</span>, outputs=<span class="hljs-string">&quot;text&quot;</span>).launch()`,wrap:!1}}),{c(){d=o("meta"),D=a(),F=o("p"),O=a(),w(b.$$.fragment),ee=a(),w(g.$$.fragment),te=a(),T=o("p"),T.textContent=Qe,le=a(),j=o("p"),j.innerHTML=He,se=a(),x=o("p"),x.textContent=_e,ae=a(),U=o("p"),U.textContent=Ve,ne=a(),w(G.$$.fragment),oe=a(),I=o("p"),I.textContent=We,pe=a(),k=o("ul"),k.innerHTML=Re,ie=a(),v=o("p"),v.innerHTML=Xe,re=a(),m=o("iframe"),me=a(),$=o("p"),$.textContent=qe,ce=a(),B=o("p"),B.innerHTML=Ee,ue=a(),C=o("p"),C.textContent=Se,de=a(),w(Z.$$.fragment),we=a(),c=o("iframe"),ye=a(),Q=o("p"),Q.textContent=Le,fe=a(),H=o("p"),H.textContent=Ne,Je=a(),w(_.$$.fragment),he=a(),V=o("p"),V.innerHTML=ze,Me=a(),W=o("p"),W.innerHTML=Fe,be=a(),R=o("p"),R.textContent=Ae,ge=a(),w(X.$$.fragment),Te=a(),P=o("p"),P.textContent=Ke,je=a(),w(q.$$.fragment),xe=a(),w(E.$$.fragment),Ue=a(),S=o("p"),S.innerHTML=De,Ge=a(),w(Y.$$.fragment),Ie=a(),L=o("p"),L.textContent=Oe,ke=a(),u=o("iframe"),ve=a(),N=o("p"),N.textContent=tt,$e=a(),A=o("p"),this.h()},l(e){const t=it("svelte-u9bgzb",document.head);d=p(t,"META",{name:!0,content:!0}),t.forEach(l),D=n(e),F=p(e,"P",{}),K(F).forEach(l),O=n(e),y(b.$$.fragment,e),ee=n(e),y(g.$$.fragment,e),te=n(e),T=p(e,"P",{"data-svelte-h":!0}),r(T)!=="svelte-10kx1vv"&&(T.textContent=Qe),le=n(e),j=p(e,"P",{"data-svelte-h":!0}),r(j)!=="svelte-sv8g3f"&&(j.innerHTML=He),se=n(e),x=p(e,"P",{"data-svelte-h":!0}),r(x)!=="svelte-1jwkvk7"&&(x.textContent=_e),ae=n(e),U=p(e,"P",{"data-svelte-h":!0}),r(U)!=="svelte-14u676"&&(U.textContent=Ve),ne=n(e),y(G.$$.fragment,e),oe=n(e),I=p(e,"P",{"data-svelte-h":!0}),r(I)!=="svelte-j5kikz"&&(I.textContent=We),pe=n(e),k=p(e,"UL",{"data-svelte-h":!0}),r(k)!=="svelte-1asstol"&&(k.innerHTML=Re),ie=n(e),v=p(e,"P",{"data-svelte-h":!0}),r(v)!=="svelte-1lwh1fi"&&(v.innerHTML=Xe),re=n(e),m=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),K(m).forEach(l),me=n(e),$=p(e,"P",{"data-svelte-h":!0}),r($)!=="svelte-16n8sk7"&&($.textContent=qe),ce=n(e),B=p(e,"P",{"data-svelte-h":!0}),r(B)!=="svelte-yamvfk"&&(B.innerHTML=Ee),ue=n(e),C=p(e,"P",{"data-svelte-h":!0}),r(C)!=="svelte-29t5h2"&&(C.textContent=Se),de=n(e),y(Z.$$.fragment,e),we=n(e),c=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),K(c).forEach(l),ye=n(e),Q=p(e,"P",{"data-svelte-h":!0}),r(Q)!=="svelte-sx5a6l"&&(Q.textContent=Le),fe=n(e),H=p(e,"P",{"data-svelte-h":!0}),r(H)!=="svelte-1bpoqj8"&&(H.textContent=Ne),Je=n(e),y(_.$$.fragment,e),he=n(e),V=p(e,"P",{"data-svelte-h":!0}),r(V)!=="svelte-gh2gw6"&&(V.innerHTML=ze),Me=n(e),W=p(e,"P",{"data-svelte-h":!0}),r(W)!=="svelte-14h2n7w"&&(W.innerHTML=Fe),be=n(e),R=p(e,"P",{"data-svelte-h":!0}),r(R)!=="svelte-qhxtnw"&&(R.textContent=Ae),ge=n(e),y(X.$$.fragment,e),Te=n(e),P=p(e,"P",{"data-svelte-h":!0}),r(P)!=="svelte-1umr46d"&&(P.textContent=Ke),je=n(e),y(q.$$.fragment,e),xe=n(e),y(E.$$.fragment,e),Ue=n(e),S=p(e,"P",{"data-svelte-h":!0}),r(S)!=="svelte-faqskh"&&(S.innerHTML=De),Ge=n(e),y(Y.$$.fragment,e),Ie=n(e),L=p(e,"P",{"data-svelte-h":!0}),r(L)!=="svelte-mewgle"&&(L.textContent=Oe),ke=n(e),u=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),K(u).forEach(l),ve=n(e),N=p(e,"P",{"data-svelte-h":!0}),r(N)!=="svelte-14lhtp2"&&(N.textContent=tt),$e=n(e),A=p(e,"P",{}),K(A).forEach(l),this.h()},h(){i(d,"name","hf:doc:metadata"),i(d,"content",ut),Ce(m.src,Pe="https://course-demos-hello-world.hf.space")||i(m,"src",Pe),i(m,"frameborder","0"),i(m,"height","250"),i(m,"title","Gradio app"),i(m,"class","container p-0 flex-grow space-iframe"),i(m,"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(m,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),Ce(c.src,Ye="https://course-demos-hello-world-custom.hf.space")||i(c,"src",Ye),i(c,"frameborder","0"),i(c,"height","300"),i(c,"title","Gradio app"),i(c,"class","container p-0 flex-grow space-iframe"),i(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"),i(c,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),Ce(u.src,et="https://course-demos-gpt-2.hf.space")||i(u,"src",et),i(u,"frameborder","0"),i(u,"height","300"),i(u,"title","Gradio app"),i(u,"class","container p-0 flex-grow space-iframe"),i(u,"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(u,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads")},m(e,t){rt(document.head,d),s(e,D,t),s(e,F,t),s(e,O,t),f(b,e,t),s(e,ee,t),f(g,e,t),s(e,te,t),s(e,T,t),s(e,le,t),s(e,j,t),s(e,se,t),s(e,x,t),s(e,ae,t),s(e,U,t),s(e,ne,t),f(G,e,t),s(e,oe,t),s(e,I,t),s(e,pe,t),s(e,k,t),s(e,ie,t),s(e,v,t),s(e,re,t),s(e,m,t),s(e,me,t),s(e,$,t),s(e,ce,t),s(e,B,t),s(e,ue,t),s(e,C,t),s(e,de,t),f(Z,e,t),s(e,we,t),s(e,c,t),s(e,ye,t),s(e,Q,t),s(e,fe,t),s(e,H,t),s(e,Je,t),f(_,e,t),s(e,he,t),s(e,V,t),s(e,Me,t),s(e,W,t),s(e,be,t),s(e,R,t),s(e,ge,t),f(X,e,t),s(e,Te,t),s(e,P,t),s(e,je,t),f(q,e,t),s(e,xe,t),f(E,e,t),s(e,Ue,t),s(e,S,t),s(e,Ge,t),f(Y,e,t),s(e,Ie,t),s(e,L,t),s(e,ke,t),s(e,u,t),s(e,ve,t),s(e,N,t),s(e,$e,t),s(e,A,t),Be=!0},p:at,i(e){Be||(J(b.$$.fragment,e),J(g.$$.fragment,e),J(G.$$.fragment,e),J(Z.$$.fragment,e),J(_.$$.fragment,e),J(X.$$.fragment,e),J(q.$$.fragment,e),J(E.$$.fragment,e),J(Y.$$.fragment,e),Be=!0)},o(e){h(b.$$.fragment,e),h(g.$$.fragment,e),h(G.$$.fragment,e),h(Z.$$.fragment,e),h(_.$$.fragment,e),h(X.$$.fragment,e),h(q.$$.fragment,e),h(E.$$.fragment,e),h(Y.$$.fragment,e),Be=!1},d(e){e&&(l(D),l(F),l(O),l(ee),l(te),l(T),l(le),l(j),l(se),l(x),l(ae),l(U),l(ne),l(oe),l(I),l(pe),l(k),l(ie),l(v),l(re),l(m),l(me),l($),l(ce),l(B),l(ue),l(C),l(de),l(we),l(c),l(ye),l(Q),l(fe),l(H),l(Je),l(he),l(V),l(Me),l(W),l(be),l(R),l(ge),l(Te),l(P),l(je),l(xe),l(Ue),l(S),l(Ge),l(Ie),l(L),l(ke),l(u),l(ve),l(N),l($e),l(A)),l(d),M(b,e),M(g,e),M(G,e),M(Z,e),M(_,e),M(X,e),M(q,e),M(E,e),M(Y,e)}}}const ut='{"title":"Создание вашего первого демо","local":"building-your-first-demo","sections":[{"title":"🤖 Добавление прогнозов модели","local":"including-model-predictions","sections":[],"depth":2}],"depth":1}';function dt(Ze){return nt(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Mt extends ot{constructor(d){super(),pt(this,d,dt,ct,st,{})}}export{Mt as component};
