Showing posts with label completion. Show all posts
Showing posts with label completion. Show all posts

Thursday, February 29, 2024

OpenAI Function Calling with Semantic Kernel, C#, & Entity Framework

In this article, we will create a Semantic Kernel plugin that contains four functions that interact with live SQLite data. Entity Framework will be used to access the SQLite database. The end result is to use the powers of the OpenAI natural language models to ask questions and get answers about our custom data.

Source code: https://github.com/medhatelmasry/EfFuncCallSK

Companion Video: https://youtu.be/4sKRwflEyHk

Getting Started

Let’s start by creating an ASP.NET Razor pages web application. Select a suitable working folder on your computer, then enter the following terminal window commands:

dotnet new razor --auth individual -o EfFuncCallSK
cd EfFuncCallSK

Te above creates a Razor Pages app with support for Entity Framework and SQLite.

Add these packages:

dotnet add package CsvHelper
dotnet add package Microsoft.SemanticKernel 
dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.EntityFrameworkCore
dotnet add package Microsoft.EntityFrameworkCore.SQLite.Design

The CsvHelper package will help us load a list of products from a CSV file named students.csv and hydrate a list of Student objects. The second package is needed to work with Semantic Kernel. The rest of the packages support Entity Framework and SQLite.

Let’s Code

appsettings.json

Add these to appsettings.json:

"AIService": "OpenAI", /* Azure or OpenAI */
"AzureOpenAiSettings": {
   "Endpoint": "https://YOUR_RESOURCE_NAME.openai.azure.com/",
   "Model": "gpt-35-turbo",
   "ApiKey": "fake-key-fake-key-fake-key-fake-key"
},
"OpenAiSettings": {
  "ModelType": "gpt-3.5-turbo",
  "ApiKey": "fake-key-fake-key-fake-key-fake-key"
}

The first setting allows you to choose between using OpenAI or Azure OpenAI.

Of course, you need to adjust the endpoint setting with the appropriate value that pertains to the OpenAI and Azure OpenAI services. Also, enter the correct value for the ApiKey.

NOTE: You can use OpenAI or Azure OpenAI, or both.

Data

Create a folder named Models. Inside the Models folder, add the following Student class: 

public class Student {
   public int StudentId { get; set; }
   public string? FirstName { get; set; }
   public string? LastName { get; set; }
   public string? School { get; set; }
 
   public override string ToString() {
      return $"Student ID: {StudentId}, First Name: {FirstName}, Last Name: {LastName}, School: {School}";
   }
}

Developers like having sample data when building data driven applications. Therefore, we will create sample data to ensure that our application behaves as expected. Copy the following data and save it in a text file wwwroot/students.csv:

StudentId,FirstName,LastName,School
1,Tom,Max,Nursing
2,Ann,Fay,Mining
3,Joe,Sun,Nursing
4,Sue,Fox,Computing
5,Ben,Ray,Mining
6,Zoe,Cox,Business
7,Sam,Ray,Mining
8,Dan,Ash,Medicine
9,Pat,Lee,Computing
10,Kim,Day,Nursing
11,Tim,Rex,Computing
12,Rob,Ram,Nursing
13,Jan,Fry,Mining
14,Jim,Tex,Nursing
15,Ben,Kid,Business
16,Mia,Chu,Medicine
17,Ted,Tao,Computing
18,Amy,Day,Nursing
19,Ian,Roy,Nursing
20,Liz,Kit,Nursing
21,Mat,Tan,Medicine
22,Deb,Roy,Medicine
23,Ana,Ray,Mining
24,Lyn,Poe,Computing
25,Amy,Raj,Nursing
26,Kim,Ash,Mining
27,Bec,Kid,Nursing
28,Eva,Fry,Computing
29,Eli,Lap,Business
30,Sam,Yim,Nursing
31,Joe,Hui,Mining
32,Liz,Jin,Nursing
33,Ric,Kuo,Business
34,Pam,Mak,Computing
35,Cat,Yao,Medicine
36,Lou,Zhu,Mining
37,Tom,Dag,Business
38,Stu,Day,Business
39,Tom,Gad,Mining
40,Bob,Bee,Business
41,Jim,Ots,Business
42,Tom,Mag,Business
43,Hal,Doe,Mining
44,Roy,Kim,Mining
45,Vis,Cox,Nursing
46,Kay,Aga,Nursing
47,Reo,Hui,Nursing
48,Bob,Roe,Mining
49,Jay,Eff,Computing
50,Eva,Chu,Business
51,Lex,Rae,Nursing
52,Lin,Dex,Mining
53,Tom,Dag,Business
54,Ben,Shy,Computing
55,Rob,Bos,Nursing
56,Ali,Mac,Business
57,Edi,Gee,Computing
58,Eva,Cao,Mining
59,Jun,Lam,Computing
60,Eli,Tao,Computing
61,Ana,Bay,Computing
62,Gil,Tal,Mining
63,Wes,Dey,Nursing
64,Nea,Tan,Computing
65,Ava,Day,Nursing
66,Rie,Ray,Business
67,Ken,Sim,Nursing

Add the following code inside the ApplicationDbContext class located inside the Data folder:

public DbSet<Student> Students => Set<Student>();    
 
protected override void OnModelCreating(ModelBuilder modelBuilder) {
    base.OnModelCreating(modelBuilder);
    modelBuilder.Entity<Student>().HasData(LoadStudents());
}  
 
// Load students from a csv file named students.csv in the wwwroot folder
public static List<Student> LoadStudents() {
    var students = new List<Student>();
    using (var reader = new StreamReader(Path.Combine("wwwroot", "students.csv"))) {
        using var csv = new CsvReader(reader, CultureInfo.InvariantCulture);
        students = csv.GetRecords<Student>().ToList();
    }
    return students;
}

Let us add a migration and subsequently update the database. Execute the following CLI commands in a terminal window.

dotnet ef migrations add Students -o Data/Migrations
dotnet ef database update

At this point the database and tables are created in a SQLite database named app.db.

Helper Methods

We need a couple of static helper methods to assist us along the way. In the Models folder, add a class named Utils and add to it the following class definition:

public class Utils {
  public static string GetConfigValue(string config) {
    IConfigurationBuilder builder = new ConfigurationBuilder();
    if (System.IO.File.Exists("appsettings.json"))
      builder.AddJsonFile("appsettings.json", false, true);
    if (System.IO.File.Exists("appsettings.Development.json"))
      builder.AddJsonFile("appsettings.Development.json", false, true);
    IConfigurationRoot root = builder.Build();
    return root[config]!;
  }
 
  public static ApplicationDbContext GetDbContext() {
    var optionsBuilder = new DbContextOptionsBuilder<ApplicationDbContext>();
    var connStr = Utils.GetConfigValue("ConnectionStrings:DefaultConnection");
    optionsBuilder.UseSqlite(connStr);
    ApplicationDbContext db = new ApplicationDbContext(optionsBuilder.Options);
    return db;
  }
}

Method GetConfigValue() will read values in appsettings.json from any static method. The second GetDbContext() method gets an instance of the ApplicationDbContext class, also from any static method.

Plugins

Create a folder named Plugins and add to it the following class file named StudentPlugin.cs with this code:

public class StudentPlugin {
  [KernelFunction, Description("Get student details by first name and last name")]
  public static string? GetStudentDetails(
  [Description("student first name, e.g. Kim")]
  string firstName,
  [Description("student last name, e.g. Ash")]
  string lastName
  ) {
    var db = Utils.GetDbContext();
    var studentDetails = db.Students
      .Where(s => s.FirstName == firstName && s.LastName == lastName).FirstOrDefault();
    if (studentDetails == null)
      return null;
    return studentDetails.ToString();
  }

  [KernelFunction, Description("Get students in a school given the school name")]
  public static string? GetStudentsBySchool(
    [Description("The school name, e.g. Nursing")]
    string school
  ) {
    var studentsBySchool = Utils.GetDbContext().Students
      .Where(s => s.School == school).ToList();
    if (studentsBySchool.Count == 0)
      return null;
    return JsonSerializer.Serialize(studentsBySchool);
  }


  [KernelFunction, Description("Get the school with most or least students. Takes boolean argument with true for most and false for least.")]
  static public string? GetSchoolWithMostOrLeastStudents(
    [Description("isMost is a boolean argument with true for most and false for least. Default is true.")]
    bool isMost = true
  ) {
    var students = Utils.GetDbContext().Students.ToList();
    IGrouping<string, Student>? schoolGroup = null;
    if (isMost)
      schoolGroup = students.GroupBy(s => s.School)
          .OrderByDescending(g => g.Count()).FirstOrDefault()!;
    else
        schoolGroup = students.GroupBy(s => s.School)
            .OrderBy(g => g.Count()).FirstOrDefault()!;
    if (schoolGroup != null)
      return $"{schoolGroup.Key} has {schoolGroup.Count()} students";
    else
      return null;
  }

  [KernelFunction, Description("Get students grouped by school.")]
  static public string? GetStudentsInSchool() {
    var students = Utils.GetDbContext().Students.ToList().GroupBy(s => s.School)
      .OrderByDescending(g => g.Count());
    if (students == null)
      return null;
    else
      return JsonSerializer.Serialize(students);
  }
}

 In the above code, there are four methods with these purposes:

GetStudentDetails()Gets student details given first and last names
GetStudentsBySchool()Gets students in a school given the name of the school
GetSchoolWithMostOrLeastStudents()Takes a Boolean value isMost – true returns school with most students and false returns school with least students.
GetStudentsInSchool()Takes no arguments and returns a count of students by school.

The User Interface

We will re-purpose the Index.cshtml and Index.cshtml.cs files so the user can enter a prompt in natural language and receive a response that comes from the OpenAI model working with our semantic kernel plugin. 

Index.chtml

Replace the content of Pages/Index.cshtml with:

@page
@model IndexModel
@{
    ViewData["Title"] = Model.Service + " Function Calling with Semantic Kernel";
}
<div class="text-center">
    <h3 class="display-6">@ViewData["Title"]</h3>
    <form method="post">
        <input type="text" name="prompt" size="80" required />
        <input type="submit" value="Submit" />
    </form>
    <div style="text-align: left">
        <h5>Example prompts:</h5>
        <p>Which school does Mat Tan go to?</p>
        <p>Which school has the most students?</p>
        <p>Which school has the least students?</p>
        <p>Get the count of students in each school.</p>
        <p>How many students are there in the school of Mining?</p>
        <p>What is the ID of Jan Fry and which school does she go to?</p>
        <p>Which students belong to the school of Business? Respond only in JSON format.</p>
        <p>Which students in the school of Nursing have their first or last name start with the letter 'J'?</p>
    </div>
    @if (Model.Reply != null)
    {
        <p class="alert alert-success">@Model.Reply</p>
    }
</div>

The above markup displays an HTML form that accepts a prompt from a user. The prompt is then submitted to the server and the response is displayed in a paragraph (<p> tag) with a green background (Bootstrap class alert-success).

Meantime, at the bottom of the page there are some suggested prompts – namely:

Which school does Mat Tan go to?
Which school has the most students?
Which school has the least students?
Get the count of students in each school.
How many students are there in the school of Mining?
What is the ID of Jan Fry and which school does she go to?
Which students belong to the school of Business? Respond only in JSON format.
Which students in the school of Nursing have their first or last name start with the letter 'J'?

Index.chtml.cs

Replace the IndexModel class definition in Pages/Index.cshtml.cs with:

public class IndexModel : PageModel {
  private readonly ILogger<IndexModel> _logger;
  private readonly IConfiguration _config;
 
  [BindProperty]
  public string? Reply { get; set; }
 
  [BindProperty]
  public string? Service { get; set; }
 
  public IndexModel(ILogger<IndexModel> logger, IConfiguration config) {
    _logger = logger;
    _config = config;
    Service = _config["AIService"]!;
  }
  public void OnGet() { }
  // action method that receives prompt from the form
  public async Task<IActionResult> OnPostAsync(string prompt) {
    // call the Azure Function
    var response = await CallFunction(prompt);
    Reply = response;
    return Page();
  }
 
  private async Task<string> CallFunction(string question) {
    string azEndpoint = _config["AzureOpenAiSettings:Endpoint"]!;
    string azApiKey = _config["AzureOpenAiSettings:ApiKey"]!;
    string azModel = _config["AzureOpenAiSettings:Model"]!;
    string oaiModelType = _config["OpenAiSettings:ModelType"]!;
    string oaiApiKey = _config["OpenAiSettings:ApiKey"]!;
    string oaiModel = _config["OpenAiSettings:Model"]!;
    string oaiOrganization = _config["OpenAiSettings:Organization"]!;
    var builder = Kernel.CreateBuilder();
    if (Service!.ToLower() == "openai")
      builder.Services.AddOpenAIChatCompletion(oaiModelType, oaiApiKey);
    else
      builder.Services.AddAzureOpenAIChatCompletion(azModel, azEndpoint, azApiKey);
    builder.Services.AddLogging(c => c.AddDebug().SetMinimumLevel(LogLevel.Trace));
    builder.Plugins.AddFromType<StudentPlugin>();
    var kernel = builder.Build();
    // Create chat history
    ChatHistory history = [];
    // Get chat completion service
    var chatCompletionService = kernel.GetRequiredService<IChatCompletionService>();
    // Get user input
    history.AddUserMessage(question);
    // Enable auto function calling
    OpenAIPromptExecutionSettings openAIPromptExecutionSettings = new() {
      ToolCallBehavior = ToolCallBehavior.AutoInvokeKernelFunctions
    };
    // Get the response from the AI
    var result = chatCompletionService.GetStreamingChatMessageContentsAsync(
      history,
      executionSettings: openAIPromptExecutionSettings,
      kernel: kernel);
    string fullMessage = "";
    await foreach (var content in result) {
      fullMessage += content.Content;
    }
    // Add the message to the chat history
    history.AddAssistantMessage(fullMessage);
    return fullMessage;
  }
}

In the above code, the prompt entered by the user is posted to the OnPostAsync() method. The prompt is then passed to the CallFunction() method, which returns the final response from Azure OpenAI.

The CallFunction() method reads the OpenAI or Azure OpenAI settings from appsettings.json, depending on the AIService key.

A builder object is created from Semantic Kernel. If we are using OpenAI, then the AddOpenAIChatCompletion service is added. Otherwise, the AddAzureOpenAIChatCompletion service is added.

The StudentPlugin is then added to the builder object Plugins collection.

The builder Build() method is then called returning a kernel object. From the kernel object we then get a chatCompletionService object by calling the GetRequiredService() method.

Thereafter:

  • Add the prompt to the history
  • Make a call to the chat message service and receive a response
  • Concatenate response into a single string
  • Return the concatenated message

Trying the application

In a terminal window, at the root of the Razor Pages web application, enter the following command:

dotnet watch

The following page will display in your default browser:


You can enter any of the suggested prompts to ensure we are getting the proper results. I entered the last prompt and got these results:




Conclusion

We have seen how Semantic Kernel and Function Calling can be used with data coming from a database. In this example we are using SQLite. However, an other database source can be used using the same technique.

Wednesday, December 13, 2023

Give your ChatBot personality with Azure OpenAI and C#

We will create a .NET 8.0 chatbot console application that uses the ChatGPT natural language model. This will be done using Azure OpenAI. The chatbot will have a distinct personality which will be reflected in its response.

Source Code: https://github.com/medhatelmasry/BotWithPersonality

Prerequisites

You will need the following to continue:
  • .NET 8 SDK
  • A C# code editor such as Visual Studio Code
  • An Azure subscription with access to the OpenAI Service

Getting started with Azure OpenAI service

To follow this tutorial, you will create an Azure OpenAI service under your Azure subscription. Follow these steps:

Navigate to the Azure portal at https://portal.azure.com/. 



Click on “Create a resource”.


Enter “openai” in the filter then select “openai”.


Choose your subscription then create a new resource group. In my case (as shown above), I created a new resource group named “OpenAI-RG”.


Continue with the selection of a region, provide a instance name (mze-openai in the example above) and select the “Standard S0” pricing tier. Click on the Next button.


Accept the default (All networks, including the internet, can access this resource.) on the Network tab then click on the Next button.


On the Tags tab, click on Next without making any changes.


Click the Create button on the “Review + submit” tab. Deployment takes about one minute. 


On the Overview blade, click on “Keys and Endpoint” in the left side navigation.


Copy KEY 1 and Endpoint then save the values in a text editor like Notepad.

We will need to create a model deployment that we can use for text completion. To do this, return to the Overview tab.


Open “Go to Azure OpenAI Studio” in a new browser tab.


Click on “Create new deployment”.


Click on “+ Create new deployment”.


For the model, select “gpt-35-turbo” and give the deployment a name which you need to remember as this will be configured in the app that we will soon develop. I called the deployment name gpt35-turbo-deployment. Click on the Create button.

As a summary, we will need the following parameters in our application:

SettingValue
KEY 1:this-is-a-fake-api-key
Endpoint:https://mze-openai.openai.azure.com/
Model deployment:gpt35-turbo-deployment

Next, we will create our console application.

Console Application

Create a console application with .NET 8.0:

dotnet new console -f net8.0 -o BotWithPersonality
cd BotWithPersonality

Add these two packages:

dotnet add package Azure.AI.OpenAI -v 1.0.0-beta.11
dotnet add package Microsoft.Extensions.Configuration.Json -v 8.0.0

 

Configuration Settings

The first package is for Azure OpenAI. The second package will help us read configuration settings from the appsettings.json file.

Create a file named apsettings.json and add to the following:

{
    "settings": {
      "deployment-name": "gpt35-turbo-deployment",
      "endpoint": "https://mze-openai.openai.azure.com/",
      "key": "this-is-a-fake-api-key"
    }
}

When our application gets built and packaged, we want this file to get copied to the output directory. Therefore, we need to add the following XML to the .csproj file just before the closing </Project> tag.

<ItemGroup>
  <None Include="*.json" CopyToOutputDirectory="PreserveNewest" />
</ItemGroup> 

In order to read the settings from appsettings.json, we need to create a helper method. Add a class named Utils.cs and add to it the following code to it:

public class Utils {
    public static string GetConfigValue(string config) {

        IConfigurationBuilder builder = new ConfigurationBuilder();

        if (System.IO.File.Exists("appsettings.json"))
            builder.AddJsonFile("appsettings.json", false, true);

        if (System.IO.File.Exists("appsettings.Development.json"))
            builder.AddJsonFile("appsettings.Development.json", false, true);

        IConfigurationRoot root = builder.Build();

        return root[config]!;
    }
}

As an example, if we want to read the endpoint value in appsettings.json, we can use the following statement:

Utils.GetConfigValue("settings:endpoint")

Building our ChatBot app

Delete whatever code there is in Program.cs and add these using statements at the top:

using Azure;
using Azure.AI.OpenAI;
using BotWithPersonality;

Let us first read the settings we need from appsettings.json. Therefore, append this code to Program.cs:

string ENDPOINT = Utils.GetConfigValue("settings:endpoint");
string KEY = Utils.GetConfigValue("settings:key");
string DEPLOYMENT_NAME = Utils.GetConfigValue("settings:deployment-name");

Next, let us give our chatbot a personality. We will tell Azure OpenAI that our chatbot has the personality of a developer from Newfouldland in Eastern Canada. Append this constant to the Program.cs:

const string SYSTEM_MESSAGE 
    = """
    You are a friendly assistant named DotNetBot. 
    You prefer to use Canadian Newfoundland English as your language and are an expert in the .NET runtime 
    and C# and F# programming languages.
    Response using Newfoundland colloquialisms and slang.
    """;
    
Create a new OpenAIClient by appending the following code to Program.cs:

var openAiClient = new OpenAIClient(
    new Uri(ENDPOINT),
    new AzureKeyCredential(KEY)
);

We will next define our ChatCompletionsOptions with a starter user message "Introduce yourself". Append this code to Program.cs:

var chatCompletionsOptions = new ChatCompletionsOptions
{
    DeploymentName = DEPLOYMENT_NAME, // Use DeploymentName for "model" with non-Azure clients
    Messages =
    {
        new ChatRequestSystemMessage(SYSTEM_MESSAGE),
        new ChatRequestUserMessage("Introduce yourself"),
    }
};

The ChatCompletionsOptions object is aware of the deployment model name and keeps track of the conversation between the user and the chatbot. Note that there are two chat messages pre-filled before the conversation even starts. One chat message is from the System (SYSTEM_MESSAGE) and gives the chat model instructions on what kind of chatbot it is supposed to be. In this case, we told the chat model to act like somebody from Newfoundland, Canada. Then we told the chatbot to introduce itself by adding a message as User saying "Introduce yourself.".

Now that we have set up the OpenAIClient, and  ChatCompletionsOptions, we can start calling the APIs. Append the following code to Program.cs to finalize the chatbot:

while (true)
{
    Console.WriteLine();
    Console.Write("DotNetBot: ");
    
    Response<ChatCompletions> chatCompletionsResponse = await openAiClient.GetChatCompletionsAsync(
        chatCompletionsOptions
    );

    var chatMessage = chatCompletionsResponse.Value.Choices[0].Message;
    Console.WriteLine($"[{chatMessage.Role.ToString().ToUpperInvariant()}]: {chatMessage.Content}");
    
    chatCompletionsOptions.Messages.Add(new ChatRequestUserMessage(chatMessage.Content));
    
    Console.WriteLine();
    
    Console.Write("Enter a message: ");
    var userMessage = Console.ReadLine();
    chatCompletionsOptions.Messages.Add(new ChatRequestUserMessage(userMessage));
}

Inside an infinite loop, the chatCompletionsOptions is passed to the openAiClient.GetChatCompletionsAsync method.

The response from the chat model is then written to the console and added to the chat history stored in chatCompletionsOptions.

Now the user is prompted to say anything, which will then be added to the chat history as well. Thereafter, the next iteration of the loop starts, which sends the chat history back to the chat model in Azure OpenAI. One can terminate the endless loop by hitting CTRL+C on the keyboard.

Let us run the app and see how it performs.

Run the app with:

dotnet run

Here is an example of the ongoing dialog:

DotNetBot: [ASSISTANT]: How's she going, buddy? I'm DotNetBot, your trusty virtual assistant from the Rock. I'm here to lend you a hand with all things .NET and programming in C# and F#. So whether you need help with some code or just wanna have a chin wag about tech, I'm your go-to. Don't be shy now, fire away with your questions!

Enter a message: How do you spell color?

DotNetBot: [ASSISTANT]: Sure ting, me ol' pal! In Canadian Newfoundland English, we like to spell "color" as "colour." It's a wee bit different than how they spell it down in other parts of the world, but we like to keep things unique and full of character around here. So, if you're ever writin' some code and need to use that word, remember to toss in that extra "u" for good measure. Happy codin', me son!

Enter a message: 

I asked the question "How do you spell color?" and it rambled on about how it is done in Newfoundland. Quite amusing....

Hope this was useful.

Friday, June 9, 2023

Using ChatGPT Chat Completion API with pure JavaScript

 In this tutorial you will create a very simple JavaScript web page that interacts with ChatGPT.

Get an API key from openai.com

Visit https://openai.com and create an account. The login page looks like this:


Click on your profile and select “View API keys”. On the next page, click on the “+ Create new secret key” button.


Give your key a name, then click on “Generate secret key”.


An API key is generated. You must save this key somewhere because this is your only chance to view it as it cannot be viewed again. Click on the copy button and paste it is a safe place.


Creating a simple JavaScript app

We will create a very simple Chat Completion application that we can ask questions to and it will use the smarts of ChatGPT to provide us with answers. We will ground the chat so that it discusses topics related to the National Basketball Association (NBA).

Create a folder named ChatCompletionJS. Inside of that folder, create an HTML file named chatgpt-chat-completion_nba.html. Using a text editor, add the following HTML code to chatgpt-chat-completion_nba.html:

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>ChatGPT with JavaScript (NBA)</title>
  </head>
  <body>
    <div>
      <h1>ChatGPT with JavaScript (NBA)</h1>
      <textarea id="dialog" cols="100" rows="30"></textarea>
      <br />
      <button id="btn">Call Completion</button>
    </div>
    <script>
    </script>
  </body>
</html>

The page will look like this when viewed in your favorite browser:



We have a simple textarea and a button

Let’s add some JavaScript code that will ground our discussion on the topic of the NBA. Add this code inside the <script> . . . </script> tags:

const messages = [
  { role: "system", content: "You are a helpful assistant." },
  { role: "user", content: "Who won the NBA in 2020?" },
  {
    role: "assistant",
    content: "The Los Angeles Lakers won the NBA in 2020.",
  },
  { role: "user", content: "Where was it played?" },
];

let defaultMessage = "";
messages.forEach((item) => {
  defaultMessage += `role: ${item.role}\ncontent: ${item.content}\n\n`;
});

document.getElementById("dialog").value = defaultMessage;

The above code basically takes the contents of the messages array and neatly places it inside the HTML textarea. Your page now looks like this:


As you can see, we are asking ChatGPT to let us know where the NBA finals in 2020 were held. Let’s add some code to work with ChatGPT that sends data to it and obtains a reply. Add the following JavaScript getOpenAIChatCompletions() function right under the opening <script> tag:

async function getOpenAIChatCompletions() {
  const apiKey = "this-is-a-fake-chatgpt-api-key";

  let text = document.getElementById("dialog").value;

  // remove any * in text
  text = text.replace(/\*/g, '');

  const lines = text.split('\n');

  // delete empty items in lines array
  for (let i = 0; i < lines.length; i++) {
    if (lines[i] === '') {
      lines.splice(i, 1);
    }
  }

  const result = [];

  for (let i = 0; i < lines.length; i += 2) {
    if (lines[i] === '') {
      continue;
    }
    const role = lines[i].split(': ')[1];
    const content = lines[i+1].split(': ')[1];
    result.push({ role, content });
  }

  console.log(result);

  fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${apiKey}`,
    },
    body: JSON.stringify({
      max_tokens: 50,
      n: 1,
      stop: "\n",
      model: "gpt-3.5-turbo",
      temperature: 0.5,
      messages: result,
    }),
  })
    .then((response) => response.json())
    .then((data) => {
      const message = data.choices[0].message;
      const content = message.content;
      const role = message.role;

      const dialog = `role: ${role}\ncontent: ${content}`;

      document.getElementById("dialog").value += "*" + dialog + "*";
    });
}

Remember to replace the value of apiKey with the API key that you copied from https://openai.com.

The above code passes on the content of our textarea to ChatGPT, then obtains a reply. Data is sent as a JSON array that looks like this:


Finally, add the following event handler code for the button that calls the getOpenAIChatCompletions() function:

const button = document.querySelector("#btn");
button.addEventListener("click", () => {
  getOpenAIChatCompletions();
});

Our sample application is complete. View the latest version of your page and click on the “Call Completion button. You will receive a response that looks like this:


The response from ChatGPT is surrounded by *. This tells us that the NBA finals were played in Orlando. Let’s ask about what happened a year earlier in 2019 by posing this additional text:

role: user
content: How about in 2019? Which team won and where was it played?

Our page now looks like this:


Click on the “Call Completion” button. 



We are told that the 2019 NBA champions were the Toronto Raptors.

You can see from this very simple tutorial that it is quite easy to incorporate ChaGPT in your JavaScript applications.

The complete code is given below:

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>ChatGPT with JavaScript (NBA)</title>
  </head>
  <body>
    <div>
      <h1>ChatGPT with JavaScript (NBA)</h1>
      <textarea id="dialog" cols="100" rows="30"></textarea>
      <br />
      <button id="btn">Call Completion</button>
    </div>
    <script>
      async function getOpenAIChatCompletions() {
        const apiKey = "this-is-a-fake-chatgpt-api-key";

        let text = document.getElementById("dialog").value;

        // remove any * in text
        text = text.replace(/\*/g, '');

        const lines = text.split('\n');

        // delete empty items in lines array
        for (let i = 0; i < lines.length; i++) {
          if (lines[i] === '') {
            lines.splice(i, 1);
          }
        }

        const result = [];

        for (let i = 0; i < lines.length; i += 2) {
          if (lines[i] === '') {
            continue;
          }
          const role = lines[i].split(': ')[1];
          const content = lines[i+1].split(': ')[1];
          result.push({ role, content });
        }

        console.log(result);

        fetch("https://api.openai.com/v1/chat/completions", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${apiKey}`,
          },
          body: JSON.stringify({
            max_tokens: 50,
            n: 1,
            stop: "\n",
            model: "gpt-3.5-turbo",
            temperature: 0.5,
            messages: result,
          }),
        })
          .then((response) => response.json())
          .then((data) => {
            const message = data.choices[0].message;
            const content = message.content;
            const role = message.role;

            const dialog = `role: ${role}\ncontent: ${content}`;

            document.getElementById("dialog").value += "*" + dialog + "*";
          });
      }

      const messages = [
        { role: "system", content: "You are a helpful assistant." },
        { role: "user", content: "Who won the NBA in 2020?" },
        {
          role: "assistant",
          content: "The Los Angeles Lakers won the NBA in 2020.",
        },
        { role: "user", content: "Where was it played?" },
      ];

      let defaultMessage = "";
      messages.forEach((item) => {
        defaultMessage += `role: ${item.role}\ncontent: ${item.content}\n\n`;
      });

      //console.log(defaultMessage);
      document.getElementById("dialog").value = defaultMessage;

      const button = document.querySelector("#btn");
      button.addEventListener("click", () => {
        getOpenAIChatCompletions();
      });

    </script>
  </body>
</html>

If you click on the Examples tab on the ChatGPT page you can find many examples that you can look into to explore other things that you can do.


The sky is the limit with regards to what is possible.