Merge pull request #16065 from AUTOMATIC1111/ToggleLivePriview-in-ima…

…ge-viewer

ToggleLivePriview button in image viewer

javascript/imageviewer.js

@@ -6,6 +6,8 @@ function closeModal() {
 function showModal(event) {
     const source = event.target || event.srcElement;
     const modalImage = gradioApp().getElementById("modalImage");
+    const modalToggleLivePreviewBtn = gradioApp().getElementById("modal_toggle_live_preview");
+    modalToggleLivePreviewBtn.innerHTML = opts.js_live_preview_in_modal_lightbox ? "🗇" : "🗆";
     const lb = gradioApp().getElementById("lightboxModal");
     modalImage.src = source.src;
     if (modalImage.style.display === 'none') {
@@ -152,6 +154,13 @@ function modalZoomToggle(event) {
     event.stopPropagation();
 }
 
+function modalLivePreviewToggle(event) {
+    const modalToggleLivePreview = gradioApp().getElementById("modal_toggle_live_preview");
+    opts.js_live_preview_in_modal_lightbox = !opts.js_live_preview_in_modal_lightbox;
+    modalToggleLivePreview.innerHTML = opts.js_live_preview_in_modal_lightbox ? "🗇" : "🗆";
+    event.stopPropagation();
+}
+
 function modalTileImageToggle(event) {
     const modalImage = gradioApp().getElementById("modalImage");
     const modal = gradioApp().getElementById("lightboxModal");
@@ -209,6 +218,14 @@ document.addEventListener("DOMContentLoaded", function() {
     modalSave.title = "Save Image(s)";
     modalControls.appendChild(modalSave);
 
+    const modalToggleLivePreview = document.createElement('span');
+    modalToggleLivePreview.className = 'modalToggleLivePreview cursor';
+    modalToggleLivePreview.id = "modal_toggle_live_preview";
+    modalToggleLivePreview.innerHTML = "🗆";
+    modalToggleLivePreview.onclick = modalLivePreviewToggle;
+    modalToggleLivePreview.title = "Toggle live preview";
+    modalControls.appendChild(modalToggleLivePreview);
+
     const modalClose = document.createElement('span');
     modalClose.className = 'modalClose cursor';
     modalClose.innerHTML = '×';