sillytavern 1.4.1

package/public/scripts/extensions/dice/style.css

@@ -0,0 +1,26 @@
+#roll_dice {
+    order: 100;
+    width: 40px;
+    height: 40px;
+    margin: 0;
+    padding: 1px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    transition: 0.3s;
+    opacity: 0.7;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}
+
+#roll_dice:hover {
+    opacity: 1;
+    filter: brightness(1.2);
+}
+
+#dice_dropdown {
+    z-index: 100;
+    backdrop-filter: blur(--SmartThemeBlurStrength);
+}

package/public/scripts/extensions/expressions/index.js

@@ -0,0 +1,387 @@
+import { saveSettingsDebounced, token } from "../../../script.js";
+import { getContext, getApiUrl, modules, extension_settings } from "../../extensions.js";
+export { MODULE_NAME };
+
+const MODULE_NAME = 'expressions';
+const UPDATE_INTERVAL = 1000;
+const DEFAULT_EXPRESSIONS = [
+    "admiration",
+    "amusement",
+    "anger",
+    "annoyance",
+    "approval",
+    "caring",
+    "confusion",
+    "curiosity",
+    "desire",
+    "disappointment",
+    "disapproval",
+    "disgust",
+    "embarrassment",
+    "excitement",
+    "fear",
+    "gratitude",
+    "grief",
+    "joy",
+    "love",
+    "nervousness",
+    "optimism",
+    "pride",
+    "realization",
+    "relief",
+    "remorse",
+    "sadness",
+    "surprise",
+    "neutral"
+];
+
+let expressionsList = null;
+let lastCharacter = undefined;
+let lastMessage = null;
+let spriteCache = {};
+let inApiCall = false;
+
+function onExpressionsShowDefaultInput() {
+    const value = $(this).prop('checked');
+    extension_settings.expressions.showDefault = value;
+    saveSettingsDebounced();
+
+    const existingImageSrc = $('img.expression').prop('src');
+    if (existingImageSrc !== undefined) {                      //if we have an image in src
+        if (!value && existingImageSrc.includes('/img/default-expressions/')) {    //and that image is from /img/ (default)
+            $('img.expression').prop('src', '');               //remove it
+            lastMessage = null;
+        }
+        if (value) {
+            lastMessage = null;
+        }
+    }
+}
+
+let isWorkerBusy = false;
+
+async function moduleWorkerWrapper() {
+    // Don't touch me I'm busy...
+    if (isWorkerBusy) {
+        return;
+    }
+
+    // I'm free. Let's update!
+    try {
+        isWorkerBusy = true;
+        await moduleWorker();
+    }
+    finally {
+        isWorkerBusy = false;
+    }
+}
+
+async function moduleWorker() {
+    const context = getContext();
+
+    // non-characters not supported
+    if (!context.groupId && !context.characterId) {
+        removeExpression();
+        return;
+    }
+
+    // character changed
+    if (context.groupId !== lastCharacter && context.characterId !== lastCharacter) {
+        removeExpression();
+        spriteCache = {};
+    }
+
+    const currentLastMessage = getLastCharacterMessage();
+
+    // character has no expressions or it is not loaded
+    if (Object.keys(spriteCache).length === 0) {
+        await validateImages(currentLastMessage.name);
+        lastCharacter = context.groupId || context.characterId;
+    }
+
+    const offlineMode = $('.expression_settings .offline_mode');
+    if (!modules.includes('classify')) {
+        $('.expression_settings').show();
+        offlineMode.css('display', 'block');
+        lastCharacter = context.groupId || context.characterId;
+
+        if (context.groupId) {
+            await validateImages(currentLastMessage.name, true);
+        }
+
+        return;
+    }
+    else {
+        // force reload expressions list on connect to API
+        if (offlineMode.is(':visible')) {
+            expressionsList = null;
+            spriteCache = {};
+            expressionsList = await getExpressionsList();
+            await validateImages(currentLastMessage.name, true);
+        }
+
+        offlineMode.css('display', 'none');
+    }
+
+    
+    // check if last message changed
+    if ((lastCharacter === context.characterId || lastCharacter === context.groupId)
+        && lastMessage === currentLastMessage.mes) {
+        return;
+    }
+
+    // API is busy
+    if (inApiCall) {
+        return;
+    }
+
+    try {
+        inApiCall = true;
+        const url = new URL(getApiUrl());
+        url.pathname = '/api/classify';
+
+        const apiResult = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Bypass-Tunnel-Reminder': 'bypass',
+            },
+            body: JSON.stringify({ text: currentLastMessage.mes })
+        });
+
+        if (apiResult.ok) {
+            const name = context.groupId ? currentLastMessage.name : context.name2;
+            const force = !!context.groupId;
+            const data = await apiResult.json();
+            let expression = data.classification[0].label;
+
+            // Character won't be angry on you for swiping
+            if (currentLastMessage.mes == '...' && expressionsList.includes('joy')) {
+                expression = 'joy';
+            }
+
+            setExpression(name, expression, force);
+        }
+
+    }
+    catch (error) {
+        console.log(error);
+    }
+    finally {
+        inApiCall = false;
+        lastCharacter = context.groupId || context.characterId;
+        lastMessage = currentLastMessage.mes;
+    }
+}
+
+function getLastCharacterMessage() {
+    const context = getContext();
+    const reversedChat = context.chat.slice().reverse();
+
+    for (let mes of reversedChat) {
+        if (mes.is_user || mes.is_system) {
+            continue;
+        }
+
+        return { mes: mes.mes, name: mes.name };
+    }
+
+    return { mes: '', name: null };
+}
+
+function removeExpression() {
+    lastMessage = null;
+    $('img.expression').off('error');
+    $('img.expression').prop('src', '');
+    $('img.expression').removeClass('default');
+    $('.expression_settings').hide();
+}
+
+async function validateImages(character, forceRedrawCached) {
+    if (!character) {
+        return;
+    }
+
+    const labels = await getExpressionsList();
+
+    if (spriteCache[character]) {
+        if (forceRedrawCached && $('#image_list').data('name') !== character) {
+            console.log('force redrawing character sprites list')
+            drawSpritesList(character, labels, spriteCache[character]);
+        }
+
+        return;
+    }
+
+    const sprites = await getSpritesList(character);
+    let validExpressions = drawSpritesList(character, labels, sprites);
+    spriteCache[character] = validExpressions;
+}
+
+function drawSpritesList(character, labels, sprites) {
+    let validExpressions = [];
+    $('.expression_settings').show();
+    $('#image_list').empty();
+    $('#image_list').data('name', character);
+    labels.sort().forEach((item) => {
+        const sprite = sprites.find(x => x.label == item);
+
+        if (sprite) {
+            validExpressions.push(sprite);
+            $('#image_list').append(getListItem(item, sprite.path, 'success'));
+        }
+        else {
+            $('#image_list').append(getListItem(item, '/img/No-Image-Placeholder.svg', 'failure'));
+        }
+    });
+    return validExpressions;
+}
+
+function getListItem(item, imageSrc, textClass) {
+    return `
+        <div id="${item}" class="expression_list_item">
+            <span class="expression_list_title ${textClass}">${item}</span>
+            <img class="expression_list_image" src="${imageSrc}" />
+        </div>
+    `;
+}
+
+async function getSpritesList(name) {
+    console.log('getting sprites list');
+
+    try {
+        const result = await fetch(`/get_sprites?name=${encodeURIComponent(name)}`, {
+            headers: {
+                'X-CSRF-Token': token,
+            }
+        });
+
+        let sprites = result.ok ? (await result.json()) : [];
+        return sprites;
+    }
+    catch (err) {
+        console.log(err);
+        return [];
+    }
+}
+
+async function getExpressionsList() {
+    console.log('getting expressions list');
+    // get something for offline mode (default images)
+    if (!modules.includes('classify')) {
+        return DEFAULT_EXPRESSIONS;
+    }
+
+    if (Array.isArray(expressionsList)) {
+        return expressionsList;
+    }
+
+    const url = new URL(getApiUrl());
+    url.pathname = '/api/classify/labels';
+
+    try {
+        const apiResult = await fetch(url, {
+            method: 'GET',
+            headers: { 'Bypass-Tunnel-Reminder': 'bypass' },
+        });
+
+        if (apiResult.ok) {
+
+            const data = await apiResult.json();
+            expressionsList = data.labels;
+            return expressionsList;
+        }
+    }
+    catch (error) {
+        console.log(error);
+        return [];
+    }
+}
+
+async function setExpression(character, expression, force) {
+    console.log('entered setExpressions');
+    await validateImages(character);
+    const img = $('img.expression');
+
+    const sprite = (spriteCache[character] && spriteCache[character].find(x => x.label === expression));
+    console.log('checking for expression images to show..');
+    if (sprite) {
+        console.log('setting expression from character images folder');
+        img.attr('src', sprite.path);
+        img.removeClass('default');
+        img.off('error');
+        img.on('error', function () {
+            $(this).attr('src', '');
+            if (force && extension_settings.expressions.showDefault) {
+                setDefault();
+            }
+        });
+    } else {
+        if (extension_settings.expressions.showDefault) {
+            setDefault();
+        }
+    }
+
+    function setDefault() {
+        console.log('setting default');
+        const defImgUrl = `/img/default-expressions/${expression}.png`;
+        //console.log(defImgUrl);
+        img.attr('src', defImgUrl);
+        img.addClass('default');
+    }
+    document.getElementById("expression-holder").style.display = '';
+}
+
+function onClickExpressionImage() {
+    // online mode doesn't need force set
+    if (modules.includes('classify')) {
+        return;
+    }
+
+    const expression = $(this).attr('id');
+    const name = getLastCharacterMessage().name;
+
+    if ($(this).find('.failure').length === 0) {
+        setExpression(name, expression, true);
+    }
+}
+
+(function () {
+    function addExpressionImage() {
+        const html = `
+            <div id="expression-holder" class="expression-holder" style="display:none;">
+                <div id="expression-holderheader" class="fa-solid fa-grip drag-grabber"></div>
+                <img id="expression-image" class="expression">
+            </div>`;
+        $('body').append(html);
+    }
+    function addSettings() {
+
+        const html = `
+        <div class="expression_settings">
+            <div class="inline-drawer">
+            <div class="inline-drawer-toggle inline-drawer-header">
+                <b>Expression images</b>
+                <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+            </div>
+            <div class="inline-drawer-content">
+                <p class="offline_mode">You are in offline mode. Click on the image below to set the expression.</p>
+                <div id="image_list"></div>
+                <p class="hint"><b>Hint:</b> <i>Create new folder in the <b>public/characters/</b> folder and name it as the name of the character.
+                Put images with expressions there. File names should follow the pattern: <tt>[expression_label].[image_format]</tt></i></p>
+                <label for="expressions_show_default"><input id="expressions_show_default" type="checkbox">Show default images (emojis) if missing</label>
+            </div>
+            </div>
+        </div>
+        `;
+        $('#extensions_settings').append(html);
+        $('#expressions_show_default').on('input', onExpressionsShowDefaultInput);
+        $('#expressions_show_default').prop('checked', extension_settings.expressions.showDefault).trigger('input');
+        $(document).on('click', '.expression_list_item', onClickExpressionImage);
+        $('.expression_settings').hide();
+    }
+
+    addExpressionImage();
+    addSettings();
+    setInterval(moduleWorkerWrapper, UPDATE_INTERVAL);
+})();

package/public/scripts/extensions/expressions/manifest.json

@@ -0,0 +1,13 @@
+{
+    "display_name": "Character Expressions",
+    "loading_order": 6,
+    "requires": [],
+    "optional": [
+        "classify"
+    ],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Cohee#1207",
+    "version": "1.0.0",
+    "homePage": "https://github.com/Cohee1207/SillyTavern"
+}

package/public/scripts/extensions/expressions/style.css

@@ -0,0 +1,115 @@
+.expression-helper {
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+}
+
+.expression-holder {
+    min-width: 100px;
+    min-height: 100px;
+    max-height: 90vh;
+    max-width: 90vh;
+    width: calc((100vw - var(--sheldWidth)) /2);
+    position: absolute;
+    bottom: 1px;
+    padding: 0;
+    filter: drop-shadow(2px 2px 2px #51515199);
+    z-index: 1;
+    overflow: hidden;
+
+}
+
+img.expression {
+    width: 100%;
+    height: 100%;
+    vertical-align: bottom;
+    object-fit: contain;
+}
+
+img.expression[src=""] {
+    visibility: hidden;
+}
+
+img.expression.default {
+    vertical-align: middle;
+}
+
+.debug-image {
+    display: none;
+    visibility: collapse;
+    opacity: 0;
+    width: 0px;
+    height: 0px;
+}
+
+.expression_list_item {
+    position: relative;
+    max-width: 20%;
+    max-height: 200px;
+    background-color: #515151b0;
+    border-radius: 10px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.expression_list_title {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+    font-weight: 600;
+    background-color: #000000a8;
+    width: 100%;
+    height: 20%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.expression_list_image {
+    max-width: 100%;
+    height: 100%;
+}
+
+#image_list {
+    display: flex;
+    flex-direction: row;
+    column-gap: 1rem;
+    margin: 1rem;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    row-gap: 1rem;
+}
+
+#image_list .success {
+    color: green;
+}
+
+#image_list .failure {
+    color: red;
+}
+
+.expression_settings p {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.expression_settings label {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    margin-left: 0px;
+}
+
+.expression_settings label input {
+    margin-left: 0px !important;
+}
+
+@media screen and (max-width:1200px) {
+    div.expression {
+        display: none;
+    }
+}

package/public/scripts/extensions/floating-prompt/index.js

@@ -0,0 +1,151 @@
+import { chat_metadata, saveSettingsDebounced } from "../../../script.js";
+import { extension_settings, getContext } from "../../extensions.js";
+import { debounce } from "../../utils.js";
+export { MODULE_NAME };
+
+const saveChatDebounced = debounce(async () => await getContext().saveChat(), 1000);
+
+const MODULE_NAME = '2_floating_prompt'; // <= Deliberate, for sorting lower than memory
+const UPDATE_INTERVAL = 1000;
+
+const DEFAULT_DEPTH = 4;
+const DEFAULT_POSITION = 1;
+const DEFAULT_INTERVAL = 1;
+
+const metadata_keys = {
+    prompt: 'note_prompt',
+    interval: 'note_interval',
+    depth: 'note_depth',
+    position: 'note_position',
+}
+
+async function onExtensionFloatingPromptInput() {
+    chat_metadata[metadata_keys.prompt] = $(this).val();
+    saveChatDebounced();
+}
+
+async function onExtensionFloatingIntervalInput() {
+    chat_metadata[metadata_keys.interval] = Number($(this).val());
+    saveChatDebounced();
+}
+
+async function onExtensionFloatingDepthInput() {
+    let value = Number($(this).val());
+
+    if (value < 0) {
+        value = Math.abs(value);
+        $(this).val(value);
+    }
+
+    chat_metadata[metadata_keys.depth] = value;
+    saveChatDebounced();
+}
+
+async function onExtensionFloatingPositionInput(e) {
+    chat_metadata[metadata_keys.position] = e.target.value;
+    saveChatDebounced();
+}
+
+function onExtensionFloatingDefaultInput() {
+    extension_settings.note.default = $(this).val();
+    saveSettingsDebounced();
+}
+
+function loadSettings() {
+    chat_metadata[metadata_keys.prompt] = chat_metadata[metadata_keys.prompt] ?? extension_settings.note.default ?? '';
+    chat_metadata[metadata_keys.interval] = chat_metadata[metadata_keys.interval] ?? DEFAULT_INTERVAL;
+    chat_metadata[metadata_keys.position] = chat_metadata[metadata_keys.position] ?? DEFAULT_POSITION;
+    chat_metadata[metadata_keys.depth] = chat_metadata[metadata_keys.depth] ?? DEFAULT_DEPTH;
+    $('#extension_floating_prompt').val(chat_metadata[metadata_keys.prompt]);
+    $('#extension_floating_interval').val(chat_metadata[metadata_keys.interval]);
+    $('#extension_floating_depth').val(chat_metadata[metadata_keys.depth]);
+    $(`input[name="extension_floating_position"][value="${chat_metadata[metadata_keys.position]}"]`).prop('checked', true);
+    $('#extension_floating_default').val(extension_settings.note.default);
+}
+
+async function moduleWorker() {
+    const context = getContext();
+
+    if (!context.groupId && !context.characterId) {
+        return;
+    }
+
+    loadSettings();
+
+    // take the count of messages
+    let lastMessageNumber = Array.isArray(context.chat) && context.chat.length ? context.chat.filter(m => m.is_user).length : 0;
+
+    // special case for new chat
+    if (Array.isArray(context.chat) && context.chat.length === 1) {
+        lastMessageNumber = 1;
+    }
+
+    if (lastMessageNumber <= 0 || chat_metadata[metadata_keys.interval] <= 0) {
+        context.setExtensionPrompt(MODULE_NAME, '');
+        $('#extension_floating_counter').text('No');
+        return;
+    }
+
+    const messagesTillInsertion = lastMessageNumber >= chat_metadata[metadata_keys.interval]
+        ? (lastMessageNumber % chat_metadata[metadata_keys.interval])
+        : (chat_metadata[metadata_keys.interval] - lastMessageNumber);
+    const shouldAddPrompt = messagesTillInsertion == 0;
+    const prompt = shouldAddPrompt ? $('#extension_floating_prompt').val() : '';
+    context.setExtensionPrompt(MODULE_NAME, prompt, chat_metadata[metadata_keys.position], chat_metadata[metadata_keys.depth]);
+    $('#extension_floating_counter').text(shouldAddPrompt ? 'This' : messagesTillInsertion);
+}
+
+(function () {
+    function addExtensionsSettings() {
+        const settingsHtml = `
+        <div class="floating_prompt_settings">
+            <div class="inline-drawer">
+                <div class="inline-drawer-toggle inline-drawer-header">
+                    <b>Author's Note / Character Bias</b>
+                    <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+            </div>
+            <div class="inline-drawer-content">
+                <label for="extension_floating_prompt">Append the following text:</label>
+                <textarea id="extension_floating_prompt" class="text_pole" rows="8"></textarea>
+                <div class="floating_prompt_radio_group">
+                    <label>
+                        <input type="radio" name="extension_floating_position" value="0" />
+                        After scenario
+                    </label>
+                    <label>
+                        <input type="radio" name="extension_floating_position" value="1" />
+                        In-chat
+                    </label>
+                </div>
+                <label for="extension_floating_interval">Every N messages <b>you</b> send (set to 0 to disable):</label>
+                <input id="extension_floating_interval" class="text_pole" type="number" min="0" max="999" />
+                <label for="extension_floating_interval">Insertion depth (for in-chat positioning):</label>
+                <input id="extension_floating_depth" class="text_pole" type="number" min="0" max="99" />
+                <span>Appending to the prompt in next: <span id="extension_floating_counter">No</span> message(s)</span>
+                </div>
+            </div>
+            <div class="inline-drawer">
+                <div class="inline-drawer-toggle inline-drawer-header">
+                    <b>Default note for new chats</b>
+                    <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+                </div>
+                <div class="inline-drawer-content">
+                    <label for="extension_floating_default">Default Author's Note</label>
+                    <textarea id="extension_floating_default" class="text_pole" rows="8"
+                    placeholder="Example:\n[Scenario: wacky adventures; Genre: romantic comedy; Style: verbose, creative]"></textarea>
+                </div>
+            </div>
+        </div>
+        `;
+
+        $('#extensions_settings').append(settingsHtml);
+        $('#extension_floating_prompt').on('input', onExtensionFloatingPromptInput);
+        $('#extension_floating_interval').on('input', onExtensionFloatingIntervalInput);
+        $('#extension_floating_depth').on('input', onExtensionFloatingDepthInput);
+        $('#extension_floating_default').on('input', onExtensionFloatingDefaultInput);
+        $('input[name="extension_floating_position"]').on('change', onExtensionFloatingPositionInput);
+    }
+
+    addExtensionsSettings();
+    setInterval(moduleWorker, UPDATE_INTERVAL);
+})();

package/public/scripts/extensions/floating-prompt/manifest.json

@@ -0,0 +1,11 @@
+{
+    "display_name": "Author's Note / Character Bias",
+    "loading_order": 1,
+    "requires": [],
+    "optional": [],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Cohee#1207",
+    "version": "1.0.0",
+    "homePage": "https://github.com/Cohee1207/SillyTavern"
+}