Buckets:
| <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_1021/zh-CN/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload"> | |
| <link rel="modulepreload" href="/docs/course/pr_1021/zh-CN/_app/immutable/entry/start.f3a1a511.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1021/zh-CN/_app/immutable/chunks/scheduler.37c15a92.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1021/zh-CN/_app/immutable/chunks/singletons.9bf55235.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1021/zh-CN/_app/immutable/chunks/index.18351ede.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1021/zh-CN/_app/immutable/chunks/paths.0ba10750.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1021/zh-CN/_app/immutable/entry/app.c39e37cf.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1021/zh-CN/_app/immutable/chunks/index.2bf4358c.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1021/zh-CN/_app/immutable/nodes/0.dad18ce3.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1021/zh-CN/_app/immutable/chunks/each.e59479a4.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1021/zh-CN/_app/immutable/nodes/73.7e13003c.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1021/zh-CN/_app/immutable/chunks/Youtube.1e50a667.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1021/zh-CN/_app/immutable/chunks/CodeBlock.4e987730.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1021/zh-CN/_app/immutable/chunks/DocNotebookDropdown.efc1fb7c.js"> | |
| <link rel="modulepreload" href="/docs/course/pr_1021/zh-CN/_app/immutable/chunks/getInferenceSnippets.ebf8be91.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-1k6pdv1">现在你已经构建了一个演示，你可能希望将其分享给你的同事或者朋友一起体验一下。Gradio 演示可以通过两种方式进行分享：使用 <strong>临时的共享链接</strong> 或者 <strong>在 Spaces 上永久托管</strong>。</p> <p data-svelte-h="svelte-hs82yr">我们将稍后快速介绍这两种方法。但在分享演示之前，你可能需要完善它 💅。</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-9x26ex">为了使演示使用起来更清晰， <code>Interface</code> 类支持一些可选参数：</p> <ul data-svelte-h="svelte-1onbbxv"><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> ：为了让你的演示更易于使用，你可以为函数提供一些示例输入。它们出现在 UI 组件下方，点击后可以自动填充到输入和输出。示例的格式应该是多层的列表，外层列表包含每个示例，每个内层的列表包含与每个输入组件对应的输入。</li> <li><code>live</code> ：如果你想使你的演示“实时”反馈，即每次输入更改时自动重新运行模型，你可以设置 <code>live=True</code> 。这对运行比较快的模型很有意义（我们将在本节末尾看到一个示例）</li></ul> <p data-svelte-h="svelte-uxvbg4">完善上述选项后，我们就得到了一个更完整的界面。运行以下代码，你可以与 Rick 和 Morty 进行对话：</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 -->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-3ql1h0">使用上面的选项，我们最终得到了一个更完整的界面。试试下面的界面：</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-zkbnhm">现在我们已经有了机器学习模型的工作演示，接下来将学习如何轻松地通过链接将演示共享给其他人。 | |
| 通过在 <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-75ozpw">运行上面的代码会生成一个公开的、可共享的链接，你可以将其发送给任何人！得到此链接的用户可以在浏览器中试用该模型，时间长达 72 小时，时间长达 72 小时。因为处理发生在运行代码的设备上（设备需保持开启），所以无须打包任何依赖项。如果你使用 Google Colab 笔记本工作，则默认会自动创建共享链接。它通常看起来像这样：<strong>XXXXX.gradio.app</strong>。虽然链接是通过 Gradio 链接提供的，但 Gradio 只是提供了一个本地服务器的代理，不会存储通过接口发送的任何数据。</p> <p data-svelte-h="svelte-ks1rmr">但是请记住，这些链接是可公开访问的，这意味着任何人都可以使用你的模型进行预测！因此，请确保不要使用你编写的函数公开任何敏感信息，也不要允许其中的代码对你的设备进行任何重要更改。如果设置 <code>share=False</code> （默认值就是False），则仅创建本地链接。</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-676vzv">可以传递给同事的共享链接很酷，但是如何在互联网上永久托管你的演示并使其具有自己的“space”呢？</p> <p data-svelte-h="svelte-1qf7ss4">Hugging Face Spaces 提供了在互联网上永久托管你的 Gradio 模型的基础设施， 并且 <strong>完全免费</strong> ！你可以将你创建 Space 推送到（公共或私有）仓库，在其中，你的 Gradio 界面代码需要存储在一个 <code>app.py</code> 文件中。 请 <a href="https://huggingface.co/blog/gradio-spaces" rel="nofollow">阅读分步教程</a> 开始使用 Hugging Face Spaces ，或观看下面的示例视频。</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-1gjyjxr">现在，让我们使用到目前为止我们在各节中学到的知识，尝试创建我们在 <a href="/course/chapter9/1">本章第一节</a> 中看到的草图识别演示。我们会在界面中添加一些自定义配置并设置 <code>share=True</code> 以创建一个可以与其他人共享的链接。</p> <p data-svelte-h="svelte-1gmyh7w">首先，我们可以从 <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-1gdfqy7">现在我们有了一个 <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">"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-oyxxc5">注意 <code>Interface</code> 中设置了 <code>live=True</code> 参数，这意味着每当有人在画板上绘制时，草图演示都会实时进行预测（无需点击提交按钮！）。</p> <p data-svelte-h="svelte-1po2b7v">此外，我们还在 <code>launch()</code> 方法中设置了 <code>share=True</code> 参数。这将创建一个公共链接，你可以发送给任何人！当你发送此链接时，对方可以尝试草图识别模型。重申一下，你还可以在 Hugging Face Spaces 上托管模型，这也是本教程中我们在网页上展示演示的方式。</p> <p data-svelte-h="svelte-qiff2f">接下来，我们将学习将 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-CN/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_9aawfw = { | |
| assets: "/docs/course/pr_1021/zh-CN", | |
| base: "/docs/course/pr_1021/zh-CN", | |
| env: {} | |
| }; | |
| const element = document.currentScript.parentElement; | |
| const data = [null,null]; | |
| Promise.all([ | |
| import("/docs/course/pr_1021/zh-CN/_app/immutable/entry/start.f3a1a511.js"), | |
| import("/docs/course/pr_1021/zh-CN/_app/immutable/entry/app.c39e37cf.js") | |
| ]).then(([kit, app]) => { | |
| kit.start(app, element, { | |
| node_ids: [0, 73], | |
| data, | |
| form: null, | |
| error: null | |
| }); | |
| }); | |
| } | |
| </script> | |
Xet Storage Details
- Size:
- 28.1 kB
- Xet hash:
- 2221b9a15341f01c409c47cf86a43d110fad33f771dd6123d200e307e5abef3a
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.