Recent work has demonstrated that generative language models
trained on a sufficiently large corpus can produce output from fiction to source code.
In this video, we introduce a pair of tools for interacting with a generative language model in a code editor.
These tools build on generative language macros, or GenMacros, developed through prompt programming.
This GenMacro to “Generate HTML code” consists of two pieces, the user-provided input, and the prompt architecture that
is obscured from the user under the Settings icon.
In this example a user enters the natural language description “make a text input with placeholder 'Enter todo here'”.
The combined prompt calls the generative language model and returns one or
multiple candidate responses.
In this example, the result shows the code and the rendered HTML.
Looking inside this GenMacro's settings, you’ll find examples of natural language
descriptions of HTML, along with the corresponding HTML code. This is combined
with the user input to create the final prompt sent to the generative language model.
Predefined GenMacro’s are created for granular coding tasks like adding IDs to HTML, or generating Javascript.
One problem we wanted to solve was how to interact with the GenMacro in situ to solve a real world coding problem.
In the Code Editor a double bracket is used to delineate the input for the GenMacro.
Hitting the run button or Control Enter gets the result from the generative language model.
You can iterate on the input to refine the desired output.
We can then see alternative responses or accept the result to overwrite our macro input.
GenMacros have been built to perform granular coding examples.
Let’s continue to build a Dynamic To Do app.
In one input we can mix natural language and code.
As well as right clicking on a selection to use our unique IDs macro.
Macros that modify existing code show diffs from the original input.
Individual diffs can be reverted before the result is accepted.
In addition to inline support, we also developed a tool, GenForm,
that provides a structured interface for GenMacros that can produce multiple outputs.
We can paste in our HTML with inline styles to be refactored to have CSS classes.
We return to our HTML macro using the HTML tag to generate the list elements.
And we use the Javascript macro to attach a clickhandler that adds the form input to the To Do List when the button is clicked.
To create this event handler, we paste existing code into the natural language instructions.
The output length is capped at a fixed amount. To continue the code, we click the ellipses icon.
Output can be reviewed and edited before inserting into the editor.
This is useful when a lot of code is generated at one time.
Now, let’s see our generated code in action.
This video introduced the idea of Generative Macros, or high-level macros built on top of generative language models.
GenLine makes these GenMacros accessible in a way similar to autocomplete, allowing users
to describe a goal using a mixture of natural language and existing content.
GenForm supports more structured input and output, allowing users to
produce multiple, interrelated outputs simultaneously.
Together, these tools and the underlying macros show how generative language
models could integrate with applications to augment existing work practices.