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

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

獲取DevExpress v24.1正式版下載

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

配置OpenAI

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

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

使用OpenAI .NET庫，這個過程甚至更加簡單，因為它提供了云API，而不直接處理HTTP請求。要開始使用OpenAI，您需要：

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

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

我們將使用GPT 3.5 Turbo模型，因為它的資源密集度較低，但您可以隨時切換到更強大的模型，以滿足更復(fù)雜的需求。

配置DevExpress組件

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

在HTML編輯控件中顯示文檔

使用DevExpress .NET MAUI HTML編輯器，您可以從各種來源加載內(nèi)容，如文件、流、字符串或URIs。對于本例，我們將從存儲在應(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());
}

添加自定義工具欄

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

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

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

HTML編輯器包括一個內(nèi)置的工具欄，但將隱藏它以便使用自定義工具欄。為此將HTML編輯器的ShowToolbar屬性設(shè)置為false，并創(chuàng)建一個帶有適當(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編輯器和工具欄放在容器中，以防止鍵盤打開時重疊。

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

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

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

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

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

總結(jié)

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

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