BugFixes and added top model categorie selection

409d83e6ea35e8957afecbe01e9797669df9be1f

DarokCx <77368869+DarokCx@users.noreply.github.com>

public/index.html+1 -1 Viewed

                                                 <option value="asc">A-Z</option>
                                                 <option value="desc">Z-A</option>
                                             </select>
                                             <select id="featherless_selectioncategory_selection">
                                                 <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>

public/scripts/textgen-models.js+29 -5 Viewed

+    }
+}
 +let selectedModelId = null;
 export async function loadFeatherlessModels(data) {
     const searchBar = document.getElementById('model_search_bar');
     const modelCardBlock = document.getElementById('model_card_block');
     const paginationContainer = $('#model_pagination_container');
     const sortOrderSelect = document.getElementById('model_sort_order');
     const classSelect = document.getElementById('class_selection');
 +    const categoriesSelect = document.getElementById('category_selection');
     const storageKey = 'Models_PerPage';
     // Store the original models data for search and filtering

     // 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;
     // Populate class select options with unique classes
     populateClassSelection(data);

                     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');

         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

+    }
     // Function to apply sorting and filtering based on user input
     async function applyFiltersAndSort() {
         const searchQuery = searchBar.value.toLowerCase();
         const selectedSortOrder = sortOrderSelect.value;
         const selectedClass = classSelect.value;
+-
 +        const selectedCategory = categoriesSelect.value;
 +        const featherlessTop = await fetchFeatherlessStats();
 +        const featherlessIds = featherlessTop.map(stat => stat.id);
         // Filter the models based on the search query and selected class
         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);
++
 +            if (selectedCategory === 'All') {
 +                return matchesSearch && matchesClass;
 +            }
 +            else if (selectedCategory === 'Top') {
 +                return matchesSearch && matchesClass && matchesTop;
 +            }
++
             return matchesSearch && matchesClass;
         });

+    }
+}
 -let selectedModelId = null;
 +async function fetchFeatherlessStats() {
 +    const response = await fetch('https://api.featherless.ai/feather/popular');
 +    const data = await response.json();
 +    return data.popular;
 +}
++
 function onFeatherlessModelSelect(modelId) {
     // Find the selected model and set the settings
     const model = featherlessModels.find(x => x.id === modelId);
 +    selectedModelId = modelId;
     textgen_settings.featherless_model = modelId;
     $('#api_button_textgenerationwebui').trigger('click');
     setGenerationParamsFromPreset({ max_length: model.context_length });
 -    selectedModelId = modelId;  // Store the selected model ID
 +    toastr.info(`Selected model: ${modelId}`, '', { timeOut: 2000 });
+}
 let isGridView = true;  // Default state set to grid view

public/style.css+5 -3 Viewed

 .model-title {
     font-size: 16px;
     font-weight: bold;  /* Bold text for the model title */
 +    overflow: hidden;
+}
 /* Model details section */

 /* Grid-view layout for the card container */
 #model_card_block.grid-view {
 +    grid-row: 1 / span 2;  /* Span two rows */
     display: flex;
     flex-wrap: wrap;  /* Cards wrap onto new lines when necessary */
     gap: 15px;  /* Space between grid items */

 /* Grid-view card */
 #model_card_block.grid-view .model-card {
     flex-direction: column; /* Stack title, class, and context length vertically for grid */
     flex: 1 1 calc(33.3350% - 30px); /* 3 cards per row with spacing */
     margin-bottom: 10px;
+}
 /* Ensure the search bar takes most of the width */
 #model_search_bar {
     flex-grow: 1;
     min-width: 010ch;
+}
 /* Sort dropdown should be auto-sized based on its content */

@@ -5577,7 +5579,7 @@ body:not(.movingUI) .drawer-content.maximized {
5577	5579	cursor: pointer;
5578	5580	}
5579	5581
5580	5582	#featherless_selectioncategory_selection
5581	5583	{
5582	5584	display: flex;
5583	5585	width: auto;