Gradio是一个流行的Python库，用于创建交互式机器学习应用程序。传统上，Gradio应用程序依赖于服务器端基础设施来运行，这对于需要托管其应用程序的开发人员来说可能是一个障碍。
现在，有了Gradio-lite（@gradio/lite）库，您就可以直接将Gradio带到浏览器中了，它利用了Pyodide来实现。在本文中，我们将探讨@gradio/lite是什么，介绍示例代码，并讨论它为运行Gradio应用程序提供的好处。
什么是@gradio/lite？
@gradio/lite是一个JavaScript库，能够直接在您的Web浏览器中运行Gradio应用程序。它利用了Pyodide（用于WebAssembly的Python运行时环境），使得Python代码可以在浏览器环境中执行。通过@gradio/lite，您可以编写常规的Python代码来创建Gradio应用程序，它们可以无需服务器端基础设施，在浏览器中无缝运行。
入门
让我们使用@gradio/lite构建一个“Hello World” Gradio应用程序
1. 导入JS和CSS
首先，创建一个新的HTML文件（如果还没有），使用以下代码导入与@gradio/lite包相对应的JavaScript和CSS：
<html> <head> <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" /> </head></html>请注意，通常应使用最新版本的@gradio/lite。您可以在这里查看可用的版本。
2. 创建<gradio-lite>标签
在HTML页面的任意位置（您希望Gradio应用程序渲染的位置），创建开放和闭合的<gradio-lite>标签。
<html> <head> <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" /> </head> <body> <gradio-lite> </gradio-lite> </body></html>注意：您可以向<gradio-lite>标签添加theme属性，以强制将主题设置为暗色或亮色（默认情况下，它会遵守系统主题）。例如：
<gradio-lite theme="dark">...</gradio-lite>3. 在标签中编写Gradio应用程序
现在，像平常一样使用Python编写您的Gradio应用程序！请记住，由于这是Python，空格和缩进都很重要。
<html> <head> <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" /> </head> <body> <gradio-lite> import gradio as gr def greet(name): return "Hello, " + name + "!" gr.Interface(greet, "textbox", "textbox").launch() </gradio-lite> </body></html>这就是它！现在您应该能够在浏览器中打开您的HTML页面，并看到Gradio应用程序的渲染结果！请注意，由于Pyodide在浏览器中安装可能需要一些时间，因此初始加载Gradio应用程序可能需要一段时间。
关于调试的注意事项：要查看Gradio-lite应用程序中的任何错误，请在您的Web浏览器中打开检查器。所有错误（包括Python错误）将打印在那里。
更多示例：添加其他文件和要求
如果您想创建一个跨多个文件的Gradio应用程序怎么办？或者拥有自定义的Python要求怎么办？这些都可以通过@gradio/lite来实现！
多个文件
在@gradio/lite应用程序中添加多个文件非常简单：使用<gradio-file>标签。您可以拥有任意多个<gradio-file>标签，但是每个标签都需要具有name属性，并且您的Gradio应用程序的入口点应该有entrypoint属性。
这里是一个例子：
<gradio-lite><gradio-file name="app.py" entrypoint>import gradio as grfrom utils import adddemo = gr.Interface(fn=add, inputs=["number", "number"], outputs="number")demo.launch()</gradio-file><gradio-file name="utils.py" >def add(a, b): return a + b</gradio-file></gradio-lite> 附加要求
如果您的Gradio应用程序有额外的要求，通常可以使用micropip在浏览器中安装它们。我们创建了一个包装器，使其特别方便：只需将要求列表以与requirements.txt相同的语法列出，并用<gradio-requirements>标签括起来。
在这里，我们安装transformers_js_py，以便直接在浏览器中运行文本分类模型！
<gradio-lite><gradio-requirements>transformers_js_py</gradio-requirements><gradio-file name="app.py" entrypoint>from transformers_js import import_transformers_jsimport gradio as grtransformers = await import_transformers_js()pipeline = transformers.pipelinepipe = await pipeline('sentiment-analysis')async def classify(text): return await pipe(text)demo = gr.Interface(classify, "textbox", "json")demo.launch()</gradio-file></gradio-lite> 试一试：您可以在Hugging Face Static Space这个例子中运行，它可以让您免费托管静态（无服务器）Web应用程序。访问页面，您将能够在没有互联网访问的情况下运行机器学习模型！
使用@gradio/lite的好处
1. 无服务器部署
@gradio/lite的主要优势在于它消除了对服务器基础架构的需求。这简化了部署过程，减少了与服务器相关的成本，并且更易于与他人分享您的Gradio应用程序。
2. 低延迟
通过在浏览器中运行，@gradio/lite为用户提供了低延迟的交互体验。不需要数据在服务器之间传输，响应更快，用户体验更流畅。
3. 隐私和安全
由于所有处理都发生在用户的浏览器中，@gradio/lite增强了隐私和安全性。用户数据保留在其设备上，对于数据处理提供了心理上的保证。
限制
-
目前，使用
@gradio/lite最大的限制是，Gradio应用程序在浏览器中初始加载通常需要更长的时间（通常为5-15秒）。这是因为浏览器需要在渲染Python代码之前加载Pyodide运行时。 -
并非每个Python包都受Pyodide支持。虽然可以在Pyodide中安装
gradio和许多其他流行的软件包（包括numpy、scikit-learn和transformers-js），但如果您的应用程序有许多依赖项，值得检查这些依赖项是否包含在Pyodide中，或者是否可以使用micropip安装。
试一试！
你可以通过将以下代码复制并粘贴到本地的index.html文件中，并用浏览器打开它来立即尝试@gradio/lite：
<html> <head> <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" /> </head> <body> <gradio-lite> import gradio as gr def greet(name): return "Hello, " + name + "!" gr.Interface(greet, "textbox", "textbox").launch() </gradio-lite> </body></html>我们还在Gradio网站上创建了一个游戏场，允许你交互式地编辑代码并立即看到结果！