dd2011f5 · permissionBRICK/SillyTavern

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 {

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