Aller au contenu
GenAIScript
Blog

Zine rencontre les Pull Requests (et plus)

AI generated translation.

A screenshot of a pull request in github with a zine image.
GenAIScript
GenAIScript
GenAI Blogger
 Peli
Peli
GenAIScript developer
 Matt Podwysocki
Matt Podwysocki
GenAIScript developer
 Volkan Unsal
Volkan Unsal
GenAIScript enthusiast
Generated by 🤖 AI

La disponibilité de nouveaux générateurs d’images comme OpenAI gpt-image-1 ouvre la porte à d’innombrables nouvelles façons de visualiser et d’annoter les artefacts logiciels.

Zines

Section intitulée « Zines »

“Zine” est une forme d’art graphique populaire qui combine texte et images pour raconter une histoire. Peut-on demander au LLM de générer un zine à partir d’un diff de pull request ? voix robotique hors ligne : Oui, nous le pouvons.

Le script ci-dessous est une transformation en 2 étapes à l’aide du LLM du pull request en zine :

  • utiliser gpt-4.1-mini pour transformer le diff en une invite pour génération d’image
  • utiliser gpt-image-1 pour générer l’image à partir de cette invite
    • un peu de plomberie pour téléverser l’image générée dans une branche et l’ajouter à la description de la pull request
prd-zine.genai.mts
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 } = env;
const maxTokens = vars.maxTokens;
const defaultBranch = vars.base || (await git.defaultBranch());
const branch = await git.branch();
if (branch === defaultBranch) cancel("you are already on the default branch");


// compute diff
const changes = await git.diff({
  base: defaultBranch,
});
console.log(changes);
if (!changes) cancel("no changes found");


// generate map
const { 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");

Une illustration style bande dessinée illustre un processus pour localiser des fichiers dans un répertoire. Un détective éclaire les fichiers avec une lampe torche, identifiant les répertoires et gérant les fichiers ignorés. "Développez !" est mis en valeur par des fleurs épanouies. Une personne triste tient une pancarte "Aucun fichier trouvé !". En bas, des URI analysées sont résolues en ressources et fichiers rassemblés sur un tapis roulant.

Une illustration style dessin animé explique un workflow GitHub : une mascotte GitHub tient une URL d'asset, un robot téléverse des assets avec des options de format, un tapis roulant de cache de fichiers gère style, qualité et taille, une pieuvre corrige les chemins d'URL, des diagnostics montrent des messages générés, une personne vérifie les URLs, et un "Pull Request Zine" montre un diff de pull request.

Une illustration style bande dessinée présente un outil d'annotation pour le raffinage du code. Elle met en avant des fonctionnalités comme la suggestion de corrections d'erreurs, une analyse améliorée pour la détection de fautes de frappe, et l'intégration avec Git blame pour suivre l'auteur du code. Le visuel inclut des icônes, des bulles de texte, et un personnage avec une loupe soulignant un meilleur feedback et un suivi plus intelligent.

L'image illustre un processus modulaire pour gérer les éléments UI et schéma, comprenant six panneaux : Schéma des paramètres, Concept uiGroup, Nettoyage de schéma, Nettoyage d'exemples, Types étendus, et Rendu UI regroupé. Chaque panneau utilise icônes et diagrammes pour représenter des étapes comme organiser les paramètres, grouper les éléments UI, nettoyer les schémas, étendre les types, et rendre les composants UI regroupés.

Sketchnotes (mise à jour)

Section intitulée « Sketchnotes (mise à jour) »

“Sketchnotes” est un autre style de prise de notes visuelle qui combine des éléments dessinés à la main avec du texte pour transmettre des informations. C’est une excellente façon de résumer une pull request et de la rendre plus attrayante.

prd-sketch.genai.mts
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 } = env;
const maxTokens = vars.maxTokens;
const defaultBranch = vars.base || (await git.defaultBranch());
const branch = await git.branch();
if (branch === defaultBranch) cancel("you are already on the default branch");


// compute diff
const changes = await git.diff({
  base: defaultBranch,
});
console.log(changes);
if (!changes) cancel("no changes found");


// generate map
const { 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");

Un diagramme de flux illustrant un processus de vérification de version Node.js pour TerminalServerManager. Il implique la vérification de l'installation et de la version de Node.js (≥20), l'utilisation de constants.ts, un flux de promesses, et des commandes comme "node cliPath serve" ou "npx serve," avec des messages d'erreur pour Node.js manquant ou obsolète.

Un diagramme visuel présente une fonctionnalité combinant zines et pull requests. Il montre un diff PR conduisant aux sketchnotes, qui sont une prise de notes visuelle avec dessins, puis la génération d'un résumé PR. Le texte met en avant les nouvelles invites d'images AI pour créer des sketchnotes, avec des icônes d'idées, dessins, et collaboration.

Qu’en est-il des autres styles ?

Section intitulée « Qu’en est-il des autres styles ? »

Pour pousser l’idée encore plus loin, nous pouvons demander au LLM de choisir un style graphique aléatoire et de générer un diff de pull request dans ce style. Cette idée a été appliquée dans https://github.com/microsoft/genaiscript/pull/1512.

  • collage

Un diagramme coloré illustre un « Pull Request Visual Renderer » entouré de créations comme des bandes dessinées, infographies, zines, sketchnotes et art découpé en papier. Des flèches relient des éléments comme du code, une loupe, et un upload cloud, symbolisant un workflow.

  • mural

Une illustration présentant un processus de rendu visuel de pull request avec des éléments interconnectés comme branches, genres, et images de sortie. Elle comporte des icônes d'engrenages, ampoule, cadenas, GitHub, et des chemins visuels vibrants reliant les composants, symbolisant workflows et créativité.

  • illustration éditoriale

Une illustration d'une personne travaillant sur ordinateur avec le texte "Pull Request Visual Renderer" à l'écran, entourée d'éléments visuels dynamiques tels que graphiques, diagrammes et icônes abstraites représentant données et collaboration.

À venir

Section intitulée « À venir »

Le zine est une manière ludique de visualiser le diff de la pull request. Ce n’est pas parfait mais c’est attrayant et peut-être que c’est tout ce dont vous avez besoin pour inciter quelqu’un à revoir votre PR !

Il y aura d’autres façons de visualiser le logiciel à l’avenir, grâce à ces incroyables générateurs d’images.

Étiquettes :