2022-11-02 19:05:00 +03:00
// various functions for interaction with ui.py not large enough to warrant putting them in separate files
2022-09-02 23:25:29 +03:00
2023-05-17 15:46:58 +03:00
function set _theme ( theme ) {
var gradioURL = window . location . href ;
2022-10-17 19:24:24 +03:00
if ( ! gradioURL . includes ( '?__theme=' ) ) {
2023-05-17 15:46:58 +03:00
window . location . replace ( gradioURL + '?__theme=' + theme ) ;
2022-10-17 12:05:05 +03:00
}
}
2023-03-25 21:52:47 +03:00
function all _gallery _buttons ( ) {
var allGalleryButtons = gradioApp ( ) . querySelectorAll ( '[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small' ) ;
var visibleGalleryButtons = [ ] ;
allGalleryButtons . forEach ( function ( elem ) {
if ( elem . parentElement . offsetParent ) {
visibleGalleryButtons . push ( elem ) ;
}
2023-05-17 15:46:58 +03:00
} ) ;
2023-03-25 21:52:47 +03:00
return visibleGalleryButtons ;
}
function selected _gallery _button ( ) {
2023-08-19 05:38:43 +03:00
return all _gallery _buttons ( ) . find ( elem => elem . classList . contains ( 'selected' ) ) ? ? null ;
2023-03-25 21:52:47 +03:00
}
2023-05-17 15:46:58 +03:00
function selected _gallery _index ( ) {
2023-08-19 05:38:43 +03:00
return all _gallery _buttons ( ) . findIndex ( elem => elem . classList . contains ( 'selected' ) ) ;
2022-09-02 23:25:29 +03:00
}
2023-05-17 15:46:58 +03:00
function extract _image _from _gallery ( gallery ) {
if ( gallery . length == 0 ) {
2023-03-25 21:52:47 +03:00
return [ null ] ;
}
2023-05-17 15:46:58 +03:00
if ( gallery . length == 1 ) {
2023-03-25 21:52:47 +03:00
return [ gallery [ 0 ] ] ;
2022-09-02 23:25:29 +03:00
}
2023-05-17 15:46:58 +03:00
var index = selected _gallery _index ( ) ;
2022-09-02 23:25:29 +03:00
2023-05-17 15:46:58 +03:00
if ( index < 0 || index >= gallery . length ) {
2023-03-25 21:52:47 +03:00
// Use the first image in the gallery as the default
index = 0 ;
2022-09-02 23:25:29 +03:00
}
2023-01-02 22:44:46 +03:00
return [ gallery [ index ] ] ;
2022-09-11 00:17:34 +03:00
}
2023-05-19 13:01:36 +03:00
window . args _to _array = Array . from ; // Compatibility with e.g. extensions that may expect this to be around
2022-09-23 22:49:21 +03:00
2023-05-17 15:46:58 +03:00
function switch _to _txt2img ( ) {
2022-10-13 20:42:27 +03:00
gradioApp ( ) . querySelector ( '#tabs' ) . querySelectorAll ( 'button' ) [ 0 ] . click ( ) ;
2022-09-23 22:49:21 +03:00
2023-05-19 13:01:36 +03:00
return Array . from ( arguments ) ;
2022-09-23 22:49:21 +03:00
}
2023-05-17 15:46:58 +03:00
function switch _to _img2img _tab ( no ) {
2022-10-13 20:42:27 +03:00
gradioApp ( ) . querySelector ( '#tabs' ) . querySelectorAll ( 'button' ) [ 1 ] . click ( ) ;
2023-01-14 22:43:01 +03:00
gradioApp ( ) . getElementById ( 'mode_img2img' ) . querySelectorAll ( 'button' ) [ no ] . click ( ) ;
}
2023-05-17 15:46:58 +03:00
function switch _to _img2img ( ) {
2023-01-14 22:43:01 +03:00
switch _to _img2img _tab ( 0 ) ;
2023-05-19 13:01:36 +03:00
return Array . from ( arguments ) ;
2023-01-14 22:43:01 +03:00
}
2023-05-17 15:46:58 +03:00
function switch _to _sketch ( ) {
2023-01-14 22:43:01 +03:00
switch _to _img2img _tab ( 1 ) ;
2023-05-19 13:01:36 +03:00
return Array . from ( arguments ) ;
2023-01-14 22:43:01 +03:00
}
2023-05-17 15:46:58 +03:00
function switch _to _inpaint ( ) {
2023-01-14 22:43:01 +03:00
switch _to _img2img _tab ( 2 ) ;
2023-05-19 13:01:36 +03:00
return Array . from ( arguments ) ;
2023-01-14 22:43:01 +03:00
}
2022-09-23 22:49:21 +03:00
2023-05-17 15:46:58 +03:00
function switch _to _inpaint _sketch ( ) {
2023-01-14 22:43:01 +03:00
switch _to _img2img _tab ( 3 ) ;
2023-05-19 13:01:36 +03:00
return Array . from ( arguments ) ;
2022-09-23 22:49:21 +03:00
}
2023-05-17 15:46:58 +03:00
function switch _to _extras ( ) {
2022-10-13 20:42:27 +03:00
gradioApp ( ) . querySelector ( '#tabs' ) . querySelectorAll ( 'button' ) [ 2 ] . click ( ) ;
2022-09-23 22:49:21 +03:00
2023-05-19 13:01:36 +03:00
return Array . from ( arguments ) ;
2022-09-23 22:49:21 +03:00
}
2023-05-17 15:46:58 +03:00
function get _tab _index ( tabId ) {
2023-05-19 13:06:12 +03:00
let buttons = gradioApp ( ) . getElementById ( tabId ) . querySelector ( 'div' ) . querySelectorAll ( 'button' ) ;
for ( let i = 0 ; i < buttons . length ; i ++ ) {
if ( buttons [ i ] . classList . contains ( 'selected' ) ) {
return i ;
2023-05-17 15:46:58 +03:00
}
2023-05-19 13:06:12 +03:00
}
return 0 ;
2022-09-22 12:11:48 +03:00
}
2023-05-17 15:46:58 +03:00
function create _tab _index _args ( tabId , args ) {
2023-05-19 13:01:36 +03:00
var res = Array . from ( args ) ;
2023-05-17 15:46:58 +03:00
res [ 0 ] = get _tab _index ( tabId ) ;
return res ;
2022-09-22 12:11:48 +03:00
}
2023-01-18 20:16:52 +03:00
function get _img2img _tab _index ( ) {
2023-05-19 13:01:36 +03:00
let res = Array . from ( arguments ) ;
2023-05-17 15:46:58 +03:00
res . splice ( - 2 ) ;
res [ 0 ] = get _tab _index ( 'mode_img2img' ) ;
return res ;
2023-01-18 20:16:52 +03:00
}
2023-05-17 15:46:58 +03:00
function create _submit _args ( args ) {
2023-05-19 13:01:36 +03:00
var res = Array . from ( args ) ;
2022-09-17 08:03:47 +03:00
// 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.
2022-12-15 05:01:32 +03:00
// 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.
2022-09-17 08:03:47 +03:00
// If gradio at some point stops sending outputs, this may break something
2023-05-17 15:46:58 +03:00
if ( Array . isArray ( res [ res . length - 3 ] ) ) {
res [ res . length - 3 ] = null ;
2022-09-17 08:03:47 +03:00
}
2023-05-17 15:46:58 +03:00
return res ;
2022-09-07 21:26:19 +03:00
}
2022-09-07 22:58:11 +03:00
2023-05-17 15:46:58 +03:00
function showSubmitButtons ( tabname , show ) {
gradioApp ( ) . getElementById ( tabname + '_interrupt' ) . style . display = show ? "none" : "block" ;
gradioApp ( ) . getElementById ( tabname + '_skip' ) . style . display = show ? "none" : "block" ;
2023-01-15 18:50:56 +03:00
}
2023-05-17 15:46:58 +03:00
function showRestoreProgressButton ( tabname , show ) {
var button = gradioApp ( ) . getElementById ( tabname + "_restore_progress" ) ;
if ( ! button ) return ;
2023-04-29 22:16:54 +03:00
2023-05-17 15:46:58 +03:00
button . style . display = show ? "flex" : "none" ;
2023-04-29 22:16:54 +03:00
}
2023-05-17 15:46:58 +03:00
function submit ( ) {
showSubmitButtons ( 'txt2img' , false ) ;
2023-01-15 18:50:56 +03:00
2023-05-17 15:46:58 +03:00
var id = randomId ( ) ;
2023-08-05 08:48:03 +03:00
localSet ( "txt2img_task_id" , id ) ;
2023-04-29 22:16:54 +03:00
2023-05-17 15:46:58 +03:00
requestProgress ( id , gradioApp ( ) . getElementById ( 'txt2img_gallery_container' ) , gradioApp ( ) . getElementById ( 'txt2img_gallery' ) , function ( ) {
showSubmitButtons ( 'txt2img' , true ) ;
2023-08-05 08:48:03 +03:00
localRemove ( "txt2img_task_id" ) ;
2023-05-17 15:46:58 +03:00
showRestoreProgressButton ( 'txt2img' , false ) ;
} ) ;
2022-09-22 12:11:48 +03:00
2023-05-17 15:46:58 +03:00
var res = create _submit _args ( arguments ) ;
2023-01-15 18:50:56 +03:00
2023-05-17 15:46:58 +03:00
res [ 0 ] = id ;
2023-01-15 18:50:56 +03:00
2023-05-17 15:46:58 +03:00
return res ;
2022-09-22 12:11:48 +03:00
}
2023-05-17 15:46:58 +03:00
function submit _img2img ( ) {
showSubmitButtons ( 'img2img' , false ) ;
2023-01-15 18:50:56 +03:00
2023-05-17 15:46:58 +03:00
var id = randomId ( ) ;
2023-08-05 08:48:03 +03:00
localSet ( "img2img_task_id" , id ) ;
2023-04-29 22:16:54 +03:00
2023-05-17 15:46:58 +03:00
requestProgress ( id , gradioApp ( ) . getElementById ( 'img2img_gallery_container' ) , gradioApp ( ) . getElementById ( 'img2img_gallery' ) , function ( ) {
showSubmitButtons ( 'img2img' , true ) ;
2023-08-05 08:48:03 +03:00
localRemove ( "img2img_task_id" ) ;
2023-05-17 15:46:58 +03:00
showRestoreProgressButton ( 'img2img' , false ) ;
} ) ;
2022-09-22 12:11:48 +03:00
2023-05-17 15:46:58 +03:00
var res = create _submit _args ( arguments ) ;
2022-09-22 12:11:48 +03:00
2023-05-17 15:46:58 +03:00
res [ 0 ] = id ;
res [ 1 ] = get _tab _index ( 'mode_img2img' ) ;
2022-09-22 12:11:48 +03:00
2023-05-17 15:46:58 +03:00
return res ;
2022-09-22 12:11:48 +03:00
}
2023-05-17 15:46:58 +03:00
function restoreProgressTxt2img ( ) {
showRestoreProgressButton ( "txt2img" , false ) ;
2023-08-05 08:48:03 +03:00
var id = localGet ( "txt2img_task_id" ) ;
2023-04-29 22:16:54 +03:00
2023-05-17 15:46:58 +03:00
if ( id ) {
requestProgress ( id , gradioApp ( ) . getElementById ( 'txt2img_gallery_container' ) , gradioApp ( ) . getElementById ( 'txt2img_gallery' ) , function ( ) {
showSubmitButtons ( 'txt2img' , true ) ;
} , null , 0 ) ;
2023-04-29 22:16:54 +03:00
}
2023-05-17 15:46:58 +03:00
return id ;
2023-04-29 22:16:54 +03:00
}
2023-05-01 13:58:10 +03:00
2023-05-17 15:46:58 +03:00
function restoreProgressImg2img ( ) {
showRestoreProgressButton ( "img2img" , false ) ;
2023-04-29 22:16:54 +03:00
2023-08-05 08:48:03 +03:00
var id = localGet ( "img2img_task_id" ) ;
2023-04-29 22:16:54 +03:00
2023-05-17 15:46:58 +03:00
if ( id ) {
requestProgress ( id , gradioApp ( ) . getElementById ( 'img2img_gallery_container' ) , gradioApp ( ) . getElementById ( 'img2img_gallery' ) , function ( ) {
showSubmitButtons ( 'img2img' , true ) ;
} , null , 0 ) ;
2023-04-29 22:16:54 +03:00
}
2023-05-17 15:46:58 +03:00
return id ;
2023-04-29 22:16:54 +03:00
}
2023-05-17 15:46:58 +03:00
onUiLoaded ( function ( ) {
2023-08-05 08:48:03 +03:00
showRestoreProgressButton ( 'txt2img' , localGet ( "txt2img_task_id" ) ) ;
showRestoreProgressButton ( 'img2img' , localGet ( "img2img_task_id" ) ) ;
2023-04-29 22:16:54 +03:00
} ) ;
2023-05-17 15:46:58 +03:00
function modelmerger ( ) {
var id = randomId ( ) ;
requestProgress ( id , gradioApp ( ) . getElementById ( 'modelmerger_results_panel' ) , null , function ( ) { } ) ;
2023-01-19 09:25:37 +03:00
2023-05-17 15:46:58 +03:00
var res = create _submit _args ( arguments ) ;
res [ 0 ] = id ;
return res ;
2023-01-19 09:25:37 +03:00
}
2022-09-22 12:11:48 +03:00
2022-09-11 17:35:12 +03:00
function ask _for _style _name ( _ , prompt _text , negative _prompt _text ) {
2023-05-17 15:46:58 +03:00
var name _ = prompt ( 'Style name:' ) ;
return [ name _ , prompt _text , negative _prompt _text ] ;
2022-09-09 23:16:02 +03:00
}
2022-09-18 22:25:18 +03:00
2022-12-10 13:46:18 +03:00
function confirm _clear _prompt ( prompt , negative _prompt ) {
2023-05-17 15:46:58 +03:00
if ( confirm ( "Delete prompt?" ) ) {
prompt = "" ;
negative _prompt = "" ;
2022-10-20 09:08:24 +03:00
}
2022-10-21 01:03:25 +03:00
2023-05-17 15:46:58 +03:00
return [ prompt , negative _prompt ] ;
2022-10-20 09:08:24 +03:00
}
2023-01-30 01:03:31 +03:00
2023-05-17 15:46:58 +03:00
var opts = { } ;
2023-05-25 09:09:13 +03:00
onAfterUiUpdate ( function ( ) {
2023-05-17 15:46:58 +03:00
if ( Object . keys ( opts ) . length != 0 ) return ;
2022-09-18 22:25:18 +03:00
2023-05-17 15:46:58 +03:00
var json _elem = gradioApp ( ) . getElementById ( 'settings_json' ) ;
if ( json _elem == null ) return ;
2022-09-18 22:25:18 +03:00
2023-05-17 15:46:58 +03:00
var textarea = json _elem . querySelector ( 'textarea' ) ;
var jsdata = textarea . value ;
opts = JSON . parse ( jsdata ) ;
2022-09-18 22:25:18 +03:00
2023-05-18 09:59:10 +03:00
executeCallbacks ( optionsChangedCallbacks ) ; /*global optionsChangedCallbacks*/
2022-09-18 22:25:18 +03:00
Object . defineProperty ( textarea , 'value' , {
set : function ( newValue ) {
var valueProp = Object . getOwnPropertyDescriptor ( HTMLTextAreaElement . prototype , 'value' ) ;
var oldValue = valueProp . get . call ( textarea ) ;
valueProp . set . call ( textarea , newValue ) ;
if ( oldValue != newValue ) {
2023-05-17 15:46:58 +03:00
opts = JSON . parse ( textarea . value ) ;
2022-09-18 22:25:18 +03:00
}
2023-01-14 15:55:40 +03:00
executeCallbacks ( optionsChangedCallbacks ) ;
2022-09-18 22:25:18 +03:00
} ,
get : function ( ) {
var valueProp = Object . getOwnPropertyDescriptor ( HTMLTextAreaElement . prototype , 'value' ) ;
return valueProp . get . call ( textarea ) ;
}
} ) ;
2023-05-17 15:46:58 +03:00
json _elem . parentElement . style . display = "none" ;
2022-09-28 16:43:54 +03:00
2023-05-21 23:16:14 +03:00
setupTokenCounters ( ) ;
2023-05-17 15:46:58 +03:00
var show _all _pages = gradioApp ( ) . getElementById ( 'settings_show_all_pages' ) ;
var settings _tabs = gradioApp ( ) . querySelector ( '#settings div' ) ;
if ( show _all _pages && settings _tabs ) {
settings _tabs . appendChild ( show _all _pages ) ;
show _all _pages . onclick = function ( ) {
gradioApp ( ) . querySelectorAll ( '#settings > div' ) . forEach ( function ( elem ) {
if ( elem . id == "settings_tab_licenses" ) {
2023-05-08 15:30:32 +03:00
return ;
2023-05-17 15:46:58 +03:00
}
2023-05-08 15:30:32 +03:00
2023-01-03 10:01:06 +03:00
elem . style . display = "block" ;
2023-05-17 15:46:58 +03:00
} ) ;
} ;
2023-01-03 10:01:06 +03:00
}
2023-05-17 15:46:58 +03:00
} ) ;
2022-09-27 22:56:18 +03:00
2023-05-17 15:46:58 +03:00
onOptionsChanged ( function ( ) {
var elem = gradioApp ( ) . getElementById ( 'sd_checkpoint_hash' ) ;
var sd _checkpoint _hash = opts . sd _checkpoint _hash || "" ;
var shorthash = sd _checkpoint _hash . substring ( 0 , 10 ) ;
2023-01-14 15:55:40 +03:00
2023-05-17 15:46:58 +03:00
if ( elem && elem . textContent != shorthash ) {
elem . textContent = shorthash ;
elem . title = sd _checkpoint _hash ;
elem . href = "https://google.com/search?q=" + sd _checkpoint _hash ;
}
} ) ;
2023-01-14 15:55:40 +03:00
2022-09-28 16:43:54 +03:00
let txt2img _textarea , img2img _textarea = undefined ;
2022-10-02 02:12:49 +03:00
2023-05-17 15:46:58 +03:00
function restart _reload ( ) {
document . body . innerHTML = '<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>' ;
2023-05-09 11:42:47 +03:00
2023-05-17 15:46:58 +03:00
var requestPing = function ( ) {
requestGet ( "./internal/ping" , { } , function ( data ) {
2023-05-09 11:42:47 +03:00
location . reload ( ) ;
2023-05-17 15:46:58 +03:00
} , function ( ) {
2023-05-09 11:42:47 +03:00
setTimeout ( requestPing , 500 ) ;
2023-05-17 15:46:58 +03:00
} ) ;
} ;
2023-05-09 11:42:47 +03:00
setTimeout ( requestPing , 2000 ) ;
2022-11-06 09:02:25 +03:00
2023-05-17 15:46:58 +03:00
return [ ] ;
2022-10-02 02:12:49 +03:00
}
2023-01-17 14:15:47 +03:00
// 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.
2023-05-17 15:46:58 +03:00
function updateInput ( target ) {
2023-05-18 09:59:10 +03:00
let e = new Event ( "input" , { bubbles : true } ) ;
2023-05-17 15:46:58 +03:00
Object . defineProperty ( e , "target" , { value : target } ) ;
target . dispatchEvent ( e ) ;
2023-01-17 14:15:47 +03:00
}
2023-01-28 22:52:27 +03:00
var desiredCheckpointName = null ;
2023-05-17 15:46:58 +03:00
function selectCheckpoint ( name ) {
2023-01-28 22:52:27 +03:00
desiredCheckpointName = name ;
2023-05-17 15:46:58 +03:00
gradioApp ( ) . getElementById ( 'change_checkpoint' ) . click ( ) ;
2023-01-28 22:52:27 +03:00
}
2023-04-04 05:27:48 +03:00
2023-05-18 09:59:10 +03:00
function currentImg2imgSourceResolution ( w , h , scaleBy ) {
2023-05-17 15:46:58 +03:00
var img = gradioApp ( ) . querySelector ( '#mode_img2img > div[style="display: block;"] img' ) ;
return img ? [ img . naturalWidth , img . naturalHeight , scaleBy ] : [ 0 , 0 , scaleBy ] ;
2023-03-28 22:23:40 +03:00
}
2023-04-29 19:39:22 +03:00
2023-05-17 15:46:58 +03:00
function updateImg2imgResizeToTextAfterChangingImage ( ) {
2023-04-29 19:39:22 +03:00
// 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.
setTimeout ( function ( ) {
2023-05-17 15:46:58 +03:00
gradioApp ( ) . getElementById ( 'img2img_update_resize_to' ) . click ( ) ;
2023-04-29 19:39:22 +03:00
} , 500 ) ;
2023-05-18 10:03:48 +03:00
return [ ] ;
2023-05-17 23:18:56 +03:00
}
2023-04-04 05:27:48 +03:00
2023-05-17 23:27:06 +03:00
function setRandomSeed ( elem _id ) {
var input = gradioApp ( ) . querySelector ( "#" + elem _id + " input" ) ;
if ( ! input ) return [ ] ;
input . value = "-1" ;
updateInput ( input ) ;
2023-04-04 05:27:48 +03:00
return [ ] ;
}
2023-05-17 23:27:06 +03:00
function switchWidthHeight ( tabname ) {
var width = gradioApp ( ) . querySelector ( "#" + tabname + "_width input[type=number]" ) ;
var height = gradioApp ( ) . querySelector ( "#" + tabname + "_height input[type=number]" ) ;
if ( ! width || ! height ) return [ ] ;
var tmp = width . value ;
2023-04-04 05:27:48 +03:00
width . value = height . value ;
height . value = tmp ;
2023-05-17 23:27:06 +03:00
updateInput ( width ) ;
updateInput ( height ) ;
2023-04-04 05:27:48 +03:00
return [ ] ;
}