feat: ML tag suggestions, character/fandom integrity, underscores, modal polish
Consolidated merge of feat/tag-suggestions branch. Original 64-commit history was lost to git-object corruption in a Nextcloud-synced checkout; this single commit captures the equivalent diff. Includes: - pgvector-backed tag suggestion infra (WD14 + SigLIP centroids, ml-worker container, Celery tasks, suggestion service, accept/reject endpoints + modal UI with green/red chip buttons) - Character/fandom integrity: title-case normalization on every write path, fandom-id backfill, maintenance task + settings button, migrations g26041901 + h26041901 to canonicalize legacy rows with case-only duplicate merging - Tag-underscores + modal polish: WD14 name canonicalization at emit + accept + add/bulk-add paths, migration i26041901 for legacy-row rename-or-merge across character/fandom/NULL kinds, suggestion-accept refresh parity via awaited loadTags, persistent chip tint
This commit is contained in:
@@ -498,8 +498,9 @@
|
||||
// Tag Refresh for Gallery Items
|
||||
// ---------------------------
|
||||
async function refreshItemTags(imageId) {
|
||||
// Find the gallery item
|
||||
const item = document.querySelector(`.img-clickable[data-id="${imageId}"]`);
|
||||
// Only the gallery page renders tag overlays on thumbnails. Skip showcase items
|
||||
// (class .masonry-item) so closing the modal doesn't inject a .tag-overlay there.
|
||||
const item = document.querySelector(`.gallery-item[data-id="${imageId}"]`);
|
||||
if (!item) return;
|
||||
|
||||
try {
|
||||
|
||||
+222
-12
@@ -14,6 +14,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const tagInput = tagForm ? tagForm.querySelector('input[name="name"]') : null;
|
||||
const tagAutocomplete = document.getElementById('tagAutocomplete');
|
||||
const tagActionFeedback = document.getElementById('tagActionFeedback');
|
||||
const provenanceSection = document.getElementById('modalProvenanceSection');
|
||||
const provenanceList = document.getElementById('modalProvenanceList');
|
||||
const suggestionsSection = document.getElementById('modalSuggestionsSection');
|
||||
const suggestionsList = document.getElementById('modalSuggestionsList');
|
||||
const suggestionsRefresh = document.getElementById('suggestionsRefreshBtn');
|
||||
|
||||
// Series info elements (when image IS in a series)
|
||||
const seriesInfoEl = document.getElementById('modalSeriesInfo');
|
||||
@@ -82,6 +87,15 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
return tagEditor ? tagEditor.dataset.imageId : '';
|
||||
}
|
||||
|
||||
function getProvenanceDisplayName(name, kind) {
|
||||
// Artist tag names are "artist:name" — strip the prefix.
|
||||
if (kind === 'artist' && name.startsWith('artist:')) return name.slice(7);
|
||||
// Post tag names are "post:platform:artist:id" — strip "post:" only; the rest
|
||||
// is a placeholder replaced by PostMetadata.title or post_id once it loads.
|
||||
if (kind === 'post' && name.startsWith('post:')) return name.slice(5);
|
||||
return name;
|
||||
}
|
||||
|
||||
function renderTags(tags) {
|
||||
if (!tagList) return;
|
||||
tagList.innerHTML = '';
|
||||
@@ -94,12 +108,206 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
tagList.appendChild(chip);
|
||||
});
|
||||
}
|
||||
|
||||
const SUGGESTION_CATEGORY_ORDER = ['character', 'copyright', 'general'];
|
||||
const SUGGESTION_CATEGORY_LABEL = {
|
||||
character: 'Characters',
|
||||
copyright: 'Fandoms',
|
||||
general: 'General',
|
||||
};
|
||||
|
||||
function clearSuggestions() {
|
||||
if (suggestionsList) suggestionsList.innerHTML = '';
|
||||
if (suggestionsSection) suggestionsSection.style.display = 'none';
|
||||
}
|
||||
|
||||
function buildSuggestionChip(suggestion, imageId) {
|
||||
const chip = document.createElement('div');
|
||||
chip.className = 'suggestion-chip';
|
||||
chip.dataset.tagName = suggestion.name;
|
||||
chip.dataset.source = suggestion.source;
|
||||
chip.dataset.category = suggestion.category;
|
||||
chip.dataset.confidence = String(suggestion.confidence);
|
||||
chip.title = `${suggestion.name} (${suggestion.source})`;
|
||||
|
||||
const pct = Math.round(suggestion.confidence * 100);
|
||||
chip.innerHTML = `
|
||||
<button type="button" class="sugg-btn sugg-accept" aria-label="Accept">✓</button>
|
||||
<span class="sugg-body">
|
||||
<span class="sugg-label">${escapeHtml(suggestion.name)}</span>
|
||||
<span class="sugg-confidence">${pct}%</span>
|
||||
</span>
|
||||
<button type="button" class="sugg-btn sugg-reject" aria-label="Reject">✕</button>
|
||||
`;
|
||||
|
||||
const acceptBtn = chip.querySelector('.sugg-accept');
|
||||
const rejectBtn = chip.querySelector('.sugg-reject');
|
||||
if (acceptBtn) {
|
||||
acceptBtn.addEventListener('click', () => acceptSuggestion(chip, imageId));
|
||||
}
|
||||
if (rejectBtn) {
|
||||
rejectBtn.addEventListener('click', () => rejectSuggestion(chip, imageId));
|
||||
}
|
||||
return chip;
|
||||
}
|
||||
|
||||
function renderSuggestions(grouped, imageId) {
|
||||
if (!suggestionsSection || !suggestionsList) return;
|
||||
suggestionsList.innerHTML = '';
|
||||
let total = 0;
|
||||
for (const cat of SUGGESTION_CATEGORY_ORDER) {
|
||||
const items = (grouped && grouped[cat]) || [];
|
||||
if (items.length === 0) continue;
|
||||
total += items.length;
|
||||
|
||||
const group = document.createElement('div');
|
||||
group.className = 'suggestions-category';
|
||||
group.dataset.category = cat;
|
||||
|
||||
const label = document.createElement('div');
|
||||
label.className = 'suggestions-category-label';
|
||||
label.textContent = SUGGESTION_CATEGORY_LABEL[cat] || cat;
|
||||
group.appendChild(label);
|
||||
|
||||
const chips = document.createElement('div');
|
||||
chips.className = 'suggestions-chips';
|
||||
for (const item of items) {
|
||||
chips.appendChild(buildSuggestionChip(item, imageId));
|
||||
}
|
||||
group.appendChild(chips);
|
||||
suggestionsList.appendChild(group);
|
||||
}
|
||||
suggestionsSection.style.display = total > 0 ? '' : 'none';
|
||||
}
|
||||
|
||||
async function loadSuggestions(imageId) {
|
||||
if (!imageId || !suggestionsSection) { clearSuggestions(); return; }
|
||||
try {
|
||||
const r = await fetch(`/image/${imageId}/suggestions`);
|
||||
const j = await r.json();
|
||||
if (j.ok) renderSuggestions(j.suggestions || {}, imageId);
|
||||
else clearSuggestions();
|
||||
} catch {
|
||||
clearSuggestions();
|
||||
}
|
||||
}
|
||||
|
||||
function animateChipOut(chip) {
|
||||
chip.classList.add('leaving');
|
||||
setTimeout(() => { chip.remove(); }, 200);
|
||||
}
|
||||
|
||||
async function acceptSuggestion(chip, imageId) {
|
||||
if (chip.dataset.disabled === 'true') return;
|
||||
chip.dataset.disabled = 'true';
|
||||
chip.style.pointerEvents = 'none';
|
||||
try {
|
||||
const r = await fetch(`/image/${imageId}/suggestions/accept`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
tag_name: chip.dataset.tagName,
|
||||
source: chip.dataset.source,
|
||||
category: chip.dataset.category,
|
||||
confidence: Number(chip.dataset.confidence) || 0,
|
||||
}),
|
||||
});
|
||||
const j = await r.json();
|
||||
if (!j.ok) {
|
||||
chip.dataset.disabled = 'false';
|
||||
chip.style.pointerEvents = '';
|
||||
if (tagActionFeedback) {
|
||||
tagActionFeedback.textContent = `Couldn't accept: ${j.error || 'error'}`;
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (typeof loadTags === 'function') await loadTags(imageId);
|
||||
if (tagActionFeedback) tagActionFeedback.textContent = `Added ${j.tag.name}`;
|
||||
if (typeof window.refreshItemTags === 'function') window.refreshItemTags(imageId);
|
||||
animateChipOut(chip);
|
||||
} catch {
|
||||
chip.dataset.disabled = 'false';
|
||||
chip.style.pointerEvents = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function rejectSuggestion(chip, imageId) {
|
||||
chip.style.pointerEvents = 'none';
|
||||
try {
|
||||
await fetch(`/image/${imageId}/suggestions/reject`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
tag_name: chip.dataset.tagName,
|
||||
source: chip.dataset.source,
|
||||
confidence: Number(chip.dataset.confidence) || 0,
|
||||
}),
|
||||
});
|
||||
animateChipOut(chip);
|
||||
if (tagActionFeedback) tagActionFeedback.textContent = `Rejected ${chip.dataset.tagName}`;
|
||||
} catch {
|
||||
chip.style.pointerEvents = '';
|
||||
}
|
||||
}
|
||||
|
||||
function renderProvenance(tags) {
|
||||
if (!provenanceSection || !provenanceList) return;
|
||||
provenanceList.innerHTML = '';
|
||||
if (!tags || tags.length === 0) {
|
||||
provenanceSection.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
tags.forEach(t => {
|
||||
const chip = document.createElement('a');
|
||||
chip.className = 'provenance-chip';
|
||||
chip.href = `/gallery?tag=${encodeURIComponent(t.name)}`;
|
||||
chip.title = t.name;
|
||||
chip.dataset.tagName = t.name;
|
||||
chip.dataset.kind = t.kind;
|
||||
const icon = getTagIcon(t.kind);
|
||||
const placeholder = escapeHtml(getProvenanceDisplayName(t.name, t.kind));
|
||||
chip.innerHTML = `${icon} <span class="provenance-label">${placeholder}</span> <span class="provenance-arrow">↗</span>`;
|
||||
provenanceList.appendChild(chip);
|
||||
if (t.kind === 'post') upgradeProvenanceChip(chip, t.name);
|
||||
});
|
||||
provenanceSection.style.display = '';
|
||||
}
|
||||
|
||||
async function upgradeProvenanceChip(chip, tagName) {
|
||||
try {
|
||||
const r = await fetch(`/api/post-metadata/by-tag-name/${encodeURIComponent(tagName)}`);
|
||||
const j = await r.json();
|
||||
if (!j.ok || !j.metadata) return;
|
||||
const pm = j.metadata;
|
||||
if (pm.platform) chip.dataset.platform = pm.platform;
|
||||
const label = pm.title || pm.post_id;
|
||||
if (label) {
|
||||
const labelEl = chip.querySelector('.provenance-label');
|
||||
if (labelEl) labelEl.textContent = label;
|
||||
}
|
||||
} catch {
|
||||
// Fetch failed — chip keeps its placeholder label and neutral accent.
|
||||
}
|
||||
}
|
||||
async function loadTags(imageId) {
|
||||
if (!imageId) { renderTags([]); return; }
|
||||
if (!imageId) { renderTags([]); renderProvenance([]); return; }
|
||||
try {
|
||||
const r = await fetch(`/image/${imageId}/tags`);
|
||||
const j = await r.json();
|
||||
if (j.ok) renderTags(j.tags);
|
||||
if (j.ok) {
|
||||
const all = j.tags || [];
|
||||
// Provenance: artist first, then post — non-editable, system-tagged origin info.
|
||||
const provenanceTags = [
|
||||
...all.filter(t => t.kind === 'artist'),
|
||||
...all.filter(t => t.kind === 'post'),
|
||||
];
|
||||
// Editable list excludes provenance kinds and hidden kinds (source, archive).
|
||||
const hiddenFromModal = new Set(['artist', 'post', 'source', 'archive']);
|
||||
const editableTags = all.filter(t => !hiddenFromModal.has(t.kind));
|
||||
renderTags(editableTags);
|
||||
renderProvenance(provenanceTags);
|
||||
loadSuggestions(imageId);
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
@@ -109,7 +317,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// Gallery item tag refresh (fallback if bulk-select.js not loaded)
|
||||
// ---------------------------
|
||||
async function refreshItemTagsFallback(imageId) {
|
||||
const item = document.querySelector(`.img-clickable[data-id="${imageId}"]`);
|
||||
// Only the gallery page renders tag overlays on thumbnails. Showcase thumbnails
|
||||
// use a tag-count badge instead and must not have .tag-overlay forced onto them.
|
||||
const item = document.querySelector(`.gallery-item[data-id="${imageId}"]`);
|
||||
if (!item) return;
|
||||
|
||||
try {
|
||||
@@ -601,15 +811,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
modal.classList.add('active');
|
||||
updateImage(index);
|
||||
history.replaceState({ modalIndex: index }, '', window.location.href);
|
||||
// Focus the tag input after modal opens (desktop only - avoids keyboard popup on mobile)
|
||||
if (tagInput && !isTouchDevice()) {
|
||||
setTimeout(() => tagInput.focus(), 100);
|
||||
}
|
||||
}
|
||||
|
||||
// Detect touch devices to avoid auto-focus keyboard popup
|
||||
function isTouchDevice() {
|
||||
return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
@@ -623,6 +824,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// clear tag UI
|
||||
setEditorImageId('');
|
||||
renderTags([]);
|
||||
renderProvenance([]);
|
||||
clearSuggestions();
|
||||
hideSeriesInfo();
|
||||
hideAddToSeries();
|
||||
history.replaceState({}, '', window.location.pathname + window.location.search);
|
||||
@@ -821,4 +1024,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
|
||||
if (suggestionsRefresh) {
|
||||
suggestionsRefresh.addEventListener('click', () => {
|
||||
const currentId = getEditorImageId();
|
||||
if (currentId) loadSuggestions(currentId);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user