Sunny Comments - Answer Overflow

Sunny

•Created by Sunny on 2/22/2024 in #help

✅Need help with streaming ChatGPT response to Blazor App

Finally got to the bottom of this issue. Created a new project to simplify things. This is the magic that fixed it: requestMessage.Options.Set(new HttpRequestOptionsKey<bool>("WebAssemblyEnableStreamingResponse"), true);

var requestMessage = new HttpRequestMessage(HttpMethod.Post, "api/values/stream");
requestMessage.Options.Set(new HttpRequestOptionsKey<bool>("WebAssemblyEnableStreamingResponse"), true); // Magic that enables streaming

Console.WriteLine("[Frontend] Sending request");
var response = await HttpClient.SendAsync(requestMessage, HttpCompletionOption.ResponseHeadersRead);
Console.WriteLine("[Frontend] Request sent");

var stringBuilder = new StringBuilder();
Console.WriteLine("[Frontend] Deserializing stream");
await foreach (var dataToken in response.Content.ReadFromJsonAsAsyncEnumerable<DataToken>())
{
    Console.WriteLine("[Frontend] Data received: " + dataToken?.Content);

    if (dataToken == null) continue;

    stringBuilder.Append(dataToken.Content);
    this.message = stringBuilder.ToString();

    StateHasChanged();
    await Task.Delay(100);
}
Console.WriteLine("[Frontend] Stream deserialized");

var requestMessage = new HttpRequestMessage(HttpMethod.Post, "api/values/stream");
requestMessage.Options.Set(new HttpRequestOptionsKey<bool>("WebAssemblyEnableStreamingResponse"), true); // Magic that enables streaming

Console.WriteLine("[Frontend] Sending request");
var response = await HttpClient.SendAsync(requestMessage, HttpCompletionOption.ResponseHeadersRead);
Console.WriteLine("[Frontend] Request sent");

var stringBuilder = new StringBuilder();
Console.WriteLine("[Frontend] Deserializing stream");
await foreach (var dataToken in response.Content.ReadFromJsonAsAsyncEnumerable<DataToken>())
{
    Console.WriteLine("[Frontend] Data received: " + dataToken?.Content);

    if (dataToken == null) continue;

    stringBuilder.Append(dataToken.Content);
    this.message = stringBuilder.ToString();

    StateHasChanged();
    await Task.Delay(100);
}
Console.WriteLine("[Frontend] Stream deserialized");

3 replies

CC#

•Created by Sunny on 2/22/2024 in #help

✅Need help with streaming ChatGPT response to Blazor App

And this is my Frontend code that should read the stream and update the UI while stream is running:

JsonSerializerOptions options = new(JsonSerializerDefaults.Web) { Converters = { new JsonStringEnumConverter() } };

var requestMessage = new HttpRequestMessage(HttpMethod.Post, "api/openai/chat/stream")
    {
        Content = JsonContent.Create(new CompletionRequest(selectedModel.ModelId, message), null, options)
    };

var completionResponse = await HttpClient.SendAsync(requestMessage, HttpCompletionOption.ResponseHeadersRead, CancellationTokenSource.Token);
if (!completionResponse.IsSuccessStatusCode)
{
    Snackbar.Add("Failed to send message", Severity.Error);
    return;
}

Messages.Add(new MessageItem(ParticipantRole.Assistant, DateTimeOffset.UtcNow, ""));

// Read the stream
Console.WriteLine("Reading the completion stream");
var stringBuilder = new StringBuilder();
using var stream = await completionResponse.Content.ReadAsStreamAsync(CancellationTokenSource.Token);
await foreach (var partialCompletion in JsonSerializer.DeserializeAsyncEnumerable<PartialCompletion>(stream, options, CancellationTokenSource.Token))
{
    if (partialCompletion?.Content == null) continue;
    Console.WriteLine(partialCompletion.Content);
    stringBuilder.Append(partialCompletion.Content);

    Messages[^1] = new MessageItem(ParticipantRole.Assistant, DateTimeOffset.UtcNow, stringBuilder.ToString().ToHtml());

    await Task.Delay(100);
    StateHasChanged();
}
finalResponse = stringBuilder.ToString().ToHtml();
Console.WriteLine("Completion stream ended");

JsonSerializerOptions options = new(JsonSerializerDefaults.Web) { Converters = { new JsonStringEnumConverter() } };

var requestMessage = new HttpRequestMessage(HttpMethod.Post, "api/openai/chat/stream")
    {
        Content = JsonContent.Create(new CompletionRequest(selectedModel.ModelId, message), null, options)
    };

var completionResponse = await HttpClient.SendAsync(requestMessage, HttpCompletionOption.ResponseHeadersRead, CancellationTokenSource.Token);
if (!completionResponse.IsSuccessStatusCode)
{
    Snackbar.Add("Failed to send message", Severity.Error);
    return;
}

Messages.Add(new MessageItem(ParticipantRole.Assistant, DateTimeOffset.UtcNow, ""));

// Read the stream
Console.WriteLine("Reading the completion stream");
var stringBuilder = new StringBuilder();
using var stream = await completionResponse.Content.ReadAsStreamAsync(CancellationTokenSource.Token);
await foreach (var partialCompletion in JsonSerializer.DeserializeAsyncEnumerable<PartialCompletion>(stream, options, CancellationTokenSource.Token))
{
    if (partialCompletion?.Content == null) continue;
    Console.WriteLine(partialCompletion.Content);
    stringBuilder.Append(partialCompletion.Content);

    Messages[^1] = new MessageItem(ParticipantRole.Assistant, DateTimeOffset.UtcNow, stringBuilder.ToString().ToHtml());

    await Task.Delay(100);
    StateHasChanged();
}
finalResponse = stringBuilder.ToString().ToHtml();
Console.WriteLine("Completion stream ended");

3 replies

Gaming

Programming