DevExpress .NET MAUI多平臺應用UI組件庫提供了用于Android和iOS移動開發的高性能UI組件，該組件庫包括數據網格、圖表、調度程序、數據編輯器、CollectionView和選項卡組件等。

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

獲取DevExpress v24.1正式版下載

DevExpress技術交流群10：532598169      歡迎一起進群討論

配置OpenAI

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

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

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

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

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

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

配置DevExpress組件

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

在HTML編輯控件中顯示文檔

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

添加自定義工具欄

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

我們的工具欄控件可以幫助解決這些現實：

• 它根據Material Design 3標準自動調整元素，因此您不必擔心填充或大小。
• 它允許您將元素分組到頁面中，換句話說可以在單獨的頁面上顯示所有與AI相關的操作，僅在需要時顯示。

HTML編輯器包括一個內置的工具欄，但將隱藏它以便使用自定義工具欄。為此將HTML編輯器的ShowToolbar屬性設置為false，并創建一個帶有適當自定義按鈕的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響應并在 .NET MAUI HTML編輯器中顯示

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

 要獲取HTML內容，我們將使用GetHtmlAsync方法。然后將從前面配置的OpenAI客戶端類調用CompleteChatAsync方法，最后將把OpenAI的響應分配給HTML編輯器：

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

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

總結

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

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