Merge pull request #373 from TheBestReguile/dev

Move KAI Horde to dedicated dropdown

public/index.html

@@ -980,19 +980,65 @@
                     <div id="main-API-selector-block">
                         <select id="main_api">
                             <option value="kobold">KoboldAI</option>
+                            <option value="koboldhorde">KoboldAI Horde</option>
                             <option value="textgenerationwebui">Text Gen WebUI (ooba)</option>
                             <option value="novel">NovelAI</option>
                             <option value="openai">OpenAI</option>
                             <option value="poe">Poe</option>
                         </select>
                     </div>
-                    <div id="kobold_api" style="position: relative;"> <!-- shows the kobold settings -->
+                    <div id="kobold_horde" style="position: relative;"> <!-- shows the kobold settings -->
                         <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
-                            <label for="use_horde" class="checkbox_label">
+                        <div id="kobold_horde_block">
-                                <input id="use_horde" type="checkbox" />
+                            <ul>
-                                Use Horde
+                                <li>
+                                    <a target="_blank" href="https://horde.koboldai.net/register">Register a Horde account for faster queue times</a>
+                                </li>
+                                <li>
+                                    <a target="_blank" href="https://github.com/db0/AI-Horde-Worker#readme">Learn how to contribute your idle GPU cycles to the Horde</a>
+                                </li>
+                            </ul>
+
+                            <label for="horde_auto_adjust_context_length" class="checkbox_label">
+                                <input id="horde_auto_adjust_context_length" type="checkbox" />
+                                Adjust context size to worker capabilities
                             </label>
 
+                            <label for="horde_auto_adjust_response_length" class="checkbox_label">
+                                <input id="horde_auto_adjust_response_length" type="checkbox" />
+                                Adjust response length to worker capabilities
+                            </label>
+                            <h4>API key</h4>
+                            <h5>Get it here: <a target="_blank" href="https://horde.koboldai.net/register">Register</a><br>
+                                Enter <span class="monospace">0000000000</span> to use anonymous mode.
+                            </h5>
+                            <div>
+                                <a id="horde_kudos" href="javascript:void(0);">View my Kudos</a>
+                            </div>
+                            <div class="flex-container">
+                                <input id="horde_api_key" name="horde_api_key" class="text_pole flex1" maxlength="500" type="text" placeholder="0000000000" autocomplete="off">
+                                <div title="Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_horde"></div>
+                            </div>
+                            <div class="neutral_warning">For privacy reasons, your API key will be hidden after you reload the page.</div>
+                            <h4 class="horde_model_title">
+                                Model
+                                <div id="horde_refresh" title="Refresh models" class="right_menu_button">
+                                    <div class="fa-solid fa-repeat "></div>
+                                </div>
+                            </h4>
+                            <small class="horde_multiple_hint">Hold Control / Command key to select multiple models.</small>
+                            <select id="horde_model" multiple>
+                                <option>-- Horde models not loaded --</option>
+                            </select>
+                        </div>
+                            <div id="online_status_horde">
+                                <div id="online_status_indicator_horde"></div>
+                                <div id="online_status_text_horde">Not connected</div>
+                            </div>
+                        </form>
+                    </div>
+                    <div id="kobold_api" style="position: relative;"> <!-- shows the kobold settings -->
+                        <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
                             <div id="kobold_api_block">
                                 <h4>API url</h4>
                                 <h5>Example: http://127.0.0.1:5000/api </h5>
@@ -1000,48 +1046,6 @@
                                 <input id="api_button" class="menu_button" type="submit" value="Connect">
                                 <div id="api_loading" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
                             </div>
-                            <div id="kobold_horde_block">
-                                <ul>
-                                    <li>
-                                        <a target="_blank" href="https://horde.koboldai.net/register">Register a Horde account for faster queue times</a>
-                                    </li>
-                                    <li>
-                                        <a target="_blank" href="https://github.com/db0/AI-Horde-Worker#readme">Learn how to contribute your idle GPU cycles to the Horde</a>
-                                    </li>
-                                </ul>
-
-                                <label for="horde_auto_adjust_context_length" class="checkbox_label">
-                                    <input id="horde_auto_adjust_context_length" type="checkbox" />
-                                    Adjust context size to worker capabilities
-                                </label>
-
-                                <label for="horde_auto_adjust_response_length" class="checkbox_label">
-                                    <input id="horde_auto_adjust_response_length" type="checkbox" />
-                                    Adjust response length to worker capabilities
-                                </label>
-                                <h4>API key</h4>
-                                <h5>Get it here: <a target="_blank" href="https://horde.koboldai.net/register">Register</a><br>
-                                    Enter <span class="monospace">0000000000</span> to use anonymous mode.
-                                </h5>
-                                <div>
-                                    <a id="horde_kudos" href="javascript:void(0);">View my Kudos</a>
-                                </div>
-                                <div class="flex-container">
-                                    <input id="horde_api_key" name="horde_api_key" class="text_pole flex1" maxlength="500" type="text" placeholder="0000000000" autocomplete="off">
-                                    <div title="Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_horde"></div>
-                                </div>
-                                <div class="neutral_warning">For privacy reasons, your API key will be hidden after you reload the page.</div>
-                                <h4 class="horde_model_title">
-                                    Model
-                                    <div id="horde_refresh" title="Refresh models" class="right_menu_button">
-                                        <div class="fa-solid fa-repeat "></div>
-                                    </div>
-                                </h4>
-                                <small class="horde_multiple_hint">Hold Control / Command key to select multiple models.</small>
-                                <select id="horde_model" multiple>
-                                    <option>-- Horde models not loaded --</option>
-                                </select>
-                            </div>
                             <div id="online_status2">
                                 <div id="online_status_indicator2"></div>
                                 <div id="online_status_text2">Not connected</div>

public/script.js

@@ -628,6 +628,8 @@ function checkOnlineStatus() {
     if (online_status == "no_connection") {
         $("#online_status_indicator2").css("background-color", "red");  //Kobold
         $("#online_status_text2").html("No connection...");
+        $("#online_status_indicator_horde").css("background-color", "red");  //Kobold Horde
+        $("#online_status_text_horde").html("No connection...");
         $("#online_status_indicator3").css("background-color", "red");  //Novel
         $("#online_status_text3").html("No connection...");
         $(".online_status_indicator4").css("background-color", "red");  //OAI / ooba
@@ -639,6 +641,8 @@ function checkOnlineStatus() {
     } else {
         $("#online_status_indicator2").css("background-color", "green"); //kobold
         $("#online_status_text2").html(online_status);
+        $("#online_status_indicator_horde").css("background-color", "green");  //Kobold Horde
+        $("#online_status_text_horde").html(online_status);
         $("#online_status_indicator3").css("background-color", "green"); //novel
         $("#online_status_text3").html(online_status);
         $(".online_status_indicator4").css("background-color", "green"); //OAI / ooba
@@ -648,7 +652,7 @@ function checkOnlineStatus() {
 
 async function getStatus() {
     if (is_get_status) {
-        if (main_api == "kobold" && horde_settings.use_horde) {
+        if (main_api == "koboldhorde") {
             try {
                 const hordeStatus = await checkHordeStatus();
                 online_status = hordeStatus ? 'Connected' : 'no_connection';
@@ -694,7 +698,7 @@ async function getStatus() {
                 }
 
                 // determine if we can use stop sequence
-                if (main_api == "kobold") {
+                if (main_api === "kobold" || main_api === "koboldhorde") {
                     kai_settings.use_stop_sequence = canUseKoboldStopSequence(data.version);
                 }
 
@@ -1888,7 +1892,7 @@ async function Generate(type, { automatic_trigger, force_name2, resolve, reject,
 
         // Adjust token limit for Horde
         let adjustedParams;
-        if (main_api == 'kobold' && horde_settings.use_horde && (horde_settings.auto_adjust_context_length || horde_settings.auto_adjust_response_length)) {
+        if (main_api == 'koboldhorde' && (horde_settings.auto_adjust_context_length || horde_settings.auto_adjust_response_length)) {
             try {
                 adjustedParams = await adjustHordeGenerationParams(max_context, amount_gen);
             }
@@ -2160,7 +2164,7 @@ async function Generate(type, { automatic_trigger, force_name2, resolve, reject,
 
             let thisPromptBits = [];
 
-            if (main_api == 'kobold' && horde_settings.use_horde && horde_settings.auto_adjust_response_length) {
+            if (main_api == 'koboldhorde' && horde_settings.auto_adjust_response_length) {
                 this_amount_gen = Math.min(this_amount_gen, adjustedParams.maxLength);
                 this_amount_gen = Math.max(this_amount_gen, MIN_AMOUNT_GEN); // prevent validation errors
             }
@@ -2176,10 +2180,13 @@ async function Generate(type, { automatic_trigger, force_name2, resolve, reject,
                     singleline: kai_settings.single_line,
                 };
 
-                if (preset_settings != 'gui' || horde_settings.use_horde) {
+            }
-                    const maxContext = horde_settings.use_horde && horde_settings.auto_adjust_context_length ? adjustedParams.maxContextLength : max_context;
+            else if(main_api == 'koboldhorde'){
+                if (preset_settings != 'gui') {
+                    const maxContext = horde_settings.auto_adjust_context_length ? adjustedParams.maxContextLength : max_context;
                     generate_data = getKoboldGenerationData(finalPromt, this_settings, this_amount_gen, maxContext, isImpersonate);
                 }
+
             }
             else if (main_api == 'textgenerationwebui') {
                 generate_data = getTextGenGenerationData(finalPromt, this_amount_gen, isImpersonate);
@@ -2218,7 +2225,7 @@ async function Generate(type, { automatic_trigger, force_name2, resolve, reject,
                     sendOpenAIRequest(type, generate_data.prompt).then(onSuccess).catch(onError);
                 }
             }
-            else if (main_api == 'kobold' && horde_settings.use_horde) {
+            else if (main_api == 'koboldhorde') {
                 generateHorde(finalPromt, generate_data).then(onSuccess).catch(onError);
             }
             else if (main_api == 'poe') {
@@ -2471,7 +2478,7 @@ function sendMessageAsUser(textareaText, messageBias) {
 
 function getMaxContextSize() {
     let this_max_context = 1487;
-    if (main_api == 'kobold' || main_api == 'textgenerationwebui') {
+    if (main_api == 'kobold' || main_api == 'koboldhorde' || main_api == 'textgenerationwebui') {
         this_max_context = (max_context - amount_gen);
     }
     if (main_api == 'novel') {
@@ -3024,7 +3031,7 @@ function throwCircuitBreakerError() {
 }
 
 function extractTitleFromData(data) {
-    if (main_api == 'kobold' && horde_settings.use_horde) {
+    if (main_api == 'koboldhorde') {
         return data.workerName;
     }
 
@@ -3034,11 +3041,11 @@ function extractTitleFromData(data) {
 function extractMessageFromData(data) {
     let getMessage = "";
 
-    if (main_api == 'kobold' && !horde_settings.use_horde) {
+    if (main_api == 'kobold') {
         getMessage = data.results[0].text;
     }
 
-    if (main_api == 'kobold' && horde_settings.use_horde) {
+    if (main_api == 'koboldhorde') {
         getMessage = data.text;
     }
 
@@ -3234,7 +3241,7 @@ function extractImageFromMessage(getMessage) {
 }
 
 export function isMultigenEnabled() {
-    return power_user.multigen && (main_api == 'textgenerationwebui' || main_api == 'kobold' || main_api == 'novel');
+    return power_user.multigen && (main_api == 'textgenerationwebui' || main_api == 'kobold'  || main_api == 'koboldhorde' || main_api == 'novel');
 }
 
 function activateSendButtons() {
@@ -3546,6 +3553,15 @@ function changeMainAPI() {
     const selectedVal = $("#main_api").val();
     //console.log(selectedVal);
     const apiElements = {
+        "koboldhorde": {
+            apiSettings: $("#kobold_api-settings"),
+            apiConnector: $("#kobold_horde"),
+            apiPresets: $('#kobold_api-presets'),
+            apiRanges: $("#range_block"),
+            maxContextElem: $("#max_context_block"),
+            amountGenElem: $("#amount_gen_block"),
+            softPromptElem: $("#softprompt_block")
+        },
         "kobold": {
             apiSettings: $("#kobold_api-settings"),
             apiConnector: $("#kobold_api"),
@@ -3595,49 +3611,62 @@ function changeMainAPI() {
     //console.log('--- apiElements--- ');
     //console.log(apiElements);
 
+    //first, disable everything so the old elements stop showing
     for (const apiName in apiElements) {
         const apiObj = apiElements[apiName];
-        const isCurrentApi = selectedVal === apiName;
+        //do not hide items to then proceed to immediately show them.
-
+        if(selectedVal === apiName){
-        apiObj.apiSettings.css("display", isCurrentApi ? "block" : "none");
+            continue;
-        apiObj.apiConnector.css("display", isCurrentApi ? "block" : "none");
-        apiObj.apiRanges.css("display", isCurrentApi ? "block" : "none");
-        apiObj.apiPresets.css("display", isCurrentApi ? "block" : "none");
-
-        if (isCurrentApi && apiName === "openai") {
-            apiObj.apiPresets.css("display", "flex");
         }
+        apiObj.apiSettings.css("display", "none");
+        apiObj.apiConnector.css("display", "none");
+        apiObj.apiRanges.css("display", "none");
+        apiObj.apiPresets.css("display", "none");
+    }
 
-        if (isCurrentApi && apiName === "kobold") {
+    //then, find and enable the active item.  
-            //console.log("enabling SP for kobold");
+    //This is split out of the loop so that different apis can share settings divs
-            $("#softprompt_block").css("display", "block");
+    let activeItem = apiElements[selectedVal];
-        }
 
-        if (isCurrentApi && (apiName === "textgenerationwebui" || apiName === "novel")) {
+    activeItem.apiSettings.css("display", "block");
-            console.log("enabling amount_gen for ooba/novel");
+    activeItem.apiConnector.css("display", "block");
-            apiObj.amountGenElem.find('input').prop("disabled", false);
+    activeItem.apiRanges.css("display", "block");
-            apiObj.amountGenElem.css("opacity", 1.0);
+    activeItem.apiPresets.css("display", "block");
-        }
 
-        // Hide common settings for OpenAI
+    if (selectedVal === "openai") {
-        if (selectedVal == "openai") {
+        activeItem.apiPresets.css("display", "flex");
-            $("#common-gen-settings-block").css("display", "none");
+    }
-        } else {
-            $("#common-gen-settings-block").css("display", "block");
-        }
-        // Hide amount gen for poe
-        if (selectedVal == "poe") {
-            $("#amount_gen_block").css("display", "none");
-        } else {
-            $("#amount_gen_block").css("display", "flex");
-        }
 
+    if (selectedVal === "kobold" || selectedVal === 'koboldhorde') {
+        //console.log("enabling SP for kobold");
+        $("#softprompt_block").css("display", "block");
+    }
+
+    if (selectedVal === "textgenerationwebui" || selectedVal === "novel") {
+        console.log("enabling amount_gen for ooba/novel");
+        activeItem.amountGenElem.find('input').prop("disabled", false);
+        activeItem.amountGenElem.css("opacity", 1.0);
+    }
+
+    // Hide common settings for OpenAI
+        console.log('value?', selectedVal);
+    if (selectedVal == "openai") {
+        console.log('hiding settings?');
+        $("#common-gen-settings-block").css("display", "none");
+    } else {
+        $("#common-gen-settings-block").css("display", "block");
+    }
+    // Hide amount gen for poe
+    if (selectedVal == "poe") {
+        $("#amount_gen_block").css("display", "none");
+    } else {
+        $("#amount_gen_block").css("display", "flex");
     }
 
     main_api = selectedVal;
     online_status = "no_connection";
 
-    if (main_api == "kobold" && horde_settings.use_horde) {
+    if (main_api == "koboldhorde") {
         is_get_status = true;
         getStatus();
         getHordeModels();
@@ -4579,7 +4608,7 @@ function setGenerationProgress(progress) {
 }
 
 function isHordeGenerationNotAllowed() {
-    if (main_api == "kobold" && horde_settings.use_horde && preset_settings == "gui") {
+    if (main_api == "koboldhorde" && preset_settings == "gui") {
         toastr.error('GUI Settings preset is not supported for Horde. Please select another preset.');
         return true;
     }
@@ -5683,7 +5712,7 @@ $(document).ready(function () {
 
     $("#api_button").click(function (e) {
         e.stopPropagation();
-        if ($("#api_url_text").val() != "" && !horde_settings.use_horde) {
+        if ($("#api_url_text").val() != "") {
             let value = formatKoboldUrl($.trim($("#api_url_text").val()));
 
             if (!value) {
@@ -5704,12 +5733,6 @@ $(document).ready(function () {
             clearSoftPromptsList();
             getSoftPromptsList();
         }
-        else if (horde_settings.use_horde) {
-            main_api = "kobold";
-            is_get_status = true;
-            getStatus();
-            clearSoftPromptsList();
-        }
     });
 
     $("#api_button_textgenerationwebui").click(function (e) {

public/scripts/horde.js

@@ -16,7 +16,6 @@ let models = [];
 
 let horde_settings = {
     models: [],
-    use_horde: false,
     auto_adjust_response_length: true,
     auto_adjust_context_length: false,
 };
@@ -180,7 +179,6 @@ function loadHordeSettings(settings) {
         Object.assign(horde_settings, settings.horde_settings);
     }
 
-    $('#use_horde').prop("checked", horde_settings.use_horde).trigger('input');
     $('#horde_auto_adjust_response_length').prop("checked", horde_settings.auto_adjust_response_length);
     $('#horde_auto_adjust_context_length').prop("checked", horde_settings.auto_adjust_context_length);
 }
@@ -208,23 +206,6 @@ async function showKudos() {
 }
 
 jQuery(function () {
-    $("#use_horde").on("input", async function () {
-        horde_settings.use_horde = !!$(this).prop("checked");
-
-        if (horde_settings.use_horde) {
-            $('#kobold_api_block').hide();
-            $('#kobold_horde_block').show();
-        }
-        else {
-            $('#kobold_api_block').show();
-            $('#kobold_horde_block').hide();
-        }
-
-        // Trigger status check
-        changeMainAPI();
-        saveSettingsDebounced();
-    });
-
     $("#horde_model").on("change", function () {
         horde_settings.models = $('#horde_model').val();
         console.log('Updated Horde models', horde_settings.models);

public/style.css

@@ -1721,6 +1721,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
 
 /* ------ online status indicators and texts. 2 = kobold AI, 3 = Novel AI  ----------*/
 #online_status2,
+#online_status_horde,
 .online_status4 {
     opacity: 0.5;
     margin-top: 2px;
@@ -1728,6 +1729,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
 }
 
 #online_status_indicator2,
+#online_status_indicator_horde,
 .online_status_indicator4 {
     border-radius: 7px;
     width: 14px;
@@ -1737,6 +1739,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
 }
 
 #online_status_text2,
+#online_status_text_horde,
 .online_status_text4 {
     margin-left: 4px;
     display: inline-block;