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_selection">
+                                            <select id="category_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;
+                    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
-    function applyFiltersAndSort() {
+    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.33% - 30px); /* 3 cards per row with spacing */
+    flex: 1 1 calc(50% - 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: 0;
+    min-width: 10ch;
+}
 /* Sort dropdown should be auto-sized based on its content */

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