ievangelist/blazor-azure-openai

The Blazor WebAssembly app that inspired the Microsoft //Build 2023 demo app.

Blazor 💜 OpenAI

Getting Started

Note To run this example, you'll need an Azure subscription with access enabled for the Azure OpenAI service. You can request access here. You can also visit here to get some free Azure credits to get you started.

This example relies on three environment variables:

setx AzureOpenAI__ApiKey "<Your Azure OpenAI API Key>"
setx AzureOpenAI__Endpoint "<Your Azure OpenAI API endpoint>"
setx AzureOpenAI__DeploymentId "<Your Azure OpenAI deploymend id>"

export AzureOpenAI__ApiKey="<Your Azure OpenAI API Key>"
export AzureOpenAI__Endpoint="<Your Azure OpenAI API endpoint>"
export AzureOpenAI__DeploymentId="<Your Azure OpenAI deploymend id>"

Home screen

Voice chat screen

Voice chat screen with navigation menu collapsed

Text-to-speech preferences dialog displayed

Example response text

Example response text continued 2/4

Example response text continued 3/4

Example response text continued 4/4

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Hussein Beygi 💻 🤔

github-actions[bot] 🌍 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

blazor-azure-openai's Issues

Create e2e tests with Playwright

Fixed by c2f3dc9

Make The Demo Multilingual

Since the demo is often for business people and not everybody knows English, the idea is to make the demo multilingual, this way everybody can explore the power of Azure OpenAI in their language.

Site accessibility assessment and task list creation

Site accessibility assessment and task list creation

• Run a11y audits and assessments.
• Create actionable tasks (GitHub issues w/ appropriate labels).
• Prioritize efforts

chat and image in same prompt window

any suggestions as to how we can get chat responses and image responses in the same prompt window and session? since they have different endpoints and clients?

Blazor localization in a razor library

We have a Blazor web application that has the Localization App Toolkit setup and working. Now we have moved some of the controls to a razor library to allow them to easily be shared by more solutions. I was able to configure the Localization for the library, but not able to get the localization to pick up the values for the library. We are interested in this approach to keep everything encapsulated in the library. Any suggestions to get this to work would be appreciated.

Create custom-made logo using image creator

You get the idea!

We can generate custom-made logo

I did these with OpenAI and Blazor logo!

This way the logo of the project itself is created using AI

Issue with IJS Runtime

Hello, I am encountering a problem with setting up a Blazor Web App project (Interactive Auto) .NET8. I get this error message:
InvalidOperationException: Cannot resolve scoped service 'Microsoft.JSInterop.IJSRuntime' from root provider.

I call my component in a client-side page and initialize the rest in Program.cs.

Do you have any suggestions for troubleshooting this issue?

Emoji from stream response isn't displayed as its Unicode literal

The receiving end (Blazor Client app) needs to handle its buffering logic better. Currently, there is a bug where character escape sequences for Unicode characters are parsed as multi-character strings rather than individual characters. The following code needs to determine if the next char from the (char)reader.Read(); is 'u', if so, this means that the next four char will make up the full Unicode representation. For emoji to render correctly, we'll need to construct these six char values into a single char value.

blazor-azure-openai/Azure.OpenAI/Client/Services/OpenAIPromptQueue.cs

Lines 71 to 75 in 6175c92

	if (partialResponse is '\\')
	{
	isEscapeSequence = true;
	continue;
	}

Psuedo-code:

• If the next char is 'u', treat the '\u' as the start of the Unicode sequence.
• Then read the next four char from the reader
• Convert this into a single Unicode char.