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

news2024/10/7 2:32:16

介绍

随着机器学习和深度学习网站应用程序的快速增长，开发人员一直在寻找新的 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 来测试其功能，而无需将其下载到机器上。让我们看一些示例代码：

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()**：底部的弹出窗口将显示此函数中编写的内容。

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

3dbdb725989391595db14d3764ee6b3e.jpeg 1c622c53d0b8f8f7b6e9b3a834215730.jpeg

该应用程序可以从端口 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。

运行代码将产生以下输出

547116f02985c1eaf166d33e8381d08f.jpeg

我们看到屏幕上显示了指纹图标。同样点击“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。

516a6658dfd57fd7797bce61ffce9b7f.jpeg 875ca61ad18924f34ceb09d56168015c.jpeg

在这里，我们看到了我们创建的所有选择元素。单击 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() 函数类似，唯一的区别是此函数接受数字而不是文本

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

4430d096b96868378c3994b21c7ee769.jpeg 857ab6b39d42b8ab0d486a80a00a2b92.jpeg

探索 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。

442c87aaf897cd7df4892c7e17cf4d80.jpeg 2655c88ad6aec3d1230eb99bfc14270e.jpeg

在上面的图片中，我们可以清楚地看到两个 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(title='Employee Data',columns=columns, rows=rows, row_key='Name')

ui.run()

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

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

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

5c459bebd85e3e778bb3d3fcc30d5d08.jpeg

带有 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()
b009eaa69bf25550be5ad2c5c00fca0f.jpeg

现在我们将看看如何使用 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轴包含它们的对数值。代码运行时的输出将是:

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/652169.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【压缩技巧】如何把文件压缩成RAR？如何解压？

【压缩技巧】如何把文件压缩成RAR？如何解压？

在生活及工作中，我们经常需要压缩文件使其更方便存储或传送。 压缩文件的格式有很多种，RAR是其中一种常见的格式，也是WinRAR软件独有的压缩格式。所以想要把文件压缩成RAR，就可以通过WinRAR来操作。 压缩方法如下： 1…
阅读更多...
数组的原型方法-es6

数组的原型方法-es6

数组的原型方法-es6Array.form()Array.of() find() 和 findIndex()copyWithin()fill()entries(),keys()和values()includes()flat()和flatMap()扩展运算符at()reduce()和reduceRight()some()判断数组中是否存在满足条件的项 18、Array.form() Array.from方法用于将两类对象转…
阅读更多...
linuxOPS系统服务_linux高级命令

linuxOPS系统服务_linux高级命令

find命令 find 路径 [选项 选项的值] … 选项作用-name根据文件的名称进行-type按文件类型进行搜索，f代表普通文件，d代表文件夹 find命令查找文件 示例1 查找一个文件 案例1 ,在linux整个系统中查找 test.txt文件 find / -name test.txt -type f案例…
阅读更多...
《Opencv3编程入门》学习笔记—第六章

《Opencv3编程入门》学习笔记—第六章

《Opencv3编程入门》学习笔记 记录一下在学习《Opencv3编程入门》这本书时遇到的问题或重要的知识点。 第六章 图像处理 一、线性滤波：方框滤波、均值滤波、高斯滤波 （一）平滑处理 平滑处理也称模糊处理，是一种简单且使用频率…
阅读更多...
像拿快递一样取文件的FileCodeBox

像拿快递一样取文件的FileCodeBox

本文大约完成于 2月中旬，镜像中途有过更新； 什么是 FileCodeBox ？ FileCodeBox 中文名是 文件快递柜，取文件像取快递一样，支持通过匿名口令分享文本，文件。 很多时候，我们都想将一些文件或文本传…
阅读更多...
流量卡和手机上显示的流量对不上，这是怎么回事呢？

流量卡和手机上显示的流量对不上，这是怎么回事呢？

很多朋友反映，自己购买的流量卡和手机上显示的流量对不上，这到底是怎么回事呢？小编认为，如果出现这种情况，无非有两种因素： ​ 一、买了不正规的流量卡，也就是大家所说的物联卡。 物联卡的特点…
阅读更多...
低压电源系统中防雷浪涌保护器的布局方案

低压电源系统中防雷浪涌保护器的布局方案

低压电源系统是工业、商业和住宅领域中广泛应用的电力系统，其供电电压一般在1000V以下。由于雷击和浪涌等自然灾害的存在，低压电源系统需要防雷浪涌保护器来保护系统不受损坏。本文将详细介绍低压电源系统中防雷浪涌保护器的布置位置与规范。 防雷浪涌保…
阅读更多...
AUTOSAR】UDS协议的代码分析与解读（八）----UDS安全访问27h和通讯控制28h

AUTOSAR】UDS协议的代码分析与解读（八）----UDS安全访问27h和通讯控制28h

8.9 安全访问 Security Access (27h) 由于保密、排放或安全的原因， 安全访问服务提供一种方法以方便访问受限制的数据或诊断服务。 支持安全访问的ECU应该实现种子和密钥的合理算法，该算法应在特定文档中记录，而只有特定的少数 人可以访问该文…
阅读更多...
FasterTransformer 003: CMAKELIST in gemm_test

FasterTransformer 003: CMAKELIST in gemm_test

cmake -DSM60 -DCMAKE_BUILD_TYPERelease .. -DCMAKE_BUILD_TYPE cmake编译类型通常默认为debug，但是在编译软件时，一般都需要使用release版本的，debug太慢了。设置为release版本可以在cmake文件里进行，也可以在运行cmake命令时使…
阅读更多...
深度学习实践篇[17]：模型压缩技术、模型蒸馏算法：Patient-KD、DistilBERT、DynaBERT、TinyBERT

深度学习实践篇[17]：模型压缩技术、模型蒸馏算法：Patient-KD、DistilBERT、DynaBERT、TinyBERT

【深度学习入门到进阶】必看系列，含激活函数、优化策略、损失函数、模型调优、归一化算法、卷积模型、序列模型、预训练模型、对抗神经网络等 专栏详细介绍：【深度学习入门到进阶】必看系列，含激活函数、优化策略、损失函数、模型调优、归一化…
阅读更多...
观点碰撞燃爆会场，2023开放原子全球开源峰会区块链分论坛圆满落幕！

观点碰撞燃爆会场，2023开放原子全球开源峰会区块链分论坛圆满落幕！

2023开放原子全球开源峰会区块链分论坛活动现场 6月13日，由开放原子开源基金会主办，XuperCore开源项目承办，北京百度网讯科技有限公司、招商银行、联通数字科技有限公司、杭州趣链科技有限公司等协办的2023开放原子全球开源峰会区块链分论坛在…
阅读更多...
《低代码指南》不能“生成代码”的低代码平台，为什么推进阻力那么大？

《低代码指南》不能“生成代码”的低代码平台，为什么推进阻力那么大？

为什么现在低代码平台推进阻力那么大？ “在踏出一步之前，首先考虑能否退回去” 现在低代码平台，功能性能这些先不说，能不能提升效率，提升多少，暂不讨论。光“平台和环境锁定”这一点，就是整个行业最大的技术推广障碍。道理很简单，平台有几百个，但是如果选了一个，…
阅读更多...
c++11 标准模板（STL）（std::basic_ios）（一）

c++11 标准模板（STL）（std::basic_ios）（一）

定义于头文件 <ios>template< class CharT, class Traits std::char_traits<CharT> > class basic_ios : public std::ios_base 类 std::basic_ios 提供设施&#xff0c;以对拥有 std::basic_streambuf 接口的对象赋予接口。数个 std::basic_ios 对…
阅读更多...
汽车IVI中控开发入门及进阶（八）：视频相关的一些知识点

汽车IVI中控开发入门及进阶（八）：视频相关的一些知识点

前言： 视频最早的渊源来源于电视。做汽车仪表/IVI中控，尤其是IVI信息娱乐部分，都要涉及到视频这个知识点，各种概念很多，首先需要明确一条主线，那就是SDTV标清电视->HDTV高清电视->UHDTV超高清电视的一个发展脉络，BT601/656是SDTV标清电视接口，BT1120则对应HDTV高…
阅读更多...
SpringCloud：什么是SpringCloud？①

SpringCloud：什么是SpringCloud？①

一、什么是SpringCloud 像“云朵”一样聚集起来管理服务。它的定位就是&#xff1a;服务群组间的通讯管理。 二、Spring&#xff0c;SpringBoot以及SpringCloud之间的关系。 Spring是一种引擎式的底层核心-- bean容器思想。后面均是基于它延伸的高级产品。 SpringBoot 专注单体…
阅读更多...
为什么中国大公司不开发 Linux 桌面应用?

为什么中国大公司不开发 Linux 桌面应用?

我们Linux平台C端的业务&#xff0c;也就是给大家提供的Linux的个人版本。目前真的是靠爱发电了&#xff0c;逃&#xff09; 更爱的是&#xff0c;我们不只是提供了X64平台&#xff0c;更是提供了Arm&#xff0c;MIPS64平台的二进制包。 估计国内在Linux平台首发新功能的桌面应…
阅读更多...
马尔科夫模型 详解

马尔科夫模型 详解

马尔可夫性 马尔可夫性也叫做无后效性、无记忆性&#xff0c;即是过去只能影响现在&#xff0c;不能影响将来。 在数学上&#xff0c;如果为一个随机过程&#xff0c;则马科尔夫性质可以符号化成如下形式&#xff1a; 从上式可知&#xff0c;过去(s)并不影响将来(th)的状态&a…
阅读更多...
Python数据分析讲课笔记02：Numpy基础

Python数据分析讲课笔记02：Numpy基础

文章目录 零、学习目标一、NumPy概述二、多维数组对象三、创建NumPy多维数组1、利用array()函数创建NumPy数组2、创建NumPy数组的其它函数&#xff08;1&#xff09;利用zeros函数创建元素全为0的数组&#xff08;2&#xff09;利用ones函数创建元素全为1的数组&#xff08;3&a…
阅读更多...
时间序列异常检测：统计和机器学习方法介绍

时间序列异常检测：统计和机器学习方法介绍

在本文中将探索各种方法来揭示时间序列数据中的异常模式和异常值。 时间序列数据是按一定时间间隔记录的一系列观测结果。它经常在金融、天气预报、股票市场分析等各个领域遇到。分析时间序列数据可以提供有价值的见解&#xff0c;并有助于做出明智的决策。 异常检测是识别数…
阅读更多...
增加内容曝光、获得更多粉丝 - 「评论发红包」功能

增加内容曝光、获得更多粉丝 - 「评论发红包」功能

目录 博客发放以及领取红包规则 1. 发布博客评论社区红包规则&#xff1a; 2. 博客评论红包领取规则 如何发红包评论&#xff1f; 发布红包评论益处 不知道大家有没有注意到&#xff0c;我们的「评论发红包」功能已经上线啦&#xff5e; 现在几乎所有的内容 -- 博客&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023