Description

eShopLite - Realtime Audio Chat is a reference .NET application implementing an eCommerce site with advanced search features and real-time audio capabilities. The solution combines keyword search, semantic search, and a new chat interface using audio powered by the GPT-4o Realtime Audio API.

The reference application is part of the Generative AI for Beginners .NET series, which aims to provide practical examples and resources for developers interested in generative AI.

• Features
• Architecture diagram
• Getting started
• Deploying to Azure
• Run solution
  • Run locally
  • Run the solution
  • Local development using existing models
  • Telemetry with .NET Aspire and Azure Application Insights
• Resources
• Video Recordings
• Guidance
  • Costs
  • Security Guidelines
• Resources

Features

GitHub CodeSpaces: This project is designed to be opened in GitHub Codespaces, making deployment easy directly in the browser.

Perform Keyword Search:

Perform Semantic Search:

Engage with Real-time Audio Chat for product inquiries:

The Aspire Dashboard to check the running services:

The Azure Resource Group with all the deployed services:

Architecture Diagram

Updated architecture diagram showing all the components:

Note: A new architecture diagram showing the RealtimeStore component must be created.

Getting Started

The solution is located in the ./src folder. The main solution is eShopLite-Realtime-SemanticSearch.

Deploying

Once you've opened the project in Codespaces, or locally, you can deploy it to Azure.

From a Terminal window, open the folder with the clone of this repo and run the following commands.

1. Login to Azure:

   azd auth login

2. Provision and deploy all the resources:

   azd up

   It will prompt you to provide an azd environment name (like "eShopLite"), select a subscription from your Azure account, and select a location where OpenAI the models gpt-4o-mini, gpt-4o-realtime and ADA-002 are available (like "eastus2" or "swedencentral").

3. When azd has finished deploying, you'll see the list of resources created in Azure and a set of URIs in the command output.

4. Visit the store URI, and you should see the eShop Lite app! 🎉

5. Visit the realtimestore URI, and you should see the eShop Lite Audio Chat App! 🎉

6. This is an example of the command output:

Note: The deploy files are located in the ./src/eShopAppHost/infra/ folder. They are generated by the Aspire AppHost project.

GitHub CodeSpaces

• Create a new Codespace using the Code button at the top of the repository.

• The Codespace creation process can take a couple of minutes.

• Once the Codespace is loaded, it should have all the necessary requirements to deploy the solution.

Run Locally

To run the project locally, you'll need to make sure the following tools are installed:

• .NET 9
• Git
• Azure Developer CLI (azd)
• Visual Studio Code or Visual Studio
  • If using Visual Studio Code, install the C# Dev Kit
• .NET Aspire workload: Installed with the Visual Studio installer or the .NET CLI workload.
• An OCI compliant container runtime, such as:
  • Docker Desktop or Podman.

Run the solution

Follow these steps to run the project, locally or in CodeSpaces:

• Navigate to the Aspire Host folder project using the command:

  cd ./src/eShopAppHost/

• Set the user secrets for the Azure OpenAI connection string as explained in the Local development using existing models section.

• Run the project:

  dotnet run

Local development using existing models

In order to use existing models: gpt-4o-mini, gpt-4o-realtime and text-embedding-ada-002, you need to define the specific connection string in the Products and RealtimeStore projects.

Add a user secret with the configuration:

cd src/Products

dotnet user-secrets set "ConnectionStrings:openai" "Endpoint=https://<endpoint>.openai.azure.com/;Key=<key>;"

cd ..
cd src/RealtimeStore

dotnet user-secrets set "ConnectionStrings:openai" "Endpoint=https://<endpoint>.openai.azure.com/;Key=<key>;"

This Azure OpenAI service must contain:

• a gpt-4o-mini model named gpt-4o-mini
• a gpt-4o-realtime-preview model named gpt-4o-realtime-preview
• a text-embedding-ada-002 model named text-embedding-ada-002

To use these services, the program.cs file will load the information from the USer secrets instead of getting this information from the Aspire deploy.

var azureOpenAiClientName = "openai";
builder.AddAzureOpenAIClient(azureOpenAiClientName);

Telemetry with .NET Aspire and Azure Application Insights

The eShopLite solution leverages the Aspire Dashboard and Azure Application Insights to provide comprehensive telemetry and monitoring capabilities

The .NET Aspire Dashboard offers a centralized view of the application's performance, health, and usage metrics. It integrates seamlessly with the Azure OpenAI services, allowing developers to monitor the performance of the gpt-4o-mini and text-embedding-ada-002 models. The dashboard provides real-time insights into the application's behavior, helping to identify and resolve issues quickly.

Azure Application Insights complements the Aspire Dashboard by offering deep diagnostic capabilities and advanced analytics. It collects detailed telemetry data, including request rates, response times, and failure rates, enabling developers to understand how the application is performing under different conditions. Application Insights also provides powerful querying and visualization tools, making it easier to analyze trends and detect anomalies.

By combining the Aspire Dashboard with Azure Application Insights, the eShopLite solution ensures robust monitoring and diagnostics, enhancing the overall reliability and performance of the application.

Guidance

Costs

For Azure OpenAI Services, pricing varies per region and usage, so it isn't possible to predict exact costs for your usage. The majority of the Azure resources used in this infrastructure are on usage-based pricing tiers. However, Azure Container Registry has a fixed cost per registry per day.

You can try the Azure pricing calculator for the resources:

• Azure OpenAI Service: S0 tier, gpt-4o-mini and text-embedding-ada-002 models. Pricing is based on token count. Pricing
• Azure Container App: Consumption tier with 0.5 CPU, 1GiB memory/storage. Pricing is based on resource allocation, and each month allows for a certain amount of free usage. Pricing
• Azure Container Registry: Basic tier. Pricing
• Log analytics: Pay-as-you-go tier. Costs based on data ingested. Pricing
• Azure Application Insights pricing is based on a Pay-As-You-Go model. Pricing.

⚠️ To avoid unnecessary costs, remember to take down your app if it's no longer in use, either by deleting the resource group in the Portal or running azd down.

Security Guidelines

Samples in this templates uses Azure OpenAI Services with ApiKey and Managed Identity for authenticating to the Azure OpenAI service.

The Main Sample uses Managed Identity](https://learn.microsoft.com/entra/identity/managed-identities-azure-resources/overview) for authenticating to the Azure OpenAI service.

Additionally, we have added a GitHub Action that scans the infrastructure-as-code files and generates a report containing any detected issues. To ensure continued best practices in your own repository, we recommend that anyone creating solutions based on our templates ensure that the Github secret scanning setting is enabled.

You may want to consider additional security measures, such as:

• Protecting the Azure Container Apps instance with a firewall and/or Virtual Network.

Resources

• GPT-4o Realtime API Quickstart

• eShopLite Semantic Search Repository

• eShopLite Semantic Search Repository using Azure AI Search

Video Recordings

• eShopLite - Real-time Audio Chat Overview