williamcotton.com

Writing Web Applications with LLMs

April 20th, 2023

Using large-language models like OpenAI's GPT family for writing software has been one of the first successful uses for these tools. GitHub's Copilot can successfully implement a large number of software related tasks, from writing code, to tests or even documentation and has become somewhat of an indispensable tool to a large number of software engineers.

While Copilot and other tools that aid in writing code are here for the foreseeable future there are methods for using large-language models that move up the ladder of abstraction and allow for text instructions to update a user interface with interactive functionality.

An example of such an approach is seen in the browser-builder augmentation from the transynthetical-engine.

Here's a brief workflow of building a circle drawing application.

First request:

make a new application called Draw50RandomCirclesWebApplication_v0_0_0

it should have a canvas element that is 320x480

the canvas element should have a black border and a drop shadow

the buttons should be the same size and have meaningful tasteful, pale colors, succinct and friendly text and emoji icons

it should have a button that draws 50 random circles when clicked

it should have a button that clears the canvas when clicked

use an instance of the Draw50RandomCirclesWebApplication to demonstrate to the user that it works

Draw50RandomCirclesWebApplication_v0_0_0

Second request:

build a new version but choose different icons that are more visual and less abstract.

Draw50RandomCirclesWebApplication_v0_0_1

Third request:

build another version but make the clear canvas text white.

Draw50RandomCirclesWebApplication_v0_0_2

More details into this specific interaction including examples of the training examples and the approach to prompt engineering is at transynthetical-engine, but generally the approach is to use few-shot exemplars that train a large-language model to use build and rebuild tools in order to create and update JavaScript stored in a database.

This approach opens up a number of possible areas for exploring new ways to build interactive tools that have classically been achieved using software. One could imagine the integration of an issue tracker that included a single button to "implement" the described requirements. In the near-future while the majority of interactive tools are still hand-written using software code the tool would then open up a merge request. Perhaps the code wasn't implemented correctly and hand-written corrections are needed.