Public/automatic
1
0
Fork 0
mirror of https://github.com/vladmandic/automatic synced 2026-09-19 01:04:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

large js refactor

Browse Source
This commit is contained in:
Vladimir Mandic
2023-07-12 10:58:32 -04:00
parent c3a4293f22
commit de2c239c26
25 changed files with 538 additions and 568 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript/extraNetworks.js
+69 -69
View File
@@ -2,7 +2,30 @@ let globalPopup = null;
let globalPopupInner = null;
const activePromptTextarea = {};
const getENActiveTab = () => gradioApp().getElementById('tab_txt2img').style.display == 'block' ? 'txt2img' : 'img2img';
const getENActiveTab = () => gradioApp().getElementById('tab_txt2img').style.display === 'block' ? 'txt2img' : 'img2img';
function requestGet(url, data, handler, errorHandler) {
const xhr = new XMLHttpRequest();
const args = Object.keys(data).map((k) => `${encodeURIComponent(k)}=${encodeURIComponent(data[k])}`).join('&');
xhr.open('GET', `${url}?${args}`, true);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
try {
const js = JSON.parse(xhr.responseText);
handler(js);
} catch (error) {
console.error(error);
errorHandler();
}
} else {
errorHandler();
}
}
};
const js = JSON.stringify(data);
xhr.send(js);
}
function setupExtraNetworksForTab(tabname) {
gradioApp().querySelector(`#${tabname}_extra_tabs`).classList.add('extra-networks');
@@ -16,23 +39,23 @@ function setupExtraNetworksForTab(tabname) {
description.classList.add('description');
tabs.appendChild(refresh);
tabs.appendChild(close);
div = document.createElement('div');
const div = document.createElement('div');
div.classList.add('second-line');
tabs.appendChild(div);
div.appendChild(search);
div.appendChild(description);
search.addEventListener('input', (evt) => {
searchTerm = search.value.toLowerCase();
const searchTerm = search.value.toLowerCase();
gradioApp().querySelectorAll(`#${tabname}_extra_tabs div.card`).forEach((elem) => {
text = `${elem.querySelector('.name').textContent.toLowerCase()} ${elem.querySelector('.search_term').textContent.toLowerCase()}`;
text = text.replace('models--', 'Diffusers')
elem.style.display = text.indexOf(searchTerm) == -1 ? 'none' : '';
let text = `${elem.querySelector('.name').textContent.toLowerCase()} ${elem.querySelector('.search_term').textContent.toLowerCase()}`;
text = text.replace('models--', 'Diffusers');
elem.style.display = text.indexOf(searchTerm) === -1 ? 'none' : '';
});
});
intersectionObserver = new IntersectionObserver((entries) => {
if (!en) return
for (el of Array.from(gradioApp().querySelectorAll('.extra-networks-page'))) el.style.height = window.opts.extra_networks_height + 'vh';
const intersectionObserver = new IntersectionObserver((entries) => {
if (!en) return;
for (const el of Array.from(gradioApp().querySelectorAll('.extra-networks-page'))) el.style.height = `${window.opts.extra_networks_height}vh`;
if (entries[0].intersectionRatio > 0) {
if (window.opts.extra_networks_card_cover === 'cover') {
en.style.transition = '';
@@ -41,15 +64,15 @@ function setupExtraNetworksForTab(tabname) {
en.style.right = 'unset';
en.style.width = 'unset';
en.style.height = 'unset';
gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset'
gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset';
} else if (window.opts.extra_networks_card_cover === 'sidebar') {
en.style.transition = 'width 0.2s ease';
en.style.zIndex = 0;
en.style.position = 'absolute';
en.style.right = '0';
en.style.width = window.opts.extra_networks_sidebar_width + 'vw';
en.style.height = '-webkit-fill-available'
gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 100 - 2 - window.opts.extra_networks_sidebar_width + 'vw';
en.style.width = `${window.opts.extra_networks_sidebar_width}vw`;
en.style.height = '-webkit-fill-available';
gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = `${100 - 2 - window.opts.extra_networks_sidebar_width}vw`;
} else {
en.style.transition = '';
en.style.zIndex = 0;
@@ -57,20 +80,20 @@ function setupExtraNetworksForTab(tabname) {
en.style.right = 'unset';
en.style.width = 'unset';
en.style.height = 'unset';
gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset'
gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset';
}
} else {
en.style.width = 0;
gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset'
gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset';
}
});
intersectionObserver.observe(en); // monitor visibility of
intersectionObserver.observe(en); // monitor visibility of
}
function setupExtraNetworks() {
setupExtraNetworksForTab('txt2img');
setupExtraNetworksForTab('img2img');
function registerPrompt(tabname, id) {
const textarea = gradioApp().querySelector(`#${id} > label > textarea`);
if (!activePromptTextarea[tabname]) activePromptTextarea[tabname] = textarea;
@@ -90,27 +113,27 @@ const re_extranet = /<([^:]+:[^:]+):[\d\.]+>/;
const re_extranet_g = /\s+<([^:]+:[^:]+):[\d\.]+>/g;
function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
var m = text.match(re_extranet);
var replaced = false;
var newTextareaText;
let m = text.match(re_extranet);
let replaced = false;
let newTextareaText;
if (m) {
var partToSearch = m[1];
newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found) {
m = found.match(re_extranet);
if (m[1] == partToSearch) {
replaced = true;
return "";
}
return found;
});
const partToSearch = m[1];
newTextareaText = textarea.value.replaceAll(re_extranet_g, (found) => {
m = found.match(re_extranet);
if (m[1] === partToSearch) {
replaced = true;
return '';
}
return found;
});
} else {
newTextareaText = textarea.value.replaceAll(new RegExp(text, "g"), function(found) {
if (found == text) {
replaced = true;
return "";
}
return found;
});
newTextareaText = textarea.value.replaceAll(new RegExp(text, 'g'), (found) => {
if (found === text) {
replaced = true;
return '';
}
return found;
});
}
if (replaced) {
textarea.value = newTextareaText;
@@ -170,9 +193,9 @@ function readCardDescription(event, filename, descript, extraPage, cardName) {
function extraNetworksSearchButton(event) {
const tabname = getENActiveTab();
searchTextarea = gradioApp().querySelector(`#${tabname}_extra_tabs > div > div > textarea`);
button = event.target;
text = button.classList.contains('search-all') ? '' : `/${button.textContent.trim()}/`;
const searchTextarea = gradioApp().querySelector(`#${tabname}_extra_tabs > div > div > textarea`);
const button = event.target;
const text = button.classList.contains('search-all') ? '' : `/${button.textContent.trim()}/`;
searchTextarea.value = text;
updateInput(searchTextarea);
}
@@ -180,15 +203,15 @@ function extraNetworksSearchButton(event) {
function popup(contents) {
if (!globalPopup) {
globalPopup = document.createElement('div');
globalPopup.onclick = function () { globalPopup.style.display = 'none'; };
globalPopup.onclick = () => { globalPopup.style.display = 'none'; };
globalPopup.classList.add('global-popup');
const close = document.createElement('div');
close.classList.add('global-popup-close');
close.onclick = function () { globalPopup.style.display = 'none'; };
close.onclick = () => { globalPopup.style.display = 'none'; };
close.title = 'Close';
globalPopup.appendChild(close);
globalPopupInner = document.createElement('div');
globalPopupInner.onclick = function (event) { event.stopPropagation(); return false; };
globalPopupInner.onclick = (event) => { event.stopPropagation(); return false; };
globalPopupInner.classList.add('global-popup-inner');
globalPopup.appendChild(globalPopupInner);
gradioApp().appendChild(globalPopup);
@@ -200,8 +223,8 @@ function popup(contents) {
function readCardMetadata(event, extraPage, cardName) {
requestGet('./sd_extra_networks/metadata', { page: extraPage, item: cardName }, (data) => {
if (data?.metadata && (typeof(data?.metadata) === 'string')) {
elem = document.createElement('pre');
if (data?.metadata && (typeof (data?.metadata) === 'string')) {
const elem = document.createElement('pre');
elem.classList.add('popup-metadata');
elem.textContent = data.metadata;
popup(elem);
@@ -213,8 +236,8 @@ function readCardMetadata(event, extraPage, cardName) {
function readCardInformation(event, extraPage, cardName) {
requestGet('./sd_extra_networks/info', { page: extraPage, item: cardName }, (data) => {
if (data?.info && (typeof(data?.info) === 'string')) {
elem = document.createElement('pre');
if (data?.info && (typeof (data?.info) === 'string')) {
const elem = document.createElement('pre');
elem.classList.add('popup-metadata');
elem.textContent = data.info;
popup(elem);
@@ -223,26 +246,3 @@ function readCardInformation(event, extraPage, cardName) {
event.stopPropagation();
event.preventDefault();
}
function requestGet(url, data, handler, errorHandler) {
const xhr = new XMLHttpRequest();
const args = Object.keys(data).map((k) => `${encodeURIComponent(k)}=${encodeURIComponent(data[k])}`).join('&');
xhr.open('GET', `${url}?${args}`, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
try {
const js = JSON.parse(xhr.responseText);
handler(js);
} catch (error) {
console.error(error);
errorHandler();
}
} else {
errorHandler();
}
}
};
const js = JSON.stringify(data);
xhr.send(js);
}