Fix horde for GUI preset mode

shorter message sound
Merge branch 'dev' of https://github.com/SillyLossy/TavernAI into dev
2025-06-05 21:59:27 +02:00 · 2023-04-10 00:08:10 +03:00 · 2023-04-10 05:21:12 +09:00 · 2023-04-09 23:08:31 +03:00 · 2023-04-09 23:08:28 +03:00 · 2023-04-10 04:54:44 +09:00
7 changed files with 206 additions and 201 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@

 <head>
    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable-no">
+    <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>-->
@@ -751,7 +751,7 @@
                                </div>
                            </h4>
                            <select id="horde_model">
-                                <option>-- Not connected to Horde --</option>
+                                <option>-- Horde models not loaded --</option>
                            </select>
                        </div>
                        <div id="online_status2">
@@ -1084,9 +1084,20 @@
                <div id="power-user-options-block">
                    <h3>Power User Options</h3>
                    <div id="power-user-option-checkboxes">
+                        <label for="swipes-checkbox">
+                            <input id="swipes-checkbox" type="checkbox" />
+                            Swipes
+                        </label>

-                        <label for="auto-load-chat-checkbox"><input id="auto-load-chat-checkbox" type="checkbox" />
-                            Auto-load Last Chat
+                        <label for="play_message_sound" class="checkbox_label">
+                            <input id="play_message_sound" type="checkbox" />
+                            <audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio>
+                            <span>
+                                Play a sound on new message 
+                                <a href="/notes/message_sound" class="notes-link" target="_blank">
+                                    <span class="note-link-span">?</span>
+                                </a>
+                            </span>
                        </label>

                        <label for="fast_ui_mode" class="checkbox_label" title="Blur can cause browser lag, especially in Bubble Chat mode. To fix: Turn on your browser's Hardware Acceleration, and restart your browser or simply disable the blur effect with this toggle.">
@@ -1094,8 +1105,8 @@
                            No Blur Effect
                        </label>

-                        <label for="swipes-checkbox"><input id="swipes-checkbox" type="checkbox" />
-                            Swipes
+                        <label for="auto-load-chat-checkbox"><input id="auto-load-chat-checkbox" type="checkbox" />
+                            Auto-load Last Chat
                        </label>
                    </div>
                </div>
--- a/public/notes/message_sound.html
+++ b/public/notes/message_sound.html
@@ -0,0 +1,30 @@
+<html>
+
+<head>
+    <title>Message Sound</title>
+    <link rel="stylesheet" href="/css/notes.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+    <div id="main">
+        <div id="content">
+            <h2>Message Sound</h2>
+            <p>To play your own custom sound on receiving a new message from bot, replace the following MP3 file in your TavernAI folder:</p>
+            <code>
+                public/sounds/message.mp3
+            </code>
+            <small>
+                Plays at 80% volume.
+            </small>
+        </div>
+    </div>
+</body>
+
+</html>
--- a/public/script.js
+++ b/public/script.js
@@ -41,6 +41,7 @@ import {
 import {
    collapseNewlines,
    loadPowerUserSettings,
+    playMessageSound,
    power_user,
 } from "./scripts/power-user.js";

@@ -71,6 +72,7 @@ import {
    loadHordeSettings,
    generateHorde,
    checkHordeStatus,
+    getHordeModels,
    adjustHordeGenerationParams,
 } from "./scripts/horde.js";

@@ -1114,6 +1116,11 @@ async function Generate(type, automatic_trigger, force_name2) {
        return;
    }

+    if (isHordeGenerationNotAllowed()) {
+        is_send_press = false;
+        return;
+    }
+
    if (selected_group && !is_group_generating) {
        generateGroupWrapper(false, type = type);
        return;
@@ -1796,6 +1803,7 @@ async function Generate(type, automatic_trigger, force_name2) {
                    //getMessage = getMessage.replace(/^\s+/g, '');
                    if (getMessage.length > 0) {
                        ({ type, getMessage } = saveReply(type, getMessage, this_mes_is_name));
+                        playMessageSound();
                        generate_loop_counter = 0;
                    } else {
                        ++generate_loop_counter;
@@ -2192,6 +2200,7 @@ function changeMainAPI() {
    if (main_api == "kobold" && horde_settings.use_horde) {
        is_get_status = true;
        getStatus();
+        getHordeModels();
    }
 }

@@ -2276,27 +2285,6 @@ async function getSettings(type) {
                    changeMainAPI();
                }

-                novelai_setting_names = data.novelai_setting_names;
-                novelai_settings = data.novelai_settings;
-                novelai_settings.forEach(function (item, i, arr) {
-                    novelai_settings[i] = JSON.parse(item);
-                });
-                let arr_holder = {};
-
-                $("#settings_perset_novel").empty();
-
-                novelai_setting_names.forEach(function (item, i, arr) {
-                    arr_holder[item] = i;
-                    $("#settings_perset_novel").append(`<option value=${i}>${item}</option>`);
-                });
-                novelai_setting_names = {};
-                novelai_setting_names = arr_holder;
-
-                nai_settings.preset_settings_novel = settings.preset_settings_novel;
-                $(
-                    `#settings_perset_novel option[value=${novelai_setting_names[nai_settings.preset_settings_novel]}]`
-                ).attr("selected", "true");
-
                //Load KoboldAI settings
                koboldai_setting_names = data.koboldai_setting_names;
                koboldai_settings = data.koboldai_settings;
@@ -2304,7 +2292,7 @@ async function getSettings(type) {
                    koboldai_settings[i] = JSON.parse(item);
                });

-                arr_holder = {};
+                let arr_holder = {};

                $("#settings_perset").empty(); //RossAscends: uncommented this to prevent settings selector from doubling preset list on refresh
                $("#settings_perset").append(
@@ -2320,6 +2308,39 @@ async function getSettings(type) {
                koboldai_setting_names = arr_holder;
                preset_settings = settings.preset_settings;

+                if (preset_settings == "gui") {
+                    selectKoboldGuiPreset();
+                } else {
+                    if (typeof koboldai_setting_names[preset_settings] !== "undefined") {
+                        $(`#settings_perset option[value=${koboldai_setting_names[preset_settings]}]`)
+                            .attr("selected", "true");
+                    } else {
+                        preset_settings = "gui";
+                        selectKoboldGuiPreset();
+                    }
+                }
+
+                novelai_setting_names = data.novelai_setting_names;
+                novelai_settings = data.novelai_settings;
+                novelai_settings.forEach(function (item, i, arr) {
+                    novelai_settings[i] = JSON.parse(item);
+                });
+                arr_holder = {};
+
+                $("#settings_perset_novel").empty();
+
+                novelai_setting_names.forEach(function (item, i, arr) {
+                    arr_holder[item] = i;
+                    $("#settings_perset_novel").append(`<option value=${i}>${item}</option>`);
+                });
+                novelai_setting_names = {};
+                novelai_setting_names = arr_holder;
+
+                nai_settings.preset_settings_novel = settings.preset_settings_novel;
+                $(
+                    `#settings_perset_novel option[value=${novelai_setting_names[nai_settings.preset_settings_novel]}]`
+                ).attr("selected", "true");
+
                //Load AI model config settings (temp, context length, anchors, and anchor order)

                amount_gen = settings.amount_gen;
@@ -2376,21 +2397,6 @@ async function getSettings(type) {

                //Enable GUI deference settings if GUI is selected for Kobold
                if (main_api === "kobold") {
-                    if (preset_settings == "gui") {
-                        $("#settings_perset option[value=gui]")
-                            .attr("selected", "true")
-                            .trigger("change");
-                    } else {
-                        if (typeof koboldai_setting_names[preset_settings] !== "undefined") {
-                            $(`#settings_perset option[value=${koboldai_setting_names[preset_settings]}]`)
-                                .attr("selected", "true");
-                        } else {
-                            preset_settings = "gui";
-                            $("#settings_perset option[value=gui]")
-                                .attr("selected", "true")
-                                .trigger("change");
-                        }
-                    }
                }

                //Load User's Name and Avatar
@@ -2448,6 +2454,12 @@ async function getSettings(type) {
    });
 }

+function selectKoboldGuiPreset() {
+    $("#settings_perset option[value=gui]")
+        .attr("selected", "true")
+        .trigger("change");
+}
+
 async function saveSettings(type) {
    //console.log('Entering settings with name1 = '+name1);
    jQuery.ajax({
@@ -3060,6 +3072,15 @@ function sortCharactersList(field, order) {
    }
 }

+function isHordeGenerationNotAllowed() {
+    if (main_api == "kobold" && horde_settings.use_horde && preset_settings == "gui") {
+        callPopup('GUI Settings preset is not supported for Horde. Please select another preset.', 'text');
+        return true;
+    }
+
+    return false;
+}
+
 window["TavernAI"].getContext = function () {
    return {
        chat: chat,
@@ -3109,6 +3130,10 @@ $(document).ready(function () {
            closeMessageEditor();
        }

+        if (isHordeGenerationNotAllowed()) {
+            return;
+        }
+
        const swipe_duration = 120;
        const swipe_range = 700;
        //console.log(swipe_range);
--- a/public/scripts/horde.js
+++ b/public/scripts/horde.js
@@ -7,6 +7,7 @@ export {
    checkHordeStatus,
    loadHordeSettings,
    adjustHordeGenerationParams,
+    getHordeModels,
 }

 let models = [];
@@ -154,6 +155,16 @@ async function getHordeModels() {
        option.selected = horde_settings.model === model.name;
        $('#horde_model').append(option);
    }
+
+    // if previously selected is no longer available
+    if (horde_settings.model && !models.find(m => m.name == horde_settings.model)) {
+        horde_settings.model = null;
+    }
+
+    // if no models preselected - select a first one in dropdown
+    if (!horde_settings.model) {
+        horde_settings.model = $('#horde_model').find(":selected").val();
+    }
 }

 function loadHordeSettings(settings) {
@@ -182,9 +193,6 @@ $(document).ready(function () {
        // Trigger status check
        changeMainAPI();
        saveSettingsDebounced();
-        if (main_api === 'kobold' && horde_settings.use_horde) {
-            await getHordeModels();
-        }
    });

    $("#horde_model").on("change", function () {
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -3,6 +3,7 @@ import { saveSettingsDebounced } from "../script.js";
 export {
    loadPowerUserSettings,
    collapseNewlines,
+    playMessageSound,
    power_user,
 };

@@ -35,6 +36,7 @@ let power_user = {
    avatar_style: avatar_styles.ROUND,
    chat_display: chat_styles.DEFAULT,
    sheld_width: sheld_width.DEFAULT,
+    play_message_sound: false,
 };

 const storage_keys = {
@@ -53,6 +55,18 @@ const storage_keys = {
    sheld_width: "TavernAI_sheld_width"
 };

+function playMessageSound() {
+    if (!power_user.play_message_sound) {
+        return;
+    }
+
+    const audio = document.getElementById('audio_message_sound');
+    audio.volume = 0.8;
+    audio.pause();
+    audio.currentTime = 0;
+    audio.play();
+}
+
 function collapseNewlines(x) {
    return x.replaceAll(/\n+/g, "\n");
 }
@@ -129,6 +143,7 @@ function loadPowerUserSettings(settings) {
    $("#custom_chat_separator").val(power_user.custom_chat_separator);
    $("#fast_ui_mode").prop("checked", power_user.fast_ui_mode);
    $("#multigen").prop("checked", power_user.multigen);
+    $("#play_message_sound").prop("checked", power_user.play_message_sound);
    $(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
    $(`input[name="chat_display"][value="${power_user.chat_display}"]`).prop("checked", true);
    $(`input[name="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true);
@@ -199,10 +214,16 @@ $(document).ready(() => {
        localStorage.setItem(storage_keys.chat_display, power_user.chat_display);
        applyChatDisplay();
    });
+
    $(`input[name="sheld_width"]`).on('input', function (e) {
        power_user.sheld_width = Number(e.target.value);
        localStorage.setItem(storage_keys.sheld_width, power_user.sheld_width);
        console.log("sheld width changing now");
        applySheldWidth();
    });
+
+    $("#play_message_sound").on('input', function () {
+        power_user.play_message_sound = !!$(this).prop('checked');
+        saveSettingsDebounced();
+    });
 });
--- a/public/sounds/message.mp3
+++ b/public/sounds/message.mp3
--- a/public/style.css
+++ b/public/style.css
@@ -58,7 +58,7 @@ body {
    width: 100%;
    /*fallback for JS load*/
    height: 100svh;
-    /*defaults as 100%, then reassigned via JS as pixels*/
+    /*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/
    height: var(--doc-height);
    background-color: var(--greyCAIbg);
    background-repeat: no-repeat;
@@ -1018,7 +1018,8 @@ input[type=search]:focus::-webkit-search-cancel-button {
    align-items: center;
 }

-#user-settings-block h4, #user-settings-block h3  {
+#user-settings-block h4,
+#user-settings-block h3 {
    margin: 10px 0;
 }

@@ -3149,149 +3150,9 @@ label[for="extensions_autoconnect"] {

 /* ---------- @media queries must always go at the bottom ------------*/

-@media screen and (max-width: 450px) {
-    /*styles for mobile phones (tested on iPhone 13 Pro)*/
+/*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/

-    body {
-        font-size: 16px;
-        position: fixed;
-        touch-action: none;
-        overflow: hidden;
-    }
-
-    .drawer-content {
-        min-width: unset;
-        width: 100svw;
-        max-height: calc(100svh - 45px);
-        position: fixed;
-        left: 0;
-        top: 5px;
-        border: 1px solid var(--grey30);
-    }
-
-    #select_chat_popup {
-        align-items: start;
-        height: min-content;
-        align-content: start;
-    }
-
-    #top-settings-holder {
-        width: 100svw;
-        position: fixed;
-
-    }
-
-    #bg1,
-    #bg2 {
-        position: fixed;
-    }
-
-    #sheld,
-    #character_popup,
-    #world_popup {
-        /*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/
-        height: calc(100svh - 45px);
-        width: 100svw;
-        margin: 0 auto;
-        margin-left: 0px;
-        position: fixed;
-    }
-
-    #character_popup,
-    #world_popup,
-    #send_form {
-        border: 1px solid var(--grey30);
-    }
-
-    #chat {
-        border-left: 1px solid var(--grey30);
-        border-right: 1px solid var(--grey30);
-        border-bottom: 1px solid var(--grey30);
-        align-items: start;
-        align-content: start;
-    }
-
-    #sheld,
-    #character_popup {
-        overflow-y: hidden;
-    }
-
-    .mes-text {
-        padding-right: 25px;
-    }
-
-    #right-nav-panel,
-    #left-nav-panel {
-        height: calc(100svh - 45px);
-        min-width: 0px;
-        width: 100svw;
-        max-width: 100svw;
-        overflow-y: auto;
-        border-left: 1px solid var(--grey30);
-        border-right: 1px solid var(--grey30);
-        border-bottom: 1px solid var(--grey30);
-        border-radius: 0 0 20px 20px;
-        top: 40px;
-    }
-
-    #right-nav-panel h4 {
-        margin: 5px auto;
-    }
-
-    #form_create {
-        grid-template-rows:
-            [avatar] min-content [hr] min-content [descriptionHeader] min-content [description] auto [firstmessageHeader] min-content [firstMessage] auto;
-    }
-
-    #result_info {
-        font-size: 14px;
-    }
-
-    .avatar_div {
-        margin-top: 5px;
-    }
-
-    #character_popup {
-        width: calc(100svw - 5px);
-        border-radius: 0 0 0 20px;
-        margin-top: -35px;
-        height: calc(100svh - 30px);
-    }
-
-
-    #send_textarea {
-        /*larger input bar for mobile screens, easier to tap*/
-        font-size: 1.25rem;
-        line-height: 1.5rem;
-        min-height: calc(2rem + 0.75rem + 2px);
-        max-height: 200px;
-        word-wrap: break-word;
-        height: 40px;
-        resize: vertical;
-        display: block;
-        background-color: rgba(255, 0, 0, 0);
-        border: 0;
-        box-shadow: none;
-        padding: 6px 0 6px 0;
-        font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
-        margin: 0;
-        text-shadow: #000 0 0 3px;
-    }
-
-    #rm_ch_create_block textarea {
-        /*without this the text areas display far too large*/
-        max-height: 200px;
-    }
-
-    #talkativeness_hint span {
-        min-width: 33%;
-    }
-
-    /*for debug purposes*/
-    /* div {border: 1px solid purple;} */
-}
-
-@media (max-width: 800px) {
+@media (max-width: 1000px) {
    .mes img.img_extra {
        max-width: 100%;
    }
@@ -3305,7 +3166,7 @@ label[for="extensions_autoconnect"] {

    .drawer-content {
        min-width: unset;
-        width: 100svw;
+        width: 100%;
        max-height: calc(100svh - 45px);
        position: fixed;
        left: 0;
@@ -3333,11 +3194,9 @@ label[for="extensions_autoconnect"] {
    #sheld,
    #character_popup,
    #world_popup {
-        /*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/
        height: calc(100svh - 45px);
-        width: 100svw;
+        width: 100%;
        margin: 0 auto;
-        margin-left: 0px;
        position: fixed;
    }

@@ -3367,9 +3226,9 @@ label[for="extensions_autoconnect"] {
    #right-nav-panel,
    #left-nav-panel {
        height: calc(100svh - 45px);
-        min-width: 0px;
-        width: 100svw;
-        max-width: 100svw;
+        min-width: 100%;
+        width: 100%;
+        max-width: 100%;
        overflow-y: auto;
        border-left: 1px solid var(--grey30);
        border-right: 1px solid var(--grey30);
@@ -3396,10 +3255,10 @@ label[for="extensions_autoconnect"] {
    }

    #character_popup {
-        width: calc(100svw - 5px);
-        border-radius: 0 0 0 20px;
-        margin-top: -35px;
-        height: calc(100svh - 30px);
+        width: 100%;
+        border-radius: 0 0 20px 20px;
+        margin-top: 0px;
+        height: calc(100% - 40px);
    }


@@ -3484,4 +3343,55 @@ body.no-blur #world_popup,
 body.no-blur #dialogue_popup,
 body.no-blur #select_chat_popup {
    background-color: var(--black90a) !important;
+}
+
+/*this part only only applies to iOS devices*/
+@supports (-webkit-touch-callout: none) {
+    body {
+        margin: 0 auto;
+    }
+
+    #top-bar {
+        width: 100vw;
+    }
+
+    #sheld {
+        margin: unset;
+        padding: unset;
+        width: unset;
+        height: unset;
+        min-width: unset;
+        max-width: unset;
+        min-height: unset;
+        max-height: unset;
+
+        width: 100svw !important;
+        height: calc(100svh - 40px) !important;
+        padding-right: max(env(safe-area-inset-right), 5px) !important;
+        padding-left: max(env(safe-area-inset-left), 5px) !important;
+        padding-bottom: max(env(safe-area-inset-bottom), 15px) !important;
+    }
+
+    #character_popup,
+    #world_popup,
+    #left-nav-panel,
+    #right-nav-panel,
+    .drawer-content {
+        width: unset;
+        height: unset;
+        min-width: unset;
+        max-width: unset;
+        min-height: unset;
+        max-height: unset;
+
+        left: 0;
+        right: 0;
+        top: 0;
+        max-height: calc(100svh - env(safe-area-inset-bottom));
+        max-width: min(calc(100% - env(safe-area-inset-right) - env(safe-area-inset-left)), calc(100% - 5px));
+        margin: 0 auto;
+        margin-top: 40px;
+
+
+    }
 }
Author	SHA1	Message	Date
SillyLossy	66f7d55f76	Fix horde for GUI preset mode	2023-04-10 00:08:10 +03:00
RossAscends	64b1485070	shorter message sound	2023-04-10 05:21:12 +09:00
SillyLossy	25759ebe0b	Merge branch 'dev' of https://github.com/SillyLossy/TavernAI into dev	2023-04-09 23:08:31 +03:00
SillyLossy	c101368109	Replace message sound	2023-04-09 23:08:28 +03:00
RossAscends	e4c3c552d7	Merge branch 'dev' of https://github.com/SillyLossy/TavernAI into dev	2023-04-10 04:54:44 +09:00
RossAscends	8f531832e5	proper iOS margins	2023-04-10 04:54:41 +09:00
SillyLossy	915de0b41a	Add message sound option	2023-04-09 22:37:01 +03:00