Hugging Face's logo

Buckets:
hf-doc-build
/
doc-dev

Files
xet
hf-doc-build/doc-dev / course /pr_1069 /ru /chapter9 /4.html
rtrm's picture
rtrm
download
raw
34.5 kB
<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;Делимся демо с другими&quot;,&quot;local&quot;:&quot;sharing-demos-with-others&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;Доработка демо Gradio:&quot;,&quot;local&quot;:&quot;polishing-your-gradio-demo&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Распространение демо с помощью временных ссылок&quot;,&quot;local&quot;:&quot;sharing-your-demo-with-temporary-links&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Хостинг вашего демо на Hugging Face Spaces&quot;,&quot;local&quot;:&quot;hosting-your-demo-on-hugging-face-spaces&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;✏️ Давайте применим это!&quot;,&quot;local&quot;:&quot;lets-apply-it&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2}],&quot;depth&quot;: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/72.402f572b.js">
 <link rel="modulepreload" href="/docs/course/pr_1069/ru/_app/immutable/chunks/Youtube.1e50a667.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="{&quot;title&quot;:&quot;Делимся демо с другими&quot;,&quot;local&quot;:&quot;sharing-demos-with-others&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;Доработка демо Gradio:&quot;,&quot;local&quot;:&quot;polishing-your-gradio-demo&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Распространение демо с помощью временных ссылок&quot;,&quot;local&quot;:&quot;sharing-your-demo-with-temporary-links&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Хостинг вашего демо на Hugging Face Spaces&quot;,&quot;local&quot;:&quot;hosting-your-demo-on-hugging-face-spaces&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;✏️ Давайте применим это!&quot;,&quot;local&quot;:&quot;lets-apply-it&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2}],&quot;depth&quot;:1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <h1 class="relative group"><a id="sharing-demos-with-others" 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="#sharing-demos-with-others"><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></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/section4.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/section4.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-1ucl3jt">Теперь, когда вы создали демо, вы наверняка захотите поделиться им с другими. Демо Gradio
можно распространять двумя способами: используя <strong><em>временную ссылку для общего доступа</em></strong> или <strong><em>постоянный хостинг на Spaces</em></strong>.</p> <p data-svelte-h="svelte-rkaxdn">Мы рассмотрим оба этих подхода в ближайшее время. Но прежде чем выложить свое демо, вы, возможно, захотите доработать его 💅.</p> <h3 class="relative group"><a id="polishing-your-gradio-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="#polishing-your-gradio-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>Доработка демо Gradio:</span></h3> <div class="flex justify-center" data-svelte-h="svelte-nclpfp"><img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface-course/documentation-images/resolve/main/en/chapter9/gradio-demo-overview.png" alt="Overview of a gradio interface"> <img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface-course/documentation-images/resolve/main/en/chapter9/gradio-demo-overview-dark.png" alt="Overview of a gradio interface"></div> <p data-svelte-h="svelte-11847dt">Чтобы добавить дополнительный контент в демо, класс <code>Interface</code> поддерживает некоторые необязательные параметры:</p> <ul data-svelte-h="svelte-zka2tb"><li><code>title</code>: вы можете дать название своему демо, которое будет отображаться <em>над</em> компонентами ввода и вывода.</li> <li><code>description</code>: вы можете дать описание (в виде текста, Markdown или HTML) для интерфейса, которое отображается над компонентами ввода и вывода и под заголовком.</li> <li><code>article</code>: вы также можете написать расширенную статью (в текстовом формате, Markdown или HTML), объясняющую интерфейс. Если она задана, она отображается <em>под</em> компонентами ввода и вывода.</li> <li><code>theme</code>: не нравятся цвета по умолчанию? Установите для темы одно из значений <code>default</code>, <code>huggingface</code>, <code>grass</code>, <code>peach</code>. Вы также можете добавить префикс <code>dark-</code>, например, <code>dark-peach</code> для темной темы (или просто <code>dark</code> для темной темы по умолчанию).</li> <li><code>examples</code>: чтобы сделать ваше демо более удобным в использовании, вы можете предоставить несколько примеров входов для функции. Они появляются под компонентами пользовательского интерфейса и могут быть использованы для заполнения интерфейса. Они должны быть предоставлены в виде вложенного списка, в котором внешний список состоит из примеров, а каждый внутренний список состоит из ввода, соответствующего каждому компоненту ввода.</li> <li><code>live</code>: если вы хотите сделать демо “живым”, то есть чтобы ваша модель запускалась заново при каждом изменении входных данных, вы можете установить <code>live=True</code>. Это имеет смысл использовать с быстрыми моделями (пример мы увидим в конце этого раздела)
Используя приведенные выше варианты, мы получим более завершенный интерфейс. Запустите приведенный ниже код, и вы сможете пообщаться с Риком и Морти:</li></ul> <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 -->title = <span class="hljs-string">&quot;Ask Rick a Question&quot;</span>
description = <span class="hljs-string">&quot;&quot;&quot;
The bot was trained to answer questions based on Rick and Morty dialogues. Ask Rick anything!
&lt;img src=&quot;https://huggingface.co/spaces/course-demos/Rick_and_Morty_QA/resolve/main/rick.png&quot; width=200px&gt;
&quot;&quot;&quot;</span>
article = <span class="hljs-string">&quot;Check out [the original Rick and Morty Bot](https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot) that this demo is based off of.&quot;</span>
gr.Interface(
 fn=predict,
 inputs=<span class="hljs-string">&quot;textbox&quot;</span>,
 outputs=<span class="hljs-string">&quot;text&quot;</span>,
 title=title,
 description=description,
 article=article,
 examples=[[<span class="hljs-string">&quot;What are you doing?&quot;</span>], [<span class="hljs-string">&quot;Where should we time travel to?&quot;</span>]],
).launch()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-xtup6g">Используя приведенные выше варианты, мы получим более завершенный интерфейс. Попробуйте интерфейс, представленный ниже:</p> <iframe src="https://course-demos-Rick-and-Morty-QA.hf.space" frameborder="0" height="800" 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="sharing-your-demo-with-temporary-links" 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="#sharing-your-demo-with-temporary-links"><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-6unewf">Теперь, когда у нас есть работающее демо нашей модели машинного обучения, давайте узнаем, как легко поделиться ссылкой на наш интерфейс.
Интерфейсами можно легко поделиться публично, установив <code>share=True</code> в методе <code>launch()</code>:</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 -->gr.Interface(classify_image, <span class="hljs-string">&quot;image&quot;</span>, <span class="hljs-string">&quot;label&quot;</span>).launch(share=<span class="hljs-literal">True</span>)<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-18221ng">В результате создается общедоступная ссылка, которую вы можете отправить кому угодно! Когда вы отправляете эту ссылку, пользователь на другой стороне может опробовать модель в своем браузере в течение 72 часов. Поскольку обработка происходит на вашем устройстве (пока оно включено!), вам не нужно беспокоиться об упаковке каких-либо зависимостей. Если вы работаете в блокноте Google Colab, ссылка на общий доступ всегда создается автоматически. Обычно она выглядит примерно так: <strong>XXXXX.gradio.app</strong>. Хотя ссылка предоставляется через Gradio, мы являемся лишь прокси для вашего локального сервера и не храним никаких данных, передаваемых через интерфейсы.</p> <p data-svelte-h="svelte-1k8f2bl">Однако не забывайте, что эти ссылки общедоступны, а значит, любой желающий может использовать вашу модель для прогнозирования! Поэтому не раскрывайте конфиденциальную информацию через написанные вами функции и не допускайте критических изменений на вашем устройстве. Если вы установите <code>share=False</code> (по умолчанию), будет создана только локальная ссылка.</p> <h3 class="relative group"><a id="hosting-your-demo-on-hugging-face-spaces" 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="#hosting-your-demo-on-hugging-face-spaces"><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>Хостинг вашего демо на Hugging Face Spaces</span></h3> <p data-svelte-h="svelte-ueix3a">Ссылка на ресурс, которую можно передать коллегам, - это здорово, но как разместить демо на постоянном хостинге, чтобы оно существовало в своем собственном “пространстве (space)” в Интернете?</p> <p data-svelte-h="svelte-1wvduip">Hugging Face Spaces предоставляет инфраструктуру для постоянного размещения вашей модели Gradio в интернете, <strong>бесплатно</strong>! Spaces позволяет вам создать и разместить в (публичном или частном) репозитории,
где ваш Gradio
код интерфейса будет существовать в файле <code>app.py</code>. <a href="https://huggingface.co/blog/gradio-spaces" rel="nofollow">Прочитайте пошаговое руководство</a> чтобы начать работу, или посмотрите видео с примером ниже.</p> <iframe class="w-full xl:w-4/6 h-80" src="https://www.youtube-nocookie.com/embed/LS9Y2wDVI0k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <h2 class="relative group"><a id="lets-apply-it" 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="#lets-apply-it"><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></h2> <p data-svelte-h="svelte-wlu6wo">Используя то, что мы узнали в предыдущих разделах, давайте создадим демо распознавания скетчей, которое мы видели в <a href="../chapter9/1">первом разделе этой главы</a>. Давайте добавим некоторые настройки в наш интерфейс и установим <code>share=True</code>, чтобы создать публичную ссылку, которую мы сможем передавать всем желающим.</p> <p data-svelte-h="svelte-1fib0dd">Мы можем загрузить метки из файла <a href="https://huggingface.co/spaces/dawood/Sketch-Recognition/blob/main/class_names.txt" rel="nofollow">class_names.txt</a> и загрузить предварительно обученную модель pytorch из файла <a href="https://huggingface.co/spaces/dawood/Sketch-Recognition/blob/main/pytorch_model.bin" rel="nofollow">pytorch_model.bin</a>. Загрузите эти файлы, перейдя по ссылке и нажав кнопку загрузки в левом верхнем углу окна предварительного просмотра файла. Давайте посмотрим на приведенный ниже код, чтобы увидеть, как мы используем эти файлы для загрузки нашей модели и создания функции <code>predict()</code>:</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> pathlib <span class="hljs-keyword">import</span> Path
<span class="hljs-keyword">import</span> torch
<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr
<span class="hljs-keyword">from</span> torch <span class="hljs-keyword">import</span> nn
LABELS = Path(<span class="hljs-string">&quot;class_names.txt&quot;</span>).read_text().splitlines()
model = nn.Sequential(
 nn.Conv2d(<span class="hljs-number">1</span>, <span class="hljs-number">32</span>, <span class="hljs-number">3</span>, padding=<span class="hljs-string">&quot;same&quot;</span>),
 nn.ReLU(),
 nn.MaxPool2d(<span class="hljs-number">2</span>),
 nn.Conv2d(<span class="hljs-number">32</span>, <span class="hljs-number">64</span>, <span class="hljs-number">3</span>, padding=<span class="hljs-string">&quot;same&quot;</span>),
 nn.ReLU(),
 nn.MaxPool2d(<span class="hljs-number">2</span>),
 nn.Conv2d(<span class="hljs-number">64</span>, <span class="hljs-number">128</span>, <span class="hljs-number">3</span>, padding=<span class="hljs-string">&quot;same&quot;</span>),
 nn.ReLU(),
 nn.MaxPool2d(<span class="hljs-number">2</span>),
 nn.Flatten(),
 nn.Linear(<span class="hljs-number">1152</span>, <span class="hljs-number">256</span>),
 nn.ReLU(),
 nn.Linear(<span class="hljs-number">256</span>, <span class="hljs-built_in">len</span>(LABELS)),
)
state_dict = torch.load(<span class="hljs-string">&quot;pytorch_model.bin&quot;</span>, map_location=<span class="hljs-string">&quot;cpu&quot;</span>)
model.load_state_dict(state_dict, strict=<span class="hljs-literal">False</span>)
model.<span class="hljs-built_in">eval</span>()
<span class="hljs-keyword">def</span> <span class="hljs-title function_">predict</span>(<span class="hljs-params">im</span>):
 x = torch.tensor(im, dtype=torch.float32).unsqueeze(<span class="hljs-number">0</span>).unsqueeze(<span class="hljs-number">0</span>) / <span class="hljs-number">255.0</span>
 <span class="hljs-keyword">with</span> torch.no_grad():
 out = model(x)
 probabilities = torch.nn.functional.softmax(out[<span class="hljs-number">0</span>], dim=<span class="hljs-number">0</span>)
 values, indices = torch.topk(probabilities, <span class="hljs-number">5</span>)
 <span class="hljs-keyword">return</span> {LABELS[i]: v.item() <span class="hljs-keyword">for</span> i, v <span class="hljs-keyword">in</span> <span class="hljs-built_in">zip</span>(indices, values)}<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1igc5vi">Теперь у нас есть функция <code>predict()</code>. Следующим шагом будет определение и запуск нашего интерфейса Gradio:</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 -->interface = gr.Interface(
 predict,
 inputs=<span class="hljs-string">&quot;sketchpad&quot;</span>,
 outputs=<span class="hljs-string">&quot;label&quot;</span>,
 theme=<span class="hljs-string">&quot;huggingface&quot;</span>,
 title=<span class="hljs-string">&quot;Sketch Recognition&quot;</span>,
 description=<span class="hljs-string">&quot;Who wants to play Pictionary? Draw a common object like a shovel or a laptop, and the algorithm will guess in real time!&quot;</span>,
 article=<span class="hljs-string">&quot;&lt;p style=&#x27;text-align: center&#x27;&gt;Sketch Recognition | Demo Model&lt;/p&gt;&quot;</span>,
 live=<span class="hljs-literal">True</span>,
)
interface.launch(share=<span class="hljs-literal">True</span>)<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-Sketch-Recognition.hf.space" frameborder="0" height="650" 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-qdsi6r">Обратите внимание на параметр <code>live=True</code> в <code>Interface</code>, который означает, что демо скетча делает
предсказание каждый раз, когда кто-то рисует на скетчпаде (без кнопки “Исполнить (submit)”!).</p> <p data-svelte-h="svelte-6e2nmj">Кроме того, мы также установили аргумент <code>share=True</code> в методе <code>launch()</code>.
Это создаст общедоступную ссылку, которую вы можете
отправить кому угодно! Когда вы отправите эту ссылку, пользователь на другой стороне сможет опробовать
модель распознавания эскизов. Повторим, что модель также можно разместить на Hugging Face Spaces,
именно так мы и разместили демо выше.</p> <p data-svelte-h="svelte-9epx9p">Далее мы расскажем о других способах использования Gradio в экосистеме Hugging Face!</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/4.mdx" target="_blank"><span data-svelte-h="svelte-1kd6by1">&lt;</span> <span data-svelte-h="svelte-x0xyl0">&gt;</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, 72],
 data,
 form: null,
 error: null
 });
 });
 }
 </script>

Xet Storage Details

Size:
34.5 kB
·
Xet hash:
b29f6a1cdc3f2cef657ceb8c1fa26309cc0fc4f93addff8b7def0a0d005b27a0

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