这个界面非常适合创建 AI 聊天机器人的开发人员：

import random
import time

import mesop as me
import mesop.labs as mel

@me.page(
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/chat",
  title="Mesop Demo Chat",
)
def page():
  mel.chat(transform, title="Mesop Demo Chat", bot_user="Mesop Bot")

def transform(input: str, history: list[mel.ChatMessage]):
  for line in random.sample(LINES, random.randint(3, len(LINES) - 1)):
    time.sleep(0.3)
    yield line + " "

LINES = [
  "Mesop is a Python-based UI framework designed to simplify web UI development for engineers without frontend experience.",
  "It leverages the power of the Angular web framework and Angular Material components, allowing rapid construction of web demos and internal tools.",
  "With Mesop, developers can enjoy a fast build-edit-refresh loop thanks to its hot reload feature, making UI tweaks and component integration seamless.",
  "Deployment is straightforward, utilizing standard HTTP technologies.",
  "Mesop's component library aims for comprehensive Angular Material component coverage, enhancing UI flexibility and composability.",
  "It supports custom components for specific use cases, ensuring developers can extend its capabilities to fit their unique requirements.",
  "Mesop's roadmap includes expanding its component library and simplifying the onboarding processs.",
]

这种简单而有效的设置大大减少了通常所需的代码量。在代码编译后，最终的结果如下：

不要在意提示和回应，这只是演示目的。

这非常有用，因为这样的用户界面通常需要我用 C# 或 Javascript 写超过 100 行代码。

另一个简化的界面是用于图像生成应用程序：

import mesop as me
import mesop.labs as mel

@me.page(
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/text_to_image",
  title="Text to Image Example",
)
def app():
  mel.text_to_image(
    generate_image,
    title="Text to Image Example",
  )

def generate_image(prompt: str):
  return "https://www.google.com/logos/doodles/2024/earth-day-2024-6753651837110453-2xa.gif"

这是 Web 应用程序用户界面的样子：

太棒了！现在你只需要将图像模型或 API 访问集成到后端即可。

你也可以用以下代码构建一个简单的文本到文本用户界面：

import mesop as me
import mesop.labs as mel

@me.page(
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/text_to_text",
  title="Text to Text Example",
)
def app():
  mel.text_to_text(
    upper_case_stream,
    title="Text to Text Example",
  )

def upper_case_stream(s: str):
  return "Echo: " + s

有两种方法可以尝试 Mesop。你可以在 Google Colab 上测试它，也可以在本地 PC 上安装并运行它。

首先，让我向你展示如何在 Google Colab 上尝试它。

前往这个 Colab 笔记本，用你的 Google 账号登录。别担心，它是免费使用的，但有限制。

点击小播放按钮安装 Mesop。

确保看到那个绿色的勾号，表示 Mesop 安装成功。接下来，导入库并启动应用程序。

这个小聊天应用程序示例只需要几行代码，却能展示一个完整且可工作的用户界面。

@me.page(path="/chat")
def chat():
  mel.chat(transform)

def transform(prompt: str, history: list[mel.ChatMessage]) -> str:
  return "Hello " + prompt

注意：你也可以在本地安装 Mesop 并离线构建应用程序，方法是按照这个 教程。如果你希望我写一份更全面的关于如何用 Mesop 构建前端 UI 的指南，请在评论中告诉我。

如果你想深入了解代码的细节，请查看 GitHub 上的开源仓库。

不，Mesop 不是谷歌官方产品，Mesop 是一个由一小部分谷歌工程师团队维护的 20% 项目，也得到了更广泛社区的贡献。

Streamlit 是一个广受欢迎的工具，受到数据科学家们的喜爱，可以快速创建 Web 应用程序。我自己有时也会使用它，因为它的用户友好设置和各种现成的组件。

然而，Mesop 提供了一些独特的优势，特别是在灵活性和定制化方面。

• 灵活性和定制化： Mesop 非常灵活，因为你可以只用 Python 编写和调整用户界面。

• 易用性： Mesop 有一个开箱即用的 聊天组件，但如果你需要定制它，你实际上可以只复制 chat.py 文件并根据需要进行定制。相比之下，Streamlit 很适合入门，但一旦你尝试做一些复杂的定制，你通常需要编写自己的 React/TypeScript 组件。

• 处理复杂项目： 根据 Mesop 开发人员的说法，Mesop 有一个不同的构建 UI 的哲学（例如基于函数），这导致了一种截然不同的开发人员体验。这种方法在应用程序增长时（例如数千行代码）表现良好，即使是内部工具和演示通常也是如此。