From bebd0e438bfc9aa735b06e45a9d7218b2e268cfd Mon Sep 17 00:00:00 2001
From: DarokCx <77368869+DarokCx@users.noreply.github.com>
Date: Fri, 27 Sep 2024 13:16:27 -0400
Subject: [PATCH] new search bar for featherless

---
 public/index.html                |  28 ++++++
 public/scripts/textgen-models.js | 166 ++++++++++++++++++++++++++++---
 public/style.css                 | 109 ++++++++++++++++++++
 3 files changed, 288 insertions(+), 15 deletions(-)

diff --git a/public/index.html b/public/index.html
index 79bff508c..09302f827 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2263,6 +2263,34 @@
                                 <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>
+                                <hr>
+                                <h4 data-i18n="Featherless Model">Featherless Model Selection</h4>
+                                <div id="Model-management-block" class="flex-container wide100p flexGap10">
+                                    <div class="flex1 overflowHidden wide100p">
+                                        <div class="flex-container marginBot10 alignitemscenter">
+                                            <input id="model_search_bar" class="text_pole width100p flex1 margin0" type="search" data-i18n="[placeholder]Search..." placeholder="Search...">
+                                            <select id="model_sort_order" class="margin0">
+                                                <option value="search" data-i18n="Search" hidden>A-Z</option>
+                                                <option value="asc">A-Z</option>
+                                                <option value="desc">Z-A</option>
+                                            </select>
+                                            <select id="featherless_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>
+                                                <option value="New" data-i18n="New">New</option>
+                                                <option value="All" data-i18n="All">All</option>
+                                            </select>
+                                            <select id="class_selection">
+                                                <option value="" selected data-i18n="class">All Classes</option>
+                                            </select>
+                                            <div id="model_pagination_container" class="flex1"></div>
+                                            <i id="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="model_card_block" data-i18n="[no_desc_text]No model description" no_desc_text="[No description]"></div>
+
+                                    </div>
+                                </div>
                                 <select id="featherless_model">
                                     <option value="" data-i18n="-- Connect to the API --">
                                         -- Connect to the API --
diff --git a/public/scripts/textgen-models.js b/public/scripts/textgen-models.js
index a72ec07cb..e3c9ec2a3 100644
--- a/public/scripts/textgen-models.js
+++ b/public/scripts/textgen-models.js
@@ -266,37 +266,173 @@ export async function loadAphroditeModels(data) {
 }
 
 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 storageKey = 'Models_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));
-    featherlessModels = data;
+    originalModels = data;  // Store the original data for search
 
-    if (!data.find(x => x.id === textgen_settings.featherless_model)) {
-        textgen_settings.featherless_model = data[0]?.id || '';
+    // Populate class select options with unique classes
+    populateClassSelection(data);
+
+    // Retrieve the stored number of items per page or default to 5
+    const perPage = Number(localStorage.getItem(storageKey)) || 5;
+
+    // Initialize pagination with the full set of models
+    setupPagination(originalModels, perPage);
+
+    // Function to set up pagination (also used for filtered results)
+    function setupPagination(models, perPage) {
+        paginationContainer.pagination({
+            dataSource: models,
+            pageSize: perPage,
+            sizeChangerOptions: [5, 10, 25, 50, 100, 250, 500, 1000],
+            pageRange: 1,
+            pageNumber: 1,
+            showPageNumbers: true,
+            showSizeChanger: true,
+            prevText: '<',
+            nextText: '>',
+            formatNavigator: function (currentPage, totalPage) {
+                return 'Page ' + currentPage + ' of ' + totalPage;
+            },
+            showNavigator: true,
+            callback: function (modelsOnPage) {
+                // Clear the model card block before adding new cards
+                modelCardBlock.innerHTML = '';
+
+                // Loop through the models for the current page and create cards
+                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;
+                    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}`;
+
+                    detailsContainer.appendChild(modelClassDiv);
+                    detailsContainer.appendChild(contextLengthDiv);
+
+                    card.appendChild(modelNameContainer);
+                    card.appendChild(detailsContainer);
+
+                    // Append the card to the container
+                    modelCardBlock.appendChild(card);
+
+                    // Check if this card is the currently selected model
+                    if (model.id === selectedModelId) {
+                        card.classList.add('selected');  // Keep the selected class if it's the same model
+                    }
+
+                    // Add click event listener to the card
+                    card.addEventListener('click', function() {
+                        // Remove the selected class from all other cards
+                        document.querySelectorAll('.model-card').forEach(c => c.classList.remove('selected'));
+
+                        // Add the selected class to the clicked card
+                        card.classList.add('selected');
+
+                        // Call the onFeatherlessModelSelect function with the selected model ID
+                        onFeatherlessModelSelect(model.id);
+                    });
+                });
+            },
+            afterSizeSelectorChange: function (e) {
+                const newPerPage = e.target.value;
+                localStorage.setItem('Models_PerPage', newPerPage);  // Save the new value in localStorage
+                setupPagination(models, Number(newPerPage));   // Reinitialize pagination with the new per page value
+            },
+        });
     }
 
-    $('#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);
+    // 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();
+    });
+
+    // 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.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
+    function applyFiltersAndSort() {
+        const searchQuery = searchBar.value.toLowerCase();
+        const selectedSortOrder = sortOrderSelect.value;
+        const selectedClass = classSelect.value;
+
+        // 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;
+            return matchesSearch && matchesClass;
+        });
+
+        // Sort the filtered models based on selected sort order (A-Z or Z-A)
+        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));
+        }
+
+        // Reinitialize pagination with the filtered and sorted models
+        setupPagination(filteredModels, Number(localStorage.getItem(storageKey)) || perPage);
     }
 }
 
-function onFeatherlessModelSelect() {
-    const modelId = String($('#featherless_model').val());
+let selectedModelId = null;
+function onFeatherlessModelSelect(modelId) {
+    // Find the selected model and set the settings
+    const model = featherlessModels.find(x => x.id === modelId);
     textgen_settings.featherless_model = modelId;
     $('#api_button_textgenerationwebui').trigger('click');
-    const model = featherlessModels.find(x => x.id === modelId);
     setGenerationParamsFromPreset({ max_length: model.context_length });
+    selectedModelId = modelId;  // Store the selected model ID
 }
-
-
 function onMancerModelSelect() {
     const modelId = String($('#mancer_model').val());
     textgen_settings.mancer_model = modelId;
diff --git a/public/style.css b/public/style.css
index afbd231d0..087fb1df4 100644
--- a/public/style.css
+++ b/public/style.css
@@ -5478,3 +5478,112 @@ body:not(.movingUI) .drawer-content.maximized {
 #InstructSequencesColumn details:not(:last-of-type) {
     margin-bottom: 5px;
 }
+
+#user_avatar_block {
+    display: flex;
+    flex-wrap: wrap;  /* Ensures cards go to the next row if there's not enough space */
+    gap: 10px;  /* Adds space between cards */
+}
+
+/* Main structure for the model cards */
+.model-card {
+    display: flex;
+    justify-content: space-between;  /* Align the title and details across the card */
+    align-items: center;  /* Center align the items vertically */
+    padding: 15px;  /* Padding around the content */
+    border: 1px solid #333;  /* Border for the card */
+    border-radius: 8px;  /* Rounded corners for the card */
+    background-color: #222;  /* Card background color */
+    color: #fff;  /* Text color */
+    margin: 10px;  /* Space between cards */
+    width: calc(100% - 20px);  /* Full width minus margin */
+    box-sizing: border-box;  /* Include padding and border in the width */
+    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out;
+}
+
+.model-card:hover {
+    transform: scale(1.05);  /* Grow the card slightly on hover */
+    background-color: #444;  /* Highlight background on hover */
+    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;  /* Smooth transition */
+}
+
+/* Highlight the selected model card */
+.model-card.selected {
+    border: 2px solid #00f;  /* Add a blue border to indicate selection */
+    background-color: #333;  /* Slightly darker background for selected state */
+}
+
+/* Model title information */
+.model-info {
+    flex: 1;  /* Take up the remaining space */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;  /* Ellipsis for overflow text */
+}
+
+.model-title {
+    font-size: 16px;
+    font-weight: bold;  /* Bold text for the model title */
+}
+
+/* Model details section */
+.model-details {
+    display: flex;
+    flex-direction: column;  /* Stack class and context length vertically */
+    align-items: flex-end;  /* Align details to the end (right) */
+    text-align: right;  /* Right-aligned text for class and context length */
+    min-width: 120px;  /* Minimum width to prevent excessive squeezing */
+}
+
+.model-class, .model-context-length {
+    font-size: 14px;  /* Smaller font size for details */
+}
+
+.model-class {
+    margin-bottom: 5px;  /* Space between class and context length */
+}
+
+/* Grid-view layout for the card container */
+#model_card_block.grid-view {
+    display: flex;
+    flex-wrap: wrap;  /* Cards wrap onto new lines when necessary */
+    gap: 15px;  /* Space between grid items */
+    justify-content: flex-start;  /* Align cards to the left */
+}
+
+/* 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 */
+    margin-bottom: 10px;
+}
+
+/* Ensure the search bar takes most of the width */
+#model_search_bar {
+    flex-grow: 1;
+    min-width: 0;
+}
+
+/* Sort dropdown should be auto-sized based on its content */
+#model_sort_order {
+    width: auto;  /* Set the width of the dropdown to its content size */
+    flex-shrink: 0;  /* Prevent it from shrinking */
+}
+
+/* Grid toggle button */
+#model_grid_toggle {
+    flex-shrink: 0;
+    width: auto;  /* Keep default button size */
+    cursor: pointer;
+}
+
+#featherless_selection
+{
+    display: flex;
+    width: auto;
+}
+#class_selection
+{
+    display: flex;
+    width: auto;
+}