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	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?abortController.abort('Aborted by user');
         console.log('PreviousSD: imageImage isgeneration stillaborted beingby generated...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),
         buttonAbortControllerabortController,
     );
     if (!newMediaAttachment) {