Streaming fade-in animation (#4568) * [wip] Add stream fade-in effect for message text and corresponding CSS animation * Avoid using temporary element during text segmentation * Add fade in toggle * Skip whitespace-only nodes * Fade-in reasoning stream * Fix case when segmenter is not supported

dd2011f5be66ac5b691fd6424ca5f05dbc86a5a8

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

Signed

Parents: c4cc6f611e1516a18c642a0e92cd447ce80bb927

public/index.html+5 -1 Viewed

                                     <small data-i18n="Smooth Streaming">
                                         Smooth Streaming
                                     </small>
 -                                    <i class="fa-solid fa-flask" data-i18n="[title]Experimental feature. May not work for all backends." title="Experimental feature. May not work for all backends."></i>
                                 </div>
                                 <div id="smooth_streaming_speed_control" class="flexBasis100p wide100p">
                                     <input type="range" id="smooth_streaming_speed" name="smooth_streaming_speed" min="0" max="100" step="10" value="50">

                                     </div>
                                 </div>
                             </label>
 +                            <label class="checkbox_label" for="stream_fade_in" title="Fade in streamed text when it appears, instead of it just popping in." data-i18n="[title]Fade in streamed text when it appears, instead of it just popping in">
 +                                <input id="stream_fade_in" type="checkbox" />
 +                                <small data-i18n="Stream Fade-In">Stream Fade-In</small>
 +                                <i class="fa-solid fa-flask" data-i18n="[title]Experimental feature. May not work for all backends." title="Experimental feature. May not work for all backends."></i>
 +                            </label>
                             <label for="play_message_sound" class="checkbox_label" title="Play a sound when a message generation finishes." data-i18n="[title]Play a sound when a message generation finishes">
                                 <input id="play_message_sound" type="checkbox" />

public/script.js+6 -1 Viewed

 import { getSystemMessageByType, initSystemMessages, SAFETY_CHAT, sendSystemMessage, system_message_types, system_messages } from './scripts/system-messages.js';
 import { event_types, eventSource } from './scripts/events.js';
 import { initAccessibility } from './scripts/a11y.js';
 +import { applyStreamFadeIn } from './scripts/util/stream-fadein.js';
 // API OBJECT FOR EXTERNAL WIRING
 globalThis.SillyTavern = {

                 false,
             );
             if (this.messageTextDom instanceof HTMLElement) {
 -                this.messageTextDom.innerHTML = formattedText;
 +                if (power_user.stream_fade_in) {
 +                    applyStreamFadeIn(this.messageTextDom, formattedText);
 +                } else {
 +                    this.messageTextDom.innerHTML = formattedText;
 +                }
+            }
             const timePassed = formatGenerationTimer(this.timeStarted, currentTime, currentTokenCount, this.reasoningHandler.getDuration(), this.timeToFirstToken);

public/scripts/power-user.js+8 -0 Viewed

     streaming_fps: 30,
     smooth_streaming: false,
     smooth_streaming_speed: 50,
 +    stream_fade_in: false,
     fast_ui_mode: true,
     avatar_style: avatar_styles.ROUND,

     $('#smooth_streaming').prop('checked', power_user.smooth_streaming);
     $('#smooth_streaming_speed').val(power_user.smooth_streaming_speed);
 +    $('#stream_fade_in').prop('checked', power_user.stream_fade_in);
++
     $('#font_scale').val(power_user.font_scale);
     $('#font_scale_counter').val(power_user.font_scale);

         saveSettingsDebounced();
     });
 +    $('#stream_fade_in').on('input', function () {
 +        power_user.stream_fade_in = !!$(this).prop('checked');
 +        saveSettingsDebounced();
 +    });
++
     $('input[name="font_scale"]').on('input', async function (e, data) {
         const applyMode = data?.forced ? 'forced' : 'normal';
         power_user.font_scale = Number($(this).val());

public/scripts/reasoning.js+7 -1 Viewed

 import { enumTypes, SlashCommandEnumValue } from './slash-commands/SlashCommandEnumValue.js';
 import { SlashCommandParser } from './slash-commands/SlashCommandParser.js';
 import { textgen_types, textgenerationwebui_settings } from './textgen-settings.js';
 +import { applyStreamFadeIn } from './util/stream-fadein.js';
 import { copyText, escapeRegex, isFalseBoolean, isTrueBoolean, setDatasetProperty, trimSpaces } from './utils.js';
 /**

         // Update the reasoning message
         const reasoning = trimSpaces(this.reasoningDisplayText ?? this.reasoning);
         const displayReasoning = messageFormatting(reasoning, '', false, false, messageId, {}, true);
 -        this.messageReasoningContentDom.innerHTML = displayReasoning;
++
 +        if (power_user.stream_fade_in) {
 +            applyStreamFadeIn(this.messageReasoningContentDom, displayReasoning);
 +        } else {
 +            this.messageReasoningContentDom.innerHTML = displayReasoning;
 +        }
         // Update tooltip for hidden reasoning edit
         /** @type {HTMLElement} */

public/scripts/util/stream-fadein.js+69 -0 Viewed

 +import { morphdom } from '../../lib.js';
++
 +/**
 + * Check if the current browser supports native segmentation function.
 + * @returns {boolean} True if the Segmenter is supported by the current browser.
 + */
 +export function isSegmenterSupported() {
 +    return typeof Intl.Segmenter === 'function';
 +}
++
 +/**
 + * Segment text in the given HTML content using Intl.Segmenter.
 + * @param {HTMLElement} htmlElement Target HTML element
 + * @param {string} htmlContent HTML content to segment
 + * @param {'word'|'grapheme'|'sentence'} [granularity='word'] Text split granularity
 + */
 +export function segmentTextInElement(htmlElement, htmlContent, granularity = 'word') {
 +    htmlElement.innerHTML = htmlContent;
++
 +    if (!isSegmenterSupported()) {
 +        return;
 +    }
++
 +    // TODO: Support more locales, make granularity configurable.
 +    const segmenter = new Intl.Segmenter('en-US', { granularity });
 +    const textNodes = [];
 +    const walker = document.createTreeWalker(htmlElement, NodeFilter.SHOW_TEXT);
 +    while (walker.nextNode()) {
 +        const textNode = /** @type {Text} */ (walker.currentNode);
++
 +        // Skip ancestors of code/pre
 +        if (textNode.parentElement && textNode.parentElement.closest('pre, code')) {
 +            continue;
 +        }
++
 +        // Skip text nodes that are empty or only whitespace
 +        if (/^\s*$/.test(textNode.data)) {
 +            continue;
 +        }
++
 +        textNodes.push(textNode);
 +    }
++
 +    // Split every text node into segments using spans
 +    for (const textNode of textNodes) {
 +        const fragment = document.createDocumentFragment();
 +        const segments = segmenter.segment(textNode.data);
 +        for (const segment of segments) {
 +            // TODO: Apply a different class for different segment length/content?
 +            // For now, just use a single class for all segments.
 +            const span = document.createElement('span');
 +            span.innerText = segment.segment;
 +            span.className = 'text_segment';
 +            fragment.appendChild(span);
 +        }
 +        textNode.replaceWith(fragment);
 +    }
 +}
++
 +/**
 + * Apply stream fade-in effect to the given message text element by morphing its content.
 + * @param {HTMLElement} messageTextElement Message text element
 + * @param {string} htmlContent New HTML content to apply
 + */
 +export function applyStreamFadeIn(messageTextElement, htmlContent) {
 +    const targetElement = /** @type {HTMLElement} */ (messageTextElement.cloneNode());
 +    segmentTextInElement(targetElement, htmlContent);
 +    morphdom(messageTextElement, targetElement);
 +}

public/style.css+8 -0 Viewed

     max-height: var(--doc-height);
+}
 +.mes_reasoning_details[data-state="thinking"] .mes_reasoning .text_segment,
 +.mes_text .text_segment {
 +    animation-name: fade-in;
 +    animation-timing-function: ease-in-out;
 +    /* Not using variables for duration as they are zeroed when reduced motion is enabled */
 +    animation-duration: 300ms;
 +}
++
 .mes .mes_timer,
 .mes .mesIDDisplay,
 .mes .tokenCounterDisplay {