介绍
随着机器学习和深度学习网站应用程序的快速增长，开发人员一直在寻找新的 Web 框架，以便更轻松地构建这些网站应用程序。
数据科学应用程序的普及程度已经上升，因此新的框架也在增加。开发人员创建了许多新的框架，这些框架被证明对构建这些网站应用程序很有帮助。其中一个框架就是NiceGUI。在本文中，我们将关注这个框架以及如何使用它构建简单的应用程序。
学习目标了解 NiceGUI学习使用 NiceGUI 编写基本元素了解值绑定的工作原理使用 NiceGUI 在 UI 中显示数据使用 NiceGUI 构建应用程序目录介绍什么是 NiceGUI？安装 NiceGUINiceGUI 的基本元素用户输入和值绑定数据元素和图表带有 NiceGUI 的 Pandas DataFrame用例和应用程序结论什么是 NiceGUI？
NiceGUI是一个简单易用的基于Python的Web-UI框架，其目的是使在Python中开发前端应用程序变得容易。
NiceGUI Framework 的 UI 元素基于 Vue 和 Quasar。NiceGUI带有许多现成的元素。它甚至允许不同元素之间的值绑定。NiceGUI 可以轻松显示各种图表。它的开发人员选择在 Fast API Framework 之上构建它，因为它具有快速的性能和用户友好的界面。
NiceGUI 中的样式随着 CSS、Tailwind 和 Quasar 的变化而变化。默认情况下，它允许自定义样式。使用 NiceGUI 构建从短脚本到仪表板再到完整的机器人项目，甚至是机器学习网站应用程序。
一些功能包括：
预加载了随时可用的 GUI 元素，如按钮、标签、复选框、滑块、开关等表情符号图标、SVG 和 base64 支持提供简单的数据绑定用于刷新数据的内置定时器能够渲染 3D 场景，绘制图表可以轻松显示图像和视频它使自定义页面和布局变得容易，并且内置了对 Tailwind CSS 的支持安装 NiceGUI
像使用 pip 的其他普通 Python 包一样下载 NiceGUI。
python3 -m pip install nicegui
请注意，NiceGUI 甚至提供了一个 Docker Image 来测试其功能，而无需将其下载到机器上。让我们看一些示例代码：
from nicegui import ui
ui.label('Welcome to NiceGUI!')
ui.button('Click Here', on_click=lambda: ui.notify('Button Pressed'))
ui.run()
要使用 NiceGUI，我们需要导入库nicegui。我们将在这里使用nicegui的三个函数
**label()**：使用此函数在 UI 上显示文本**button()**：此函数用于为 UI 创建可单击的按钮。**notify()**：底部的弹出窗口将显示此函数中编写的内容。
让我们运行代码并查看下面的输出
该应用程序可以从端口 8080 访问。我们看到这里有一个按钮 Click Here。单击该按钮后，会显示一个弹出窗口，告知按钮已按下
NiceGUI 的基本元素
在本节中，我们将研究一些我们将使用 NiceGUI 框架创建的基本元素。
图标和链接
让我们从显示图标和将网站链接到 UI 中的文本开始
from nicegui import ui
ui.label('Display Icon')
ui.icon('fingerprint', color='primary').classes('text-5xl')
ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')
ui.run()
从上面的代码创建以下函数：
“icon()”函数允许我们在 UI 上显示图标。要显示一个图标，我们需要提供一个图标名称。此功能依赖于 Quasar 的 QIcon。可以使用 CSS、Quasar 或 Tailwind 颜色指定颜色选项。大小选项由 classes() 方法使用 CSS 单位确定。“link()”函数使我们能够将链接分配给 UI 中的文本。首先，我们指定应链接的文本，然后是相应的网站 URL。
运行代码将产生以下输出
我们看到屏幕上显示了指纹图标。同样点击“GitHub 上的 NiceGUI”，将我们重定向到 NiceGUI 的 GitHub 页面。
选择元素
NiceGUI 有不同的选择元素，如切换框、单选框和复选框。下面的代码包含从 NiceGUI 导入的所有这些元素。
from nicegui import ui
ui.label('Toggle Box')
toggle = ui.toggle([1, 2, 3], value=1)
ui.label('Radio Selection')
radio = ui.radio(["one","two","three"], value=1).props('inline')
ui.label('Dropdown Select')
select = ui.select(["red","blue","green"], value=1)
ui.label('Check Box')
checkbox = ui.checkbox('check me')
ui.run()
上面代码中的函数包括：
**toggle()**：此函数可以生成一个切换框，我们在其中通过包含值到标签的映射的字典值列表传递选项。当用户选择一个选项时，它被保存在toggle变量中。**radio()**：这类似于 toggle() 函数，但在这里我们可以选择单选选项。**select()**：此函数生成一个下拉列表以选择特定选项。与上述函数相比，此函数的输入和存储的输出值相同。**checkbox()**：当用户选中复选框时，checkbox 变量被分配一个布尔值 True。
在这里，我们看到了我们创建的所有选择元素。单击 Dropdown Selection，出现下拉操作，允许我们选择其中一个选项。这些只是我们研究过的部分元素。NiceGUI 提供了广泛的元素以在各种场景中使用。
用户输入和值绑定
在本节中，我们将了解允许用户在 UI 中输入文本或数字数据的功能。
from nicegui import ui
ui.input(label='Text',
on_change=lambda e: text_input.set_text('Your Input: ' + e.value))
text_input = ui.label()
ui.number(label='Number', value=3.1415, format='%.2f',
on_change=lambda e: number_input.set_text('Your Input: ' + str(e.value)))
number_input = ui.label()
ui.run()
上面代码中的函数包括：
**input()**：使用此函数时，将创建一个空文本框，用户可以在其中键入数据。它有一个名为“ label ”的变量，它告诉用户它期望的输入类型。每当用户在输入框中输入内容时，ui.label() 的 .set_text() 函数就会激活并在屏幕上显示键入的文本。**number()**：此函数的工作方式与 input() 函数类似，唯一的区别是此函数接受数字而不是文本
代码运行时，将产生以下输出
探索 NiceGUI 中的 UI 元素
在上图中，当用户输入输入字段时，用户的输入会显示在屏幕上。NiceGUI 支持不同 UI 元素之间的绑定值，允许无缝集成。让我们探讨一个例子。
from nicegui import ui
ui.label("Value Bindings")
with ui.row():
radio1 = ui.radio([1, 2, 3], value=1).props('inline')
toggle = ui.toggle({1: 'A', 2: 'B', 3: 'C'}).props('inline').bind_value(radio1, 'value')
ui.run()
在上面的代码中，我们使用 ui.row() 元素将两个元素（radio 和 toggle）水平分组。要将它们垂直分组，我们可以使用 ui.column()。toggle() 函数包含变量 bind_values()，它将单选选项连接到切换选项。例如，在收音机中选择 1 会将开关切换到 A，而选择 2 会将其切换到 B。
在上面的图片中，我们可以清楚地看到两个 UI 元素之间的值绑定。同样，bind_value() 函数能够在 NiceGUI 提供的不同 UI 元素中工作。
数据元素和图表
在本节中，我们将看到 NiceGUI 提供的数据元素。我们将探讨如何使用 NiceGUI 在 UI 上显示表格和图表。首先，我们将从通过 NiceGUI 显示表格数据开始。显示它的代码将是：
from nicegui import ui
columns = [
{'name': 'Name', 'label': 'Name', 'field': 'Name', 'required': True, 'align': 'center'},
{'name': 'Employee-ID', 'label': 'Employee-ID', 'field': 'Employee-ID'},
{'name': 'experience', 'label': 'experience', 'field': 'experience'}
]
rows = [
{'Name': 'Akash', 'Employee-ID':1230, 'experience': 5},
{'Name': 'Karen', 'Employee-ID': 1245, 'experience': 10},
{'Name': 'Thanish', 'Employee-ID': 1980, 'experience': 9},
{'Name': 'Samuel', 'Employee-ID': 1120, 'experience': 8},
]
ui.table(,columns=columns, rows=rows, row_key='Name')
ui.run()
要显示表格，请在列列表中指定列名。每列由列表中的字典表示。包括每列的名称、标签和字段值（通常所有列都相同）。可以根据需要提供额外的键值对。
例如，“required:True”键值对确保名称列需要添加到表中的任何新元素的值。“align”:”center” 将整个行对齐到该列名称下的居中对齐方式。
接下来是行列表。行列表是包含上述列值的字典列表。这里使用字段名称，我们在字典中提供field:value对。然后使用 ui.table() 函数，我们将表格显示到 UI。在这里我们可以给表格命名。row_key 的列名包含唯一值。运行此代码将给出以下输出
带有 NiceGUI 的 Pandas DataFrame
我们甚至可以使用 NiceGUI 显示 Pandas Dataframe。使用 table() 函数本身可以显示 Pandas 数据。
import pandas as pd
from nicegui import ui
data = pd.DataFrame(data={'Name': ["Karan", "Shoaib"], 'Role': ["Developer", "Designer"]})
ui.table(
columns=[{'name': column, 'label': column, 'field': column} for column in data.columns],
rows=data.to_dict('records'),
)
ui.run()
现在我们将看看如何使用 NiceGUI 在屏幕上显示图形。使用 NiceGUI 函数，我们可以在屏幕上显示通过 matplotlib 绘制的图。为此，我们使用 NiceGUI 中的 pyplot() 函数，它在 UI 上显示 matplotlib 图形。代码将是：
import matplotlib
import numpy
from nicegui import ui
with ui.pyplot(figsize=(3, 2)):
x = numpy.linspace(0.0, 10000.0, 10)
y = numpy.log(x)
matplotlib.pyplot.title('Log Graph')
matplotlib.pyplot.plot(x, y, '-')
ui.run()
在这里，我们使用 with 命令，然后使用 ui.pyplot() 函数。我们甚至将图的大小传递给函数。现在，在with下面，我们编写通过matplotlib绘制图形的代码。这里我们编写了一个简单的图，其中x轴包含从0到10000的值，步长为10，y轴包含它们的对数值。代码运行时的输出将是:
你可以在上面的屏幕上看到该图。使用 NiceGUI，我们不仅可以显示 matplotlib 图形，我们还可以显示通过 Plotly 制作的图形。
用例和应用程序
NiceGUI 类似于其他 Web 框架，可以在不同的开发场景中提供帮助，例如：
机器学习 UI：凭借其众多元素，NiceGUI 成为为机器学习应用程序创建前端部件的最佳库之一。在处理需要大量用户输入的 ML 应用程序时，NiceGUI 提供的不同选择元素将真正派上用场快速原型制作：无需编写 HTML、CSS 或 Javascript 文件，并且能够完全在 NiceGUI 中编写从显示文本到选择框再到图形的所有内容，从而减少了开发快速原型的大量工作。NiceGUI 提供的大量元素有助于创建成熟的工作原型。仪表板应用程序： NiceGUI 允许开发人员通过其图表元素轻松显示不同的图表。需要注意的一件好事是 NiceGUI 甚至可以显示 3D 场景。它甚至带有进度条来展示数据的加载。它具有不同的数据元素，可以在屏幕上显示不同类型的 Python 数据类型。结论
开发人员使用 NiceGUI（一种 Python Web 框架）来创建网站应用程序。NiceGUI 提供了必要的工具来开发一个完整的网站，所有的前端部分都完全在 Python 中。我们甚至看到了 NiceGUI 的不同元素以及如何接受用户输入。最后，我们通过绑定值了解了我们可以在不同的 UI 元素之间进行绑定的方法。
本文的一些要点包括：
NiceGUI 带有不同的即用型 UI 元素。它为用户提供创建多页面网站的功能。NiceGUI 内置了数据绑定。基于 FastAPI 将内容提供给网络。
☆ END ☆如果看到这里，说明你喜欢这篇文章，请转发、点赞。微信搜索「uncle_pn」，欢迎添加小编微信「 woshicver」，每日朋友圈更新一篇高质量博文。↓扫描二维码添加小编↓
