用 PyWebIO 在 Python 中创建交互式 Web 应用程序

引言

用Python创建Web应用程序比几年前要容易得多。例如Streamlit，它彻底改变了我们在Python中创建和部署应用程序的方式。但是在本文中，我们将来介绍一下PyWebIO。

使用 PywebIO 构建简单的 web 应用程序很容易，不需要使用 HTML 和 Python 中的 Javascript。这个包的概念很简单: 您可以获得输入和输出函数，从而可以创建简单的 GUI 或 web 应用程序。

然后你可以从终端，交互式执行环境（如Python Shell，IPython或Jupyter Notebook）在本地或云中的浏览器中为Web应用程序提供服务。

要安装 PyWebIO，请运行以下命令。

pip install -U pywebio

输入与输出

PyWebIO是直观而直接的，你可以认为它是脚本、终端或交互式环境的扩展，使你能够轻松的创建web应用程序。

让我展示一个在 python 环境中运行的简单示例。在这里，我们创建不同类型的输入，包括文本输入、单选按钮和复选框。

# Text Input 
name = input('What is your Name?', type=TEXT) 

# Number Input 
name = input('How old are you?', type=TEXT) 

# Single choice 
answer = radio("Which Continent?", options=['Africa', 'Asia', 'Australia', 'Europe', 'North America', 'South America']) 

# Checkbox 
agree = checkbox("User Term", options=['I agree to terms and conditions'])

下面的 GIF 显示了如何在运行 python 代码时立即获得代码的浏览器 GUI。

是不是很酷啊！

在 Pywebio 有多种输入功能，你可以在这里(https://pywebio.readthedocs.io

/en/latest/input.html#functions-list)找到输入功能列表。

在前面的示例中，你已经看到了这些输入函数的几个示例。然而，我们往往倾向于将不同的输入分组，这就是 input_group 的作用。

让我们回顾一下第一个例子，使用 input _ group 函数将不同的输入打包在一起。注意，我们在所有输入中都有一个 name 参数。稍后我们将为每个输入使用 name 参数。

from pywebio.input import *
from pywebio.output import *

data = input_group(
    "User data",
    [
        input("What is your Name?", name="name", type=TEXT),
        input("Input your age", name="age", type=NUMBER),
        radio(
            "Which Continent?",
            name="continent",
            options=[
                "Africa",
                "Asia",
                "Australia",
                "Europe",
                "North America",
                "South America",
            ],
        ),
        checkbox(
            "User Term", name="agreement", options=["I agree to terms and conditions"]
        ),
    ],
)

你可能已经意识到，我们没有从前面的示例中得到任何输出，因为我们还没有创建任何输出函数。PyWebIO 有一个丰富的输出函数列表(https://pywebio.readthedocs.io/en/latest/output.html#functions-list)，你可以参考它。

在这个例子中，我们只使用两个输出函数: put _ text_table 和 put _ table。注意，我们使用带有每个输入名称的输入组将它们放入表中。

put_text("The output in a table:")

put_table(
    [
        ["Name", data["name"]],
        ["Age", data["age"]],
        ["Continent", data["continent"]],
        ["Agreement", data["agreement"]],
    ]
)

下面是显示前面示例的分组输入和输出的 GIF。

这里最后一个例子向您展示了可以轻松地将 python 代码扩展到 Pywebio 应用程序中，而不需要做太多的更改。这个例子展示了一个简单的函数，它将对坐标进行格式化。

from pywebio.input import input, FLOAT, input_group
from pywebio.output import put_text
from pywebio import start_server


def print_coords(lat, long):
    lat, long = coordinates["lat"], coordinates["long"]

    ns = "NS"[lat < 0]  # True (1) defaults to "N" and False(0) defaults to "S"
    we = "EW"[long < 0]  # True (1) defaults to "E" and False(0) defaults to "W

    return f"{abs(lat):.2f}°{ns}, {abs(long):.2f}°{we}"



coordinates = input_group(
    "coordinates in decimal degrees",
    [
        input("Input Latitude：", name="lat", type=FLOAT),
        input("Input Longitude：", name="long", type=FLOAT),
    ],
)
put_text(print_coords(coordinates["lat"], coordinates["long"]))

下面是一个 GIF，显示了使用 PyWebIO 的简单坐标格式化应用程序。

数据可视化

PyWebIO把包括Plotly在内的多个数据可视化库集成在一起。以下示例创建一个Plotly映射，并将其与PyWebIO一起使用。

from pywebio.output import put_html
import plotly.express as px

df = px.data.gapminder().query("year==2007")
fig = px.scatter_geo(df, locations="iso_alpha", color="continent",
                     hover_name="country", size="pop",
                     projection="natural earth")
html = fig.to_html(include_plotlyjs="require", full_html=False)
put_html(html).send()

我们将 Plotly Figure 转换为 HTML，然后将其传递给 PyWebIO 中的 put_html 函数。

总结

我喜欢PyWebIO功能和概念的简单性。您可以获得输入和输出功能，这些功能使您可以将python代码转换为浏览器上的简单Web应用程序。此程序包中还有很多值得探索的地方，尤其是它允许您对应用程序进行样式设置和提供服务。一起来探索吧~