First implementation for switching models for TabbyAPI

ToDo:
- Inform when API is ready after loading
- Fix display of loaded/selected model
- Verify that API key is admin key

public/index.html

@@ -2224,6 +2224,14 @@
                                     <small data-i18n="Example: 127.0.0.1:5000">Example: http://127.0.0.1:5000</small>
                                     <input id="tabby_api_url_text" class="text_pole wide100p" maxlength="500" value="" autocomplete="off" data-server-history="tabby">
                                 </div>
+                                <div>
+                                    <h4 data-i18n="Tabby API Model">Tabby API Model</h4>
+                                    <select id="tabby_api_model">
+                                        <option data-i18n="-- Connect to the API --">
+                                            -- Connect to the API --
+                                        </option>
+                                    </select>
+                                </div>
                             </div>
                             <div data-tg-type="koboldcpp">
                                 <div class="flex-container flexFlowColumn">

public/script.js

@@ -22,7 +22,7 @@ import {
     parseTabbyLogprobs,
 } from './scripts/textgen-settings.js';
 
-const { MANCER, TOGETHERAI, OOBA, APHRODITE, OLLAMA, INFERMATICAI, DREAMGEN, OPENROUTER } = textgen_types;
+const { MANCER, TOGETHERAI, OOBA, APHRODITE, OLLAMA, INFERMATICAI, DREAMGEN, OPENROUTER , TABBY } = textgen_types;
 
 import {
     world_info,
@@ -1149,6 +1149,9 @@ async function getStatusTextgen() {
         } else if (textgen_settings.type === APHRODITE) {
             loadAphroditeModels(data?.data);
             online_status = textgen_settings.aphrodite_model;
+        } else if (textgen_settings.type === TABBY) {
+            loadTabbyApiModels(data?.data);
+            online_status = textgen_settings.tabby_api_model;
         } else {
             online_status = data?.result;
         }

public/scripts/preset-manager.js

@@ -310,6 +310,7 @@ class PresetManager {
             'togetherai_model',
             'ollama_model',
             'aphrodite_model',
+            'tabby_api_model',
             'server_urls',
             'type',
             'custom_model',

public/scripts/textgen-models.js

@@ -1,13 +1,24 @@
 import { isMobile } from './RossAscends-mods.js';
-import { amount_gen, callPopup, eventSource, event_types, getRequestHeaders, max_context, setGenerationParamsFromPreset } from '../script.js';
+import {
+    amount_gen,
+    callPopup,
+    eventSource,
+    event_types,
+    getRequestHeaders,
+    max_context,
+    setGenerationParamsFromPreset,
+    token, settings,
+} from '../script.js';
 import { textgenerationwebui_settings as textgen_settings, textgen_types } from './textgen-settings.js';
 import { tokenizers } from './tokenizers.js';
+import { findSecret, readSecretState, SECRET_KEYS } from './secrets.js';
 
 let mancerModels = [];
 let togetherModels = [];
 let infermaticAIModels = [];
 let dreamGenModels = [];
 let aphroditeModels = [];
+let tabbyApiModels = [];
 export let openRouterModels = [];
 
 export async function loadOllamaModels(data) {
@@ -178,6 +189,28 @@ export async function loadAphroditeModels(data) {
     }
 }
 
+export async function loadTabbyApiModels(data) {
+    if (!Array.isArray(data)) {
+        console.error('Invalid Tabby API models data', data);
+        return;
+    }
+
+    tabbyApiModels = data;
+
+    if (!data.find(x => x.id === textgen_settings.tabby_api_model)) {
+        textgen_settings.tabby_api_model = data[0]?.id || '';
+    }
+
+    $('#tabby_api_model').empty();
+    for (const model of data) {
+        const option = document.createElement('option');
+        option.value = model.id;
+        option.text = model.id;
+        option.selected = model.id === textgen_settings.aphrodite_model;
+        $('#tabby_api_model').append(option);
+    }
+}
+
 function onMancerModelSelect() {
     const modelId = String($('#mancer_model').val());
     textgen_settings.mancer_model = modelId;
@@ -230,6 +263,37 @@ function onAphroditeModelSelect() {
     $('#api_button_textgenerationwebui').trigger('click');
 }
 
+async function onTabbyApiModelSelect() {
+    const modelId = String($('#tabby_api_model').val());
+    textgen_settings.tabby_api_model = modelId;
+
+    try {
+        const url = String($('#tabby_api_url_text').val()) + 'v1/model/load';
+        fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-Token': token,
+                'x-admin-key': await findSecret(SECRET_KEYS.TABBY),
+            },
+            body: JSON.stringify({
+                name:  textgen_settings.tabby_api_model,
+            }),
+        }).then(
+            (value) => {
+                console.log(value); // Success!
+            },
+            (reason) => {
+                console.error('Could not load model: ' + reason); // Error!
+            },
+        );
+    } catch (err) {
+        console.error('Error setting model ', err);
+    }
+
+    $('#api_button_textgenerationwebui').trigger('click');
+}
+
 function getMancerModelTemplate(option) {
     const model = mancerModels.find(x => x.id === option?.element?.value);
 
@@ -324,6 +388,20 @@ function getAphroditeModelTemplate(option) {
     `));
 }
 
+function getTabbyApiModelTemplate(option) {
+    const model = tabbyApiModels.find(x => x.id === option?.element?.value);
+
+    if (!option.id || !model) {
+        return option.text;
+    }
+
+    return $((`
+        <div class="flex-container flexFlowColumn">
+            <div><strong>${DOMPurify.sanitize(model.id)}</strong></div>
+        </div>
+    `));
+}
+
 async function downloadOllamaModel() {
     try {
         const serverUrl = textgen_settings.server_urls[textgen_types.OLLAMA];
@@ -427,6 +505,7 @@ jQuery(function () {
     $('#openrouter_model').on('change', onOpenRouterModelSelect);
     $('#ollama_download_model').on('click', downloadOllamaModel);
     $('#aphrodite_model').on('change', onAphroditeModelSelect);
+    $('#tabby_api_model').on('change', onTabbyApiModelSelect);
 
     if (!isMobile()) {
         $('#mancer_model').select2({
@@ -477,5 +556,12 @@ jQuery(function () {
             width: '100%',
             templateResult: getAphroditeModelTemplate,
         });
+        $('#tabby_api_model').select2({
+            placeholder: 'Select a model',
+            searchInputPlaceholder: 'Search models...',
+            searchInputCssClass: 'text_pole',
+            width: '100%',
+            templateResult: getTabbyApiModelTemplate,
+        });
     }
 });

public/scripts/textgen-settings.js

@@ -146,6 +146,7 @@ const settings = {
     ollama_model: '',
     openrouter_model: 'openrouter/auto',
     aphrodite_model: '',
+    tabby_api_model: '',
     dreamgen_model: 'opus-v1-xl/text',
     legacy_api: false,
     sampler_order: KOBOLDCPP_ORDER,
@@ -1113,4 +1114,3 @@ export function getTextGenGenerationData(finalPrompt, maxTokens, isImpersonate,
 
     return params;
 }
-