ip adapter masking

This commit is contained in:
Vladimir Mandic
2024-04-18 12:43:51 -04:00
parent 77909a103a
commit f2610c3936
12 changed files with 84 additions and 31 deletions
+23 -18
View File
@@ -1,5 +1,5 @@
const activePromptTextarea = {};
let sortVal = 0;
let sortVal = -1;
// helpers
@@ -224,33 +224,35 @@ function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
return false;
}
function sortExtraNetworks() {
const sortDesc = ['Name [A-Z]', 'Name [Z-A]', 'Date [Newest]', 'Date [Oldest]', 'Size [Largest]', 'Size [Smallest]'];
function sortExtraNetworks(fixed = 'no') {
const sortDesc = ['Default', 'Name [A-Z]', 'Name [Z-A]', 'Date [Newest]', 'Date [Oldest]', 'Size [Largest]', 'Size [Smallest]'];
const pagename = getENActivePage();
if (!pagename) return 'sort error: unknown page';
const allPages = Array.from(gradioApp().querySelectorAll('.extra-network-cards'));
const pages = allPages.filter((el) => el.id.toLowerCase().includes(pagename.toLowerCase()));
let num = 0;
if (sortVal === -1) sortVal = sortDesc.indexOf(opts.extra_networks_sort);
if (fixed !== 'fixed') sortVal = (sortVal + 1) % sortDesc.length;
for (const pg of pages) {
const cards = Array.from(pg.querySelectorAll('.card') || []);
num = cards.length;
if (num === 0) return 'sort: no cards';
cards.sort((a, b) => { // eslint-disable-line no-loop-func
switch (sortVal) {
case 0: return a.dataset.name ? a.dataset.name.localeCompare(b.dataset.name) : 0;
case 1: return b.dataset.name ? b.dataset.name.localeCompare(a.dataset.name) : 0;
case 2: return a.dataset.mtime && !isNaN(a.dataset.mtime) ? parseFloat(b.dataset.mtime) - parseFloat(a.dataset.mtime) : 0;
case 3: return b.dataset.mtime && !isNaN(b.dataset.mtime) ? parseFloat(a.dataset.mtime) - parseFloat(b.dataset.mtime) : 0;
case 4: return a.dataset.size && !isNaN(a.dataset.size) ? parseFloat(b.dataset.size) - parseFloat(a.dataset.size) : 0;
case 5: return b.dataset.size && !isNaN(b.dataset.size) ? parseFloat(a.dataset.size) - parseFloat(b.dataset.size) : 0;
case 0: return 0;
case 1: return a.dataset.name ? a.dataset.name.localeCompare(b.dataset.name) : 0;
case 2: return b.dataset.name ? b.dataset.name.localeCompare(a.dataset.name) : 0;
case 3: return a.dataset.mtime && !isNaN(a.dataset.mtime) ? parseFloat(b.dataset.mtime) - parseFloat(a.dataset.mtime) : 0;
case 4: return b.dataset.mtime && !isNaN(b.dataset.mtime) ? parseFloat(a.dataset.mtime) - parseFloat(b.dataset.mtime) : 0;
case 5: return a.dataset.size && !isNaN(a.dataset.size) ? parseFloat(b.dataset.size) - parseFloat(a.dataset.size) : 0;
case 6: return b.dataset.size && !isNaN(b.dataset.size) ? parseFloat(a.dataset.size) - parseFloat(b.dataset.size) : 0;
}
return 0;
});
for (const card of cards) pg.appendChild(card);
}
const desc = sortDesc[sortVal];
sortVal = (sortVal + 1) % sortDesc.length;
log('sortExtraNetworks', pagename, num, desc);
log('sortExtraNetworks', { name: pagename, val: sortVal, order: desc, fixed: fixed === 'fixed', items: num });
return `sort page ${pagename} cards ${num} by ${desc}`;
}
@@ -271,12 +273,8 @@ function extraNetworksSearchButton(event) {
const tabname = getENActiveTab();
const searchTextarea = gradioApp().querySelector(`#${tabname}_extra_search textarea`);
const button = event.target;
if (button.classList.contains('search-all')) {
searchTextarea.value = '';
} else {
searchTextarea.value = `${button.textContent.trim()}/`;
}
if (button.classList.contains('search-all')) searchTextarea.value = '';
else searchTextarea.value = `${button.textContent.trim()}/`;
updateInput(searchTextarea);
}
@@ -307,6 +305,11 @@ function quickSaveStyle() {
const tabname = getENActiveTab();
const btnSave = gradioApp().getElementById(`${tabname}_extra_quicksave`);
if (btnSave) btnSave.click();
const btnRefresh = gradioApp().getElementById(`${tabname}_extra_refresh`);
if (btnRefresh) {
setTimeout(() => btnRefresh.click(), 100);
setTimeout(() => sortExtraNetworks('fixed'), 500);
}
}
let enDirty = false;
@@ -368,6 +371,7 @@ function setupExtraNetworksForTab(tabname) {
if (btnView) buttons.appendChild(btnView);
if (btnClose) buttons.appendChild(btnClose);
btnModel.onclick = () => btnModel.classList.toggle('toolbutton-selected');
btnRefresh.onclick = () => sortExtraNetworks('fixed');
tabs.appendChild(buttons);
// details
@@ -426,6 +430,7 @@ function setupExtraNetworksForTab(tabname) {
}
if (entries[0].intersectionRatio > 0) {
refreshENpage();
sortExtraNetworks('fixed');
if (window.opts.extra_networks_card_cover === 'cover') {
en.style.transition = '';
en.style.zIndex = 100;
@@ -459,7 +464,7 @@ function setupExtraNetworksForTab(tabname) {
gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset';
}
});
intersectionObserver.observe(en); // monitor visibility of
intersectionObserver.observe(en); // monitor visibility
}
async function setupExtraNetworks() {
+1 -1
View File
@@ -213,7 +213,7 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
.extra-network-cards { display: flex; flex-wrap: wrap; overflow-y: auto; overflow-x: hidden; align-content: flex-start; width: -moz-available; width: -webkit-fill-available; }
.extra-network-cards .card { height: fit-content; margin: 0 0 0.5em 0.5em; position: relative; scroll-snap-align: start; scroll-margin-top: 0; }
.extra-network-cards .card .overlay { z-index: 10; width: 100%; background: none; }
.extra-network-cards .card .overlay .name { font-size: var(--text-lg); font-weight: bold; text-shadow: 1px 1px black; color: white; overflow-wrap: break-word; position: absolute; bottom: 0; padding: 0.2em; z-index: 10; }
.extra-network-cards .card .overlay .name { font-size: var(--text-lg); font-weight: bold; text-shadow: 1px 1px black; color: white; overflow-wrap: anywhere; position: absolute; bottom: 0; padding: 0.2em; z-index: 10; }
.extra-network-cards .card .preview { box-shadow: var(--button-shadow); min-height: 30px; }
.extra-network-cards .card:hover .overlay { background: rgba(0, 0, 0, 0.70); }
.extra-network-cards .card:hover .preview { box-shadow: none; filter: grayscale(100%); }