2022-09-18 09:00:06 +03:00
// various functions for interation with ui.py not large enough to warrant putting them in separate files
2022-09-02 23:25:29 +03:00
2022-10-17 19:24:24 +03:00
function set _theme ( theme ) {
2022-10-17 12:05:05 +03:00
gradioURL = window . location . href
2022-10-17 19:24:24 +03:00
if ( ! gradioURL . includes ( '?__theme=' ) ) {
window . location . replace ( gradioURL + '?__theme=' + theme ) ;
2022-10-17 12:05:05 +03:00
}
}
2022-09-02 23:25:29 +03:00
function selected _gallery _index ( ) {
2022-09-27 00:18:57 +03:00
var buttons = gradioApp ( ) . querySelectorAll ( '[style="display: block;"].tabitem .gallery-item' )
var button = gradioApp ( ) . querySelector ( '[style="display: block;"].tabitem .gallery-item.\\!ring-2' )
2022-09-02 23:25:29 +03:00
var result = - 1
buttons . forEach ( function ( v , i ) { if ( v == button ) { result = i } } )
return result
}
function extract _image _from _gallery ( gallery ) {
if ( gallery . length == 1 ) {
return gallery [ 0 ]
}
index = selected _gallery _index ( )
if ( index < 0 || index >= gallery . length ) {
2022-09-10 11:10:00 +03:00
return [ null ]
2022-09-02 23:25:29 +03:00
}
return gallery [ index ] ;
2022-09-11 00:17:34 +03:00
}
2022-09-23 22:49:21 +03:00
function args _to _array ( args ) {
res = [ ]
for ( var i = 0 ; i < args . length ; i ++ ) {
res . push ( args [ i ] )
}
return res
}
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
return args _to _array ( arguments ) ;
}
2022-10-27 08:36:11 +03:00
function switch _to _img2img ( ) {
2022-10-13 20:42:27 +03:00
gradioApp ( ) . querySelector ( '#tabs' ) . querySelectorAll ( 'button' ) [ 1 ] . click ( ) ;
2022-09-23 22:49:21 +03:00
gradioApp ( ) . getElementById ( 'mode_img2img' ) . querySelectorAll ( 'button' ) [ 0 ] . click ( ) ;
return args _to _array ( arguments ) ;
}
2022-10-27 08:36:11 +03:00
function switch _to _inpaint ( ) {
2022-10-13 20:42:27 +03:00
gradioApp ( ) . querySelector ( '#tabs' ) . querySelectorAll ( 'button' ) [ 1 ] . click ( ) ;
2022-09-23 22:49:21 +03:00
gradioApp ( ) . getElementById ( 'mode_img2img' ) . querySelectorAll ( 'button' ) [ 1 ] . click ( ) ;
return args _to _array ( arguments ) ;
}
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
return args _to _array ( arguments ) ;
}
2022-09-22 12:11:48 +03:00
function get _tab _index ( tabId ) {
var res = 0
gradioApp ( ) . getElementById ( tabId ) . querySelector ( 'div' ) . querySelectorAll ( 'button' ) . forEach ( function ( button , i ) {
if ( button . className . indexOf ( 'bg-white' ) != - 1 )
res = i
} )
return res
}
function create _tab _index _args ( tabId , args ) {
var res = [ ]
for ( var i = 0 ; i < args . length ; i ++ ) {
res . push ( args [ i ] )
}
2022-09-06 02:09:01 +03:00
2022-09-22 12:11:48 +03:00
res [ 0 ] = get _tab _index ( tabId )
return res
}
function get _extras _tab _index ( ) {
2022-10-10 04:26:52 +03:00
const [ , , ... args ] = [ ... arguments ]
return [ get _tab _index ( 'mode_extras' ) , get _tab _index ( 'extras_resize_mode' ) , ... args ]
2022-09-22 12:11:48 +03:00
}
function create _submit _args ( args ) {
2022-09-06 02:09:01 +03:00
res = [ ]
2022-09-22 12:11:48 +03:00
for ( var i = 0 ; i < args . length ; i ++ ) {
res . push ( args [ i ] )
2022-09-06 02:09:01 +03:00
}
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.
// I don't know why gradio is seding 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 ( Array . isArray ( res [ res . length - 3 ] ) ) {
res [ res . length - 3 ] = null
}
2022-09-06 02:09:01 +03:00
return res
2022-09-07 21:26:19 +03:00
}
2022-09-07 22:58:11 +03:00
2022-09-22 12:11:48 +03:00
function submit ( ) {
2022-09-23 20:46:02 +03:00
requestProgress ( 'txt2img' )
2022-09-22 12:11:48 +03:00
return create _submit _args ( arguments )
}
function submit _img2img ( ) {
2022-09-23 20:46:02 +03:00
requestProgress ( 'img2img' )
2022-09-22 12:11:48 +03:00
res = create _submit _args ( arguments )
res [ 0 ] = get _tab _index ( 'mode_img2img' )
return res
}
2022-09-11 17:35:12 +03:00
function ask _for _style _name ( _ , prompt _text , negative _prompt _text ) {
name _ = prompt ( 'Style name:' )
2022-10-15 14:22:30 +03:00
return [ name _ , prompt _text , negative _prompt _text ]
2022-09-09 23:16:02 +03:00
}
2022-09-18 22:25:18 +03:00
2022-09-22 12:11:48 +03:00
2022-09-18 22:25:18 +03:00
opts = { }
function apply _settings ( jsdata ) {
console . log ( jsdata )
opts = JSON . parse ( jsdata )
return jsdata
}
onUiUpdate ( function ( ) {
if ( Object . keys ( opts ) . length != 0 ) return ;
json _elem = gradioApp ( ) . getElementById ( 'settings_json' )
if ( json _elem == null ) return ;
textarea = json _elem . querySelector ( 'textarea' )
jsdata = textarea . value
opts = JSON . parse ( jsdata )
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 ) {
opts = JSON . parse ( textarea . value )
}
} ,
get : function ( ) {
var valueProp = Object . getOwnPropertyDescriptor ( HTMLTextAreaElement . prototype , 'value' ) ;
return valueProp . get . call ( textarea ) ;
}
} ) ;
json _elem . parentElement . style . display = "none"
2022-09-28 16:43:54 +03:00
if ( ! txt2img _textarea ) {
txt2img _textarea = gradioApp ( ) . querySelector ( "#txt2img_prompt > label > textarea" ) ;
txt2img _textarea ? . addEventListener ( "input" , ( ) => update _token _counter ( "txt2img_token_button" ) ) ;
}
if ( ! img2img _textarea ) {
img2img _textarea = gradioApp ( ) . querySelector ( "#img2img_prompt > label > textarea" ) ;
img2img _textarea ? . addEventListener ( "input" , ( ) => update _token _counter ( "img2img_token_button" ) ) ;
}
2022-09-18 22:25:18 +03:00
} )
2022-09-27 22:56:18 +03:00
2022-09-28 16:43:54 +03:00
let txt2img _textarea , img2img _textarea = undefined ;
2022-09-28 02:29:53 +03:00
let wait _time = 800
let token _timeout ;
2022-09-27 22:56:18 +03:00
2022-09-30 19:12:44 +03:00
function update _txt2img _tokens ( ... args ) {
2022-09-29 21:40:47 +03:00
update _token _counter ( "txt2img_token_button" )
2022-09-30 19:12:44 +03:00
if ( args . length == 2 )
return args [ 0 ]
return args ;
2022-09-29 21:40:47 +03:00
}
2022-09-30 19:12:44 +03:00
function update _img2img _tokens ( ... args ) {
2022-09-29 21:40:47 +03:00
update _token _counter ( "img2img_token_button" )
2022-09-30 19:12:44 +03:00
if ( args . length == 2 )
return args [ 0 ]
return args ;
2022-09-30 23:31:00 +03:00
}
2022-09-28 16:43:54 +03:00
function update _token _counter ( button _id ) {
2022-09-28 02:29:53 +03:00
if ( token _timeout )
clearTimeout ( token _timeout ) ;
token _timeout = setTimeout ( ( ) => gradioApp ( ) . getElementById ( button _id ) ? . click ( ) , wait _time ) ;
}
2022-10-02 02:12:49 +03:00
function restart _reload ( ) {
document . body . innerHTML = '<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>' ;
setTimeout ( function ( ) { location . reload ( ) } , 2000 )
}