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 = []