diff --git a/samples/AzureAI/AzureAI.sln b/samples/AzureAI/AzureAI.sln new file mode 100644 index 00000000..786661d9 --- /dev/null +++ b/samples/AzureAI/AzureAI.sln @@ -0,0 +1,36 @@ +Microsoft Visual Studio Solution File, Format Version 12.00 +# Visual Studio Version 17 +VisualStudioVersion = 17.12.35108.284 +MinimumVisualStudioVersion = 10.0.40219.1 +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AzureAISample.AppHost", "AzureAISample.AppHost\AzureAISample.AppHost.csproj", "{586D5E1E-9845-48AE-A066-DE2FE7BB8DB9}" +EndProject +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AzureAISample.ServiceDefaults", "AzureAISample.ServiceDefaults\AzureAISample.ServiceDefaults.csproj", "{4B02F6F3-7878-4E62-8927-8ED12D77F3C6}" +EndProject +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AzureAISample.Web", "AzureAISample.Web\AzureAISample.Web.csproj", "{EEBB61C8-05EF-4962-BDBE-8DF274FF4225}" +EndProject +Global + GlobalSection(SolutionConfigurationPlatforms) = preSolution + Debug|Any CPU = Debug|Any CPU + Release|Any CPU = Release|Any CPU + EndGlobalSection + GlobalSection(ProjectConfigurationPlatforms) = postSolution + {586D5E1E-9845-48AE-A066-DE2FE7BB8DB9}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {586D5E1E-9845-48AE-A066-DE2FE7BB8DB9}.Debug|Any CPU.Build.0 = Debug|Any CPU + {586D5E1E-9845-48AE-A066-DE2FE7BB8DB9}.Release|Any CPU.ActiveCfg = Release|Any CPU + {586D5E1E-9845-48AE-A066-DE2FE7BB8DB9}.Release|Any CPU.Build.0 = Release|Any CPU + {4B02F6F3-7878-4E62-8927-8ED12D77F3C6}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {4B02F6F3-7878-4E62-8927-8ED12D77F3C6}.Debug|Any CPU.Build.0 = Debug|Any CPU + {4B02F6F3-7878-4E62-8927-8ED12D77F3C6}.Release|Any CPU.ActiveCfg = Release|Any CPU + {4B02F6F3-7878-4E62-8927-8ED12D77F3C6}.Release|Any CPU.Build.0 = Release|Any CPU + {EEBB61C8-05EF-4962-BDBE-8DF274FF4225}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {EEBB61C8-05EF-4962-BDBE-8DF274FF4225}.Debug|Any CPU.Build.0 = Debug|Any CPU + {EEBB61C8-05EF-4962-BDBE-8DF274FF4225}.Release|Any CPU.ActiveCfg = Release|Any CPU + {EEBB61C8-05EF-4962-BDBE-8DF274FF4225}.Release|Any CPU.Build.0 = Release|Any CPU + EndGlobalSection + GlobalSection(SolutionProperties) = preSolution + HideSolutionNode = FALSE + EndGlobalSection + GlobalSection(ExtensibilityGlobals) = postSolution + SolutionGuid = {CE218107-A75B-4AA6-B28C-232AEF3CEBCB} + EndGlobalSection +EndGlobal diff --git a/samples/AzureAI/AzureAISample.AppHost/AzureAISample.AppHost.csproj b/samples/AzureAI/AzureAISample.AppHost/AzureAISample.AppHost.csproj new file mode 100644 index 00000000..a5d2b806 --- /dev/null +++ b/samples/AzureAI/AzureAISample.AppHost/AzureAISample.AppHost.csproj @@ -0,0 +1,22 @@ + + + + Exe + net8.0 + enable + enable + true + e2081e2b-b18b-4e5a-84ce-87dd05d7ac47 + + + + + + + + + + + + + diff --git a/samples/AzureAI/AzureAISample.AppHost/Program.cs b/samples/AzureAI/AzureAISample.AppHost/Program.cs new file mode 100644 index 00000000..7c21a127 --- /dev/null +++ b/samples/AzureAI/AzureAISample.AppHost/Program.cs @@ -0,0 +1,15 @@ +var builder = DistributedApplication.CreateBuilder(args); + +// Azure OpenAI creates deployments for each model version. This is the name of the deployment to use. +var deploymentName = "mygpt4"; +var openai = builder.AddAzureOpenAI("openai") + .AddDeployment( + new(deploymentName, "gpt-4o", "2024-05-13") + ); + +builder.AddProject("webfrontend") + .WithExternalHttpEndpoints() + .WithReference(openai) + .WithEnvironment("AI_DeploymentName", deploymentName); + +builder.Build().Run(); diff --git a/samples/AzureAI/AzureAISample.AppHost/Properties/launchSettings.json b/samples/AzureAI/AzureAISample.AppHost/Properties/launchSettings.json new file mode 100644 index 00000000..29dd6367 --- /dev/null +++ b/samples/AzureAI/AzureAISample.AppHost/Properties/launchSettings.json @@ -0,0 +1,29 @@ +{ + "$schema": "https://json.schemastore.org/launchsettings.json", + "profiles": { + "https": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "applicationUrl": "https://localhost:17002;http://localhost:15032", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development", + "DOTNET_ENVIRONMENT": "Development", + "DOTNET_DASHBOARD_OTLP_ENDPOINT_URL": "https://localhost:21094", + "DOTNET_RESOURCE_SERVICE_ENDPOINT_URL": "https://localhost:22233" + } + }, + "http": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "applicationUrl": "http://localhost:15032", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development", + "DOTNET_ENVIRONMENT": "Development", + "DOTNET_DASHBOARD_OTLP_ENDPOINT_URL": "http://localhost:19155", + "DOTNET_RESOURCE_SERVICE_ENDPOINT_URL": "http://localhost:20082" + } + } + } +} diff --git a/samples/AzureAI/AzureAISample.AppHost/appsettings.Development.json b/samples/AzureAI/AzureAISample.AppHost/appsettings.Development.json new file mode 100644 index 00000000..6824536a --- /dev/null +++ b/samples/AzureAI/AzureAISample.AppHost/appsettings.Development.json @@ -0,0 +1,14 @@ +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "Azure": { + "SubscriptionId": "__sub__id__", + "AllowResourceGroupCreation": true, + "ResourceGroup": "__Name_of_rg__", + "Location": "__azure_region_such_as_WestUS__" + } +} diff --git a/samples/AzureAI/AzureAISample.AppHost/appsettings.json b/samples/AzureAI/AzureAISample.AppHost/appsettings.json new file mode 100644 index 00000000..31c092aa --- /dev/null +++ b/samples/AzureAI/AzureAISample.AppHost/appsettings.json @@ -0,0 +1,9 @@ +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning", + "Aspire.Hosting.Dcp": "Warning" + } + } +} diff --git a/samples/AzureAI/AzureAISample.ServiceDefaults/AzureAISample.ServiceDefaults.csproj b/samples/AzureAI/AzureAISample.ServiceDefaults/AzureAISample.ServiceDefaults.csproj new file mode 100644 index 00000000..ae385946 --- /dev/null +++ b/samples/AzureAI/AzureAISample.ServiceDefaults/AzureAISample.ServiceDefaults.csproj @@ -0,0 +1,22 @@ + + + + net8.0 + enable + enable + true + + + + + + + + + + + + + + + diff --git a/samples/AzureAI/AzureAISample.ServiceDefaults/Extensions.cs b/samples/AzureAI/AzureAISample.ServiceDefaults/Extensions.cs new file mode 100644 index 00000000..ce94dc2c --- /dev/null +++ b/samples/AzureAI/AzureAISample.ServiceDefaults/Extensions.cs @@ -0,0 +1,111 @@ +using Microsoft.AspNetCore.Builder; +using Microsoft.AspNetCore.Diagnostics.HealthChecks; +using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.Diagnostics.HealthChecks; +using Microsoft.Extensions.Logging; +using OpenTelemetry; +using OpenTelemetry.Metrics; +using OpenTelemetry.Trace; + +namespace Microsoft.Extensions.Hosting; + +// Adds common .NET Aspire services: service discovery, resilience, health checks, and OpenTelemetry. +// This project should be referenced by each service project in your solution. +// To learn more about using this project, see https://aka.ms/dotnet/aspire/service-defaults +public static class Extensions +{ + public static IHostApplicationBuilder AddServiceDefaults(this IHostApplicationBuilder builder) + { + builder.ConfigureOpenTelemetry(); + + builder.AddDefaultHealthChecks(); + + builder.Services.AddServiceDiscovery(); + + builder.Services.ConfigureHttpClientDefaults(http => + { + // Turn on resilience by default + http.AddStandardResilienceHandler(); + + // Turn on service discovery by default + http.AddServiceDiscovery(); + }); + + return builder; + } + + public static IHostApplicationBuilder ConfigureOpenTelemetry(this IHostApplicationBuilder builder) + { + builder.Logging.AddOpenTelemetry(logging => + { + logging.IncludeFormattedMessage = true; + logging.IncludeScopes = true; + }); + + builder.Services.AddOpenTelemetry() + .WithMetrics(metrics => + { + metrics.AddAspNetCoreInstrumentation() + .AddHttpClientInstrumentation() + .AddRuntimeInstrumentation(); + }) + .WithTracing(tracing => + { + tracing.AddAspNetCoreInstrumentation() + // Uncomment the following line to enable gRPC instrumentation (requires the OpenTelemetry.Instrumentation.GrpcNetClient package) + //.AddGrpcClientInstrumentation() + .AddHttpClientInstrumentation(); + }); + + builder.AddOpenTelemetryExporters(); + + return builder; + } + + private static IHostApplicationBuilder AddOpenTelemetryExporters(this IHostApplicationBuilder builder) + { + var useOtlpExporter = !string.IsNullOrWhiteSpace(builder.Configuration["OTEL_EXPORTER_OTLP_ENDPOINT"]); + + if (useOtlpExporter) + { + builder.Services.AddOpenTelemetry().UseOtlpExporter(); + } + + // Uncomment the following lines to enable the Azure Monitor exporter (requires the Azure.Monitor.OpenTelemetry.AspNetCore package) + //if (!string.IsNullOrEmpty(builder.Configuration["APPLICATIONINSIGHTS_CONNECTION_STRING"])) + //{ + // builder.Services.AddOpenTelemetry() + // .UseAzureMonitor(); + //} + + return builder; + } + + public static IHostApplicationBuilder AddDefaultHealthChecks(this IHostApplicationBuilder builder) + { + builder.Services.AddHealthChecks() + // Add a default liveness check to ensure app is responsive + .AddCheck("self", () => HealthCheckResult.Healthy(), ["live"]); + + return builder; + } + + public static WebApplication MapDefaultEndpoints(this WebApplication app) + { + // Adding health checks endpoints to applications in non-development environments has security implications. + // See https://aka.ms/dotnet/aspire/healthchecks for details before enabling these endpoints in non-development environments. + if (app.Environment.IsDevelopment()) + { + // All health checks must pass for app to be considered ready to accept traffic after starting + app.MapHealthChecks("/health"); + + // Only health checks tagged with the "live" tag must pass for app to be considered alive + app.MapHealthChecks("/alive", new HealthCheckOptions + { + Predicate = r => r.Tags.Contains("live") + }); + } + + return app; + } +} diff --git a/samples/AzureAI/AzureAISample.Web/AzureAISample.Web.csproj b/samples/AzureAI/AzureAISample.Web/AzureAISample.Web.csproj new file mode 100644 index 00000000..1f91e569 --- /dev/null +++ b/samples/AzureAI/AzureAISample.Web/AzureAISample.Web.csproj @@ -0,0 +1,17 @@ + + + + net8.0 + enable + enable + + + + + + + + + + + diff --git a/samples/AzureAI/AzureAISample.Web/Components/App.razor b/samples/AzureAI/AzureAISample.Web/Components/App.razor new file mode 100644 index 00000000..e137e476 --- /dev/null +++ b/samples/AzureAI/AzureAISample.Web/Components/App.razor @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/samples/AzureAI/AzureAISample.Web/Components/Layout/MainLayout.razor b/samples/AzureAI/AzureAISample.Web/Components/Layout/MainLayout.razor new file mode 100644 index 00000000..5a24bb13 --- /dev/null +++ b/samples/AzureAI/AzureAISample.Web/Components/Layout/MainLayout.razor @@ -0,0 +1,23 @@ +@inherits LayoutComponentBase + +
+
+ +
+ +
+
+ About +
+ +
+ @Body +
+
+
+ +
+ An unhandled error has occurred. + Reload + 🗙 +
diff --git a/samples/AzureAI/AzureAISample.Web/Components/Layout/MainLayout.razor.css b/samples/AzureAI/AzureAISample.Web/Components/Layout/MainLayout.razor.css new file mode 100644 index 00000000..038baf17 --- /dev/null +++ b/samples/AzureAI/AzureAISample.Web/Components/Layout/MainLayout.razor.css @@ -0,0 +1,96 @@ +.page { + position: relative; + display: flex; + flex-direction: column; +} + +main { + flex: 1; +} + +.sidebar { + background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); +} + +.top-row { + background-color: #f7f7f7; + border-bottom: 1px solid #d6d5d5; + justify-content: flex-end; + height: 3.5rem; + display: flex; + align-items: center; +} + + .top-row ::deep a, .top-row ::deep .btn-link { + white-space: nowrap; + margin-left: 1.5rem; + text-decoration: none; + } + + .top-row ::deep a:hover, .top-row ::deep .btn-link:hover { + text-decoration: underline; + } + + .top-row ::deep a:first-child { + overflow: hidden; + text-overflow: ellipsis; + } + +@media (max-width: 640.98px) { + .top-row { + justify-content: space-between; + } + + .top-row ::deep a, .top-row ::deep .btn-link { + margin-left: 0; + } +} + +@media (min-width: 641px) { + .page { + flex-direction: row; + } + + .sidebar { + width: 250px; + height: 100vh; + position: sticky; + top: 0; + } + + .top-row { + position: sticky; + top: 0; + z-index: 1; + } + + .top-row.auth ::deep a:first-child { + flex: 1; + text-align: right; + width: 0; + } + + .top-row, article { + padding-left: 2rem !important; + padding-right: 1.5rem !important; + } +} + +#blazor-error-ui { + background: lightyellow; + bottom: 0; + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); + display: none; + left: 0; + padding: 0.6rem 1.25rem 0.7rem 1.25rem; + position: fixed; + width: 100%; + z-index: 1000; +} + + #blazor-error-ui .dismiss { + cursor: pointer; + position: absolute; + right: 0.75rem; + top: 0.5rem; + } diff --git a/samples/AzureAI/AzureAISample.Web/Components/Layout/NavMenu.razor b/samples/AzureAI/AzureAISample.Web/Components/Layout/NavMenu.razor new file mode 100644 index 00000000..f94fa827 --- /dev/null +++ b/samples/AzureAI/AzureAISample.Web/Components/Layout/NavMenu.razor @@ -0,0 +1,24 @@ +
+
+ AzureAI +
+
+ + + +
+ +
diff --git a/samples/AzureAI/AzureAISample.Web/Components/Layout/NavMenu.razor.css b/samples/AzureAI/AzureAISample.Web/Components/Layout/NavMenu.razor.css new file mode 100644 index 00000000..d5537676 --- /dev/null +++ b/samples/AzureAI/AzureAISample.Web/Components/Layout/NavMenu.razor.css @@ -0,0 +1,106 @@ +.navbar-toggler { + appearance: none; + cursor: pointer; + width: 3.5rem; + height: 2.5rem; + color: white; + position: absolute; + top: 0.5rem; + right: 1rem; + border: 1px solid rgba(255, 255, 255, 0.1); + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1); +} + +.navbar-toggler:checked { + background-color: rgba(255, 255, 255, 0.5); +} + +.top-row { + height: 3.5rem; + background-color: rgba(0,0,0,0.4); +} + +.navbar-brand { + font-size: 1.1rem; +} + +.bi { + display: inline-block; + position: relative; + width: 1.25rem; + height: 1.25rem; + margin-right: 0.75rem; + top: -1px; + background-size: cover; +} + +.bi-house-door-fill { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); +} + +.bi-plus-square-fill { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M26.807 9.569A4.68 4.68 0 0 1 30 14.005c0 2.072-1.351 3.813-3.224 4.436.04.252.08.513.08.785 0 2.595-2.092 4.698-4.674 4.698-1.102 0-2.093-.403-2.893-1.037A3.65 3.65 0 0 1 15.984 25c-1.462 0-2.713-.865-3.304-2.113a4.58 4.58 0 0 1-2.893 1.037c-2.582 0-4.675-2.103-4.675-4.698 0-.262.038-.506.076-.758l.004-.027A4.68 4.68 0 0 1 2 14.005c0-2.072 1.341-3.812 3.203-4.446a5 5 0 0 1-.08-.785c0-2.595 2.093-4.698 4.675-4.698 1.101 0 2.093.403 2.893 1.036A3.65 3.65 0 0 1 15.996 3c1.472 0 2.723.865 3.324 2.123a4.58 4.58 0 0 1 2.893-1.037c2.582 0 4.675 2.103 4.675 4.698 0 .262-.038.506-.076.758zM7 26.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0'/%3E%3C/svg%3E"); +} + +.bi-thought-cloud-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' class='bi bi-list-nested' viewBox='0 0 32 32'%3E%3Cpath d='M26.807 9.569A4.68 4.68 0 0 1 30 14.005c0 2.072-1.351 3.813-3.224 4.436.04.252.08.513.08.785 0 2.595-2.092 4.698-4.674 4.698-1.102 0-2.093-.403-2.893-1.037A3.65 3.65 0 0 1 15.984 25c-1.462 0-2.713-.865-3.304-2.113a4.58 4.58 0 0 1-2.893 1.037c-2.582 0-4.675-2.103-4.675-4.698 0-.262.038-.506.076-.758l.004-.027A4.68 4.68 0 0 1 2 14.005c0-2.072 1.341-3.812 3.203-4.446a5 5 0 0 1-.08-.785c0-2.595 2.093-4.698 4.675-4.698 1.101 0 2.093.403 2.893 1.036A3.65 3.65 0 0 1 15.996 3c1.472 0 2.723.865 3.324 2.123a4.58 4.58 0 0 1 2.893-1.037c2.582 0 4.675 2.103 4.675 4.698 0 .262-.038.506-.076.758zM7 26.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0'/%3E%3C/svg%3E"); +} + +.bi-list-nested { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); +} + +.nav-item { + font-size: 0.9rem; + padding-bottom: 0.5rem; +} + + .nav-item:first-of-type { + padding-top: 1rem; + } + + .nav-item:last-of-type { + padding-bottom: 1rem; + } + + .nav-item ::deep a { + color: #d7d7d7; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; + } + +.nav-item ::deep a.active { + background-color: rgba(255,255,255,0.37); + color: white; +} + +.nav-item ::deep a:hover { + background-color: rgba(255,255,255,0.1); + color: white; +} + +.nav-scrollable { + display: none; +} + +.navbar-toggler:checked ~ .nav-scrollable { + display: block; +} + +@media (min-width: 641px) { + .navbar-toggler { + display: none; + } + + .nav-scrollable { + /* Never collapse the sidebar for wide screens */ + display: block; + + /* Allow sidebar to scroll for tall menus */ + height: calc(100vh - 3.5rem); + overflow-y: auto; + } +} diff --git a/samples/AzureAI/AzureAISample.Web/Components/Pages/Chat.razor b/samples/AzureAI/AzureAISample.Web/Components/Pages/Chat.razor new file mode 100644 index 00000000..0f7883ec --- /dev/null +++ b/samples/AzureAI/AzureAISample.Web/Components/Pages/Chat.razor @@ -0,0 +1,31 @@ +@page "/chat" +@rendermode InteractiveServer + + +Chat Demo + +

Chat

+ +

Limerick generator, give a topic and AI will generate a limerick

+
+
+
+ @for (var i = 0; i < _sampleChatService.Messages.Count; i++) + { + var id = $"message{i}"; + var state = _sampleChatService.Messages[i]!; + + } +
+
+ @if (_pendingRequestCount > 0) + { +
+ Thinking... +
+ } +
+