course/pr_1097/ru/_app/immutable/nodes/75.589dfd10.js

import{s as Hl,f as de,o as Xl}from"../chunks/scheduler.37c15a92.js";import{S as Wl,i as Vl,g as i,s as a,r,A as zl,h as p,f as t,c as o,j as re,u as M,x as c,k as n,y as Ll,a as s,v as y,d,t as w,w as u,m as Nl,n as Yl}from"../chunks/index.2bf4358c.js";import{T as ql}from"../chunks/Tip.d39f0823.js";import{C as we}from"../chunks/CodeBlock.4e987730.js";import{C as Fl}from"../chunks/CourseFloatingBanner.9ff4c771.js";import{H as Me,E as Dl}from"../chunks/getInferenceSnippets.caba54ef.js";function Kl(ue){let U;return{c(){U=Nl("🙋Если вы не знакомы с оператором `with` в Python, рекомендуем ознакомиться с отличным [руководством](https://realpython.com/python-with-statement/) от Real Python. Возвращайтесь сюда после его прочтения 🤗")},l(C){U=Yl(C,"🙋Если вы не знакомы с оператором `with` в Python, рекомендуем ознакомиться с отличным [руководством](https://realpython.com/python-with-statement/) от Real Python. Возвращайтесь сюда после его прочтения 🤗")},m(C,g){s(C,U,g)},d(C){C&&t(U)}}}function Pl(ue){let U,C,g,Ue,I,me,x,Je,k,cl="В предыдущих разделах мы изучили и создали демо, используя класс <code>Interface</code>. В этом разделе мы представим наш <strong>свеже разработанный</strong> низкоуровневый API под названием <code>gradio.Blocks</code>.",Te,B,rl="Итак, в чем разница между <code>Interface</code> и <code>Blocks</code>?",he,R,Ml="<li><p>⚡ <code>Interface</code>: высокоуровневый API, который позволяет создать полноценное демо машинного обучения, просто предоставив список входных и выходных данных.</p></li> <li><p>🧱 <code>Blocks</code>: низкоуровневый API, который позволяет вам полностью контролировать потоки данных и компоновку вашего приложения. Вы можете создавать очень сложные, многоступенчатые приложения, используя <code>Blocks</code> (как “строительные блоки”).</p></li>",je,G,Ce,Q,yl="Как мы видели в предыдущих разделах, класс <code>Interface</code> позволяет легко создавать полноценные демо машинного обучения с помощью всего нескольких строк кода. API <code>Interface</code> чрезвычайно прост в использовании, но ему не хватает гибкости, которую обеспечивает API <code>Blocks</code>. Например, вы можете захотеть:",be,$,dl="<li>Сгруппировать связанные демо в виде нескольких вкладок в одном веб-приложении</li> <li>Изменить макет вашего демо, например, указать, где расположены входные и выходные компоненты</li> <li>Многоступенчатые интерфейсы, в которых выход одной модели становится входом для следующей модели, или более гибкие потоки данных в целом</li> <li>Изменить свойства компонента (например, выбор в выпадающем списке) или его видимость на основе пользовательского ввода</li>",fe,A,wl="Ниже мы рассмотрим все эти понятия.",ge,E,Ie,v,ul="После того как вы установили Gradio, запустите приведенный ниже код в виде сценария на Python, блокнота Jupyter или блокнота Colab.",xe,Z,ke,m,Ul,Be,S,ml="В этом простом примере представлены 4 концепции, которые лежат в основе блоков:",Re,_,Jl="<li>Блоки позволяют создавать веб-приложения, сочетающие в себе разметку, HTML, кнопки и интерактивные компоненты, просто инстанцируя объекты на Python в контексте <code>with gradio.Blocks</code>.</li>",Ge,b,Qe,H,Tl="Порядок, в котором вы инстанцируете компоненты, имеет значение, поскольку каждый элемент отображается в веб-приложении в том порядке, в котором он был создан. (Более сложные макеты рассматриваются ниже)",$e,f,hl='<li><p>Вы можете определять обычные функции Python в любом месте вашего кода и запускать их с пользовательским вводом с помощью <code>Blocks</code>. В нашем примере мы используем простую функцию, которая “переворачивает” введенный текст, но вы можете написать любую функцию Python, от простого вычисления до обработки прогнозов модели машинного обучения.</p></li> <li><p>Вы можете назначить события для любого компонента <code>Blocks</code>. Это позволит запускать вашу функцию при нажатии на компонент, его изменении и т. д. Когда вы назначаете событие, вы передаете три параметра: <code>fn</code>: функция, которая должна быть вызвана, <code>inputs</code>: (список) входных компонентов, и <code>outputs</code>: (список) выходных компонентов, которые должны быть вызваны.</p> <p>В примере выше мы запускаем функцию <code>flip_text()</code>, когда значение в <code>Textbox</code> с названием <code>input</code> изменяется. Событие считывает значение в <code>input</code>, передает его в качестве именнованного параметра в <code>flip_text()</code>, которая затем возвращает значение, которое присваивается нашему второму <code>Textbox</code> с именем <code>output</code>.</p> <p>Список событий, которые поддерживает каждый компонент, можно найти в <a href="https://www.gradio.app/docs/" rel="nofollow">документации Gradio</a>.</p></li> <li><p>Блоки автоматически определяют, должен ли компонент быть интерактивным (принимать пользовательский ввод) или нет, основываясь на определенных вами триггерах событий. В нашем примере первый textbox является интерактивным, поскольку его значение используется функцией <code>flip_text()</code>. Второй textbox не является интерактивным, поскольку его значение никогда не используется в качестве входа. В некоторых случаях вы можете переопределить это, передав булево значение в параметр <code>interactive</code> компонента (например, <code>gr.Textbox(placeholder=&quot;Flip this text&quot;, interactive=True)</code>).</p></li>',Ae,X,Ee,W,jl="Как мы можем использовать <code>Blocks</code> для настройки макета нашего демо? По умолчанию <code>Blocks</code> отображает созданные вами компоненты вертикально в одной колонке. Вы можете изменить это, создав дополнительные колонки <code>с помощью gradio.Column():</code> или строки <code>с помощью gradio.Row():</code> и создав компоненты в этих контекстах.",ve,V,Cl='Вот что следует иметь в виду: все компоненты, созданные в <code>Column</code> (это также значение по умолчанию), будут располагаться вертикально. Любой компонент, созданный в <code>Row</code>, будет располагаться горизонтально, аналогично <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" rel="nofollow">модели flexbox в веб-разработке</a>.',Ze,z,bl="Наконец, вы можете создавать вкладки для демо с помощью контекстного менеджера <code>with gradio.Tabs()</code>. В этом контексте вы можете создать несколько вкладок, указав дочерние вкладки в <code>with gradio.TabItem(name_of_tab):</code> . Любой компонент, созданный внутри контекста <code>with gradio.TabItem(name_of_tab):</code>, отображается на этой вкладке.",Se,L,fl="Теперь давайте добавим функцию <code>flip_image()</code> в наше демо и добавим новую вкладку, которая будет переворачивать изображения. Ниже приведен пример с 2 вкладками, в котором также используется Row:",_e,N,He,J,gl,Xe,Y,Il="Вы заметите, что в этом примере мы также создали компонент <code>Button</code> на каждой вкладке и назначили событие click для каждой кнопки, что, собственно, и запускает функцию.",We,q,Ve,F,xl="Так же, как вы можете управлять макетом, <code>Blocks</code> дает вам тонкий контроль над тем, какие события вызывают вызовы функций. Каждый компонент и многие макеты имеют определенные события, которые они поддерживают.",ze,D,kl="Например, у компонента <code>Textbox</code> есть 2 события: <code>change()</code> (когда меняется значение внутри текстового поля) и <code>submit()</code> (когда пользователь нажимает клавишу ввода, будучи сфокусированным на текстовом поле). Более сложные компоненты могут иметь еще больше событий: например, компонент <code>Audio</code> также имеет отдельные события для воспроизведения аудиофайла, очистки, приостановки и так далее. О том, какие события поддерживает каждый компонент, читайте в документации.",Le,K,Bl="Вы можете прикрепить триггер события ни к одному, одному или нескольким из этих событий. Вы создаете триггер события, вызывая имя события на экземпляре компонента в виде функции - например, <code>textbox.change(...)</code> или <code>btn.click(...)</code>. Функция принимает три параметра, как говорилось выше:",Ne,P,Rl="<li><code>fn</code>: функция для выполнения</li> <li><code>inputs</code>: (список (list)) компонент(ов), значения которых должны быть переданы в качестве входных параметров функции. Значение каждого компонента по порядку сопоставляется с соответствующим параметром функции. Этот параметр может иметь значение None, если функция не принимает никаких параметров.</li> <li><code>outputs</code>: (список (list)) компонентов, значения которых должны быть обновлены на основе значений, возвращаемых функцией. Каждое возвращаемое значение устанавливает значение соответствующего компонента по порядку. Этот параметр может быть None, если функция ничего не возвращает.</li>",Ye,O,Gl="Вы даже можете сделать так, чтобы компонент ввода и компонент вывода были одним и тем же компонентом, как это сделано в данном примере, где используется модель GPT для дополнения текста:",qe,ee,Fe,T,Ql,De,le,Ke,te,$l="В некоторых случаях вам может понадобиться <em>многоступенчатое демо</em>, в котором вы повторно используете выход одной функции в качестве входа для следующей. Это очень легко сделать с помощью <code>Blocks</code>, так как вы можете использовать компонент в качестве входа для одного триггера события, но выхода для другого. Посмотрите на компонент text в примере ниже: его значение является результатом работы модели преобразования речи в текст, но также передается в модель анализа настроений:",Pe,se,Oe,h,Al,el,ae,ll,oe,El="До сих пор мы видели, как создавать события для обновления значения другого компонента. Но что делать, если вы хотите изменить другие свойства компонента, например видимость текстового поля или варианты выбора в группе радио кнопок? Вы можете сделать это, вернув метод класса компонента <code>update()</code> вместо обычного возвращаемого значения из вашей функции.",tl,ne,vl="Это легче всего проиллюстрировать на примере:",sl,ie,al,j,Zl,ol,pe,Sl='Мы только что изучили все основные концепции <code>Blocks</code>! Как и в случае с <code>Interfaces</code>, вы можете создавать классные демо, которыми можно поделиться, используя <code>share=True</code> в методе <code>launch()</code> или развернуть на <a href="https://huggingface.co/spaces" rel="nofollow">Hugging Face Spaces</a>.',nl,ce,il,ye,pl;return I=new Me({props:{title:"Введение в Gradio Blocks",local:"introduction-to-gradio-blocks",headingTag:"h1"}}),x=new Fl({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/section7.ipynb"},{label:"Aws Studio",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/en/chapter9/section7.ipynb"}]}}),G=new Me({props:{title:"Почему Blocks 🧱?",local:"why-blocks-",headingTag:"h3"}}),E=new Me({props:{title:"Создание простого демо с помощью блоков",local:"creating-a-simple-demo-using-blocks",headingTag:"h3"}}),Z=new we({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQSUwQWRlZiUyMGZsaXBfdGV4dCh4KSUzQSUwQSUyMCUyMCUyMCUyMHJldHVybiUyMHglNUIlM0ElM0EtMSU1RCUwQSUwQSUwQWRlbW8lMjAlM0QlMjBnci5CbG9ja3MoKSUwQSUwQXdpdGglMjBkZW1vJTNBJTBBJTIwJTIwJTIwJTIwZ3IuTWFya2Rvd24oJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIyJTIyJTIyJTBBJTIwJTIwJTIwJTIwJTIzJTIwRmxpcCUyMFRleHQhJTBBJTIwJTIwJTIwJTIwU3RhcnQlMjB0eXBpbmclMjBiZWxvdyUyMHRvJTIwc2VlJTIwdGhlJTIwb3V0cHV0LiUwQSUyMCUyMCUyMCUyMCUyMiUyMiUyMiUwQSUyMCUyMCUyMCUyMCklMEElMjAlMjAlMjAlMjBpbnB1dCUyMCUzRCUyMGdyLlRleHRib3gocGxhY2Vob2xkZXIlM0QlMjJGbGlwJTIwdGhpcyUyMHRleHQlMjIpJTBBJTIwJTIwJTIwJTIwb3V0cHV0JTIwJTNEJTIwZ3IuVGV4dGJveCgpJTBBJTBBJTIwJTIwJTIwJTIwaW5wdXQuY2hhbmdlKGZuJTNEZmxpcF90ZXh0JTJDJTIwaW5wdXRzJTNEaW5wdXQlMkMlMjBvdXRwdXRzJTNEb3V0cHV0KSUwQSUwQWRlbW8ubGF1bmNoKCk=",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_">flip_text</span>(<span class="hljs-params">x</span>):
    <span class="hljs-keyword">return</span> x[::-<span class="hljs-number">1</span>]


demo = gr.Blocks()

<span class="hljs-keyword">with</span> demo:
    gr.Markdown(
        <span class="hljs-string">&quot;&quot;&quot;
    # Flip Text!
    Start typing below to see the output.
    &quot;&quot;&quot;</span>
    )
    <span class="hljs-built_in">input</span> = gr.Textbox(placeholder=<span class="hljs-string">&quot;Flip this text&quot;</span>)
    output = gr.Textbox()

    <span class="hljs-built_in">input</span>.change(fn=flip_text, inputs=<span class="hljs-built_in">input</span>, outputs=output)

demo.launch()`,wrap:!1}}),b=new ql({props:{$$slots:{default:[Kl]},$$scope:{ctx:ue}}}),X=new Me({props:{title:"Настройка макета вашего демо",local:"customizing-the-layout-of-your-demo",headingTag:"h3"}}),N=new we({props:{code:"aW1wb3J0JTIwbnVtcHklMjBhcyUyMG5wJTBBaW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQWRlbW8lMjAlM0QlMjBnci5CbG9ja3MoKSUwQSUwQSUwQWRlZiUyMGZsaXBfdGV4dCh4KSUzQSUwQSUyMCUyMCUyMCUyMHJldHVybiUyMHglNUIlM0ElM0EtMSU1RCUwQSUwQSUwQWRlZiUyMGZsaXBfaW1hZ2UoeCklM0ElMEElMjAlMjAlMjAlMjByZXR1cm4lMjBucC5mbGlwbHIoeCklMEElMEElMEF3aXRoJTIwZGVtbyUzQSUwQSUyMCUyMCUyMCUyMGdyLk1hcmtkb3duKCUyMkZsaXAlMjB0ZXh0JTIwb3IlMjBpbWFnZSUyMGZpbGVzJTIwdXNpbmclMjB0aGlzJTIwZGVtby4lMjIpJTBBJTIwJTIwJTIwJTIwd2l0aCUyMGdyLlRhYnMoKSUzQSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHdpdGglMjBnci5UYWJJdGVtKCUyMkZsaXAlMjBUZXh0JTIyKSUzQSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHdpdGglMjBnci5Sb3coKSUzQSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHRleHRfaW5wdXQlMjAlM0QlMjBnci5UZXh0Ym94KCklMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjB0ZXh0X291dHB1dCUyMCUzRCUyMGdyLlRleHRib3goKSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHRleHRfYnV0dG9uJTIwJTNEJTIwZ3IuQnV0dG9uKCUyMkZsaXAlMjIpJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwd2l0aCUyMGdyLlRhYkl0ZW0oJTIyRmxpcCUyMEltYWdlJTIyKSUzQSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHdpdGglMjBnci5Sb3coKSUzQSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGltYWdlX2lucHV0JTIwJTNEJTIwZ3IuSW1hZ2UoKSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGltYWdlX291dHB1dCUyMCUzRCUyMGdyLkltYWdlKCklMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBpbWFnZV9idXR0b24lMjAlM0QlMjBnci5CdXR0b24oJTIyRmxpcCUyMiklMEElMEElMjAlMjAlMjAlMjB0ZXh0X2J1dHRvbi5jbGljayhmbGlwX3RleHQlMkMlMjBpbnB1dHMlM0R0ZXh0X2lucHV0JTJDJTIwb3V0cHV0cyUzRHRleHRfb3V0cHV0KSUwQSUyMCUyMCUyMCUyMGltYWdlX2J1dHRvbi5jbGljayhmbGlwX2ltYWdlJTJDJTIwaW5wdXRzJTNEaW1hZ2VfaW5wdXQlMkMlMjBvdXRwdXRzJTNEaW1hZ2Vfb3V0cHV0KSUwQSUwQWRlbW8ubGF1bmNoKCk=",highlighted:`<span class="hljs-keyword">import</span> numpy <span class="hljs-keyword">as</span> np
<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr

demo = gr.Blocks()


<span class="hljs-keyword">def</span> <span class="hljs-title function_">flip_text</span>(<span class="hljs-params">x</span>):
    <span class="hljs-keyword">return</span> x[::-<span class="hljs-number">1</span>]


<span class="hljs-keyword">def</span> <span class="hljs-title function_">flip_image</span>(<span class="hljs-params">x</span>):
    <span class="hljs-keyword">return</span> np.fliplr(x)


<span class="hljs-keyword">with</span> demo:
    gr.Markdown(<span class="hljs-string">&quot;Flip text or image files using this demo.&quot;</span>)
    <span class="hljs-keyword">with</span> gr.Tabs():
        <span class="hljs-keyword">with</span> gr.TabItem(<span class="hljs-string">&quot;Flip Text&quot;</span>):
            <span class="hljs-keyword">with</span> gr.Row():
                text_input = gr.Textbox()
                text_output = gr.Textbox()
            text_button = gr.Button(<span class="hljs-string">&quot;Flip&quot;</span>)
        <span class="hljs-keyword">with</span> gr.TabItem(<span class="hljs-string">&quot;Flip Image&quot;</span>):
            <span class="hljs-keyword">with</span> gr.Row():
                image_input = gr.Image()
                image_output = gr.Image()
            image_button = gr.Button(<span class="hljs-string">&quot;Flip&quot;</span>)

    text_button.click(flip_text, inputs=text_input, outputs=text_output)
    image_button.click(flip_image, inputs=image_input, outputs=image_output)

demo.launch()`,wrap:!1}}),q=new Me({props:{title:"Изучение событий и состояния",local:"exploring-events-and-state",headingTag:"h3"}}),ee=new we({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQWFwaSUyMCUzRCUyMGdyLkludGVyZmFjZS5sb2FkKCUyMmh1Z2dpbmdmYWNlJTJGRWxldXRoZXJBSSUyRmdwdC1qLTZCJTIyKSUwQSUwQSUwQWRlZiUyMGNvbXBsZXRlX3dpdGhfZ3B0KHRleHQpJTNBJTBBJTIwJTIwJTIwJTIwJTIzJTIwJUQwJTk4JUQxJTgxJUQwJUJGJUQwJUJFJUQwJUJCJUQxJThDJUQwJUI3JUQxJTgzJUQwJUI1JUQwJUJDJTIwJUQwJUJGJUQwJUJFJUQxJTgxJUQwJUJCJUQwJUI1JUQwJUI0JUQwJUJEJUQwJUI4JUQwJUI1JTIwNTAlMjAlRDElODElRDAlQjglRDAlQkMlRDAlQjIlRDAlQkUlRDAlQkIlRDAlQkUlRDAlQjIlMjAlRDElODIlRDAlQjUlRDAlQkElRDElODElRDElODIlRDAlQjAlMjAlRDAlQjIlMjAlRDAlQkElRDAlQjAlRDElODclRDAlQjUlRDElODElRDElODIlRDAlQjIlRDAlQjUlMjAlRDAlQkElRDAlQkUlRDAlQkQlRDElODIlRDAlQjUlRDAlQkElRDElODElRDElODIlRDAlQjAlMEElMjAlMjAlMjAlMjByZXR1cm4lMjB0ZXh0JTVCJTNBLTUwJTVEJTIwJTJCJTIwYXBpKHRleHQlNUItNTAlM0ElNUQpJTBBJTBBJTBBd2l0aCUyMGdyLkJsb2NrcygpJTIwYXMlMjBkZW1vJTNBJTBBJTIwJTIwJTIwJTIwdGV4dGJveCUyMCUzRCUyMGdyLlRleHRib3gocGxhY2Vob2xkZXIlM0QlMjJUeXBlJTIwaGVyZSUyMGFuZCUyMHByZXNzJTIwZW50ZXIuLi4lMjIlMkMlMjBsaW5lcyUzRDQpJTBBJTIwJTIwJTIwJTIwYnRuJTIwJTNEJTIwZ3IuQnV0dG9uKCUyMkdlbmVyYXRlJTIyKSUwQSUwQSUyMCUyMCUyMCUyMGJ0bi5jbGljayhjb21wbGV0ZV93aXRoX2dwdCUyQyUyMHRleHRib3glMkMlMjB0ZXh0Ym94KSUwQSUwQWRlbW8ubGF1bmNoKCk=",highlighted:`<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr

api = gr.Interface.load(<span class="hljs-string">&quot;huggingface/EleutherAI/gpt-j-6B&quot;</span>)


<span class="hljs-keyword">def</span> <span class="hljs-title function_">complete_with_gpt</span>(<span class="hljs-params">text</span>):
    <span class="hljs-comment"># Используем последние 50 символов текста в качестве контекста</span>
    <span class="hljs-keyword">return</span> text[:-<span class="hljs-number">50</span>] + api(text[-<span class="hljs-number">50</span>:])


<span class="hljs-keyword">with</span> gr.Blocks() <span class="hljs-keyword">as</span> demo:
    textbox = gr.Textbox(placeholder=<span class="hljs-string">&quot;Type here and press enter...&quot;</span>, lines=<span class="hljs-number">4</span>)
    btn = gr.Button(<span class="hljs-string">&quot;Generate&quot;</span>)

    btn.click(complete_with_gpt, textbox, textbox)

demo.launch()`,wrap:!1}}),le=new Me({props:{title:"Создание многоступенчатых демо",local:"creating-multi-step-demos",headingTag:"h3"}}),se=new we({props:{code:"ZnJvbSUyMHRyYW5zZm9ybWVycyUyMGltcG9ydCUyMHBpcGVsaW5lJTBBJTBBaW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQWFzciUyMCUzRCUyMHBpcGVsaW5lKCUyMmF1dG9tYXRpYy1zcGVlY2gtcmVjb2duaXRpb24lMjIlMkMlMjAlMjJmYWNlYm9vayUyRndhdjJ2ZWMyLWJhc2UtOTYwaCUyMiklMEFjbGFzc2lmaWVyJTIwJTNEJTIwcGlwZWxpbmUoJTIydGV4dC1jbGFzc2lmaWNhdGlvbiUyMiklMEElMEElMEFkZWYlMjBzcGVlY2hfdG9fdGV4dChzcGVlY2gpJTNBJTBBJTIwJTIwJTIwJTIwdGV4dCUyMCUzRCUyMGFzcihzcGVlY2gpJTVCJTIydGV4dCUyMiU1RCUwQSUyMCUyMCUyMCUyMHJldHVybiUyMHRleHQlMEElMEElMEFkZWYlMjB0ZXh0X3RvX3NlbnRpbWVudCh0ZXh0KSUzQSUwQSUyMCUyMCUyMCUyMHJldHVybiUyMGNsYXNzaWZpZXIodGV4dCklNUIwJTVEJTVCJTIybGFiZWwlMjIlNUQlMEElMEElMEFkZW1vJTIwJTNEJTIwZ3IuQmxvY2tzKCklMEElMEF3aXRoJTIwZGVtbyUzQSUwQSUyMCUyMCUyMCUyMGF1ZGlvX2ZpbGUlMjAlM0QlMjBnci5BdWRpbyh0eXBlJTNEJTIyZmlsZXBhdGglMjIpJTBBJTIwJTIwJTIwJTIwdGV4dCUyMCUzRCUyMGdyLlRleHRib3goKSUwQSUyMCUyMCUyMCUyMGxhYmVsJTIwJTNEJTIwZ3IuTGFiZWwoKSUwQSUwQSUyMCUyMCUyMCUyMGIxJTIwJTNEJTIwZ3IuQnV0dG9uKCUyMlJlY29nbml6ZSUyMFNwZWVjaCUyMiklMEElMjAlMjAlMjAlMjBiMiUyMCUzRCUyMGdyLkJ1dHRvbiglMjJDbGFzc2lmeSUyMFNlbnRpbWVudCUyMiklMEElMEElMjAlMjAlMjAlMjBiMS5jbGljayhzcGVlY2hfdG9fdGV4dCUyQyUyMGlucHV0cyUzRGF1ZGlvX2ZpbGUlMkMlMjBvdXRwdXRzJTNEdGV4dCklMEElMjAlMjAlMjAlMjBiMi5jbGljayh0ZXh0X3RvX3NlbnRpbWVudCUyQyUyMGlucHV0cyUzRHRleHQlMkMlMjBvdXRwdXRzJTNEbGFiZWwpJTBBJTBBZGVtby5sYXVuY2goKQ==",highlighted:`<span class="hljs-keyword">from</span> transformers <span class="hljs-keyword">import</span> pipeline

<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr

asr = pipeline(<span class="hljs-string">&quot;automatic-speech-recognition&quot;</span>, <span class="hljs-string">&quot;facebook/wav2vec2-base-960h&quot;</span>)
classifier = pipeline(<span class="hljs-string">&quot;text-classification&quot;</span>)


<span class="hljs-keyword">def</span> <span class="hljs-title function_">speech_to_text</span>(<span class="hljs-params">speech</span>):
    text = asr(speech)[<span class="hljs-string">&quot;text&quot;</span>]
    <span class="hljs-keyword">return</span> text


<span class="hljs-keyword">def</span> <span class="hljs-title function_">text_to_sentiment</span>(<span class="hljs-params">text</span>):
    <span class="hljs-keyword">return</span> classifier(text)[<span class="hljs-number">0</span>][<span class="hljs-string">&quot;label&quot;</span>]


demo = gr.Blocks()

<span class="hljs-keyword">with</span> demo:
    audio_file = gr.Audio(<span class="hljs-built_in">type</span>=<span class="hljs-string">&quot;filepath&quot;</span>)
    text = gr.Textbox()
    label = gr.Label()

    b1 = gr.Button(<span class="hljs-string">&quot;Recognize Speech&quot;</span>)
    b2 = gr.Button(<span class="hljs-string">&quot;Classify Sentiment&quot;</span>)

    b1.click(speech_to_text, inputs=audio_file, outputs=text)
    b2.click(text_to_sentiment, inputs=text, outputs=label)

demo.launch()`,wrap:!1}}),ae=new Me({props:{title:"Обновление свойств компонента",local:"updating-component-properties",headingTag:"h3"}}),ie=new we({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQSUwQWRlZiUyMGNoYW5nZV90ZXh0Ym94KGNob2ljZSklM0ElMEElMjAlMjAlMjAlMjBpZiUyMGNob2ljZSUyMCUzRCUzRCUyMCUyMnNob3J0JTIyJTNBJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwcmV0dXJuJTIwZ3IuVGV4dGJveC51cGRhdGUobGluZXMlM0QyJTJDJTIwdmlzaWJsZSUzRFRydWUpJTBBJTIwJTIwJTIwJTIwZWxpZiUyMGNob2ljZSUyMCUzRCUzRCUyMCUyMmxvbmclMjIlM0ElMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjByZXR1cm4lMjBnci5UZXh0Ym94LnVwZGF0ZShsaW5lcyUzRDglMkMlMjB2aXNpYmxlJTNEVHJ1ZSklMEElMjAlMjAlMjAlMjBlbHNlJTNBJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwcmV0dXJuJTIwZ3IuVGV4dGJveC51cGRhdGUodmlzaWJsZSUzREZhbHNlKSUwQSUwQSUwQXdpdGglMjBnci5CbG9ja3MoKSUyMGFzJTIwYmxvY2slM0ElMEElMjAlMjAlMjAlMjByYWRpbyUyMCUzRCUyMGdyLlJhZGlvKCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU1QiUyMnNob3J0JTIyJTJDJTIwJTIybG9uZyUyMiUyQyUyMCUyMm5vbmUlMjIlNUQlMkMlMjBsYWJlbCUzRCUyMldoYXQlMjBraW5kJTIwb2YlMjBlc3NheSUyMHdvdWxkJTIweW91JTIwbGlrZSUyMHRvJTIwd3JpdGUlM0YlMjIlMEElMjAlMjAlMjAlMjApJTBBJTIwJTIwJTIwJTIwdGV4dCUyMCUzRCUyMGdyLlRleHRib3gobGluZXMlM0QyJTJDJTIwaW50ZXJhY3RpdmUlM0RUcnVlKSUwQSUwQSUyMCUyMCUyMCUyMHJhZGlvLmNoYW5nZShmbiUzRGNoYW5nZV90ZXh0Ym94JTJDJTIwaW5wdXRzJTNEcmFkaW8lMkMlMjBvdXRwdXRzJTNEdGV4dCklMEElMjAlMjAlMjAlMjBibG9jay5sYXVuY2goKQ==",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_">change_textbox</span>(<span class="hljs-params">choice</span>):
    <span class="hljs-keyword">if</span> choice == <span class="hljs-string">&quot;short&quot;</span>:
        <span class="hljs-keyword">return</span> gr.Textbox.update(lines=<span class="hljs-number">2</span>, visible=<span class="hljs-literal">True</span>)
    <span class="hljs-keyword">elif</span> choice == <span class="hljs-string">&quot;long&quot;</span>:
        <span class="hljs-keyword">return</span> gr.Textbox.update(lines=<span class="hljs-number">8</span>, visible=<span class="hljs-literal">True</span>)
    <span class="hljs-keyword">else</span>:
        <span class="hljs-keyword">return</span> gr.Textbox.update(visible=<span class="hljs-literal">False</span>)


<span class="hljs-keyword">with</span> gr.Blocks() <span class="hljs-keyword">as</span> block:
    radio = gr.Radio(
        [<span class="hljs-string">&quot;short&quot;</span>, <span class="hljs-string">&quot;long&quot;</span>, <span class="hljs-string">&quot;none&quot;</span>], label=<span class="hljs-string">&quot;What kind of essay would you like to write?&quot;</span>
    )
    text = gr.Textbox(lines=<span class="hljs-number">2</span>, interactive=<span class="hljs-literal">True</span>)

    radio.change(fn=change_textbox, inputs=radio, outputs=text)
    block.launch()`,wrap:!1}}),ce=new Dl({props:{source:"https://github.com/huggingface/course/blob/main/chapters/ru/chapter9/7.mdx"}}),{c(){U=i("meta"),C=a(),g=i("p"),Ue=a(),r(I.$$.fragment),me=a(),r(x.$$.fragment),Je=a(),k=i("p"),k.innerHTML=cl,Te=a(),B=i("p"),B.innerHTML=rl,he=a(),R=i("ul"),R.innerHTML=Ml,je=a(),r(G.$$.fragment),Ce=a(),Q=i("p"),Q.innerHTML=yl,be=a(),$=i("ul"),$.innerHTML=dl,fe=a(),A=i("p"),A.textContent=wl,ge=a(),r(E.$$.fragment),Ie=a(),v=i("p"),v.textContent=ul,xe=a(),r(Z.$$.fragment),ke=a(),m=i("iframe"),Be=a(),S=i("p"),S.textContent=ml,Re=a(),_=i("ol"),_.innerHTML=Jl,Ge=a(),r(b.$$.fragment),Qe=a(),H=i("p"),H.textContent=Tl,$e=a(),f=i("ol"),f.innerHTML=hl,Ae=a(),r(X.$$.fragment),Ee=a(),W=i("p"),W.innerHTML=jl,ve=a(),V=i("p"),V.innerHTML=Cl,Ze=a(),z=i("p"),z.innerHTML=bl,Se=a(),L=i("p"),L.innerHTML=fl,_e=a(),r(N.$$.fragment),He=a(),J=i("iframe"),Xe=a(),Y=i("p"),Y.innerHTML=Il,We=a(),r(q.$$.fragment),Ve=a(),F=i("p"),F.innerHTML=xl,ze=a(),D=i("p"),D.innerHTML=kl,Le=a(),K=i("p"),K.innerHTML=Bl,Ne=a(),P=i("ul"),P.innerHTML=Rl,Ye=a(),O=i("p"),O.textContent=Gl,qe=a(),r(ee.$$.fragment),Fe=a(),T=i("iframe"),De=a(),r(le.$$.fragment),Ke=a(),te=i("p"),te.innerHTML=$l,Pe=a(),r(se.$$.fragment),Oe=a(),h=i("iframe"),el=a(),r(ae.$$.fragment),ll=a(),oe=i("p"),oe.innerHTML=El,tl=a(),ne=i("p"),ne.textContent=vl,sl=a(),r(ie.$$.fragment),al=a(),j=i("iframe"),ol=a(),pe=i("p"),pe.innerHTML=Sl,nl=a(),r(ce.$$.fragment),il=a(),ye=i("p"),this.h()},l(e){const l=zl("svelte-u9bgzb",document.head);U=p(l,"META",{name:!0,content:!0}),l.forEach(t),C=o(e),g=p(e,"P",{}),re(g).forEach(t),Ue=o(e),M(I.$$.fragment,e),me=o(e),M(x.$$.fragment,e),Je=o(e),k=p(e,"P",{"data-svelte-h":!0}),c(k)!=="svelte-1b9gztd"&&(k.innerHTML=cl),Te=o(e),B=p(e,"P",{"data-svelte-h":!0}),c(B)!=="svelte-gpicrs"&&(B.innerHTML=rl),he=o(e),R=p(e,"UL",{"data-svelte-h":!0}),c(R)!=="svelte-1ynv923"&&(R.innerHTML=Ml),je=o(e),M(G.$$.fragment,e),Ce=o(e),Q=p(e,"P",{"data-svelte-h":!0}),c(Q)!=="svelte-a8igak"&&(Q.innerHTML=yl),be=o(e),$=p(e,"UL",{"data-svelte-h":!0}),c($)!=="svelte-c7xud8"&&($.innerHTML=dl),fe=o(e),A=p(e,"P",{"data-svelte-h":!0}),c(A)!=="svelte-1au4xu2"&&(A.textContent=wl),ge=o(e),M(E.$$.fragment,e),Ie=o(e),v=p(e,"P",{"data-svelte-h":!0}),c(v)!=="svelte-1mfzsp3"&&(v.textContent=ul),xe=o(e),M(Z.$$.fragment,e),ke=o(e),m=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),re(m).forEach(t),Be=o(e),S=p(e,"P",{"data-svelte-h":!0}),c(S)!=="svelte-1y8wc4r"&&(S.textContent=ml),Re=o(e),_=p(e,"OL",{"data-svelte-h":!0}),c(_)!=="svelte-fofowk"&&(_.innerHTML=Jl),Ge=o(e),M(b.$$.fragment,e),Qe=o(e),H=p(e,"P",{"data-svelte-h":!0}),c(H)!=="svelte-67wsi0"&&(H.textContent=Tl),$e=o(e),f=p(e,"OL",{start:!0,"data-svelte-h":!0}),c(f)!=="svelte-12zougw"&&(f.innerHTML=hl),Ae=o(e),M(X.$$.fragment,e),Ee=o(e),W=p(e,"P",{"data-svelte-h":!0}),c(W)!=="svelte-tdd0s9"&&(W.innerHTML=jl),ve=o(e),V=p(e,"P",{"data-svelte-h":!0}),c(V)!=="svelte-tzd4ay"&&(V.innerHTML=Cl),Ze=o(e),z=p(e,"P",{"data-svelte-h":!0}),c(z)!=="svelte-tkt1o7"&&(z.innerHTML=bl),Se=o(e),L=p(e,"P",{"data-svelte-h":!0}),c(L)!=="svelte-1ssd7kp"&&(L.innerHTML=fl),_e=o(e),M(N.$$.fragment,e),He=o(e),J=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),re(J).forEach(t),Xe=o(e),Y=p(e,"P",{"data-svelte-h":!0}),c(Y)!=="svelte-1avhe2z"&&(Y.innerHTML=Il),We=o(e),M(q.$$.fragment,e),Ve=o(e),F=p(e,"P",{"data-svelte-h":!0}),c(F)!=="svelte-g706tl"&&(F.innerHTML=xl),ze=o(e),D=p(e,"P",{"data-svelte-h":!0}),c(D)!=="svelte-yegu7f"&&(D.innerHTML=kl),Le=o(e),K=p(e,"P",{"data-svelte-h":!0}),c(K)!=="svelte-18i3stq"&&(K.innerHTML=Bl),Ne=o(e),P=p(e,"UL",{"data-svelte-h":!0}),c(P)!=="svelte-1umxte9"&&(P.innerHTML=Rl),Ye=o(e),O=p(e,"P",{"data-svelte-h":!0}),c(O)!=="svelte-1rcsahi"&&(O.textContent=Gl),qe=o(e),M(ee.$$.fragment,e),Fe=o(e),T=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),re(T).forEach(t),De=o(e),M(le.$$.fragment,e),Ke=o(e),te=p(e,"P",{"data-svelte-h":!0}),c(te)!=="svelte-1xn3esm"&&(te.innerHTML=$l),Pe=o(e),M(se.$$.fragment,e),Oe=o(e),h=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),re(h).forEach(t),el=o(e),M(ae.$$.fragment,e),ll=o(e),oe=p(e,"P",{"data-svelte-h":!0}),c(oe)!=="svelte-pq8wjw"&&(oe.innerHTML=El),tl=o(e),ne=p(e,"P",{"data-svelte-h":!0}),c(ne)!=="svelte-eif14b"&&(ne.textContent=vl),sl=o(e),M(ie.$$.fragment,e),al=o(e),j=p(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),re(j).forEach(t),ol=o(e),pe=p(e,"P",{"data-svelte-h":!0}),c(pe)!=="svelte-tptpz0"&&(pe.innerHTML=Sl),nl=o(e),M(ce.$$.fragment,e),il=o(e),ye=p(e,"P",{}),re(ye).forEach(t),this.h()},h(){n(U,"name","hf:doc:metadata"),n(U,"content",Ol),de(m.src,Ul="https://course-demos-flip-text.hf.space")||n(m,"src",Ul),n(m,"frameborder","0"),n(m,"height","400"),n(m,"title","Gradio app"),n(m,"class","container p-0 flex-grow space-iframe"),n(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"),n(m,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),n(f,"start","2"),de(J.src,gl="https://course-demos-flip-text-image.hf.space")||n(J,"src",gl),n(J,"frameborder","0"),n(J,"height","450"),n(J,"title","Gradio app"),n(J,"class","container p-0 flex-grow space-iframe"),n(J,"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(J,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),de(T.src,Ql="https://course-demos-blocks-gpt.hf.space")||n(T,"src",Ql),n(T,"frameborder","0"),n(T,"height","300"),n(T,"title","Gradio app"),n(T,"class","container p-0 flex-grow space-iframe"),n(T,"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(T,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),de(h.src,Al="https://course-demos-blocks-multi-step.hf.space")||n(h,"src",Al),n(h,"frameborder","0"),n(h,"height","600"),n(h,"title","Gradio app"),n(h,"class","container p-0 flex-grow space-iframe"),n(h,"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(h,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),de(j.src,Zl="https://course-demos-blocks-update-component-properties.hf.space")||n(j,"src",Zl),n(j,"frameborder","0"),n(j,"height","300"),n(j,"title","Gradio app"),n(j,"class","container p-0 flex-grow space-iframe"),n(j,"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(j,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads")},m(e,l){Ll(document.head,U),s(e,C,l),s(e,g,l),s(e,Ue,l),y(I,e,l),s(e,me,l),y(x,e,l),s(e,Je,l),s(e,k,l),s(e,Te,l),s(e,B,l),s(e,he,l),s(e,R,l),s(e,je,l),y(G,e,l),s(e,Ce,l),s(e,Q,l),s(e,be,l),s(e,$,l),s(e,fe,l),s(e,A,l),s(e,ge,l),y(E,e,l),s(e,Ie,l),s(e,v,l),s(e,xe,l),y(Z,e,l),s(e,ke,l),s(e,m,l),s(e,Be,l),s(e,S,l),s(e,Re,l),s(e,_,l),s(e,Ge,l),y(b,e,l),s(e,Qe,l),s(e,H,l),s(e,$e,l),s(e,f,l),s(e,Ae,l),y(X,e,l),s(e,Ee,l),s(e,W,l),s(e,ve,l),s(e,V,l),s(e,Ze,l),s(e,z,l),s(e,Se,l),s(e,L,l),s(e,_e,l),y(N,e,l),s(e,He,l),s(e,J,l),s(e,Xe,l),s(e,Y,l),s(e,We,l),y(q,e,l),s(e,Ve,l),s(e,F,l),s(e,ze,l),s(e,D,l),s(e,Le,l),s(e,K,l),s(e,Ne,l),s(e,P,l),s(e,Ye,l),s(e,O,l),s(e,qe,l),y(ee,e,l),s(e,Fe,l),s(e,T,l),s(e,De,l),y(le,e,l),s(e,Ke,l),s(e,te,l),s(e,Pe,l),y(se,e,l),s(e,Oe,l),s(e,h,l),s(e,el,l),y(ae,e,l),s(e,ll,l),s(e,oe,l),s(e,tl,l),s(e,ne,l),s(e,sl,l),y(ie,e,l),s(e,al,l),s(e,j,l),s(e,ol,l),s(e,pe,l),s(e,nl,l),y(ce,e,l),s(e,il,l),s(e,ye,l),pl=!0},p(e,[l]){const _l={};l&2&&(_l.$$scope={dirty:l,ctx:e}),b.$set(_l)},i(e){pl||(d(I.$$.fragment,e),d(x.$$.fragment,e),d(G.$$.fragment,e),d(E.$$.fragment,e),d(Z.$$.fragment,e),d(b.$$.fragment,e),d(X.$$.fragment,e),d(N.$$.fragment,e),d(q.$$.fragment,e),d(ee.$$.fragment,e),d(le.$$.fragment,e),d(se.$$.fragment,e),d(ae.$$.fragment,e),d(ie.$$.fragment,e),d(ce.$$.fragment,e),pl=!0)},o(e){w(I.$$.fragment,e),w(x.$$.fragment,e),w(G.$$.fragment,e),w(E.$$.fragment,e),w(Z.$$.fragment,e),w(b.$$.fragment,e),w(X.$$.fragment,e),w(N.$$.fragment,e),w(q.$$.fragment,e),w(ee.$$.fragment,e),w(le.$$.fragment,e),w(se.$$.fragment,e),w(ae.$$.fragment,e),w(ie.$$.fragment,e),w(ce.$$.fragment,e),pl=!1},d(e){e&&(t(C),t(g),t(Ue),t(me),t(Je),t(k),t(Te),t(B),t(he),t(R),t(je),t(Ce),t(Q),t(be),t($),t(fe),t(A),t(ge),t(Ie),t(v),t(xe),t(ke),t(m),t(Be),t(S),t(Re),t(_),t(Ge),t(Qe),t(H),t($e),t(f),t(Ae),t(Ee),t(W),t(ve),t(V),t(Ze),t(z),t(Se),t(L),t(_e),t(He),t(J),t(Xe),t(Y),t(We),t(Ve),t(F),t(ze),t(D),t(Le),t(K),t(Ne),t(P),t(Ye),t(O),t(qe),t(Fe),t(T),t(De),t(Ke),t(te),t(Pe),t(Oe),t(h),t(el),t(ll),t(oe),t(tl),t(ne),t(sl),t(al),t(j),t(ol),t(pe),t(nl),t(il),t(ye)),t(U),u(I,e),u(x,e),u(G,e),u(E,e),u(Z,e),u(b,e),u(X,e),u(N,e),u(q,e),u(ee,e),u(le,e),u(se,e),u(ae,e),u(ie,e),u(ce,e)}}}const Ol='{"title":"Введение в Gradio Blocks","local":"introduction-to-gradio-blocks","sections":[{"title":"Почему Blocks 🧱?","local":"why-blocks-","sections":[],"depth":3},{"title":"Создание простого демо с помощью блоков","local":"creating-a-simple-demo-using-blocks","sections":[],"depth":3},{"title":"Настройка макета вашего демо","local":"customizing-the-layout-of-your-demo","sections":[],"depth":3},{"title":"Изучение событий и состояния","local":"exploring-events-and-state","sections":[],"depth":3},{"title":"Создание многоступенчатых демо","local":"creating-multi-step-demos","sections":[],"depth":3},{"title":"Обновление свойств компонента","local":"updating-component-properties","sections":[],"depth":3}],"depth":1}';function et(ue){return Xl(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class it extends Wl{constructor(U){super(),Vl(this,U,et,Pl,Hl,{})}}export{it as component};