Buckets:

hf-doc-build
/

doc-dev

Files

xet

hf-doc-build/doc-dev / course /pr_1069 /zh-TW /chapter9 /4.html

rtrm

about 1 month ago

download

raw

27.8 kB

	<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"與他人分享演示","local":"與他人分享演示","sections":[{"title":"打磨你的 Gradio 演示:","local":"打磨你的-gradio-演示","sections":[],"depth":3},{"title":"使用臨時鏈接分享您的演示","local":"使用臨時鏈接分享您的演示","sections":[],"depth":3},{"title":"在 Hugging Face Spaces 上託管您的演示","local":"在-hugging-face-spaces-上託管您的演示","sections":[],"depth":3},{"title":"✏️ 讓我們應用它!","local":"-讓我們應用它","sections":[],"depth":2}],"depth":1}">
	<link href="/docs/course/pr_1069/zh-TW/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
	<link rel="modulepreload" href="/docs/course/pr_1069/zh-TW/_app/immutable/entry/start.01945326.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/zh-TW/_app/immutable/chunks/scheduler.37c15a92.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/zh-TW/_app/immutable/chunks/singletons.40763523.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/zh-TW/_app/immutable/chunks/index.18351ede.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/zh-TW/_app/immutable/chunks/paths.677dc4ce.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/zh-TW/_app/immutable/entry/app.e8597ff2.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/zh-TW/_app/immutable/chunks/index.2bf4358c.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/zh-TW/_app/immutable/nodes/0.decbb3b3.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/zh-TW/_app/immutable/chunks/each.e59479a4.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/zh-TW/_app/immutable/nodes/74.e8e29f45.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/zh-TW/_app/immutable/chunks/Youtube.1e50a667.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/zh-TW/_app/immutable/chunks/CodeBlock.4e987730.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/zh-TW/_app/immutable/chunks/DocNotebookDropdown.efc1fb7c.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/zh-TW/_app/immutable/chunks/getInferenceSnippets.24b50994.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"與他人分享演示","local":"與他人分享演示","sections":[{"title":"打磨你的 Gradio 演示:","local":"打磨你的-gradio-演示","sections":[],"depth":3},{"title":"使用臨時鏈接分享您的演示","local":"使用臨時鏈接分享您的演示","sections":[],"depth":3},{"title":"在 Hugging Face Spaces 上託管您的演示","local":"在-hugging-face-spaces-上託管您的演示","sections":[],"depth":3},{"title":"✏️ 讓我們應用它!","local":"-讓我們應用它","sections":[],"depth":2}],"depth":1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <h1 class="relative group"><a id="與他人分享演示" 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="#與他人分享演示"><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://colab.research.google.com/github/huggingface/notebooks/blob/master/course/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/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-1qpx3vy">現在您已經構建了一個演示，您可能希望與其他人分享它。梯度演示
	可以通過兩種方式共享：使用 <strong><em>temporary share link</em></strong> 或 <strong><em>permanent hosting on Spaces</em></strong>。</p> <p data-svelte-h="svelte-1i80r9v">我們將很快介紹這兩種方法。但在分享演示之前，您可能需要完善它 💅.</p> <h3 class="relative group"><a id="打磨你的-gradio-演示" 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="#打磨你的-gradio-演示"><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-2u4qs3">為了給你的演示添加額外的內容，<code>Interface</code> 類支持一些可選參數：</p> <ul data-svelte-h="svelte-t1tq40"><li><code>title</code>：你可以給你的演示一個標題，它出現在輸入和輸出組件的上方。</li> <li><code>description</code>：您可以為界面提供描述（文本、Markdown 或 HTML），顯示在輸入和輸出組件的上方和標題下方。</li> <li><code>article</code>：您還可以編寫擴展文章（文本、Markdown 或 HTML）來解釋界面。如果提供，它會出現在輸入和輸出組件的_下方。</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>：為了讓您的演示<em>更易於使用</em>，您可以為函數提供一些示例輸入。它們出現在 UI 組件下方，可用於填充界面。這些應該作為嵌套列表提供，其中外部列表由樣本組成，每個內部列表對應於每個輸入組件的輸入組成。</li> <li><code>live</code>：如果你想讓你的演示“活”，這意味著你的模型每次輸入更改時都會重新運行，你可以設置 <code>live=True</code>。這對使用快速模型很有意義（我們將在本節末尾看到一個示例）
	使用上面的選項，我們最終得到了一個更完整的界面。運行下面的代碼，以便與 Rick and Morty 聊天：</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">"Ask Rick a Question"</span>
	description = <span class="hljs-string">"""
	The bot was trained to answer questions based on Rick and Morty dialogues. Ask Rick anything!
	<img src="https://huggingface.co/spaces/course-demos/Rick_and_Morty_QA/resolve/main/rick.png" width=200px>
	"""</span>

	article = <span class="hljs-string">"Check out [the original Rick and Morty Bot](https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot) that this demo is based off of."</span>

	gr.Interface(
	fn=predict,
	inputs=<span class="hljs-string">"textbox"</span>,
	outputs=<span class="hljs-string">"text"</span>,
	title=title,
	description=description,
	article=article,
	examples=[[<span class="hljs-string">"What are you doing?"</span>], [<span class="hljs-string">"Where should we time travel to?"</span>]],
	).launch()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-jxhkc1">使用上面的選項，我們最終得到了一個更完整的界面。試試下面的界面：</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="使用臨時鏈接分享您的演示" 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="#使用臨時鏈接分享您的演示"><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-rsu6zg">現在我們已經有了機器學習模型的工作演示，讓我們學習如何輕鬆共享指向我們界面的鏈接。
	通過在 <code>launch()</code> 方法中設置 <code>share=True</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">"image"</span>, <span class="hljs-string">"label"</span>).launch(share=<span class="hljs-literal">True</span>)<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1js6txb">這會生成一個公開的、可共享的鏈接，您可以將其發送給任何人！當您發送此鏈接時，另一方的用戶可以在瀏覽器中試用該模型長達 72 小時。因為處理發生在您的設備上（只要您的設備保持開啟！），您不必擔心打包任何依賴項。如果您使用 Google Colab 筆記本工作，則始終會自動創建共享鏈接。它通常看起來像這樣：<strong>XXXXX.gradio.app</strong>。雖然鏈接是通過 Gradio 鏈接提供的，但我們只是您本地服務器的代理，不會存儲通過接口發送的任何數據。</p> <p data-svelte-h="svelte-12u4g0g">但是請記住，這些鏈接是可公開訪問的，這意味著任何人都可以使用您的模型進行預測！因此，請確保不要通過您編寫的函數公開任何敏感信息，或允許在您的設備上發生任何關鍵更改。如果設置 <code>share=False</code>（默認值），則僅創建本地鏈接。</p> <h3 class="relative group"><a id="在-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="#在-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-sutkc9">可以傳遞給同事的共享鏈接很酷，但是如何永久託管您的演示並讓它存在於互聯網上自己的“空間”中？</p> <p data-svelte-h="svelte-1likzwc">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="-讓我們應用它" 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="#-讓我們應用它"><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-1d1dxso">使用到目前為止我們在各節中學到的知識，讓我們創建我們在<a href="/course/chapter9/1">本章第一節</a>中看到的草圖識別演示。讓我們為我們的界面添加一些自定義並設置 <code>share=True</code> 以創建一個我們可以傳遞的公共鏈接。</p> <p data-svelte-h="svelte-1wy2dzw">我們可以從 <a href="https://huggingface.co/spaces/dawood/Sketch-Recognition/blob/main/class_names.txt" rel="nofollow">class_names.txt</a> 加載標籤，並從 <a href="https://huggingface.co/spaces/dawood/Sketch-Recognition/blob/main/pytorch_model.bin" rel="nofollow">pytorch_model.bin</a>加載預訓練的 pytorch 模型。通過點擊鏈接並單擊文件預覽左上角的下載來下載這些文件。讓我們看看下面的代碼，看看我們如何使用這些文件來加載我們的模型並創建一個<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">"class_names.txt"</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">"same"</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">"same"</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">"same"</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">"pytorch_model.bin"</span>, map_location=<span class="hljs-string">"cpu"</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-1nc2ldo">現在我們有了一個<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 -->interface = gr.Interface(
	predict,
	inputs=<span class="hljs-string">"sketchpad"</span>,
	outputs=<span class="hljs-string">"label"</span>,
	theme=<span class="hljs-string">"huggingface"</span>,
	title=<span class="hljs-string">"Sketch Recognition"</span>,
	description=<span class="hljs-string">"Who wants to play Pictionary? Draw a common object like a shovel or a laptop, and the algorithm will guess in real time!"</span>,
	article=<span class="hljs-string">"<p style='text-align: center'>Sketch Recognition \| Demo Model</p>"</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-1dp4vj3">注意 <code>Interface</code> 中的 <code>live=True</code> 參數，這意味著草圖演示使
	每次有人在畫板上畫畫時的預測（沒有提交按鈕！）。</p> <p data-svelte-h="svelte-128yuu9">此外，我們還在 <code>launch()</code> 方法中設置了 <code>share=True</code> 參數。
	這將創建一個公共鏈接，您可以發送給任何人！當您發送此鏈接時，對方的用戶可以嘗試草圖識別模型。重申一下，您還可以在 Hugging Face Spaces 上託管模型，這就是我們能夠嵌入上面的演示的方式。</p> <p data-svelte-h="svelte-10qh459">接下來，我們將介紹 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/zh-TW/chapter9/4.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_14z83n9 = {
	assets: "/docs/course/pr_1069/zh-TW",
	base: "/docs/course/pr_1069/zh-TW",
	env: {}
	};

	const element = document.currentScript.parentElement;

	const data = [null,null];

	Promise.all([
	import("/docs/course/pr_1069/zh-TW/_app/immutable/entry/start.01945326.js"),
	import("/docs/course/pr_1069/zh-TW/_app/immutable/entry/app.e8597ff2.js")
	]).then(([kit, app]) => {
	kit.start(app, element, {
	node_ids: [0, 74],
	data,
	form: null,
	error: null
	});
	});
	}
	</script>

Xet Storage Details

Size:: 27.8 kB
Xet hash:: 2fbe43ac54550738ae1864bbe6885a87acd137887b65f5db33a8022119706968

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