OpenAI's technologies offer a range of AI-powered tools and capabilities, making it easier for developers to build intelligent, responsive, and user-friendly applications.

OpenAi

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

Node.js

OpenAI is an AI research lab that has developed a number of tools for researchers and developers including natural language processing, robotics, and reinforcement learning. By leveraging the OpenAI APIs, we can build faster and smarter, while bringing new and interesting capabilities to help enhance existing solutions and solve new challenges.

Let's get started building with AI using the [OpenAI SDK](https://platform.openai.com/) by installing and configuring the SDK in a Node.js project. Here you'll learn how to install the [openai npm package](https://www.npmjs.com/package/openai) into an existing project, import the openai dependency, and configure the SDK with your OpenAI API Key to make authenticated requests to the OpenAI API.

[https://platform.openai.com/overview](https://platform.openai.com/overview)
https://platform.openai.com/overview

openai

Install and Configure the OpenAI SDK in a Node.js Project

Image generation provides us a way to bring life to natural language through a visual medium. Through a simple or detailed description, we can generate a completely unique image that tells the story we want whether that's for dynamically creating blog images or exploring new forms of art.

We can use AI to generate images with DALL-E and the OpenAI SDK in Node.js. In this lesson you'll learn how to use the [createImage](https://platform.openai.com/docs/api-reference/images/create) method generate an image using a descriptive prompt, the number of images you want to generate, and the size of the image. 

[https://platform.openai.com/docs/api-reference/images/create](https://platform.openai.com/docs/api-reference/images/create)


Generate Images with AI in Node.js Using the OpenAI SDK & DALL-E

The more descriptive an image prompt, the better the results will be. That includes being able to take user input to help articulate what the image should look like.

Dynamic prompts in Next.js serverless functions can help us generate images based off of application input with the OpenAI SDK. You'll learn how to configure an API Endpoint to parse a body of a POST request to grab a dynamic prompt value and use it to configure the prompt for the createImage method.

[https://nextjs.org/docs/api-routes/introduction](https://nextjs.org/docs/api-routes/introduction)

Create Dynamic Image Generation Prompts for the OpenAI SDK in Next.js API Endpoints

ChatGPT and similar conversational AI tools have quickly made impressions in the tech industry and beyond by giving the people using those tools a more natural and a potentially more helpful means to get answers to the questions they have. Bringing GPT into applications can unlock new ways to solve problems and quickly help customers to solve theirs.

We can create ChatGPT-like conversational messages with the OpenAI SDK in a Node.js project. You'll learn how to use the [createChatCompletion](https://platform.openai.com/docs/api-reference/chat/create) method and configure the gpt-3.5-turbo model to generate a response based on a message prompt.

[https://platform.openai.com/docs/api-reference/chat/create](https://platform.openai.com/docs/api-reference/chat/create)


Generate Chat Completions with AI in Node.js Using the OpenAI SDK & GPT

Requests that we typically make in an application come all at the same time. We make the request, we get a response. But using a streaming mechanism, we can get our information as it comes resulting in a quicker initial response, as well as set ourselves up for different user experiences including conversational-like messaging.

Using Edge Functions in Next.js, we can stream our response back to the application and create an experience similar to the official ChatGPT interface. You'll learn how to set up a new Edge function, make a request directly to the OpenAI API, and listen for the stream events in Next.js with [eventsource-parser](https://www.npmjs.com/package/eventsource-parser).

- [https://vercel.com/docs/concepts/functions/edge-functions/edge-functions-api](https://vercel.com/docs/concepts/functions/edge-functions/edge-functions-api)

Stream OpenAI Chat Completions to a Next.js App Using Vercel Edge Functions

Getting a long string as a response makes a lot of sense if you're building an app or tool that appears conversational or if you just want to display a little bit of information as a response, but if you want to do something programmatic with the information, such as using different datapoints from the information in different parts of the UI, you'll have a hard time parsing out that information from a single request.

To get around this, we can simply ask GPT to return our data formatted as JSON! Further, we can ask it in a particular shape. You'll learn how to format a chat completion prompt to request JSON data and gain confidence in that data by defining the shape in the request.

Requesting JSON Chat Completions from OpenAI for Programmatic Use


An important part in creating a data API whether based on generative systems or not is being able to reliably generate responses in the format you need. Variable data structures and irrelevant information could break your application or frustrate the users of your API, resulting in downtime or lost customers.

Using the messaging API, we can train GPT to become more aware of our needs by using System roles to instruct GPT on behavior and User to Assistant examples to give GPT precedent to base its next response on.

[https://platform.openai.com/docs/guides/chat/introduction](https://platform.openai.com/docs/guides/chat/introduction)

Training GPT Using Roles & Message Examples for Better Chat Completions

With a reliable data API, we can start using our generative output in creative ways, including feeding that directly into a new generation like creating an image based off of a blog post.

We'll look at taking a GPT-generated blog post and feeding it into DALL-E along with some stylistic prompt engineering to generate an image for our post.

Use Chat Completions for Image Generation Prompts with DALL-E

Using the models that OpenAI provides will get you really far, but their knowledge base can be somewhat limited for particular information or if its past a certain date that the model doesn't support.

To improve the experience, we can train models to have a better understanding of the data we want to work with, whether that's documentation for a new developer tool or guiding the model to respond closer to how how we expect.

The problem—is you need a lot of data in a specific format to do this and its not very practical to write it all our by hand. So we can instead use GPT, where by providing our data, we can ask it to generate JSONL training data for us and format it in a way that we can use to fine tune our model.


- [https://platform.openai.com/docs/guides/fine-tuning/prepare-training-data](https://platform.openai.com/docs/guides/fine-tuning/prepare-training-data)

node

Generating & Preparing JSONL Training Data with GPT for Fine Tuning an OpenAI Model

Once we have our training data, we need to a way to deliver it to OpenAI.

We can do that by uploading our training data file to OpenAI directly where we can then reference that with our fine tuning.


- [https://platform.openai.com/docs/api-reference/files/upload](https://platform.openai.com/docs/api-reference/files/upload)


Uploading Training Data Files to OpenAI for Fine Tuning AI Models

We can teach an AI model to better understand the information we want to generate responses from. To do that, we can use training data in a particular format, JSONL.

Once we have our data generated and uploaded to OpenAI, we can now use it to fine tune or customize a model to provide better results.

We'll use the training data we generated and uploaded in previous lessons to create a new fine-tuned model based off of the OpenAI davinci model.


- [https://platform.openai.com/docs/api-reference/fine-tunes/create](https://platform.openai.com/docs/api-reference/fine-tunes/create)

Fine Tuning OpenAI Models with Training Data Files

In this course, you will learn how to initialize Prisma in a TypeScript Node project, use Prisma Client to create and find records, use Express to create data dynamically, and more

Build a Backend with Prisma in a TypeScript Node Project

Using Next.js and Fauna, you can build robust, feature-rich, production-ready full-stack applications without the hassle of managing any servers or databases.

Full-Stack Serverless Apps with Next.js & Fauna

Build a blazing fast chat app with Remix and Supabase! This course covers everything you need, from database hosting to authentication and authorization, all with real-time updates

Build a Realtime Chat App with Remix and Supabase

Get Started with AI-Driven App Development Using the OpenAI Node.js SDK

https://app.egghead.io/api/v1/lessons/node-js-install-and-configure-the-openai-sdk-in-a-node-js-project/subtitles

Instructor: [0:00] The OpenAI platform provides a lot of capabilities for how we can tap into that AI power. Whether we're trying to create chat completions like ChatGPT or use DALL-E to generate images, we can get started in a Node application or environment by first running npm install openai.

[0:16] Inside of my terminal, I'm going to run npm install openai. Once it's installed, I want to then configure OpenAI inside of my Node.js environment, where here, I'm going to use a Next.js serverless function.

[0:28] If we look back inside of the documentation, under Authentication, we can see that the way that we can configure it is by first importing the configuration and the OpenAI API modules from openai.

[0:40] With that imported, we can create a new instance of configuration and the OpenAI API, where here, I'm just going to go ahead and copy all of these lines and paste it right in at the top of my serverless function, where as we can probably see, actually using the OpenAI ListEngines method probably needs to happen inside of the handler itself.

[0:58] Now, it appears that ListEngines may be deprecated, or something along those lines, but we're really only going to use it to test that this end-point and configuration works in the first place. What we can do is we can define a data point, where we're going to set it equal to response.data.data.

[1:13] Now there's only one thing left to do, and that's set up our OpenAI API key. I'm going to copy that value, and inside the root of my project, I'm going to create a new file, .env.local, where inside, I'm going to set that new API key.

[1:26] We're back inside of the OpenAI dashboard, I'm going to head up and click the Personal tab, or the organization that you're currently under, and I'm going to select View API Keys. We can see that I already have two created for my own use, but I'm going to go ahead and create a new secret key. I'm going to copy this value and paste it in as my OpenAI API key.

[1:44] As we can see, we're already referencing that variable, so we don't have to do anything more at that. As a personal preference, I like to set all of my configuration into an environment variable, so I'm going to also set this organization as an environment variable as well.

[1:56] I'm going to set this as OpenAI Organization, where back inside of my .env.local, I'm going to set that OpenAI Organization to that organization value. Now our serverless function is ready, and we should see a response of all the available engines inside of the data response.

[2:14] Once our environment is ready again, we can head to the browser and visit localhost:3000/api/image, or depending on where you're accessing your environment. Now we can see that we are successfully listing out all those different engines by connecting to the OpenAI API.

[2:29] In review, in order to install and configure OpenAI in a Node environment, whether that is a Next.js serverless function or a Node server, you want to first install OpenAI as a package, where after importing the configuration and OpenAI API, we can then create those new configuration and OpenAI API instances where then we have access to invoke the different methods of OpenAI to ultimately get our results.

https://app.egghead.io/api/v1/lessons/node-js-install-and-configure-the-openai-sdk-in-a-node-js-project/transcript


If you wish to thoroughly test essential features of your npm package in real-world scenarios before its official release, it's a good practice to establish a prerelease channel labeled as `@beta` to allow early testing.

By incorporating [semantic-release](https://semantic-release.gitbook.io/semantic-release/) into our Continuous Integration (CI) environment, we can automate the entire package release process. This tool determines the next version number by analyzing commit messages (including keywords like "fix," "feat," and "BREAKING CHANGE"), generates release notes, and publishes the package.

To set up a GitHub Action for this purpose, follow these steps:

**Step 1: Define the GitHub Action Workflow**

Create a `workflows` folder at the root of your project and include a `release.yml` file with minimal configuration settings for semantic-release. This workflow runs on Node.js version 18.

```yml
name: Release CI
on:
  push:
    branches: [main, next]
  pull_request:
    branches: [main, next]
jobs:
 ...
 
```

The `on` section specifies the triggers. In this case, the workflow "Release CI" will execute when a new commit is pushed or merged to the `main` or `next` branch.

**Step 2: Add the Prerelease Channel**

**2.1 - Update triggers in release.yml**

To incorporate the beta channel as a trigger in the `release.yml` file, modify the `on` section as follows:

```git
on:
  push:
-    branches: [main, next]
+    branches: [main, next, beta]
  pull_request:
-    branches: [main, next]
+    branches: [main, next, beta]
```

Now, this workflow will release a new version in the `beta` channel every time there's a `push` or `pull request` merge in the `beta` branch.

**2.2 - Configure the package.json**

In your library's `package.json` file, within the `release` option, add the new `beta` branch with `prerelease: true`.

```
"release": {
  "branches": [
    // other branches
    {
      "name": "beta",
      "prerelease": true
    }
  ]
},
```

After making these changes, commit them to the `main` branch using the following commands:

```
git add .
git commit -m "chore: add beta prerelease channel"
git push
```

**2.3 - Create the beta branch in your repository**

Create a new branch named "**beta**" in your Git repository by running the command:

```
git branch beta
```

Then, create the branch in your hosted repository using:

```
git push --set-upstream origin beta
```

Now, whenever you merge changes into the **beta** branch, you can test your package as a prerelease in your real projects by installing it with `your-package@beta`.

With these steps, you've set up a prerelease channel for your npm package, making it easier to test and gather feedback before the official release.

https://app.egghead.io/api/v1/lessons/node-js-generate-images-with-ai-in-node-js-using-the-openai-sdk-dall-e/subtitles

Create a Prerelease Channel in Your NPM Package using semantic-release

[00:00] If you want to test some critical features of your NPM package in real-world scenarios before releasing them, it could be nice to have a pre-release channel, like the one we have here, called Next, and be able to try it out first. To achieve that in our package,

[00:18] we will be using the tool Semantic Release. This tool help us automate the whole package release workflow, including determining the next version number, generating the release nodes for all the changes, and publishing the package to the NPM registry.

[00:34] Let's see now how we can add that to our library. As our project is host on GitHub, we can create a GitHub action by defining a workflows folder and a release.yaml file. The release.yaml content is a minimal configuration for Semantic Release,

[00:53] running on the 18 version of Node, building our library, and then testing that the library is working nice before releasing it. This process will be executed when a trigger happens. In this case, what we want is every time we create a pull request and then merge it to this branch,

[01:12] we want to execute this job, and the same when we push content to the branches main and next. In this case, as we want to add a pre-release channel, let's add a new branch to trigger this action. This branch will be beta. So you can add it as a trigger

[01:33] for the pull request and push actions. Now that we have it, we can go to the package.json of our library and add the pre-release channel as part of the branches in release.

[01:53] So now we have a branch called beta in pre-release to true. So now let's push the changes to the main branch and let's run

[02:04] git add dot then git commit dash m core add beta pre-release channel.

[02:21] We can run git push. Perfect. Let's clear the terminal. Now that we have defined the trigger in the pre-release channel beta in our package.json, let's add a branch in our repo to actually make these changes happen.

[02:44] Let's run the command git branch beta. Now we have created the branch, but we need to push it to our repo. So let's run the command git push dash dash set dash upstream origin beta.

[03:01] We are pushing our branch to the repo so we have it ready. Now we have everything we need to have a pre-release channel beta. So let's try it out. Let's now check out the beta branch with git checkout beta. Now that we are here,

[03:20] we can change something in our repo and commit it to see the pre-release happen. Let's change the name of the author, for example, adding the role. Once we save it, we can add it to our changes in git and then

[03:37] commit it as a fix in order to see the pre-release happen. Otherwise, will not be pre-released. Let's run the command git push that will trigger our release YAML.

[04:02] Now we can go back to our repository and check the actions. You can see that the latest that we executed was the fixed pre-release try we just push. If we open it, we can see that the release YAML was the one

[04:20] executed and the release was successful. Let's go now to the code and then open the releases again. So we can see that the beta pre-release channel has deployed a new version that we can try it out. Then when you are happy with the result,

[04:37] you can merge into main and you will release the latest package version.

https://app.egghead.io/api/v1/lessons/node-js-generate-images-with-ai-in-node-js-using-the-openai-sdk-dall-e/transcript

https://app.egghead.io/api/v1/lessons/node-js-create-dynamic-image-generation-prompts-for-the-openai-sdk-in-next-js-api-endpoints/subtitles

Instructor: [0:00] When using OpenAI to generate a new image using the createImage method, we can easily pass in a prompt with a static message. To make our API more flexible and more interesting, we can instead take a dynamic value and pass that in as the prompt.

[0:16] When working in a Next.js serverless function environment, we can grab the body of a request and pass that body in through the caller, in order to dynamically change that prompt value. Here, I have an example inside of my Next.js home page, or whenever I click a button, I can make a POST request to the API image end-point.

[0:34] Here, I can specify my body, where I can pass in the prompt that I want, such as a superhero that personifies a jellyfish. Then, inside of my serverless function, I can create a new constant of Body, where that's going to be equal to json.parse, where I'm going to pass in the request object, .Body, which is going to contain a string of the body that I passed for my application.

[0:59] I can even take that a step further and destructure that prompt, and pass it directly into that createImage method. Now, the only thing left to do is update how I respond, so that I can pass in what's expected as the image property, which in our case would be equal to response.data.data, where we're going to grab the first element of the array, and then finally, the URL.

[1:21] Now, if we try to actually hit the Generate button, we can see our new jellyfish superhero appear, where if we try this again so that we can actually see the network request, we can see select that image request, we can inspect what we sent, including that prompt as well as the response, which we can now see that image URL.

[1:38] This also gets more interesting when you create a field that somebody can customize what they want, or other form fields like a Select.

[1:45] If I have this handle on Generate on that form, and I use the fields from that form to grab the prompt value, I can then pass that directly in as that body and instead pass in something like, "A baby with superpowers." Once I try to generate, we can now see our superhero baby.

[2:03] While we're passing this prompt indirectly to the createImage method, this can become more interesting by configuring a prompt that set some parameters, where then we use input from the user, such as from a Select field, or given a set of options, where we can configure that prompt to dynamically change what we get, while still controlling the ultimate response we get.

[2:24] In review, in order to dynamically take a prompt and use it in the createImage method, we can accept a body, whereby grabbing that prompt value from a UI or however you're accepting parameters inside of your environment, we can use that prompt to dynamically generate a different image based on the user input that's provided.

https://app.egghead.io/api/v1/lessons/node-js-create-dynamic-image-generation-prompts-for-the-openai-sdk-in-next-js-api-endpoints/transcript

https://app.egghead.io/api/v1/lessons/node-js-generate-chat-completions-with-ai-in-node-js-using-the-openai-sdk-gpt/subtitles

Instructor: [0:00] One of the OpenAI features that have made waves in the tech community is the ChatGPT product. By being able to simply write a human sentence, such as, "Which is the most popular React framework?" we can see that based off of ChatGPT's current knowledge, that's Next.js.

[0:15] By using the OpenAI SDK, we can take advantage of similar models to create our own ChatGPT interface, or by doing more interesting things tailored to the project that we're working on.

[0:26] Once you have OpenAI installed and configured in your Node environment, where here, I'm working inside of a Next.js serverless function, I'm going to create a new constant called completion. I'm going to set that = await openAI.createChatCompletion, where inside, I'm going to pass in a new object where I'm going to define my model.

[0:46] According to the documentation at this point in time, the latest model we can use for this API is GPT 3.5-Turbo. I'm going to paste that in as my model, and then I'm going to define the messages that I want to say to my createChatCompletion.

[1:01] Now, by following the documentation to Chat format, we can see that there are multiple ways that we can define a message when sending it to ChatCompletion. By using a role of system, we can help define the behavior of the ChatCompletion assistant that we're creating. By using the user role, we can send in messages on behalf of the user using the application or if we want to send messages to prompt ourselves.

[1:23] As you might have been able to guess, the assistant role is going to be messages that are going to appear as if they came from the assistant themselves. The assistant role may come from previous conversations or you might want to try to help set up different scenarios that the assistant should be aware of.

[1:40] For now, let's just get started sending in a user message. I'm going to set up a new object where I'm going to set my role to user and then I'm going to set up my content object. I'm going to set that to whatever my prompt is going to be, such as, how many jellyfish are in the sea? In order to see that data, let's pass back completion.data.

[2:00] Now, depending on the environment you're in where I'm using an XJS serverless function, I can now invoke that function. Now, we can see the response where it seems like the AI didn't necessarily like this question. It's not possible to give an answer for every single individual jellyfish super accurately. They didn't want to give it as such.

[2:18] What if we change this to, how about, what is an estimate of how many jellyfish are in the sea? Let's say, during the summer in the Atlantic Ocean. While it's still prefacing that it doesn't have an exact answer, it's now saying that certain areas can reach millions in the summer months.

[2:39] How about something that can have a more definitive answer, such as, "What is the first online game to be played competitively?" We can see that, of course it was Doom, which was released in '93, and had a multiplayer mode that allowed people to find each other over the network.

[2:55] Whatever that question is, in review, we were able to easily set up a way to ask questions to our GPT model by using the createChatCompletion method of OpenAI, where after defining the model we want to use, as well as defining the messages, we were able to get a response back, including the message that the assistant responded with.

https://app.egghead.io/api/v1/lessons/node-js-generate-chat-completions-with-ai-in-node-js-using-the-openai-sdk-gpt/transcript

https://app.egghead.io/api/v1/lessons/node-js-stream-openai-chat-completions-to-a-next-js-app-using-vercel-edge-functions/subtitles

Instructor: [0:00] Similar to a previous lesson where we generated an image based off of a custom prompt, we can do the same thing when generating text by passing in that dynamic value to our chat API.

[0:10] Once we receive that prompt, we can send it in through as our content for our user message and then return that data, which will give us similar results, only it'll give it to us as text.

[0:20] Now, this generally works fine, but if we click the "Generate," we'll notice that once that response returns, we get the entire thing right away. That makes sense because we're making a single request where we await for the entire Create Chat Completion process to finish until we return that data.

[0:37] Instead, we can stream that data back to our UI, where similar to ChatGPT itself, we can actually show the message is being sent to the client in real-time.

[0:46] To do that, we're going to use Vercel Edge Functions instead of serverless functions, where along with a lot of other capabilities, including increased timeout size, which helps for using the OpenAI APIs, we can also stream that data from the endpoint directly to our client as long as it's configured to do so.

[1:05] To start, we're going to duplicate our Chat API endpoint and we're going to create a version called ChatStream, just so that we can maintain that original version. One big thing about using Vercel Edge Functions is they use the Edge runtime, where a lot of typical Node support is not available. That means we won't be able to use the OpenAI SDK at this time.

[1:25] While we're not going to review the Edge runtime in depth, you can check out their documentation, which covers all the different APIs that are actually supported. Now, the first thing we want to do in this case is let Vercel or Next.js in this case, know that this is an Edge function.

[1:39] The way that we can do that is by exporting a constant of config. We're going to say that we want the runtime to be Edge. The next thing that's going to differ is how we grab the body of this request. When setting up our handler, our arguments are going to look a little bit different.

[1:54] Where this first argument will still be a request, the second one is going to be context. We're not going to necessarily use that here, but we're not going to get just a simple request body that we can use. The change is pretty simple though, where all we need to do is instead of this JSON.parse, we're going to say, "Await request.json."

[2:12] As I mentioned before, we're going to have to change how we interface with OpenAI. We're also going to change how we respond, where we're going to return a new response, where when we're streaming our response, we're going to pass through the response body from that request.

[2:30] For now, just to test that this works, we can pass in a JSON.stringify, with an empty object, where then we want to set a status of 200. Then, we want to also set our headers, where in our case, we want to set a content type of application/json with a charset of UTF-8.

[2:46] Now, if we open this up in the browser, we'll see that it won't work because we are trying to get that Request.JSON. Just to prove that this works, we can comment that out. We'll see that we get our empty object. We'll ultimately be passing through that prompt to OpenAI, where now we'll send a request directly to the OpenAI API without using the SDK.

[3:05] I'm going to create a new constant of completion, just like we did with the actual SDK, but this time I'm going to await a fetch request, where we're going to want to create a chat completion, where here, we can find the endpoint to where we want to send this request.

[3:19] We'll set our endpoint, but then I'll also pass in a configuration object, where first I'm going to pass in a method of POST. If we look at the documentation, we can see how they're setting their different headers, where they have that content type of application/json, as well as the authorization header.

[3:35] I'm going to create my headers object, where I'm going to paste in my content type and then I'm going to define my authorization header, where that's going to be a dynamic string starting with Bearer, and then I can go ahead and grab my API key from that original configuration instance. I'm going to paste that in as my dynamic value.

[3:52] Now, this documentation here doesn't necessarily specify that we need our organization. Just in case, we can specify our OpenAI organization, where for that value, we can grab that same organization environment variable that we used before, just like the API key, and paste that in as the value.

[4:10] Now, for the most important part, where we're going to define our body, we're going to use JSON.stringify, where what we're going to actually do, is we're going to grab the payload from our initial SDK instance. I'm going to uncomment that for a second.

[4:22] I'm going to grab that object, recombinant out, and then I'm going to paste that right into stringify, where I'm going to make sure I have my extra comma. The only other thing that we need to do is we want to say that we want to set stream to true, which means we want this response to stream.

[4:37] Now, we can take this completion object, and we're going to go ahead and pass it right through to our response, where we're going to pass in completion.body. Now, heading back to the application, this is where it's going to get a little bit trickier, where let's first set our endpoint to ChatStream. I'm going to change this destructuring statement just to response.

[4:55] I also want to remove this then statement which is transforming it to a JSON response, where before we move on, we can see what this looks like. I'm going to console.log out the response.body. It's not going to be anything readable for us.

[5:10] Let's return right after that, just so that we don't have to deal with the other code inside of here, where now if we try to send that same question, we're going to see our console.log of that response.body, but we're going to see that it's a readable string.

[5:21] What we now need to do is take this response.body and decode it, so that we can read that stream. To start off, we're going to create a new Reader constant, where we're going to set that =response.body.getReader. We're then going to set up a new instance of a decoder, which we'll set equal to a new instance of TextDecoder.

[5:43] What's going to happen is we're going to listen in on this Reader, where we're going to get a bunch of different responses from our response.body itself, where that's going to be the streaming process, where every time that comes through, we're going to decode that response and set it to the UI.

[5:57] What we need to do is create a loop so that we can keep checking that response, and then use it inside of our application. What we're going to do is create what feels like an infinite loop, where we're going to await Reader.Read, which we're going to destructure as value and done from that Reader.Read.

[6:18] To break this loop, what we're going to do is, if we detect that it's done, which will be a truthy value, we're going to run the break command which will stop this wild loop. Outside of this done, this value is going to have an encoded value that we want to decode, which is where the decoder comes in.

[6:35] Let's say, constant dataString=decoder.decode, and we're going to pass in that value. Let's console.log out that dataString so we can see what we're working with.

[6:47] If we try to generate that response again, we can see that we get a bunch of different responses, which is that message streaming to the UI, where we can see if we start to look at this, we have a data value where it's going to be an object that includes a lot of different things about the events happening within that stream.

[7:05] If we look particularly inside of this choices array, where we have this Delta of a content property, which has that text that we would be appending to the text that's currently inside of our application.

[7:19] While technically, we could probably try to parse this out, and then parse the JSON object and then consume that data, we can instead use this handy tool which is called eventsource-parser that helps us out with this case.

[7:32] I'm going to run, npm install eventsource-parser, where at the top of my file, I'm going to import createParser from eventsource-parser. What I'm going to do is create a new parser so that anytime that stream data comes through, we can use it to grab the data that we need.

[7:51] I'm going to say, constant parser=createParser, where inside of createParser, we're going to need to pass in a callback which we're going to call on parse. Let's define that onParse function, where this function is going to take an event as an argument.

[8:09] The stream is going to pass through a variety of different types of events, but we're going to look for an event, type of event, where once we receive that, the first thing we're going to do is wrap this with a try-catch just to make sure that we're not going to run into any issues. We can even console.log out this error, if anything happens.

[8:29] We're going to create a new constant called Data, which we're going to set =json.parse, and we're going to try to parse Event.Data. Before we try to go test this out, we have one more thing to do. We need to feed our parser that data.

[8:43] Below our dataString, we're going to say parser.feed, and we're going to pass directly through that dataString. Let's get rid of that other console.log. Finally, to test out this point, let's console.log out our new Data object. Once we generate that response, we're going to see we keep getting that same looking data.

[9:01] If we look inside, we're going to see that we have these choices and we have our delta, where we have that content which, ultimately, what we want to do is append that to the state, which will show up in the application.

[9:13] If you were paying attention, if we saw at the very bottom here, we saw that we get an error here, because the very last thing that's passed back to that response from the stream is a done string.

[9:25] Clearly, that's not JSON. That's why we're getting that error. We can handle that a little bit nicer to make sure that we're not going to get that error, and that we just prevent that from happening in the first place.

[9:35] With that said, we do have two options, where we could just ignore that or we could remove the console.log. What I prefer to do is, I'm just going to move this dataString right above this break statement.

[9:44] I'm going to add an OR statement, where I'm going to say, I want to check if dataString.includes our done break, where if it does, it will also break this wild loop.

[9:57] If we try to run this again, we're going to see we're going to get all of that data, and it's not going to pass in that broken done at the very end. Now, let's open up this data, grab the actual information from inside, and pass that to our state and update our text.

[10:12] Now, previously, I had texts set up to receive an array of text, but I'm going to revert that. I'm going to replace every instance of texts to just a single text, so that i can pass through that entire stream. That also includes taking this map statement, and I'm going to transform this to be just a single paragraph tag, where I pass through that text.

[10:35] Inside of my onParse, I'm going to start with data.choices, where I'm going to first chain on a filter statement, where I want to make sure that we have this Delta of content. I'm going to destructure that Delta, and I'm going to say, "I want to make sure we have delta.content."

[10:53] Then, I'm going to say, forEach, and grab that same Delta, where inside, I want to start to run that setText function, where when updating the state, I'm going to pass in a function. I'm going to pass through my previous, where from that, I'm going to return a template literal tag with my previous intact, but also add my delta.content.

[11:15] This time we'll see that if we try to generate that, that response is going to be streamed to the UI, just like we're doing inside of ChatGPT. As one last correction, if we look at the very front of this actual string, we'll see undefined. If we look inside of our code, the issue is that previous on that first run is going to be undefined.

[11:32] What we can simply do is we can add an OR statement and we can say, "If it is undefined, let's just pass in an empty string." Now, when we run Generate, we can see it stream right into our UI, working perfectly.

[11:43] In review, in order to stream responses similar to how we see it happen with ChatGPT, we're going to use Vercel or Next.js Edge functions, where inside, we're going to need to reach out directly to the OpenAI API rather than using the SDK, where we can still pass in the same body that we did to the SDK, including that dynamic prompt.

[12:02] Only this time, we're going to stream the completion body as a response, and then the UI listened for that response, so that we can parse the event that comes through, set our text using that data, and give a great experience, where as soon as we have that data, it's going to stream it to the application as fast as it can.

https://app.egghead.io/api/v1/lessons/node-js-stream-openai-chat-completions-to-a-next-js-app-using-vercel-edge-functions/transcript

https://app.egghead.io/api/v1/lessons/node-js-requesting-json-chat-completions-from-openai-for-programmatic-use/subtitles

Instructor: [0:00] Streaming chat completions is a really interesting way to provide an interface for people who wanted to have a conversation, but it might not make as much sense for programmatic use, such as, what if I want to get a bunch of attributes and display them in a UI that I want to control.

[0:14] Now, part of this is controlling the messaging we're sending to GPT, in order to get a response that makes sense to us. For instance, if I make this a dynamic prompt, where inside I'm still passing in that prompt, but I say, "Return the response as a JSON object that includes an array of strings."

[0:35] If I generate this response again, we can see that they're now returning this object with an attributes property that has an array of all those strings, just like I asked. Now, what can I do with it? I can parse that as JSON and use it inside of my project.

[0:50] The only issue is that, because we're streaming this, it might not make much sense because we would need to try to parse that every time we get a new set of data, or we would just have to wait for it to be done anyways. Why even go through the trouble of trying to stream it into our application in the first place?

[1:06] For this model, we can go back to a pretty standard request format, where we just ask for it and get the response, as opposed to trying to stream it into our application. That way, once it returns, we can try to parse that and deliver it. What I'm going to do is actually duplicate the original chat endpoint that we had.

[1:23] I'm going to call it attributes.js, where inside, we can see that we have that original SDK usage, where we're using the createChatCompletion method, and we're passing that just as data right back to the UI. I'm going to copy over that prompt response, as we'll need it inside of this new use case, and also revert it in the original chat stream API.

[1:45] Back inside of my application, I'm going to remove all the streaming logic where we have that original response. I'm going to also update the actual API endpoint to attributes. I can even add the Venn statement that we had on before to make sure we get it as JSON.

[2:00] Because we know we're going to get this as a property called data inside of that response, I'm going to go ahead and just destructure the data. Let's just test this out to see how it's working before we move forward. Now, if we try to generate that response again, it's going to take a little bit of time before, it's not going to stream directly into the application.

[2:18] Once we get that response, we can now look through the choices, we can find the message. While the content is still going to be a string, we can see that it is going to be that JSON object. We have a decision to make, do we want to parse that JSON inside of the endpoint, or do we want to parse it inside of the UI?

[2:35] It probably makes more sense to do it inside of the endpoint, as ultimately, we're creating a data API in order to get that data back into the application. I'm going to create a new constant called "data." I'm going to set that =completion.data.choices, where I'm going to just grab the first item inside of that choices array.

[2:53] I'm going to specify zero and get the message and the content. Now, realistically, we want to be able to take this data and parse it. Let's wrap this content with JSON.parse where once it is parsed, we can pass that right back into that response. Now, if we try to generate this again, we now see our logged out attributes where we have a list of all those different strings.

[3:15] If we now create a new state property for that, and let's call that attributes, so that we can actually set it to something that makes sense. Then, we can have a default state of an empty array. We can go down to where we get that response and set that data where we want to make sure we actually parse in the attributes.

[3:33] Down inside of our UI, we can say that if we do have those attributes, we can go ahead and map through each and every one of those attributes so that we can return. Let's just do a paragraph tag for now so that we can return that paragraph with our attribute inside, and to keep React happy, we're going to set a key of that attribute.

[3:53] Once we generate that, again, we can see all those attributes listed out right inside of our application. I even like this one floats in zero gravity, so we know we're talking about a space jellyfish. Now, this works pretty consistently, but one thing to consider is if you have more complex data when you're trying to get these JSON objects.

[4:10] Now, just as an example, this is certainly going to break our application, but just to kind of show what would actually happen. If we say something along the lines of create a magic card, completely new and unique. Then, on top of that, we say return all attributes in a JSON formatted object.

[4:31] If we look at the response of these attributes, we can see that we do get a lot of different data about our new magic card, which is super cool that we were able to even do that in the first place, but pay attention to all these different attributes. I'm going to go ahead and copy the object, just so that we can compare it after.

[4:47] We can see that after we generate a new attributes response, we actually have a different set of data. Not just the name, we actually have different properties, where here we now have abilities that we didn't have in our original data object. We also have things like flavor text that doesn't exist in the original one.

[5:05] We can see that we also can be subject to differences in the capitalization, where here we have flavor_text, where maybe in a different response, we might get camel case, which would absolutely break our application, if that's not consistent.

[5:19] Now, reverting back to our original example, what we can actually do is pass in the shape of the JSON object that we want to try to get more consistent results. While this is just a simple one, we have the attributes property on there, it's still a good way to keep a consistent format.

[5:33] What we can do is we can say, constantshape=object, where we have the attributes as an array of data. I can take this shape and at the very end, instead of saying, with an array of strings, I can say, with a shape of JSON.stringify, and I can pass in that shape.

[5:51] I'm going to make sure I actually wrap that so it's a variable. Once I generate a new response, I can be confident that I'm going to get it in that shape that I requested.

[6:00] Just to prove that this is the case with more complex data, if I have this shape, which is the original object that we stored from the first request, and I pass that in, create a new character along with that shape, we can see that I now get that consistent response that looks similar to that shape that I passed in with the prompt.

[6:17] As we see here, and as we've seen in past videos, the real trick with working with GPT is being as specific as you can. That includes with programmatic terms, so that we can get exactly what we want in the response.

[6:29] In review, in order to turn chat completions into structured data, we need to first decide if it makes sense to stream our data or just send back a standard JSON response.

[6:41] Whatever method we choose, we can instruct OpenAI to return the response as a JSON object, along with the exact shape that we want, so that we can later parse that and turn it into our response, where then we have our consistent data response, where we can then do whatever we want programmatically within the UI.

https://app.egghead.io/api/v1/lessons/node-js-requesting-json-chat-completions-from-openai-for-programmatic-use/transcript

https://app.egghead.io/api/v1/lessons/node-js-training-gpt-using-roles-message-examples-for-better-chat-completions/subtitles

Instructor: [0:00] picking up with a new example where we have a generate post form and if we enter our topic such as gaming, we can generate a new post. Once the response comes back, we can see that we have a new post based on the topic of gaming.

[0:12] To make this work, I created a blog endpoint similar to the attributes we did in a previous lesson where I'm using a shape of content where I want to get my blog content in order to ask GPT to create a new blog post with a dynamic prompt and then ultimately return it in the response with the shape of that shape object.

[0:31] Inside of my application code itself, I'm simply posting that prompt or the topic to that endpoint. As we also realize in one of the past lessons that this isn't totally reliable where GPT doesn't always respect our wishes to return that as a properly formatted JSON response.

[0:47] The way that we set this up, and the way that we're currently doing this here, is by trying to jam all that information into one single message, where the Chat Completion API allows you to pass in messages using different roles.

[0:59] For instance, we could use the System role to provide some initial setup, and then the User and Assistant roles one after another, in order to provide an example, where then finally, we can use another User role to finally ask our question.

[1:12] To see how this works, I'm going to dive back into my blog endpoint, where instead of just passing only a User role message, I'm going to pass a first new message, where my role will be System, where I'm going to create a new message with my content, where, like we see in this example where they're saying, "You are a helpful assistant."

[1:30] We can say, "You are an assistant that creates new blog posts on a given topic. You should provide a title and HTML content in JSON format." Now, just as a quick check, let's go ahead and try it again and generate a post, where depending on the generation, we still may have mixed results, where other times, we'll get a response that we can dump on the page.

[1:53] Now before we start to fix the HTML, which was intentionally added to make it easier to consume this API, we can make more changes to our messaging so that we can have more confidence that we're going to get the right response.

[2:03] The first thing I'm going to do is create a new message, and I'm going to set the role as User. For my content, I'm going to pass in a message as if I were asking it to create a blog post based on a topic, so let's say, something like technology.

[2:16] Now, following up on this message, I want to create a new message from the Assistant to act like it was responding to this User message. What this will do is set up an example so GPT has an idea of how to respond to future messages.

[2:31] If I create another message, but this time, I set my role as Assistant, and for my content, I'm going to json.stringify the shape that I previously have defined for how I want this content to look. Maybe I'll update this content to say something along the lines of "A blog post about current technology".

[2:51] That way, hopefully, it can recognize that shared topic between the user and the assistant response. I know I also want this content to be in HTML format, I can add the paragraph tags around that content so it knows to return it in that format.

[3:05] Finally, I also want a title on this. I can just add something simple like Technology title. Now because I already have some of these rules defined and I'm also defining this example now, I'm going to get rid of that original user message that defines that shape to simplify things.

[3:21] Now, if I try to generate another post, we can see that we do now get that blog post. If we try it again, I'm going to get yet another blog post. We can see that we're getting much more confident responses every time we click Generate.

[3:33] Now, to finish out this example, let's render this HTML, where with my response I'm currently setting my post as data content. Now, the first thing I'm going to do is set the full data object as my post. That way, I also will have access to the title. Then I can start to update the UI, where maybe I'll add an H1, where I'll include the post.title.

[3:53] For the post content, I'm going to create a new div, where I'm going to dangerouslySetInnerHTML, where inside I'm going to add my HTML attribute, where I'm going to set post.content and get rid of that original post.

[4:07] Now arguably, you could probably create a more complex structure where this content has an array of all the different nodes along with the different associations. For the sake of this example, we can keep it simplified with this rendered HTML.

[4:19] Now, when we try to go back and generate a post, we can see that I get my title and I get a full post that talks about my topic.

[4:26] In a later lesson, we'll learn how to do this with the fine-tuning mechanism, where we can construct our own model rather than creating those messages every single time. For now, this gives us a way to provide context and examples for how we want to formulate our responses from GPT.

[4:41] In review, in order to enhance our ability to build responses from GPT, we can use different messages with different roles, such as system, user, and assistant, where we can provide more context to GPT but also provide examples for how we want GPT to respond, where now when we hit this endpoint we can more confidently get a response that can build our UI and generate the information that we need.

https://app.egghead.io/api/v1/lessons/node-js-training-gpt-using-roles-message-examples-for-better-chat-completions/transcript

https://app.egghead.io/api/v1/lessons/node-js-use-chat-completions-for-image-generation-prompts-with-dall-e/subtitles

https://app.egghead.io/api/v1/lessons/node-js-use-chat-completions-for-image-generation-prompts-with-dall-e/transcript

https://app.egghead.io/api/v1/lessons/openai-generating-preparing-jsonl-training-data-with-gpt-for-fine-tuning-an-openai-model/subtitles

Instructor: [0:00] When working with different AI models, you're limited to the set of data that the models were trained on. Fine tuning gives us a way to customize these models in a way that's going to train it on the data that we want it to understand and know. But before we're able to create a fine tuning mechanism, we first need to have our data prepared in a way that the fine tune will actually understand.

[0:17] In particular, we're going to use the JSONL syntax where each line will contain its own JSON object, complete with a prompt and a completion. Now to start, I created a bunch of fake data, which is something that OpenAI wouldn't know about, which is a bunch of sci-fi characters.

[0:31] To do this, I used methods similar to what we did in past lessons where I created a specific prompt that's going to ask ChatGPT to create that character data in JSON format. If you want to follow along or try this out for yourself, you can find a link to the code on the lesson video page.

[0:46] Now before we dive in too far with our specific example, you should be known that OpenAI might recommend actually using embeddings rather than using fine tuning depending on the specific use case. You should also know, the more prompts you're able to give as part of your example, the better results you're going to have with your trained model.

[1:02] For the sake of this example, I'll be using a smaller data set so I'll be limited in the amount of prompts and training data I'll be able to produce. Starting off, while you're probably able to set this up inside of a serverless function, this is really going to be a one-time use thing unless we're building a service around this.

[1:17] We're going to actually just start off by building a script. Inside of my scripts directory, I'm going to create a new file called generate training data.js. Inside that file, I added some boilerplate code including requiring my local environment variable file. I'm going to require the OpenAI SDK. I'm going to configure it and I'm going to create a new instance of OpenAI API.

[1:38] As far as what's inside of the script, I'm creating a new asynchronous function called run where I'm going to immediately invoke it, where I'm going to then use the create chat completion method in order to send my message.

[1:47] Now, as is the same for a lot of the chat completion lessons we've worked through, I'm going to first paste in the first line of our prompt where we're going to first say, you are an assistant that generates JSONL prompts based off of JSON data for fine tuning.

[2:01] What we're going to want to do is describe what we have and what we want GPT to do with the data to ultimately return a result. Let's start off by saying how we want our response to look like. I'm going to say, each response should be formatted as, and make sure I add that space, where I'm going to create a new variable where inside I'm going to JSON.stringify.

[2:21] I'm going to create a new object where I'm going to define my prompt and my completion. I can easily automate this because I already have my characters array so I can actually use a real example. I'm going to add my const characters and set that equal to require.

[2:36] I'm going to go up a level and then I'm going to navigate to /source/data/characters.json. For the question, I can say, "What species is Xander Prime?" and I can say, "They're a cyborg."

[2:46] For my prompt, I'll say, "What species is characters0name?" with a question mark, and then for the answer it's going to be, characters0species. Then I'm going to say, "Please generate 10 questions based off of the JSON and provide it in JSONL format."

[3:09] Then we'll say, each response should come from the following JSON, where now I can use JSON.stringify again, and pass in that first character as a sample. To see how this works, I'm going to console.log out that response.

[3:24] If I run, node scripts generate training data, we can see that I get a response that's just that, where I have my prompt and my completion, "What does Xander Prime do for a living?" and it looks like he's a mercenary that works for the highest bidder. I can even look inside of my actual character data, and I can find where we see that, "Xander is a mercenary that works for the highest bidder."

[3:45] As we've also seen in previous lessons, being able to generate responses in the exact format you want can sometimes be hit or miss. Now here, I seem to have had a success with generating all of my prompts and completion messages, so it seems like we're OK here. Just keep in mind that you might have to massage the prompt a little bit, in order to get the response that you want.

[4:05] Now that I have this, I ultimately want to create this for all of my characters, not just Xander Prime. I'm going to abstract this into a function, so, async function generatePrompts, where I'm going to take an argument of character, where inside, I'm going to grab that API call and I'm going to paste it right into that function.

[4:23] I want to, ultimately, return that same data that I was returning before, so I'm going to return that as my result. I also want to make sure that I update the character that I'm generating a response from to that single character, not just an instance from that array. Now I can loop through all my characters.

[4:38] Let's say, for const character of characters, I can say that I want to, const create a prompt, where I'm going to use my generatePrompts for that particular character. Ultimately, I want to start to collect all these prompts so that I can store inside of a file which I'll later use for my fine-tuning.

[5:01] I'm going to create a new constant of AllPrompts, I'm going to set that equal to a new array, where I will then push into AllPrompts, my new prompts. To write that file every time we have a new set of prompts, I'm going to update that file.

[5:17] To do that, I'm going to first import fs from the fs package, and I'm going to grab the promises version. I'm going to run, await fs.writeFile. Let's say, we want to add that file to /source/data/prompts.jsonl.

[5:34] The data inside, is I'm going to simply put all prompts, but I'm going to join that with a new return, which is going to add it so it's going to stack on top of each other every time a new set of prompts is added.

[5:48] Let's test this out to see what this looks like. If I run that same script again, it's definitely going to take a lot longer this time because it's going to be running that script for every single one of my characters. Keep in mind, if you have a huge data set, it's going to do that for each of them. It's going to take a little bit of time to run through all this.

[6:05] If you want to make sure you see some progress so that you know that it's working, you can always log out the prompts every time they're created, or the character name, or something to give you an idea of the progress, that it's working through those files.

[6:17] Once it's finished, we can now head back to our editor. I'm going to open up that data file, our prompts.jsonl, and we can see that we have all of our prompts listed in here.

[6:26] If you notice here, we do have an issue where it looks like we have some extra spacing. That's probably going to be deemed as a bad file if we're trying to upload this sample data. We want to make sure that we do some light cleanup on this to make sure that we have valid data for everything that we're sending.

[6:42] OpenAI provides a CLI in Python that allows you to prepare your data, but we can just use some simple rules to get a "what's probably going to work" version of our file.

[6:51] Inside of my generatePrompts function, instead of sending back those prompts right away, I'm going to first take that completion data, and let's say, const prompts = completion. Then I'm going to start to filter out these prompts and use it to break up the data and validate each one.

[7:06] The first thing I'm going to do is return and split those prompts. I'm going to split it by a newline, so I'm going to have an array, where each item in that array is going to be one of the lines of my JSONL file.

[7:18] I'm going to then create a map statement. For each of those prompts, I'm going to say that I want to use a try-catch statement. I'm going to try to JSON.parse() that prompt. Looks like I spelled that wrong. That way, I can make sure that it's valid JSON, which needs to be for every single line.

[7:36] If it works, I'm going to simply return that prompt. I'm going to also run the trim statement to make sure we get rid of some of that empty whitespace on the sides. If it doesn't work, we're going to catch that error and we can even log a message, such as, "Bad data."

[7:49] We can log the actual prompt if we want, but ultimately, return from that try-catch so that I can now add a filter statement, where I'm going to say, for each of those prompts, if my prompt is a truthy value, it's going to filter out all the bad data from that. Then finally, to bring it back all together, I'm going to now join all that data with a new line.

[8:11] Let's try running that script again. We can see that, while in my example, all my data looks pretty good so we shouldn't really see many changes, what we do see is we no longer have that spacing in front of the Thaxos the Magnificence answers.

[8:25] What we just did was generate all these different prompts, the questions and answers, based off of that character sheet we had, without having to manually go through and ask all these ourselves.

[8:35] Again, it should be noted that in my example, we did use a limited set of data, so we're going to have a limited set of prompts that we're going to be able to use for our fine-tuning, where generally, you want to make sure that you have a couple hundred of these, if not as many as you possibly can, because the more you have, the better the results.

[8:50] We can still see this as an example of how we can generate these programmatically.

[8:53] In review, in order to prepare our training data, we can take advantage of another OpenAI tool, GPT, in order to automatically generate all of our questions, or prompts and completions, based off of the data that we have.

[9:05] By using the Create Chat Completion method, we can ask GPT to go through and create that JsonML set of prompts, where after running that for each of our data points, we can then dump that into a JSONL file, which we can later use in order to upload for our fine tuning.

https://app.egghead.io/api/v1/lessons/openai-generating-preparing-jsonl-training-data-with-gpt-for-fine-tuning-an-openai-model/transcript

When you work with observables in Angular, your templates can get a bit messy because you find yourself passing the `async` pipe everywhere and then need to keep track of it.

You can see in this template that we have a lot of `async` pipes and we need to keep track of them.

```html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      {{ title$ | async }}
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <p>
    I'm {{ name$ | async }} and I'm a {{ role$ | async }}, this is a random list of Pokemon:
  </p>
  <ion-list lines="none" class="ion-no-padding ion-no-margin">

    <ion-item *ngFor="let pokemon of (pokemon# | async)">
      <ion-label>
        {{ pokemon.name }}
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>
```

We can clean our template up a bit by using a view model in your template We'll do this by combining all the observables in your class into one single observable.

```typescript
// home.page.ts
export class HomePage {
  private readonly http = inject(HttpClient);

  readonly title$ = of('Combining Observables');
  readonly name$ = of('Jorge Vergara');
  readonly role$ = of('Software Developer');

  readonly pokemon$ = this.http.get<PokeResponse>('https://pokeapi.co/api/v2/pokemon').pipe(
    map(response => response.results)
  )

  // add this observable to combine all the observables into one
  readonly vm$ = combineLatest([this.title$, this.name$, this.role$, this.pokemon$]).pipe(
    map(([title, name, role, pokemon]) => ({title, name, role, pokemon}))
  )
}
```

Now back in our view we can move everything into an ng container and reference the view model.

```html
<ng-container xngIf="vm$ | async as vm">
  <ion-header [translucent]="true">
    <ion-toolbar>
      <ion-title>
        {{ vm.title }}
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="ion-padding">
    <p>
      I'm {{ vm.name }} and I'm a {{ vm.role }}, this is a random list of Pokemon:
    </p>

    <ion-list lines="none" class="ion-no-padding ion-no-margin">
      <ion-item *ngFor="1let pokemon of vm.pokemon">
        <ion-label>
          {{ pokemon.name}}
        </ion-label>
      </ion-item>
    </ion-list>
  </ion-content>
</ng-container>
```

https://app.egghead.io/api/v1/lessons/openai-uploading-training-data-files-to-openai-for-fine-tuning-ai-models/subtitles

 Simplify Angular Templates that Use Observables with View Models

[00:00] Here we have an example of an Angular application working with observables. It has some variables that we're printing on the page, and it's making an HTTP call to get some information from a server. When you work with observables, your templates can get a bit messy because you find

[00:18] yourself passing the async pipe everywhere and then need to keep track of it. There is a pattern I learned from using NgRx component store and it's called using a view model in your template. For that, we're going to create a new class variable.

[00:36] This is going to be our view model. Here we're going to combine all of these observables. What we want to do is

[00:55] return one single object that has all of our information. Now, we can clean our template a bit by creating one single subscription to our view model. Now, we can move everything inside of an ng-container,

[01:16] and now we can start using our view model. Since we are already using the async pipe here, we are not going to need it anywhere else. Instead, I'm going to get the variables from VM dot and the variable name.

[01:34] You see, when I save, it's going to be exactly the same. I can reload the page and all of my data will still be there. With this, you only need to keep track of

[01:51] one subscription and this is the one for your view model.

https://app.egghead.io/api/v1/lessons/openai-uploading-training-data-files-to-openai-for-fine-tuning-ai-models/transcript

https://app.egghead.io/api/v1/lessons/openai-fine-tuning-openai-models-with-training-data-files/subtitles

Man: [0:00] Once we've uploaded our training data and received a file ID, we can now use that to create a fine-tuned model. To do this, we can use the createFineTune method and simply pass in that training file ID in order to start that process.

[0:13] To start, I'm going to create a new script inside of my directory called create-fine-tune. Inside, I added some boilerplate code, including requiring my environment variables, the OpenAI SDK, configuring that, and creating a new instance of the OpenAI API.

[0:27] To get started, I'm going to simply copy the snippet, including the createFineTune method. I'm going to go ahead and paste it inside this asynchronous run function, which we'll immediately invoke. The only thing we need to do is make sure we update the training file to our file ID.

[0:40] In the previous lesson, we uploaded our training data and we got that file ID. I'm going to go ahead and copy my previous ID and paste it in as my value.

[0:48] If we look inside of the documentation, we can see that we have a few options for what we want to do in order to create that fine-tune, where in particular, we want to look at the model, where by default, it uses Curie.

[0:58] When selecting which model we want to use, we're currently limited to a specific set of models. Particularly, we're going to use Davinci for our use case.

[1:05] The only other thing that I'm going to do is specify my model and set that to Davinci. Once that response is complete, I want to make sure I can see the results. I'm going to console.log out the response, but in particular, I'm going to log out the response.data.

[1:18] Now when I run that script, we can see that we get a lot of information in this response. There's a few things that we're particularly interested in, where we see we have this ID, we have our model that we trained this on, we even have our training files which we referenced.

[1:31] We want to look at the status and the events that are occurring. Creating a fine-tune is not a synchronous process. That's going to take a little bit of time for it to finish. We can see that our first event is simply creating that fine-tune.

[1:43] We want to check on the progress of that fine-tune, including checking the status of it, make sure that there were no errors, but specifically, we want to make sure we can know when it's available to use.

[1:52] Like we did with the file, I'm going to first copy this ID so that I can reference it, and I'm personally going to store it inside of my script. What I'm going to do is I'm going to duplicate this file and I'm going to say, I want to get a fine-tune this time.

[2:04] If we look inside of the documentation, we can see that to retrieve the fine-tune, we can use the retrieveFineTune method and simply pass in that ID. Just as another option, we could use the listFineTune methods if we want to check a bunch of our different fine-tunes.

[2:19] For now, we're just checking the status of one fine-tune, so we're going to use the retrieve method. What I'm going to do is replace createFineTune with retrieve, I'm going to copy that ID and replace that object with my fine-tune ID.

[2:31] If I run that script, we can see that I have updates inside of my events, including how much that fine-tune's going to cost, which is going to be 11 cents in US dollars. We can also see that my fine-tune was enqueued.

[2:44] Now, at this point, creating the fine-tune might take a little while. It might depend on how busy it is. It's not going to be something that's going to happen instantly. It's going to be a little bit before you get that successful response where you can start using it.

[2:55] We can even see that if we run this script again, we might have different results, where this time, I can see that my fine-tune has started. If I run it again, I can see the different parts that were completed, and I can even see that my model was now uploaded, where I have that ID that I can now use.

[3:10] This Davinci variation is going to be the ID that I want to use, where that's going to be the ID of my model. Like usual, I want to make sure that I store that ID somewhere that I know I can use whenever I want to use my fine-tune model, where now I can use that model to create things like completions or wherever that custom model's supported.

[3:26] In review, in order to create a new fine-tune model, we want to use the createFineTune method on the OpenAI SDK, where we want to pass our training file ID, as well as the model that we want to base it off of.

[3:38] Once we do that, we need to use the ID from the fine-tune in order to get its status so we know when it's ready to use. Once it's ready, we'll be able to see that uploaded status, as well as a dedicated fine-tune model property with that ID, that will allow us to generate things like completions using that custom model.

https://app.egghead.io/api/v1/lessons/openai-fine-tuning-openai-models-with-training-data-files/transcript

Get Started with AI-Driven App Development Using the OpenAI Node.js SDK

Colby Fayock

Free Community Resource

You might also like these resources:

Build a Backend with Prisma in a TypeScript Node Project

Full-Stack Serverless Apps with Next.js & Fauna

Build a Realtime Chat App with Remix and Supabase

Free Community Resource

Course Content

You might also like these resources:

Build a Backend with Prisma in a TypeScript Node Project

Full-Stack Serverless Apps with Next.js & Fauna

Build a Realtime Chat App with Remix and Supabase