iT邦幫忙

2024 iThome 鐵人賽

DAY 16
0
Software Development

就是要來點 A.I. 的 TopAOAIConnector App系列 第 16

EP 16 - 檢視串接 AOAI Service 的聊天效果

  • 分享至 

  • xImage
  •  

Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會展開使用 Avalonia UI 技術所建立的 TopAOAIConnector App 。由於使用 Avalonia UI 可以很快速的進行各平台的 桌面 應用程式開發,並且透過此 TopAOAIConnector App 來串接 Azure OpenAI Service 時所需的功能研究。

本篇是 就是要來點 A.I. 的 TopAOAIConnector App 系列文的 EP16。


EP 15 也完成的可以跟 AOAI Service 的 "針對一個內容" 的連續聊天互動基本實作後,可以來討論一下有關 ChatMessage 的部分。

在前一回的內容中有提到 ChatMessage 目前的 Type 定義有五種:

  1. SystemChatMessage (對應 OpenAI 定義的 system。)
  2. UserChatMessage (對應 OpenAI 定義的 user。)
  3. AssistantChatMessage (對應 OpenAI 定義的 assistant。)
  4. ToolChatMessage (對應 OpenAI 定義的 tool。)
  5. FunctionChatMessage (對應 OpenAI 定義的 function,注意此用法即將淘汰,請改用 tool。)

EP15-01

若看倌有興趣也可以對照 OpenAI Platform 所制定的 API 定義看看:
https://platform.openai.com/docs/api-reference/chat/create#chat-create-messages

而在 EP 15 所變更的 AoaiServiceHelper 類別所設計的 Go 方法:

public static async Task<string> Go(List<ChatMessage> chatMessage)
{
    var chatClient = Instance.GetChatClient(deployModelName);

    var completionChat = await chatClient.CompleteChatAsync(chatMessage);

    var result = $"{completionChat.Value.Role}:{Environment.NewLine}{completionChat.Value.Content[0].Text}";
    return result;
}

與在 ChatPageViewModel 類別當中已經設計的 List<ChatMessage> messages 來看,其在 EP 15 的程式作法,都會是字串資料變成上述的 "UserChatMessage" 加入到 List<ChatMessage> messages 當中。

如下圖:
01

而若是直接透過 Add 的話就會預設建立成 UserChatMessage 被加到 List<ChatMessage> messages 中。

02

所以當透過上述的 Go 方法回傳的所回答的結果時,則理論上應該是一種 "ChatCompletion" 才合理,所以就來修正吧!

將上述 Go 方法改成如下程式碼:

public static async Task<ChatCompletion> Go(List<ChatMessage> chatMessage)
{
    var chatClient = Instance.GetChatClient(deployModelName);

    var completionChat = await chatClient.CompleteChatAsync(chatMessage);

    return completionChat;
}

而 completionChat 回傳所需顯示的文字則在 ViewModels/ChatPageViewModel 當中的 BuildAoaiResultToChatText 方法來進行串接處理。所以將 BuildAoaiResultToChatText 方法改成如下程式碼:

private async Task BuildAoaiResultToChatText()
{
    await Utilities.AoaiServiceHelper.Go(messages).ContinueWith(async task =>
    {
        var chatCompletion = await task;
        var textResult = $"{chatCompletion.Role}:{Environment.NewLine}{chatCompletion.Content[0].Text}";

        ChatText = $"{ChatText}{Environment.NewLine}{textResult}{Environment.NewLine}";

        messages.Add(ChatMessage.CreateAssistantMessage(chatCompletion.Content[0].Text));
    });
}

所以這時候就可以來試試看效果囉~~~

按照先前的作法處理,再一次輸入到 "整篇新聞內容所提到的部會首長有幾位?" 來檢視一下:
03-1

以畫面上的狀況來看,紅色框的應為 UserChatMessage 而 綠色框應該為 AssistantChatMessage:
03-2

在 Visaul Studio 中用 Debug Mode 的中斷點來檢視一下,是不是相對應的 ChatMessage 型態都是對的。
03-3

最後加入的當然是一個 AssistantChatMessage:

畫面上的結果:
04-1

在 Visaul Studio 中用 Debug Mode 的中斷點來檢視一下型態:
04-2

檢視該物件的相關的文字:
04-3

確實是最後一次所輸入的文字 "整篇新聞內容所提到的部會首長有幾位?" 的回答。

完成!

下回見囉~~~


上一篇
EP 15 - 使用 AOAI Service 並設計其聊天效果
下一篇
EP 17 - 設定 AOAI 使用聊天時的系統角色
系列文
就是要來點 A.I. 的 TopAOAIConnector App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言