Initialize page on load

151a77cd366844b1ea36ba30d94079cf038e6c4c

Cohee <18619528+Cohee1207@users.noreply.github.com>

public/scripts/textgen-models.js+28 -37 Viewed

@@ -266,8 +266,8 @@ export async function loadAphroditeModels(data) {
266	}	266	}
267	}	267	}
268		268
269	let selectedModelId = null;	269	// Page -1 will be initialized from a selected model.
270	let currentPage = 1;	270	let currentPage = -1;
271	export async function loadFeatherlessModels(data) {	271	export async function loadFeatherlessModels(data) {
272	const searchBar = document.getElementById('model_search_bar');	272	const searchBar = document.getElementById('model_search_bar');
273	const modelCardBlock = document.getElementById('model_card_block');	273	const modelCardBlock = document.getElementById('model_card_block');

     const perPage = Number(localStorage.getItem(storageKey)) || 10;
     // Initialize pagination with the full set of models
+    const selectedModelPage = (data.findIndex(x => x.id === textgen_settings.featherless_model) / perPage) + 1;
+    currentPage = currentPage === -1 && selectedModelPage > 0 ? selectedModelPage : 1;
     setupPagination(originalModels, perPage);
     // Function to set up pagination (also used for filtered results)

                     modelCardBlock.appendChild(card);
-                    if (model.id === selectedModelId) {
+                    if (model.id === textgen_settings.featherless_model) {
                         card.classList.add('selected');
+                    }
-                    card.addEventListener('click', function() {
+                    card.addEventListener('click', function () {
                         document.querySelectorAll('.model-card').forEach(c => c.classList.remove('selected'));
                         card.classList.add('selected');
                         onFeatherlessModelSelect(model.id);

         });
+    }
     // Add event listener for input on the search bar
-    searchBar.addEventListener('input', function() {
+    searchBar.addEventListener('input', function () {
         applyFiltersAndSort();
     });
     // Add event listener for the sort order select
-    sortOrderSelect.addEventListener('change', function() {
+    sortOrderSelect.addEventListener('change', function () {
         applyFiltersAndSort();
     });
     // Add event listener for the class select
-    classSelect.addEventListener('change', function() {
+    classSelect.addEventListener('change', function () {
         applyFiltersAndSort();
     });
-    categoriesSelect.addEventListener('change', function() {
+    categoriesSelect.addEventListener('change', function () {
         applyFiltersAndSort();
     });

     // Function to apply sorting and filtering based on user input
     async function applyFiltersAndSort() {
+        if (!(searchBar instanceof HTMLInputElement) ||
+            !(sortOrderSelect instanceof HTMLSelectElement) ||
+            !(classSelect instanceof HTMLSelectElement) ||
+            !(categoriesSelect instanceof HTMLSelectElement)) {
+            return;
+        }
         const searchQuery = searchBar.value.toLowerCase();
         const selectedSortOrder = sortOrderSelect.value;
         const selectedClass = classSelect.value;

         setupPagination(filteredModels, Number(localStorage.getItem(storageKey)) || perPage, currentPage);
+    }
+    // Required to keep the /model command function
+    $('#featherless_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.featherless_model;
+        $('#featherless_model').append(option);
+    }
+}
 async function fetchFeatherlessStats() {

@@ -476,10 +490,9 @@ async function fetchFeatherlessNew() {
476	}	490	}
477		491
478	function onFeatherlessModelSelect(modelId) {	492	function onFeatherlessModelSelect(modelId) {
479
480	const model = featherlessModels.find(x => x.id === modelId);	493	const model = featherlessModels.find(x => x.id === modelId);
481	selectedModelId = modelId;
482	textgen_settings.featherless_model = modelId;	494	textgen_settings.featherless_model = modelId;
		495	$('#featherless_model').val(modelId);
483	$('#api_button_textgenerationwebui').trigger('click');	496	$('#api_button_textgenerationwebui').trigger('click');
484	setGenerationParamsFromPreset({ max_length: model.context_length });	497	setGenerationParamsFromPreset({ max_length: model.context_length });
485	}	498	}

 let isGridView = false;  // Default state set to grid view
 // Ensure the correct initial view is applied when the page loads
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
     const modelCardBlock = document.getElementById('model_card_block');
     modelCardBlock.classList.add('list-view');
     const toggleButton = document.getElementById('model_grid_toggle');
-    toggleButton.addEventListener('click', function() {
+    toggleButton.addEventListener('click', function () {
         // Toggle between grid and list view
         if (isGridView) {
             modelCardBlock.classList.remove('grid-view');

     `));
+}
-function getFeatherlessModelTemplate(option) {
-    const model = featherlessModels.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.name)}</strong> | <span>${model.context_length || '???'} tokens</span></div>
-        </div>
-    `));
-}
 async function downloadOllamaModel() {
     try {
         const serverUrl = textgen_settings.server_urls[textgen_types.OLLAMA];

     $('#ollama_download_model').on('click', downloadOllamaModel);
     $('#vllm_model').on('change', onVllmModelSelect);
     $('#aphrodite_model').on('change', onAphroditeModelSelect);
-    $('#featherless_model').on('change', onFeatherlessModelSelect);
     $('#tabby_download_model').on('click', downloadTabbyModel);
     $('#tabby_model').on('change', onTabbyModelSelect);

             width: '100%',
             templateResult: getAphroditeModelTemplate,
         });
-        $('#featherless_model').select2({
-            placeholder: 'Select a model',
-            searchInputPlaceholder: 'Search models...',
-            searchInputCssClass: 'text_pole',
-            width: '100%',
-            templateResult: getFeatherlessModelTemplate,
-        });
         providersSelect.select2({
             sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
             placeholder: 'Select providers. No selection = all providers.',

public/scripts/textgen-settings.js+1 -0 Viewed

     openrouter_allow_fallbacks: true,
     xtc_threshold: 0.1,
     xtc_probability: 0,
+    featherless_model: '',
 };
 export let textgenerationwebui_banned_in_macros = [];