Hugging Face's logo

Spaces:
Pixelkram
/
biegen
Paused

App Files Community
biegen / bendmap.js
Pixelkram's picture
Pixelkram
Deploy app
2fd30a7 verified
Raw History Blame Contribute Delete
39.5 kB
// The map of Stable Diffusion 1.5 and the tool slots. Runs as js_on_load of a gr.HTML component:
// `element`, `props` and `watch` come from Gradio. app.py replaces __CATALOG__ with the tools.
//
// props.value is JSON. This script owns {"state": {slots, rev}}; Python sends {"server": {...}} with
// the prompt's tokens and, after a run, the measured effect. Python never sends state back, so a
// change made while a run is going is kept.
const CAT = __CATALOG__;
const TOOLS = Object.fromEntries(CAT.tools.map((t) => [t.key, t]));
const COLORS = CAT.colors;
// Top to bottom: text encoding, the UNet inside the sampler loop, the VAE decoder, the timeline.
const W = 960, H = 1310, BW = 150, BH = 96;
const X0 = 260, X1 = 860; // the timeline's 0 .. 100 %
const LAT_Y = 1180, TL_AXIS = 1200, TL_LANE = 1214, LANE_H = 18, LANE_GAP = 28;
const LOOP_Y = 976; // the way back from the sampler to x_t, under the UNet
const FRAME = { x: 140, y: 350, w: 654, h: 606 };
const BLK = {};
["d0", "d1", "d2", "d3"].forEach((b, i) => { BLK[b] = { x: 150 + 44 * i, y: 384 + 116 * i }; });
BLK.mid = { x: 392, y: 848 };
["u0", "u1", "u2", "u3"].forEach((b, j) => { BLK[b] = { x: 634 - 44 * (3 - j), y: 384 + 116 * (3 - j) }; });
const META = {
d0: { label: "Abwärts 1", res: "64 × 64", ch: 320, R: 2, A: 2 },
d1: { label: "Abwärts 2", res: "32 × 32", ch: 640, R: 2, A: 2 },
d2: { label: "Abwärts 3", res: "16 × 16", ch: 1280, R: 2, A: 2 },
d3: { label: "Abwärts 4", res: "8 × 8", ch: 1280, R: 2, A: 0 },
mid: { label: "Mitte", res: "8 × 8", ch: 1280, R: 2, A: 1 },
u0: { label: "Aufwärts 1", res: "8 × 8", ch: 1280, R: 3, A: 0 },
u1: { label: "Aufwärts 2", res: "16 × 16", ch: 1280, R: 3, A: 3 },
u2: { label: "Aufwärts 3", res: "32 × 32", ch: 640, R: 3, A: 3 },
u3: { label: "Aufwärts 4", res: "64 × 64", ch: 320, R: 3, A: 3 },
};
const BLOCKS = Object.keys(META);
const SKIP_FROM = { u0: "d3", u1: "d2", u2: "d1", u3: "d0" };
const GLYPH = {
R: { dx: 6, w: 34, text: "Res" },
S: { dx: 44, w: 48, text: "Selbst" },
X: { dx: 96, w: 46, text: "Quer" },
};
const BOX = { // fixed boxes outside the UNet
prompt: { x: 16, y: 32, w: 600, h: 42 },
tok: { x: 16, y: 98, w: 292, h: 36 },
pos: { x: 324, y: 98, w: 292, h: 36 },
clip: { x: 16, y: 156, w: 600, h: 42 },
ctx: { x: 16, y: 218, w: 600, h: 96 },
promptB: { x: 640, y: 32, w: 304, h: 42 },
clipB: { x: 640, y: 156, w: 304, h: 42 },
ctxB: { x: 640, y: 218, w: 304, h: 96 },
latent: { x: 8, y: 396, w: 118, h: 60 },
eps: { x: 806, y: 396, w: 146, h: 56 },
cfg: { x: 806, y: 474, w: 146, h: 50 },
sampler: { x: 806, y: 546, w: 146, h: 50 },
time: { x: 818, y: 640, w: 124, h: 56 },
vae: { x: 300, y: 1000, w: 260, h: 52 },
image: { x: 590, y: 986, w: 140, h: 140 },
};
const TIPS = {
R: "Res: Faltungsschichten, die das Bild an jeder Stelle umrechnen. Hier hört das Netz auch die Zeit, also wie verrauscht das Bild noch ist.",
S: "Selbst-Aufmerksamkeit: jede Bildstelle schaut auf alle anderen Bildstellen und holt sich, was zu ihr passt.",
X: "Quer-Aufmerksamkeit: jede Bildstelle schaut auf die 77 Vektoren des Kontexts. Nur hier kommt der Text ins Bild.",
out: "Der Ausgang des Blocks, der an den nächsten Block weitergeht.",
prompt: "Prompt A, so wie ihr ihn oben eingebt.",
tok: "Wort-Tabelle: jedes Token wird zu einem Vektor mit 768 Zahlen.",
pos: "Positions-Tabelle: ein Vektor pro Platz 0 bis 76. Er sagt CLIP, an welcher Stelle ein Token steht.",
clip: "CLIP-Textencoder: 12 Transformer-Schichten mischen die Token-Vektoren miteinander.",
ctx: "Kontext: 77 Vektoren, einer pro Platz. Nach dem Prompt folgen das Ende-Token und Polster, die CLIP mit dem Sinn des ganzen Prompts füllt.",
promptB: "Prompt B wird genauso zu 77 Vektoren und ersetzt in einzelnen Blöcken den Kontext von Prompt A.",
latent: "Das Latent x_t: 4 Kanäle auf 64 × 64 Stellen. Es beginnt als Rauschen aus dem Seed, jeder Sampler-Schritt nimmt Rauschen weg.",
sampler: "Sampler-Schritt (Euler): zieht das vorhergesagte Rauschen ein Stück weit vom Latent ab. Das wiederholt sich für jeden Schritt.",
eps: "Das UNet sagt das Rauschen im Latent voraus, zweimal: einmal mit Prompt und einmal ohne.",
cfg: "Guidance: nimmt die Vorhersage ohne Prompt und geht den Unterschied zur Vorhersage mit Prompt g-mal weiter (g ist der Guidance-Regler, üblich 7,5). So folgt das Bild dem Prompt stärker.",
time: "Zeitpunkt t: Der Sampler sagt dem UNet bei jedem Schritt, wie verrauscht das Latent noch ist (999 = nur Rauschen, 0 = fertig). Jeder Res-Teil im UNet hört diese Zahl.",
vae: "VAE-Decoder: übersetzt das fertige Latent (64 × 64) in Pixel (512 × 512). Er läuft einmal, nach dem letzten Schritt.",
image: "Das erste Bild des letzten Laufs.",
};
let st = { slots: [], sel: 0, rev: 0 };
let srv = { prompt: "", prompt_b: "", tokens: [], tokens_b: [], max_len: 77, effect: null };
let hoverTool = null, hoverSlot = null, drag = null, chipBoxes = {}, root = null;
// ---------------------------------------------------------------- state
function parse(v) {
if (!v) return {};
if (typeof v !== "string") return v;
try { return JSON.parse(v); } catch (e) { return {}; }
}
function cleanSlots(slots) {
return (Array.isArray(slots) ? slots : []).filter((s) => s && TOOLS[s.tool]).slice(0, CAT.max_slots);
}
function absorb(v, initial) {
const d = parse(v);
if (d.server) Object.assign(srv, d.server);
if (d.state && initial) {
st.slots = cleanSlots(d.state.slots);
st.rev = Number.isInteger(d.state.rev) ? d.state.rev : 0;
}
}
function publish(changed) {
if (changed) st.rev += 1;
props.value = JSON.stringify({ state: { slots: st.slots, rev: st.rev } });
if (root) root.dataset.rev = st.rev;
}
function placeOf(slot) {
const t = TOOLS[slot.tool];
return t.places.find((p) => p.value === slot.place) || t.places[0];
}
function guessWord(prompt) {
const words = (prompt || "").toLowerCase().match(/[a-zäöüß]+/g) || [];
const of = words.findIndex((w, i) => w === "of" && ["a", "an", "the"].includes(words[i + 1]));
if (of >= 0 && words[of + 2]) return words[of + 2];
const at = words.findIndex((w) => ["in", "on", "with", "at", "under"].includes(w));
if (at > 0) return words[at - 1];
return words[words.length - 1] || "";
}
function newSlot(key) {
const t = TOOLS[key], p = t.places[0];
return { tool: key, place: p.value, value: p.default, start: p.start, end: p.end,
word: key === "excise" ? guessWord(srv.prompt) : "" };
}
function addTool(key) {
if (st.slots.length < CAT.max_slots) {
st.slots.push(newSlot(key));
st.sel = st.slots.length - 1;
} else {
const i = Math.min(st.sel, st.slots.length - 1);
st.slots[i] = newSlot(key);
st.sel = i;
}
publish(true);
renderAll();
}
function setPlace(i, value) {
const s = st.slots[i], t = TOOLS[s.tool];
const p = t.places.find((q) => q.value === value);
if (!p || s.place === value) return;
Object.assign(s, { place: p.value, value: p.default, start: p.start, end: p.end });
publish(true);
renderAll();
}
function removeSlot(i) {
st.slots.splice(i, 1);
st.sel = Math.max(0, Math.min(st.sel, st.slots.length - 1));
hoverSlot = null;
publish(true);
renderAll();
}
function siteClick(site) {
const s = st.slots[st.sel];
if (!s) return;
const t = TOOLS[s.tool];
const hits = t.places.filter((p) => p.sites.includes(site));
if (!hits.length) {
const owner = st.slots.findIndex((q) => placeOf(q).sites.includes(site));
if (owner >= 0 && owner !== st.sel) { st.sel = owner; renderAll(); }
return;
}
const k = hits.findIndex((p) => p.value === s.place);
setPlace(st.sel, hits[(k + 1) % hits.length].value);
}
// ---------------------------------------------------------------- helpers
const esc = (s) => String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
const tx = (pct) => X0 + (X1 - X0) * Math.min(Math.max(pct, 0), 100) / 100;
const num = (x) => (Math.round(x * 1000) / 1000).toString().replace(".", ",");
function pct(v) {
if (!(v > 0)) return "0 %";
if (v < 0.01) return "<1 %";
if (v > 9.99) return ">999 %";
return Math.round(v * 100) + " %";
}
function glyphBox(b, k) {
const g = GLYPH[k], p = BLK[b];
return { x: p.x + g.dx, y: p.y + 23, w: g.w, h: 20 };
}
function wordChips(word) {
const target = (word || "").toLowerCase().replace(/\s+/g, "");
const toks = srv.tokens || [];
const hit = [];
if (!target) return hit;
for (let k = 0; k < toks.length; k++) {
let acc = "";
for (let j = k; j < toks.length && acc.length < target.length; j++) {
acc += toks[j].toLowerCase();
if (acc === target) { for (let m = k; m <= j; m++) hit.push(m); break; }
}
}
return hit;
}
// Box (or line) to draw a site's highlight around. Word and padding chips depend on the slot.
function siteShapes(site, slot) {
if (BOX[site]) return [BOX[site]];
if (site === "ctx_word") return wordChips(slot && slot.word).map((k) => chipBoxes["t" + k]).filter(Boolean);
if (site === "ctx_pad") return [chipBoxes.end, chipBoxes.pad].filter(Boolean);
if (site.startsWith("skip.")) {
const u = site.slice(5), d = SKIP_FROM[u];
const y = BLK[d].y + 46;
return [{ line: true, x1: BLK[d].x + BW, x2: BLK[u].x, y }];
}
const [b, k] = site.split(".");
if (!BLK[b]) return [];
if (k === "out") return [{ x: BLK[b].x, y: BLK[b].y, w: BW, h: BH }];
if ((k === "S" || k === "X") && META[b].A === 0) return [];
return [glyphBox(b, k)];
}
function ring(shape, color, layer, style) {
const o = 3 + 4 * layer;
if (shape.line) {
const y = shape.y + (layer % 2 ? 1 : -1) * Math.ceil(layer / 2) * 5;
return `<line x1="${shape.x1}" y1="${y}" x2="${shape.x2 - 8}" y2="${y}" stroke="${color}" stroke-width="${style === "dash" ? 3 : 5}"
${style === "dash" ? 'stroke-dasharray="6 5"' : ""} marker-end="url(#bm-arrow-${color.slice(1)})" class="bm-hl"/>`;
}
const fill = style === "solid" && layer === 0 ? `fill="${color}" fill-opacity="0.16"` : 'fill="none"';
return `<rect x="${shape.x - o}" y="${shape.y - o}" width="${shape.w + 2 * o}" height="${shape.h + 2 * o}" rx="${6 + o}"
stroke="${color}" stroke-width="${style === "dash" ? 2 : 3}" ${style === "dash" ? 'stroke-dasharray="5 4"' : ""} ${fill} class="bm-hl"/>`;
}
function slotsAt(site) {
return st.slots.map((s, i) => [s, i]).filter(([s]) => placeOf(s).sites.includes(site));
}
function tipFor(base, site) {
const who = slotsAt(site).map(([s, i]) => `${i + 1} ${TOOLS[s.tool].label}`);
return esc(base + (who.length ? "\nHier greift ein: " + who.join(", ") : ""));
}
// ---------------------------------------------------------------- the map
function box(b, cls, label, sub, site, tip) {
return `<g class="bm-node ${cls}" data-site="${site}" data-tip="${tipFor(tip, site)}">
<rect x="${b.x}" y="${b.y}" width="${b.w}" height="${b.h}" rx="8"/>
<text x="${b.x + 10}" y="${b.y + (sub ? 17 : b.h / 2 + 5)}" class="bm-t">${esc(label)}</text>
${sub ? `<text x="${b.x + 10}" y="${b.y + 33}" class="bm-s">${esc(sub)}</text>` : ""}</g>`;
}
function arrow(x1, y1, x2, y2, cls = "") {
return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" class="bm-arrow ${cls}" marker-end="url(#bm-head)"/>`;
}
function chips(tokens, b, maxRows, withPad, fixedSite) {
const out = [], toks = tokens || [];
const items = [["start", "‹Start›"]].concat(toks.map((t, k) => ["t" + k, t.length > 12 ? t.slice(0, 11) + "…" : t]));
if (withPad) {
items.push(["end", "‹Ende›"]);
const pad = Math.max(0, (srv.max_len || 77) - 2 - toks.length);
if (pad) items.push(["pad", `‹Polster × ${pad}›`]);
}
let x = b.x + 8, y = b.y + 26, row = 0;
const boxes = {};
for (let n = 0; n < items.length; n++) {
const [id, text] = items[n];
const w = 12 + 6.6 * text.length;
if (x + w > b.x + b.w - 8) {
row += 1; x = b.x + 8; y += 23;
if (row >= maxRows) { out.push(`<text x="${x}" y="${y + 13}" class="bm-s">… und ${items.length - n} weitere</text>`); break; }
}
const special = id === "start" || id === "end" || id === "pad";
const site = fixedSite || (id === "end" || id === "pad" ? "ctx_pad" : id === "start" ? "ctx" : "ctx_word");
out.push(`<g class="bm-chip-svg ${special ? "bm-special" : ""}" data-site="${site}">
<rect x="${x}" y="${y}" width="${w}" height="20" rx="10"/><text x="${x + w / 2}" y="${y + 14.5}" text-anchor="middle">${esc(text)}</text></g>`);
boxes[id] = { x, y, w, h: 20 };
x += w + 4;
}
return [out.join(""), boxes];
}
function clip(text, n) {
return text.length > n ? text.slice(0, n - 1) + "…" : text;
}
function textLane() {
const usesB = st.slots.some((s) => s.tool === "layered");
const [ctxChips, boxes] = chips(srv.tokens, BOX.ctx, 3, true);
chipBoxes = boxes;
const stripes = (b) => Array.from({ length: 12 }, (_, k) =>
`<rect x="${b.x + b.w - 206 + k * 16}" y="${b.y + 9}" width="10" height="24" rx="2" class="bm-stripe"/>`).join("");
const [bChips] = chips(srv.tokens_b, BOX.ctxB, 3, false, "promptB");
const cx = BOX.ctx.x + BOX.ctx.w / 2, bx = BOX.ctxB.x + 120;
return `
<text x="16" y="22" class="bm-h">Text</text>
${box(BOX.prompt, "", "Prompt A", clip(srv.prompt || "", 80), "prompt", TIPS.prompt)}
${arrow(162, 74, 162, 96)} ${arrow(470, 74, 470, 96)}
${box(BOX.tok, "", "Wort-Tabelle", "", "tok", TIPS.tok)}
${box(BOX.pos, "", "Positionen", "", "pos", TIPS.pos)}
<text x="316" y="121" class="bm-t" text-anchor="middle">+</text>
${arrow(316, 134, 316, 154)}
<g class="bm-node" data-site="clip" data-tip="${tipFor(TIPS.clip, "clip")}">
<rect x="${BOX.clip.x}" y="${BOX.clip.y}" width="${BOX.clip.w}" height="${BOX.clip.h}" rx="8"/>
<text x="${BOX.clip.x + 10}" y="${BOX.clip.y + 18}" class="bm-t">CLIP-Textencoder</text>
<text x="${BOX.clip.x + 10}" y="${BOX.clip.y + 34}" class="bm-s">12 Schichten</text>${stripes(BOX.clip)}</g>
${arrow(316, 198, 316, 216)}
<g class="bm-node" data-site="ctx" data-tip="${tipFor(TIPS.ctx, "ctx")}">
<rect x="${BOX.ctx.x}" y="${BOX.ctx.y}" width="${BOX.ctx.w}" height="${BOX.ctx.h}" rx="8"/>
<text x="${BOX.ctx.x + 10}" y="${BOX.ctx.y + 17}" class="bm-t">Kontext · 77 Vektoren</text></g>
${ctxChips}
${arrow(cx, BOX.ctx.y + BOX.ctx.h, cx, FRAME.y - 2)}
<text x="${cx + 8}" y="${FRAME.y - 12}" class="bm-s">in jede <tspan class="bm-strong">Quer</tspan>-Aufmerksamkeit</text>
<g class="${usesB ? "" : "bm-off"}">
<text x="${BOX.promptB.x}" y="22" class="bm-s">nur für „Zweiter Prompt“</text>
${box(BOX.promptB, "", "Prompt B", clip(srv.prompt_b || "", 44), "promptB", TIPS.promptB)}
${arrow(bx, BOX.promptB.y + BOX.promptB.h, bx, BOX.clipB.y - 2)}
<g class="bm-node bm-thin" data-site="promptB" data-tip="${tipFor(TIPS.promptB, "promptB")}">
<rect x="${BOX.clipB.x}" y="${BOX.clipB.y}" width="${BOX.clipB.w}" height="${BOX.clipB.h}" rx="8"/>
<text x="${BOX.clipB.x + 10}" y="${BOX.clipB.y + 18}" class="bm-t">CLIP</text>
<text x="${BOX.clipB.x + 10}" y="${BOX.clipB.y + 34}" class="bm-s">dieselben Gewichte</text></g>
${arrow(bx, BOX.clipB.y + BOX.clipB.h, bx, BOX.ctxB.y - 2)}
<g class="bm-node" data-site="promptB" data-tip="${tipFor(TIPS.promptB, "promptB")}">
<rect x="${BOX.ctxB.x}" y="${BOX.ctxB.y}" width="${BOX.ctxB.w}" height="${BOX.ctxB.h}" rx="8"/>
<text x="${BOX.ctxB.x + 10}" y="${BOX.ctxB.y + 17}" class="bm-t">Kontext B</text></g>
${bChips}
<line x1="${bx}" y1="${BOX.ctxB.y + BOX.ctxB.h}" x2="${bx}" y2="${FRAME.y - 2}" class="bm-arrow bm-after" marker-end="url(#bm-head)"/>
<text x="${bx + 8}" y="${FRAME.y - 12}" class="bm-s">ersetzt Kontext A</text>
</g>`;
}
function heat(b) {
const e = srv.effect;
if (!e || e.none || !e.steps || !e.impact) return "";
const top = Math.max(1e-6, ...BLOCKS.map((k) => e.impact[k] || 0));
const a = 0.55 * (e.impact[b] || 0) / top * (e.rev !== st.rev ? 0.4 : 1);
return `<rect x="${BLK[b].x}" y="${BLK[b].y}" width="${BW}" height="${BH}" rx="10" class="bm-heatfill" fill-opacity="${a.toFixed(3)}"/>`;
}
function unetBlock(b) {
const p = BLK[b], m = META[b];
const glyphs = (m.A ? ["R", "S", "X"] : ["R"]).map((k) => {
const g = glyphBox(b, k), site = `${b}.${k}`;
const count = k === "R" ? m.R : m.A;
return `<g class="bm-glyph bm-g${k}" data-site="${site}" data-tip="${tipFor(`${m.label} · ${TIPS[k]} (${count} ×)`, site)}">
<rect x="${g.x}" y="${g.y}" width="${g.w}" height="${g.h}" rx="5"/>
<text x="${g.x + g.w / 2}" y="${g.y + 14}" text-anchor="middle">${GLYPH[k].text}</text></g>`;
}).join("");
const none = m.A ? "" : `<text x="${p.x + 48}" y="${p.y + 37}" class="bm-s">nur Faltungen</text>`;
return `<g class="bm-block" data-site="${b}.out" data-tip="${tipFor(`${m.label} · ${m.res} Stellen · ${m.ch} Kanäle. ${TIPS.out}`, `${b}.out`)}">
<rect x="${p.x}" y="${p.y}" width="${BW}" height="${BH}" rx="10" class="bm-block-bg"/>
${heat(b)}
<text x="${p.x + 8}" y="${p.y + 17}" class="bm-t">${m.label}</text>
<text x="${p.x + BW - 8}" y="${p.y + 17}" class="bm-s" text-anchor="end">${m.res}</text></g>
${glyphs}${none}`;
}
function unet() {
const parts = [`<rect x="${FRAME.x}" y="${FRAME.y}" width="${FRAME.w}" height="${FRAME.h}" rx="16" class="bm-frame"/>
<text x="${FRAME.x + 12}" y="${FRAME.y + 22}" class="bm-h">UNet</text>
<text x="${FRAME.x + 62}" y="${FRAME.y + 22}" class="bm-s">läuft einmal pro Schritt</text>`];
// skips first, so blocks sit on top
for (const [u, d] of Object.entries(SKIP_FROM)) {
const y = BLK[d].y + 46, x1 = BLK[d].x + BW, x2 = BLK[u].x;
parts.push(`<g class="bm-skip" data-site="skip.${u}" data-tip="${tipFor(`Skip-Verbindung: trägt die Merkmale aus ${META[d].label} direkt zu ${META[u].label}.`, `skip.${u}`)}">
<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" class="bm-hit"/>
<line x1="${x1}" y1="${y}" x2="${x2 - 4}" y2="${y}" class="bm-arrow bm-skipline" marker-end="url(#bm-head)"/>
<text x="${(x1 + x2) / 2}" y="${y - 5}" text-anchor="middle" class="bm-s">Skip</text></g>`);
}
["d0", "d1", "d2"].forEach((b, i) => {
const p = BLK[b], q = BLK[["d1", "d2", "d3"][i]];
parts.push(arrow(p.x + 75, p.y + BH, q.x + 75, q.y - 2));
});
parts.push(arrow(BLK.d3.x + 75, BLK.d3.y + BH, BLK.mid.x + 30, BLK.mid.y - 2));
parts.push(arrow(BLK.mid.x + BW - 30, BLK.mid.y, BLK.u0.x + 75, BLK.u0.y + BH + 2));
["u0", "u1", "u2"].forEach((b, i) => {
const p = BLK[b], q = BLK[["u1", "u2", "u3"][i]];
parts.push(arrow(p.x + 75, p.y, q.x + 75, q.y + BH + 2));
});
BLOCKS.forEach((b) => parts.push(unetBlock(b)));
// the loop around the UNet
parts.push(box(BOX.latent, "", "Latent x_t", "Start: Rauschen", "latent", TIPS.latent));
parts.push(box(BOX.eps, "", "Vorhersage ε", "mit und ohne Prompt", "eps", TIPS.eps));
parts.push(box(BOX.cfg, "", "Guidance", "g × (mit − ohne)", "cfg", TIPS.cfg));
parts.push(box(BOX.sampler, "", "Sampler-Schritt", "Euler", "sampler", TIPS.sampler));
parts.push(box(BOX.time, "", "Zeitpunkt t", "an alle Res", "time", TIPS.time));
const ly = BLK.d0.y + 42, lx = BOX.latent.x + BOX.latent.w / 2, cx = BOX.eps.x + 60;
const rx = BOX.time.x + BOX.time.w + 6, ty = BOX.time.y + BOX.time.h / 2; // the way back runs right of t
parts.push(arrow(BOX.latent.x + BOX.latent.w, ly, BLK.d0.x - 2, ly));
parts.push(arrow(BLK.u3.x + BW, ly, BOX.eps.x - 2, ly));
parts.push(arrow(cx, BOX.eps.y + BOX.eps.h, cx, BOX.cfg.y - 2));
parts.push(arrow(cx, BOX.cfg.y + BOX.cfg.h, cx, BOX.sampler.y - 2));
parts.push(arrow(cx, BOX.sampler.y + BOX.sampler.h, cx, BOX.time.y - 2));
parts.push(arrow(BOX.time.x, ty, FRAME.x + FRAME.w + 2, ty));
parts.push(`<path d="M ${rx} ${BOX.sampler.y + BOX.sampler.h} L ${rx} ${LOOP_Y} L ${lx} ${LOOP_Y} L ${lx} ${BOX.latent.y + BOX.latent.h + 2}" class="bm-arrow" marker-end="url(#bm-head)"/>`);
parts.push(`<text x="${lx + 10}" y="${LOOP_Y - 6}" class="bm-s">nächster Schritt</text>`);
parts.push(`<text x="${lx + 8}" y="${BOX.latent.y + BOX.latent.h + 40}" class="bm-s">× Schritte</text>`);
// after the last step
const vx = BOX.vae.x + BOX.vae.w / 2;
parts.push(`<circle cx="${vx}" cy="${LOOP_Y}" r="3" class="bm-headpath"/>`);
parts.push(`<line x1="${vx}" y1="${LOOP_Y}" x2="${vx}" y2="${BOX.vae.y - 2}" class="bm-arrow bm-after" marker-end="url(#bm-head)"/>`);
parts.push(`<text x="${vx - 8}" y="${BOX.vae.y - 7}" class="bm-s" text-anchor="end">nach dem letzten Schritt</text>`);
parts.push(box(BOX.vae, "", "VAE-Decoder", "Latent 64 × 64 → Pixel 512 × 512", "vae", TIPS.vae));
parts.push(arrow(BOX.vae.x + BOX.vae.w, BOX.vae.y + BOX.vae.h / 2, BOX.image.x - 2, BOX.vae.y + BOX.vae.h / 2));
return parts.join("");
}
function imageNode() {
const e = srv.effect, b = BOX.image;
const inner = e && e.thumb
? `<image href="${esc(e.thumb)}" x="${b.x}" y="${b.y}" width="${b.w}" height="${b.h}" preserveAspectRatio="xMidYMid slice" clip-path="url(#bm-img-clip)"/>`
: `<text x="${b.x + b.w / 2}" y="${b.y + b.h / 2 + 5}" text-anchor="middle" class="bm-s">Bild</text>`;
return `<g class="bm-node" data-site="image" data-tip="${esc(TIPS.image)}">
<clipPath id="bm-img-clip"><rect x="${b.x}" y="${b.y}" width="${b.w}" height="${b.h}" rx="8"/></clipPath>
<rect x="${b.x}" y="${b.y}" width="${b.w}" height="${b.h}" rx="8"/>${inner}</g>`;
}
function effectLayer() {
const e = srv.effect;
if (!e || e.none || !e.steps) {
const lines = e && e.none ? ["Letzter Lauf ohne Eingriff:", "nichts zu messen."]
: ["Nach dem ersten Lauf steht", "hier und in den Blöcken,", "wie stark sich jeder Block", "verändert hat."];
return lines.map((l, k) => `<text x="746" y="${1004 + 17 * k}" class="bm-s">${esc(l)}</text>`).join("");
}
const stale = e.rev !== st.rev;
const N = e.steps, parts = [];
const all = BLOCKS.flatMap((b) => e.blocks[b] || []);
const top = Math.max(1e-6, ...all);
for (const b of BLOCKS) {
const v = e.blocks[b] || [], p = BLK[b];
if (!v.length) continue;
const pts = v.map((y, i) => `${(p.x + 8 + 134 * (i + 0.5) / N).toFixed(1)},${(p.y + 89 - 20 * Math.min(1, y / top)).toFixed(1)}`).join(" ");
parts.push(`<line x1="${p.x + 8}" y1="${p.y + 89}" x2="${p.x + 142}" y2="${p.y + 89}" class="bm-base"/>`);
parts.push(`<polyline points="${pts}" class="bm-spark" pointer-events="none"/>`);
parts.push(`<text x="${p.x + 8}" y="${p.y + 66}" class="bm-s">Änderung</text>`);
parts.push(`<text x="${p.x + BW - 8}" y="${p.y + 66}" text-anchor="end" class="bm-s bm-val">bis ${pct(Math.max(...v))}</text>`);
}
// latent curve over the timeline
const lat = e.latent || [];
if (lat.length) {
const ltop = Math.max(1e-6, ...lat);
const pts = lat.map((y, i) => `${tx(100 * (i + 1) / N).toFixed(1)},${(LAT_Y - 26 * Math.min(1, y / ltop)).toFixed(1)}`).join(" ");
parts.push(`<polyline points="${tx(0)},${LAT_Y} ${pts}" class="bm-spark bm-latent" pointer-events="none"/>`);
parts.push(`<text x="${X1 + 6}" y="${LAT_Y - 26 * Math.min(1, lat[lat.length - 1] / ltop) + 4}" class="bm-s bm-val">${pct(lat[lat.length - 1])}</text>`);
}
const img = e.image || [];
const meanImg = img.length ? img.reduce((a, b) => a + b, 0) / img.length : 0;
const first = e.first === null || e.first === undefined ? "–" : `Schritt ${e.first + 1} von ${N}`;
parts.push(`<g class="bm-caption">
<text x="746" y="1000" class="bm-t">Gemessen</text>
${stale ? '<text x="746" y="1017" class="bm-s">(zum vorigen Eingriff)</text>' : ""}
<text x="746" y="1038" class="bm-s">Bild: ${pct(meanImg)} anders</text>
<text x="746" y="1060" class="bm-s">Füllung der Blöcke:</text>
<text x="746" y="1077" class="bm-s">erster veränderter Schritt</text>
<text x="746" y="1094" class="bm-s">(${first})</text>
<text x="746" y="1116" class="bm-s">Linie: alle Schritte</text></g>`);
return `<g class="bm-effect ${stale ? "bm-stale" : ""}">${parts.join("")}</g>`;
}
function timeline() {
const parts = [];
parts.push(`<text x="16" y="${TL_AXIS + 4}" class="bm-h">Zeit</text>`);
parts.push(`<text x="16" y="${LAT_Y - 14}" class="bm-s">Latent: Abstand zum</text><text x="16" y="${LAT_Y}" class="bm-s">Lauf ohne Eingriff</text>`);
parts.push(`<line x1="${X0}" y1="${LAT_Y}" x2="${X1}" y2="${LAT_Y}" class="bm-base"/>`);
parts.push(`<line x1="${X0}" y1="${TL_AXIS}" x2="${X1}" y2="${TL_AXIS}" class="bm-axis"/>`);
for (const p of [0, 25, 50, 75, 100]) {
parts.push(`<line x1="${tx(p)}" y1="${TL_AXIS - 3}" x2="${tx(p)}" y2="${TL_AXIS + 3}" class="bm-axis"/>`);
parts.push(`<text x="${tx(p)}" y="${TL_AXIS + 15}" text-anchor="middle" class="bm-s bm-tick">${p} %</text>`);
}
parts.push(`<text x="${X0 - 8}" y="${TL_AXIS + 4}" text-anchor="end" class="bm-s">Rauschen</text>`);
parts.push(`<text x="${X1 + 8}" y="${TL_AXIS + 4}" class="bm-s">Bild</text>`);
st.slots.forEach((s, i) => {
const t = TOOLS[s.tool], c = COLORS[i], y = TL_LANE + 8 + LANE_GAP * i;
const sel = i === st.sel ? "bm-lane-sel" : "";
parts.push(`<text x="16" y="${y + 14}" class="bm-t bm-lane-label ${sel}" style="fill:${c}">${i + 1} ${esc(clip(t.label, 27))}</text>`);
if (t.after_loop) {
parts.push(`<rect x="${X1 + 14}" y="${y}" width="${W - X1 - 22}" height="${LANE_H}" rx="5" fill="${c}" fill-opacity="0.85"/>`);
parts.push(`<text x="${X1 + 20}" y="${y + 13}" class="bm-on-band">danach</text>`);
return;
}
if (t.time_knob) {
const a = tx(s.value);
parts.push(`<rect x="${a}" y="${y}" width="${Math.max(0, X1 - a)}" height="${LANE_H}" rx="5" fill="${c}" fill-opacity="0.85" data-handle="${i}:knob" class="bm-band"/>`);
parts.push(`<rect x="${a - 5}" y="${y - 3}" width="10" height="${LANE_H + 6}" rx="3" class="bm-handle" style="stroke:${c}" data-handle="${i}:knob" data-tip="${esc(t.knob + ": ziehen")}"/>`);
parts.push(`<text x="${Math.min(a + 8, X1 - 60)}" y="${y + 13}" class="bm-on-band" pointer-events="none">ab ${num(s.value)} %</text>`);
return;
}
if (!t.window) {
parts.push(`<rect x="${X0}" y="${y}" width="${X1 - X0}" height="${LANE_H}" rx="5" fill="${c}" fill-opacity="0.35" class="bm-hatch"/>`);
parts.push(`<text x="${X0 + 8}" y="${y + 14}" class="bm-s">ganzer Lauf (${esc(t.whole)})</text>`);
return;
}
const a = tx(s.start), b = tx(s.end);
parts.push(`<rect x="${X0}" y="${y + LANE_H / 2 - 1}" width="${X1 - X0}" height="2" class="bm-base-lane"/>`);
if (b > a) parts.push(`<rect x="${a}" y="${y}" width="${b - a}" height="${LANE_H}" rx="5" fill="${c}" fill-opacity="0.85" data-handle="${i}:move" class="bm-band" data-tip="Fenster verschieben"/>`);
parts.push(`<rect x="${a - 5}" y="${y - 3}" width="10" height="${LANE_H + 6}" rx="3" class="bm-handle" style="stroke:${c}" data-handle="${i}:start" data-tip="Beginn ziehen"/>`);
parts.push(`<rect x="${b - 5}" y="${y - 3}" width="10" height="${LANE_H + 6}" rx="3" class="bm-handle" style="stroke:${c}" data-handle="${i}:end" data-tip="Ende ziehen"/>`);
if (t.envelope === "sine" && b > a) { // the strength swells and fades inside the window
const pts = Array.from({ length: 25 }, (_, k) => `${(a + (b - a) * k / 24).toFixed(1)},${(y + LANE_H - 2 - (LANE_H - 5) * Math.sin(Math.PI * k / 24)).toFixed(1)}`);
parts.push(`<polyline points="${pts.join(" ")}" class="bm-envelope" pointer-events="none"/>`);
}
parts.push(`<text x="${Math.min(Math.max(a, X0) + 10, X1 - 70)}" y="${y + 13}" class="bm-on-band" pointer-events="none">${num(s.start)}–${num(s.end)} %</text>`);
});
if (!st.slots.length) parts.push(`<text x="${X0}" y="${TL_LANE + 21}" class="bm-s">Noch kein Werkzeug gewählt.</text>`);
return parts.join("");
}
function highlights() {
const parts = [], layers = {};
const order = st.slots.map((s, i) => i).sort((a, b) => (a === st.sel) - (b === st.sel));
// other places of the selected slot: dashed, clickable on the map
const cur = st.slots[st.sel];
if (cur) {
const t = TOOLS[cur.tool], here = new Set(placeOf(cur).sites);
const other = new Set(t.places.filter((p) => p.value !== cur.place).flatMap((p) => p.sites).filter((x) => !here.has(x)));
other.forEach((site) => siteShapes(site, cur).forEach((sh) => parts.push(ring(sh, COLORS[st.sel], 0, "dash"))));
}
for (const i of order) {
const s = st.slots[i];
const dim = hoverSlot !== null && hoverSlot !== i;
if (dim) parts.push('<g opacity="0.25">');
for (const site of placeOf(s).sites) {
const n = layers[site] || 0;
layers[site] = n + 1;
siteShapes(site, s).forEach((sh) => parts.push(ring(sh, COLORS[i], n, "solid")));
}
if (dim) parts.push("</g>");
if (s.tool === "aphasia") parts.push(skippedLayers(s, COLORS[i]));
if (s.tool === "excise" && !wordChips(s.word).length) {
parts.push(`<text x="${BOX.ctx.x + 10}" y="${BOX.ctx.y + BOX.ctx.h - 8}" class="bm-s" style="fill:${COLORS[i]}">„${esc(s.word || "")}“ steht nicht in Prompt A</text>`);
}
}
if (hoverTool && TOOLS[hoverTool]) {
const seen = new Set();
TOOLS[hoverTool].places.forEach((p) => p.sites.forEach((site) => {
if (seen.has(site)) return;
seen.add(site);
siteShapes(site, { word: guessWord(srv.prompt) }).forEach((sh) => parts.push(ring(sh, "#868e96", 0, "dash")));
}));
}
return parts.join("");
}
// The CLIP layers an early read-out leaves out, over the layer stripes of the CLIP box.
function skippedLayers(s, color) {
const k = Math.min(12, Math.max(0, Math.round(+s.value || 0))), b = BOX.clip;
const out = [];
for (let j = 12 - k; j < 12; j++) {
out.push(`<rect x="${b.x + b.w - 206 + j * 16}" y="${b.y + 9}" width="10" height="24" rx="2" fill="${color}" fill-opacity="0.8" class="bm-hl"/>`);
}
const text = k ? `nach Schicht ${12 - k} ausgelesen` : "alle 12 Schichten";
out.push(`<text x="${b.x + 178}" y="${b.y + 26}" class="bm-s bm-hl" style="fill:${color}">${text}</text>`);
return out.join("");
}
function defs() {
const heads = COLORS.concat(["#868e96"]).map((c) =>
`<marker id="bm-arrow-${c.slice(1)}" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="${c}"/></marker>`).join("");
return `<defs><marker id="bm-head" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" class="bm-headpath"/></marker>${heads}
<pattern id="bm-hatch" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
<line x1="0" y1="0" x2="0" y2="8" stroke="currentColor" stroke-width="2" stroke-opacity="0.25"/></pattern></defs>`;
}
function paintMap() {
const svg = element.querySelector(".bm-svg");
if (!svg) return;
svg.innerHTML = defs() + textLane() + unet() + imageNode() + effectLayer() + highlights() + timeline();
}
// ---------------------------------------------------------------- palette and slots (HTML)
function renderPalette() {
const pal = element.querySelector(".bm-palette");
pal.innerHTML = CAT.groups.map((g) => `<div class="bm-group"><span class="bm-group-label">${esc(g)}</span>
${CAT.tools.filter((t) => t.group === g).map((t) => {
const used = st.slots.map((s, i) => (s.tool === t.key ? i : -1)).filter((i) => i >= 0);
const dots = used.map((i) => `<span class="bm-dot" style="background:${COLORS[i]}"></span>`).join("");
return `<button type="button" class="bm-tile ${used.length ? "bm-used" : ""}" data-key="${t.key}" title="${esc(t.what)}">
<span class="bm-ico">${t.icon}</span><span>${esc(t.label)}</span>${dots}</button>`;
}).join("")}</div>`).join("") +
`<div class="bm-pal-hint">${st.slots.length >= CAT.max_slots
? "Drei Werkzeuge sind das Maximum: ein weiteres ersetzt das markierte."
: "Klickt ein Werkzeug an, um es einzusetzen (bis zu drei). Mit der Maus darüber seht ihr auf der Karte, wo es wirken kann."}</div>`;
}
function slotCard(s, i) {
const t = TOOLS[s.tool], c = COLORS[i];
const places = t.places.length > 1
? `<div class="bm-places">${t.places.map((p) => `<button type="button" class="bm-pchip ${p.value === s.place ? "bm-on" : ""}"
data-act="place" data-place="${p.value}">${esc(p.label)}</button>`).join("")}</div>
<div class="bm-hint">Ort: hier wählen oder auf die gestrichelten Stellen der Karte klicken.</div>` : "";
const word = s.tool === "excise"
? `<label class="bm-row">Wort <input type="text" data-act="word" value="${esc(s.word || "")}" placeholder="Wort aus Prompt A"></label>` : "";
const lo = Math.min(t.lo, t.hi), hi = Math.max(t.lo, t.hi);
const knob = `<div class="bm-row bm-knob"><span>${esc(t.knob)}</span>
<input type="range" data-act="value" min="${lo}" max="${hi}" step="${t.step}" value="${s.value}">
<input type="number" data-act="value" step="any" value="${s.value}"></div>`;
const win = t.window
? `<div class="bm-row bm-win"><span>Zeitfenster</span><input type="number" data-act="start" step="any" value="${s.start}">
<span>bis</span><input type="number" data-act="end" step="any" value="${s.end}"><span>%</span></div>
<div class="bm-hint">Oder auf der Zeitleiste unter der Karte ziehen.</div>`
: t.time_knob ? `<div class="bm-hint">Den Zeitpunkt könnt ihr auch auf der Zeitleiste ziehen.</div>`
: t.after_loop ? `<div class="bm-hint">Wirkt nach der Schleife, beim Übersetzen in Pixel.</div>`
: `<div class="bm-hint">Wirkt im ganzen Lauf: ${esc(t.whole)}.</div>`;
return `<div class="bm-card ${i === st.sel ? "bm-sel" : ""}" data-i="${i}" style="--c:${c}">
<div class="bm-card-head"><span class="bm-badge">${i + 1}</span><span class="bm-ico">${t.icon}</span>
<b>${esc(t.label)}</b><button type="button" class="bm-x" data-act="remove" title="Werkzeug entfernen">✕</button></div>
<p class="bm-what">${esc(t.what)}</p>${places}${word}${knob}${win}
<p class="bm-foot">${esc(t.group)} · aus dem Neural-Bending-Rezept „${esc(t.preset)}“ · bei ${num(t.neutral)} keine Wirkung</p></div>`;
}
function renderSlots() {
const box = element.querySelector(".bm-slots");
const cards = st.slots.map(slotCard);
for (let i = st.slots.length; i < Math.min(st.slots.length + 1, CAT.max_slots); i++) {
cards.push(`<div class="bm-card bm-empty" data-i="${i}"><span class="bm-badge" style="--c:${COLORS[i]}">${i + 1}</span>
Freier Platz: oben ein Werkzeug wählen.</div>`);
}
box.innerHTML = cards.join("");
}
function renderAll() {
renderPalette();
renderSlots();
paintMap();
}
// Keep the other input of a pair in step without re-rendering the card (that would steal the focus).
function syncCard(i, except) {
const card = element.querySelector(`.bm-card[data-i="${i}"]`);
if (!card) return;
const s = st.slots[i];
card.querySelectorAll("[data-act]").forEach((inp) => {
if (inp === except || inp.tagName !== "INPUT") return;
const a = inp.dataset.act;
if (a === "value" || a === "start" || a === "end") inp.value = s[a];
});
}
// ---------------------------------------------------------------- events
element.querySelector(".bm-host").innerHTML = `<div class="bm">
<div class="bm-stage"><svg class="bm-svg" viewBox="0 0 ${W} ${H}" role="img" aria-label="Karte von Stable Diffusion 1.5"></svg>
<div class="bm-tip" hidden></div></div>
<div class="bm-side"><div class="bm-palette"></div><div class="bm-slots"></div></div></div>`;
root = element.querySelector(".bm");
const svg = element.querySelector(".bm-svg");
const tip = element.querySelector(".bm-tip");
root.addEventListener("click", (e) => {
const tile = e.target.closest(".bm-tile");
if (tile) { addTool(tile.dataset.key); return; }
const act = e.target.closest("[data-act]");
const card = e.target.closest(".bm-card");
if (act && card && act.dataset.act === "remove") { removeSlot(+card.dataset.i); return; }
if (act && card && act.dataset.act === "place") { st.sel = +card.dataset.i; setPlace(+card.dataset.i, act.dataset.place); return; }
if (card && !card.classList.contains("bm-empty") && +card.dataset.i !== st.sel && !e.target.closest("input")) {
st.sel = +card.dataset.i; renderAll(); return;
}
const site = e.target.closest("[data-site]");
if (site && svg.contains(site) && !e.target.closest("[data-handle]")) siteClick(site.dataset.site);
});
root.addEventListener("input", (e) => {
const inp = e.target, card = inp.closest(".bm-card");
if (!card || !inp.dataset.act) return;
const i = +card.dataset.i, s = st.slots[i], a = inp.dataset.act;
if (!s) return;
if (a === "word") s.word = inp.value;
else {
const v = parseFloat(String(inp.value).replace(",", "."));
if (!Number.isFinite(v)) return;
s[a] = v;
syncCard(i, inp);
}
publish(true);
paintMap();
});
root.addEventListener("pointerover", (e) => {
const tile = e.target.closest(".bm-tile"), card = e.target.closest(".bm-card:not(.bm-empty)");
const ht = tile ? tile.dataset.key : null, hs = card ? +card.dataset.i : null;
if (ht !== hoverTool || hs !== hoverSlot) { hoverTool = ht; hoverSlot = hs; paintMap(); }
});
root.addEventListener("pointerleave", () => { hoverTool = null; hoverSlot = null; paintMap(); });
function svgX(e) {
const pt = svg.createSVGPoint();
pt.x = e.clientX; pt.y = e.clientY;
return pt.matrixTransform(svg.getScreenCTM().inverse()).x;
}
svg.addEventListener("pointerdown", (e) => {
const h = e.target.closest("[data-handle]");
if (!h) return;
const [i, kind] = h.dataset.handle.split(":");
const s = st.slots[+i];
if (!s) return;
e.preventDefault();
st.sel = +i;
drag = { i: +i, kind, x0: svgX(e), start: s.start, end: s.end };
svg.setPointerCapture(e.pointerId);
renderPalette(); renderSlots();
});
svg.addEventListener("pointermove", (e) => {
if (drag) {
const s = st.slots[drag.i];
const d = (svgX(e) - drag.x0) / (X1 - X0) * 100;
const at = Math.round(Math.min(100, Math.max(0, (svgX(e) - X0) / (X1 - X0) * 100)));
if (drag.kind === "start") s.start = Math.min(at, s.end);
else if (drag.kind === "end") s.end = Math.max(at, s.start);
else if (drag.kind === "knob") s.value = at;
else {
const len = drag.end - drag.start;
const a = Math.round(Math.min(100 - len, Math.max(0, drag.start + d)));
s.start = a; s.end = a + len;
}
syncCard(drag.i, null);
paintMap();
return;
}
const t = e.target.closest("[data-tip]");
if (!t) { tip.hidden = true; return; }
const r = element.querySelector(".bm-stage").getBoundingClientRect();
tip.textContent = t.dataset.tip;
tip.hidden = false;
const x = e.clientX - r.left, y = e.clientY - r.top;
tip.style.left = Math.max(0, Math.min(x + 14, r.width - 310)) + "px";
tip.style.top = (y + 18) + "px";
});
function endDrag() {
if (!drag) return;
drag = null;
publish(true);
paintMap();
}
svg.addEventListener("pointerup", endDrag);
svg.addEventListener("pointercancel", endDrag);
svg.addEventListener("pointerleave", () => { tip.hidden = true; });
watch("value", () => {
absorb(props.value, false);
publish(false);
paintMap();
});
absorb(props.value, true);
publish(false);
renderAll();