Merge pull request #2964 from DarokCx/release Featherless model search improvements.

ac7135c38631389aac6d8d11caa50c77e6e66640

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

Signed

Parents: b6a7929c4e556d349366d4cb1ca720b8b9a094b2 4bdaca5f8e22f337b7d39d7c4db5ab28eacd968f

public/index.html+31 -1 Viewed

                                 <div data-for="api_key_featherless" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                     For privacy reasons, your API key will be hidden after you reload the page.
                                 </div>
 -                                <select id="featherless_model">
 +                                <hr>
 +                                <h4 data-i18n="Featherless Model Selection">Featherless Model Selection</h4>
 +                                <div class="flex-container wide100p flexGap10">
 +                                    <div class="flex1 overflowHidden wide100p">
 +                                        <div class="flex-container marginBot10 alignitemscenter">
 +                                            <input id="featherless_model_search_bar" class="text_pole width100p flex1 margin0" type="search" data-i18n="[placeholder]Search..." placeholder="Search...">
 +                                            <select id="featherless_model_sort_order" class="margin0 text_pole">
 +                                                <option value="search" data-i18n="Search" hidden>A-Z</option>
 +                                                <option value="asc">A-Z</option>
 +                                                <option value="desc">Z-A</option>
 +                                                <option value="date_asc">Date Asc</option>
 +                                                <option value="date_desc">Date Desc</option>
 +                                            </select>
 +                                            <select id="featherless_category_selection" class="text_pole">
 +                                                <option value="" disabled selected data-i18n="category">category</option>
 +                                                <!-- <option value="Favorite" data-i18n="Top">Favorite</option> -->
 +                                                <option value="Top" data-i18n="Top">Top</option>
 +                                                <option value="New" data-i18n="New">New</option>
 +                                                <option value="All" data-i18n="All">All</option>
 +                                            </select>
 +                                            <select id="featherless_class_selection" class="text_pole">
 +                                                <option value="" selected data-i18n="class">All Classes</option>
 +                                            </select>
 +                                            <div id="featherless_model_pagination_container" class="flex1"></div>
 +                                            <i id="featherless_model_grid_toggle" class="fa-solid fa-table-cells-large menu_button" data-i18n="[title]Toggle grid view" title="Toggle grid view"></i>
 +                                        </div>
 +                                        <div id="featherless_model_card_block" data-i18n="[no_desc_text]No model description" no_desc_text="[No description]"></div>
 +                                    </div>
 +                                </div>
 +                                <!-- Do not remove. Needed for the /model command to function -->
 +                                <select id="featherless_model" class="displayNone">
                                     <option value="" data-i18n="-- Connect to the API --">
                                         -- Connect to the API --
                                     </option>

public/scripts/textgen-models.js+234 -27 Viewed

 import { tokenizers } from './tokenizers.js';
 import { renderTemplateAsync } from './templates.js';
 import { POPUP_TYPE, callGenericPopup } from './popup.js';
 +import { PAGINATION_TEMPLATE } from './utils.js';
 let mancerModels = [];
 let togetherModels = [];

+    }
+}
 +let featherlessCurrentPage = 1;
 export async function loadFeatherlessModels(data) {
 +    const searchBar = document.getElementById('featherless_model_search_bar');
 +    const modelCardBlock = document.getElementById('featherless_model_card_block');
 +    const paginationContainer = $('#featherless_model_pagination_container');
 +    const sortOrderSelect = document.getElementById('featherless_model_sort_order');
 +    const classSelect = document.getElementById('featherless_class_selection');
 +    const categoriesSelect = document.getElementById('featherless_category_selection');
 +    const storageKey = 'FeatherlessModels_PerPage';
++
 +    // Store the original models data for search and filtering
 +    let originalModels = [];
++
     if (!Array.isArray(data)) {
         console.error('Invalid Featherless models data', data);
         return;
+    }
 +    // Sort the data by model id (default A-Z)
     data.sort((a, b) => a.id.localeCompare(b.id));
 +    originalModels = data;  // Store the original data for search
     featherlessModels = data;
 -    if (!data.find(x => x.id === textgen_settings.featherless_model)) {
 +    // Populate class select options with unique classes
 -        textgen_settings.featherless_model = data[0]?.id || '';
 +    populateClassSelection(data);
++
 +    // Retrieve the stored number of items per page or default to 5
 +    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;
 +    featherlessCurrentPage = selectedModelPage > 0 ? selectedModelPage : 1;
 +    setupPagination(originalModels, perPage);
++
 +    // Function to set up pagination (also used for filtered results)
 +    function setupPagination(models, perPage, pageNumber = featherlessCurrentPage) {
 +        paginationContainer.pagination({
 +            dataSource: models,
 +            pageSize: perPage,
 +            pageNumber: pageNumber,
 +            sizeChangerOptions: [6, 10, 26, 50, 100, 250, 500, 1000],
 +            pageRange: 1,
 +            showPageNumbers: true,
 +            showSizeChanger: false,
 +            prevText: '<',
 +            nextText: '>',
 +            formatNavigator: function (currentPage, totalPage) {
 +                return (currentPage - 1) * perPage + 1 + ' - ' + currentPage * perPage + ' of ' + totalPage * perPage;
 +            },
 +            showNavigator: true,
 +            callback: function (modelsOnPage, pagination) {
 +                modelCardBlock.innerHTML = '';
++
 +                modelsOnPage.forEach(model => {
 +                    const card = document.createElement('div');
 +                    card.classList.add('model-card');
++
 +                    const modelNameContainer = document.createElement('div');
 +                    modelNameContainer.classList.add('model-name-container');
++
 +                    const modelTitle = document.createElement('div');
 +                    modelTitle.classList.add('model-title');
 +                    modelTitle.textContent = model.id.replace(/_/g, '_\u200B');
 +                    modelNameContainer.appendChild(modelTitle);
++
 +                    const detailsContainer = document.createElement('div');
 +                    detailsContainer.classList.add('details-container');
++
 +                    const modelClassDiv = document.createElement('div');
 +                    modelClassDiv.classList.add('model-class');
 +                    modelClassDiv.textContent = `Class: ${model.model_class || 'N/A'}`;
++
 +                    const contextLengthDiv = document.createElement('div');
 +                    contextLengthDiv.classList.add('model-context-length');
 +                    contextLengthDiv.textContent = `Context Length: ${model.context_length}`;
++
 +                    const dateAddedDiv = document.createElement('div');
 +                    dateAddedDiv.classList.add('model-date-added');
 +                    dateAddedDiv.textContent = `Added On: ${new Date(model.updated_at).toLocaleDateString()}`;
++
 +                    detailsContainer.appendChild(modelClassDiv);
 +                    detailsContainer.appendChild(contextLengthDiv);
 +                    detailsContainer.appendChild(dateAddedDiv);
++
 +                    card.appendChild(modelNameContainer);
 +                    card.appendChild(detailsContainer);
++
 +                    modelCardBlock.appendChild(card);
++
 +                    if (model.id === textgen_settings.featherless_model) {
 +                        card.classList.add('selected');
 +                    }
++
 +                    card.addEventListener('click', function () {
 +                        document.querySelectorAll('.model-card').forEach(c => c.classList.remove('selected'));
 +                        card.classList.add('selected');
 +                        onFeatherlessModelSelect(model.id);
 +                    });
 +                });
++
 +                // Update the current page value whenever the page changes
 +                featherlessCurrentPage = pagination.pageNumber;
 +            },
 +            afterSizeSelectorChange: function (e) {
 +                const newPerPage = e.target.value;
 +                localStorage.setItem('Models_PerPage', newPerPage);
 +                setupPagination(models, Number(newPerPage), featherlessCurrentPage); // Use the stored current page number
 +            },
 +        });
+    }
 +    // Unset previously added listeners
 +    $(searchBar).off('input');
 +    $(sortOrderSelect).off('change');
 +    $(classSelect).off('change');
 +    $(categoriesSelect).off('change');
++
 +    // Add event listener for input on the search bar
 +    searchBar.addEventListener('input', function () {
 +        applyFiltersAndSort();
 +    });
++
 +    // Add event listener for the sort order select
 +    sortOrderSelect.addEventListener('change', function () {
 +        applyFiltersAndSort();
 +    });
++
 +    // Add event listener for the class select
 +    classSelect.addEventListener('change', function () {
 +        applyFiltersAndSort();
 +    });
++
 +    categoriesSelect.addEventListener('change', function () {
 +        applyFiltersAndSort();
 +    });
++
 +    // Function to populate class selection dropdown
 +    function populateClassSelection(models) {
 +        const uniqueClasses = [...new Set(models.map(model => model.model_class).filter(Boolean))];  // Get unique class names
 +        uniqueClasses.sort((a, b) => a.localeCompare(b));
 +        uniqueClasses.forEach(className => {
 +            const option = document.createElement('option');
 +            option.value = className;
 +            option.textContent = className;
 +            classSelect.appendChild(option);
 +        });
 +    }
++
 +    // 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;
 +        const selectedCategory = categoriesSelect.value;
 +        let featherlessTop = [];
 +        let featherlessNew = [];
++
 +        if (selectedCategory === 'Top') {
 +            featherlessTop = await fetchFeatherlessStats();
 +        }
 +        const featherlessIds = featherlessTop.map(stat => stat.id);
 +        if (selectedCategory === 'New') {
 +            featherlessNew = await fetchFeatherlessNew();
 +        }
 +        const featherlessNewIds = featherlessNew.map(stat => stat.id);
++
 +        let filteredModels = originalModels.filter(model => {
 +            const matchesSearch = model.id.toLowerCase().includes(searchQuery);
 +            const matchesClass = selectedClass ? model.model_class === selectedClass : true;
 +            const matchesTop = featherlessIds.includes(model.id);
 +            const matchesNew = featherlessNewIds.includes(model.id);
++
 +            if (selectedCategory === 'All') {
 +                return matchesSearch && matchesClass;
 +            }
 +            else if (selectedCategory === 'Top') {
 +                return matchesSearch && matchesClass && matchesTop;
 +            }
 +            else if (selectedCategory === 'New') {
 +                return matchesSearch && matchesClass && matchesNew;
 +            }
 +            else {
 +                return matchesSearch;
 +            }
 +        });
++
 +        if (selectedSortOrder === 'asc') {
 +            filteredModels.sort((a, b) => a.id.localeCompare(b.id));
 +        } else if (selectedSortOrder === 'desc') {
 +            filteredModels.sort((a, b) => b.id.localeCompare(a.id));
 +        } else if (selectedSortOrder === 'date_asc') {
 +            filteredModels.sort((a, b) => a.updated_at.localeCompare(b.updated_at));
 +        } else if (selectedSortOrder === 'date_desc') {
 +            filteredModels.sort((a, b) => b.updated_at.localeCompare(a.updated_at));
 +        }
++
 +        setupPagination(filteredModels, Number(localStorage.getItem(storageKey)) || perPage, featherlessCurrentPage);
 +    }
++
 +    // Required to keep the /model command function
     $('#featherless_model').empty();
     for (const model of data) {
         const option = document.createElement('option');

+    }
+}
 async function onFeatherlessModelSelectfetchFeatherlessStats() {
 -    const modelId = String($('#featherless_model').val());
 +    const response = await fetch('https://api.featherless.ai/feather/popular');
 +    const data = await response.json();
 +    return data.popular;
 +}
++
 +async function fetchFeatherlessNew() {
 +    const response = await fetch('https://api.featherless.ai/feather/models?sort=-created_at&perPage=10');
 +    const data = await response.json();
 +    return data.items;
 +}
++
 +function onFeatherlessModelSelect(modelId) {
 +    const model = featherlessModels.find(x => x.id === modelId);
     textgen_settings.featherless_model = modelId;
 +    $('#featherless_model').val(modelId);
     $('#api_button_textgenerationwebui').trigger('click');
 -    const model = featherlessModels.find(x => x.id === modelId);
     setGenerationParamsFromPreset({ max_length: model.context_length });
+}
 +let featherlessIsGridView = false;  // Default state set to grid view
++
 +// Ensure the correct initial view is applied when the page loads
 +document.addEventListener('DOMContentLoaded', function () {
 +    const modelCardBlock = document.getElementById('featherless_model_card_block');
 +    modelCardBlock.classList.add('list-view');
++
 +    const toggleButton = document.getElementById('featherless_model_grid_toggle');
 +    toggleButton.addEventListener('click', function () {
 +        // Toggle between grid and list view
 +        if (featherlessIsGridView) {
 +            modelCardBlock.classList.remove('grid-view');
 +            modelCardBlock.classList.add('list-view');
 +            this.title = 'Toggle to grid view';
 +        } else {
 +            modelCardBlock.classList.remove('list-view');
 +            modelCardBlock.classList.add('grid-view');
 +            this.title = 'Toggle to list view';
 +        }
 +        featherlessIsGridView = !featherlessIsGridView;
 +    });
 +});
 function onMancerModelSelect() {
     const modelId = String($('#mancer_model').val());
     textgen_settings.mancer_model = modelId;

     `));
+}
 -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);
 +    $('#featherless_model').on('change', () => onFeatherlessModelSelect(String($('#featherless_model').val())));
     const providersSelect = $('.openrouter_providers');
     for (const provider of OPENROUTER_PROVIDERS) {

             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 = [];

public/style.css+126 -0 Viewed

 #InstructSequencesColumn details:not(:last-of-type) {
     margin-bottom: 5px;
+}
++
 +#user_avatar_block {
 +    display: flex;
 +    flex-wrap: wrap;
 +    gap: 10px;
 +}
++
 +/* Main structure for the model cards */
 +.model-card {
 +    display: flex;
 +    justify-content: space-between;
 +    align-items: center;
 +    padding: 5px;
 +    border: 1px solid #333;
 +    border-radius: 8px;
 +    background-color: #222;
 +    color: #fff;
 +    margin: 7px;
 +    width: calc(100% - 7px);
 +    box-sizing: border-box;
 +    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out;
 +}
++
 +.model-card .details-container {
 +    text-align: right;
 +}
++
 +.model-card:hover {
 +    transform: scale(1.01);
 +    background-color: #444;
 +    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;  /* Smooth transition */
 +}
++
 +.model-card.selected {
 +    border: 2px solid var(--okGreen70a);
 +    background-color: var(--okGreen70a);
 +}
++
 +.model-info {
 +    flex: 1;
 +    white-space: nowrap;
 +    overflow: hidden;
 +    text-overflow: ellipsis;
 +}
++
 +.model-title {
 +    font-size: 13px;
 +    font-weight: bold;
 +    overflow: hidden;
 +}
++
 +.model-details {
 +    display: flex;
 +    flex-direction: column;
 +    align-items: flex-end;
 +    text-align: right;
 +    min-width: 120px;
 +}
++
 +.model-class, .model-context-length, .model-date-added {
 +    font-size: 10px;
 +}
++
 +.model-class, .model-context-length {
 +    margin-bottom: 5px;
 +}
++
 +#featherless_model_pagination_container .paginationjs-nav {
 +    min-width: max-content;
 +}
++
 +#featherless_model_card_block.grid-view {
 +    grid-template-columns: repeat(2, 1fr);
 +    display: flex;
 +    flex-wrap: wrap;
 +    /* gap: 3px; */
 +    justify-content: flex-start;
 +}
++
 +/* Grid-view card */
 +#featherless_model_card_block.grid-view .model-card {
 +    flex-direction: column;
 +    flex: 1 1 calc(50% - 30px);
 +}
++
 +#featherless_model_search_bar {
 +    width: 15ch;
 +    flex-grow: 0;
 +    align-self: center;
 +}
++
 +#featherless_model_sort_order {
 +    width: auto;
 +    flex-shrink: 0;
 +    align-self: center;
 +}
++
 +#featherless_model_grid_toggle {
 +    flex-shrink: 0;
 +    width: auto;
 +    cursor: pointer;
 +}
++
 +#featherless_category_selection,
 +#featherless_class_selection {
 +    display: flex;
 +    width: auto;
 +    align-self: center;
 +}
++
 +@media (max-width: 768px) {
 +    .model-card {
 +        flex-direction: column;
 +        align-items: stretch;
 +    }
++
 +    .model-info, .model-details, .model-date-added {
 +        width: 100%;
 +        text-align: left;
 +    }
++
 +    #featherless_model_search_bar {
 +        width: 100%;
 +    }
++
 +}