English as Programming Language (EPL)
Skip copy and paste from chatGPT, gen apps from English
By now, it's pretty obvious that Large Language Models (LLMs) are having an enormous impact on the profession of Software Engineering as we know it. For $10/month, GitHub Copilot uses LLMs to generates blocks of code from comment blocks, code that otherwise could have taken hours (or possibly days - hello, Regular Expressions) to write. chatGPT, another massively popular LLM-based tool, is producing high quality code from English in virtually any programming language that we can just copy and paste and have an almost complete application in minutes!
While knowledge of programming languages and software engineering does help debug and troubleshoot some snippets of code produced by those tools, the productivity boost afforded by these new tools is undeniable and they are quickly becoming central parts of new software engineering workflow. Can we take the next logical step and skip the copy/paste from chatGPT completely? Can we use English language to create interactive web apps/mobile apps/blockchain apps/etc.? Of course we can! Here, we'll take a look at the beginnings of how we can build web apps just by using Natural Language. Essentially, the technique boils down to two simple tricks:
A very specific prompt passed on to an LLM (I used chatGPT here)
Dynamically generating a JavaScript include file that is referenced from the UI
Let's dive into those two things. When it comes to the first part, the prompt passed onto chatGPT asks it to act as a JavaScript generator, generating code and passing only the code back (no comments, no explanations). Here it is (the prompt appended is something a user types into the textbox from the UI):
You are a JavaScript code generator. Based on the following prompt, write vanilla JavaScript code that will perform the task requested. Put the code inside a function called doStuff(). Do not apologize. Do not elaborate. Do not provide any commentary. Just output code. Here\'s the prompt:' + prompt;
To bring in generated code to the UI, we can have a nodeJS (or any other code exposing an API) accepting the prompt from the client, passing it onto chatGPT, then generating a .js file as output. Here is a portion of the client part (notice the script.onload part to ensure everything loads before calling it):
script.src = 'http://localhost:8080/my-script.js?prompt=' + promptString;
script.onload = function() {
doStuff();
};
And the corresponding server part that sends .js file with code that was generated by chatGPT:
// Check if the request is for a .js file
if (req.url.startsWith('/my-script.js')) {
…
callOpenAI.write(postData);
callOpenAI.end();
The full code is at https://github.com/echuvyrov/epl/tree/main. Below is just one fun example of an app, a very basic Magic 8 Ball that can certainly be much much improved with a better prompt.
Next steps: add knobs to this to allow to improve the result step-by-step, then capture the final output and dispatch it to a DevOps pipeline straight-to-prod (who tests AI-genned code anyways when we can just regen it in seconds :)).