DevExpress .NET MAUI多平臺(tái)應(yīng)用UI組件庫(kù)提供了用于Android和iOS移動(dòng)開(kāi)發(fā)的高性能UI組件，該組件庫(kù)包括數(shù)據(jù)網(wǎng)格、圖表、調(diào)度程序、數(shù)據(jù)編輯器、CollectionView和選項(xiàng)卡組件等。

目前許多開(kāi)發(fā)人員正在尋找多種方法將AI添加到解決方案中（這通常比想象的要容易），這要?dú)w功于易于使用的基于云的AI服務(wù)和靈活的控制API。在本文中我們將使用OpenAI來(lái)擴(kuò)展DevExpress .NET MAUI HTML編輯功能，具體來(lái)說(shuō)，我將向您展示將AI相關(guān)功能添加到HTML編輯控件并調(diào)整其UI來(lái)獲得最佳用戶體驗(yàn)，歡迎下載最新版體驗(yàn)！

獲取DevExpress v24.1正式版下載

DevExpress技術(shù)交流群10：532598169      歡迎一起進(jìn)群討論

配置OpenAI

直到最近，只有擁有專門機(jī)器學(xué)習(xí)專家的公司才能在其產(chǎn)品中添加高級(jí)人工智能功能。今天，由于擁有數(shù)十億個(gè)參數(shù)的強(qiáng)大預(yù)訓(xùn)練模型，利用人工智能只需最少的努力。像OpenAI這樣的云服務(wù)現(xiàn)在可以很容易地處理復(fù)雜的業(yè)務(wù)需求，例如：

• 文本生成：ChatGPT的核心特性，我們將在本文中使用它
• 圖像分析：檢測(cè)圖像中的對(duì)象，識(shí)別邊界等
• 圖像生成：從文本描述創(chuàng)建圖像 - 非常適合具有設(shè)計(jì)功能或數(shù)據(jù)可視化需求的應(yīng)用程序
• 文本到語(yǔ)音和語(yǔ)音到文本：在口語(yǔ)和書(shū)面語(yǔ)之間無(wú)縫轉(zhuǎn)換

使用OpenAI .NET庫(kù)，這個(gè)過(guò)程甚至更加簡(jiǎn)單，因?yàn)樗峁┝嗽艫PI，而不直接處理HTTP請(qǐng)求。要開(kāi)始使用OpenAI，您需要：

• 如果您還沒(méi)有OpenAI賬戶，
• 訪問(wèn)API密鑰頁(yè)面獲取API密鑰，OpenAI使用信用系統(tǒng)將服務(wù)貨幣化——模式越強(qiáng)大，成本就越高，新賬戶通常會(huì)獲得免費(fèi)積分。
• 打開(kāi).NET MAUI項(xiàng)目并引用。
• 創(chuàng)建一個(gè)ChatClient實(shí)例并將API密鑰傳遞給構(gòu)造函數(shù)：

ChatClient aiClient = new(model: "gpt-3.5-turbo", "YOUR API TOKEN");

我們將使用GPT 3.5 Turbo模型，因?yàn)樗馁Y源密集度較低，但您可以隨時(shí)切換到更強(qiáng)大的模型，以滿足更復(fù)雜的需求。

配置DevExpress組件

為了充分利用AI，必須創(chuàng)建一個(gè)直觀的用戶界面。在處理大型文本消息時(shí)，支持富文本格式（列表、粗體、標(biāo)題）來(lái)在視覺(jué)上分隔文本塊是很有幫助的。因此我們將使用.NET MAUI HTML編輯器，它的API允許您從各種來(lái)源加載文檔并檢索當(dāng)前的HTML內(nèi)容（發(fā)送給OpenAI），同時(shí)還將使用工具欄控件（旨在與DevExpress .NET MAUI HTML Editor等組件無(wú)縫協(xié)作）合并按鈕來(lái)觸發(fā)AI操作。

在HTML編輯控件中顯示文檔

使用DevExpress .NET MAUI HTML編輯器，您可以從各種來(lái)源加載內(nèi)容，如文件、流、字符串或URIs。對(duì)于本例，我們將從存儲(chǔ)在應(yīng)用程序包（在Resources\Raw文件夾中）中的文檔中加載HTML。要顯示HTML，只需讀取文件并將其傳遞給HTML編輯器的 方法：

async void OnPageAppearing(object sender, EventArgs e) {
using Stream stream = await FileSystem.Current.OpenAppPackageFileAsync("mail.html");
using StreamReader reader = new StreamReader(stream);
await htmledit.SetHtmlSourceAsync(await reader.ReadToEndAsync());
}

添加自定義工具欄

在較小的手機(jī)屏幕上，在不影響可用性的情況下整合多個(gè)操作按鈕是一項(xiàng)挑戰(zhàn)，在可操作元素的數(shù)量和大小之間取得平衡至關(guān)重要。此外，您需要決定顯示哪些元素，因?yàn)樵谠S多情況下不需要同時(shí)顯示所有操作（因?yàn)檫@會(huì)使UI混亂）。

我們的工具欄控件可以幫助解決這些現(xiàn)實(shí)：

• 它根據(jù)Material Design 3標(biāo)準(zhǔn)自動(dòng)調(diào)整元素，因此您不必?fù)?dān)心填充或大小。
• 它允許您將元素分組到頁(yè)面中，換句話說(shuō)可以在單獨(dú)的頁(yè)面上顯示所有與AI相關(guān)的操作，僅在需要時(shí)顯示。

HTML編輯器包括一個(gè)內(nèi)置的工具欄，但將隱藏它以便使用自定義工具欄。為此將HTML編輯器的ShowToolbar屬性設(shè)置為false，并創(chuàng)建一個(gè)帶有適當(dāng)自定義按鈕的Toolbar控件：

<dx:SafeKeyboardAreaView>
<Grid RowDefinitions="*,Auto">
<dx:HtmlEdit x:Name="htmledit" ShowToolbar="false" dx:DXDockLayout.Dock="Top"/>
<dx:DXToolbar Grid.Row="1">
<dx:ToolbarNavigationButton Content="??" PageName="AIAssistant"/>
<dx:ToolbarPage Name="AIAssistant" ShowBackButton="true">
<dx:ToolbarButton Content="Fix Grammar ?" Clicked="OnFixGrammarClick"/>
<dx:ToolbarButton Content="Translate to German ????" Clicked="OnToGermanClick"/>
<dx:ToolbarButton Content="Enhance ??" Clicked="OnEnhanceClick"/>
</dx:ToolbarPage>
</dx:DXToolbar>
</Grid>
</dx:SafeKeyboardAreaView>

我們把HTML編輯器和工具欄放在容器中，以防止鍵盤打開(kāi)時(shí)重疊。

獲得AI響應(yīng)并在 .NET MAUI HTML編輯器中顯示

一旦設(shè)置了自定義工具欄按鈕，就可以處理相關(guān)的單擊事件。當(dāng)單擊按鈕時(shí)，我們將從HTML編輯器中檢索內(nèi)容，將其發(fā)送到OpenAI，并在DevExpress .NET MAUI HTML編輯器中顯示響應(yīng)。

要獲取HTML內(nèi)容，我們將使用GetHtmlAsync方法。然后將從前面配置的OpenAI客戶端類調(diào)用CompleteChatAsync方法，最后將把OpenAI的響應(yīng)分配給HTML編輯器：

CompleteChatAsync方法接受一個(gè)聊天消息列表，它可以是以下方式當(dāng)中的一個(gè)：

• 系統(tǒng)：模型的一般說(shuō)明，您只能定義一個(gè)系統(tǒng)消息。
• 用戶：用戶的提示，它可以包括模型要處理的附加指令和內(nèi)容。
• 助理：模型的答復(fù)，您可以組合多個(gè)用戶和助手消息來(lái)構(gòu)建聊天歷史記錄，確保最新的請(qǐng)求包含所有以前的上下文。

總結(jié)

隨著用戶/業(yè)務(wù)期望的不斷提高，集成AI功能將變得越來(lái)越重要。幸運(yùn)的是，您不需要成為機(jī)器學(xué)習(xí)專家來(lái)利用人工智能。在這篇文章中，我遵循以下簡(jiǎn)單的步驟將智能文本增強(qiáng)功能整合到.NET MAUI項(xiàng)目中：

• 注冊(cè)O(shè)penAI并獲得API密鑰。
• 向客戶端添加一個(gè)連接到OpenAI服務(wù)的庫(kù)。
• 使用GetHtmlAsync從DevExpress .NET MAUI HTML編輯器中檢索內(nèi)容
• 添加工具欄按鈕來(lái)調(diào)用AI功能。