《Gradio-Lite：完全在浏览器中运行的无服务器 Gradio》
Gradio 是一个流行的 Python 库，用于创建交互式机器学习应用程序。传统上，Gradio 应用程序依赖于服务器端基础设施来运行，这对于需要托管其应用程序的开发人员来说可能是一个障碍。
输入 Gradio-lite （）：一个利用 Pyodide 将 Gradio 直接引入浏览器的库。在这篇博文中，我们将探讨什么是示例代码，并讨论它为运行 Gradio 应用程序提供的好处。
什么是 gradio/lite
gradio/lite是一个 JavaScript 库，可让您直接在 Web 浏览器中运行 Gradio 应用程序。它通过使用 Pyodide（WebAssembly 的 Python 运行时）来实现这一点，它允许在浏览器环境中执行 Python 代码。有了 ，您可以为 Gradio 应用程序编写常规 Python 代码，它们将在浏览器中无缝运行，而无需服务器端基础设施。
开始
写一个"Hello World" Gradio app i试用 gradio/lite
1. 导入 JS 和 CSS
首先创建一个新的 HTML 文件（如果还没有）。使用以下代码导入包对应的 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>请注意，您通常应该使用可用的最新版本。您可以在此处查看可用的版本。
2. 创建标签<gradio-lite>
在 HTML 页面正文的某个位置（您希望呈现 Gradio 应用程序的任何位置），创建开始和结束标签：<gradio-lite> </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>注意：你可以将属性添加到标签中，以强制主题为 dark 或 light （默认情况下，它遵循系统主题）。例如：
<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 应用程序已呈现！请注意，最初加载 Gradio 应用程序可能需要一些时间，因为 Pyodide 可能需要一段时间才能安装到您的浏览器中。
调试注意事项：要查看 Gradio-lite 应用程序中的任何错误，请在 Web 浏览器中打开检查器。所有错误（包括 Python 错误）都将打印在那里。
更多示例：添加其他文件和要求
如果您想创建一个跨多个文件的 Gradio 应用程序，该怎么办？或者有自定义 Python 要求？两者都可以使用 ！
多个文件
在一个应用程序中添加多个文件非常简单：使用标签。您可以根据需要拥有任意数量的标签，但每个标签都需要具有一个属性，并且 Gradio 应用程序的入口点应具有该属性。下面是一个示例：
<gradio-lite>
<gradio-file name="app.py" entrypoint>
import gradio as gr
from utils import add
demo = 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 在浏览器中安装它们。我们创建了一个包装器来使其更加方便：只需以与 a 相同的语法列出您的需求，并用标签将它们括起来。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_js
import gradio as gr
transformers = await import_transformers_js()
pipeline = transformers.pipeline
pipe = 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 应用程序。访问该页面，您将能够在没有 Internet 访问的情况下运行机器学习模型！
SharedWorker 模式
默认情况下，Gradio-Lite 在具有 Pyodide 运行时的 Web Worker 中执行 Python 代码，并且每个 Gradio-Lite 应用程序都有自己的 worker。 它有一些好处，例如环境隔离。
但是，当同一页面中有许多 Gradio-Lite 应用程序时，可能会导致性能问题，例如高内存使用率，因为每个应用程序都有自己的 worker 和 Pyodide 运行时。 在这种情况下，您可以使用 SharedWorker 模式在多个 Gradio-Lite 应用程序之间共享 SharedWorker 中的单个 Pyodide 运行时。要启用 SharedWorker 模式，请将该属性设置为 tag。shared-worker<gradio-lite>
<!-- These two Gradio-Lite apps share a single worker -->
<gradio-lite shared-worker>
import gradio as gr
# ...
</gradio-lite>
<gradio-lite shared-worker>
import gradio as gr
# ...
</gradio-lite>使用 SharedWorker 模式时，应注意以下几点：
- 这些应用程序共享相同的 Python 环境，这意味着它们可以访问相同的模块和对象。例如，如果一个应用程序对某些模块进行了更改，则其他应用程序可以看到这些更改。
- 文件系统在应用程序之间共享，而每个应用程序的文件都挂载在每个主目录中，因此每个应用程序都可以访问其他应用程序的文件。
代码和演示园地
如果您想将代码与 demo 并排查看，只需将 attribute 传递给 gradio-lite 元素即可。这将创建一个交互式 Playground，允许您更改代码并更新演示！如果你正在使用 Playground，你还可以将布局设置为 'vertical' 或 'horizontal'，这将确定代码编辑器和预览是并排还是彼此重叠（默认情况下，它与页面的宽度保持一致）。
<gradio-lite playground layout="horizontal">
import gradio as gr
gr.Interface(fn=lambda x: x,
inputs=gr.Textbox(),
outputs=gr.Textbox()
).launch()
</gradio-lite>使用的好处
1. 无服务器部署
gradio/lite 的主要优点是它消除了对服务器基础设施的需求。这简化了部署，降低了与服务器相关的成本，并可以更轻松地与他人共享您的 Gradio 应用程序。
2. 低延迟
通过在浏览器中运行，@gradio/lite 为用户提供低延迟交互。无需数据往返于服务器，从而实现更快的响应和更流畅的用户体验。
3. 隐私和安全
由于所有处理都在用户的浏览器中进行，因此增强了隐私和安全性。用户数据保留在他们的设备上，让您对数据处理感到安心。
局限性
-
目前，使用中最大的限制是您的 Gradio 应用程序通常需要更多时间（通常为 5-15 秒）才能在浏览器中加载。这是因为浏览器需要先加载 Pyodide 运行时，然后才能呈现 Python 代码。
-
Pyodide 并非支持每个 Python 包。虽然许多其他流行的包（包括 、 和 ）都可以安装在 Pyodide 中，但如果您的应用程序有很多依赖项，则值得检查这些依赖项是否包含在 Pyodide 中，或者是否可以使用 micropip 安装。
试试看！
你可以立即尝试，只需将这段代码复制并粘贴到本地文件中，然后用浏览器打开它：
<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 网站上创建了一个 Playground，允许您以交互方式编辑代码并立即查看结果！