.NET Maui实现类ChatGPT流式响应的问题求助

问题现象 #

基于.NET Maui开发本地聊天应用，使用Phi-4 ONNX模型生成回复时，无法实现ChatGPT式的逐字符流式输出：

• 添加用户消息和机器人消息到Messages集合后，UI不会即时更新，需等待OnSendMessage方法完全执行完毕才会刷新
• 提前设置的MessageEntry.Text = string.Empty也不会即时生效，直到方法返回
• 尝试添加await Task.Yield()后问题仍未解决，调试显示Messages数据已更新，但UI无变化

核心原因 #

1. UI线程被阻塞：HandlePhi4Message中的while循环是同步执行的，generator.GenerateNextToken()为同步操作，持续占用UI线程，导致UI刷新任务被排队，无法及时执行。
2. 数据变更未通知UI：ChatMessage类未实现INotifyPropertyChanged接口，当Text属性逐字符更新时，UI无法感知到变化，自然不会刷新。
3. Task.Yield()时机错误：仅在循环外调用一次Yield，只能让出一次UI线程，后续循环仍会持续占用UI线程，无法让UI获得刷新机会。

解决步骤 #

1. 让ChatMessage实现INotifyPropertyChanged #

确保属性变更时能通知UI：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class ChatMessage : INotifyPropertyChanged
{
    private string _text;
    
    public string Id { get; set; }
    
    public string Text
    {
        get => _text;
        set
        {
            if (_text != value)
            {
                _text = value;
                OnPropertyChanged();
            }
        }
    }
    
    public bool IsUser { get; set; }
    public DateTime Timestamp { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 确保Messages是ObservableCollection #

普通List无法在添加元素时通知UI，需改用ObservableCollection：

public ObservableCollection<ChatMessage> Messages { get; set; } = new ObservableCollection<ChatMessage>();

3. 在循环内部让出UI线程 #

每次生成token后，通过await Task.Delay(1)或await Task.Yield()让UI线程有机会处理刷新任务：

private async Task HandlePhi4Message(string userQ)
{
    // ... 原有代码省略 ...

    while (!generator.IsDone())
    {
        generator.GenerateNextToken();
        var output = tokenizerStream.Decode(generator.GetSequence(0)[^1]);
        Console.Write(output);
        
        var message = Messages.FirstOrDefault(m => m.Id == responseGuid);
        if (message != null)
        {
            message.Text += output;
        }

        // 让出UI线程，允许UI刷新
        await Task.Delay(1);
    }
}

4. 确保输入框即时清空 #

在设置MessageEntry.Text后，先让出UI线程，让清空操作优先执行：

private async void OnSendMessage(object sender, EventArgs e)
{
    // ... 原有代码省略 ...

    Messages.Add(userMessage);

    MessageEntry.Text = string.Empty;
    await Task.Yield(); // 让UI先处理清空操作

    await HandlePhi4Message(messageText);
}

内容的提问来源于stack exchange，提问作者Joey