search

Azure-Samples / azure-search-openai-demo-csharp

A sample app for the Retrieval-Augmented Generation pattern running in Azure, using Azure Cognitive Search for retrieval and Azure OpenAI large language models to power ChatGPT-style and Q&A experiences.
MIT License
552 stars 345 forks source link

Add .NET MAUI Blazor Hybrid frontend app #255

Closed Eilon closed 4 months ago

Eilon commented 6 months ago

Purpose

Adds a .NET MAUI Blazor Hybrid frontend app that re-uses the same Razor Components used in the Blazor Web frontend app. This helps showcase how a .NET MAUI cross-platform app can share the same Azure OpenAI functionality as a web app, and run natively on Windows, macOS, iOS, and Android devices.

Fixes #253

Does this introduce a breaking change?

[ ] Yes [x] No

Pull Request Type

What kind of change does this Pull Request introduce?

[ ] Bugfix [x] Feature [ ] Code style update (formatting, local variables) [x] Refactoring (no functional changes, no api changes) [ ] Documentation content changes [ ] Other... Please describe:

How to Test

  1. Ensure all existing repo pre-reqs are installed for .NET 8 and Visual Studio, including the .NET MAUI workload
  2. Clone repo
  3. Follow the existing steps in the repo to publish the app to Azure
  4. Get the URL of the app that was published to Azure Container Apps (something like https://MY_HOSTED_APP.example.azurecontainerapps.io/)
  5. Update the file app/maui-blazor/MauiProgram.cs to use that URL to set the client.BaseAddress value (there is a 'TODO' note in the file)
  6. Set the .NET MAUI Blazor Hybrid app as the startup project
  7. Run the app on your device of choice (Windows Desktop, iPhone/iPad, MacBook, Android phone/tablet, etc.) and you should see a UI that exactly matches the Blazor Web app, except that the app is running locally (API calls still go out to Azure as usual)
  8. Profit

Other Information

This PR conceptually has a few areas of change:

  1. Almost all of the Razor components in the app/frontend Blazor Web app were moved to a new shared app/SharedWebComponents Razor Class Library (RCL)
  2. The Blazor Web app now references that shared code
  3. There is a new .NET MAUI Blazor Hybrid project that is mostly just the default template code. Almost all of the brand new code in this PR is standard template code. This new project references the same shared RCL to reuse the exact same functionality and implementation
  4. The few notable changes in the apps are:
    1. The PDF viewer logic was put behind a service interface so that it could use a web-based viewer in the Blazor Web app, and in the future a native PDF viewer in the .NET MAUI app
    2. A UI rendering bug was fixed in app/SharedWebComponents/Pages/Chat.razor so that it displays properly on narrow screens (this was a pre-existing issue in the web app, but was very noticable on narrow mobile devices)
    3. Some try/catch statements were added in the speech API calls

cc @BretJohnson @mattleibow @maddymontaquila @lutzroeder

BretJohnson commented 4 months ago

@IEvangelist - We think this is all good now, and have marked it non-draft. Can you please review again and merge when you're comfortable. Also, please review my README text updates - it's not bad, but you may have suggested improvements.

mattleibow commented 4 months ago

I believe I got all the feedback items... I updated the comments to be more descriptive too.

BretJohnson commented 4 months ago

@IEvangelist - we believe we've addressed everything; can you take another look and :shipit: if you think we're ready

mattleibow commented 4 months ago

Exciting stuff!