/**
* ui_grid.js
* Extracted Grid methods.
*/
import { app } from "../../../scripts/app.js";
import { translate } from './locales.js';
import { focusModel, modelListUrl, renderBaseBar, renderModelTabs, renderTypeBar } from './ui_model_types.js';
import { countBases, inFamily } from './model_bases.js';
import { matchesModelQuery } from './ui_model_search.js';
import { renderSourceBadge } from './model_source.js';
import { renderModelSourcesView } from './ui_model_sources.js';
import { renderModelTidyView } from './ui_model_tidy.js';
import { recordCanvasStep } from './canvas_history.js';
const t = (key, params) => translate(key, params);
export function cardPreviewUrl(previewUrl, thumbnailMode) {
if (!previewUrl || thumbnailMode === 'original') return previewUrl;
return `${previewUrl}${previewUrl.includes('?') ? '&' : '?'}variant=card`;
}
/** A video cover's still first frame (made once on the server), shown until the video plays. */
export function cardPosterUrl(previewUrl) {
return `${previewUrl}${previewUrl.includes('?') ? '&' : '?'}variant=poster`;
}
// The first screen of cards loads first; the rest waits until scrolled near.
const EAGER_CARDS = 12;
function modelCardDisplayName(model) {
const metadata = model?.metadata || {};
return metadata.custom_name || model?.filename || '';
}
export async function loadModels() {
try {
if (this._modelLoadController) this._modelLoadController.abort();
this.modelSources?.controller?.abort();
this.modelTidy?.controller?.abort();
// Cards of an earlier load still being drawn in chunks stop here.
this._modelRenderGeneration = (this._modelRenderGeneration || 0) + 1;
if (this.modelView === 'tidy') { // the tabs, then what is in the wrong folder or twice
stopMediaInContainer(this.grid);
this.grid.replaceChildren(renderModelTabs(this));
renderModelTidyView(this, this.grid);
return;
}
if (this.modelView === 'sources') { // the tabs, then where each model is downloaded
stopMediaInContainer(this.grid);
this.grid.replaceChildren(renderModelTabs(this));
renderModelSourcesView(this, this.grid);
return;
}
const loadController = new AbortController();
this._modelLoadController = loadController;
const res = await fetch(modelListUrl(this), { signal: loadController.signal });
const data = await res.json();
if (this._modelLoadController !== loadController) return;
if (window.anomalous_update_hash_cache && data.models) {
window.anomalous_update_hash_cache(data.models);
}
this.models = data.models || [];
const renderGeneration = this._modelRenderGeneration;
if (this._modelMediaObserver) this._modelMediaObserver.disconnect();
this._modelMediaObserver = typeof IntersectionObserver === 'function'
? new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
const media = entry.target;
const shouldAutoplay = media.tagName === 'VIDEO' && media.dataset.anomalousAutoplay === 'true';
if (!entry.isIntersecting) {
if (media.tagName === 'VIDEO') {
media.pause();
if (media.getAttribute('src')) {
media.removeAttribute('src');
media.load();
}
}
return;
}
if (media.tagName === 'VIDEO' && !shouldAutoplay) return;
const pendingSrc = media.dataset.anomalousSrc;
if (pendingSrc && !media.getAttribute('src')) media.src = pendingSrc;
if (shouldAutoplay) media.play().catch(() => {});
});
}, { rootMargin: '300px' })
: null;
stopMediaInContainer(this.grid);
this.grid.replaceChildren(renderModelTabs(this), renderTypeBar(this, (data.models || []).length));
const query = this.modelQuery || '';
if (data.models?.length && query) data.models = data.models.filter(model => matchesModelQuery(model, query));
const bases = renderBaseBar(this, countBases(data.models));
if (bases) {
this.grid.appendChild(bases);
data.models = data.models.filter(model => inFamily(model, this.modelBase));
}
if (!data.models || data.models.length === 0) {
const empty = document.createElement('div');
empty.className = 'anomalous-grid-empty';
empty.textContent = query && this.models.length ? t('modelSearchNone', { query }) : t('noModels');
this.grid.appendChild(empty);
return;
}
let renderIndex = 0;
const renderChunk = () => {
if (this._modelRenderGeneration !== renderGeneration) return;
const fragment = document.createDocumentFragment();
const end = Math.min(renderIndex + 40, data.models.length);
for (; renderIndex < end; renderIndex++) {
const model = data.models[renderIndex];
const card = document.createElement('div');
card.className = 'anomalous-card';
if (model.preview_url) {
const isVideo = model.preview_url.match(/\.mp4(?:&|$)/i) || model.preview_url.match(/\.webm(?:&|$)/i);
if (isVideo) {
const video = document.createElement('video');
video.dataset.anomalousSrc = model.preview_url;
video.muted = true; video.loop = true; video.playsInline = true;
// Nothing of the video is fetched until it plays; the poster shows meanwhile.
video.preload = 'none';
video.poster = cardPosterUrl(model.preview_url);
const ensureVideoSource = () => {
if (!video.getAttribute('src')) video.src = video.dataset.anomalousSrc;
};
if (this.energySaving) {
video.pause();
card.addEventListener('mouseenter', () => {
ensureVideoSource();
video.play().catch(() => {});
});
card.addEventListener('mouseleave', () => { video.pause(); video.currentTime = 0; });
} else {
video.dataset.anomalousAutoplay = 'true';
}
if (this._modelMediaObserver) {
this._modelMediaObserver.observe(video);
} else {
ensureVideoSource();
if (!this.energySaving) video.autoplay = true;
}
card.appendChild(video);
} else {
const img = document.createElement('img');
const early = renderIndex < EAGER_CARDS;
img.loading = early ? 'eager' : 'lazy';
if (early) img.fetchPriority = 'high';
img.decoding = 'async';
img.className = 'anomalous-skeleton-shimmer';
img.onload = () => { img.classList.remove('anomalous-skeleton-shimmer'); };
img.onerror = () => { img.classList.remove('anomalous-skeleton-shimmer'); };
img.src = cardPreviewUrl(model.preview_url, this.cardThumbnailMode);
card.appendChild(img);
}
} else {
const ph = document.createElement('div');
ph.className = 'anomalous-card-placeholder';
ph.style.display = 'flex';
ph.style.flexDirection = 'column';
ph.style.alignItems = 'center';
ph.style.justifyContent = 'center';
ph.style.height = '100%';
ph.style.minHeight = '180px';
ph.style.color = 'var(--amb-lt-muted, #888)';
ph.style.userSelect = 'none';
ph.innerHTML = `
${t('noPreview')}
`;
card.appendChild(ph);
}
const badge = renderSourceBadge(model);
if (badge) card.appendChild(badge);
const labels = document.createElement('div');
labels.className = 'anomalous-card-labels';
// Civitai's version name: versions of one model often share a file name.
if (model.metadata?.version_name) {
const version = document.createElement('span');
version.className = 'anomalous-card-version';
version.textContent = model.metadata.version_name;
labels.appendChild(version);
}
const title = document.createElement('div');
title.className = 'anomalous-card-title';
title.textContent = modelCardDisplayName(model);
labels.appendChild(title);
const physicalName = document.createElement('div');
physicalName.className = 'anomalous-card-filename';
physicalName.textContent = model.filename;
physicalName.removeAttribute('title');
labels.appendChild(physicalName);
card.appendChild(labels);
card.onclick = () => {
this.recipeModelReturn = null;
focusModel(this, model);
this.historyStack = [];
this.currentDetailModel = model;
this.showDetail(model);
};
const applyBtn = document.createElement('button');
applyBtn.type = 'button';
applyBtn.innerHTML = ``;
applyBtn.className = 'anomalous-card-action-btn action-apply anomalous-tooltip-target';
applyBtn.removeAttribute('title');
applyBtn.setAttribute('data-tooltip', window.anomalous_browser_lang === 'zh' ? '一键发布到画布' : 'Add Node to Canvas');
applyBtn.setAttribute('data-tooltip-pos', 'bottom');
applyBtn.onclick = (e) => {
e.stopPropagation();
focusModel(this, model);
this.applyModelToCanvas(this.currentType, this.currentSubfolder, model);
};
card.appendChild(applyBtn);
const editBtn = document.createElement('button');
editBtn.type = 'button';
editBtn.innerHTML = ``;
editBtn.className = 'anomalous-card-action-btn action-edit anomalous-tooltip-target';
editBtn.removeAttribute('title');
editBtn.setAttribute('data-tooltip', window.anomalous_browser_lang === 'zh' ? '编辑模型信息' : 'Edit Model Info');
editBtn.setAttribute('data-tooltip-pos', 'bottom');
editBtn.onclick = (e) => {
e.stopPropagation();
focusModel(this, model);
this.showEditModal(model);
};
card.appendChild(editBtn);
const singleScanBtn = document.createElement('button');
singleScanBtn.type = 'button';
singleScanBtn.innerHTML = ``;
singleScanBtn.className = 'anomalous-card-action-btn action-scan anomalous-tooltip-target';
singleScanBtn.removeAttribute('title');
singleScanBtn.setAttribute('data-tooltip', window.anomalous_browser_lang === 'zh' ? '立即精准扫描此模型' : 'Scan Model Directly');
singleScanBtn.setAttribute('data-tooltip-pos', 'bottom');
singleScanBtn.onclick = (e) => {
e.stopPropagation();
focusModel(this, model);
this.scanSingleModel(model, singleScanBtn);
};
card.appendChild(singleScanBtn);
fragment.appendChild(card);
}
this.grid.appendChild(fragment);
if (renderIndex < data.models.length) requestAnimationFrame(renderChunk);
};
requestAnimationFrame(renderChunk);
} catch (e) {
if (e && e.name !== 'AbortError') console.error('[Anomalous] Failed to load models', e);
}
}
export function applyModelToCanvas(type, subfolder, model) {
const nodeTypeMap = {
'checkpoints': 'CheckpointLoaderSimple',
'loras': 'LoraLoader',
'unet': 'UNETLoader',
'diffusion_models': 'UNETLoader',
'vae': 'VAELoader',
'clip': 'CLIPLoader',
'controlnet': 'ControlNetLoader'
};
const nodeType = nodeTypeMap[type];
if (!nodeType) {
alert(window.anomalous_browser_lang === 'zh' ? '当前类型暂不支持自动发布到画布' : 'Unsupported auto apply for this type');
return;
}
const node = LiteGraph.createNode(nodeType);
if (!node) {
alert((window.anomalous_browser_lang === 'zh' ? '创建节点失败: ' : 'Failed to create node: ') + nodeType);
return;
}
if (app.canvas && app.canvas.graph_mouse) {
node.pos = [
app.canvas.graph_mouse[0] || (window.innerWidth / 2),
app.canvas.graph_mouse[1] || (window.innerHeight / 2)
];
} else {
node.pos = [window.innerWidth / 2, window.innerHeight / 2];
}
app.graph.add(node);
const sub = (subfolder || '').replace(/^\/+/, '').replace(/\/+$/, '');
const relPath = sub ? `${sub}/${model.filename}` : model.filename;
this.setWidgetValuePath(node, relPath);
recordCanvasStep(app);
const isDocked = this.container?.classList.contains('anomalous-docked');
if (!isDocked) {
this.close();
}
// 粘到鼠标上的逻辑
let isSticking = true;
const stickHandler = (e) => {
if (!isSticking || !app.canvas) return;
const canvas = app.canvas;
// LiteGraph内置了坐标转换，它会完美处理缩放和偏移带来的坐标偏移问题
let canvasX, canvasY;
if (canvas.convertEventToCanvasOffset) {
const pos = canvas.convertEventToCanvasOffset(e);
canvasX = pos[0];
canvasY = pos[1];
} else {
// 如果API不可用，使用标准降级计算
const rect = canvas.canvas.getBoundingClientRect();
canvasX = (e.clientX - rect.left - canvas.ds.offset[0]) / canvas.ds.scale;
canvasY = (e.clientY - rect.top - canvas.ds.offset[1]) / canvas.ds.scale;
}
const w = (node.size && node.size[0]) ? node.size[0] : 200;
node.pos = [canvasX - w / 2, canvasY - 20];
canvas.setDirty(true, true);
};
const dropHandler = (e) => {
if (!isSticking) return;
isSticking = false;
window.removeEventListener('mousemove', stickHandler, true);
window.removeEventListener('pointerdown', dropHandler, true);
window.removeEventListener('mousedown', dropHandler, true);
window.removeEventListener('click', dropHandler, true);
e.preventDefault();
e.stopPropagation();
};
window.addEventListener('mousemove', stickHandler, true);
setTimeout(() => {
window.addEventListener('pointerdown', dropHandler, true);
window.addEventListener('mousedown', dropHandler, true);
window.addEventListener('click', dropHandler, true);
}, 100);
}
export function stopMediaInContainer(container) {
if (!container) return;
const mediaElements = container.querySelectorAll('video, audio');
mediaElements.forEach(media => {
media.pause();
media.removeAttribute('src');
media.load();
});
}