Nodes

Image

Een afbeelding waar jouw data naar wijst, of een die een generatie-endpoint produceert.

A static image points at something you hold — a signature, a logo, a site photograph — with every field able to vary per recipient. A dynamic image describes what is wanted and leaves the endpoint to make it.

Helpers: image
Nodesoort: image
Categorie: Media
Wordt opgelost: Both
Children: None.

Optie	Type	Wat het doet
`id` verplicht	`string`	Stable address for the node. Generation endpoints target it and build artifacts diff on it, so treat a rename as a breaking change.
`src` verplicht	`string \| (data) => string`	Static only. Path or URL to the image; lands on the node as `path`.
`alt`	`string \| (data) => string`	Static only. Alternative text — and, while the renderers draw a frame rather than the picture, the words printed inside it.
`width`	`number \| (data) => number`	Static only. Intended width. Carried onto the node untouched; no shipped renderer reads it yet.
`height`	`number \| (data) => number`	Static only. Intended height, on the same terms as `width`.
`placeholder`	`(data, availableTokens) => string`	Dynamic only. What previews show in place of generated content. Optional, but a letter that reads badly without one cannot be reviewed.
`generalPrompt` verplicht	`(data, availableTokens) => string`	Dynamic only. What this node should say.
`infoPrompt`	`(data, availableTokens) => string`	Dynamic only. Context the model should have but should not restate.
`negativePrompt`	`(data, availableTokens) => string`	Dynamic only. What to avoid — claims, tones, or facts it must not invent.
`systemPrompt`	`(data, availableTokens) => string`	Dynamic only. Role and voice, applied ahead of the other prompts.
`derivers`	`DeriverInvocation[]`	Values computed before the node resolves, written to `derived.*` and readable from a template token. Built with `derive()`.

Elk veld accepteert een functie

src, alt, width en height accepteren elk een gewone waarde of een functie van je data. Een handtekening die per vestiging verschilt, een logo per merk, een foto op kenmerk — het blijft allemaal binnen de node in plaats van een vertakking in het template te worden:

image<MemberData>({
  id: "signature",
  src: (data) => data.signatureUrl,
  alt: (data) => `Signed by ${data.managerName}`,
  width: 180,
});

src wordt path

De optie heet src; de opgeloste node noemt het path. Klap Waartoe het wordt opgelost open bij de eerste variant hieronder om het te zien.

Dynamische afbeeldingen

Een dynamische afbeelding wordt beschreven in plaats van aangeleverd, en gebruikt dezelfde vier promptslots als een dynamische alinea.

negativePrompt verdient hier meer dan waar ook zijn plek. Gegenereerde beelden gaan op voorspelbare manieren mis — ingebakken tekst, verzonnen logo’s, herkenbare gezichten — en het slot sluit die in één keer uit, in de node.

Varianten

Static

src/nodes/image/static.node.ts

A signature whose file and caption both follow the data.

import { image } from "docxcelerate";
import type { SampleData } from "../sample-data.ts";

/**
 * Every field takes a plain value or a function of your data, so a signature
 * that varies by manager needs no branching in the template.
 */
export const Signature = image<SampleData>({
  id: "signature",
  src: (data) => data.signatureUrl,
  alt: (data) => `Signed by ${data.managerName}`,
  width: 180,
  height: 60,
});

image · static Open ↗

Waartoe het wordt opgelost

De node zoals hij in het DocumentModel verschijnt: de JSON die een renderer aangereikt krijgt. Geen opmaak, geen lay-out.

{
  "id": "signature",
  "kind": "image",
  "mode": "static",
  "path": "assets/signature-lindqvist.png",
  "alt": "Signed by Tomas Lindqvist",
  "width": 180,
  "height": 60
}

Dynamic

src/nodes/image/dynamic.node.ts

Described rather than supplied, with the failure modes fenced off.

import { image } from "docxcelerate";
import type { SampleData } from "../sample-data.ts";

/**
 * The same prompt set as a dynamic paragraph, for artwork the endpoint
 * produces rather than something you hold. The placeholder is what previews
 * show, so the layout is settled before any image exists.
 */
export const CentrePhoto = image<SampleData>({
  id: "centre-photo",
  placeholder: (data) => `Photograph of ${data.centreName}`,
  generalPrompt: (data) =>
    `A wide daylight photograph of the entrance to ${data.centreName}, ` +
    `people arriving, no text overlay.`,
  negativePrompt: () => `No logos, no recognisable faces, no stock-photo staging.`,
});

image · dynamic Open ↗

Waartoe het wordt opgelost

De node zoals hij in het DocumentModel verschijnt: de JSON die een renderer aangereikt krijgt. Geen opmaak, geen lay-out.

{
  "id": "centre-photo",
  "kind": "image",
  "mode": "dynamic",
  "placeholder": "Photograph of Riverside Leisure Centre"
}

Wat er aan het endpoint wordt gevraagd

Opgelost tegen dezelfde voorbeelddata. Een previewbuild stopt bij de placeholder; een build op het moment van de aanvraag stuurt deze mee.

general: A wide daylight photograph of the entrance to Riverside Leisure Centre, people arriving, no text overlay.
negative: No logos, no recognisable faces, no stock-photo staging.

Aantekeningen

De node bevat een pad, nooit de bytes. Tijdens een build wordt er niets opgehaald of gevalideerd; een kapot pad gaat mis bij het renderen.
alt is de moeite van het schrijven waard, ook al printen de renderers nu nog kaders, want het kader print alt.

Deze pagina bewerken op GitHub ↗