Introduction

OpenAI Codex is an AI model that turns natural language into code, writes SQL queries, translates code from one language to another, and makes example data. Codex is the AI model behind Github Copilot which powers us to write code faster. It is based on GPT 3, which was trained with billions of lines of code and natural language, and is proficient in multiple programming languages like Python, JavaScript, Go, Perl, PHP, Ruby, Swift, TypeScript, SQL, and Shell script. In this tutorial, we’ll start by learning the basics, then add OpenAI Codex to a Node.js application. The application will feature a simple interface to take instructions from a user and generate the required HTML/Javascript code.

Learning the basics

Before proceeding to this tutorial, you will need to create an account with OpenAI and log in. In this section, I will cover the following

  1. OpenAI Javascript Sandbox
  2. OpenAI Playground
  3. OpenAI Playground Settings
  4. Best practices for using OpenAI Codex

OpenAI Javascript Sandbox

Goto Sandbox

The Javascript sandbox environment is an actual application where you can directly instruct the Codex model to turn your natural language instructions into Javascript code. The model, after converting your instructions, will show the output on the center screen. You don’t necessarily need to write all the instructions at once. Write a small instruction first and wait for the sandbox to write the Javascript code and execute it. Then you can write your follow-up instructions. Here is a short video to show how the Javascript Sandbox works.

OpenAI Javascript Sandbox Animation example

In this video, I created two rotating squares with different speeds and printed text below the squares. The generated code is quite efficient. However, how it handles complicated queries needs further testing.

OpenAI Playground

Goto Playground

Sandbox is just a demo application developed by OpenAI to demonstrate the capabilities of Codex to process natural language to output Javascript code. OpenAI Playground is where you see the real power of Codex. You should be able to generate code for multiple programming languages, generate SQL queries, optimize code, and many more. Also, you can tweak the behavior of the AI for your queries.

On the OpenAI playground, select the default model as code-davinci-002 which is the best available Codex model, and set the Maximum Length to 500. Let the rest of the parameters stay at their default values. We will discuss them in the next section.

In the input panel, type the following

/*
* Javascript language
* Generate a blue square of 40px at the center of the screen
* Generate a duplicate yellow square left of the first one 40px apart
* Rotate the blue square at 10 degrees per second
* Rotate the yellow square at 30 degrees per second
* Write "Amazing" below the squares
*/

<!DOCTYPE html>

The above instructions should output the following. If you want to see the output in action, check this JSFiddle

<html>
<head>
	<title>Javascript</title>
	<style type="text/css">
		#blue {
			width: 40px;
			height: 40px;
			background-color: blue;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -20px;
			margin-left: -20px;
		}
		#yellow {
			width: 40px;
			height: 40px;
			background-color: yellow;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -20px;
			margin-left: -80px;
		}
		#amazing {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: 40px;
			margin-left: -20px;
		}
	</style>
</head>
<body>
	<div id="blue"></div>
	<div id="yellow"></div>
	<div id="amazing">Amazing</div>
	<script type="text/javascript">
		var blue = document.getElementById("blue");
		var yellow = document.getElementById("yellow");
		var amazing = document.getElementById("amazing");
		var angle = 0;
		var angle2 = 0;
		setInterval(function() {
			blue.style.transform = "rotate(" + angle + "deg)";
			yellow.style.transform = "rotate(" + angle2 + "deg)";
			angle += 10;
			angle2 += 30;
		}, 1000);
	</script>
</body>
</html>

OpenAI Playground Settings

OpenAI provides various settings to improve the desired output from our natural language input. Tweaking these parameters can have a lot of impact on the overall outcome. Let’s understand the available settings present in the OpenAI playground.

OpenAI Playground Settings explained
OpenAI Playground Settings

a. Mode

Editing modes are available in the playground to edit or insert new content in the earlier generated text. In Insert mode, if you write the placeholder [insert] in the existing text and press Submit button, a new text should replace the placeholder. In Edit mode, you need to tell the playground what needs to be changed in form of an instruction like, “Change the grammar”. On pressing the submit button, newly edited text on the right-side panel should appear which can be replaced on the main writing panel by clicking Use as input link.

b. Model

A selection of pre-trained models is available in the OpenAI playground. Categories include GPT-3, Codex, and Fine-Tunes. Although any of the GPT-3 models can be used, the models are not optimized for code processing and generation. Fine-Tunes are a list of custom models created by a user for specific use cases. Using models from Codex (code-davinci-002 and code-cushman-001) is always recommended.

For testing purposes, code-davinci-002 is a great choice because it is more potent than code-cushman-001 and can process 4,000 tokens per request. However, code-cushman-001 is the faster of the two and is helpful where low latency is required. The Javascript Sandbox demo also uses the same model.

c. Temperature:

It is an important parameter that controls output randomness. More the value, the higher the randomness. While in GPT-3 models, increasing the temperature results in a better variety of answers, it should be kept nearer to 0 for Codex models to get accurate outputs.

d. Maximum Length

Determines the maximum length of the output that can be generated which is equivalent to the number of tokens consumed. The higher the tokens consumed, the more will be the incurred cost. The maximum length varies from model to model. One token is roughly equal to 4 characters of English text.

The model tries to elaborate on its answer but terminates its response on reaching the Maximum Limit. You need to be careful while using the API. One probable solution would be to use the response up to the last complete sentence

e. Stop Sequences

Set up to 4 patterns which when encountered will stop generating text like at the end of a sentence or list. The text generation stops when the sequence is reached and the sequence is not printed.

f. Top P

Controls the diversity of the response. Generally used in conjunction with Temperature. In layman’s terms, this parameter controls the available pool of tokens. The higher the number, the bigger the size of the pool. Read More in this discussion

Keeping high-temperature results in picking more random tokens from the available pool of tokens set from Top P.

g. Frequency Penalty

Frequency penalty determines how much a token should be penalized based on its previous appearance on text. Higher the value, the less likely the appearance of similar text.

h. Presence Penalty

The presence penalty also determines how much a new token should be penalized on its previous appearance. Setting higher values results in bringing up newer topics.

i. Inject Start Text & Restart text

This setting is unique to the playground only and helpful for chat applications where there is a to-and-fro communication happening. In a chat, one needs to type the speaker’s name before every conversation. Inject Start Text sets speaker 1’s name and Inject Restart Text sets speaker 2’s name. Upon pressing the “Submit” button new lines with the value “Speaker 1:” appears before the text and end with “Speaker 2:” in another new line.

Best practices for using OpenAI Codex

  1. Start with a comment, data, or code
  2. Specify an output language. If you do not specify a language, it will output a Python code by default.
  3. Styles of writing comments differ in different languages. If you want the desired result, follow the comment style of your language. Like in the example above, I have used /*Comment*/ for JavaScript. But for Python, """Comment""" might have produced the desired result.
  4. Codex is aware of a large number of libraries, APIs, and modules. By telling Codex which ones to use, either from a comment or importing them into your code, Codex will make suggestions based on them instead of alternatives.
  5. Provide examples and comments for better and more efficient output
  6. For Codex, a lower temperature will yield better results.
  7.  Limit the size of the query by reducing max_tokens and setting stop tokens to avoid repetitions. This can be done by adding stop_sequence. Also
  8. A <!DOCTYPE html> at the end of the comment instructs the model to generate HTML output.
  9. Check the code for errors before importing it to your actual application.

Integrating OpenAI Codex with Node.js

In this section, we will create a small web application with node.js where you write the requirement in a form and it generates an HTML and Javascript code for you on a new page. The functionality will be implemented in Javascript only. We will use the code-davinci-002 model to get the response.

Step 1: Install dependencies

Initiate npm and install the application dependencies including the OpenAI library. We will use handlebars.js templating engine to develop the basic interface

npm init
npm install cors express body-parser hbs
npm install openai

Step 2: A basic server

Create a basic server to listen to post requests to route /openai-codex-api and a default route /index to generate the input form. We will be listening to port to 3000 in this example

const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");

const app = express();
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.set("view engine", "hbs");

const port = 3000;

//Render the input form
app.get("/", (req, res) => {
  res.render("index");
});

// create a post route to receive data
app.post("/", (req, res) => {
    const data = req.body;
    res.json(data);
});

app.listen(port, () => {
    console.log(`Node server listening at http://localhost:${port}`);
});

Step 3: Basic interface

Here we will create our interface for the application. Make a views folder and create index.hbs file inside the folder. Then write a simple HTML input/output form

<form method="post" name="openai-codex-with-nodejs" action="/">
  <div>What do you want?</div>
  <div><textarea
      type="text"
      placeholder="Describe your query here"
      name="queryPrompt"
      rows="4"
      cols="100"
    ></textarea></div>

  <br />
  <div><input type="submit" name="submit" /></div>
</form>

Step 4: Output HTML/Javascript code

In this step, we will integrate OpenAI Codex with Node.js via the OpenAI library. As discussed in the section above, we can use Codex models to generate Javascript and Html. Also, we saw how comments impact the output of the program. You will need an OpenAI Secret key for this step which you can obtain here

OpenAI Secret Key

Let’s get into the program right away

// Import the OpenAI
const { Configuration, OpenAIApi } = require("openai");

// Create a new OpenAI configuration and paste your API key
// obtained from Step 1
// The key displayed here is a fake key
const configuration = new Configuration({
  apiKey: "sk-XXXXXXXTJ4UznFsQoZT3BlbkFJrPieBj36AZkmXXXXXXX",
});
const openai = new OpenAIApi(configuration);


// create a post route to receive input data
app.post("/", async (req, res) => {
  const data = req.body;

  // Query the OpenAI API
  let promptContext = `/*
    Javascript application
    ${data.queryPrompt}
    */
    <!DOCTYPE html>
   `;

  const response = await openai.createCompletion({
    model: "code-davinci-002",
    prompt: `${promptContext}`,
    temperature: 0,
    max_tokens: 100,
    top_p: 1,
    frequency_penalty: 0,
    presence_penalty: 0,
  });
  res.json(response.data.choices[0].text);
});
Code Breakdown

Firstly, we need to import the library and create an OpenAI Configuration. After configuring, we create the prompt context.

In the code block above, if we look at the following section carefully, we see that there is an instruction that tells our application to write the code in Javascript. Also, look at how the comments are written using /**/ syntax since we are using Javascript. Lastly, <!DOCTYPE html> instructs the application to generate as HTML.

// Query the OpenAI API
  let promptContext = `/*
    Javascript application
    ${data.queryPrompt}
    */
    <!DOCTYPE html>
   `;

We are actually calling the OpenAI API in the following block

const response = await openai.createCompletion({
    model: "code-davinci-002",
    prompt: `${promptContext}`,
    temperature: 0,
    max_tokens: 100,
    top_p: 1,
    frequency_penalty: 0,
    presence_penalty: 0,
  });
  res.json(response.data.choices[0].text);

The parameters given here can be tweaked according to the instructions given in OpenAI Playground Settings above.

If you see a truncated output, increase the max_tokens parameter.

That’s how easy it is to integrate OpenAI Codex with Node.js. The whole code is available for download on Github

Download from Github

Conclusion

In this tutorial, we learned how to use OpenAI Javascript Sandbox and OpenAI Playground to process natural language to generate code. Also, the various settings available in the OpenAI playground to tweak the output. Lastly, we learned to build a simple web application that can generate HTML/Javascript output from a user’s input query using OpenAI Codex with Node.js.

Do you also want to learn how to train the OpenAI GPT 3 model and add it to a Node.js application? Visit this link. The tutorial also explains how to fine-tune a model for your custom application.

I hope you loved reading this blog. If you have any queries, please feel free to ask in the comment section below.

Categorized in:

Artificial IntelligenceTutorial