Photo by Alex Eckermann on Unsplash

OpenAI Codex: The Next Step In Conversational UI

Using Chatbots To Create Applications & Interfaces

Introduction

Often, technology at its infancy and inception seems rudimentary, awkward and redundant. Invariably discussions ensue on the new tech’s viability and right to existence, comparing it to technologies steeped in history and innumerous iterations.

I created this JavaScript tennis game using natural language only! 39 Sentences in which I described the functionality. OpenAI Codex translates natural language into code, as first seen in GitHub Copilot. Copilot is based on Codex.

Codex needs to be seen for what it is. A first foray into a new field, and very impressive at that.

What makes Codex of interest is that it is a new application to Natural Language Understanding (NLU).

In this instance, NLU is not used for self-service, or customer care etc. NLU is not used for bi-directional conversation or even a text-in-text-out situation. But we are going from highly unstructured natural conversational input, to a highly structured medium; code.

In essence, OpenAI Codex is an AI system that translates natural language into code.

Codex powers GitHub Copilot, which OpenAI built and launched in partnership with GitHub recently. Codex can interpret simple commands in natural language and create and execute code. NLU to applications.

This is a new implementation of natural language, one could argue.

Codex In Short

Here are a few initial observations…

• Don’t get too creative and elaborate in your natural language description.
• You are basically writing the algorithm out line by line.

The Codex window for JavaScript very much resembles a chatbot interface. Very much simplistic and minimalistic.

• Everything does not have to be explicit. Implicit command are picked up amazingly well.
• Spelling mistakes are also detected and catered for.
• Somehow context is maintained.
• Code can be reviewed in the side pane, manually edited and saved.
• You can refer to functions, variables etc. from the natural language perspective.
• Codex is ideal as a tool to automate tasks and create utilities.
• Codex is well suited as a tool to learn what well formed looks like.

Practical JavaScript Example

One of the easiest ways to get started with Codex is opting for JavaScript. There are a few implementations of JavaScript you can start with:

• A simple website
• Games
• web components like color and date pickers
• Date and time functions

In the example below I wanted to create a fairly complicated dual-player application. The red and blue block can be moved up and down with keyboard keys. The scores can be reset and the game stopped and started.

In this example I wanted to create a fairly complicated dual-player application. The red and blue block can be moved up and down with keyboard keys. The scores can be reset and the game stopped and started

Below you see the sequence of NLU inputs which was used to create the application. Areas which were tricky were defining what a hit is, and what must be counted as a point.

I was able to to say, make the image ball smaller, and Codex can respond to that. This is a very relative and perhaps ambiguous input, which is well executed.

When an ambiguous input is issued like: make button bigger, the context is maintained and the editing is attributed to the button created in the previous step.

create a blueBlock on the left
move the block up when q is pressed and down when a is pressed
create a redBlock on the right
make the background green
move the redBlcok up when o is pressed and down when p is pressed
Add the image called ball: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.6n_nHXX-Cn10IKC0T7A72AHaHa%26pid%3DApi&f=1
crop the image ball circularly
make the image ball smaller
disable scrollbars
animate the ball to move both horizontally and vertically bouncing off the sides
draw a vertical line in the middle of the screen
make the line white and of 20px width
create a variable called redScore
create a variable called blueScore
Display the value of the variable redScore in the top right
make it bigger and bold
Display the value of the variable blueScore in the top left*/
make it bigger and bold
make the blueScoreDisplay red
make the redScoreDisplay reod
check every 10ms if the image ball and the blueBlock overlaps
if true, increment blueScore
check every 10ms if the image ball and the redBlock overlaps
place a button on the bottom left corner called blueButton
when clicked, zero the variable blueScore
make button bigger
place a button on the bottom right corner called RedButton
when clicked, zero the variable redScore
make the button bigger
add a white horizontal line in the middle of the screen 20px wide
Add a large button called Stop in the middle bottom of the screen
when the button is clicked, freeze the image ball
Add a large button called Start in the middle bottom of the screen
when the button is clicked, unfreeze the image ball
make the start button larger
make the stop button larger
make the start button blue
make the stop button red

You need to have an idea of what you want to start with and achieve. Then break it into smaller steps, and executed those steps.

Each step can be tested as you go along. If you just continue without testing at regular intervals, there are sure to be aberrations to the application, not executing correcting.

Another feature is adding web components like date picker, or color picker etc.

The utterance Add a dropdown list with the months of the year created this dropdown.

Just by saying, add a dropdown list with the months of the year, the JavaScript is created and displayed.

The code can be copied out of the Codex environment, or Exported to JSFiddle.

Hence my notion of using Codex as a quick reference. In a sense Codex reminds me of a site like Stack Overflow. The only difference being that as you ask your question and the code is created for you automatically without waiting for an expert to respond.

Depending on the cost of Codex and general availability, it could evolve as a fast and efficient technical resource.

/* Add a dropdown list with the months of the year */
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var monthSelect = document.createElement('select');
for (var i = 0; i < months.length; i++) {
  var monthOption = document.createElement('option');
  monthOption.innerHTML = months[i];
  monthSelect.appendChild(monthOption);
}
document.body.appendChild(monthSelect);

In this last example a timer is set for 10 second increments.

A square is added, and Codex defaults to the size you see below. Lastly, the square color changes every 10 seconds.

Creating a timer for every 10 seconds on which the date/time updates and the color of the square changes.

Conclusion

There has been much discussion on Low Code versus handcrafted or traditional coding. It is not a case of the one or the other. There is a place and an application for both. With advantages and disadvantages.

I discuss that topic in detail here.

And the same holds true for Codex. Will enterprise systems be built this way, most probably not. Will Fortune 500 companies go the Codex route in principle…no.

But, there are some defernite niche applications, these can include:

• Solving coding challenge and problems in certain routines.
• Establishing best practice.
• Quality assurance.
• Interactive Learning
• Generating specific components for subsequent human review.

Subscribe to my newsletter.

Cobus Greyling - Medium

Chatbots, Low-Code & Fine-Tuning

OpenAI

OpenAI Codex