基于Avalonia 11.0.0+ReactiveUI 的跨平臺項目開發(fā)2-功能開發(fā)
基于Avalonia 11.0.0+ReactiveUI 的跨平臺項目開發(fā)2-功能開發(fā)
項目簡介：目標(biāo)是開發(fā)一個跨平臺的AI聊天和其他功能的客戶端平臺。目的來學(xué)習(xí)和了解Avalonia。將這個項目部署在openKylin 1.0 的系統(tǒng)上。
為什么使用Avalonia：之前已經(jīng)了解了基于Avalonia的項目在國產(chǎn)麒麟系統(tǒng)中運行的案例。正是Avalonia在跨平臺的出色表現(xiàn)，學(xué)習(xí)和了解Avalonia這個UI框架顯得十分有必要。本項目采用的是最新穩(wěn)定版本11.0.0-rc1.1。希望通過該項目了解和學(xué)習(xí)Avalonia開發(fā)的朋友可以在我的github上拉取代碼，同時希望大家多多點點star。
https://github.com/raokun/TerraMours.Chat.Ava
項目的基礎(chǔ)框架和通用功能在上一篇博客中介紹過了，想了解的同學(xué)跳轉(zhuǎn)學(xué)習(xí)：
基于Avalonia 11.0.0+ReactiveUI 的跨平臺項目開發(fā)1-通用框架
了解Avalonia創(chuàng)建模板項目-基礎(chǔ)可跳轉(zhuǎn)：
創(chuàng)建Avalonia 模板項目-基礎(chǔ)
本次我主要分享的內(nèi)容是項目中具體功能開發(fā)實現(xiàn)的過程和各技術(shù)的應(yīng)用
1.功能介紹
1.界面交互
第一版的內(nèi)容主要分為以下幾個模塊：
LoadView.axaml?加載界面：系統(tǒng)打開時候的加載界面，用于首頁替換的技術(shù)實踐。可改造成登陸界面。
MainWindow.axaml?首頁
MainView.axaml?主界面
DataGridView.axaml?會話列表
ChatView.axaml?聊天界面
ApiSettingsView.axaml?API配置
2.功能實現(xiàn)
下面我會按照各個模塊來介紹對應(yīng)的功能和實現(xiàn)方法。
1.加載界面
加載界面?是系統(tǒng)的首個加載界面，界面樣式如下：
1.作用和功能：
加載界面是系統(tǒng)在運行前的準(zhǔn)備界面，目前并沒有做什么操作，只是做了個進度條，到100%時跳轉(zhuǎn)首頁。不過這是一個可擴展的實踐。
加載界面完成了首頁的切換的實踐，為后期登錄頁面做好了準(zhǔn)備。同時，加載界面的內(nèi)容，改寫成蒙版，在需要長時間數(shù)據(jù)處理用于限制用戶操作也是不錯的選擇。
2.設(shè)置加載界面為項目運行時首個加載界面
設(shè)置首個加載界面，需要在App.axaml.cs中的OnFrameworkInitializationCompleted方法中設(shè)置?desktop.MainWindow
OnFrameworkInitializationCompleted代碼如下：
3.隱藏窗口的關(guān)閉按鈕，并設(shè)置窗口居中顯示
加載界面不應(yīng)該有關(guān)閉等按鈕，我們用?SystemDecorations=“None”。將?SystemDecorations?屬性設(shè)置為?"None"?可以隱藏窗口的系統(tǒng)裝飾。系統(tǒng)裝飾包括標(biāo)題欄、最小化、最大化和關(guān)閉按鈕等。通過設(shè)置?SystemDecorations?為?"None"，可以使窗口更加定制化和個性化，同時減少了不必要的系統(tǒng)裝飾。
界面應(yīng)該顯示在屏幕正中間。我們用?WindowStartupLocation=“CenterScreen”。設(shè)置?WindowStartupLocation?為?"CenterScreen"?可以使窗口在屏幕上居中顯示。
4.實現(xiàn)進度條
代碼如下：
進度條用到了ProgressBar?的控件，對應(yīng)的官方文檔地址：ProgressBar
控件的屬性：
Value?值通過Binding綁定了ViewModel中的屬性字段Progress。通過**UpdateProgress()**方法，讓Progress的值由0變化到100，模擬加載過程。
代碼如下：
5.加載完成后跳轉(zhuǎn)首頁
界面的跳轉(zhuǎn)，通過Action委托來完成，首先在LoadViewModel中定義?ToMainAction，在上面的UpdateProgress方法完成時執(zhí)行Invoke，而ToMainAction的實現(xiàn)方法，寫在OnFrameworkInitializationCompleted方法中。
ToMainAction的實現(xiàn)方法中，將desktop.MainWindow變更成MainWindow。loadView隱藏，MainWindow顯示。
2.首頁+API配置
加載界面?是承載程序的界面，界面樣式如下：
1.作用和功能：
首頁?主要作用是承載程序的界面，每一個Avalonia項目在創(chuàng)建時會自動創(chuàng)建MainWindow.axaml?在界面axaml中很簡單。承載了MainView?的用戶控件，和API設(shè)置界面。
首頁?包括控制API設(shè)置的數(shù)據(jù)交互、鍵盤的監(jiān)聽事件、系統(tǒng)語言的判斷。
API配置?包括用于OpenAI接口調(diào)用參數(shù)的全部設(shè)置。
2.界面設(shè)計-設(shè)置彈框
界面中使用到了?DialogHost.Avalonia，做彈框的簡單實現(xiàn)。IsOpen?控制彈窗的顯隱性。DialogHost.DialogContent?中填入彈框的顯示內(nèi)容。顯示內(nèi)容為
ApiSettingsView。
而主體部分只有一個Panel，包含著MainView，這使得MainView的界面會占滿整個程序界面。至此，首頁的界面設(shè)計就完成了。
Icon=“/Assets/terramours.ico”?設(shè)置了程序的logo，如下：
3.初始化
MainWindow?在界面加載時要做很多工作。MainWindow的構(gòu)造函數(shù)如下：
MainWindow的構(gòu)造函數(shù)綁定了多個事件的實現(xiàn)方法：
this.Loaded?界面加載時觸發(fā)MainWindow_Loaded?方法，作用是加載本地數(shù)據(jù)和本地配置文件。
this.Closing?程序關(guān)閉時觸發(fā)SaveWindowSizeAndPosition方法，作用是保存當(dāng)前的系統(tǒng)設(shè)置，包括用戶調(diào)整后的界面的長寬和在屏幕的位置，用戶下次打開時程序還會出現(xiàn)在之前的位置。比如，我把系統(tǒng)拉到桌面左上角，把窗口縮小到最小尺寸時候退出程序，下次打開，程序界面還會在之前退出的位置，在桌面左上角以最小尺寸出現(xiàn)。
this.KeyDown?監(jiān)聽鍵盤的輸入事件，當(dāng)按鍵按下時，會觸發(fā)MainWindow_KeyDown方法，用于綁定自定義的快捷鍵。
在MainWindow構(gòu)造函數(shù)中，通過判斷CultureInfo.CurrentCulture，獲取當(dāng)前 操作系統(tǒng)的語言系統(tǒng)，判斷程序應(yīng)該顯示哪個國家的語言。從而確定程序顯示的語言，通過Translate?修改語言相關(guān)配置。是系統(tǒng)國際化的實踐。
4.系統(tǒng)配置-本地保存和加載
系統(tǒng)配置?對應(yīng)AppSettings類，記錄了應(yīng)用程序設(shè)置和?ChatGPT API參數(shù)
系統(tǒng)設(shè)置參數(shù)通過保存到文件settings.json中實現(xiàn)配置的本地化和持久化。
MainWindow_Loaded?的方法實現(xiàn)系統(tǒng)配置加載：
MainWindow_Loaded?的方法中，通過解析settings.json，加載系統(tǒng)配置。
settings.json?的解析和保存
相關(guān)方法如下：
至此，系統(tǒng)配置的開發(fā)就基本完成了。對于這些不需要遠(yuǎn)程同步的基礎(chǔ)配置，保存在本地文件中。
5.國際化
通過Translate方法，根據(jù)當(dāng)前系統(tǒng)語言，改變控制文字顯示的資源文件，實現(xiàn)語言的切換。
關(guān)于國際化的資源文件的創(chuàng)建請看前篇內(nèi)容：基于Avalonia 11.0.0+ReactiveUI 的跨平臺項目開發(fā)1-通用框架
3.主界面
主界面?是項目的核心，包括了以下圖片所有內(nèi)容的布局，它勾勒出了整個程序。中間包括左上角的圖標(biāo)，會話列表，聊天區(qū)域，查詢，配置等等。
1.作用和功能
主界面?的作用，是顯示和完成整個業(yè)務(wù)功能的展示和交互。主界面?將會話列表和聊天窗口左右分開?？刂屏苏麄€程序的排版和布局。
主要分三塊：
程序標(biāo)題logo
會話列表
聊天窗口
2.界面設(shè)計
具體代碼不貼出來了，需要了解的同學(xué)可以fork項目代碼查看，功能區(qū)已經(jīng)標(biāo)注注釋了，方便查看。
3.SplitView控制會話列表顯示
會話列表和聊天窗口?通過SplitView?實現(xiàn)，會話列表在窗口縮小時自動隱藏。通過IsPaneOpen屬性控制。
隱藏效果：
實現(xiàn)方法為OnSizeChanged方法：
當(dāng)窗口寬度小于1295，會修改VMLocator.MainViewModel.LogPainButtonIsVisible為false，實現(xiàn)會話列表隱藏的效果。
4.初始化
MainViewModel控制了程序大部分的按鍵的事件實現(xiàn)，MainViewModel的構(gòu)造函數(shù)如下：
其中，綁定了會話、配置、聊天等功能的按鈕事件。實現(xiàn)業(yè)務(wù)的交互。
5.調(diào)用ChatGpt接口
通過Betalgo.OpenAI?完成接口調(diào)用，是一個開源的nuget包，集成了OpenAI的接口，簡化了調(diào)用邏輯。
本來更傾向于Senmantic Kernel的，是微軟開發(fā)的LLM訓(xùn)練框架，但是代理方面我還沒有很好的解決辦法，后面再替換。
接口調(diào)用方法寫在PostChatAsync方法里，通過post按鈕發(fā)起調(diào)用：
通過創(chuàng)建OpenAIService初始化，Completion接口調(diào)用時使用openAiService.ChatCompletion.CreateCompletion方法。
ChatMessage是上下文的模型，通過創(chuàng)建messages完成上下文的創(chuàng)建，請求參數(shù)都寫在ChatCompletionCreateRequest之中。
目前的第一版使用的CreateCompletion是直接返回的結(jié)果。后面我會優(yōu)化調(diào)用，使用Stream流式輸出。
4.會話列表
會話列表是模擬chatgpt官網(wǎng)的樣式，將聊天按會話的形式歸類。chatgpt官網(wǎng)截圖如下：
1.作用和功能
會話列表將聊天按會話的形式歸類，更好的管理聊天內(nèi)容。
2.界面設(shè)計
因為考慮到后面會有其他類型的AI 類型，決定通過DataGrid實現(xiàn)會話列表，DataGrid的表格類型也能更多的展示數(shù)據(jù)。
會話列表的數(shù)據(jù)共有三個：Id，創(chuàng)建時間，會話標(biāo)題。通過DataGridTextColumn?通過綁定的形式實現(xiàn)。
其中，使用了CustomDateConverter?時間轉(zhuǎn)換器，將Date的顯示格式做轉(zhuǎn)換。
3.數(shù)據(jù)交互
會話列表目前還在優(yōu)化，第一版是通過第一次調(diào)用PostChatAsync時創(chuàng)建的。目前的數(shù)據(jù)存在本地SQLite數(shù)據(jù)庫中。
5.聊天窗口
聊天窗口是程序的工作重心，是展示聊天成果的重要界面。其中用到Markdown.Avalonia的擴展包實現(xiàn)Markdown內(nèi)容的展示。
1.作用和功能
數(shù)據(jù)是核心，聊天窗口是數(shù)據(jù)的展示平臺，作用不容小噓。通過編寫數(shù)據(jù)模板DataTemplate來控制內(nèi)容的展示。呈現(xiàn)chat問答式的結(jié)果。
2.Markdown 風(fēng)格樣式
通過DataTemplate來設(shè)置Markdown 風(fēng)格樣式。代碼如下：
MarkdownScrollViewer.Styles?根據(jù)不同的內(nèi)容設(shè)置不同的樣式。
MarkdownScrollViewer.ContextMenu設(shè)置右鍵菜單。
其中通過ChatBackgroundConverter轉(zhuǎn)換器根據(jù)角色控制背景，ChatBackgroundConverter代碼如下：
3.總結(jié)和待辦事項
avalonia開發(fā)目前網(wǎng)上，特別是國內(nèi)的網(wǎng)站的教程和文章很少，希望能給大家一點學(xué)習(xí)使用avalonia開發(fā)客戶端項目的朋友一點幫助。寫的不對的地方也懇請大家多多留言，我會及時更正，多多交流心得體會。
Todo：
項目發(fā)布，在多平臺下的運行
搭建國產(chǎn)系統(tǒng)虛擬機測試avalonia項目
程序改造成云同步版本，跟我做的web項目互通。
優(yōu)化UI界面
優(yōu)化語言國際化內(nèi)容
目前程序還沒有完全開發(fā)完成。后續(xù)的開發(fā)我會及時跟進。閱讀如遇樣式問題，請前往個人博客瀏覽：https://www.raokun.top
目前web端ChatGPT：https://ai.terramours.site
當(dāng)前開源項目地址：https://github.com/raokun/TerraMours.Chat.Ava
