Add separate imagegen stop button Closes #2591

41af05769bf0d8f8f553e2d9410f5f13f28dfc3f

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 8892fdc421792f55843468578cf46ce5b18ed069
2 files changed, +15 -7Showing whitespace changes
public/scripts/extensions/stable-diffusion/button.html+5 -1
@@ -1,4 +1,8 @@
11<div id="sd_gen" class="list-group-item flex-container flexGap5">
22 <div class="fa-solid fa-paintbrush extensionsMenuExtensionButton" title="Trigger Stable Diffusion" data-i18n="[title]Trigger Stable Diffusion" /></div>
33 <span>Generate Image</span>
4+</div>
5+<div id="sd_stop_gen" class="list-group-item flex-container flexGap5">
6+ <div class="fa-solid fa-circle-stop extensionsMenuExtensionButton" title="Abort current image generation task" data-i18n="[title]Abort current image generation task"></div>
7+ <span>Stop Image Generation</span>
48</div>
public/scripts/extensions/stable-diffusion/index.js+10 -6
@@ -37,6 +37,7 @@ const MODULE_NAME = 'sd';
3737const UPDATE_INTERVAL = 1000;
3838// This is a 1x1 transparent PNG
3939const PNG_PIXEL = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
40+const CUSTOM_STOP_EVENT = 'sd_stop_generation';
4041
4142const sources = {
4243 extras: 'extras',
@@ -2290,6 +2291,7 @@ async function generatePicture(initiator, args, trigger, message, callback) {
22902291
22912292 const dimensions = setTypeSpecificDimensions(generationType);
22922293 const abortController = new AbortController();
2294+ const stopButton = document.getElementById('sd_stop_gen');
22932295 let negativePromptPrefix = args?.negative || '';
22942296 let imagePath = '';
22952297
@@ -2300,9 +2302,8 @@ async function generatePicture(initiator, args, trigger, message, callback) {
23002302 const prompt = await getPrompt(generationType, message, trigger, quietPrompt, combineNegatives);
23012303 console.log('Processed image prompt:', prompt);
23022304
2303- eventSource.once(event_types.GENERATION_STOPPED, stopListener);
2305+ $(stopButton).show();
23042306 contexteventSource.deactivateSendButtonsonce(CUSTOM_STOP_EVENT, stopListener);
2305- hideSwipeButtons();
23062307
23072308 if (typeof args?._abortController?.addEventListener === 'function') {
23082309 args._abortController.addEventListener('abort', stopListener);
@@ -2314,10 +2315,9 @@ async function generatePicture(initiator, args, trigger, message, callback) {
23142315 throw new Error('SD prompt text generation failed.');
23152316 }
23162317 finally {
2318+ $(stopButton).hide();
23172319 restoreOriginalDimensions(dimensions);
23182320 eventSource.removeListener(event_types.GENERATION_STOPPEDCUSTOM_STOP_EVENT, stopListener);
2319- context.activateSendButtons();
2320- showSwipeButtons();
23212321 }
23222322
23232323 return imagePath;
@@ -3425,6 +3425,10 @@ async function addSDGenButtons() {
34253425 generatePicture(initiators.wand, {}, param);
34263426 }
34273427 });
3428+
3429+ const stopGenButton = $('#sd_stop_gen');
3430+ stopGenButton.hide();
3431+ stopGenButton.on('click', () => eventSource.emit(CUSTOM_STOP_EVENT));
34283432}
34293433
34303434function isValidState() {