StableDiffusion/WebUI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'eslint' into dev

Browse Source
This commit is contained in:
AUTOMATIC 2023-05-18 10:02:17 +03:00
commit c08f229318
26 changed files with 1636 additions and 1513 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintignore Normal file
View File

@ -0,0 +1,4 @@
extensions
extensions-disabled
repositories
venv

89
.eslintrc.js Normal file
View File

@ -0,0 +1,89 @@
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: "eslint:recommended",
parserOptions: {
ecmaVersion: "latest",
},
rules: {
"arrow-spacing": "error",
"block-spacing": "error",
"brace-style": "error",
"comma-dangle": ["error", "only-multiline"],
"comma-spacing": "error",
"comma-style": ["error", "last"],
"curly": ["error", "multi-line", "consistent"],
"eol-last": "error",
"func-call-spacing": "error",
"function-call-argument-newline": ["error", "consistent"],
"function-paren-newline": ["error", "consistent"],
"indent": ["error", 4],
"key-spacing": "error",
"keyword-spacing": "error",
"linebreak-style": ["error", "unix"],
"no-extra-semi": "error",
"no-mixed-spaces-and-tabs": "error",
"no-trailing-spaces": "error",
"no-whitespace-before-property": "error",
"object-curly-newline": ["error", {consistent: true, multiline: true}],
"quote-props": ["error", "consistent-as-needed"],
"semi": ["error", "always"],
"semi-spacing": "error",
"semi-style": ["error", "last"],
"space-before-blocks": "error",
"space-before-function-paren": ["error", "never"],
"space-in-parens": ["error", "never"],
"space-infix-ops": "error",
"space-unary-ops": "error",
"switch-colon-spacing": "error",
"template-curly-spacing": ["error", "never"],
"unicode-bom": "error",
"no-multi-spaces": "error",
"object-curly-spacing": ["error", "never"],
"operator-linebreak": ["error", "after"],
"no-unused-vars": "off",
"no-redeclare": "off",
},
globals: {
// this file
module: "writable",
//script.js
gradioApp: "writable",
onUiLoaded: "writable",
onUiUpdate: "writable",
onOptionsChanged: "writable",
uiCurrentTab: "writable",
uiElementIsVisible: "writable",
executeCallbacks: "writable",
//ui.js
opts: "writable",
all_gallery_buttons: "writable",
selected_gallery_button: "writable",
selected_gallery_index: "writable",
args_to_array: "writable",
switch_to_txt2img: "writable",
switch_to_img2img_tab: "writable",
switch_to_img2img: "writable",
switch_to_sketch: "writable",
switch_to_inpaint: "writable",
switch_to_inpaint_sketch: "writable",
switch_to_extras: "writable",
get_tab_index: "writable",
create_submit_args: "writable",
restart_reload: "writable",
updateInput: "writable",
//extraNetworks.js
requestGet: "writable",
popup: "writable",
// from python
localization: "writable",
// progrssbar.js
randomId: "writable",
requestProgress: "writable",
// imageviewer.js
modalPrevImage: "writable",
modalNextImage: "writable",
}
};

36
.github/workflows/on_pull_request.yaml vendored
View File

@ -1,19 +1,11 @@
# See https://github.com/actions/starter-workflows/blob/1067f16ad8a1eac328834e4b0ae24f7d206f810d/ci/pylint.yml for original reference file
name: Run Linting/Formatting on Pull Requests name: Run Linting/Formatting on Pull Requests
on: on:
- push - push
- pull_request - pull_request
# See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#onpull_requestpull_request_targetbranchesbranches-ignore for syntax docs
# if you want to filter out branches, delete the `- pull_request` and uncomment these lines :
# pull_request:
# branches:
# - master
# branches-ignore:
# - development
jobs: jobs:
lint: lint-python:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Checkout Code - name: Checkout Code
@ -29,18 +21,14 @@ jobs:
run: pip install ruff==0.0.265 run: pip install ruff==0.0.265
- name: Run Ruff - name: Run Ruff
run: ruff . run: ruff .
lint-js:
# The rest are currently disabled pending fixing of e.g. installing the torch dependency. runs-on: ubuntu-latest
steps:
# - name: Install PyLint - name: Checkout Code
# run: | uses: actions/checkout@v3
# python -m pip install --upgrade pip - name: Install Node.js
# pip install pylint uses: actions/setup-node@v3
# # This lets PyLint check to see if it can resolve imports with:
# - name: Install dependencies node-version: 18
# run: | - run: npm i --ci
# export COMMANDLINE_ARGS="--skip-torch-cuda-test --exit" - run: npm run lint
# python launch.py
# - name: Analysing the code with pylint
# run: |
# pylint $(git ls-files '*.py')

2
.gitignore vendored
View File

@ -34,3 +34,5 @@ notification.mp3
/test/stderr.txt /test/stderr.txt
/cache.json* /cache.json*
/config_states/ /config_states/
/node_modules
/package-lock.json

52
extensions-builtin/prompt-bracket-checker/javascript/prompt-bracket-checker.js
View File

@ -4,39 +4,39 @@
// If there's a mismatch, the keyword counter turns red and if you hover on it, a tooltip tells you what's wrong. // If there's a mismatch, the keyword counter turns red and if you hover on it, a tooltip tells you what's wrong.
function checkBrackets(textArea, counterElt) { function checkBrackets(textArea, counterElt) {
var counts = {}; var counts = {};
(textArea.value.match(/[(){}\[\]]/g) || []).forEach(bracket => { (textArea.value.match(/[(){}[\]]/g) || []).forEach(bracket => {
counts[bracket] = (counts[bracket] || 0) + 1; counts[bracket] = (counts[bracket] || 0) + 1;
}); });
var errors = []; var errors = [];
function checkPair(open, close, kind) { function checkPair(open, close, kind) {
if (counts[open] !== counts[close]) { if (counts[open] !== counts[close]) {
errors.push( errors.push(
`${open}...${close} - Detected ${counts[open] || 0} opening and ${counts[close] || 0} closing ${kind}.` `${open}...${close} - Detected ${counts[open] || 0} opening and ${counts[close] || 0} closing ${kind}.`
); );
}
} }
}
checkPair('(', ')', 'round brackets'); checkPair('(', ')', 'round brackets');
checkPair('[', ']', 'square brackets'); checkPair('[', ']', 'square brackets');
checkPair('{', '}', 'curly brackets'); checkPair('{', '}', 'curly brackets');
counterElt.title = errors.join('\n'); counterElt.title = errors.join('\n');
counterElt.classList.toggle('error', errors.length !== 0); counterElt.classList.toggle('error', errors.length !== 0);
} }
function setupBracketChecking(id_prompt, id_counter) { function setupBracketChecking(id_prompt, id_counter) {
var textarea = gradioApp().querySelector("#" + id_prompt + " > label > textarea"); var textarea = gradioApp().querySelector("#" + id_prompt + " > label > textarea");
var counter = gradioApp().getElementById(id_counter) var counter = gradioApp().getElementById(id_counter);
if (textarea && counter) { if (textarea && counter) {
textarea.addEventListener("input", () => checkBrackets(textarea, counter)); textarea.addEventListener("input", () => checkBrackets(textarea, counter));
} }
} }
onUiLoaded(function () { onUiLoaded(function() {
setupBracketChecking('txt2img_prompt', 'txt2img_token_counter'); setupBracketChecking('txt2img_prompt', 'txt2img_token_counter');
setupBracketChecking('txt2img_neg_prompt', 'txt2img_negative_token_counter'); setupBracketChecking('txt2img_neg_prompt', 'txt2img_negative_token_counter');
setupBracketChecking('img2img_prompt', 'img2img_token_counter'); setupBracketChecking('img2img_prompt', 'img2img_token_counter');
setupBracketChecking('img2img_neg_prompt', 'img2img_negative_token_counter'); setupBracketChecking('img2img_neg_prompt', 'img2img_negative_token_counter');
}); });

224
javascript/aspectRatioOverlay.js
View File

@ -1,111 +1,113 @@
let currentWidth = null; let currentWidth = null;
let currentHeight = null; let currentHeight = null;
let arFrameTimeout = setTimeout(function(){},0); let arFrameTimeout = setTimeout(function() {}, 0);
function dimensionChange(e, is_width, is_height){ function dimensionChange(e, is_width, is_height) {
if(is_width){ if (is_width) {
currentWidth = e.target.value*1.0 currentWidth = e.target.value * 1.0;
} }
if(is_height){ if (is_height) {
currentHeight = e.target.value*1.0 currentHeight = e.target.value * 1.0;
} }
var inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block"; var inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block";
if(!inImg2img){ if (!inImg2img) {
return; return;
} }
var targetElement = null; var targetElement = null;
var tabIndex = get_tab_index('mode_img2img') var tabIndex = get_tab_index('mode_img2img');
if(tabIndex == 0){ // img2img if (tabIndex == 0) { // img2img
targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] img'); targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] img');
} else if(tabIndex == 1){ //Sketch } else if (tabIndex == 1) { //Sketch
targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img'); targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img');
} else if(tabIndex == 2){ // Inpaint } else if (tabIndex == 2) { // Inpaint
targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img'); targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');
} else if(tabIndex == 3){ // Inpaint sketch } else if (tabIndex == 3) { // Inpaint sketch
targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img'); targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');
} }
if(targetElement){ if (targetElement) {
var arPreviewRect = gradioApp().querySelector('#imageARPreview'); var arPreviewRect = gradioApp().querySelector('#imageARPreview');
if(!arPreviewRect){ if (!arPreviewRect) {
arPreviewRect = document.createElement('div') arPreviewRect = document.createElement('div');
arPreviewRect.id = "imageARPreview"; arPreviewRect.id = "imageARPreview";
gradioApp().appendChild(arPreviewRect) gradioApp().appendChild(arPreviewRect);
} }
var viewportOffset = targetElement.getBoundingClientRect(); var viewportOffset = targetElement.getBoundingClientRect();
var viewportscale = Math.min( targetElement.clientWidth/targetElement.naturalWidth, targetElement.clientHeight/targetElement.naturalHeight ) var viewportscale = Math.min(targetElement.clientWidth / targetElement.naturalWidth, targetElement.clientHeight / targetElement.naturalHeight);
var scaledx = targetElement.naturalWidth*viewportscale var scaledx = targetElement.naturalWidth * viewportscale;
var scaledy = targetElement.naturalHeight*viewportscale var scaledy = targetElement.naturalHeight * viewportscale;
var cleintRectTop = (viewportOffset.top+window.scrollY) var cleintRectTop = (viewportOffset.top + window.scrollY);
var cleintRectLeft = (viewportOffset.left+window.scrollX) var cleintRectLeft = (viewportOffset.left + window.scrollX);
var cleintRectCentreY = cleintRectTop + (targetElement.clientHeight/2) var cleintRectCentreY = cleintRectTop + (targetElement.clientHeight / 2);
var cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth/2) var cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth / 2);
var arscale = Math.min( scaledx/currentWidth, scaledy/currentHeight ) var arscale = Math.min(scaledx / currentWidth, scaledy / currentHeight);
var arscaledx = currentWidth*arscale var arscaledx = currentWidth * arscale;
var arscaledy = currentHeight*arscale var arscaledy = currentHeight * arscale;
var arRectTop = cleintRectCentreY-(arscaledy/2) var arRectTop = cleintRectCentreY - (arscaledy / 2);
var arRectLeft = cleintRectCentreX-(arscaledx/2) var arRectLeft = cleintRectCentreX - (arscaledx / 2);
var arRectWidth = arscaledx var arRectWidth = arscaledx;
var arRectHeight = arscaledy var arRectHeight = arscaledy;
arPreviewRect.style.top = arRectTop+'px'; arPreviewRect.style.top = arRectTop + 'px';
arPreviewRect.style.left = arRectLeft+'px'; arPreviewRect.style.left = arRectLeft + 'px';
arPreviewRect.style.width = arRectWidth+'px'; arPreviewRect.style.width = arRectWidth + 'px';
arPreviewRect.style.height = arRectHeight+'px'; arPreviewRect.style.height = arRectHeight + 'px';
clearTimeout(arFrameTimeout); clearTimeout(arFrameTimeout);
arFrameTimeout = setTimeout(function(){ arFrameTimeout = setTimeout(function() {
arPreviewRect.style.display = 'none'; arPreviewRect.style.display = 'none';
},2000); }, 2000);
arPreviewRect.style.display = 'block'; arPreviewRect.style.display = 'block';
} }
} }
onUiUpdate(function(){ onUiUpdate(function() {
var arPreviewRect = gradioApp().querySelector('#imageARPreview'); var arPreviewRect = gradioApp().querySelector('#imageARPreview');
if(arPreviewRect){ if (arPreviewRect) {
arPreviewRect.style.display = 'none'; arPreviewRect.style.display = 'none';
} }
var tabImg2img = gradioApp().querySelector("#tab_img2img"); var tabImg2img = gradioApp().querySelector("#tab_img2img");
if (tabImg2img) { if (tabImg2img) {
var inImg2img = tabImg2img.style.display == "block"; var inImg2img = tabImg2img.style.display == "block";
if(inImg2img){ if (inImg2img) {
let inputs = gradioApp().querySelectorAll('input'); let inputs = gradioApp().querySelectorAll('input');
inputs.forEach(function(e){ inputs.forEach(function(e) {
var is_width = e.parentElement.id == "img2img_width" var is_width = e.parentElement.id == "img2img_width";
var is_height = e.parentElement.id == "img2img_height" var is_height = e.parentElement.id == "img2img_height";
if((is_width || is_height) && !e.classList.contains('scrollwatch')){ if ((is_width || is_height) && !e.classList.contains('scrollwatch')) {
e.addEventListener('input', function(e){dimensionChange(e, is_width, is_height)} ) e.addEventListener('input', function(e) {
e.classList.add('scrollwatch') dimensionChange(e, is_width, is_height);
} });
if(is_width){ e.classList.add('scrollwatch');
currentWidth = e.value*1.0 }
} if (is_width) {
if(is_height){ currentWidth = e.value * 1.0;
currentHeight = e.value*1.0 }
} if (is_height) {
}) currentHeight = e.value * 1.0;
} }
} });
}); }
}
});

338
javascript/contextMenus.js
View File

@ -1,166 +1,172 @@
contextMenuInit = function(){ var contextMenuInit = function() {
let eventListenerApplied=false; let eventListenerApplied = false;
let menuSpecs = new Map(); let menuSpecs = new Map();
const uid = function(){ const uid = function() {
return Date.now().toString(36) + Math.random().toString(36).substring(2); return Date.now().toString(36) + Math.random().toString(36).substring(2);
} };
function showContextMenu(event,element,menuEntries){ function showContextMenu(event, element, menuEntries) {
let posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; let posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
let posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; let posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
let oldMenu = gradioApp().querySelector('#context-menu') let oldMenu = gradioApp().querySelector('#context-menu');
if(oldMenu){ if (oldMenu) {
oldMenu.remove() oldMenu.remove();
} }
let baseStyle = window.getComputedStyle(uiCurrentTab) let baseStyle = window.getComputedStyle(uiCurrentTab);
const contextMenu = document.createElement('nav') const contextMenu = document.createElement('nav');
contextMenu.id = "context-menu" contextMenu.id = "context-menu";
contextMenu.style.background = baseStyle.background contextMenu.style.background = baseStyle.background;
contextMenu.style.color = baseStyle.color contextMenu.style.color = baseStyle.color;
contextMenu.style.fontFamily = baseStyle.fontFamily contextMenu.style.fontFamily = baseStyle.fontFamily;
contextMenu.style.top = posy+'px' contextMenu.style.top = posy + 'px';
contextMenu.style.left = posx+'px' contextMenu.style.left = posx + 'px';
const contextMenuList = document.createElement('ul') const contextMenuList = document.createElement('ul');
contextMenuList.className = 'context-menu-items'; contextMenuList.className = 'context-menu-items';
contextMenu.append(contextMenuList); contextMenu.append(contextMenuList);
menuEntries.forEach(function(entry){ menuEntries.forEach(function(entry) {
let contextMenuEntry = document.createElement('a') let contextMenuEntry = document.createElement('a');
contextMenuEntry.innerHTML = entry['name'] contextMenuEntry.innerHTML = entry['name'];
contextMenuEntry.addEventListener("click", function() { contextMenuEntry.addEventListener("click", function() {
entry['func'](); entry['func']();
}) });
contextMenuList.append(contextMenuEntry); contextMenuList.append(contextMenuEntry);
}) });
gradioApp().appendChild(contextMenu) gradioApp().appendChild(contextMenu);
let menuWidth = contextMenu.offsetWidth + 4; let menuWidth = contextMenu.offsetWidth + 4;
let menuHeight = contextMenu.offsetHeight + 4; let menuHeight = contextMenu.offsetHeight + 4;
let windowWidth = window.innerWidth; let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight; let windowHeight = window.innerHeight;
if ( (windowWidth - posx) < menuWidth ) { if ((windowWidth - posx) < menuWidth) {
contextMenu.style.left = windowWidth - menuWidth + "px"; contextMenu.style.left = windowWidth - menuWidth + "px";
} }
if ( (windowHeight - posy) < menuHeight ) { if ((windowHeight - posy) < menuHeight) {
contextMenu.style.top = windowHeight - menuHeight + "px"; contextMenu.style.top = windowHeight - menuHeight + "px";
} }
} }
function appendContextMenuOption(targetElementSelector,entryName,entryFunction){ function appendContextMenuOption(targetElementSelector, entryName, entryFunction) {
var currentItems = menuSpecs.get(targetElementSelector) var currentItems = menuSpecs.get(targetElementSelector);
if(!currentItems){ if (!currentItems) {
currentItems = [] currentItems = [];
menuSpecs.set(targetElementSelector,currentItems); menuSpecs.set(targetElementSelector, currentItems);
} }
let newItem = {'id':targetElementSelector+'_'+uid(), let newItem = {
'name':entryName, id: targetElementSelector + '_' + uid(),
'func':entryFunction, name: entryName,
'isNew':true} func: entryFunction,
isNew: true
currentItems.push(newItem) };
return newItem['id']
} currentItems.push(newItem);
return newItem['id'];
function removeContextMenuOption(uid){ }
menuSpecs.forEach(function(v) {
let index = -1 function removeContextMenuOption(uid) {
v.forEach(function(e,ei){if(e['id']==uid){index=ei}}) menuSpecs.forEach(function(v) {
if(index>=0){ let index = -1;
v.splice(index, 1); v.forEach(function(e, ei) {
} if (e['id'] == uid) {
}) index = ei;
} }
});
function addContextMenuEventListener(){ if (index >= 0) {
if(eventListenerApplied){ v.splice(index, 1);
return; }
} });
gradioApp().addEventListener("click", function(e) { }
if(! e.isTrusted){
return function addContextMenuEventListener() {
} if (eventListenerApplied) {
return;
let oldMenu = gradioApp().querySelector('#context-menu') }
if(oldMenu){ gradioApp().addEventListener("click", function(e) {
oldMenu.remove() if (!e.isTrusted) {
} return;
}); }
gradioApp().addEventListener("contextmenu", function(e) {
let oldMenu = gradioApp().querySelector('#context-menu') let oldMenu = gradioApp().querySelector('#context-menu');
if(oldMenu){ if (oldMenu) {
oldMenu.remove() oldMenu.remove();
} }
menuSpecs.forEach(function(v,k) { });
if(e.composedPath()[0].matches(k)){ gradioApp().addEventListener("contextmenu", function(e) {
showContextMenu(e,e.composedPath()[0],v) let oldMenu = gradioApp().querySelector('#context-menu');
e.preventDefault() if (oldMenu) {
} oldMenu.remove();
}) }
}); menuSpecs.forEach(function(v, k) {
eventListenerApplied=true if (e.composedPath()[0].matches(k)) {
showContextMenu(e, e.composedPath()[0], v);
} e.preventDefault();
}
return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener] });
} });
eventListenerApplied = true;
initResponse = contextMenuInit();
appendContextMenuOption = initResponse[0]; }
removeContextMenuOption = initResponse[1];
addContextMenuEventListener = initResponse[2]; return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener];
};
(function(){
//Start example Context Menu Items var initResponse = contextMenuInit();
let generateOnRepeat = function(genbuttonid,interruptbuttonid){ var appendContextMenuOption = initResponse[0];
let genbutton = gradioApp().querySelector(genbuttonid); var removeContextMenuOption = initResponse[1];
let interruptbutton = gradioApp().querySelector(interruptbuttonid); var addContextMenuEventListener = initResponse[2];
if(!interruptbutton.offsetParent){
genbutton.click(); (function() {
} //Start example Context Menu Items
clearInterval(window.generateOnRepeatInterval) let generateOnRepeat = function(genbuttonid, interruptbuttonid) {
window.generateOnRepeatInterval = setInterval(function(){ let genbutton = gradioApp().querySelector(genbuttonid);
if(!interruptbutton.offsetParent){ let interruptbutton = gradioApp().querySelector(interruptbuttonid);
genbutton.click(); if (!interruptbutton.offsetParent) {
} genbutton.click();
}, }
500) clearInterval(window.generateOnRepeatInterval);
} window.generateOnRepeatInterval = setInterval(function() {
if (!interruptbutton.offsetParent) {
appendContextMenuOption('#txt2img_generate','Generate forever',function(){ genbutton.click();
generateOnRepeat('#txt2img_generate','#txt2img_interrupt'); }
}) },
appendContextMenuOption('#img2img_generate','Generate forever',function(){ 500);
generateOnRepeat('#img2img_generate','#img2img_interrupt'); };
})
appendContextMenuOption('#txt2img_generate', 'Generate forever', function() {
let cancelGenerateForever = function(){ generateOnRepeat('#txt2img_generate', '#txt2img_interrupt');
clearInterval(window.generateOnRepeatInterval) });
} appendContextMenuOption('#img2img_generate', 'Generate forever', function() {
generateOnRepeat('#img2img_generate', '#img2img_interrupt');
appendContextMenuOption('#txt2img_interrupt','Cancel generate forever',cancelGenerateForever) });
appendContextMenuOption('#txt2img_generate', 'Cancel generate forever',cancelGenerateForever)
appendContextMenuOption('#img2img_interrupt','Cancel generate forever',cancelGenerateForever) let cancelGenerateForever = function() {
appendContextMenuOption('#img2img_generate', 'Cancel generate forever',cancelGenerateForever) clearInterval(window.generateOnRepeatInterval);
};
})();
//End example Context Menu Items appendContextMenuOption('#txt2img_interrupt', 'Cancel generate forever', cancelGenerateForever);
appendContextMenuOption('#txt2img_generate', 'Cancel generate forever', cancelGenerateForever);
onUiUpdate(function(){ appendContextMenuOption('#img2img_interrupt', 'Cancel generate forever', cancelGenerateForever);
addContextMenuEventListener() appendContextMenuOption('#img2img_generate', 'Cancel generate forever', cancelGenerateForever);
});
})();
//End example Context Menu Items
onUiUpdate(function() {
addContextMenuEventListener();
});

47
javascript/dragdrop.js vendored
View File

@ -1,11 +1,11 @@
// allows drag-dropping files into gradio image elements, and also pasting images from clipboard // allows drag-dropping files into gradio image elements, and also pasting images from clipboard
function isValidImageList( files ) { function isValidImageList(files) {
return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type); return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type);
} }
function dropReplaceImage( imgWrap, files ) { function dropReplaceImage(imgWrap, files) {
if ( ! isValidImageList( files ) ) { if (!isValidImageList(files)) {
return; return;
} }
@ -14,44 +14,44 @@ function dropReplaceImage( imgWrap, files ) {
imgWrap.querySelector('.modify-upload button + button, .touch-none + div button + button')?.click(); imgWrap.querySelector('.modify-upload button + button, .touch-none + div button + button')?.click();
const callback = () => { const callback = () => {
const fileInput = imgWrap.querySelector('input[type="file"]'); const fileInput = imgWrap.querySelector('input[type="file"]');
if ( fileInput ) { if (fileInput) {
if ( files.length === 0 ) { if (files.length === 0) {
files = new DataTransfer(); files = new DataTransfer();
files.items.add(tmpFile); files.items.add(tmpFile);
fileInput.files = files.files; fileInput.files = files.files;
} else { } else {
fileInput.files = files; fileInput.files = files;
} }
fileInput.dispatchEvent(new Event('change')); fileInput.dispatchEvent(new Event('change'));
} }
}; };
if ( imgWrap.closest('#pnginfo_image') ) { if (imgWrap.closest('#pnginfo_image')) {
// special treatment for PNG Info tab, wait for fetch request to finish // special treatment for PNG Info tab, wait for fetch request to finish
const oldFetch = window.fetch; const oldFetch = window.fetch;
window.fetch = async (input, options) => { window.fetch = async(input, options) => {
const response = await oldFetch(input, options); const response = await oldFetch(input, options);
if ( 'api/predict/' === input ) { if ('api/predict/' === input) {
const content = await response.text(); const content = await response.text();
window.fetch = oldFetch; window.fetch = oldFetch;
window.requestAnimationFrame( () => callback() ); window.requestAnimationFrame(() => callback());
return new Response(content, { return new Response(content, {
status: response.status, status: response.status,
statusText: response.statusText, statusText: response.statusText,
headers: response.headers headers: response.headers
}) });
} }
return response; return response;
}; };
} else { } else {
window.requestAnimationFrame( () => callback() ); window.requestAnimationFrame(() => callback());
} }
} }
window.document.addEventListener('dragover', e => { window.document.addEventListener('dragover', e => {
const target = e.composedPath()[0]; const target = e.composedPath()[0];
const imgWrap = target.closest('[data-testid="image"]'); const imgWrap = target.closest('[data-testid="image"]');
if ( !imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1) { if (!imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1) {
return; return;
} }
e.stopPropagation(); e.stopPropagation();
@ -65,33 +65,34 @@ window.document.addEventListener('drop', e => {
return; return;
} }
const imgWrap = target.closest('[data-testid="image"]'); const imgWrap = target.closest('[data-testid="image"]');
if ( !imgWrap ) { if (!imgWrap) {
return; return;
} }
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
const files = e.dataTransfer.files; const files = e.dataTransfer.files;
dropReplaceImage( imgWrap, files ); dropReplaceImage(imgWrap, files);
}); });
window.addEventListener('paste', e => { window.addEventListener('paste', e => {
const files = e.clipboardData.files; const files = e.clipboardData.files;
if ( ! isValidImageList( files ) ) { if (!isValidImageList(files)) {
return; return;
} }
const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')] const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]
.filter(el => uiElementIsVisible(el)); .filter(el => uiElementIsVisible(el));
if ( ! visibleImageFields.length ) { if (!visibleImageFields.length) {
return; return;
} }
const firstFreeImageField = visibleImageFields const firstFreeImageField = visibleImageFields
.filter(el => el.querySelector('input[type=file]'))?.[0]; .filter(el => el.querySelector('input[type=file]'))?.[0];
dropReplaceImage( dropReplaceImage(
firstFreeImageField ? firstFreeImageField ?
firstFreeImageField : firstFreeImageField :
visibleImageFields[visibleImageFields.length - 1] visibleImageFields[visibleImageFields.length - 1]
, files ); , files
);
}); });

240
javascript/edit-attention.js
View File

@ -1,120 +1,120 @@
function keyupEditAttention(event){ function keyupEditAttention(event) {
let target = event.originalTarget || event.composedPath()[0]; let target = event.originalTarget || event.composedPath()[0];
if (! target.matches("[id*='_toprow'] [id*='_prompt'] textarea")) return; if (!target.matches("[id*='_toprow'] [id*='_prompt'] textarea")) return;
if (! (event.metaKey || event.ctrlKey)) return; if (!(event.metaKey || event.ctrlKey)) return;
let isPlus = event.key == "ArrowUp" let isPlus = event.key == "ArrowUp";
let isMinus = event.key == "ArrowDown" let isMinus = event.key == "ArrowDown";
if (!isPlus && !isMinus) return; if (!isPlus && !isMinus) return;
let selectionStart = target.selectionStart; let selectionStart = target.selectionStart;
let selectionEnd = target.selectionEnd; let selectionEnd = target.selectionEnd;
let text = target.value; let text = target.value;
function selectCurrentParenthesisBlock(OPEN, CLOSE){ function selectCurrentParenthesisBlock(OPEN, CLOSE) {
if (selectionStart !== selectionEnd) return false; if (selectionStart !== selectionEnd) return false;
// Find opening parenthesis around current cursor // Find opening parenthesis around current cursor
const before = text.substring(0, selectionStart); const before = text.substring(0, selectionStart);
let beforeParen = before.lastIndexOf(OPEN); let beforeParen = before.lastIndexOf(OPEN);
if (beforeParen == -1) return false; if (beforeParen == -1) return false;
let beforeParenClose = before.lastIndexOf(CLOSE); let beforeParenClose = before.lastIndexOf(CLOSE);
while (beforeParenClose !== -1 && beforeParenClose > beforeParen) { while (beforeParenClose !== -1 && beforeParenClose > beforeParen) {
beforeParen = before.lastIndexOf(OPEN, beforeParen - 1); beforeParen = before.lastIndexOf(OPEN, beforeParen - 1);
beforeParenClose = before.lastIndexOf(CLOSE, beforeParenClose - 1); beforeParenClose = before.lastIndexOf(CLOSE, beforeParenClose - 1);
} }
// Find closing parenthesis around current cursor // Find closing parenthesis around current cursor
const after = text.substring(selectionStart); const after = text.substring(selectionStart);
let afterParen = after.indexOf(CLOSE); let afterParen = after.indexOf(CLOSE);
if (afterParen == -1) return false; if (afterParen == -1) return false;
let afterParenOpen = after.indexOf(OPEN); let afterParenOpen = after.indexOf(OPEN);
while (afterParenOpen !== -1 && afterParen > afterParenOpen) { while (afterParenOpen !== -1 && afterParen > afterParenOpen) {
afterParen = after.indexOf(CLOSE, afterParen + 1); afterParen = after.indexOf(CLOSE, afterParen + 1);
afterParenOpen = after.indexOf(OPEN, afterParenOpen + 1); afterParenOpen = after.indexOf(OPEN, afterParenOpen + 1);
} }
if (beforeParen === -1 || afterParen === -1) return false; if (beforeParen === -1 || afterParen === -1) return false;
// Set the selection to the text between the parenthesis // Set the selection to the text between the parenthesis
const parenContent = text.substring(beforeParen + 1, selectionStart + afterParen); const parenContent = text.substring(beforeParen + 1, selectionStart + afterParen);
const lastColon = parenContent.lastIndexOf(":"); const lastColon = parenContent.lastIndexOf(":");
selectionStart = beforeParen + 1; selectionStart = beforeParen + 1;
selectionEnd = selectionStart + lastColon; selectionEnd = selectionStart + lastColon;
target.setSelectionRange(selectionStart, selectionEnd); target.setSelectionRange(selectionStart, selectionEnd);
return true; return true;
} }
function selectCurrentWord(){ function selectCurrentWord() {
if (selectionStart !== selectionEnd) return false; if (selectionStart !== selectionEnd) return false;
const delimiters = opts.keyedit_delimiters + " \r\n\t"; const delimiters = opts.keyedit_delimiters + " \r\n\t";
// seek backward until to find beggining // seek backward until to find beggining
while (!delimiters.includes(text[selectionStart - 1]) && selectionStart > 0) { while (!delimiters.includes(text[selectionStart - 1]) && selectionStart > 0) {
selectionStart--; selectionStart--;
} }
// seek forward to find end // seek forward to find end
while (!delimiters.includes(text[selectionEnd]) && selectionEnd < text.length) { while (!delimiters.includes(text[selectionEnd]) && selectionEnd < text.length) {
selectionEnd++; selectionEnd++;
} }
target.setSelectionRange(selectionStart, selectionEnd); target.setSelectionRange(selectionStart, selectionEnd);
return true; return true;
} }
// If the user hasn't selected anything, let's select their current parenthesis block or word // If the user hasn't selected anything, let's select their current parenthesis block or word
if (!selectCurrentParenthesisBlock('<', '>') && !selectCurrentParenthesisBlock('(', ')')) { if (!selectCurrentParenthesisBlock('<', '>') && !selectCurrentParenthesisBlock('(', ')')) {
selectCurrentWord(); selectCurrentWord();
} }
event.preventDefault(); event.preventDefault();
var closeCharacter = ')' var closeCharacter = ')';
var delta = opts.keyedit_precision_attention var delta = opts.keyedit_precision_attention;
if (selectionStart > 0 && text[selectionStart - 1] == '<'){ if (selectionStart > 0 && text[selectionStart - 1] == '<') {
closeCharacter = '>' closeCharacter = '>';
delta = opts.keyedit_precision_extra delta = opts.keyedit_precision_extra;
} else if (selectionStart == 0 || text[selectionStart - 1] != "(") { } else if (selectionStart == 0 || text[selectionStart - 1] != "(") {
// do not include spaces at the end // do not include spaces at the end
while(selectionEnd > selectionStart && text[selectionEnd-1] == ' '){ while (selectionEnd > selectionStart && text[selectionEnd - 1] == ' ') {
selectionEnd -= 1; selectionEnd -= 1;
} }
if(selectionStart == selectionEnd){ if (selectionStart == selectionEnd) {
return return;
} }
text = text.slice(0, selectionStart) + "(" + text.slice(selectionStart, selectionEnd) + ":1.0)" + text.slice(selectionEnd); text = text.slice(0, selectionStart) + "(" + text.slice(selectionStart, selectionEnd) + ":1.0)" + text.slice(selectionEnd);
selectionStart += 1; selectionStart += 1;
selectionEnd += 1; selectionEnd += 1;
} }
var end = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1; var end = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1;
var weight = parseFloat(text.slice(selectionEnd + 1, selectionEnd + 1 + end)); var weight = parseFloat(text.slice(selectionEnd + 1, selectionEnd + 1 + end));
if (isNaN(weight)) return; if (isNaN(weight)) return;
weight += isPlus ? delta : -delta; weight += isPlus ? delta : -delta;
weight = parseFloat(weight.toPrecision(12)); weight = parseFloat(weight.toPrecision(12));
if(String(weight).length == 1) weight += ".0" if (String(weight).length == 1) weight += ".0";
if (closeCharacter == ')' && weight == 1) { if (closeCharacter == ')' && weight == 1) {
text = text.slice(0, selectionStart - 1) + text.slice(selectionStart, selectionEnd) + text.slice(selectionEnd + 5); text = text.slice(0, selectionStart - 1) + text.slice(selectionStart, selectionEnd) + text.slice(selectionEnd + 5);
selectionStart--; selectionStart--;
selectionEnd--; selectionEnd--;
} else { } else {
text = text.slice(0, selectionEnd + 1) + weight + text.slice(selectionEnd + 1 + end - 1); text = text.slice(0, selectionEnd + 1) + weight + text.slice(selectionEnd + 1 + end - 1);
} }
target.focus(); target.focus();
target.value = text; target.value = text;
target.selectionStart = selectionStart; target.selectionStart = selectionStart;
target.selectionEnd = selectionEnd; target.selectionEnd = selectionEnd;
updateInput(target) updateInput(target);
} }
addEventListener('keydown', (event) => { addEventListener('keydown', (event) => {
keyupEditAttention(event); keyupEditAttention(event);
}); });

145
javascript/extensions.js
View File

@ -1,71 +1,74 @@
function extensions_apply(_disabled_list, _update_list, disable_all){ function extensions_apply(_disabled_list, _update_list, disable_all) {
var disable = [] var disable = [];
var update = [] var update = [];
gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x){ gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x) {
if(x.name.startsWith("enable_") && ! x.checked) if (x.name.startsWith("enable_") && !x.checked) {
disable.push(x.name.substring(7)) disable.push(x.name.substring(7));
}
if(x.name.startsWith("update_") && x.checked)
update.push(x.name.substring(7)) if (x.name.startsWith("update_") && x.checked) {
}) update.push(x.name.substring(7));
}
restart_reload() });
return [JSON.stringify(disable), JSON.stringify(update), disable_all] restart_reload();
}
return [JSON.stringify(disable), JSON.stringify(update), disable_all];
function extensions_check(){ }
var disable = []
function extensions_check() {
gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x){ var disable = [];
if(x.name.startsWith("enable_") && ! x.checked)
disable.push(x.name.substring(7)) gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x) {
}) if (x.name.startsWith("enable_") && !x.checked) {
disable.push(x.name.substring(7));
gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x){ }
x.innerHTML = "Loading..." });
})
gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x) {
x.innerHTML = "Loading...";
var id = randomId() });
requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function(){
}) var id = randomId();
requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function() {
return [id, JSON.stringify(disable)]
} });
function install_extension_from_index(button, url){ return [id, JSON.stringify(disable)];
button.disabled = "disabled" }
button.value = "Installing..."
function install_extension_from_index(button, url) {
var textarea = gradioApp().querySelector('#extension_to_install textarea') button.disabled = "disabled";
textarea.value = url button.value = "Installing...";
updateInput(textarea)
var textarea = gradioApp().querySelector('#extension_to_install textarea');
gradioApp().querySelector('#install_extension_button').click() textarea.value = url;
} updateInput(textarea);
function config_state_confirm_restore(_, config_state_name, config_restore_type) { gradioApp().querySelector('#install_extension_button').click();
if (config_state_name == "Current") { }
return [false, config_state_name, config_restore_type];
} function config_state_confirm_restore(_, config_state_name, config_restore_type) {
let restored = ""; if (config_state_name == "Current") {
if (config_restore_type == "extensions") { return [false, config_state_name, config_restore_type];
restored = "all saved extension versions"; }
} else if (config_restore_type == "webui") { let restored = "";
restored = "the webui version"; if (config_restore_type == "extensions") {
} else { restored = "all saved extension versions";
restored = "the webui version and all saved extension versions"; } else if (config_restore_type == "webui") {
} restored = "the webui version";
let confirmed = confirm("Are you sure you want to restore from this state?\nThis will reset " + restored + "."); } else {
if (confirmed) { restored = "the webui version and all saved extension versions";
restart_reload(); }
gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x){ let confirmed = confirm("Are you sure you want to restore from this state?\nThis will reset " + restored + ".");
x.innerHTML = "Loading..." if (confirmed) {
}) restart_reload();
} gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x) {
return [confirmed, config_state_name, config_restore_type]; x.innerHTML = "Loading...";
} });
}
return [confirmed, config_state_name, config_restore_type];
}

420
javascript/extraNetworks.js
View File

@ -1,205 +1,215 @@
function setupExtraNetworksForTab(tabname){ function setupExtraNetworksForTab(tabname) {
gradioApp().querySelector('#'+tabname+'_extra_tabs').classList.add('extra-networks') gradioApp().querySelector('#' + tabname + '_extra_tabs').classList.add('extra-networks');
var tabs = gradioApp().querySelector('#'+tabname+'_extra_tabs > div') var tabs = gradioApp().querySelector('#' + tabname + '_extra_tabs > div');
var search = gradioApp().querySelector('#'+tabname+'_extra_search textarea') var search = gradioApp().querySelector('#' + tabname + '_extra_search textarea');
var refresh = gradioApp().getElementById(tabname+'_extra_refresh') var refresh = gradioApp().getElementById(tabname + '_extra_refresh');
search.classList.add('search') search.classList.add('search');
tabs.appendChild(search) tabs.appendChild(search);
tabs.appendChild(refresh) tabs.appendChild(refresh);
var applyFilter = function(){ var applyFilter = function() {
var searchTerm = search.value.toLowerCase() var searchTerm = search.value.toLowerCase();
gradioApp().querySelectorAll('#'+tabname+'_extra_tabs div.card').forEach(function(elem){ gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) {
var searchOnly = elem.querySelector('.search_only') var searchOnly = elem.querySelector('.search_only');
var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase() var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase();
var visible = text.indexOf(searchTerm) != -1 var visible = text.indexOf(searchTerm) != -1;
if(searchOnly && searchTerm.length < 4){ if (searchOnly && searchTerm.length < 4) {
visible = false visible = false;
} }
elem.style.display = visible ? "" : "none" elem.style.display = visible ? "" : "none";
}) });
} };
search.addEventListener("input", applyFilter); search.addEventListener("input", applyFilter);
applyFilter(); applyFilter();
extraNetworksApplyFilter[tabname] = applyFilter; extraNetworksApplyFilter[tabname] = applyFilter;
} }
function applyExtraNetworkFilter(tabname){ function applyExtraNetworkFilter(tabname) {
setTimeout(extraNetworksApplyFilter[tabname], 1); setTimeout(extraNetworksApplyFilter[tabname], 1);
} }
var extraNetworksApplyFilter = {} var extraNetworksApplyFilter = {};
var activePromptTextarea = {}; var activePromptTextarea = {};
function setupExtraNetworks(){ function setupExtraNetworks() {
setupExtraNetworksForTab('txt2img') setupExtraNetworksForTab('txt2img');
setupExtraNetworksForTab('img2img') setupExtraNetworksForTab('img2img');
function registerPrompt(tabname, id){ function registerPrompt(tabname, id) {
var textarea = gradioApp().querySelector("#" + id + " > label > textarea"); var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
if (! activePromptTextarea[tabname]){ if (!activePromptTextarea[tabname]) {
activePromptTextarea[tabname] = textarea activePromptTextarea[tabname] = textarea;
} }
textarea.addEventListener("focus", function(){ textarea.addEventListener("focus", function() {
activePromptTextarea[tabname] = textarea; activePromptTextarea[tabname] = textarea;
}); });
} }
registerPrompt('txt2img', 'txt2img_prompt') registerPrompt('txt2img', 'txt2img_prompt');
registerPrompt('txt2img', 'txt2img_neg_prompt') registerPrompt('txt2img', 'txt2img_neg_prompt');
registerPrompt('img2img', 'img2img_prompt') registerPrompt('img2img', 'img2img_prompt');
registerPrompt('img2img', 'img2img_neg_prompt') registerPrompt('img2img', 'img2img_neg_prompt');
} }
onUiLoaded(setupExtraNetworks) onUiLoaded(setupExtraNetworks);
var re_extranet = /<([^:]+:[^:]+):[\d\.]+>/; var re_extranet = /<([^:]+:[^:]+):[\d.]+>/;
var re_extranet_g = /\s+<([^:]+:[^:]+):[\d\.]+>/g; var re_extranet_g = /\s+<([^:]+:[^:]+):[\d.]+>/g;
function tryToRemoveExtraNetworkFromPrompt(textarea, text){ function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
var m = text.match(re_extranet) var m = text.match(re_extranet);
var replaced = false var replaced = false;
var newTextareaText var newTextareaText;
if(m) { if (m) {
var partToSearch = m[1] var partToSearch = m[1];
newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found){ newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found) {
m = found.match(re_extranet); m = found.match(re_extranet);
if(m[1] == partToSearch){ if (m[1] == partToSearch) {
replaced = true; replaced = true;
return "" return "";
} }
return found; return found;
}) });
} else { } else {
newTextareaText = textarea.value.replaceAll(new RegExp(text, "g"), function(found){ newTextareaText = textarea.value.replaceAll(new RegExp(text, "g"), function(found) {
if(found == text) { if (found == text) {
replaced = true; replaced = true;
return "" return "";
} }
return found; return found;
}) });
} }
if(replaced){ if (replaced) {
textarea.value = newTextareaText textarea.value = newTextareaText;
return true; return true;
} }
return false return false;
} }
function cardClicked(tabname, textToAdd, allowNegativePrompt){ function cardClicked(tabname, textToAdd, allowNegativePrompt) {
var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea") var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea");
if(! tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)){ if (!tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)) {
textarea.value = textarea.value + opts.extra_networks_add_text_separator + textToAdd textarea.value = textarea.value + opts.extra_networks_add_text_separator + textToAdd;
} }
updateInput(textarea) updateInput(textarea);
} }
function saveCardPreview(event, tabname, filename){ function saveCardPreview(event, tabname, filename) {
var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename > label > textarea') var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename > label > textarea');
var button = gradioApp().getElementById(tabname + '_save_preview') var button = gradioApp().getElementById(tabname + '_save_preview');
textarea.value = filename textarea.value = filename;
updateInput(textarea) updateInput(textarea);
button.click() button.click();
event.stopPropagation() event.stopPropagation();
event.preventDefault() event.preventDefault();
} }
function extraNetworksSearchButton(tabs_id, event){ function extraNetworksSearchButton(tabs_id, event) {
var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea') var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea');
var button = event.target var button = event.target;
var text = button.classList.contains("search-all") ? "" : button.textContent.trim() var text = button.classList.contains("search-all") ? "" : button.textContent.trim();
searchTextarea.value = text searchTextarea.value = text;
updateInput(searchTextarea) updateInput(searchTextarea);
} }
var globalPopup = null; var globalPopup = null;
var globalPopupInner = null; var globalPopupInner = null;
function popup(contents){ function popup(contents) {
if(! globalPopup){ if (!globalPopup) {
globalPopup = document.createElement('div') globalPopup = document.createElement('div');
globalPopup.onclick = function(){ globalPopup.style.display = "none"; }; globalPopup.onclick = function() {
globalPopup.classList.add('global-popup'); globalPopup.style.display = "none";
};
var close = document.createElement('div') globalPopup.classList.add('global-popup');
close.classList.add('global-popup-close');
close.onclick = function(){ globalPopup.style.display = "none"; }; var close = document.createElement('div');
close.title = "Close"; close.classList.add('global-popup-close');
globalPopup.appendChild(close) close.onclick = function() {
globalPopup.style.display = "none";
globalPopupInner = document.createElement('div') };
globalPopupInner.onclick = function(event){ event.stopPropagation(); return false; }; close.title = "Close";
globalPopupInner.classList.add('global-popup-inner'); globalPopup.appendChild(close);
globalPopup.appendChild(globalPopupInner)
globalPopupInner = document.createElement('div');
gradioApp().appendChild(globalPopup); globalPopupInner.onclick = function(event) {
} event.stopPropagation(); return false;
};
globalPopupInner.innerHTML = ''; globalPopupInner.classList.add('global-popup-inner');
globalPopupInner.appendChild(contents); globalPopup.appendChild(globalPopupInner);
globalPopup.style.display = "flex"; gradioApp().appendChild(globalPopup);
} }
function extraNetworksShowMetadata(text){ globalPopupInner.innerHTML = '';
var elem = document.createElement('pre') globalPopupInner.appendChild(contents);
elem.classList.add('popup-metadata');
elem.textContent = text; globalPopup.style.display = "flex";
}
popup(elem);
} function extraNetworksShowMetadata(text) {
var elem = document.createElement('pre');
function requestGet(url, data, handler, errorHandler){ elem.classList.add('popup-metadata');
var xhr = new XMLHttpRequest(); elem.textContent = text;
var args = Object.keys(data).map(function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }).join('&')
xhr.open("GET", url + "?" + args, true); popup(elem);
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { function requestGet(url, data, handler, errorHandler) {
if (xhr.status === 200) { var xhr = new XMLHttpRequest();
try { var args = Object.keys(data).map(function(k) {
var js = JSON.parse(xhr.responseText); return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
handler(js) }).join('&');
} catch (error) { xhr.open("GET", url + "?" + args, true);
console.error(error);
errorHandler() xhr.onreadystatechange = function() {
} if (xhr.readyState === 4) {
} else{ if (xhr.status === 200) {
errorHandler() try {
} var js = JSON.parse(xhr.responseText);
} handler(js);
}; } catch (error) {
var js = JSON.stringify(data); console.error(error);
xhr.send(js); errorHandler();
} }
} else {
function extraNetworksRequestMetadata(event, extraPage, cardName){ errorHandler();
var showError = function(){ extraNetworksShowMetadata("there was an error getting metadata"); } }
}
requestGet("./sd_extra_networks/metadata", {"page": extraPage, "item": cardName}, function(data){ };
if(data && data.metadata){ var js = JSON.stringify(data);
extraNetworksShowMetadata(data.metadata) xhr.send(js);
} else{ }
showError()
} function extraNetworksRequestMetadata(event, extraPage, cardName) {
}, showError) var showError = function() {
extraNetworksShowMetadata("there was an error getting metadata");
event.stopPropagation() };
}
requestGet("./sd_extra_networks/metadata", {page: extraPage, item: cardName}, function(data) {
if (data && data.metadata) {
extraNetworksShowMetadata(data.metadata);
} else {
showError();
}
}, showError);
event.stopPropagation();
}

48
javascript/generationParams.js
View File

@ -1,33 +1,35 @@
// attaches listeners to the txt2img and img2img galleries to update displayed generation param text when the image changes // attaches listeners to the txt2img and img2img galleries to update displayed generation param text when the image changes
let txt2img_gallery, img2img_gallery, modal = undefined; let txt2img_gallery, img2img_gallery, modal = undefined;
onUiUpdate(function(){ onUiUpdate(function() {
if (!txt2img_gallery) { if (!txt2img_gallery) {
txt2img_gallery = attachGalleryListeners("txt2img") txt2img_gallery = attachGalleryListeners("txt2img");
} }
if (!img2img_gallery) { if (!img2img_gallery) {
img2img_gallery = attachGalleryListeners("img2img") img2img_gallery = attachGalleryListeners("img2img");
} }
if (!modal) { if (!modal) {
modal = gradioApp().getElementById('lightboxModal') modal = gradioApp().getElementById('lightboxModal');
modalObserver.observe(modal, { attributes : true, attributeFilter : ['style'] }); modalObserver.observe(modal, {attributes: true, attributeFilter: ['style']});
} }
}); });
let modalObserver = new MutationObserver(function(mutations) { let modalObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutationRecord) { mutations.forEach(function(mutationRecord) {
let selectedTab = gradioApp().querySelector('#tabs div button.selected')?.innerText let selectedTab = gradioApp().querySelector('#tabs div button.selected')?.innerText;
if (mutationRecord.target.style.display === 'none' && (selectedTab === 'txt2img' || selectedTab === 'img2img')) if (mutationRecord.target.style.display === 'none' && (selectedTab === 'txt2img' || selectedTab === 'img2img')) {
gradioApp().getElementById(selectedTab+"_generation_info_button")?.click() gradioApp().getElementById(selectedTab + "_generation_info_button")?.click();
}); }
});
}); });
function attachGalleryListeners(tab_name) { function attachGalleryListeners(tab_name) {
var gallery = gradioApp().querySelector('#'+tab_name+'_gallery') var gallery = gradioApp().querySelector('#' + tab_name + '_gallery');
gallery?.addEventListener('click', () => gradioApp().getElementById(tab_name+"_generation_info_button").click()); gallery?.addEventListener('click', () => gradioApp().getElementById(tab_name + "_generation_info_button").click());
gallery?.addEventListener('keydown', (e) => { gallery?.addEventListener('keydown', (e) => {
if (e.keyCode == 37 || e.keyCode == 39) // left or right arrow if (e.keyCode == 37 || e.keyCode == 39) { // left or right arrow
gradioApp().getElementById(tab_name+"_generation_info_button").click() gradioApp().getElementById(tab_name + "_generation_info_button").click();
}); }
return gallery; });
return gallery;
} }

8
javascript/hints.js
View File

@ -1,6 +1,6 @@
// mouseover tooltips for various UI elements // mouseover tooltips for various UI elements
titles = { var titles = {
"Sampling steps": "How many times to improve the generated image iteratively; higher values take longer; very low values can produce bad results", "Sampling steps": "How many times to improve the generated image iteratively; higher values take longer; very low values can produce bad results",
"Sampling method": "Which algorithm to use to produce the image", "Sampling method": "Which algorithm to use to produce the image",
"GFPGAN": "Restore low quality faces using GFPGAN neural network", "GFPGAN": "Restore low quality faces using GFPGAN neural network",
@ -41,7 +41,7 @@ titles = {
"Inpaint at full resolution": "Upscale masked region to target resolution, do inpainting, downscale back and paste into original image", "Inpaint at full resolution": "Upscale masked region to target resolution, do inpainting, downscale back and paste into original image",
"Denoising strength": "Determines how little respect the algorithm should have for image's content. At 0, nothing will change, and at 1 you'll get an unrelated image. With values below 1.0, processing will take less steps than the Sampling Steps slider specifies.", "Denoising strength": "Determines how little respect the algorithm should have for image's content. At 0, nothing will change, and at 1 you'll get an unrelated image. With values below 1.0, processing will take less steps than the Sampling Steps slider specifies.",
"Skip": "Stop processing current image and continue processing.", "Skip": "Stop processing current image and continue processing.",
"Interrupt": "Stop processing images and return any results accumulated so far.", "Interrupt": "Stop processing images and return any results accumulated so far.",
"Save": "Write image to a directory (default - log/images) and generation parameters into csv file.", "Save": "Write image to a directory (default - log/images) and generation parameters into csv file.",
@ -97,7 +97,7 @@ titles = {
"Add difference": "Result = A + (B - C) * M", "Add difference": "Result = A + (B - C) * M",
"No interpolation": "Result = A", "No interpolation": "Result = A",
"Initialization text": "If the number of tokens is more than the number of vectors, some may be skipped.\nLeave the textbox empty to start with zeroed out vectors", "Initialization text": "If the number of tokens is more than the number of vectors, some may be skipped.\nLeave the textbox empty to start with zeroed out vectors",
"Learning rate": "How fast should training go. Low values will take longer to train, high values may fail to converge (not generate accurate results) and/or may break the embedding (This has happened if you see Loss: nan in the training info textbox. If this happens, you need to manually restore your embedding from an older not-broken backup).\n\nYou can set a single numeric value, or multiple learning rates using the syntax:\n\n rate_1:max_steps_1, rate_2:max_steps_2, ...\n\nEG: 0.005:100, 1e-3:1000, 1e-5\n\nWill train with rate of 0.005 for first 100 steps, then 1e-3 until 1000 steps, then 1e-5 for all remaining steps.", "Learning rate": "How fast should training go. Low values will take longer to train, high values may fail to converge (not generate accurate results) and/or may break the embedding (This has happened if you see Loss: nan in the training info textbox. If this happens, you need to manually restore your embedding from an older not-broken backup).\n\nYou can set a single numeric value, or multiple learning rates using the syntax:\n\n rate_1:max_steps_1, rate_2:max_steps_2, ...\n\nEG: 0.005:100, 1e-3:1000, 1e-5\n\nWill train with rate of 0.005 for first 100 steps, then 1e-3 until 1000 steps, then 1e-5 for all remaining steps.",
"Clip skip": "Early stopping parameter for CLIP model; 1 is stop at last layer as usual, 2 is stop at penultimate layer, etc.", "Clip skip": "Early stopping parameter for CLIP model; 1 is stop at last layer as usual, 2 is stop at penultimate layer, etc.",
@ -114,7 +114,7 @@ titles = {
"Discard weights with matching name": "Regular expression; if weights's name matches it, the weights is not written to the resulting checkpoint. Use ^model_ema to discard EMA weights.", "Discard weights with matching name": "Regular expression; if weights's name matches it, the weights is not written to the resulting checkpoint. Use ^model_ema to discard EMA weights.",
"Extra networks tab order": "Comma-separated list of tab names; tabs listed here will appear in the extra networks UI first and in order lsited.", "Extra networks tab order": "Comma-separated list of tab names; tabs listed here will appear in the extra networks UI first and in order lsited.",
"Negative Guidance minimum sigma": "Skip negative prompt for steps where image is already mostly denoised; the higher this value, the more skips there will be; provides increased performance in exchange for minor quality reduction." "Negative Guidance minimum sigma": "Skip negative prompt for steps where image is already mostly denoised; the higher this value, the more skips there will be; provides increased performance in exchange for minor quality reduction."
} };
function updateTooltipForSpan(span){ function updateTooltipForSpan(span){
if (span.title) return; // already has a title if (span.title) return; // already has a title

36
javascript/hires_fix.js
View File

@ -1,18 +1,18 @@
function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y){ function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y) {
function setInactive(elem, inactive){ function setInactive(elem, inactive) {
elem.classList.toggle('inactive', !!inactive) elem.classList.toggle('inactive', !!inactive);
} }
var hrUpscaleBy = gradioApp().getElementById('txt2img_hr_scale') var hrUpscaleBy = gradioApp().getElementById('txt2img_hr_scale');
var hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x') var hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x');
var hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y') var hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y');
gradioApp().getElementById('txt2img_hires_fix_row2').style.display = opts.use_old_hires_fix_width_height ? "none" : "" gradioApp().getElementById('txt2img_hires_fix_row2').style.display = opts.use_old_hires_fix_width_height ? "none" : "";
setInactive(hrUpscaleBy, opts.use_old_hires_fix_width_height || hr_resize_x > 0 || hr_resize_y > 0) setInactive(hrUpscaleBy, opts.use_old_hires_fix_width_height || hr_resize_x > 0 || hr_resize_y > 0);
setInactive(hrResizeX, opts.use_old_hires_fix_width_height || hr_resize_x == 0) setInactive(hrResizeX, opts.use_old_hires_fix_width_height || hr_resize_x == 0);
setInactive(hrResizeY, opts.use_old_hires_fix_width_height || hr_resize_y == 0) setInactive(hrResizeY, opts.use_old_hires_fix_width_height || hr_resize_y == 0);
return [enable, width, height, hr_scale, hr_resize_x, hr_resize_y] return [enable, width, height, hr_scale, hr_resize_x, hr_resize_y];
} }

19
javascript/imageMaskFix.js
View File

@ -4,17 +4,16 @@
*/ */
function imageMaskResize() { function imageMaskResize() {
const canvases = gradioApp().querySelectorAll('#img2maskimg .touch-none canvas'); const canvases = gradioApp().querySelectorAll('#img2maskimg .touch-none canvas');
if ( ! canvases.length ) { if (!canvases.length) {
canvases_fixed = false; // TODO: this is unused..? window.removeEventListener('resize', imageMaskResize);
window.removeEventListener( 'resize', imageMaskResize ); return;
return;
} }
const wrapper = canvases[0].closest('.touch-none'); const wrapper = canvases[0].closest('.touch-none');
const previewImage = wrapper.previousElementSibling; const previewImage = wrapper.previousElementSibling;
if ( ! previewImage.complete ) { if (!previewImage.complete) {
previewImage.addEventListener( 'load', imageMaskResize); previewImage.addEventListener('load', imageMaskResize);
return; return;
} }
@ -24,15 +23,15 @@ function imageMaskResize() {
const nh = previewImage.naturalHeight; const nh = previewImage.naturalHeight;
const portrait = nh > nw; const portrait = nh > nw;
const wW = Math.min(w, portrait ? h/nh*nw : w/nw*nw); const wW = Math.min(w, portrait ? h / nh * nw : w / nw * nw);
const wH = Math.min(h, portrait ? h/nh*nh : w/nw*nh); const wH = Math.min(h, portrait ? h / nh * nh : w / nw * nh);
wrapper.style.width = `${wW}px`; wrapper.style.width = `${wW}px`;
wrapper.style.height = `${wH}px`; wrapper.style.height = `${wH}px`;
wrapper.style.left = `0px`; wrapper.style.left = `0px`;
wrapper.style.top = `0px`; wrapper.style.top = `0px`;
canvases.forEach( c => { canvases.forEach(c => {
c.style.width = c.style.height = ''; c.style.width = c.style.height = '';
c.style.maxWidth = '100%'; c.style.maxWidth = '100%';
c.style.maxHeight = '100%'; c.style.maxHeight = '100%';
@ -41,4 +40,4 @@ function imageMaskResize() {
} }
onUiUpdate(imageMaskResize); onUiUpdate(imageMaskResize);
window.addEventListener( 'resize', imageMaskResize); window.addEventListener('resize', imageMaskResize);

4
javascript/imageParams.js
View File

@ -1,4 +1,4 @@
window.onload = (function(){ window.onload = (function() {
window.addEventListener('drop', e => { window.addEventListener('drop', e => {
const target = e.composedPath()[0]; const target = e.composedPath()[0];
if (target.placeholder.indexOf("Prompt") == -1) return; if (target.placeholder.indexOf("Prompt") == -1) return;
@ -10,7 +10,7 @@ window.onload = (function(){
const imgParent = gradioApp().getElementById(prompt_target); const imgParent = gradioApp().getElementById(prompt_target);
const files = e.dataTransfer.files; const files = e.dataTransfer.files;
const fileInput = imgParent.querySelector('input[type="file"]'); const fileInput = imgParent.querySelector('input[type="file"]');
if ( fileInput ) { if (fileInput) {
fileInput.files = files; fileInput.files = files;
fileInput.dispatchEvent(new Event('change')); fileInput.dispatchEvent(new Event('change'));
} }

226
javascript/imageviewer.js
View File

@ -5,24 +5,24 @@ function closeModal() {
function showModal(event) { function showModal(event) {
const source = event.target || event.srcElement; const source = event.target || event.srcElement;
const modalImage = gradioApp().getElementById("modalImage") const modalImage = gradioApp().getElementById("modalImage");
const lb = gradioApp().getElementById("lightboxModal") const lb = gradioApp().getElementById("lightboxModal");
modalImage.src = source.src modalImage.src = source.src;
if (modalImage.style.display === 'none') { if (modalImage.style.display === 'none') {
lb.style.setProperty('background-image', 'url(' + source.src + ')'); lb.style.setProperty('background-image', 'url(' + source.src + ')');
} }
lb.style.display = "flex"; lb.style.display = "flex";
lb.focus() lb.focus();
const tabTxt2Img = gradioApp().getElementById("tab_txt2img") const tabTxt2Img = gradioApp().getElementById("tab_txt2img");
const tabImg2Img = gradioApp().getElementById("tab_img2img") const tabImg2Img = gradioApp().getElementById("tab_img2img");
// show the save button in modal only on txt2img or img2img tabs // show the save button in modal only on txt2img or img2img tabs
if (tabTxt2Img.style.display != "none" || tabImg2Img.style.display != "none") { if (tabTxt2Img.style.display != "none" || tabImg2Img.style.display != "none") {
gradioApp().getElementById("modal_save").style.display = "inline" gradioApp().getElementById("modal_save").style.display = "inline";
} else { } else {
gradioApp().getElementById("modal_save").style.display = "none" gradioApp().getElementById("modal_save").style.display = "none";
} }
event.stopPropagation() event.stopPropagation();
} }
function negmod(n, m) { function negmod(n, m) {
@ -30,14 +30,15 @@ function negmod(n, m) {
} }
function updateOnBackgroundChange() { function updateOnBackgroundChange() {
const modalImage = gradioApp().getElementById("modalImage") const modalImage = gradioApp().getElementById("modalImage");
if (modalImage && modalImage.offsetParent) { if (modalImage && modalImage.offsetParent) {
let currentButton = selected_gallery_button(); let currentButton = selected_gallery_button();
if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) { if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) {
modalImage.src = currentButton.children[0].src; modalImage.src = currentButton.children[0].src;
if (modalImage.style.display === 'none') { if (modalImage.style.display === 'none') {
modal.style.setProperty('background-image', `url(${modalImage.src})`) const modal = gradioApp().getElementById("lightboxModal");
modal.style.setProperty('background-image', `url(${modalImage.src})`);
} }
} }
} }
@ -49,108 +50,109 @@ function modalImageSwitch(offset) {
if (galleryButtons.length > 1) { if (galleryButtons.length > 1) {
var currentButton = selected_gallery_button(); var currentButton = selected_gallery_button();
var result = -1 var result = -1;
galleryButtons.forEach(function(v, i) { galleryButtons.forEach(function(v, i) {
if (v == currentButton) { if (v == currentButton) {
result = i result = i;
} }
}) });
if (result != -1) { if (result != -1) {
var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)] var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)];
nextButton.click() nextButton.click();
const modalImage = gradioApp().getElementById("modalImage"); const modalImage = gradioApp().getElementById("modalImage");
const modal = gradioApp().getElementById("lightboxModal"); const modal = gradioApp().getElementById("lightboxModal");
modalImage.src = nextButton.children[0].src; modalImage.src = nextButton.children[0].src;
if (modalImage.style.display === 'none') { if (modalImage.style.display === 'none') {
modal.style.setProperty('background-image', `url(${modalImage.src})`) modal.style.setProperty('background-image', `url(${modalImage.src})`);
} }
setTimeout(function() { setTimeout(function() {
modal.focus() modal.focus();
}, 10) }, 10);
} }
} }
} }
function saveImage(){ function saveImage() {
const tabTxt2Img = gradioApp().getElementById("tab_txt2img") const tabTxt2Img = gradioApp().getElementById("tab_txt2img");
const tabImg2Img = gradioApp().getElementById("tab_img2img") const tabImg2Img = gradioApp().getElementById("tab_img2img");
const saveTxt2Img = "save_txt2img" const saveTxt2Img = "save_txt2img";
const saveImg2Img = "save_img2img" const saveImg2Img = "save_img2img";
if (tabTxt2Img.style.display != "none") { if (tabTxt2Img.style.display != "none") {
gradioApp().getElementById(saveTxt2Img).click() gradioApp().getElementById(saveTxt2Img).click();
} else if (tabImg2Img.style.display != "none") { } else if (tabImg2Img.style.display != "none") {
gradioApp().getElementById(saveImg2Img).click() gradioApp().getElementById(saveImg2Img).click();
} else { } else {
console.error("missing implementation for saving modal of this type") console.error("missing implementation for saving modal of this type");
} }
} }
function modalSaveImage(event) { function modalSaveImage(event) {
saveImage() saveImage();
event.stopPropagation() event.stopPropagation();
} }
function modalNextImage(event) { function modalNextImage(event) {
modalImageSwitch(1) modalImageSwitch(1);
event.stopPropagation() event.stopPropagation();
} }
function modalPrevImage(event) { function modalPrevImage(event) {
modalImageSwitch(-1) modalImageSwitch(-1);
event.stopPropagation() event.stopPropagation();
} }
function modalKeyHandler(event) { function modalKeyHandler(event) {
switch (event.key) { switch (event.key) {
case "s": case "s":
saveImage() saveImage();
break; break;
case "ArrowLeft": case "ArrowLeft":
modalPrevImage(event) modalPrevImage(event);
break; break;
case "ArrowRight": case "ArrowRight":
modalNextImage(event) modalNextImage(event);
break; break;
case "Escape": case "Escape":
closeModal(); closeModal();
break; break;
} }
} }
function setupImageForLightbox(e) { function setupImageForLightbox(e) {
if (e.dataset.modded) if (e.dataset.modded) {
return; return;
}
e.dataset.modded = true; e.dataset.modded = true;
e.style.cursor='pointer' e.style.cursor = 'pointer';
e.style.userSelect='none' e.style.userSelect = 'none';
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1 var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
// For Firefox, listening on click first switched to next image then shows the lightbox. // For Firefox, listening on click first switched to next image then shows the lightbox.
// If you know how to fix this without switching to mousedown event, please. // If you know how to fix this without switching to mousedown event, please.
// For other browsers the event is click to make it possiblr to drag picture. // For other browsers the event is click to make it possiblr to drag picture.
var event = isFirefox ? 'mousedown' : 'click' var event = isFirefox ? 'mousedown' : 'click';
e.addEventListener(event, function (evt) { e.addEventListener(event, function(evt) {
if(!opts.js_modal_lightbox || evt.button != 0) return; if (!opts.js_modal_lightbox || evt.button != 0) return;
modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed) modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed);
evt.preventDefault() evt.preventDefault();
showModal(evt) showModal(evt);
}, true); }, true);
} }
function modalZoomSet(modalImage, enable) { function modalZoomSet(modalImage, enable) {
if(modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable); if (modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable);
} }
function modalZoomToggle(event) { function modalZoomToggle(event) {
var modalImage = gradioApp().getElementById("modalImage"); var modalImage = gradioApp().getElementById("modalImage");
modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen')) modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'));
event.stopPropagation() event.stopPropagation();
} }
function modalTileImageToggle(event) { function modalTileImageToggle(event) {
@ -159,99 +161,93 @@ function modalTileImageToggle(event) {
const isTiling = modalImage.style.display === 'none'; const isTiling = modalImage.style.display === 'none';
if (isTiling) { if (isTiling) {
modalImage.style.display = 'block'; modalImage.style.display = 'block';
modal.style.setProperty('background-image', 'none') modal.style.setProperty('background-image', 'none');
} else { } else {
modalImage.style.display = 'none'; modalImage.style.display = 'none';
modal.style.setProperty('background-image', `url(${modalImage.src})`) modal.style.setProperty('background-image', `url(${modalImage.src})`);
} }
event.stopPropagation() event.stopPropagation();
}
function galleryImageHandler(e) {
//if (e && e.parentElement.tagName == 'BUTTON') {
e.onclick = showGalleryImage;
//}
} }
onUiUpdate(function() { onUiUpdate(function() {
var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img') var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img');
if (fullImg_preview != null) { if (fullImg_preview != null) {
fullImg_preview.forEach(setupImageForLightbox); fullImg_preview.forEach(setupImageForLightbox);
} }
updateOnBackgroundChange(); updateOnBackgroundChange();
}) });
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
//const modalFragment = document.createDocumentFragment(); //const modalFragment = document.createDocumentFragment();
const modal = document.createElement('div') const modal = document.createElement('div');
modal.onclick = closeModal; modal.onclick = closeModal;
modal.id = "lightboxModal"; modal.id = "lightboxModal";
modal.tabIndex = 0 modal.tabIndex = 0;
modal.addEventListener('keydown', modalKeyHandler, true) modal.addEventListener('keydown', modalKeyHandler, true);
const modalControls = document.createElement('div') const modalControls = document.createElement('div');
modalControls.className = 'modalControls gradio-container'; modalControls.className = 'modalControls gradio-container';
modal.append(modalControls); modal.append(modalControls);
const modalZoom = document.createElement('span') const modalZoom = document.createElement('span');
modalZoom.className = 'modalZoom cursor'; modalZoom.className = 'modalZoom cursor';
modalZoom.innerHTML = '&#10529;' modalZoom.innerHTML = '&#10529;';
modalZoom.addEventListener('click', modalZoomToggle, true) modalZoom.addEventListener('click', modalZoomToggle, true);
modalZoom.title = "Toggle zoomed view"; modalZoom.title = "Toggle zoomed view";
modalControls.appendChild(modalZoom) modalControls.appendChild(modalZoom);
const modalTileImage = document.createElement('span') const modalTileImage = document.createElement('span');
modalTileImage.className = 'modalTileImage cursor'; modalTileImage.className = 'modalTileImage cursor';
modalTileImage.innerHTML = '&#8862;' modalTileImage.innerHTML = '&#8862;';
modalTileImage.addEventListener('click', modalTileImageToggle, true) modalTileImage.addEventListener('click', modalTileImageToggle, true);
modalTileImage.title = "Preview tiling"; modalTileImage.title = "Preview tiling";
modalControls.appendChild(modalTileImage) modalControls.appendChild(modalTileImage);
const modalSave = document.createElement("span") const modalSave = document.createElement("span");
modalSave.className = "modalSave cursor" modalSave.className = "modalSave cursor";
modalSave.id = "modal_save" modalSave.id = "modal_save";
modalSave.innerHTML = "&#x1F5AB;" modalSave.innerHTML = "&#x1F5AB;";
modalSave.addEventListener("click", modalSaveImage, true) modalSave.addEventListener("click", modalSaveImage, true);
modalSave.title = "Save Image(s)" modalSave.title = "Save Image(s)";
modalControls.appendChild(modalSave) modalControls.appendChild(modalSave);
const modalClose = document.createElement('span') const modalClose = document.createElement('span');
modalClose.className = 'modalClose cursor'; modalClose.className = 'modalClose cursor';
modalClose.innerHTML = '&times;' modalClose.innerHTML = '&times;';
modalClose.onclick = closeModal; modalClose.onclick = closeModal;
modalClose.title = "Close image viewer"; modalClose.title = "Close image viewer";
modalControls.appendChild(modalClose) modalControls.appendChild(modalClose);
const modalImage = document.createElement('img') const modalImage = document.createElement('img');
modalImage.id = 'modalImage'; modalImage.id = 'modalImage';
modalImage.onclick = closeModal; modalImage.onclick = closeModal;
modalImage.tabIndex = 0 modalImage.tabIndex = 0;
modalImage.addEventListener('keydown', modalKeyHandler, true) modalImage.addEventListener('keydown', modalKeyHandler, true);
modal.appendChild(modalImage) modal.appendChild(modalImage);
const modalPrev = document.createElement('a') const modalPrev = document.createElement('a');
modalPrev.className = 'modalPrev'; modalPrev.className = 'modalPrev';
modalPrev.innerHTML = '&#10094;' modalPrev.innerHTML = '&#10094;';
modalPrev.tabIndex = 0 modalPrev.tabIndex = 0;
modalPrev.addEventListener('click', modalPrevImage, true); modalPrev.addEventListener('click', modalPrevImage, true);
modalPrev.addEventListener('keydown', modalKeyHandler, true) modalPrev.addEventListener('keydown', modalKeyHandler, true);
modal.appendChild(modalPrev) modal.appendChild(modalPrev);
const modalNext = document.createElement('a') const modalNext = document.createElement('a');
modalNext.className = 'modalNext'; modalNext.className = 'modalNext';
modalNext.innerHTML = '&#10095;' modalNext.innerHTML = '&#10095;';
modalNext.tabIndex = 0 modalNext.tabIndex = 0;
modalNext.addEventListener('click', modalNextImage, true); modalNext.addEventListener('click', modalNextImage, true);
modalNext.addEventListener('keydown', modalKeyHandler, true) modalNext.addEventListener('keydown', modalKeyHandler, true);
modal.appendChild(modalNext) modal.appendChild(modalNext);
try { try {
gradioApp().appendChild(modal); gradioApp().appendChild(modal);
} catch (e) { } catch (e) {
gradioApp().body.appendChild(modal); gradioApp().body.appendChild(modal);
} }
document.body.appendChild(modal); document.body.appendChild(modal);

4
javascript/imageviewerGamepad.js
View File

@ -1,7 +1,7 @@
window.addEventListener('gamepadconnected', (e) => { window.addEventListener('gamepadconnected', (e) => {
const index = e.gamepad.index; const index = e.gamepad.index;
let isWaiting = false; let isWaiting = false;
setInterval(async () => { setInterval(async() => {
if (!opts.js_modal_lightbox_gamepad || isWaiting) return; if (!opts.js_modal_lightbox_gamepad || isWaiting) return;
const gamepad = navigator.getGamepads()[index]; const gamepad = navigator.getGamepads()[index];
const xValue = gamepad.axes[0]; const xValue = gamepad.axes[0];
@ -14,7 +14,7 @@ window.addEventListener('gamepadconnected', (e) => {
} }
if (isWaiting) { if (isWaiting) {
await sleepUntil(() => { await sleepUntil(() => {
const xValue = navigator.getGamepads()[index].axes[0] const xValue = navigator.getGamepads()[index].axes[0];
if (xValue < 0.3 && xValue > -0.3) { if (xValue < 0.3 && xValue > -0.3) {
return true; return true;
} }

353
javascript/localization.js
View File

@ -1,177 +1,176 @@
// localization = {} -- the dict with translations is created by the backend // localization = {} -- the dict with translations is created by the backend
ignore_ids_for_localization={ var ignore_ids_for_localization = {
setting_sd_hypernetwork: 'OPTION', setting_sd_hypernetwork: 'OPTION',
setting_sd_model_checkpoint: 'OPTION', setting_sd_model_checkpoint: 'OPTION',
setting_realesrgan_enabled_models: 'OPTION', modelmerger_primary_model_name: 'OPTION',
modelmerger_primary_model_name: 'OPTION', modelmerger_secondary_model_name: 'OPTION',
modelmerger_secondary_model_name: 'OPTION', modelmerger_tertiary_model_name: 'OPTION',
modelmerger_tertiary_model_name: 'OPTION', train_embedding: 'OPTION',
train_embedding: 'OPTION', train_hypernetwork: 'OPTION',
train_hypernetwork: 'OPTION', txt2img_styles: 'OPTION',
txt2img_styles: 'OPTION', img2img_styles: 'OPTION',
img2img_styles: 'OPTION', setting_random_artist_categories: 'SPAN',
setting_random_artist_categories: 'SPAN', setting_face_restoration_model: 'SPAN',
setting_face_restoration_model: 'SPAN', setting_realesrgan_enabled_models: 'SPAN',
setting_realesrgan_enabled_models: 'SPAN', extras_upscaler_1: 'SPAN',
extras_upscaler_1: 'SPAN', extras_upscaler_2: 'SPAN',
extras_upscaler_2: 'SPAN', };
}
var re_num = /^[.\d]+$/;
re_num = /^[\.\d]+$/ var re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u;
re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u
var original_lines = {};
original_lines = {} var translated_lines = {};
translated_lines = {}
function hasLocalization() {
function hasLocalization() { return window.localization && Object.keys(window.localization).length > 0;
return window.localization && Object.keys(window.localization).length > 0; }
}
function textNodesUnder(el) {
function textNodesUnder(el){ var n, a = [], walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false); while ((n = walk.nextNode())) a.push(n);
while(n=walk.nextNode()) a.push(n); return a;
return a; }
}
function canBeTranslated(node, text) {
function canBeTranslated(node, text){ if (!text) return false;
if(! text) return false; if (!node.parentElement) return false;
if(! node.parentElement) return false;
var parentType = node.parentElement.nodeName;
var parentType = node.parentElement.nodeName if (parentType == 'SCRIPT' || parentType == 'STYLE' || parentType == 'TEXTAREA') return false;
if(parentType=='SCRIPT' || parentType=='STYLE' || parentType=='TEXTAREA') return false;
if (parentType == 'OPTION' || parentType == 'SPAN') {
if (parentType=='OPTION' || parentType=='SPAN'){ var pnode = node;
var pnode = node for (var level = 0; level < 4; level++) {
for(var level=0; level<4; level++){ pnode = pnode.parentElement;
pnode = pnode.parentElement if (!pnode) break;
if(! pnode) break;
if (ignore_ids_for_localization[pnode.id] == parentType) return false;
if(ignore_ids_for_localization[pnode.id] == parentType) return false; }
} }
}
if (re_num.test(text)) return false;
if(re_num.test(text)) return false; if (re_emoji.test(text)) return false;
if(re_emoji.test(text)) return false; return true;
return true }
}
function getTranslation(text) {
function getTranslation(text){ if (!text) return undefined;
if(! text) return undefined
if (translated_lines[text] === undefined) {
if(translated_lines[text] === undefined){ original_lines[text] = 1;
original_lines[text] = 1 }
}
var tl = localization[text];
tl = localization[text] if (tl !== undefined) {
if(tl !== undefined){ translated_lines[tl] = 1;
translated_lines[tl] = 1 }
}
return tl;
return tl }
}
function processTextNode(node) {
function processTextNode(node){ var text = node.textContent.trim();
var text = node.textContent.trim()
if (!canBeTranslated(node, text)) return;
if(! canBeTranslated(node, text)) return
var tl = getTranslation(text);
tl = getTranslation(text) if (tl !== undefined) {
if(tl !== undefined){ node.textContent = tl;
node.textContent = tl }
} }
}
function processNode(node) {
function processNode(node){ if (node.nodeType == 3) {
if(node.nodeType == 3){ processTextNode(node);
processTextNode(node) return;
return }
}
if (node.title) {
if(node.title){ let tl = getTranslation(node.title);
tl = getTranslation(node.title) if (tl !== undefined) {
if(tl !== undefined){ node.title = tl;
node.title = tl }
} }
}
if (node.placeholder) {
if(node.placeholder){ let tl = getTranslation(node.placeholder);
tl = getTranslation(node.placeholder) if (tl !== undefined) {
if(tl !== undefined){ node.placeholder = tl;
node.placeholder = tl }
} }
}
textNodesUnder(node).forEach(function(node) {
textNodesUnder(node).forEach(function(node){ processTextNode(node);
processTextNode(node) });
}) }
}
function dumpTranslations() {
function dumpTranslations(){ if (!hasLocalization()) {
if(!hasLocalization()) { // If we don't have any localization,
// If we don't have any localization, // we will not have traversed the app to find
// we will not have traversed the app to find // original_lines, so do that now.
// original_lines, so do that now. processNode(gradioApp());
processNode(gradioApp()); }
} var dumped = {};
var dumped = {} if (localization.rtl) {
if (localization.rtl) { dumped.rtl = true;
dumped.rtl = true; }
}
for (const text in original_lines) {
for (const text in original_lines) { if (dumped[text] !== undefined) continue;
if(dumped[text] !== undefined) continue; dumped[text] = localization[text] || text;
dumped[text] = localization[text] || text; }
}
return dumped;
return dumped; }
}
function download_localization() {
function download_localization() { var text = JSON.stringify(dumpTranslations(), null, 4);
var text = JSON.stringify(dumpTranslations(), null, 4)
var element = document.createElement('a');
var element = document.createElement('a'); element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); element.setAttribute('download', "localization.json");
element.setAttribute('download', "localization.json"); element.style.display = 'none';
element.style.display = 'none'; document.body.appendChild(element);
document.body.appendChild(element);
element.click();
element.click();
document.body.removeChild(element);
document.body.removeChild(element); }
}
document.addEventListener("DOMContentLoaded", function() {
document.addEventListener("DOMContentLoaded", function () { if (!hasLocalization()) {
if (!hasLocalization()) { return;
return; }
}
onUiUpdate(function(m) {
onUiUpdate(function (m) { m.forEach(function(mutation) {
m.forEach(function (mutation) { mutation.addedNodes.forEach(function(node) {
mutation.addedNodes.forEach(function (node) { processNode(node);
processNode(node) });
}) });
}); });
})
processNode(gradioApp());
processNode(gradioApp())
if (localization.rtl) { // if the language is from right to left,
if (localization.rtl) { // if the language is from right to left, (new MutationObserver((mutations, observer) => { // wait for the style to load
(new MutationObserver((mutations, observer) => { // wait for the style to load mutations.forEach(mutation => {
mutations.forEach(mutation => { mutation.addedNodes.forEach(node => {
mutation.addedNodes.forEach(node => { if (node.tagName === 'STYLE') {
if (node.tagName === 'STYLE') { observer.disconnect();
observer.disconnect();
for (const x of node.sheet.rules) { // find all rtl media rules
for (const x of node.sheet.rules) { // find all rtl media rules if (Array.from(x.media || []).includes('rtl')) {
if (Array.from(x.media || []).includes('rtl')) { x.media.appendMedium('all'); // enable them
x.media.appendMedium('all'); // enable them }
} }
} }
} });
}) });
}); })).observe(gradioApp(), {childList: true});
})).observe(gradioApp(), { childList: true }); }
} });
})

12
javascript/notification.js
View File

@ -4,14 +4,14 @@ let lastHeadImg = null;
let notificationButton = null; let notificationButton = null;
onUiUpdate(function(){ onUiUpdate(function() {
if(notificationButton == null){ if (notificationButton == null) {
notificationButton = gradioApp().getElementById('request_notifications') notificationButton = gradioApp().getElementById('request_notifications');
if(notificationButton != null){ if (notificationButton != null) {
notificationButton.addEventListener('click', () => { notificationButton.addEventListener('click', () => {
void Notification.requestPermission(); void Notification.requestPermission();
},true); }, true);
} }
} }
@ -42,7 +42,7 @@ onUiUpdate(function(){
} }
); );
notification.onclick = function(_){ notification.onclick = function(_) {
parent.focus(); parent.focus();
this.close(); this.close();
}; };

178
javascript/progressbar.js
View File

@ -1,29 +1,29 @@
// code related to showing and updating progressbar shown as the image is being made // code related to showing and updating progressbar shown as the image is being made
function rememberGallerySelection(){ function rememberGallerySelection() {
} }
function getGallerySelectedIndex(){ function getGallerySelectedIndex() {
} }
function request(url, data, handler, errorHandler){ function request(url, data, handler, errorHandler) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open("POST", url, true); xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () { xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { if (xhr.readyState === 4) {
if (xhr.status === 200) { if (xhr.status === 200) {
try { try {
var js = JSON.parse(xhr.responseText); var js = JSON.parse(xhr.responseText);
handler(js) handler(js);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
errorHandler() errorHandler();
} }
} else{ } else {
errorHandler() errorHandler();
} }
} }
}; };
@ -31,147 +31,147 @@ function request(url, data, handler, errorHandler){
xhr.send(js); xhr.send(js);
} }
function pad2(x){ function pad2(x) {
return x<10 ? '0'+x : x return x < 10 ? '0' + x : x;
} }
function formatTime(secs){ function formatTime(secs) {
if(secs > 3600){ if (secs > 3600) {
return pad2(Math.floor(secs/60/60)) + ":" + pad2(Math.floor(secs/60)%60) + ":" + pad2(Math.floor(secs)%60) return pad2(Math.floor(secs / 60 / 60)) + ":" + pad2(Math.floor(secs / 60) % 60) + ":" + pad2(Math.floor(secs) % 60);
} else if(secs > 60){ } else if (secs > 60) {
return pad2(Math.floor(secs/60)) + ":" + pad2(Math.floor(secs)%60) return pad2(Math.floor(secs / 60)) + ":" + pad2(Math.floor(secs) % 60);
} else{ } else {
return Math.floor(secs) + "s" return Math.floor(secs) + "s";
} }
} }
function setTitle(progress){ function setTitle(progress) {
var title = 'Stable Diffusion' var title = 'Stable Diffusion';
if(opts.show_progress_in_title && progress){ if (opts.show_progress_in_title && progress) {
title = '[' + progress.trim() + '] ' + title; title = '[' + progress.trim() + '] ' + title;
} }
if(document.title != title){ if (document.title != title) {
document.title = title; document.title = title;
} }
} }
function randomId(){ function randomId() {
return "task(" + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7)+")" return "task(" + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7) + ")";
} }
// starts sending progress requests to "/internal/progress" uri, creating progressbar above progressbarContainer element and // starts sending progress requests to "/internal/progress" uri, creating progressbar above progressbarContainer element and
// preview inside gallery element. Cleans up all created stuff when the task is over and calls atEnd. // preview inside gallery element. Cleans up all created stuff when the task is over and calls atEnd.
// calls onProgress every time there is a progress update // calls onProgress every time there is a progress update
function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgress, inactivityTimeout=40){ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgress, inactivityTimeout = 40) {
var dateStart = new Date() var dateStart = new Date();
var wasEverActive = false var wasEverActive = false;
var parentProgressbar = progressbarContainer.parentNode var parentProgressbar = progressbarContainer.parentNode;
var parentGallery = gallery ? gallery.parentNode : null var parentGallery = gallery ? gallery.parentNode : null;
var divProgress = document.createElement('div') var divProgress = document.createElement('div');
divProgress.className='progressDiv' divProgress.className = 'progressDiv';
divProgress.style.display = opts.show_progressbar ? "block" : "none" divProgress.style.display = opts.show_progressbar ? "block" : "none";
var divInner = document.createElement('div') var divInner = document.createElement('div');
divInner.className='progress' divInner.className = 'progress';
divProgress.appendChild(divInner) divProgress.appendChild(divInner);
parentProgressbar.insertBefore(divProgress, progressbarContainer) parentProgressbar.insertBefore(divProgress, progressbarContainer);
if(parentGallery){ if (parentGallery) {
var livePreview = document.createElement('div') var livePreview = document.createElement('div');
livePreview.className='livePreview' livePreview.className = 'livePreview';
parentGallery.insertBefore(livePreview, gallery) parentGallery.insertBefore(livePreview, gallery);
} }
var removeProgressBar = function(){ var removeProgressBar = function() {
setTitle("") setTitle("");
parentProgressbar.removeChild(divProgress) parentProgressbar.removeChild(divProgress);
if(parentGallery) parentGallery.removeChild(livePreview) if (parentGallery) parentGallery.removeChild(livePreview);
atEnd() atEnd();
} };
var fun = function(id_task, id_live_preview){ var fun = function(id_task, id_live_preview) {
request("./internal/progress", {"id_task": id_task, "id_live_preview": id_live_preview}, function(res){ request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) {
if(res.completed){ if (res.completed) {
removeProgressBar() removeProgressBar();
return return;
} }
var rect = progressbarContainer.getBoundingClientRect() var rect = progressbarContainer.getBoundingClientRect();
if(rect.width){ if (rect.width) {
divProgress.style.width = rect.width + "px"; divProgress.style.width = rect.width + "px";
} }
let progressText = "" let progressText = "";
divInner.style.width = ((res.progress || 0) * 100.0) + '%' divInner.style.width = ((res.progress || 0) * 100.0) + '%';
divInner.style.background = res.progress ? "" : "transparent" divInner.style.background = res.progress ? "" : "transparent";
if(res.progress > 0){ if (res.progress > 0) {
progressText = ((res.progress || 0) * 100.0).toFixed(0) + '%' progressText = ((res.progress || 0) * 100.0).toFixed(0) + '%';
} }
if(res.eta){ if (res.eta) {
progressText += " ETA: " + formatTime(res.eta) progressText += " ETA: " + formatTime(res.eta);
} }
setTitle(progressText) setTitle(progressText);
if(res.textinfo && res.textinfo.indexOf("\n") == -1){ if (res.textinfo && res.textinfo.indexOf("\n") == -1) {
progressText = res.textinfo + " " + progressText progressText = res.textinfo + " " + progressText;
} }
divInner.textContent = progressText divInner.textContent = progressText;
var elapsedFromStart = (new Date() - dateStart) / 1000 var elapsedFromStart = (new Date() - dateStart) / 1000;
if(res.active) wasEverActive = true; if (res.active) wasEverActive = true;
if(! res.active && wasEverActive){ if (!res.active && wasEverActive) {
removeProgressBar() removeProgressBar();
return return;
} }
if(elapsedFromStart > inactivityTimeout && !res.queued && !res.active){ if (elapsedFromStart > inactivityTimeout && !res.queued && !res.active) {
removeProgressBar() removeProgressBar();
return return;
} }
if(res.live_preview && gallery){ if (res.live_preview && gallery) {
var rect = gallery.getBoundingClientRect() rect = gallery.getBoundingClientRect();
if(rect.width){ if (rect.width) {
livePreview.style.width = rect.width + "px" livePreview.style.width = rect.width + "px";
livePreview.style.height = rect.height + "px" livePreview.style.height = rect.height + "px";
} }
var img = new Image(); var img = new Image();
img.onload = function() { img.onload = function() {
livePreview.appendChild(img) livePreview.appendChild(img);
if(livePreview.childElementCount > 2){ if (livePreview.childElementCount > 2) {
livePreview.removeChild(livePreview.firstElementChild) livePreview.removeChild(livePreview.firstElementChild);
} }
} };
img.src = res.live_preview; img.src = res.live_preview;
} }
if(onProgress){ if (onProgress) {
onProgress(res) onProgress(res);
} }
setTimeout(() => { setTimeout(() => {
fun(id_task, res.id_live_preview); fun(id_task, res.id_live_preview);
}, opts.live_preview_refresh_period || 500) }, opts.live_preview_refresh_period || 500);
}, function(){ }, function() {
removeProgressBar() removeProgressBar();
}) });
} };
fun(id_task, 0) fun(id_task, 0);
} }

34
javascript/textualInversion.js
View File

@ -1,17 +1,17 @@
function start_training_textual_inversion(){ function start_training_textual_inversion() {
gradioApp().querySelector('#ti_error').innerHTML='' gradioApp().querySelector('#ti_error').innerHTML = '';
var id = randomId() var id = randomId();
requestProgress(id, gradioApp().getElementById('ti_output'), gradioApp().getElementById('ti_gallery'), function(){}, function(progress){ requestProgress(id, gradioApp().getElementById('ti_output'), gradioApp().getElementById('ti_gallery'), function() {}, function(progress) {
gradioApp().getElementById('ti_progress').innerHTML = progress.textinfo gradioApp().getElementById('ti_progress').innerHTML = progress.textinfo;
}) });
var res = args_to_array(arguments) var res = args_to_array(arguments);
res[0] = id res[0] = id;
return res return res;
} }

419
javascript/ui.js
View File

@ -1,9 +1,9 @@
// various functions for interaction with ui.py not large enough to warrant putting them in separate files // various functions for interaction with ui.py not large enough to warrant putting them in separate files
function set_theme(theme){ function set_theme(theme) {
var gradioURL = window.location.href var gradioURL = window.location.href;
if (!gradioURL.includes('?__theme=')) { if (!gradioURL.includes('?__theme=')) {
window.location.replace(gradioURL + '?__theme=' + theme); window.location.replace(gradioURL + '?__theme=' + theme);
} }
} }
@ -14,7 +14,7 @@ function all_gallery_buttons() {
if (elem.parentElement.offsetParent) { if (elem.parentElement.offsetParent) {
visibleGalleryButtons.push(elem); visibleGalleryButtons.push(elem);
} }
}) });
return visibleGalleryButtons; return visibleGalleryButtons;
} }
@ -25,31 +25,35 @@ function selected_gallery_button() {
if (elem.parentElement.offsetParent) { if (elem.parentElement.offsetParent) {
visibleCurrentButton = elem; visibleCurrentButton = elem;
} }
}) });
return visibleCurrentButton; return visibleCurrentButton;
} }
function selected_gallery_index(){ function selected_gallery_index() {
var buttons = all_gallery_buttons(); var buttons = all_gallery_buttons();
var button = selected_gallery_button(); var button = selected_gallery_button();
var result = -1 var result = -1;
buttons.forEach(function(v, i){ if(v==button) { result = i } }) buttons.forEach(function(v, i) {
if (v == button) {
result = i;
}
});
return result return result;
} }
function extract_image_from_gallery(gallery){ function extract_image_from_gallery(gallery) {
if (gallery.length == 0){ if (gallery.length == 0) {
return [null]; return [null];
} }
if (gallery.length == 1){ if (gallery.length == 1) {
return [gallery[0]]; return [gallery[0]];
} }
var index = selected_gallery_index() var index = selected_gallery_index();
if (index < 0 || index >= gallery.length){ if (index < 0 || index >= gallery.length) {
// Use the first image in the gallery as the default // Use the first image in the gallery as the default
index = 0; index = 0;
} }
@ -57,249 +61,242 @@ function extract_image_from_gallery(gallery){
return [gallery[index]]; return [gallery[index]];
} }
function args_to_array(args){ function args_to_array(args) {
var res = [] var res = [];
for(var i=0;i<args.length;i++){ for (var i = 0; i < args.length; i++) {
res.push(args[i]) res.push(args[i]);
} }
return res return res;
} }
function switch_to_txt2img(){ function switch_to_txt2img() {
gradioApp().querySelector('#tabs').querySelectorAll('button')[0].click(); gradioApp().querySelector('#tabs').querySelectorAll('button')[0].click();
return args_to_array(arguments); return args_to_array(arguments);
} }
function switch_to_img2img_tab(no){ function switch_to_img2img_tab(no) {
gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click(); gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
gradioApp().getElementById('mode_img2img').querySelectorAll('button')[no].click(); gradioApp().getElementById('mode_img2img').querySelectorAll('button')[no].click();
} }
function switch_to_img2img(){ function switch_to_img2img() {
switch_to_img2img_tab(0); switch_to_img2img_tab(0);
return args_to_array(arguments); return args_to_array(arguments);
} }
function switch_to_sketch(){ function switch_to_sketch() {
switch_to_img2img_tab(1); switch_to_img2img_tab(1);
return args_to_array(arguments); return args_to_array(arguments);
} }
function switch_to_inpaint(){ function switch_to_inpaint() {
switch_to_img2img_tab(2); switch_to_img2img_tab(2);
return args_to_array(arguments); return args_to_array(arguments);
} }
function switch_to_inpaint_sketch(){ function switch_to_inpaint_sketch() {
switch_to_img2img_tab(3); switch_to_img2img_tab(3);
return args_to_array(arguments); return args_to_array(arguments);
} }
function switch_to_inpaint(){ function switch_to_extras() {
gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
gradioApp().getElementById('mode_img2img').querySelectorAll('button')[2].click();
return args_to_array(arguments);
}
function switch_to_extras(){
gradioApp().querySelector('#tabs').querySelectorAll('button')[2].click(); gradioApp().querySelector('#tabs').querySelectorAll('button')[2].click();
return args_to_array(arguments); return args_to_array(arguments);
} }
function get_tab_index(tabId){ function get_tab_index(tabId) {
var res = 0 var res = 0;
gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button').forEach(function(button, i){ gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button').forEach(function(button, i) {
if(button.className.indexOf('selected') != -1) if (button.className.indexOf('selected') != -1) {
res = i res = i;
}) }
});
return res return res;
} }
function create_tab_index_args(tabId, args){ function create_tab_index_args(tabId, args) {
var res = [] var res = [];
for(var i=0; i<args.length; i++){ for (var i = 0; i < args.length; i++) {
res.push(args[i]) res.push(args[i]);
} }
res[0] = get_tab_index(tabId) res[0] = get_tab_index(tabId);
return res return res;
} }
function get_img2img_tab_index() { function get_img2img_tab_index() {
let res = args_to_array(arguments) let res = args_to_array(arguments);
res.splice(-2) res.splice(-2);
res[0] = get_tab_index('mode_img2img') res[0] = get_tab_index('mode_img2img');
return res return res;
} }
function create_submit_args(args){ function create_submit_args(args) {
var res = [] var res = [];
for(var i=0;i<args.length;i++){ for (var i = 0; i < args.length; i++) {
res.push(args[i]) res.push(args[i]);
} }
// As it is currently, txt2img and img2img send back the previous output args (txt2img_gallery, generation_info, html_info) whenever you generate a new image. // As it is currently, txt2img and img2img send back the previous output args (txt2img_gallery, generation_info, html_info) whenever you generate a new image.
// This can lead to uploading a huge gallery of previously generated images, which leads to an unnecessary delay between submitting and beginning to generate. // This can lead to uploading a huge gallery of previously generated images, which leads to an unnecessary delay between submitting and beginning to generate.
// I don't know why gradio is sending outputs along with inputs, but we can prevent sending the image gallery here, which seems to be an issue for some. // I don't know why gradio is sending outputs along with inputs, but we can prevent sending the image gallery here, which seems to be an issue for some.
// If gradio at some point stops sending outputs, this may break something // If gradio at some point stops sending outputs, this may break something
if(Array.isArray(res[res.length - 3])){ if (Array.isArray(res[res.length - 3])) {
res[res.length - 3] = null res[res.length - 3] = null;
} }
return res return res;
} }
function showSubmitButtons(tabname, show){ function showSubmitButtons(tabname, show) {
gradioApp().getElementById(tabname+'_interrupt').style.display = show ? "none" : "block" gradioApp().getElementById(tabname + '_interrupt').style.display = show ? "none" : "block";
gradioApp().getElementById(tabname+'_skip').style.display = show ? "none" : "block" gradioApp().getElementById(tabname + '_skip').style.display = show ? "none" : "block";
} }
function showRestoreProgressButton(tabname, show){ function showRestoreProgressButton(tabname, show) {
var button = gradioApp().getElementById(tabname + "_restore_progress") var button = gradioApp().getElementById(tabname + "_restore_progress");
if(! button) return if (!button) return;
button.style.display = show ? "flex" : "none" button.style.display = show ? "flex" : "none";
} }
function submit(){ function submit() {
rememberGallerySelection('txt2img_gallery') showSubmitButtons('txt2img', false);
showSubmitButtons('txt2img', false)
var id = randomId() var id = randomId();
localStorage.setItem("txt2img_task_id", id); localStorage.setItem("txt2img_task_id", id);
requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function(){ requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
showSubmitButtons('txt2img', true) showSubmitButtons('txt2img', true);
localStorage.removeItem("txt2img_task_id") localStorage.removeItem("txt2img_task_id");
showRestoreProgressButton('txt2img', false) showRestoreProgressButton('txt2img', false);
}) });
var res = create_submit_args(arguments) var res = create_submit_args(arguments);
res[0] = id res[0] = id;
return res return res;
} }
function submit_img2img(){ function submit_img2img() {
rememberGallerySelection('img2img_gallery') showSubmitButtons('img2img', false);
showSubmitButtons('img2img', false)
var id = randomId() var id = randomId();
localStorage.setItem("img2img_task_id", id); localStorage.setItem("img2img_task_id", id);
requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function(){ requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
showSubmitButtons('img2img', true) showSubmitButtons('img2img', true);
localStorage.removeItem("img2img_task_id") localStorage.removeItem("img2img_task_id");
showRestoreProgressButton('img2img', false) showRestoreProgressButton('img2img', false);
}) });
var res = create_submit_args(arguments) var res = create_submit_args(arguments);
res[0] = id res[0] = id;
res[1] = get_tab_index('mode_img2img') res[1] = get_tab_index('mode_img2img');
return res return res;
} }
function restoreProgressTxt2img(){ function restoreProgressTxt2img() {
showRestoreProgressButton("txt2img", false) showRestoreProgressButton("txt2img", false);
var id = localStorage.getItem("txt2img_task_id") var id = localStorage.getItem("txt2img_task_id");
id = localStorage.getItem("txt2img_task_id") id = localStorage.getItem("txt2img_task_id");
if(id) { if (id) {
requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function(){ requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
showSubmitButtons('txt2img', true) showSubmitButtons('txt2img', true);
}, null, 0) }, null, 0);
} }
return id return id;
} }
function restoreProgressImg2img(){ function restoreProgressImg2img() {
showRestoreProgressButton("img2img", false) showRestoreProgressButton("img2img", false);
var id = localStorage.getItem("img2img_task_id")
if(id) { var id = localStorage.getItem("img2img_task_id");
requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function(){
showSubmitButtons('img2img', true) if (id) {
}, null, 0) requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
showSubmitButtons('img2img', true);
}, null, 0);
} }
return id return id;
} }
onUiLoaded(function () { onUiLoaded(function() {
showRestoreProgressButton('txt2img', localStorage.getItem("txt2img_task_id")) showRestoreProgressButton('txt2img', localStorage.getItem("txt2img_task_id"));
showRestoreProgressButton('img2img', localStorage.getItem("img2img_task_id")) showRestoreProgressButton('img2img', localStorage.getItem("img2img_task_id"));
}); });
function modelmerger(){ function modelmerger() {
var id = randomId() var id = randomId();
requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null, function(){}) requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null, function() {});
var res = create_submit_args(arguments) var res = create_submit_args(arguments);
res[0] = id res[0] = id;
return res return res;
} }
function ask_for_style_name(_, prompt_text, negative_prompt_text) { function ask_for_style_name(_, prompt_text, negative_prompt_text) {
var name_ = prompt('Style name:') var name_ = prompt('Style name:');
return [name_, prompt_text, negative_prompt_text] return [name_, prompt_text, negative_prompt_text];
} }
function confirm_clear_prompt(prompt, negative_prompt) { function confirm_clear_prompt(prompt, negative_prompt) {
if(confirm("Delete prompt?")) { if (confirm("Delete prompt?")) {
prompt = "" prompt = "";
negative_prompt = "" negative_prompt = "";
} }
return [prompt, negative_prompt] return [prompt, negative_prompt];
} }
promptTokecountUpdateFuncs = {} var promptTokecountUpdateFuncs = {};
function recalculatePromptTokens(name){ function recalculatePromptTokens(name) {
if(promptTokecountUpdateFuncs[name]){ if (promptTokecountUpdateFuncs[name]) {
promptTokecountUpdateFuncs[name]() promptTokecountUpdateFuncs[name]();
} }
} }
function recalculate_prompts_txt2img(){ function recalculate_prompts_txt2img() {
recalculatePromptTokens('txt2img_prompt') recalculatePromptTokens('txt2img_prompt');
recalculatePromptTokens('txt2img_neg_prompt') recalculatePromptTokens('txt2img_neg_prompt');
return args_to_array(arguments); return args_to_array(arguments);
} }
function recalculate_prompts_img2img(){ function recalculate_prompts_img2img() {
recalculatePromptTokens('img2img_prompt') recalculatePromptTokens('img2img_prompt');
recalculatePromptTokens('img2img_neg_prompt') recalculatePromptTokens('img2img_neg_prompt');
return args_to_array(arguments); return args_to_array(arguments);
} }
var opts = {} var opts = {};
onUiUpdate(function(){ onUiUpdate(function() {
if(Object.keys(opts).length != 0) return; if (Object.keys(opts).length != 0) return;
var json_elem = gradioApp().getElementById('settings_json') var json_elem = gradioApp().getElementById('settings_json');
if(json_elem == null) return; if (json_elem == null) return;
var textarea = json_elem.querySelector('textarea') var textarea = json_elem.querySelector('textarea');
var jsdata = textarea.value var jsdata = textarea.value;
opts = JSON.parse(jsdata) opts = JSON.parse(jsdata);
executeCallbacks(optionsChangedCallbacks);
executeCallbacks(optionsChangedCallbacks); /*global optionsChangedCallbacks*/
Object.defineProperty(textarea, 'value', { Object.defineProperty(textarea, 'value', {
set: function(newValue) { set: function(newValue) {
@ -308,7 +305,7 @@ onUiUpdate(function(){
valueProp.set.call(textarea, newValue); valueProp.set.call(textarea, newValue);
if (oldValue != newValue) { if (oldValue != newValue) {
opts = JSON.parse(textarea.value) opts = JSON.parse(textarea.value);
} }
executeCallbacks(optionsChangedCallbacks); executeCallbacks(optionsChangedCallbacks);
@ -319,122 +316,130 @@ onUiUpdate(function(){
} }
}); });
json_elem.parentElement.style.display="none" json_elem.parentElement.style.display = "none";
function registerTextarea(id, id_counter, id_button){ function registerTextarea(id, id_counter, id_button) {
var prompt = gradioApp().getElementById(id) var prompt = gradioApp().getElementById(id);
var counter = gradioApp().getElementById(id_counter) var counter = gradioApp().getElementById(id_counter);
var textarea = gradioApp().querySelector("#" + id + " > label > textarea"); var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
if(counter.parentElement == prompt.parentElement){ if (counter.parentElement == prompt.parentElement) {
return return;
} }
prompt.parentElement.insertBefore(counter, prompt) prompt.parentElement.insertBefore(counter, prompt);
prompt.parentElement.style.position = "relative" prompt.parentElement.style.position = "relative";
promptTokecountUpdateFuncs[id] = function(){ update_token_counter(id_button); } promptTokecountUpdateFuncs[id] = function() {
textarea.addEventListener("input", promptTokecountUpdateFuncs[id]); update_token_counter(id_button);
};
textarea.addEventListener("input", promptTokecountUpdateFuncs[id]);
} }
registerTextarea('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button') registerTextarea('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button');
registerTextarea('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button') registerTextarea('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button');
registerTextarea('img2img_prompt', 'img2img_token_counter', 'img2img_token_button') registerTextarea('img2img_prompt', 'img2img_token_counter', 'img2img_token_button');
registerTextarea('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button') registerTextarea('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button');
var show_all_pages = gradioApp().getElementById('settings_show_all_pages') var show_all_pages = gradioApp().getElementById('settings_show_all_pages');
var settings_tabs = gradioApp().querySelector('#settings div') var settings_tabs = gradioApp().querySelector('#settings div');
if(show_all_pages && settings_tabs){ if (show_all_pages && settings_tabs) {
settings_tabs.appendChild(show_all_pages) settings_tabs.appendChild(show_all_pages);
show_all_pages.onclick = function(){ show_all_pages.onclick = function() {
gradioApp().querySelectorAll('#settings > div').forEach(function(elem){ gradioApp().querySelectorAll('#settings > div').forEach(function(elem) {
if(elem.id == "settings_tab_licenses") if (elem.id == "settings_tab_licenses") {
return; return;
}
elem.style.display = "block"; elem.style.display = "block";
}) });
} };
} }
}) });
onOptionsChanged(function(){ onOptionsChanged(function() {
var elem = gradioApp().getElementById('sd_checkpoint_hash') var elem = gradioApp().getElementById('sd_checkpoint_hash');
var sd_checkpoint_hash = opts.sd_checkpoint_hash || "" var sd_checkpoint_hash = opts.sd_checkpoint_hash || "";
var shorthash = sd_checkpoint_hash.substring(0,10) var shorthash = sd_checkpoint_hash.substring(0, 10);
if(elem && elem.textContent != shorthash){ if (elem && elem.textContent != shorthash) {
elem.textContent = shorthash elem.textContent = shorthash;
elem.title = sd_checkpoint_hash elem.title = sd_checkpoint_hash;
elem.href = "https://google.com/search?q=" + sd_checkpoint_hash elem.href = "https://google.com/search?q=" + sd_checkpoint_hash;
} }
}) });
let txt2img_textarea, img2img_textarea = undefined; let txt2img_textarea, img2img_textarea = undefined;
let wait_time = 800 let wait_time = 800;
let token_timeouts = {}; let token_timeouts = {};
function update_txt2img_tokens(...args) { function update_txt2img_tokens(...args) {
update_token_counter("txt2img_token_button") update_token_counter("txt2img_token_button");
if (args.length == 2) if (args.length == 2) {
return args[0] return args[0];
return args; }
return args;
} }
function update_img2img_tokens(...args) { function update_img2img_tokens(...args) {
update_token_counter("img2img_token_button") update_token_counter(
if (args.length == 2) "img2img_token_button"
return args[0] );
return args; if (args.length == 2) {
return args[0];
}
return args;
} }
function update_token_counter(button_id) { function update_token_counter(button_id) {
if (token_timeouts[button_id]) if (token_timeouts[button_id]) {
clearTimeout(token_timeouts[button_id]); clearTimeout(token_timeouts[button_id]);
token_timeouts[button_id] = setTimeout(() => gradioApp().getElementById(button_id)?.click(), wait_time); }
token_timeouts[button_id] = setTimeout(() => gradioApp().getElementById(button_id)?.click(), wait_time);
} }
function restart_reload(){ function restart_reload() {
document.body.innerHTML='<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>'; document.body.innerHTML = '<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
var requestPing = function(){ var requestPing = function() {
requestGet("./internal/ping", {}, function(data){ requestGet("./internal/ping", {}, function(data) {
location.reload(); location.reload();
}, function(){ }, function() {
setTimeout(requestPing, 500); setTimeout(requestPing, 500);
}) });
} };
setTimeout(requestPing, 2000); setTimeout(requestPing, 2000);
return [] return [];
} }
// Simulate an `input` DOM event for Gradio Textbox component. Needed after you edit its contents in javascript, otherwise your edits // Simulate an `input` DOM event for Gradio Textbox component. Needed after you edit its contents in javascript, otherwise your edits
// will only visible on web page and not sent to python. // will only visible on web page and not sent to python.
function updateInput(target){ function updateInput(target) {
let e = new Event("input", { bubbles: true }) let e = new Event("input", {bubbles: true});
Object.defineProperty(e, "target", {value: target}) Object.defineProperty(e, "target", {value: target});
target.dispatchEvent(e); target.dispatchEvent(e);
} }
var desiredCheckpointName = null; var desiredCheckpointName = null;
function selectCheckpoint(name){ function selectCheckpoint(name) {
desiredCheckpointName = name; desiredCheckpointName = name;
gradioApp().getElementById('change_checkpoint').click() gradioApp().getElementById('change_checkpoint').click();
} }
function currentImg2imgSourceResolution(_, _, scaleBy){ function currentImg2imgSourceResolution(w, h, scaleBy) {
var img = gradioApp().querySelector('#mode_img2img > div[style="display: block;"] img') var img = gradioApp().querySelector('#mode_img2img > div[style="display: block;"] img');
return img ? [img.naturalWidth, img.naturalHeight, scaleBy] : [0, 0, scaleBy] return img ? [img.naturalWidth, img.naturalHeight, scaleBy] : [0, 0, scaleBy];
} }
function updateImg2imgResizeToTextAfterChangingImage(){ function updateImg2imgResizeToTextAfterChangingImage() {
// At the time this is called from gradio, the image has no yet been replaced. // At the time this is called from gradio, the image has no yet been replaced.
// There may be a better solution, but this is simple and straightforward so I'm going with it. // There may be a better solution, but this is simple and straightforward so I'm going with it.
setTimeout(function() { setTimeout(function() {
gradioApp().getElementById('img2img_update_resize_to').click() gradioApp().getElementById('img2img_update_resize_to').click();
}, 500); }, 500);
return [] return []

124
javascript/ui_settings_hints.js
View File

@ -1,62 +1,62 @@
// various hints and extra info for the settings tab // various hints and extra info for the settings tab
settingsHintsSetup = false var settingsHintsSetup = false;
onOptionsChanged(function(){ onOptionsChanged(function() {
if(settingsHintsSetup) return if (settingsHintsSetup) return;
settingsHintsSetup = true settingsHintsSetup = true;
gradioApp().querySelectorAll('#settings [id^=setting_]').forEach(function(div){ gradioApp().querySelectorAll('#settings [id^=setting_]').forEach(function(div) {
var name = div.id.substr(8) var name = div.id.substr(8);
var commentBefore = opts._comments_before[name] var commentBefore = opts._comments_before[name];
var commentAfter = opts._comments_after[name] var commentAfter = opts._comments_after[name];
if(! commentBefore && !commentAfter) return if (!commentBefore && !commentAfter) return;
var span = null var span = null;
if(div.classList.contains('gradio-checkbox')) span = div.querySelector('label span') if (div.classList.contains('gradio-checkbox')) span = div.querySelector('label span');
else if(div.classList.contains('gradio-checkboxgroup')) span = div.querySelector('span').firstChild else if (div.classList.contains('gradio-checkboxgroup')) span = div.querySelector('span').firstChild;
else if(div.classList.contains('gradio-radio')) span = div.querySelector('span').firstChild else if (div.classList.contains('gradio-radio')) span = div.querySelector('span').firstChild;
else span = div.querySelector('label span').firstChild else span = div.querySelector('label span').firstChild;
if(!span) return if (!span) return;
if(commentBefore){ if (commentBefore) {
var comment = document.createElement('DIV') var comment = document.createElement('DIV');
comment.className = 'settings-comment' comment.className = 'settings-comment';
comment.innerHTML = commentBefore comment.innerHTML = commentBefore;
span.parentElement.insertBefore(document.createTextNode('\xa0'), span) span.parentElement.insertBefore(document.createTextNode('\xa0'), span);
span.parentElement.insertBefore(comment, span) span.parentElement.insertBefore(comment, span);
span.parentElement.insertBefore(document.createTextNode('\xa0'), span) span.parentElement.insertBefore(document.createTextNode('\xa0'), span);
} }
if(commentAfter){ if (commentAfter) {
var comment = document.createElement('DIV') comment = document.createElement('DIV');
comment.className = 'settings-comment' comment.className = 'settings-comment';
comment.innerHTML = commentAfter comment.innerHTML = commentAfter;
span.parentElement.insertBefore(comment, span.nextSibling) span.parentElement.insertBefore(comment, span.nextSibling);
span.parentElement.insertBefore(document.createTextNode('\xa0'), span.nextSibling) span.parentElement.insertBefore(document.createTextNode('\xa0'), span.nextSibling);
} }
}) });
}) });
function settingsHintsShowQuicksettings(){ function settingsHintsShowQuicksettings() {
requestGet("./internal/quicksettings-hint", {}, function(data){ requestGet("./internal/quicksettings-hint", {}, function(data) {
var table = document.createElement('table') var table = document.createElement('table');
table.className = 'settings-value-table' table.className = 'settings-value-table';
data.forEach(function(obj){ data.forEach(function(obj) {
var tr = document.createElement('tr') var tr = document.createElement('tr');
var td = document.createElement('td') var td = document.createElement('td');
td.textContent = obj.name td.textContent = obj.name;
tr.appendChild(td) tr.appendChild(td);
var td = document.createElement('td') td = document.createElement('td');
td.textContent = obj.label td.textContent = obj.label;
tr.appendChild(td) tr.appendChild(td);
table.appendChild(tr) table.appendChild(tr);
}) });
popup(table); popup(table);
}) });
} }

11
package.json Normal file
View File

@ -0,0 +1,11 @@
{
"name": "stable-diffusion-webui",
"version": "0.0.0",
"devDependencies": {
"eslint": "^8.40.0"
},
"scripts": {
"lint": "eslint .",
"fix": "eslint --fix ."
}
}

76
script.js
View File

@ -1,66 +1,72 @@
function gradioApp() { function gradioApp() {
const elems = document.getElementsByTagName('gradio-app') const elems = document.getElementsByTagName('gradio-app');
const elem = elems.length == 0 ? document : elems[0] const elem = elems.length == 0 ? document : elems[0];
if (elem !== document) elem.getElementById = function(id){ return document.getElementById(id) } if (elem !== document) {
return elem.shadowRoot ? elem.shadowRoot : elem elem.getElementById = function(id) {
return document.getElementById(id);
};
}
return elem.shadowRoot ? elem.shadowRoot : elem;
} }
function get_uiCurrentTab() { function get_uiCurrentTab() {
return gradioApp().querySelector('#tabs button.selected') return gradioApp().querySelector('#tabs button.selected');
} }
function get_uiCurrentTabContent() { function get_uiCurrentTabContent() {
return gradioApp().querySelector('.tabitem[id^=tab_]:not([style*="display: none"])') return gradioApp().querySelector('.tabitem[id^=tab_]:not([style*="display: none"])');
} }
uiUpdateCallbacks = [] var uiUpdateCallbacks = [];
uiLoadedCallbacks = [] var uiLoadedCallbacks = [];
uiTabChangeCallbacks = [] var uiTabChangeCallbacks = [];
optionsChangedCallbacks = [] var optionsChangedCallbacks = [];
let uiCurrentTab = null var uiCurrentTab = null;
function onUiUpdate(callback){ function onUiUpdate(callback) {
uiUpdateCallbacks.push(callback) uiUpdateCallbacks.push(callback);
} }
function onUiLoaded(callback){ function onUiLoaded(callback) {
uiLoadedCallbacks.push(callback) uiLoadedCallbacks.push(callback);
} }
function onUiTabChange(callback){ function onUiTabChange(callback) {
uiTabChangeCallbacks.push(callback) uiTabChangeCallbacks.push(callback);
} }
function onOptionsChanged(callback){ function onOptionsChanged(callback) {
optionsChangedCallbacks.push(callback) optionsChangedCallbacks.push(callback);
} }
function runCallback(x, m){ function runCallback(x, m) {
try { try {
x(m) x(m);
} catch (e) { } catch (e) {
(console.error || console.log).call(console, e.message, e); (console.error || console.log).call(console, e.message, e);
} }
} }
function executeCallbacks(queue, m) { function executeCallbacks(queue, m) {
queue.forEach(function(x){runCallback(x, m)}) queue.forEach(function(x) {
runCallback(x, m);
});
} }
var executedOnLoaded = false; var executedOnLoaded = false;
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
var mutationObserver = new MutationObserver(function(m){ var mutationObserver = new MutationObserver(function(m) {
if(!executedOnLoaded && gradioApp().querySelector('#txt2img_prompt')){ if (!executedOnLoaded && gradioApp().querySelector('#txt2img_prompt')) {
executedOnLoaded = true; executedOnLoaded = true;
executeCallbacks(uiLoadedCallbacks); executeCallbacks(uiLoadedCallbacks);
} }
executeCallbacks(uiUpdateCallbacks, m); executeCallbacks(uiUpdateCallbacks, m);
const newTab = get_uiCurrentTab(); const newTab = get_uiCurrentTab();
if ( newTab && ( newTab !== uiCurrentTab ) ) { if (newTab && (newTab !== uiCurrentTab)) {
uiCurrentTab = newTab; uiCurrentTab = newTab;
executeCallbacks(uiTabChangeCallbacks); executeCallbacks(uiTabChangeCallbacks);
} }
}); });
mutationObserver.observe( gradioApp(), { childList:true, subtree:true }) mutationObserver.observe(gradioApp(), {childList: true, subtree: true});
}); });
/** /**
@ -69,33 +75,33 @@ document.addEventListener("DOMContentLoaded", function() {
document.addEventListener('keydown', function(e) { document.addEventListener('keydown', function(e) {
var handled = false; var handled = false;
if (e.key !== undefined) { if (e.key !== undefined) {
if((e.key == "Enter" && (e.metaKey || e.ctrlKey || e.altKey))) handled = true; if ((e.key == "Enter" && (e.metaKey || e.ctrlKey || e.altKey))) handled = true;
} else if (e.keyCode !== undefined) { } else if (e.keyCode !== undefined) {
if((e.keyCode == 13 && (e.metaKey || e.ctrlKey || e.altKey))) handled = true; if ((e.keyCode == 13 && (e.metaKey || e.ctrlKey || e.altKey))) handled = true;
} }
if (handled) { if (handled) {
button = get_uiCurrentTabContent().querySelector('button[id$=_generate]'); var button = get_uiCurrentTabContent().querySelector('button[id$=_generate]');
if (button) { if (button) {
button.click(); button.click();
} }
e.preventDefault(); e.preventDefault();
} }
}) });
/** /**
* checks that a UI element is not in another hidden element or tab content * checks that a UI element is not in another hidden element or tab content
*/ */
function uiElementIsVisible(el) { function uiElementIsVisible(el) {
let isVisible = !el.closest('.\\!hidden'); let isVisible = !el.closest('.\\!hidden');
if ( ! isVisible ) { if (!isVisible) {
return false; return false;
} }
while( isVisible = el.closest('.tabitem')?.style.display !== 'none' ) { while ((isVisible = el.closest('.tabitem')?.style.display) !== 'none') {
if ( ! isVisible ) { if (!isVisible) {
return false; return false;
} else if ( el.parentElement ) { } else if (el.parentElement) {
el = el.parentElement el = el.parentElement;
} else { } else {
break; break;
} }