script.js split work - ui.js

javascript/dragdrop.js

@@ -1,3 +1,5 @@
+// allows drag-dropping files into gradio image elements, and also pasting images from clipboard
+
 function isValidImageList( files ) {
     return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type);
 }

javascript/hints.js

@@ -1,4 +1,4 @@
-
+// mouseover tooltips for various UI elements
 
 titles = {
     "Sampling steps": "How many times to improve the generated image iteratively; higher values take longer; very low values can produce bad results",

javascript/imageviewer.js

@@ -1,3 +1,4 @@
+// A full size 'lightbox' preview modal shown when left clicking on gallery previews
 
 function closeModal() {
   gradioApp().getElementById("lightboxModal").style.display = "none";

javascript/progressbar.js

@@ -1,7 +1,9 @@
+// code related to showing and updating progressbar shown as the image is being made
+
 global_progressbar = null
 
 onUiUpdate(function(){
-	progressbar = root.getElementById('progressbar')
+	progressbar = gradioApp().getElementById('progressbar')
 	if(progressbar!= null && progressbar != global_progressbar){
 	    global_progressbar = progressbar
 
@@ -27,3 +29,10 @@ onUiUpdate(function(){
         mutationObserver.observe( progressbar, { childList:true, subtree:true })
 	}
 })
+
+function requestProgress(){
+    btn = gradioApp().getElementById("check_progress");
+    if(btn==null) return;
+
+    btn.click();
+}

javascript/ui.js

@@ -1,24 +1,4 @@
-function gradioApp(){
-    return document.getElementsByTagName('gradio-app')[0].shadowRoot;
-}
-
-uiUpdateCallbacks = []
-function onUiUpdate(callback){
-    uiUpdateCallbacks.push(callback)
-}
-
-function uiUpdate(root){
-	uiUpdateCallbacks.forEach(function(x){
-	    x()
-	})
-}
-
-document.addEventListener("DOMContentLoaded", function() {
-    var mutationObserver = new MutationObserver(function(m){
-        uiUpdate(gradioApp());
-    });
-    mutationObserver.observe( gradioApp(), { childList:true, subtree:true })
-});
+// various functions for interation with ui.py not large enough to warrant putting them in separate files
 
 function selected_gallery_index(){
     var gr = gradioApp()
@@ -55,14 +35,8 @@ function extract_image_from_gallery_extras(gallery){
     return extract_image_from_gallery(gallery);
 }
 
-function requestProgress(){
-    btn = gradioApp().getElementById("check_progress");
-    if(btn==null) return;
-
-    btn.click();
-}
-
 function submit(){
+    // this calls a function from progressbar.js
     window.setTimeout(requestProgress, 500)
 
     res = []

script.js

@@ -19,69 +19,3 @@ document.addEventListener("DOMContentLoaded", function() {
     });
     mutationObserver.observe( gradioApp(), { childList:true, subtree:true })
 });
-
-function selected_gallery_index(){
-    var gr = gradioApp()
-    var buttons = gradioApp().querySelectorAll(".gallery-item")
-    var button = gr.querySelector(".gallery-item.\\!ring-2")
-
-    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){
-        return [null]
-    }
-
-    return gallery[index];
-}
-
-function extract_image_from_gallery_img2img(gallery){
-    gradioApp().querySelectorAll('button')[1].click();
-    return extract_image_from_gallery(gallery);
-}
-
-function extract_image_from_gallery_extras(gallery){
-    gradioApp().querySelectorAll('button')[2].click();
-    return extract_image_from_gallery(gallery);
-}
-
-function requestProgress(){
-    btn = gradioApp().getElementById("check_progress");
-    if(btn==null) return;
-
-    btn.click();
-}
-
-function submit(){
-    window.setTimeout(requestProgress, 500)
-
-    res = []
-    for(var i=0;i<arguments.length;i++){
-        res.push(arguments[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.
-    // 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
-    }
-
-    return res
-}
-
-function ask_for_style_name(_, prompt_text, negative_prompt_text) {
-    name_ = prompt('Style name:')
-    return name_ === null ? [null, null, null]: [name_, prompt_text, negative_prompt_text]
-}