feat(tagging): skipped tags hide matching suggestions (#431)

A Skipped tags list in System > Auto-tagging (D202) hides every suggested
tag whose words contain an entry's words, on every suggestion path
(Tag image, Auto-tag selected, the System batch, the legacy single and
batch routes), before the limit. Jobs snapshot the list at their start.
A read-only preview route counts what a list hides among the library's
tags and the downloaded WD14 label lists. The draft store compares list
and object drafts by value (sameDraft).

tests/js/workspace-image-tagging-state.test.js

@@ -936,3 +936,17 @@ test('#515: text typed before Retry after a failed first observation follows the
     assert.equal(c.state.manual, 'Minimal, warm_light, dunes');
     assert.equal(c.state.statusText, '');
 });
+
+test('the chip hint says how many skipped tags were not suggested (#431)', async () => {
+    const { skippedNote } = await load();
+    assert.equal(skippedNote(0), '');
+    assert.equal(skippedNote(undefined), '');
+    assert.equal(skippedNote(1), ' 1 skipped tag was not suggested.');
+    assert.equal(skippedNote(2), ' 2 skipped tags were not suggested.');
+    for (const [skipped, hint] of [[2, 'Remove anything you do not want to add. 2 skipped tags were not suggested.'],
+        [0, 'Remove anything you do not want to add.'], ['3', 'Remove anything you do not want to add.']]) {
+        const { c } = await opened({ [`POST ${SUGGEST}`]: () => response(200, { ...suggested(), skipped }) });
+        await c.generate();
+        assert.equal(c.state.chipHint, hint, String(skipped));
+    }
+});

tests/js/workspace-system-skipped-tags.test.js

@@ -0,0 +1,247 @@
+// System › Auto-tagging "Skipped tags" (#431, D202): the add input, the chips, the client checks and the preview line.
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const skippedModule = import('../../web/js/workspace/system-skipped-tags.mjs');
+const stateModule = import('../../web/js/workspace/system-state.mjs');
+const coreModule = import('../../web/js/shared/toolkit/core.js');
+
+/** A minimal DOM: elements with children, attributes, listeners (aborted by their signal) and focus. */
+function fakeDOM() {
+    const previous = global.document;
+    class Element {
+        constructor(tag) {
+            this.tagName = tag.toUpperCase();
+            this.children = [];
+            this.attributes = {};
+            this.listeners = [];
+            this.dataset = {};
+            this.className = '';
+            this.id = '';
+            this.value = '';
+            this.title = '';
+            this.disabled = false;
+            this._text = '';
+        }
+        get localName() { return this.tagName.toLowerCase(); }
+        get textContent() { return this._text + this.children.map(child => (typeof child === 'string' ? child : child.textContent)).join(''); }
+        set textContent(text) { this.children = []; this._text = String(text); }
+        append(...nodes) { for (const node of nodes) { if (typeof node !== 'string') node.parentNode = this; this.children.push(node); } }
+        replaceChildren(...nodes) { this.children = []; this._text = ''; this.append(...nodes); }
+        querySelectorAll(selector) {
+            assert.equal(selector, 'button');
+            const found = [];
+            const walk = node => { for (const child of node.children) if (typeof child !== 'string') { if (child.tagName === 'BUTTON') found.push(child); walk(child); } };
+            walk(this);
+            return found;
+        }
+        focus() { global.document.activeElement = this; }
+        setAttribute(name, value) { this.attributes[name] = String(value); }
+        getAttribute(name) { return Object.hasOwn(this.attributes, name) ? this.attributes[name] : null; }
+        removeAttribute(name) { delete this.attributes[name]; }
+        addEventListener(type, callback, options = {}) {
+            if (options.signal?.aborted) return;
+            const entry = { type, callback };
+            this.listeners.push(entry);
+            options.signal?.addEventListener('abort', () => { this.listeners = this.listeners.filter(item => item !== entry); });
+        }
+        dispatch(type, event = {}) {
+            return Promise.all(this.listeners.filter(item => item.type === type).map(({ callback }) => callback({ type, target: this, ...event })));
+        }
+    }
+    global.document = { createElement: tag => new Element(tag), activeElement: null };
+    const walk = (node, found = []) => { found.push(node); node.children.forEach(child => typeof child !== 'string' && walk(child, found)); return found; };
+    return { find: (root, predicate) => walk(root).find(predicate), restore() { global.document = previous; } };
+}
+
+const tick = () => new Promise(resolve => setTimeout(resolve, 5));
+
+async function mounted({ saved = ['blurry'], answer, host = true } = {}) {
+    const { skippedTagsBlock } = await skippedModule;
+    const { createSystemDrafts } = await stateModule;
+    const { createScope } = await coreModule;
+    const dom = fakeDOM();
+    const drafts = createSystemDrafts({
+        readBrowser: () => ({}), readRuntime: () => ({}),
+        readHost: async () => ({ values: host ? { autotag_skipped_tags: saved } : {}, revision: 'sha256:one' }),
+        writeBrowser: async () => ({}), writeHost: async () => ({ success: true, persisted: true }), writeRuntime: async () => ({}),
+    });
+    const scope = createScope();
+    const posts = [];
+    const api = {
+        post: (url, body, options) => {
+            posts.push({ url, body, signal: options.signal });
+            if (answer) return answer(body, options);
+            return Promise.resolve({ success: true, count: body.entries.length, sample: body.entries, sample_limit: 12,
+                per_entry: body.entries.map((entry, index) => ({ entry, count: index })), sources: { library: 3, wd14: ['WD14 SwinV2'] } });
+        },
+    };
+    const block = skippedTagsBlock({ api, scope, drafts, delay: 1 });
+    scope.cleanup(drafts.subscribe(block.repaint));
+    block.repaint();
+    await drafts.reloadHost();
+    const byId = id => dom.find(block.node, node => node.id === id);
+    const chips = () => dom.find(block.node, node => node.className === 'tags skip-chips');
+    const preview = () => dom.find(block.node, node => node.className === 'small skip-preview');
+    const add = async text => { byId('tag-skipped-input').value = text; await byId('tag-skipped-add').dispatch('click'); };
+    return { dom, drafts, scope, block, byId, chips, preview, posts, add };
+}
+
+test('words split like the server: NFC, lower case, space, _ and - only', async () => {
+    const { entryWords } = await skippedModule;
+    assert.deepEqual(entryWords('Half-closed_eyes'), ['half', 'closed', 'eyes']);
+    assert.deepEqual(entryWords('saber_(fate)'), ['saber', '(fate)']);
+    assert.deepEqual(entryWords(' _ - '), []);
+    assert.deepEqual(entryWords('CAFÉ'), ['café']);
+});
+
+test('the client checks say why an entry is not added', async () => {
+    const { entryProblem, SKIPPED_COPY } = await skippedModule;
+    assert.equal(entryProblem('  sky ', ['blurry']), '');
+    assert.equal(entryProblem('   ', []), SKIPPED_COPY.empty);
+    assert.equal(entryProblem('_--', []), 'Enter a word.');
+    assert.equal(entryProblem('a, b', []), 'No commas or line breaks.');
+    assert.equal(entryProblem('a\nb', []), 'No commas or line breaks.');
+    assert.equal(entryProblem('x'.repeat(51), []), 'At most 50 characters.');
+    assert.equal(entryProblem('🏜'.repeat(50), []), '');
+    assert.equal(entryProblem('Blurry-Background', ['blurry background']), 'Already in the list.');
+    assert.equal(entryProblem('sky', Array.from({ length: 200 }, (_, i) => `w${i}`)), 'The list is full (200).');
+});
+
+test('the preview line states the count, the sample and the sources', async () => {
+    const { previewText, chipCount } = await skippedModule;
+    assert.deepEqual(previewText({ count: 15, sample: ['blurry', 'signature'], sources: { wd14: ['WD14 SwinV2'] } }), {
+        lead: 'Hides 15 tags from suggestions', rest: ': blurry, signature and 13 more. Tags already on images are not changed.' });
+    assert.deepEqual(previewText({ count: 1, sample: ['blurry'], sources: { wd14: [] } }), {
+        lead: 'Hides 1 tag from suggestions',
+        rest: ': blurry. Checked against library tags only; no WD14 label list is downloaded. Tags already on images are not changed.' });
+    assert.deepEqual(previewText({ count: 0, sample: [], sources: { wd14: ['WD14 ViT'] } }), {
+        lead: 'Hides 0 tags from suggestions', rest: '. Tags already on images are not changed.' });
+    assert.deepEqual(previewText(null).lead, 'Hides 0 tags from suggestions');
+    assert.deepEqual(chipCount(3), { title: 'Hides 3 tags', text: '3' });
+    assert.deepEqual(chipCount(1), { title: 'Hides 1 tag', text: '1' });
+    assert.deepEqual(chipCount(0), { title: 'Hides no known tag', text: 'none' });
+    assert.equal(chipCount(undefined), null);
+});
+
+test('the block shows the saved list, previews it and carries its setting keys', async () => {
+    const view = await mounted({ saved: ['blurry', 'signature'] });
+    try {
+        assert.equal(view.block.node.dataset.setting, 'tag-skipped');
+        assert.equal(view.block.node.dataset.key, 'autotag_skipped_tags');
+        assert.equal(view.preview().textContent, 'Checking…');
+        await tick();
+        assert.deepEqual(view.posts.map(post => [post.url, post.body]),
+            [['/prompt_manager/autotag/skipped-tags/preview', { entries: ['blurry', 'signature'] }]]);
+        assert.equal(view.preview().textContent, 'Hides 2 tags from suggestions: blurry, signature. Tags already on images are not changed.');
+        const chips = view.chips().children;
+        assert.deepEqual(chips.map(chip => [chip.className, chip.title, chip.textContent]), [
+            ['chip tag-suggestion none', 'Hides no known tag', 'blurrynone×'],
+            ['chip tag-suggestion', 'Hides 1 tag', 'signature1×']]);
+        assert.equal(chips[1].children[2].getAttribute('aria-label'), 'Remove signature');
+    } finally { view.scope.dispose(); view.dom.restore(); }
+});
+
+test('add and remove draft the list; a list set back is clean; Enter adds', async () => {
+    const view = await mounted();
+    try {
+        await view.add('  closed eyes ');
+        assert.deepEqual(view.drafts.get('host', 'autotag_skipped_tags'), ['blurry', 'closed eyes']);
+        assert.equal(view.byId('tag-skipped-input').value, '');
+        assert.equal(view.drafts.dirty(), true);
+        view.byId('tag-skipped-input').value = 'sky';
+        let prevented = false;
+        await view.byId('tag-skipped-input').dispatch('keydown', { key: 'Enter', preventDefault: () => { prevented = true; } });
+        assert.equal(prevented, true);
+        await view.byId('tag-skipped-input').dispatch('keydown', { key: 'a' });
+        assert.deepEqual(view.drafts.get('host', 'autotag_skipped_tags'), ['blurry', 'closed eyes', 'sky']);
+        // Remove the two added chips: the list equals the saved one and nothing is unsaved (sameDraft).
+        const removeButton = index => view.chips().children[index].children.at(-1);
+        removeButton(2).focus();
+        await removeButton(2).dispatch('click');
+        assert.equal(global.document.activeElement, removeButton(1), 'focus moves to the neighbour');
+        await removeButton(1).dispatch('click');
+        assert.deepEqual(view.drafts.get('host', 'autotag_skipped_tags'), ['blurry']);
+        assert.equal(view.drafts.dirty(), false);
+        await tick();
+        // Only the last list of a quick series is asked for.
+        assert.deepEqual(view.posts.map(post => post.body.entries), [['blurry']]);
+    } finally { view.scope.dispose(); view.dom.restore(); }
+});
+
+test('a refused entry is not added and the line under the input says why', async () => {
+    const view = await mounted();
+    try {
+        const problem = () => view.byId('tag-skipped-problem').textContent;
+        await view.add('Blurry');
+        assert.equal(problem(), 'Already in the list.');
+        assert.equal(view.byId('tag-skipped-input').getAttribute('aria-invalid'), 'true');
+        assert.equal(view.byId('tag-skipped-input').value, 'Blurry');
+        await view.byId('tag-skipped-input').dispatch('input');
+        assert.equal(problem(), '');
+        assert.equal(view.byId('tag-skipped-input').getAttribute('aria-invalid'), null);
+        await view.add('a,b');
+        assert.equal(problem(), 'No commas or line breaks.');
+        await view.add(' ');
+        assert.equal(problem(), 'Enter a word.');
+        assert.deepEqual(view.drafts.get('host', 'autotag_skipped_tags'), ['blurry']);
+    } finally { view.scope.dispose(); view.dom.restore(); }
+});
+
+test('a full list disables Add and says so', async () => {
+    const view = await mounted({ saved: Array.from({ length: 200 }, (_, i) => `w${i}`) });
+    try {
+        assert.equal(view.byId('tag-skipped-add').disabled, true);
+        assert.equal(view.byId('tag-skipped-problem').textContent, 'The list is full (200).');
+        await view.chips().children[0].children.at(-1).dispatch('click');
+        assert.equal(view.byId('tag-skipped-add').disabled, false);
+        assert.equal(view.byId('tag-skipped-problem').textContent, '');
+    } finally { view.scope.dispose(); view.dom.restore(); }
+});
+
+test('an empty list says no tags are skipped without a request', async () => {
+    const view = await mounted({ saved: [] });
+    try {
+        await tick();
+        assert.equal(view.preview().textContent, 'No tags are skipped.');
+        assert.deepEqual(view.posts, []);
+    } finally { view.scope.dispose(); view.dom.restore(); }
+});
+
+test('a failed preview says so; a newer list aborts the older request', async () => {
+    let calls = 0;
+    const view = await mounted({ answer: (body, options) => {
+        calls += 1;
+        if (calls === 1) return new Promise((_resolve, reject) => options.signal.addEventListener('abort', () => reject(new Error('aborted'))));
+        return Promise.reject(Object.assign(new Error('busy'), { code: 'busy' }));
+    } });
+    try {
+        await tick();
+        assert.equal(view.posts.length, 1);
+        await view.add('sky');
+        assert.equal(view.posts[0].signal.aborted, true);
+        await tick();
+        assert.equal(view.preview().textContent, 'The preview could not be read.');
+        // The list stays editable.
+        assert.equal(view.byId('tag-skipped-input').disabled, false);
+    } finally { view.scope.dispose(); view.dom.restore(); }
+});
+
+test('before the settings are read the controls are disabled', async () => {
+    const view = await mounted({ host: false });
+    try {
+        assert.equal(view.byId('tag-skipped-input').disabled, true);
+        assert.equal(view.byId('tag-skipped-add').disabled, true);
+        await view.add('sky');
+        assert.equal(view.drafts.get('host', 'autotag_skipped_tags'), undefined);
+    } finally { view.scope.dispose(); view.dom.restore(); }
+});
+
+test('leaving the section aborts a request in flight and the pending timer', async () => {
+    const view = await mounted({ answer: (_body, options) => new Promise((_r, reject) => options.signal.addEventListener('abort', () => reject(new Error('x')))) });
+    await tick();
+    assert.equal(view.posts.length, 1);
+    view.scope.dispose();
+    assert.equal(view.posts[0].signal.aborted, true);
+    view.dom.restore();
+});

tests/js/workspace-system-state.test.js

@@ -402,11 +402,12 @@ test('a partial host save keeps what saved, adopts its revision and fails only t
     assert.equal(drafts.statusText(), 'missing can\'t be used: not found. Remove it or reconnect it, then save.');
     // The next save carries the revision the saved part produced: no false "changed elsewhere".
     domains.outcome.host = null;
-    drafts.set('host', 'gallery_root_paths', ['a']);
+    // (#431: a list equal to the saved one is no change, so a different one is drafted.)
+    drafts.set('host', 'gallery_root_paths', ['a', 'b']);
     const second = await drafts.save();
     assert.equal(second.host, 'saved');
     assert.equal(domains.calls.at(-1)[2].expected_revision, 'sha256:lora');
-    assert.deepEqual(domains.calls.at(-1)[1], { gallery_root_paths: ['a'] });
+    assert.deepEqual(domains.calls.at(-1)[1], { gallery_root_paths: ['a', 'b'] });
     // Without a server reason, the status says some were saved and the highlighted ones were not.
     domains.outcome.host = () => { throw Object.assign(new Error('boom'), { partial: { saved: ['x'], revision: 'sha256:three' } }); };
     drafts.set('host', 'x', 1);
@@ -429,3 +430,39 @@ test('runtime adapter maps config.level to runtime_level and back', async () =>
     assert.deepEqual(runtimeBody({ runtime_level: 'WARNING' }), { level: 'WARNING' });
     assert.deepEqual(runtimeBody({ runtime_level: 'CRITICAL', console_logging: true }), { level: 'CRITICAL', console_logging: true });
 });
+
+test('sameDraft compares arrays and plain objects by value, keys in any order (#431)', async () => {
+    const { sameDraft } = await source;
+    assert.equal(sameDraft(1, 1), true);
+    assert.equal(sameDraft(Number.NaN, Number.NaN), true);
+    assert.equal(sameDraft(0, -0), false);
+    assert.equal(sameDraft(['a', 'b'], ['a', 'b']), true);
+    assert.equal(sameDraft(['a', 'b'], ['b', 'a']), false);
+    assert.equal(sameDraft([], []), true);
+    assert.equal(sameDraft([], {}), false);
+    assert.equal(sameDraft({ gguf: 'x', hf: 'y' }, { hf: 'y', gguf: 'x' }), true);
+    assert.equal(sameDraft([{ id: 'a', name: 'n' }], [{ name: 'n', id: 'a' }]), true);
+    assert.equal(sameDraft({ a: 1 }, { a: 2 }), false);
+    assert.equal(sameDraft('a', ['a']), false);
+    assert.equal(sameDraft(null, {}), false);
+    assert.equal(sameDraft(new Date(0), new Date(0)), false);
+});
+
+test('a list draft set back to the saved list is clean, and a save cleans it (#431)', async () => {
+    const domains = adapters({ host: { autotag_skipped_tags: ['blurry'] } });
+    const drafts = await loaded(domains);
+    drafts.set('host', 'autotag_skipped_tags', ['blurry', 'signature']);
+    assert.equal(drafts.dirty('host'), true);
+    // Removing the added chip builds a new array equal to the saved one.
+    drafts.set('host', 'autotag_skipped_tags', ['blurry']);
+    assert.equal(drafts.dirty('host'), false);
+    drafts.set('host', 'autotag_skipped_tags', ['signature']);
+    await drafts.save();
+    assert.equal(drafts.dirty('host'), false);
+    assert.deepEqual(drafts.saved('host').autotag_skipped_tags, ['signature']);
+    // A reload whose list equals the draft's (a new array) keeps nothing dirty.
+    drafts.set('host', 'autotag_skipped_tags', ['sky']);
+    domains.readHost = async () => ({ values: { autotag_skipped_tags: ['sky'] }, revision: 'sha256:three' });
+    await drafts.load('host');
+    assert.equal(drafts.dirty('host'), false);
+});

tests/js/workspace-system-tagging.test.js

@@ -201,7 +201,7 @@ test('opening the section reads the model status once; the select waits for it',
         assert.deepEqual(byId('tag-model').options.map(option => option.textContent),
             ['WD14 SwinV2 · ~400 MB', 'WD14 ViT · ~400 MB', 'GGUF JoyCaption · ~4.5 GB', 'HuggingFace JoyCaption · ~16 GB']);
         assert.deepEqual(surface.children.map(node => node.className),
-            ['', '', 'setting-row', 'setting-row', 'setting-row', 'setting-row', 'setting-row', 'field', 'row-actions', 'operation']);
+            ['', '', 'setting-row', 'setting-row', 'setting-row', 'setting-row', 'setting-row', 'setting-block', 'field', 'row-actions', 'operation']);
     } finally { scope.dispose(); dom.restore(); }
     const failed = await mounted({ modelsFail: true });
     try {