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);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -840,6 +840,182 @@ header {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* Modal provenance section — system-generated, non-editable tags (artist, post) */
|
||||
.modal-provenance-section {
|
||||
border-bottom: none;
|
||||
}
|
||||
.modal-provenance-section .provenance-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.provenance-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 2px 8px 2px 10px;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
text-decoration: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-left-width: 2px;
|
||||
border-left-color: rgba(255, 255, 255, 0.4);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font: 12px/1.6 system-ui, sans-serif;
|
||||
max-width: clamp(8rem, 22vw, 14rem);
|
||||
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.provenance-chip:hover {
|
||||
border-color: rgba(255, 255, 255, 0.35);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.provenance-chip[data-platform="patreon"] {
|
||||
border-left-color: #f96854;
|
||||
}
|
||||
.provenance-chip[data-platform="subscribestar"] {
|
||||
border-left-color: #009cde;
|
||||
}
|
||||
.provenance-chip[data-platform="hentaifoundry"] {
|
||||
border-left-color: #c8232c;
|
||||
}
|
||||
|
||||
.provenance-chip .provenance-arrow {
|
||||
opacity: 0.6;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
/* Modal suggestions section — ML-backed chips with accept/reject */
|
||||
.modal-suggestions-section .section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.modal-suggestions-section .section-title {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.modal-suggestions-section .suggestions-refresh {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
.modal-suggestions-section .suggestions-refresh:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
.suggestions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.suggestions-category {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.suggestions-category-label {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.65;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.suggestions-chips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.suggestion-chip {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 6px;
|
||||
min-height: 36px;
|
||||
padding: 0;
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
color: var(--text-dim);
|
||||
border: 1px dashed rgba(255, 255, 255, 0.18);
|
||||
font: 13px/1.3 system-ui, sans-serif;
|
||||
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.18s ease;
|
||||
}
|
||||
.suggestion-chip:hover {
|
||||
border-color: rgba(255, 255, 255, 0.35);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text);
|
||||
}
|
||||
.suggestion-chip .sugg-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding: 0 2px;
|
||||
}
|
||||
.suggestion-chip .sugg-label {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.suggestion-chip .sugg-confidence {
|
||||
font-size: 0.72rem;
|
||||
opacity: 0.6;
|
||||
font-variant-numeric: tabular-nums;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.suggestion-chip .sugg-btn {
|
||||
flex: 0 0 auto;
|
||||
width: 32px;
|
||||
min-height: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1;
|
||||
margin: 1px;
|
||||
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
|
||||
}
|
||||
.suggestion-chip .sugg-btn.sugg-accept {
|
||||
color: #8be78b;
|
||||
border-color: rgba(139, 231, 139, 0.35);
|
||||
}
|
||||
.suggestion-chip .sugg-btn.sugg-accept:hover {
|
||||
background: rgba(139, 231, 139, 0.12);
|
||||
border-color: rgba(139, 231, 139, 0.6);
|
||||
}
|
||||
.suggestion-chip .sugg-btn.sugg-reject {
|
||||
color: #e78b8b;
|
||||
border-color: rgba(231, 139, 139, 0.35);
|
||||
}
|
||||
.suggestion-chip .sugg-btn.sugg-reject:hover {
|
||||
background: rgba(231, 139, 139, 0.12);
|
||||
border-color: rgba(231, 139, 139, 0.6);
|
||||
}
|
||||
.suggestion-chip.leaving {
|
||||
opacity: 0;
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
/* Tag form with autocomplete */
|
||||
.tag-form {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user