course/pr_1069/ru/_app/immutable/nodes/70.bc8dc04e.js

import{s as nt,f as Qe,n as pt,o as ot}from"../chunks/scheduler.37c15a92.js";import{S as it,i as rt,g as p,s as a,r as d,A as mt,h as o,f as l,c as n,j as D,u as w,x as r,k as i,y as ct,a as s,v as f,d as y,t as J,w as h}from"../chunks/index.2bf4358c.js";import{C as F}from"../chunks/CodeBlock.4e987730.js";import{C as ut}from"../chunks/CourseFloatingBanner.9ff4c771.js";import{H as at,E as dt}from"../chunks/getInferenceSnippets.24b50994.js";function wt(He){let M,O,A,ee,g,te,b,le,T,_e="Давайте начнем с установки Gradio! Поскольку это пакет для Python, просто выполните:",se,x,Ve="<code>$ pip install gradio</code>",ae,j,We=`Вы можете запускать Gradio где угодно, будь то ваша любимая IDE Python, Jupyter-блокнот или даже Google Colab 🤯!
Так что установите Gradio везде, где вы используете Python!`,ne,U,Re="Давайте начнем с простого примера “Hello World”, чтобы познакомиться с синтаксисом Gradio:",pe,$,oe,G,Xe="Давайте пройдемся по приведенному выше коду:",ie,I,Pe="<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>",re,k,Ee='Если вы запустите этот код, нижеприведенный интерфейс автоматически появится в блокноте Jupyter/Colab или откроется в браузере на <strong><a href="http://localhost:7860/" rel="nofollow">http://localhost:7860</a></strong> при запуске из скрипта.',me,m,qe,ce,v,Se="Попробуйте использовать этот GUI прямо сейчас с собственным именем или другими данными!",ue,B,Ye=`Вы заметите, что в этом GUI Gradio автоматически определил имя входного параметра (<code>name</code>)
и применил его в качестве метки поверх текстового поля. Что если вы захотите изменить это?
Или если вы хотите настроить текстовое поле каким-то другим способом? В этом случае вы можете
инстанцировать объект класса, представляющий компонент ввода.`,de,C,Le="Посмотрите на пример ниже:",we,Z,fe,c,Ne,ye,Q,ze=`Здесь мы создали текстовое поле ввода с меткой, заполнителем и заданным количеством строк.
То же самое можно сделать и для выходного текстового поля, но мы пока что остановимся на этом.`,Je,H,Fe=`Мы увидели, что с помощью всего нескольких строк кода Gradio позволяет создать простой интерфейс вокруг любой функции
с любыми входами и выходами. В этом разделе мы начали с
простого текстового поля, но в следующих разделах мы рассмотрим другие виды входов и выходов. Теперь давайте рассмотрим применение некоторого NLP в приложении Gradio.`,he,_,Me,V,Ae="Теперь давайте рассмотрим простой интерфейс, который позволит продемонстрировать демо модели <strong>генерации текста (text-generation)</strong>, такой как GPT-2.",ge,W,Ke=`Мы загрузим нашу модель с помощью функции <code>pipeline()</code> из 🤗 Transformers.
Если вам нужно быстро освежить в памяти материал, вы можете вернуться к <a href="../chapter1/3#text-generation">этому разделу в Главе 1</a>.`,be,R,De="Сначала мы определяем функцию прогнозирования, которая принимает текстовую подсказку (text prompt) и возвращает ее завершение текста:",Te,X,xe,P,Oe="Эта функция завершает введенные вами подсказки, и вы можете запустить ее с вашими собственными подсказками, чтобы посмотреть, как она работает. Вот пример (вы можете получить другое завершение):",je,E,Ue,q,$e,S,et="Теперь, когда у нас есть функция для генерации прогнозов, мы можем создать и запустить <code>Interface</code> таким же образом, как мы делали это ранее:",Ge,Y,Ie,L,tt="Вот и все! Теперь вы можете использовать этот интерфейс для генерации текста с помощью модели GPT-2, как показано ниже 🤯.",ke,u,lt,ve,N,st="Продолжайте читать, чтобы узнать, как создавать другие виды демо с помощью Gradio!",Be,z,Ce,K,Ze;return g=new at({props:{title:"Создание вашего первого демо",local:"building-your-first-demo",headingTag:"h1"}}),b=new ut({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"}]}}),$=new F({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 F({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 at({props:{title:"🤖 Добавление прогнозов модели",local:"including-model-predictions",headingTag:"h2"}}),X=new F({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}}),E=new F({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}}),q=new F({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 F({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}}),z=new dt({props:{source:"https://github.com/huggingface/course/blob/main/chapters/ru/chapter9/2.mdx"}}),{c(){M=p("meta"),O=a(),A=p("p"),ee=a(),d(g.$$.fragment),te=a(),d(b.$$.fragment),le=a(),T=p("p"),T.textContent=_e,se=a(),x=p("p"),x.innerHTML=Ve,ae=a(),j=p("p"),j.textContent=We,ne=a(),U=p("p"),U.textContent=Re,pe=a(),d($.$$.fragment),oe=a(),G=p("p"),G.textContent=Xe,ie=a(),I=p("ul"),I.innerHTML=Pe,re=a(),k=p("p"),k.innerHTML=Ee,me=a(),m=p("iframe"),ce=a(),v=p("p"),v.textContent=Se,ue=a(),B=p("p"),B.innerHTML=Ye,de=a(),C=p("p"),C.textContent=Le,we=a(),d(Z.$$.fragment),fe=a(),c=p("iframe"),ye=a(),Q=p("p"),Q.textContent=ze,Je=a(),H=p("p"),H.textContent=Fe,he=a(),d(_.$$.fragment),Me=a(),V=p("p"),V.innerHTML=Ae,ge=a(),W=p("p"),W.innerHTML=Ke,be=a(),R=p("p"),R.textContent=De,Te=a(),d(X.$$.fragment),xe=a(),P=p("p"),P.textContent=Oe,je=a(),d(E.$$.fragment),Ue=a(),d(q.$$.fragment),$e=a(),S=p("p"),S.innerHTML=et,Ge=a(),d(Y.$$.fragment),Ie=a(),L=p("p"),L.textContent=tt,ke=a(),u=p("iframe"),ve=a(),N=p("p"),N.textContent=st,Be=a(),d(z.$$.fragment),Ce=a(),K=p("p"),this.h()},l(e){const t=mt("svelte-u9bgzb",document.head);M=o(t,"META",{name:!0,content:!0}),t.forEach(l),O=n(e),A=o(e,"P",{}),D(A).forEach(l),ee=n(e),w(g.$$.fragment,e),te=n(e),w(b.$$.fragment,e),le=n(e),T=o(e,"P",{"data-svelte-h":!0}),r(T)!=="svelte-10kx1vv"&&(T.textContent=_e),se=n(e),x=o(e,"P",{"data-svelte-h":!0}),r(x)!=="svelte-sv8g3f"&&(x.innerHTML=Ve),ae=n(e),j=o(e,"P",{"data-svelte-h":!0}),r(j)!=="svelte-1jwkvk7"&&(j.textContent=We),ne=n(e),U=o(e,"P",{"data-svelte-h":!0}),r(U)!=="svelte-14u676"&&(U.textContent=Re),pe=n(e),w($.$$.fragment,e),oe=n(e),G=o(e,"P",{"data-svelte-h":!0}),r(G)!=="svelte-j5kikz"&&(G.textContent=Xe),ie=n(e),I=o(e,"UL",{"data-svelte-h":!0}),r(I)!=="svelte-1asstol"&&(I.innerHTML=Pe),re=n(e),k=o(e,"P",{"data-svelte-h":!0}),r(k)!=="svelte-1lwh1fi"&&(k.innerHTML=Ee),me=n(e),m=o(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),D(m).forEach(l),ce=n(e),v=o(e,"P",{"data-svelte-h":!0}),r(v)!=="svelte-16n8sk7"&&(v.textContent=Se),ue=n(e),B=o(e,"P",{"data-svelte-h":!0}),r(B)!=="svelte-yamvfk"&&(B.innerHTML=Ye),de=n(e),C=o(e,"P",{"data-svelte-h":!0}),r(C)!=="svelte-29t5h2"&&(C.textContent=Le),we=n(e),w(Z.$$.fragment,e),fe=n(e),c=o(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),D(c).forEach(l),ye=n(e),Q=o(e,"P",{"data-svelte-h":!0}),r(Q)!=="svelte-sx5a6l"&&(Q.textContent=ze),Je=n(e),H=o(e,"P",{"data-svelte-h":!0}),r(H)!=="svelte-1bpoqj8"&&(H.textContent=Fe),he=n(e),w(_.$$.fragment,e),Me=n(e),V=o(e,"P",{"data-svelte-h":!0}),r(V)!=="svelte-gh2gw6"&&(V.innerHTML=Ae),ge=n(e),W=o(e,"P",{"data-svelte-h":!0}),r(W)!=="svelte-14h2n7w"&&(W.innerHTML=Ke),be=n(e),R=o(e,"P",{"data-svelte-h":!0}),r(R)!=="svelte-qhxtnw"&&(R.textContent=De),Te=n(e),w(X.$$.fragment,e),xe=n(e),P=o(e,"P",{"data-svelte-h":!0}),r(P)!=="svelte-1umr46d"&&(P.textContent=Oe),je=n(e),w(E.$$.fragment,e),Ue=n(e),w(q.$$.fragment,e),$e=n(e),S=o(e,"P",{"data-svelte-h":!0}),r(S)!=="svelte-faqskh"&&(S.innerHTML=et),Ge=n(e),w(Y.$$.fragment,e),Ie=n(e),L=o(e,"P",{"data-svelte-h":!0}),r(L)!=="svelte-mewgle"&&(L.textContent=tt),ke=n(e),u=o(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),D(u).forEach(l),ve=n(e),N=o(e,"P",{"data-svelte-h":!0}),r(N)!=="svelte-14lhtp2"&&(N.textContent=st),Be=n(e),w(z.$$.fragment,e),Ce=n(e),K=o(e,"P",{}),D(K).forEach(l),this.h()},h(){i(M,"name","hf:doc:metadata"),i(M,"content",ft),Qe(m.src,qe="https://course-demos-hello-world.hf.space")||i(m,"src",qe),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"),Qe(c.src,Ne="https://course-demos-hello-world-custom.hf.space")||i(c,"src",Ne),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"),Qe(u.src,lt="https://course-demos-gpt-2.hf.space")||i(u,"src",lt),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){ct(document.head,M),s(e,O,t),s(e,A,t),s(e,ee,t),f(g,e,t),s(e,te,t),f(b,e,t),s(e,le,t),s(e,T,t),s(e,se,t),s(e,x,t),s(e,ae,t),s(e,j,t),s(e,ne,t),s(e,U,t),s(e,pe,t),f($,e,t),s(e,oe,t),s(e,G,t),s(e,ie,t),s(e,I,t),s(e,re,t),s(e,k,t),s(e,me,t),s(e,m,t),s(e,ce,t),s(e,v,t),s(e,ue,t),s(e,B,t),s(e,de,t),s(e,C,t),s(e,we,t),f(Z,e,t),s(e,fe,t),s(e,c,t),s(e,ye,t),s(e,Q,t),s(e,Je,t),s(e,H,t),s(e,he,t),f(_,e,t),s(e,Me,t),s(e,V,t),s(e,ge,t),s(e,W,t),s(e,be,t),s(e,R,t),s(e,Te,t),f(X,e,t),s(e,xe,t),s(e,P,t),s(e,je,t),f(E,e,t),s(e,Ue,t),f(q,e,t),s(e,$e,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,Be,t),f(z,e,t),s(e,Ce,t),s(e,K,t),Ze=!0},p:pt,i(e){Ze||(y(g.$$.fragment,e),y(b.$$.fragment,e),y($.$$.fragment,e),y(Z.$$.fragment,e),y(_.$$.fragment,e),y(X.$$.fragment,e),y(E.$$.fragment,e),y(q.$$.fragment,e),y(Y.$$.fragment,e),y(z.$$.fragment,e),Ze=!0)},o(e){J(g.$$.fragment,e),J(b.$$.fragment,e),J($.$$.fragment,e),J(Z.$$.fragment,e),J(_.$$.fragment,e),J(X.$$.fragment,e),J(E.$$.fragment,e),J(q.$$.fragment,e),J(Y.$$.fragment,e),J(z.$$.fragment,e),Ze=!1},d(e){e&&(l(O),l(A),l(ee),l(te),l(le),l(T),l(se),l(x),l(ae),l(j),l(ne),l(U),l(pe),l(oe),l(G),l(ie),l(I),l(re),l(k),l(me),l(m),l(ce),l(v),l(ue),l(B),l(de),l(C),l(we),l(fe),l(c),l(ye),l(Q),l(Je),l(H),l(he),l(Me),l(V),l(ge),l(W),l(be),l(R),l(Te),l(xe),l(P),l(je),l(Ue),l($e),l(S),l(Ge),l(Ie),l(L),l(ke),l(u),l(ve),l(N),l(Be),l(Ce),l(K)),l(M),h(g,e),h(b,e),h($,e),h(Z,e),h(_,e),h(X,e),h(E,e),h(q,e),h(Y,e),h(z,e)}}}const ft='{"title":"Создание вашего первого демо","local":"building-your-first-demo","sections":[{"title":"🤖 Добавление прогнозов модели","local":"including-model-predictions","sections":[],"depth":2}],"depth":1}';function yt(He){return ot(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Tt extends it{constructor(M){super(),rt(this,M,yt,wt,nt,{})}}export{Tt as component};