feat(sd): Add generation status indicator and improve abort handling (#5015) * feat(sd): Add generation status indicator and improve abort handling - Add persistent toast notification showing "Generating image..." during generation - Toast displays spinner, supports multiple concurrent generations with count - Click toast to dismiss (generation continues in background) - Improve abort handling: show friendly "Image generation stopped" info message instead of error when user clicks stop button - Handle abort in both generatePicture() and sendGenerationRequest() catch blocks Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Scope abort controllers for each individual button * Use native element reference for caching button abort controller * Update toast in paintbrush button handler * refactor: Update abort message for image generation in sdMessageButton * feat: Enhance generation indicator with active generation count in toast * Move tracking after prompt generation, add toast for LLM prompt gen progress * Add type annotation for generation toastr * Simplify generation abort checks * Remove unnecessary blank line in addSDGenButtons function --------- Co-authored-by: mschienbein <mschienbein@users.noreply.github.com> Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com> Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

a50fecee258da15b934c04e47b03a3891d4bfc71

Mooki <m@schienbein.dev>

Signed

Parents: 78651bdf560fae12da1d70e32e902a6e57f694b9

public/scripts/extensions/stable-diffusion/index.js+101 -5 Viewed

 // This is a 1x1 transparent PNG
 const PNG_PIXEL = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 const CUSTOM_STOP_EVENT = 'sd_stop_generation';
+// Generation tracking for status indicator
+let activeGenerations = 0;
+/** @type {JQuery<HTMLElement>|null} */
+let generationToast = null;
 const sources = {
     extras: 'extras',
     horde: 'horde',

+}
 /**
+ * Updates the generation status indicator based on active generation count.
+ * Shows/hides various UI indicators to inform user of background image generation.
+ */
+function updateGenerationIndicator() {
+    if (activeGenerations > 0) {
+        const countText = activeGenerations > 1 ? ` (${activeGenerations})` : '';
+        const toastText = `<i class="fa-solid fa-spinner fa-spin"></i> ${t`Generating image`}${countText}...`;
+        // Show persistent toast if not already showing
+        if (!generationToast) {
+            generationToast = toastr.info(
+                toastText,
+                'Image Generation',
+                {
+                    timeOut: 0,
+                    extendedTimeOut: 0,
+                    tapToDismiss: true,
+                    escapeHtml: false,
+                    onHidden: () => {
+                        generationToast = null;
+                    },
+                },
+            );
+        } else if (activeGenerations > 1) {
+            // Update count in existing toast
+            const toastMessage = $(generationToast).find('.toast-message');
+            if (toastMessage.length) {
+                toastMessage.html(toastText);
+            }
+        }
+    } else {
+        // Hide toast when done
+        if (generationToast) {
+            toastr.clear(generationToast);
+            generationToast = null;
+        }
+    }
+}
+/**
+ * Increments the active generation counter and updates indicators.
+ */
+function startGenerationTracking() {
+    activeGenerations++;
+    updateGenerationIndicator();
+}
+/**
+ * Decrements the active generation counter and updates indicators.
+ */
+function endGenerationTracking() {
+    activeGenerations = Math.max(0, activeGenerations - 1);
+    updateGenerationIndicator();
+}
+/**
  * Generates an image based on the given trigger word.
  * @param {string} initiator The initiator of the image generation
  * @param {Record<string, object>} args Command arguments

         await eventSource.emit(event_types.SD_PROMPT_PROCESSING, eventData);
         prompt = eventData.prompt; // Allow extensions to modify the prompt
+        // Track this generation for status indicator
+        startGenerationTracking();
+        // Show stop button after prompt is ready (prompt generation uses separate abort mechanism)
         $(stopButton).show();
         eventSource.once(CUSTOM_STOP_EVENT, stopListener);

         // generate the image
         imagePath = await sendGenerationRequest(generationType, prompt, negativePromptPrefix, characterName, callback, initiator, abortController.signal);
     } catch (err) {
+        // Check if this was an intentional abort by user
+        if (abortController.signal.aborted) {
+            console.log('SD: Image generation aborted by user');
+            toastr.info('Image generation stopped.', 'Image Generation');
+            return;
+        }
         console.trace(err);
         // errors here are most likely due to text generation failure
         // sendGenerationRequest mostly deals with its own errors

         $(stopButton).hide();
         restoreOriginalDimensions(dimensions);
         eventSource.removeListener(CUSTOM_STOP_EVENT, stopListener);
+        endGenerationTracking();
+    }
     return imagePath;

  * @returns {Promise<string>} - A promise that resolves when the prompt generation completes.
  */
 async function generatePrompt(quietPrompt) {
+    const toast = toastr.info('Generating image prompt with an LLM...', 'Image Generation');
     const reply = await generateQuietPrompt({ quietPrompt });
     const processedReply = processReply(reply);
+    toastr.clear(toast);
     if (!processedReply) {
         toastr.error('Prompt generation produced no text. Make sure you\'re using a valid instruct template and try again', 'Image Generation');

             throw new Error('Endpoint did not return image data.');
+        }
     } catch (err) {
+        // Check if this was an intentional abort by user
+        if (signal?.aborted) {
+            console.log('SD: Image generation aborted by user');
+            toastr.info('Image generation stopped.', 'Image Generation');
+            return;
+        }
         console.error('Image generation request error: ', err);
         toastr.error('Image generation failed. Please try again.' + '\n\n' + String(err), 'Image Generation');
         return;

@@ -4703,7 +4785,8 @@ function isValidState() {
4703	}	4785	}
4704	}	4786	}
4705		4787
4706	let buttonAbortController = null;	4788	/** @type {WeakMap<HTMLElement, AbortController>} */
		4789	const buttonAbortControllers = new WeakMap();
4707		4790
4708	/**	4791	/**
4709	* "Paintbrush" button handler to generate a new image for a message.	4792	* "Paintbrush" button handler to generate a new image for a message.

         $icon.toggleClass(classes.idle, !isBusy);
         $icon.toggleClass(classes.busy, isBusy);
         $media.toggleClass(classes.animation, isBusy);
+        // Update generation counter toast
+        const trackingFunction = isBusy ? startGenerationTracking : endGenerationTracking;
+        trackingFunction();
+    }
     let $media = jQuery();
     const classes = { busy: 'fa-hourglass', idle: 'fa-paintbrush', animation: 'fa-fade' };
     const context = getContext();
+    const abortController = (() => {
+        const nativeElement = $icon.get(0);
+        if (buttonAbortControllers.has(nativeElement)) {
+            return buttonAbortControllers.get(nativeElement);
+        } else {
+            const controller = new AbortController();
+            buttonAbortControllers.set(nativeElement, controller);
+            return controller;
+        }
+    })();
     if ($icon.hasClass(classes.busy)) {
-        buttonAbortController?.abort('Aborted by user');
+        abortController.abort('Aborted by user');
-        console.log('Previous image is still being generated...');
+        console.log('SD: Image generation aborted by user');
         return;
+    }

         $media = messageElement.find(`.mes_media_container[data-index="${index}"]`).find('.mes_img, .mes_video');
+    }
-    buttonAbortController = new AbortController();
     const newMediaAttachment = await generateMediaSwipe(
         selectedMedia,
         message,
         () => setBusyIcon(true),
         () => setBusyIcon(false),
-        buttonAbortController,
+        abortController,
     );
     if (!newMediaAttachment) {