Overview
In this video I will show you how you Dependency Inject can be used with Semantic Kernel in an ASP.NET Razor Pages application. The same principals can be used with MVC. We will use the Phi-3 model hosted on GitHub. Developers can use a multitude of AI models on GitHub for free.
Source Code: https://github.com/medhatelmasry/AspWithSkDI
Companion Video: https://youtu.be/fLIWCkxXaM8
Pre-requisites
This walkthrough was done using .NET 8.0.
Getting Started
There are many AI models at GitHub from a variety of vendors that you can choose from. The starting point is to visit https://github.com/marketplace/models. At the time of writing, these are a subset of the models available:
The first thing we need to do is get a 'personal access token' by clicking on the indicated button above.
Give your token a name, set the expiration, and optionally describe the purpose of the token. Thereafter, click on the green 'Generate token' button at the bottom of the page.
Copy the newly generated token and place it is a safe place because you cannot view this token again once you leave the above page.
Let's use Semantic Kernel in ASP.NET Razor Pages
In a working directory, create a Razor Pages web app named AspWithSkDI inside a terminal window with the following command:
dotnet new razor -n AspWithSkDI
Change into the newly created directory GitHubAiModelSK with:
cd AspWithSkDI
Next, let's add the Sematic Kernel package to our application with:
dotnet add package Microsoft.SemanticKernel -v 1.25.0
Open the project in VS Code and add this directive to the .csproj file right below: <Nullable>enable</Nullable>:
<NoWarn>SKEXP0010</NoWarn>
Add the following to appsettings.json:
"AI": {"Endpoint": "https://models.inference.ai.azure.com","Model": "Phi-3.5-mini-instruct","PAT": "fake-token"}
Replace "fake-token" with the personal access token that you got from GitHub.
Adding Dependency Injection support
Next, open Program.cs in an editor. Add the following code right above the statement "var app = builder.Build();" :
var modelId = builder.Configuration["AI:Model"]!;var uri = builder.Configuration["AI:Endpoint"]!;var githubPAT = builder.Configuration["AI:PAT"]!;var client = new OpenAIClient(new ApiKeyCredential(githubPAT), new OpenAIClientOptions { Endpoint = new Uri(uri) });var kernel = builder.Services.AddKernel().AddOpenAIChatCompletion(modelId, client);
It is the last statement above that is key to making Semantic Kernel available to all other classes through Dependency Injection.
ASP.NET Razor Pages
Pages/Index.cshtml.cs
Add the following instance variable and property to the code-behind file named Pages/Index.cshtml.cs:
private readonly Kernel _kernel;
[BindProperty]public string? Reply { get; set; }
Replace the class constructor with the following:
public IndexModel(ILogger<IndexModel> logger, Kernel kernel) {_logger = logger;_kernel = kernel;}
We can now get access to Semantic Kernel through the _kernel object.
Add the following OnPostAsync() method to the IndexModel class:
// action method that receives user prompt from the formpublic async Task<IActionResult> OnPostAsync(string userPrompt) {// get a chat completion servicevar chatCompletionService = _kernel.GetRequiredService<IChatCompletionService>();
// Create a new chat by specifying the assistantChatHistory chat = new(@"You are an AI assistant that helps people find information about baking.The baked item must be easy, tasty, and cheap.I don't want to spend more than $10 on ingredients.I don't want to spend more than 30 minutes preparing.I don't want to spend more than 30 minutes baking.");
chat.AddUserMessage(userPrompt);
var response = await chatCompletionService.GetChatMessageContentAsync(chat, kernel: _kernel);
Reply = response.Content!.Replace("\n", "<br>");
return Page();}
In the above OnPostAsync() method, the user prompt is received and passed on to the Phi-3 GPT SLM model. In this case our assistant specializes suggests easy, fast and cheap baking ideas.
Pages/Index.cshtml
The Index.cshtml file represents the view that the user sees when interacting with our web app. Replace the content of Index.cshtml with the following:
@page@model IndexModel
@{ViewData["Title"] = "SK Dependency Injection in ASP.NET Razor Pages";}
<div class="text-center"><h3 class="display-6">@ViewData["Title"]</h3><form method="post" onsubmit="showPleaseWaitMessage()"><input type="text" name="userPrompt" size="80"required placeholder="What do you want to bake today?"/><input type="submit" value="Submit" /></form></div>
<p> </p>
<div id="please-wait-message" style="display:none;"><p class="alert alert-info">Please wait...</p></div>
<div id="response-message">@if (Model.Reply != null) {<p class="alert alert-success">@Html.Raw(Model.Reply)</p>}</div>
@section Scripts {<script>function showPleaseWaitMessage() {
document.getElementById('response-message').innerHTML = '';
document.getElementById('please-wait-message').style.display = 'block'; }
</script>}
There is some JavaScript that was added to the view to display a "Please wait ...." message while the user waits for the AI model to respond.
Run the application
In a terminal window in the root of the application, run the following command:
dotnet watch
The home page of the web app displays in your default browser and it looks like this:
I entered "Apple Pie" then clicked on Submit. A "Please wait ..." message appeared while the AI model processed my request.After about 40 seconds the response came back.Conclusion
It is easy and straight forward to use dependency injection to create a kernel.
No comments:
Post a Comment