sd-civitai-browser-plus/javascript/civitai-html.js

125 lines
4.2 KiB
JavaScript

"use strict";
function select_model(model_name) {
let model_dropdown = gradioApp().querySelector('#eventtext1 textarea');
if (model_dropdown && model_name) {
let randomNumber = Math.floor(Math.random() * 1000);
let paddedNumber = String(randomNumber).padStart(3, '0');
model_dropdown.value = model_name + "." + paddedNumber;
updateInput(model_dropdown)
}
}
function updateCardSize(width, height) {
var styleSheet = document.styleSheets[0];
var imgKeyframes = `width: ${width}em !important; height: ${height}em !important;`;
var fontSize = (width / 8) * 100;
var textKeyframes = `font-size: ${fontSize}% !important;`;
addOrUpdateRule(styleSheet, '.civmodelcard img', imgKeyframes);
addOrUpdateRule(styleSheet, '.civmodelcard figcaption', textKeyframes);
}
function toggleNSFWContent(hideAndBlur) {
const sheet = document.styleSheets[0];
if (!hideAndBlur) {
addOrUpdateRule(sheet, '.civcardnsfw', 'display: none;');
addOrUpdateRule(sheet, '.civnsfw img', 'filter: blur(10px);');
}
else {
addOrUpdateRule(sheet, '.civcardnsfw', 'display: block;');
addOrUpdateRule(sheet, '.civnsfw img', 'filter: none;');
}
const dateSections = document.querySelectorAll('.date-section');
dateSections.forEach((section) => {
const cards = section.querySelectorAll('.civmodelcard');
const nsfwCards = section.querySelectorAll('.civmodelcard.civcardnsfw');
if (!hideAndBlur && cards.length === nsfwCards.length) {
section.style.display = 'none';
} else {
section.style.display = 'block';
}
});
}
function addOrUpdateRule(styleSheet, selector, newRules) {
for (let i = 0; i < styleSheet.cssRules.length; i++) {
let rule = styleSheet.cssRules[i];
if (rule.selectorText === selector) {
rule.style.cssText = newRules;
return;
}
}
styleSheet.insertRule(`${selector} { ${newRules} }`, styleSheet.cssRules.length);
}
function filterByBaseModel(selectedBaseModels) {
if (!selectedBaseModels || selectedBaseModels.length === 0) {
document.querySelectorAll('.civmodelcard').forEach(card => {
card.style.opacity = '1';
});
return;
}
if (!Array.isArray(selectedBaseModels)) {
selectedBaseModels = [selectedBaseModels];
}
document.querySelectorAll('.civmodelcard').forEach(card => {
const cardBaseModel = card.getAttribute('base-model');
let shouldDisplay = false;
for (let i = 0; i < selectedBaseModels.length; i++) {
if (cardBaseModel === selectedBaseModels[i]) {
shouldDisplay = true;
break;
}
if (selectedBaseModels[i] === "SD 2.0" && (cardBaseModel === "SD 2.0" || cardBaseModel === "SD 2.0 768")) {
shouldDisplay = true;
break;
}
if (selectedBaseModels[i] === "SD 2.1" && ["SD 2.1", "SD 2.1 768", "SD 2.1 Unclip"].includes(cardBaseModel)) {
shouldDisplay = true;
break;
}
}
card.style.opacity = shouldDisplay ? '1' : '0.1';
});
}
function updateCard(modelNameWithSuffix) {
const [modelName, suffix] = modelNameWithSuffix.split('.');
let additionalClassName = '';
switch(suffix) {
case 'None':
additionalClassName = '';
break;
case 'Old':
additionalClassName = 'civmodelcardoutdated';
break;
case 'New':
additionalClassName = 'civmodelcardinstalled';
break;
default:
console.error('Unknown suffix', suffix);
return;
}
const parentDiv = document.querySelector('.civmodellist');
if (parentDiv) {
const cards = parentDiv.querySelectorAll('.civmodelcard');
cards.forEach((card) => {
const onclickAttr = card.getAttribute('onclick');
if (onclickAttr && onclickAttr.includes(`select_model('${modelName}')`)) {
card.className = `civmodelcard ${additionalClassName}`;
}
});
}
}