纯 Python 浏览器内 LLM 应用程序：Gemini Nano + Gradio-Lite

Google 的本地大型语言模型（LLM）Gemini Nano 已在最新版本的 Chrome Canary 中提供，它完全在浏览器中运行。Gradio 是一个 Python 包，允许您用几行 Python 代码为模型创建 Web UI，而 Gradio-Lite 是其浏览器内版本，也完全在浏览器中运行。结合这两者，您只需使用 Python 即可创建基于本地 LLM 的 Web 应用程序。

👉 演示应用在此。

试用 Gradio-Lite

访问 Gradio Playground，您可以在其中尝试和编辑各种使用 Gradio 的示例应用程序。如果您不熟悉 Gradio，也可以从其快速入门指南开始。

Gradio Playground 实际使用的是 Gradio 的浏览器内版本 Gradio-Lite，因此其中的应用程序完全在浏览器中运行。

在本文中，我们将在 Playground 中编写代码并预览应用程序，但您也可以通过不同方式部署 Gradio-Lite 应用程序。要了解更多信息，阅读此类文档将有所帮助。

使用 Gradio-Lite 构建聊天应用模型

我们来看看Gradio Playground 中的“聊天机器人”示例。代码如下：

import random
import gradio as gr

def random_response(message, history):
    return random.choice(["Yes", "No"])

demo = gr.ChatInterface(random_response)

if __name__ == "__main__":
    demo.launch()

使用 Gradio 构建聊天界面非常容易。您可以定义一个函数，该函数接收一条消息并返回一个响应，然后将其传递给 gr.ChatInterface。

此示例只是通过 random_response() 生成随机响应。通过将其替换为 Gemini Nano，您就可以与 LLM 聊天了！

在浏览器中使用 Python 调用 Gemini Nano

首先，您需要安装 Chrome 127 或更高版本，并按照本文中“安装”部分的说明启用 Gemini Nano。然后再次在 Chrome Canary 中打开Gradio Playground，在那里可以通过 Prompt API 使用 Gemini Nano。

Gemini Nano 和 Prompt API 作为 JavaScript 方法（如 window.ai.createTextSession()）提供，那么我们如何在 Gradio-Lite 中使用 Python 调用它们呢？Gradio-Lite 使用 Pyodide，它是一个为浏览器环境编译的 Python 运行时，您传递给 Gradio-Lite 的 Python 代码实际上是在 Pyodide 运行时上执行的。在 Pyodide 环境中，一些特殊模块可在 Python 代码中使用，您可以使用 js 模块访问 JavaScript API，因为它代表 JavaScript 全局作用域。因此，例如，您可以通过从 js 导入 window 来访问 window 对象。

from js import window  # This doesn't work in Gradio-Lite. See below.

然而，还有另一点需要注意：Gradio-Lite 的 Pyodide 运行时在与主浏览器环境隔离的 WebWorker 中运行，其中 window 对象不可用。相反，WebWorker 环境中的 Prompt API 可通过 self 对象使用。因此，您可以在 Gradio-Lite 环境中这样使用 Prompt API：

from js import self

can_create = await self.ai.canCreateTextSession()  # "readily" if available

这里还有另一个“魔法”：与普通 Python 环境不同，顶层 await 可以在 Gradio-Lite 环境中使用。这有时对于使用返回 Promise 的 JavaScript API 是必需的。

与 Gemini Nano 聊天

您可以在网上找到几个 Prompt API 示例，以下是一个带有流式输出的示例。为了获得更好的聊天体验，我们将在本文中使用这个流式 API。

// This is a JavaScript sample to use the Prompt API in the browser environment.
const canCreate = await window.ai.canCreateTextSession();

if (canCreate !== "no") {
  const session = await window.ai.createTextSession();

  const stream = session.promptStreaming("Write me an extra-long poem");
  for await (const chunk of stream) {
    console.log(chunk);
  }
}

然而，它是用 JavaScript 编写的。我们必须将其翻译成可以在 Gradio-Lite 环境中运行的 Python 代码，并注意以下几点：

• 使用 js 模块访问 JavaScript API。
• 使用 self 而不是 window。
• 顶层 await 可以在 Gradio-Lite 环境中使用。

这是使用 Gradio 的聊天界面在 Gradio-Lite 上执行的与 Gemini Nano 聊天的最终代码。您可以通过复制并粘贴到 Playground 中进行尝试，或者直接访问此链接。

import gradio as gr
from js import self

session = None
try:
    can_ai_create = await self.ai.canCreateTextSession()
    if can_ai_create != "no":
        session = await self.ai.createTextSession()
except:
    pass


self.ai_text_session = session


async def prompt(message, history):
    session = self.ai_text_session
    if not session:
        raise Exception("Gemini Nano is not available in your browser.")

    stream = session.promptStreaming(message)
    async for chunk in stream:
        yield chunk


demo = gr.ChatInterface(fn=prompt)

demo.launch()

首先，session 被初始化。这部分与上面的 JavaScript 示例类似，但已翻译成 Python 版本。

第一个示例中的 random_response() 函数被替换为使用 Gemini Nano session 的 prompt()。这部分也与 JavaScript 示例类似，但使用了 Python 语法，其中 JS 中的 for await 被翻译成 Python 中的 async for，以遍历流式输出。

结论

在本文中，我们探讨了如何在 Gradio-Lite/Pyodide 中使用 Gemini Nano。结合它们，您可以使用纯 Python 代码创建基于本地 LLM 的 Web 应用程序，该应用程序具有丰富的界面，并且完全在浏览器中运行。

进一步阅读与参考

• Gradio-Lite 文档：如果您想在 Playground 之外开发 Gradio-Lite 应用程序，本文档将解释如何操作。
• 如何在浏览器中本地运行 Gemini Nano：本文包含 Gemini Nano 的更高级用法。
• Gradio 文档
• Pyodide 文档
• Prompt API 解释器
• 内置 AI 早期预览计划文档