介紹

隨著機(jī)器學(xué)習(xí)和深度學(xué)習(xí)網(wǎng)站應(yīng)用程序的快速增長(zhǎng)，開發(fā)人員一直在尋找新的 Web 框架，以便更輕松地構(gòu)建這些網(wǎng)站應(yīng)用程序。

數(shù)據(jù)科學(xué)應(yīng)用程序的普及程度已經(jīng)上升，因此新的框架也在增加。開發(fā)人員創(chuàng)建了許多新的框架，這些框架被證明對(duì)構(gòu)建這些網(wǎng)站應(yīng)用程序很有幫助。其中一個(gè)框架就是NiceGUI。在本文中，我們將關(guān)注這個(gè)框架以及如何使用它構(gòu)建簡(jiǎn)單的應(yīng)用程序。

學(xué)習(xí)目標(biāo)

• 了解 NiceGUI

• 學(xué)習(xí)使用 NiceGUI 編寫基本元素

• 了解值綁定的工作原理

• 使用 NiceGUI 在 UI 中顯示數(shù)據(jù)

• 使用 NiceGUI 構(gòu)建應(yīng)用程序

目錄

• 介紹

• 什么是 NiceGUI？

• 安裝 NiceGUI

• NiceGUI 的基本元素

• 用戶輸入和值綁定

• 數(shù)據(jù)元素和圖表

  • 帶有 NiceGUI 的 Pandas DataFrame

• 用例和應(yīng)用程序

• 結(jié)論

什么是 NiceGUI？

NiceGUI是一個(gè)簡(jiǎn)單易用的基于Python的Web-UI框架，其目的是使在Python中開發(fā)前端應(yīng)用程序變得容易。

NiceGUI Framework 的 UI 元素基于 Vue 和 Quasar。NiceGUI帶有許多現(xiàn)成的元素。它甚至允許不同元素之間的值綁定。NiceGUI 可以輕松顯示各種圖表。它的開發(fā)人員選擇在 Fast API Framework 之上構(gòu)建它，因?yàn)樗哂锌焖俚男阅芎陀脩粲押玫慕缑妗?/p>

NiceGUI 中的樣式隨著 CSS、Tailwind 和 Quasar 的變化而變化。默認(rèn)情況下，它允許自定義樣式。使用 NiceGUI 構(gòu)建從短腳本到儀表板再到完整的機(jī)器人項(xiàng)目，甚至是機(jī)器學(xué)習(xí)網(wǎng)站應(yīng)用程序。

一些功能包括：

• 預(yù)加載了隨時(shí)可用的 GUI 元素，如按鈕、標(biāo)簽、復(fù)選框、滑塊、開關(guān)等

• 表情符號(hào)圖標(biāo)、SVG 和 base64 支持

• 提供簡(jiǎn)單的數(shù)據(jù)綁定

• 用于刷新數(shù)據(jù)的內(nèi)置定時(shí)器

• 能夠渲染 3D 場(chǎng)景，繪制圖表

• 可以輕松顯示圖像和視頻

• 它使自定義頁面和布局變得容易，并且內(nèi)置了對(duì) Tailwind CSS 的支持

安裝 NiceGUI

像使用 pip 的其他普通 Python 包一樣下載 NiceGUI。

python3 -m pip install nicegui

請(qǐng)注意，NiceGUI 甚至提供了一個(gè) Docker Image 來測(cè)試其功能，而無需將其下載到機(jī)器上。讓我們看一些示例代碼：

from?nicegui?import?ui

ui.label('Welcome?to?NiceGUI!')
ui.button('Click?Here',?on_click=lambda:?ui.notify('Button?Pressed'))

ui.run()

要使用 NiceGUI，我們需要導(dǎo)入庫nicegui。我們將在這里使用nicegui的三個(gè)函數(shù)

• **label()**：使用此函數(shù)在 UI 上顯示文本

• **button()**：此函數(shù)用于為 UI 創(chuàng)建可單擊的按鈕。

• **notify()**：底部的彈出窗口將顯示此函數(shù)中編寫的內(nèi)容。

讓我們運(yùn)行代碼并查看下面的輸出

該應(yīng)用程序可以從端口 8080 訪問。我們看到這里有一個(gè)按鈕 Click Here。單擊該按鈕后，會(huì)顯示一個(gè)彈出窗口，告知按鈕已按下

NiceGUI 的基本元素

在本節(jié)中，我們將研究一些我們將使用 NiceGUI 框架創(chuàng)建的基本元素。

圖標(biāo)和鏈接

讓我們從顯示圖標(biāo)和將網(wǎng)站鏈接到 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()

從上面的代碼創(chuàng)建以下函數(shù)：

• “icon()”函數(shù)允許我們?cè)?UI 上顯示圖標(biāo)。要顯示一個(gè)圖標(biāo)，我們需要提供一個(gè)圖標(biāo)名稱。此功能依賴于 Quasar 的 QIcon?？梢允褂?CSS、Quasar 或 Tailwind 顏色指定顏色選項(xiàng)。大小選項(xiàng)由 classes() 方法使用 CSS 單位確定。

• “l(fā)ink()”函數(shù)使我們能夠?qū)㈡溄臃峙浣o UI 中的文本。首先，我們指定應(yīng)鏈接的文本，然后是相應(yīng)的網(wǎng)站 URL。

運(yùn)行代碼將產(chǎn)生以下輸出

我們看到屏幕上顯示了指紋圖標(biāo)。同樣點(diǎn)擊“GitHub 上的 NiceGUI”，將我們重定向到 NiceGUI 的 GitHub 頁面。

選擇元素

NiceGUI 有不同的選擇元素，如切換框、單選框和復(fù)選框。下面的代碼包含從 NiceGUI 導(dǎo)入的所有這些元素。

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()

上面代碼中的函數(shù)包括：

• **toggle()**：此函數(shù)可以生成一個(gè)切換框，我們?cè)谄渲型ㄟ^包含值到標(biāo)簽的映射的字典值列表傳遞選項(xiàng)。當(dāng)用戶選擇一個(gè)選項(xiàng)時(shí)，它被保存在toggle變量中。

• **radio()**：這類似于 toggle() 函數(shù)，但在這里我們可以選擇單選選項(xiàng)。

• **select()**：此函數(shù)生成一個(gè)下拉列表以選擇特定選項(xiàng)。與上述函數(shù)相比，此函數(shù)的輸入和存儲(chǔ)的輸出值相同。

• **checkbox()**：當(dāng)用戶選中復(fù)選框時(shí)，checkbox 變量被分配一個(gè)布爾值 True。

在這里，我們看到了我們創(chuàng)建的所有選擇元素。單擊 Dropdown Selection，出現(xiàn)下拉操作，允許我們選擇其中一個(gè)選項(xiàng)。這些只是我們研究過的部分元素。NiceGUI 提供了廣泛的元素以在各種場(chǎng)景中使用。

用戶輸入和值綁定

在本節(jié)中，我們將了解允許用戶在 UI 中輸入文本或數(shù)字?jǐn)?shù)據(jù)的功能。

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()

上面代碼中的函數(shù)包括：

• **input()**：使用此函數(shù)時(shí)，將創(chuàng)建一個(gè)空文本框，用戶可以在其中鍵入數(shù)據(jù)。它有一個(gè)名為“ label ”的變量，它告訴用戶它期望的輸入類型。每當(dāng)用戶在輸入框中輸入內(nèi)容時(shí)，ui.label() 的 .set_text() 函數(shù)就會(huì)激活并在屏幕上顯示鍵入的文本。

• **number()**：此函數(shù)的工作方式與 input() 函數(shù)類似，唯一的區(qū)別是此函數(shù)接受數(shù)字而不是文本

代碼運(yùn)行時(shí)，將產(chǎn)生以下輸出

探索 NiceGUI 中的 UI 元素

在上圖中，當(dāng)用戶輸入輸入字段時(shí)，用戶的輸入會(huì)顯示在屏幕上。NiceGUI 支持不同 UI 元素之間的綁定值，允許無縫集成。讓我們探討一個(gè)例子。

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() 元素將兩個(gè)元素（radio 和 toggle）水平分組。要將它們垂直分組，我們可以使用 ui.column()。toggle() 函數(shù)包含變量 bind_values()，它將單選選項(xiàng)連接到切換選項(xiàng)。例如，在收音機(jī)中選擇 1 會(huì)將開關(guān)切換到 A，而選擇 2 會(huì)將其切換到 B。

在上面的圖片中，我們可以清楚地看到兩個(gè) UI 元素之間的值綁定。同樣，bind_value() 函數(shù)能夠在 NiceGUI 提供的不同 UI 元素中工作。

數(shù)據(jù)元素和圖表

在本節(jié)中，我們將看到 NiceGUI 提供的數(shù)據(jù)元素。我們將探討如何使用 NiceGUI 在 UI 上顯示表格和圖表。首先，我們將從通過 NiceGUI 顯示表格數(shù)據(jù)開始。顯示它的代碼將是：

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()

要顯示表格，請(qǐng)?jiān)诹辛斜碇兄付忻?。每列由列表中的字典表示。包括每列的名稱、標(biāo)簽和字段值（通常所有列都相同）?？梢愿鶕?jù)需要提供額外的鍵值對(duì)。

例如，“required:True”鍵值對(duì)確保名稱列需要添加到表中的任何新元素的值?！癮lign”:”center” 將整個(gè)行對(duì)齊到該列名稱下的居中對(duì)齊方式。

接下來是行列表。行列表是包含上述列值的字典列表。這里使用字段名稱，我們?cè)谧值渲刑峁?strong>field:value對(duì)。然后使用 ui.table() 函數(shù)，我們將表格顯示到 UI。在這里我們可以給表格命名。row_key 的列名包含唯一值。運(yùn)行此代碼將給出以下輸出

帶有 NiceGUI 的 Pandas DataFrame

我們甚至可以使用 NiceGUI 顯示 Pandas Dataframe。使用 table() 函數(shù)本身可以顯示 Pandas 數(shù)據(jù)。

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()

現(xiàn)在我們將看看如何使用 NiceGUI 在屏幕上顯示圖形。使用 NiceGUI 函數(shù)，我們可以在屏幕上顯示通過 matplotlib 繪制的圖。為此，我們使用 NiceGUI 中的 pyplot() 函數(shù)，它在 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() 函數(shù)。我們甚至將圖的大小傳遞給函數(shù)。現(xiàn)在，在with下面，我們編寫通過matplotlib繪制圖形的代碼。這里我們編寫了一個(gè)簡(jiǎn)單的圖，其中x軸包含從0到10000的值，步長(zhǎng)為10，y軸包含它們的對(duì)數(shù)值。代碼運(yùn)行時(shí)的輸出將是:

你可以在上面的屏幕上看到該圖。使用 NiceGUI，我們不僅可以顯示 matplotlib 圖形，我們還可以顯示通過 Plotly 制作的圖形。

用例和應(yīng)用程序

NiceGUI 類似于其他 Web 框架，可以在不同的開發(fā)場(chǎng)景中提供幫助，例如：

• 機(jī)器學(xué)習(xí) UI：憑借其眾多元素，NiceGUI 成為為機(jī)器學(xué)習(xí)應(yīng)用程序創(chuàng)建前端部件的最佳庫之一。在處理需要大量用戶輸入的 ML 應(yīng)用程序時(shí)，NiceGUI 提供的不同選擇元素將真正派上用場(chǎng)

• 快速原型制作：無需編寫 HTML、CSS 或 Javascript 文件，并且能夠完全在 NiceGUI 中編寫從顯示文本到選擇框再到圖形的所有內(nèi)容，從而減少了開發(fā)快速原型的大量工作。NiceGUI 提供的大量元素有助于創(chuàng)建成熟的工作原型。

• 儀表板應(yīng)用程序： NiceGUI 允許開發(fā)人員通過其圖表元素輕松顯示不同的圖表。需要注意的一件好事是 NiceGUI 甚至可以顯示 3D 場(chǎng)景。它甚至帶有進(jìn)度條來展示數(shù)據(jù)的加載。它具有不同的數(shù)據(jù)元素，可以在屏幕上顯示不同類型的 Python 數(shù)據(jù)類型。

結(jié)論

開發(fā)人員使用 NiceGUI（一種 Python Web 框架）來創(chuàng)建網(wǎng)站應(yīng)用程序。NiceGUI 提供了必要的工具來開發(fā)一個(gè)完整的網(wǎng)站，所有的前端部分都完全在 Python 中。我們甚至看到了 NiceGUI 的不同元素以及如何接受用戶輸入。最后，我們通過綁定值了解了我們可以在不同的 UI 元素之間進(jìn)行綁定的方法。

本文的一些要點(diǎn)包括：

• NiceGUI 帶有不同的即用型 UI 元素。

• 它為用戶提供創(chuàng)建多頁面網(wǎng)站的功能。

• NiceGUI 內(nèi)置了數(shù)據(jù)綁定。

• 基于 FastAPI 將內(nèi)容提供給網(wǎng)絡(luò)。

☆ END ☆

如果看到這里，說明你喜歡這篇文章，請(qǐng)轉(zhuǎn)發(fā)、點(diǎn)贊。微信搜索「uncle_pn」，歡迎添加小編微信「 woshicver」，每日朋友圈更新一篇高質(zhì)量博文。

↓掃描二維碼添加小編↓文章來源地址http://www.zghlxwxcb.cn/news/detail-530253.html