How do I run multiple OpenAI API calls concurrently and update the ASP.NET MVC view upon completion?

Below is an explanation addressing both of your questions:

---

1. Asynchronous Processing

Your current code is calling an asynchronous method but then awaiting each task immediately inside the loop:

CSHARPCopied
foreach (ChatMessage msg in messages)
{
    List<ChatMessage> tmpMessage = new List<ChatMessage>();
    tmpMessage.Add(msg);

    Task<ClientResult<ChatCompletion>> chatResult = client.CompleteChatAsync(tmpMessage, chatOptions);

    await chatResult;

    if (chatResult.IsCompleted && chatResult.Result.Value != null)
    {
        output.Add(chatResult.Result.Value.Content[0].Text);
    }
}

Because you call await chatResult during each iteration, these tasks execute sequentially rather than in parallel. Although each call is made asynchronously, you wait for it to complete before moving to the next one.

To run all tasks in parallel, you should create and start all tasks first, then wait for all of them to finish using something like Task.WhenAll. For example:

CSHARPCopied
// Start all tasks concurrently
List<Task<ClientResult<ChatCompletion>>> tasks = messages.Select(msg =>
{
    List<ChatMessage> tmpMessage = new List<ChatMessage> { msg };
    return client.CompleteChatAsync(tmpMessage, chatOptions);
}).ToList();

// Await all tasks to complete
ClientResult<ChatCompletion>[] results = await Task.WhenAll(tasks);

// Process the results
foreach (var result in results)
{
    if (result.Value != null)
    {
        output.Add(result.Value.Content[0].Text);
    }
}

This approach issues all requests without waiting for each one to complete before issuing the next. Then, Task.WhenAll awaits all the tasks concurrently.

---

2. Refreshing the View in ASP.NET MVC

In an MVC web app, the server-side action completes only when all the processing (tasks, etc.) are done and sends back a response (often a view or a JSON result). The browser will update its view only when it receives the completed response. If your page "just sits there", consider the following:

• Page Rendering Delay: If your controller action takes a long time (because it is waiting for all asynchronous events), the browser will continue to show a loading indicator until a response is returned.

• Client-Side Update: If you want to update the view incrementally (e.g., displaying intermediate progress), you cannot do that by returning a single full-page view at the end. You might either use:

  • AJAX Calls: Use JavaScript (or a framework like jQuery) to call an action method that returns JSON and then update parts of the page.
  • SignalR: For real-time updates, SignalR can push server updates to the browser.

• Return a Partial or a Redirect: Once all processing is complete, ensuring that your controller returns the appropriate View (or PartialView) will cause the browser to render the updated content. For example:

  CSHARPCopied
  // Controller action after processing the output list
  public async Task<ActionResult> ProcessChats()
  {
      // [Run asynchronous tasks and build the output list]
  
      return View("ResultView", output);
  }

  Make sure your browser navigates to the result page (or the view is correctly updated if you are using AJAX).

Tip: If you are doing heavy processing on the server, consider offloading the work to a background process and then updating the client via polling or SignalR so that the webpage remains responsive.

---

By creating your tasks for parallel execution and using a client-side approach to update the view when the results are ready, you can make your application both truly asynchronous in its processing and responsive in its user interface.