You can consume services in Azure OpenAI with Microsoft Blazor. The sample code, available on the downloads page of this site (BlazorHelpWebsite.com), demonstrates how to create a completion using the text-davinci-002 model.

A completion can logically complete a prompt provided to it, or answer simple questions.

The text-davinci-002 model can also perform other functions such as summarizing documents or classifying or categorizing documents.

Set-up

You can apply for access to Azure OpenAI Service at https://aka.ms/oai/access.

You can then go to: portal.azure.com and Create a resource.

Search for the Azure OpenAI service and click Create.

In the Keys and Endpoint section, copy the Key and the Endpoint and save them, you will need them later.

After it is created, in the Overview section, click the Explore button.

This will take you to a page that provides documentation and code examples.

Click on the GPT-3 playground button.

If this is your first time using the playground you will be prompted to deploy a model. Select and deploy the text-davinci-002 model.

After it is deployed, navigate to the GPT-3 section, and experiment with creating prompts and seeing the results.

We will next demonstrate how to make these call programmatically using Microsoft Blazor.

Create The Blazor Application

Using Visual Studio 2022 (or higher), create a Blazor Server project named AzureOpenAIBeginner.

Add the following NuGet packages:

Create a file named OpenAIClientService.cs.

using AzureOpenAIClient.Http;

namespace AzureOpenAIBeginner.Data

{

    public class OpenAIClientService

    {

        private readonly OpenAIClient _openAiClient;

        public OpenAIClientService(OpenAIClient client)

        {

            _openAiClient = client;

        }

        public async Task<CompletionResponse?> GetTextCompletionResponse(

            string input, int maxTokens)

        {

            var completionRequest = new CompletionRequest()

            {

                Prompt = input,

                MaxTokens = maxTokens

            };

            return await _openAiClient

                .GetTextCompletionResponseAsync(completionRequest);

        }

    }

}

Use this code.

The code defines a class OpenAIClientService which acts as a service that wraps the functionality of the OpenAIClient class.

The OpenAIClientService class takes in an instance of OpenAIClient using dependency injection, and stores it in a private field _openAiClient.

The class has a single public method GetTextCompletionResponse that takes in two arguments, input and maxTokens, and returns a completion response as an asynchronous task.

The GetTextCompletionResponse method calls the GetTextCompletionResponseAsync method on the _openAiClient instance, passing in the completionRequest instance, and returns the result as a completion response.

Note that the CompletionRequest class allows for other tuning parameters to be passed such as Temperature, FrequencyPenalty and PresencePenalty.

Open the Program.cs file.

builder.Services.AddScoped<OpenAIClientService>();

Add this code to register the OpenAIClientService so that it can be called by the remaining code.

Finally, add a new razor control called CompletionExample.razor.

@page "/completionexample"

@using AzureOpenAIBeginner.Data

@using AzureOpenAIClient.Http

@inject OpenAIClientService openAIClientService

<PageTitle>Completion Example</PageTitle>

<h3>Completion Example</h3>

<RadzenButton Click="CallCompletion" Text="Call Completion" 

    ButtonStyle="ButtonStyle.Primary" />

<br />

<br />

<RadzenTextArea @bind-Value=@TextValue Cols="100" Rows="10" />

Add this code for the user interface.

This code contains an injection of the OpenAIClientService class, created earlier, and a Radzen button component with the text "Call Completion". The button's click event is bound to a method called CallCompletion  (to be created in the next step). There's also a RadzenTextArea component with its value bound to a property named TextValue.

@code {

    CompletionResponse? Completion;

    string TextValue = "Four score and seven years ago";

    async Task CallCompletion()

    {

        if (TextValue != null)

        {

            Completion = await openAIClientService.GetTextCompletionResponse(TextValue, 500);

            if (Completion?.Choices.Count > 0)

            {

                TextValue = TextValue + Completion.Choices[0].Text;

                StateHasChanged();

            }

        }

    }

}

Add this code to complete the component.

It starts by declaring two variables: Completion of type CompletionResponse and TextValue of type string with an initial value of "Four score and seven years ago".

The code block also contains an asynchronous method called CallCompletion that is executed when the "Call Completion" button is clicked.

The CallCompletion method checks if the TextValue is not null. If it's not, it calls the GetTextCompletionResponse method on the openAIClientService instance, passing in TextValue and 500 as the maxTokens argument. The response from the method is stored in the Completion variable.

After that, it checks if the Choices property of Completion has a count greater than 0. If it does, it appends the first choice text to TextValue and calls the StateHasChanged method, which signals Blazor to update the UI.

The text-davinci-002 model contains a massive amount of information including pop references.

Links

General availability of Azure OpenAI Service expands access to large, advanced AI models with added enterprise benefits

Download

The project is available on the Downloads page on this site.

You must have Visual Studio 2022 (or higher) installed to run the code.