added event listener for the image gallery modal; moved js to separate file

javascript/generationParams.js

+// 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;
+onUiUpdate(function(){
+	if (!txt2img_gallery) {
+		txt2img_gallery = attachGalleryListeners("txt2img")
+	}
+	if (!img2img_gallery) {
+		img2img_gallery = attachGalleryListeners("img2img")
+	}
+	if (!modal) {
+		modal = gradioApp().getElementById('lightboxModal')
+		modalObserver.observe(modal,  { attributes : true, attributeFilter : ['style'] });
+	}
+});
+
+let modalObserver = new MutationObserver(function(mutations) {
+	mutations.forEach(function(mutationRecord) {
+		let selectedTab = gradioApp().querySelector('#tabs div button.bg-white')?.innerText
+		if (mutationRecord.target.style.display === 'none' && selectedTab === 'txt2img' || selectedTab === 'img2img')
+			gradioApp().getElementById(selectedTab+"_generation_info_button").click()
+	});
+});
+
+function attachGalleryListeners(tab_name) {
+	gallery = gradioApp().querySelector('#'+tab_name+'_gallery')
+	gallery?.addEventListener('click', () => gradioApp().getElementById(tab_name+"_generation_info_button").click());
+	gallery?.addEventListener('keydown', (e) => {
+		if (e.keyCode == 37 || e.keyCode == 39) // left or right arrow
+			gradioApp().getElementById(tab_name+"_generation_info_button").click()
+	});
+	return gallery;
+}

javascript/ui.js

@@ -179,17 +179,9 @@ onUiUpdate(function(){
 		img2img_textarea = gradioApp().querySelector("#img2img_prompt > label > textarea");
 		img2img_textarea?.addEventListener("input", () => update_token_counter("img2img_token_button"));
 	}
-	if (!txt2img_gallery) {
-		txt2img_gallery = gradioApp().querySelector('#txt2img_gallery')
-		txt2img_gallery?.addEventListener('click', () => gradioApp().getElementById("txt2img_generation_info_button").click());
-	}
-	if (!img2img_gallery) {
-		img2img_gallery = gradioApp().querySelector('#img2img_gallery')
-		img2img_gallery?.addEventListener('click', () => gradioApp().getElementById("img2img_generation_info_button").click());
-	}
 })
 
-let txt2img_textarea, img2img_textarea, txt2img_gallery, img2img_gallery = undefined;
+let txt2img_textarea, img2img_textarea = undefined;
 let wait_time = 800
 let token_timeout;
 

modules/ui.py

@@ -570,6 +570,8 @@ def update_generation_info(args):
     generation_info, html_info, img_index = args
     try:
         generation_info = json.loads(generation_info)
+        if img_index < 0 or img_index >= len(generation_info["infotexts"]):
+            return html_info
         return plaintext_to_html(generation_info["infotexts"][img_index])
     except Exception:
         pass