您现在的位置是:首页 > 技术教程 正文

使用终极 GUI 框架 NiceGUI 提升你的 Python 应用程序

admin 阅读: 2024-03-23
后台-插件-广告管理-内容页头部广告(手机)

介绍

随着机器学习和深度学习网站应用程序的快速增长,开发人员一直在寻找新的 Web 框架,以便更轻松地构建这些网站应用程序。

数据科学应用程序的普及程度已经上升,因此新的框架也在增加。开发人员创建了许多新的框架,这些框架被证明对构建这些网站应用程序很有帮助。其中一个框架就是NiceGUI。在本文中,我们将关注这个框架以及如何使用它构建简单的应用程序。

学习目标
  • 了解 NiceGUI

  • 学习使用 NiceGUI 编写基本元素

  • 了解值绑定的工作原理

  • 使用 NiceGUI 在 UI 中显示数据

  • 使用 NiceGUI 构建应用程序

目录

  • 介绍

  • 什么是 NiceGUI?

  • 安装 NiceGUI

  • NiceGUI 的基本元素

  • 用户输入和值绑定

  • 数据元素和图表

    • 带有 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 来测试其功能,而无需将其下载到机器上。让我们看一些示例代码:

  1. from nicegui import ui
  2. ui.label('Welcome to NiceGUI!')
  3. ui.button('Click Here', on_click=lambda: ui.notify('Button Pressed'))
  4. ui.run()

要使用 NiceGUI,我们需要导入库nicegui。我们将在这里使用nicegui的三个函数

  • **label()**:使用此函数在 UI 上显示文本

  • **button()**:此函数用于为 UI 创建可单击的按钮。

  • **notify()**:底部的弹出窗口将显示此函数中编写的内容。

让我们运行代码并查看下面的输出

3dbdb725989391595db14d3764ee6b3e.jpeg1c622c53d0b8f8f7b6e9b3a834215730.jpeg

该应用程序可以从端口 8080 访问。我们看到这里有一个按钮 Click Here。单击该按钮后,会显示一个弹出窗口,告知按钮已按下

NiceGUI 的基本元素

在本节中,我们将研究一些我们将使用 NiceGUI 框架创建的基本元素。

图标和链接

让我们从显示图标和将网站链接到 UI 中的文本开始

  1. from nicegui import ui
  2. ui.label('Display Icon')
  3. ui.icon('fingerprint', color='primary').classes('text-5xl')
  4. ui.link('NiceGUI on GitHub''https://github.com/zauberzeug/nicegui')
  5. ui.run()

从上面的代码创建以下函数:

  • “icon()”函数允许我们在 UI 上显示图标。要显示一个图标,我们需要提供一个图标名称。此功能依赖于 Quasar 的 QIcon。可以使用 CSS、Quasar 或 Tailwind 颜色指定颜色选项。大小选项由 classes() 方法使用 CSS 单位确定。

  • “link()”函数使我们能够将链接分配给 UI 中的文本。首先,我们指定应链接的文本,然后是相应的网站 URL。

运行代码将产生以下输出

547116f02985c1eaf166d33e8381d08f.jpeg

我们看到屏幕上显示了指纹图标。同样点击“GitHub 上的 NiceGUI”,将我们重定向到 NiceGUI 的 GitHub 页面。

选择元素

NiceGUI 有不同的选择元素,如切换框、单选框和复选框。下面的代码包含从 NiceGUI 导入的所有这些元素。

  1. from nicegui import ui
  2. ui.label('Toggle Box')
  3. toggle = ui.toggle([123], value=1)
  4. ui.label('Radio Selection')
  5. radio = ui.radio(["one","two","three"], value=1).props('inline')
  6. ui.label('Dropdown Select')
  7. select = ui.select(["red","blue","green"], value=1)
  8. ui.label('Check Box')
  9. checkbox = ui.checkbox('check me')
  10. ui.run()

上面代码中的函数包括:

  • **toggle()**:此函数可以生成一个切换框,我们在其中通过包含值到标签的映射的字典值列表传递选项。当用户选择一个选项时,它被保存在toggle变量中。

  • **radio()**:这类似于 toggle() 函数,但在这里我们可以选择单选选项。

  • **select()**:此函数生成一个下拉列表以选择特定选项。与上述函数相比,此函数的输入和存储的输出值相同。

  • **checkbox()**:当用户选中复选框时,checkbox 变量被分配一个布尔值 True。

516a6658dfd57fd7797bce61ffce9b7f.jpeg875ca61ad18924f34ceb09d56168015c.jpeg

在这里,我们看到了我们创建的所有选择元素。单击 Dropdown Selection,出现下拉操作,允许我们选择其中一个选项。这些只是我们研究过的部分元素。NiceGUI 提供了广泛的元素以在各种场景中使用。

用户输入和值绑定

在本节中,我们将了解允许用户在 UI 中输入文本或数字数据的功能。

  1. from nicegui import ui
  2. ui.input(label='Text',
  3.          on_change=lambda e: text_input.set_text('Your Input: ' + e.value))
  4. text_input = ui.label()
  5. ui.number(label='Number', value=3.1415, format='%.2f',
  6.           on_change=lambda e: number_input.set_text('Your Input: ' + str(e.value)))
  7. number_input = ui.label()
  8. ui.run()

上面代码中的函数包括:

  • **input()**:使用此函数时,将创建一个空文本框,用户可以在其中键入数据。它有一个名为“ label ”的变量,它告诉用户它期望的输入类型。每当用户在输入框中输入内容时,ui.label() 的 .set_text() 函数就会激活并在屏幕上显示键入的文本。

  • **number()**:此函数的工作方式与 input() 函数类似,唯一的区别是此函数接受数字而不是文本

代码运行时,将产生以下输出

4430d096b96868378c3994b21c7ee769.jpeg857ab6b39d42b8ab0d486a80a00a2b92.jpeg

探索 NiceGUI 中的 UI 元素

在上图中,当用户输入输入字段时,用户的输入会显示在屏幕上。NiceGUI 支持不同 UI 元素之间的绑定值,允许无缝集成。让我们探讨一个例子。

  1. from nicegui import ui
  2. ui.label("Value Bindings")
  3. with ui.row():
  4.     radio1 = ui.radio([123], value=1).props('inline')
  5.     toggle = ui.toggle({1'A'2'B'3'C'}).props('inline').bind_value(radio1, 'value')
  6. ui.run()

在上面的代码中,我们使用 ui.row() 元素将两个元素(radio 和 toggle)水平分组。要将它们垂直分组,我们可以使用 ui.column()。toggle() 函数包含变量 bind_values(),它将单选选项连接到切换选项。例如,在收音机中选择 1 会将开关切换到 A,而选择 2 会将其切换到 B。

442c87aaf897cd7df4892c7e17cf4d80.jpeg2655c88ad6aec3d1230eb99bfc14270e.jpeg

在上面的图片中,我们可以清楚地看到两个 UI 元素之间的值绑定。同样,bind_value() 函数能够在 NiceGUI 提供的不同 UI 元素中工作。

数据元素和图表

在本节中,我们将看到 NiceGUI 提供的数据元素。我们将探讨如何使用 NiceGUI 在 UI 上显示表格和图表。首先,我们将从通过 NiceGUI 显示表格数据开始。显示它的代码将是:

  1. from nicegui import ui
  2. columns = [
  3.     {'name''Name''label''Name''field''Name''required': True, 'align''center'},
  4.     {'name''Employee-ID''label''Employee-ID''field''Employee-ID'},
  5.     {'name''experience''label''experience''field''experience'}
  6.     ]
  7. rows = [
  8.     {'Name''Akash''Employee-ID':1230'experience'5},
  9.     {'Name''Karen''Employee-ID'1245'experience'10},
  10.     {'Name''Thanish''Employee-ID'1980'experience'9},
  11.     {'Name''Samuel''Employee-ID'1120'experience'8},
  12.     ]
  13. ui.table(title='Employee Data',columns=columns, rows=rows, row_key='Name')
  14. ui.run()

要显示表格,请在列列表中指定列名。每列由列表中的字典表示。包括每列的名称、标签和字段值(通常所有列都相同)。可以根据需要提供额外的键值对。

例如,“required:True”键值对确保名称列需要添加到表中的任何新元素的值。“align”:”center” 将整个行对齐到该列名称下的居中对齐方式。

接下来是行列表。行列表是包含上述列值的字典列表。这里使用字段名称,我们在字典中提供field:value对。然后使用 ui.table() 函数,我们将表格显示到 UI。在这里我们可以给表格命名。row_key 的列名包含唯一值。运行此代码将给出以下输出

5c459bebd85e3e778bb3d3fcc30d5d08.jpeg
带有 NiceGUI 的 Pandas DataFrame

我们甚至可以使用 NiceGUI 显示 Pandas Dataframe。使用 table() 函数本身可以显示 Pandas 数据。

  1. import pandas as pd
  2. from nicegui import ui
  3. data = pd.DataFrame(data={'Name': ["Karan""Shoaib"], 'Role': ["Developer""Designer"]})
  4. ui.table(
  5.     columns=[{'name': column, 'label': column, 'field': column} for column in data.columns],
  6.     rows=data.to_dict('records'),
  7. )
  8. ui.run()
b009eaa69bf25550be5ad2c5c00fca0f.jpeg

现在我们将看看如何使用 NiceGUI 在屏幕上显示图形。使用 NiceGUI 函数,我们可以在屏幕上显示通过 matplotlib 绘制的图。为此,我们使用 NiceGUI 中的 pyplot() 函数,它在 UI 上显示 matplotlib 图形。代码将是:

  1. import matplotlib
  2. import numpy
  3. from nicegui import ui
  4. with ui.pyplot(figsize=(32)):
  5.     x = numpy.linspace(0.010000.010)
  6.     y = numpy.log(x)
  7.     matplotlib.pyplot.title('Log Graph')
  8.     matplotlib.pyplot.plot(x, y, '-')
  9. ui.run()

在这里,我们使用 with 命令,然后使用 ui.pyplot() 函数。我们甚至将图的大小传递给函数。现在,在with下面,我们编写通过matplotlib绘制图形的代码。这里我们编写了一个简单的图,其中x轴包含从0到10000的值,步长为10,y轴包含它们的对数值。代码运行时的输出将是:

d1703bf05d781a88dc8e54aba5a84d81.jpeg

你可以在上面的屏幕上看到该图。使用 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」,每日朋友圈更新一篇高质量博文。

扫描二维码添加小编↓

60c6b838d7e473b65e82c0238f7d2def.jpeg

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索
排行榜