Buckets:

hf-doc-build
/

doc-dev

Files

xet

hf-doc-build/doc-dev / course /pr_1069 /ru /chapter9 /7.html

rtrm

27 days ago

download

raw

47.2 kB

	<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"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}">
	<link href="/docs/course/pr_1069/ru/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
	<link rel="modulepreload" href="/docs/course/pr_1069/ru/_app/immutable/entry/start.48687cc8.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/ru/_app/immutable/chunks/scheduler.37c15a92.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/ru/_app/immutable/chunks/singletons.6f259016.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/ru/_app/immutable/chunks/index.18351ede.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/ru/_app/immutable/chunks/paths.930ed261.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/ru/_app/immutable/entry/app.b79a803d.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/ru/_app/immutable/chunks/index.2bf4358c.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/ru/_app/immutable/nodes/0.e11366e4.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/ru/_app/immutable/chunks/each.e59479a4.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/ru/_app/immutable/nodes/75.d7a6c732.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/ru/_app/immutable/chunks/Tip.363c041f.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/ru/_app/immutable/chunks/CodeBlock.4e987730.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/ru/_app/immutable/chunks/CourseFloatingBanner.9ff4c771.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/ru/_app/immutable/chunks/DocNotebookDropdown.efc1fb7c.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/ru/_app/immutable/chunks/getInferenceSnippets.24b50994.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"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}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <h1 class="relative group"><a id="introduction-to-gradio-blocks" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#introduction-to-gradio-blocks"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Введение в Gradio Blocks</span></h1> <div class="flex space-x-1 absolute z-10 right-0 top-0"><a href="https://discuss.huggingface.co/t/chapter-9-questions" target="_blank"><img alt="Ask a Question" class="!m-0" src="https://img.shields.io/badge/Ask%20a%20question-ffcb4c.svg?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTEgMTA0IDEwNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMyMzFmMjA7fS5jbHMtMntmaWxsOiNmZmY5YWU7fS5jbHMtM3tmaWxsOiMwMGFlZWY7fS5jbHMtNHtmaWxsOiMwMGE5NGY7fS5jbHMtNXtmaWxsOiNmMTVkMjI7fS5jbHMtNntmaWxsOiNlMzFiMjM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5EaXNjb3Vyc2VfbG9nbzwvdGl0bGU+PGcgaWQ9IkxheWVyXzIiPjxnIGlkPSJMYXllcl8zIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik01MS44NywwQzIzLjcxLDAsMCwyMi44MywwLDUxYzAsLjkxLDAsNTIuODEsMCw1Mi44MWw1MS44Ni0uMDVjMjguMTYsMCw1MS0yMy43MSw1MS01MS44N1M4MCwwLDUxLjg3LDBaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNTIuMzcsMTkuNzRBMzEuNjIsMzEuNjIsMCwwLDAsMjQuNTgsNjYuNDFsLTUuNzIsMTguNEwzOS40LDgwLjE3YTMxLjYxLDMxLjYxLDAsMSwwLDEzLTYwLjQzWiIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTc3LjQ1LDMyLjEyYTMxLjYsMzEuNiwwLDAsMS0zOC4wNSw0OEwxOC44Niw4NC44MmwyMC45MS0yLjQ3QTMxLjYsMzEuNiwwLDAsMCw3Ny40NSwzMi4xMloiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik03MS42MywyNi4yOUEzMS42LDMxLjYsMCwwLDEsMzguOCw3OEwxOC44Niw4NC44MiwzOS40LDgwLjE3QTMxLjYsMzEuNiwwLDAsMCw3MS42MywyNi4yOVoiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Ik0yNi40Nyw2Ny4xMWEzMS42MSwzMS42MSwwLDAsMSw1MS0zNUEzMS42MSwzMS42MSwwLDAsMCwyNC41OCw2Ni40MWwtNS43MiwxOC40WiIvPjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0iTTI0LjU4LDY2LjQxQTMxLjYxLDMxLjYxLDAsMCwxLDcxLjYzLDI2LjI5YTMxLjYxLDMxLjYxLDAsMCwwLTQ5LDM5LjYzbC0zLjc2LDE4LjlaIi8+PC9nPjwvZz48L3N2Zz4="></a> <a href="https://colab.research.google.com/github/huggingface/notebooks/blob/master/course/en/chapter9/section7.ipynb" target="_blank"><img alt="Open In Colab" class="!m-0" src="https://colab.research.google.com/assets/colab-badge.svg"></a> <a href="https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/en/chapter9/section7.ipynb" target="_blank"><img alt="Open In Studio Lab" class="!m-0" src="https://studiolab.sagemaker.aws/studiolab.svg"></a></div> <p data-svelte-h="svelte-1b9gztd">В предыдущих разделах мы изучили и создали демо, используя класс <code>Interface</code>. В этом разделе мы представим наш <strong>свеже разработанный</strong> низкоуровневый API под названием <code>gradio.Blocks</code>.</p> <p data-svelte-h="svelte-gpicrs">Итак, в чем разница между <code>Interface</code> и <code>Blocks</code>?</p> <ul data-svelte-h="svelte-1ynv923"><li><p>⚡ <code>Interface</code>: высокоуровневый API, который позволяет создать полноценное демо машинного обучения, просто предоставив список входных и выходных данных.</p></li> <li><p>🧱 <code>Blocks</code>: низкоуровневый API, который позволяет вам полностью контролировать потоки данных и компоновку вашего приложения. Вы можете создавать очень сложные, многоступенчатые приложения, используя <code>Blocks</code> (как “строительные блоки”).</p></li></ul> <h3 class="relative group"><a id="why-blocks-" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#why-blocks-"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Почему Blocks 🧱?</span></h3> <p data-svelte-h="svelte-a8igak">Как мы видели в предыдущих разделах, класс <code>Interface</code> позволяет легко создавать полноценные демо машинного обучения с помощью всего нескольких строк кода. API <code>Interface</code> чрезвычайно прост в использовании, но ему не хватает гибкости, которую обеспечивает API <code>Blocks</code>. Например, вы можете захотеть:</p> <ul data-svelte-h="svelte-c7xud8"><li>Сгруппировать связанные демо в виде нескольких вкладок в одном веб-приложении</li> <li>Изменить макет вашего демо, например, указать, где расположены входные и выходные компоненты</li> <li>Многоступенчатые интерфейсы, в которых выход одной модели становится входом для следующей модели, или более гибкие потоки данных в целом</li> <li>Изменить свойства компонента (например, выбор в выпадающем списке) или его видимость на основе пользовательского ввода</li></ul> <p data-svelte-h="svelte-1au4xu2">Ниже мы рассмотрим все эти понятия.</p> <h3 class="relative group"><a id="creating-a-simple-demo-using-blocks" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#creating-a-simple-demo-using-blocks"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Создание простого демо с помощью блоков</span></h3> <p data-svelte-h="svelte-1mfzsp3">После того как вы установили Gradio, запустите приведенный ниже код в виде сценария на Python, блокнота Jupyter или блокнота Colab.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><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">"""
	# Flip Text!
	Start typing below to see the output.
	"""</span>
	)
	<span class="hljs-built_in">input</span> = gr.Textbox(placeholder=<span class="hljs-string">"Flip this text"</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()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-flip-text.hf.space" frameborder="0" height="400" title="Gradio app" class="container p-0 flex-grow space-iframe" 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" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe> <p data-svelte-h="svelte-1y8wc4r">В этом простом примере представлены 4 концепции, которые лежат в основе блоков:</p> <ol data-svelte-h="svelte-fofowk"><li>Блоки позволяют создавать веб-приложения, сочетающие в себе разметку, HTML, кнопки и интерактивные компоненты, просто инстанцируя объекты на Python в контексте <code>with gradio.Blocks</code>.</li></ol> <div class="course-tip bg-gradient-to-br dark:bg-gradient-to-r before:border-green-500 dark:before:border-green-800 from-green-50 dark:from-gray-900 to-white dark:to-gray-950 border border-green-50 text-green-700 dark:text-gray-400">🙋Если вы не знакомы с оператором `with` в Python, рекомендуем ознакомиться с отличным [руководством](https://realpython.com/python-with-statement/) от Real Python. Возвращайтесь сюда после его прочтения 🤗</div> <p data-svelte-h="svelte-67wsi0">Порядок, в котором вы инстанцируете компоненты, имеет значение, поскольку каждый элемент отображается в веб-приложении в том порядке, в котором он был создан. (Более сложные макеты рассматриваются ниже)</p> <ol start="2" data-svelte-h="svelte-12zougw"><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="Flip this text", interactive=True)</code>).</p></li></ol> <h3 class="relative group"><a id="customizing-the-layout-of-your-demo" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#customizing-the-layout-of-your-demo"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Настройка макета вашего демо</span></h3> <p data-svelte-h="svelte-tdd0s9">Как мы можем использовать <code>Blocks</code> для настройки макета нашего демо? По умолчанию <code>Blocks</code> отображает созданные вами компоненты вертикально в одной колонке. Вы можете изменить это, создав дополнительные колонки <code>с помощью gradio.Column():</code> или строки <code>с помощью gradio.Row():</code> и создав компоненты в этих контекстах.</p> <p data-svelte-h="svelte-tzd4ay">Вот что следует иметь в виду: все компоненты, созданные в <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>.</p> <p data-svelte-h="svelte-tkt1o7">Наконец, вы можете создавать вкладки для демо с помощью контекстного менеджера <code>with gradio.Tabs()</code>. В этом контексте вы можете создать несколько вкладок, указав дочерние вкладки в <code>with gradio.TabItem(name_of_tab):</code> . Любой компонент, созданный внутри контекста <code>with gradio.TabItem(name_of_tab):</code>, отображается на этой вкладке.</p> <p data-svelte-h="svelte-1ssd7kp">Теперь давайте добавим функцию <code>flip_image()</code> в наше демо и добавим новую вкладку, которая будет переворачивать изображения. Ниже приведен пример с 2 вкладками, в котором также используется Row:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><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">"Flip text or image files using this demo."</span>)
	<span class="hljs-keyword">with</span> gr.Tabs():
	<span class="hljs-keyword">with</span> gr.TabItem(<span class="hljs-string">"Flip Text"</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">"Flip"</span>)
	<span class="hljs-keyword">with</span> gr.TabItem(<span class="hljs-string">"Flip Image"</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">"Flip"</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()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-flip-text-image.hf.space" frameborder="0" height="450" title="Gradio app" class="container p-0 flex-grow space-iframe" 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" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe> <p data-svelte-h="svelte-1avhe2z">Вы заметите, что в этом примере мы также создали компонент <code>Button</code> на каждой вкладке и назначили событие click для каждой кнопки, что, собственно, и запускает функцию.</p> <h3 class="relative group"><a id="exploring-events-and-state" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#exploring-events-and-state"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Изучение событий и состояния</span></h3> <p data-svelte-h="svelte-g706tl">Так же, как вы можете управлять макетом, <code>Blocks</code> дает вам тонкий контроль над тем, какие события вызывают вызовы функций. Каждый компонент и многие макеты имеют определенные события, которые они поддерживают.</p> <p data-svelte-h="svelte-yegu7f">Например, у компонента <code>Textbox</code> есть 2 события: <code>change()</code> (когда меняется значение внутри текстового поля) и <code>submit()</code> (когда пользователь нажимает клавишу ввода, будучи сфокусированным на текстовом поле). Более сложные компоненты могут иметь еще больше событий: например, компонент <code>Audio</code> также имеет отдельные события для воспроизведения аудиофайла, очистки, приостановки и так далее. О том, какие события поддерживает каждый компонент, читайте в документации.</p> <p data-svelte-h="svelte-18i3stq">Вы можете прикрепить триггер события ни к одному, одному или нескольким из этих событий. Вы создаете триггер события, вызывая имя события на экземпляре компонента в виде функции - например, <code>textbox.change(...)</code> или <code>btn.click(...)</code>. Функция принимает три параметра, как говорилось выше:</p> <ul data-svelte-h="svelte-1umxte9"><li><code>fn</code>: функция для выполнения</li> <li><code>inputs</code>: (список (list)) компонент(ов), значения которых должны быть переданы в качестве входных параметров функции. Значение каждого компонента по порядку сопоставляется с соответствующим параметром функции. Этот параметр может иметь значение None, если функция не принимает никаких параметров.</li> <li><code>outputs</code>: (список (list)) компонентов, значения которых должны быть обновлены на основе значений, возвращаемых функцией. Каждое возвращаемое значение устанавливает значение соответствующего компонента по порядку. Этот параметр может быть None, если функция ничего не возвращает.</li></ul> <p data-svelte-h="svelte-1rcsahi">Вы даже можете сделать так, чтобы компонент ввода и компонент вывода были одним и тем же компонентом, как это сделано в данном примере, где используется модель GPT для дополнения текста:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr

	api = gr.Interface.load(<span class="hljs-string">"huggingface/EleutherAI/gpt-j-6B"</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">"Type here and press enter..."</span>, lines=<span class="hljs-number">4</span>)
	btn = gr.Button(<span class="hljs-string">"Generate"</span>)

	btn.click(complete_with_gpt, textbox, textbox)

	demo.launch()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-blocks-gpt.hf.space" frameborder="0" height="300" title="Gradio app" class="container p-0 flex-grow space-iframe" 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" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe> <h3 class="relative group"><a id="creating-multi-step-demos" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#creating-multi-step-demos"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Создание многоступенчатых демо</span></h3> <p data-svelte-h="svelte-1xn3esm">В некоторых случаях вам может понадобиться <em>многоступенчатое демо</em>, в котором вы повторно используете выход одной функции в качестве входа для следующей. Это очень легко сделать с помощью <code>Blocks</code>, так как вы можете использовать компонент в качестве входа для одного триггера события, но выхода для другого. Посмотрите на компонент text в примере ниже: его значение является результатом работы модели преобразования речи в текст, но также передается в модель анализа настроений:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><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">"automatic-speech-recognition"</span>, <span class="hljs-string">"facebook/wav2vec2-base-960h"</span>)
	classifier = pipeline(<span class="hljs-string">"text-classification"</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">"text"</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">"label"</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">"filepath"</span>)
	text = gr.Textbox()
	label = gr.Label()

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

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

	demo.launch()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-blocks-multi-step.hf.space" frameborder="0" height="600" title="Gradio app" class="container p-0 flex-grow space-iframe" 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" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe> <h3 class="relative group"><a id="updating-component-properties" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#updating-component-properties"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Обновление свойств компонента</span></h3> <p data-svelte-h="svelte-pq8wjw">До сих пор мы видели, как создавать события для обновления значения другого компонента. Но что делать, если вы хотите изменить другие свойства компонента, например видимость текстового поля или варианты выбора в группе радио кнопок? Вы можете сделать это, вернув метод класса компонента <code>update()</code> вместо обычного возвращаемого значения из вашей функции.</p> <p data-svelte-h="svelte-eif14b">Это легче всего проиллюстрировать на примере:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><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">"short"</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">"long"</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">"short"</span>, <span class="hljs-string">"long"</span>, <span class="hljs-string">"none"</span>], label=<span class="hljs-string">"What kind of essay would you like to write?"</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()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-blocks-update-component-properties.hf.space" frameborder="0" height="300" title="Gradio app" class="container p-0 flex-grow space-iframe" 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" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe> <p data-svelte-h="svelte-tptpz0">Мы только что изучили все основные концепции <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>.</p> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/course/blob/main/chapters/ru/chapter9/7.mdx" target="_blank"><span data-svelte-h="svelte-1kd6by1"><</span> <span data-svelte-h="svelte-x0xyl0">></span> <span data-svelte-h="svelte-1dajgef"><span class="underline ml-1.5">Update</span> on GitHub</span></a> <p></p>

	<script>
	{
	__sveltekit_j8s7wf = {
	assets: "/docs/course/pr_1069/ru",
	base: "/docs/course/pr_1069/ru",
	env: {}
	};

	const element = document.currentScript.parentElement;

	const data = [null,null];

	Promise.all([
	import("/docs/course/pr_1069/ru/_app/immutable/entry/start.48687cc8.js"),
	import("/docs/course/pr_1069/ru/_app/immutable/entry/app.b79a803d.js")
	]).then(([kit, app]) => {
	kit.start(app, element, {
	node_ids: [0, 75],
	data,
	form: null,
	error: null
	});
	});
	}
	</script>

Xet Storage Details

Size:: 47.2 kB
Xet hash:: d9b532e96cd042ec0fac85517ba37a5d8d12d2eea497d544cb53d03dabff7c65

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.