Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/azure-samples/eshoplite-realtimeaudio
eShopLite - Semantic Search is a reference .NET application implementing an eCommerce site with Search features using Keyword Search and Semantic Search with a chat that uses gpt-40-realtime audio
https://github.com/azure-samples/eshoplite-realtimeaudio
ai azd-templates azure openai rag realtime-audio
Last synced: 10 days ago
JSON representation
eShopLite - Semantic Search is a reference .NET application implementing an eCommerce site with Search features using Keyword Search and Semantic Search with a chat that uses gpt-40-realtime audio
- Host: GitHub
- URL: https://github.com/azure-samples/eshoplite-realtimeaudio
- Owner: Azure-Samples
- License: mit
- Created: 2025-01-20T17:41:30.000Z (20 days ago)
- Default Branch: main
- Last Pushed: 2025-01-21T18:17:07.000Z (19 days ago)
- Last Synced: 2025-01-30T12:17:09.327Z (10 days ago)
- Topics: ai, azd-templates, azure, openai, rag, realtime-audio
- Language: C#
- Homepage: https://aka.ms/netaieshopliterealtimechat
- Size: 7.01 MB
- Stars: 5
- Watchers: 11
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
[](/LICENSE)
[](https://twitter.com/elbruno)
## 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**.
- [Features](#features)
- [Architecture diagram](#architecture-diagram)
- [Getting started](#getting-started)
- [Deploying to Azure](#deploying)
- Run solution
- [Run locally](#run-locally)
- [Run the solution](#run-the-solution)
- [.NET Aspire Azure Resources creation](#net-aspire-azure-resources-creation)
- [Local dev using an existing model](#local-development-using-an-existing-gpt-4o-model)
- [Telemetry with .NET Aspire and Azure Application Insights](#telemetry-with-net-aspire-and-azure-application-insights)
- [Resources](#resources)
- [Video Recordings](#video-recordings)
- [Guidance](#guidance)
- [Costs](#costs)
- [Security Guidelines](#security-guidelines)
- [Resources](#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](./src/eShopLite-Realtime-SemanticSearch)**.
## Deploying
Once you've opened the project in [Codespaces](#github-codespaces), or [locally](#run-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:
```shell
azd auth login
```
1. Provision and deploy all the resources:
```shell
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](https://azure.microsoft.com/explore/global-infrastructure/products-by-region/?products=cognitive-services®ions=all) (like "eastus2").
1. When `azd` has finished deploying, you'll see the list of resources created in Azure and a set of URIs in the command output.
1. Visit the **store** URI, and you should see the **eShop Lite app**! 🎉
1. Visit the **realtimestore** URI, and you should see the **eShop Lite Audio Chat App**! 🎉
1. 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](https://dotnet.microsoft.com/downloads/)
- [Git](https://git-scm.com/downloads)
- [Azure Developer CLI (azd)](https://aka.ms/install-azd)
- [Visual Studio Code](https://code.visualstudio.com/Download) or [Visual Studio](https://visualstudio.microsoft.com/downloads/)
- If using Visual Studio Code, install the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit)
- .NET Aspire workload:
Installed with the [Visual Studio installer](https://learn.microsoft.com/en-us/dotnet/aspire/fundamentals/setup-tooling?tabs=windows&pivots=visual-studio#install-net-aspire) or the [.NET CLI workload](https://learn.microsoft.com/en-us/dotnet/aspire/fundamentals/setup-tooling?tabs=windows&pivots=visual-studio#install-net-aspire).
- An OCI compliant container runtime, such as:
- [Docker Desktop](https://www.docker.com/products/docker-desktop/) or [Podman](https://podman.io/).
### Run the solution
Follow these steps to run the project, locally or in CodeSpaces:
- Navigate to the Aspire Host folder project using the command:
```bash
cd ./src/eShopAppHost/
```
- If you are running the project in Codespaces, you need to run this command:
```bash
dotnet dev-certs https --trust
```
- By default the AppHost project creates the necessary resources on Azure. Check the **[.NET Aspire Azure Resources creation](#net-aspire-azure-resources-creation)** section to learn how to configure the project to create Azure resources.
- Run the project:
```bash
dotnet run
````
Check the [Video Resources](#resources) for a step-by-step on how to run this project.
> **Note:** Working with .NET Aspire in GitHub Codespaces is not fully supported yet. As a developer you need to perform a lot of manual steps to access the .NET Aspire portal, like changing ports to public, copy the access token and more. The .NET Aspire version 9.1 will improve the whole developer experience. We will update these steps when the version 9.1 is released.
## .NET Aspire Azure Resources creation
When utilizing Azure resources in your local development environment, you need to:
- Authenticate to the Azure Tenant where the resources will be created. Run the following command to connect with your Azure tenant:
```bash
az login
```
- Provide the necessary Configuration values are specified under the Azure section in the `eShopAppHost` project:
- CredentialSource: Delegates to the [AzureCliCredential](https://learn.microsoft.com/dotnet/api/azure.identity.azureclicredential).
- SubscriptionId: The Azure subscription ID.
- AllowResourceGroupCreation: A boolean value that indicates whether to create a new resource group.
- ResourceGroup: The name of the resource group to use.
- Location: The Azure region to use.
Consider the following example for the *appsettings.json* file in the eShopAppHost project configuration:
```json
{
"Azure": {
"CredentialSource": "AzureCli",
"SubscriptionId": "",
"AllowResourceGroupCreation": true,
"ResourceGroup": "",
"Location": ""
}
}
```
Check [.NET Aspire Azure hosting integrations](https://learn.microsoft.com/en-us/dotnet/aspire/azure/local-provisioning#net-aspire-azure-hosting-integrations) for more information on how .NET Aspire create the necessary cloud resources for local development.
### Local development using an existing gpt-4o-mini and ada-002 model
In order to use existing models: gpt-4o-mini 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:
```bash
cd src/Products
dotnet user-secrets set "ConnectionStrings:openai" "Endpoint=https://.openai.azure.com/;Key=;"
cd ..
cd src/RealtimeStore
dotnet user-secrets set "ConnectionStrings:openai" "Endpoint=https://.openai.azure.com/;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.
```csharp
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](https://azure.com/e/2176802ea14941e4959eae8ad335aeb5) for the resources:
- Azure OpenAI Service: S0 tier, gpt-4o-mini and text-embedding-ada-002 models. Pricing is based on token count. [Pricing](https://azure.microsoft.com/pricing/details/cognitive-services/openai-service/)
- 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](https://azure.microsoft.com/pricing/details/container-apps/)
- Azure Container Registry: Basic tier. [Pricing](https://azure.microsoft.com/pricing/details/container-registry/)
- Log analytics: Pay-as-you-go tier. Costs based on data ingested. [Pricing](https://azure.microsoft.com/pricing/details/monitor/)
- Azure Application Insights pricing is based on a Pay-As-You-Go model. [Pricing](https://learn.microsoft.com/azure/azure-monitor/logs/cost-logs).
⚠️ 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](https://learn.microsoft.com/entra/identity/managed-identities-azure-resources/overview) 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](https://github.com/microsoft/security-devops-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](https://docs.github.com/code-security/secret-scanning/about-secret-scanning) setting is enabled.
You may want to consider additional security measures, such as:
- Protecting the Azure Container Apps instance with a [firewall](https://learn.microsoft.com/azure/container-apps/waf-app-gateway) and/or [Virtual Network](https://learn.microsoft.com/azure/container-apps/networking?tabs=workload-profiles-env%2Cazure-cli).
## Resources
- [GPT-4o Realtime API Quickstart](https://learn.microsoft.com/en-us/azure/ai-services/openai/realtime-audio-quickstart)
- [eShopLite Semantic Search Repository](https://aka.ms/netaieshoplitesemanticsearch)
- [eShopLite Semantic Search Repository using Azure AI Search](https://aka.ms/netaieshoplitesemanticsearchazureaisearch)
## Video Recordings
- [Deploy eShopLite with Real-time Audio Chat](#coming-soon)
*Note: Add a video showing real-time audio chat interactions once available.*