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](http://images.ctfassets.net/wv18falai6xw/4YdQbuPEQYYErwmxoqa054/66231a35d627fbaf65e1503392e3f365/Screenshot_2023-04-20_at_10.11.06_AM.png)
Second request:
build a new version but choose different icons that are more visual and less abstract.
![Draw50RandomCirclesWebApplication_v0_0_1](http://images.ctfassets.net/wv18falai6xw/7eljhnvhO8stf5xcMNKYd8/bdac21de4eae4a7393637fa3c4b97ddf/Screenshot_2023-04-20_at_10.19.59_AM.png)
Third request:
build another version but make the clear canvas text white.
![Draw50RandomCirclesWebApplication_v0_0_2](http://images.ctfassets.net/wv18falai6xw/1sv1egkftqTHzoje5m0UiA/c3e079796a21636bf2a8e644eabb7d18/Screenshot_2023-04-20_at_10.47.59_AM.png)
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.