Zine Meets Pull Requests (and more)

The availability of new image generators like OpenAI gpt-image-1
opens
the door to endless new ways to visualize and annotate software artifacts.
“Zine” is a popular graphic art form that combines text and images to tell a story. Can we prompt the LLM to generate a zine from a pull request diff? offline robotic voice: Yes we can.
The script below is a 2 step LLM transformation of the pull request into a zine:
- use
gpt-4.1-mini
to transform the diff into a image generation prompt - use
gpt-image-1
to generate the image from the prompt -
- a bit of plumbing to upload the generated image into a branch and add it to the pull request description
script({ title: "Pull Request Ziner", description: "Generate a zine from a pull request description from the git diff", temperature: 0.5, systemSafety: true, parameters: { base: { type: "string", description: "The base branch of the pull request", }, maxTokens: { type: "number", description: "The maximum number of tokens to generate", default: 14000, }, },})const { vars, output, dbg } = envconst maxTokens = vars.maxTokensconst defaultBranch = vars.base || (await git.defaultBranch())const branch = await git.branch()if (branch === defaultBranch) cancel("you are already on the default branch")
// compute diffconst changes = await git.diff({ base: defaultBranch,})console.log(changes)if (!changes) cancel("no changes found")
// generate mapconst { text: zine } = await runPrompt( (ctx) => { const gd = ctx.def("GIT_DIFF", changes, { maxTokens, detectPromptInjection: "available", }) ctx.$`You are an expert zine cartoon artist, prompt genius and omniscient code developer. You will summarize the code in the git diff ${gd} and generate a description of the changes as a zine. The description will be used by a LLM to generate an image of the zine. The zine will be used to tell "tell the story" of the changes. Be descriptive about the visual features of the zine as you would for a zine. Use names from the code symbols. MINIMIZE THE USE OF TEXT, FAVOR GRAPHICS. do NOT explain that GIT_DIFF displays changes in the codebase try to extract the intent of the changes, don't focus on the details Avoid studio ghibli style. The model has a context window of 4096 tokens. The output image is landscape. Generate a single page zine for all panels/pages. `.role("system") }, { label: "summarize code to zine", model: "large", })const { image } = await generateImage( `Your task is to generate a Zine with the following instruction. Minimize the use of text, favor graphics. ${zine}`, { model: "image", quality: "high", size: "landscape", outputFormat: "jpeg", maxWidth: 800, }) || {}if (!image) cancel("no image found")const ghFile = await github.uploadAsset(image)await output.image(ghFile, "zine")
Sketchnotes (updated)
Section titled “Sketchnotes (updated)”“Sketchnotes” is another style of visual note-taking that combines hand-drawn elements with text to convey information. It is a great way to summarize a pull request and make it more engaging.
script({ title: "Pull Request Visual Sketch", description: "Generate a visual note from a pull request description from the git diff", temperature: 0.5, systemSafety: true, parameters: { base: { type: "string", description: "The base branch of the pull request", }, maxTokens: { type: "number", description: "The maximum number of tokens to generate", default: 14000, }, },})const { vars, output, dbg } = envconst maxTokens = vars.maxTokensconst defaultBranch = vars.base || (await git.defaultBranch())const branch = await git.branch()if (branch === defaultBranch) cancel("you are already on the default branch")
// compute diffconst changes = await git.diff({ base: defaultBranch,})console.log(changes)if (!changes) cancel("no changes found")
// generate mapconst { text: zine } = await runPrompt( (ctx) => { const gd = ctx.def("GIT_DIFF", changes, { maxTokens, detectPromptInjection: "available", }) ctx.$`You are an expert at sketchnotes (visual note taking), prompt genius and omniscient code developer. You will summarize the code in the git diff ${gd} and generate a sketchnote (visual note) for the changes. The description will be used by a LLM to generate an image of the zine. Use names from the code symbols. MINIMIZE THE USE OF TEXT, FAVOR GRAPHICS. do NOT explain that GIT_DIFF displays changes in the codebase try to extract the intent of the changes, don't focus on the details Avoid studio ghibli style. Ignore the low-level programming language details, focus on the high-level concepts. The model has a context window of 4096 tokens. The output image is landscape. `.role("system") }, { label: "summarize code to sketch", model: "large", })const { image } = await generateImage( `Your task is to generate a SketchNote (visual note) with the following instruction. Minimize the use of text, favor graphics. ${zine}`, { model: "image", quality: "high", size: "landscape", outputFormat: "jpeg", maxWidth: 800, }) || {}if (!image) cancel("no image found")const ghFile = await github.uploadAsset(image)await output.image(ghFile, "sketch")
What about other styles?
Section titled “What about other styles?”Pushing the idea even further, we can ask the LLM to pick a random graphical style and generate a pull request diff in that style. This idea was applied in https://github.com/microsoft/genaiscript/pull/1512.
- collage
- mural
- editorial illustration
More to come
Section titled “More to come”The zine is a fun way to visualize the pull request diff. It is not perfect but it is inviting and maybe this is all you need to get someone to review your PR!
There will be more ways to visualize software in the future, thanks to these amazing image generators.