Image Generation: Add swipes for generated images Supersedes #2648

e1a29b36f5355ef4dd081d3a589d429287314f32

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

Parents: 78bee4631d7a33550d57b02c11f91f3da58af887

public/index.html+5 -0 Viewed

                         <div title="Caption" class="right_menu_button fa-lg fa-solid fa-envelope-open-text mes_img_caption" data-i18n="[title]Caption"></div>
                         <div title="Delete" class="right_menu_button fa-lg fa-solid fa-trash-can mes_img_delete" data-i18n="[title]Delete"></div>
                     </div>
 +                    <div class="mes_img_swipes">
 +                        <div title="Swipe left" class="right_menu_button fa-lg fa-solid fa-chevron-left mes_img_swipe_left" data-i18n="[title]Swipe left"></div>
 +                        <div class="mes_img_swipe_counter">1/1</div>
 +                        <div title="Swipe right" class="right_menu_button fa-lg fa-solid fa-chevron-right mes_img_swipe_right" data-i18n="[title]Swipe right"></div>
 +                    </div>
                     <img class="mes_img" src="" />
                 </div>
                 <div class="mes_bias"></div>

public/script.js+21 -1 Viewed

     LLM_FUNCTION_TOOL_REGISTER: 'llm_function_tool_register',
     LLM_FUNCTION_TOOL_CALL: 'llm_function_tool_call',
     ONLINE_STATUS_CHANGED: 'online_status_changed',
 +    IMAGE_SWIPED: 'image_swiped',
 };
 export const eventSource = new EventEmitter();

 export function appendMediaToMessage(mes, messageElement, adjustScroll = true) {
     // Add image to message
     if (mes.extra?.image) {
 +        const container = messageElement.find('.mes_img_container');
         const chatHeight = $('#chat').prop('scrollHeight');
         const image = messageElement.find('.mes_img');
         const text = messageElement.find('.mes_text');

         });
         image.attr('src', mes.extra?.image);
         image.attr('title', mes.extra?.title || mes.title || '');
         messageElement.find('.mes_img_container')container.addClass('img_extra');
         image.toggleClass('img_inline', isInline);
         text.toggleClass('displayNone', !isInline);
++
 +        const imageSwipes = mes.extra.image_swipes;
 +        if (Array.isArray(imageSwipes) && imageSwipes.length > 0) {
 +            container.addClass('img_swipes');
 +            const counter = container.find('.mes_img_swipe_counter');
 +            const currentImage = imageSwipes.indexOf(mes.extra.image) + 1;
 +            counter.text(`${currentImage}/${imageSwipes.length}`);
++
 +            const swipeLeft = container.find('.mes_img_swipe_left');
 +            swipeLeft.off('click').on('click', function () {
 +                eventSource.emit(event_types.IMAGE_SWIPED, { message: mes, element: messageElement, direction: 'left' });
 +            });
++
 +            const swipeRight = container.find('.mes_img_swipe_right');
 +            swipeRight.off('click').on('click', function () {
 +                eventSource.emit(event_types.IMAGE_SWIPED, { message: mes, element: messageElement, direction: 'right' });
 +            });
 +        }
+    }
     // Add file to message

public/scripts/extensions/stable-diffusion/index.js+97 -0 Viewed

     action: 'action',
     interactive: 'interactive',
     wand: 'wand',
 +    swipe: 'swipe',
 };
 const generationMode = {

             generationType: generationType,
             negative: additionalNegativePrefix,
             inline_image: false,
 +            image_swipes: [image],
         },
     };
     context.chat.push(message);

     await writeExtensionField(characterId, 'sd_character_prompt', promptObject);
+}
 +/**
 + * Switches an image to the next or previous one in the swipe list.
 + * @param {object} args Event arguments
 + * @param {any} args.message Message object
 + * @param {JQuery<HTMLElement>} args.element Message element
 + * @param {string} args.direction Swipe direction
 + * @returns {Promise<void>}
 + */
 +async function onImageSwiped({ message, element, direction }) {
 +    const context = getContext();
 +    const animationClass = 'fa-fade';
 +    const messageImg = element.find('.mes_img');
++
 +    // Current image is already animating
 +    if (messageImg.hasClass(animationClass)) {
 +        return;
 +    }
++
 +    const swipes = message?.extra?.image_swipes;
++
 +    if (!Array.isArray(swipes)) {
 +        console.warn('No image swipes found in the message');
 +        return;
 +    }
++
 +    const currentIndex = swipes.indexOf(message.extra.image);
++
 +    if (currentIndex === -1) {
 +        console.warn('Current image not found in the swipes');
 +        return;
 +    }
++
 +    // Switch to previous image or wrap around if at the beginning
 +    if (direction === 'left') {
 +        const newIndex = currentIndex === 0 ? swipes.length - 1 : currentIndex - 1;
 +        message.extra.image = swipes[newIndex];
++
 +        // Update the image in the message
 +        appendMediaToMessage(message, element, false);
 +    }
++
 +    // Switch to next image or generate a new one if at the end
 +    if (direction === 'right') {
 +        const newIndex = currentIndex === swipes.length - 1 ? swipes.length : currentIndex + 1;
++
 +        if (newIndex === swipes.length) {
 +            const abortController = new AbortController();
 +            const swipeControls = element.find('.mes_img_swipes');
 +            const stopButton = document.getElementById('sd_stop_gen');
 +            const stopListener = () => abortController.abort('Aborted by user');
 +            const generationType = message?.extra?.generationType ?? generationMode.FREE;
 +            const dimensions = setTypeSpecificDimensions(generationType);
 +            const originalSeed = extension_settings.sd.seed;
 +            extension_settings.sd.seed = Math.round(Math.random() * Number.MAX_SAFE_INTEGER);
 +            let imagePath = '';
++
 +            try {
 +                $(stopButton).show();
 +                eventSource.once(CUSTOM_STOP_EVENT, stopListener);
 +                const callback = () => { };
 +                const hasNegative = message.extra.negative;
 +                const prompt = await refinePrompt(message.extra.title, false, false);
 +                const negativePromptPrefix = hasNegative ? await refinePrompt(message.extra.negative, false, true) : '';
 +                const characterName = context.characterId
 +                    ? context.characters[context.characterId].name
 +                    : context.groups[Object.keys(context.groups).filter(x => context.groups[x].id === context.groupId)[0]]?.id?.toString();
++
 +                messageImg.addClass(animationClass);
 +                swipeControls.hide();
 +                imagePath = await sendGenerationRequest(generationType, prompt, negativePromptPrefix, characterName, callback, initiators.swipe, abortController.signal);
 +            } finally {
 +                $(stopButton).hide();
 +                messageImg.removeClass(animationClass);
 +                swipeControls.show();
 +                eventSource.removeListener(CUSTOM_STOP_EVENT, stopListener);
 +                restoreOriginalDimensions(dimensions);
 +                extension_settings.sd.seed = originalSeed;
 +            }
++
 +            if (!imagePath) {
 +                return;
 +            }
++
 +            swipes.push(imagePath);
 +        }
++
 +        message.extra.image = swipes[newIndex];
 +        appendMediaToMessage(message, element, false);
 +    }
++
 +    await context.saveChat();
 +}
++
 jQuery(async () => {
     await addSDGenButtons();

+        }
     });
 +    eventSource.on(event_types.IMAGE_SWIPED, onImageSwiped);
++
     eventSource.on(event_types.CHAT_CHANGED, onChatChanged);
     await loadSettings();

public/style.css+23 -0 Viewed

     image-rendering: -webkit-optimize-contrast;
+}
 +.mes_img_swipes,
 .mes_img_controls {
     position: absolute;
     top: 0.1em;

     opacity: 0;
     flex-direction: row;
     justify-content: space-between;
 +    align-items: center;
     padding: 1em;
+}
 +.mes_img_swipes {
 +    top: unset;
 +    bottom: 0.1rem;
 +}
++
 +.mes_img_swipes .right_menu_button,
 .mes_img_controls .right_menu_button {
     filter: brightness(90%);
     text-shadow: 1px 1px var(--SmartThemeShadowColor) !important;

     width: 1.25em;
+}
 +.mes_img_swipes .right_menu_button::before,
 .mes_img_controls .right_menu_button::before {
     /* Fix weird alignment with this font-awesome icons on focus */
     position: relative;
     top: 0.6125em;
+}
 +.mes_img_swipes .right_menu_button:hover,
 .mes_img_controls .right_menu_button:hover {
     filter: brightness(150%);
+}
 +.mes_img_container:hover .mes_img_swipes,
 +.mes_img_container:focus-within .mes_img_swipes,
 .mes_img_container:hover .mes_img_controls,
 .mes_img_container:focus-within .mes_img_controls {
     opacity: 1;

     display: none;
+}
 +.mes_img_container:not(.img_swipes) .mes_img_swipes,
 +body:not(.sd) .mes_img_swipes {
 +    display: none;
 +}
++
 +.mes_img_swipe_counter {
 +    font-weight: 600;
 +    filter: drop-shadow(2px 4px 6px black);
 +    cursor: default;
 +}
++
 .img_enlarged_holder {
     /* Scaling via flex-grow and object-fit only works if we have some kind of base-height set */
     min-height: 120px;