From 64ff555425c074ef992da74f6291f71ee69cb8b5 Mon Sep 17 00:00:00 2001 From: DarokCx <77368869+DarokCx@users.noreply.github.com> Date: Wed, 9 Oct 2024 13:56:31 -0400 Subject: [PATCH] BugFix and UI improvements --- public/index.html | 4 +-- public/scripts/textgen-models.js | 51 ++++++++++++++++---------------- public/style.css | 19 +++++------- 3 files changed, 36 insertions(+), 38 deletions(-) diff --git a/public/index.html b/public/index.html index 1901806ae..7fea7f790 100644 --- a/public/index.html +++ b/public/index.html @@ -2293,11 +2293,11 @@ - +
diff --git a/public/scripts/textgen-models.js b/public/scripts/textgen-models.js index 918022884..57ae904f3 100644 --- a/public/scripts/textgen-models.js +++ b/public/scripts/textgen-models.js @@ -267,6 +267,7 @@ export async function loadAphroditeModels(data) { } let selectedModelId = null; +let currentPage = 1; export async function loadFeatherlessModels(data) { const searchBar = document.getElementById('model_search_bar'); const modelCardBlock = document.getElementById('model_card_block'); @@ -293,32 +294,30 @@ export async function loadFeatherlessModels(data) { populateClassSelection(data); // Retrieve the stored number of items per page or default to 5 - const perPage = Number(localStorage.getItem(storageKey)) || 6; + const perPage = Number(localStorage.getItem(storageKey)) || 10; // 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) { + function setupPagination(models, perPage, pageNumber = currentPage) { paginationContainer.pagination({ dataSource: models, pageSize: perPage, + pageNumber: pageNumber, sizeChangerOptions: [6, 10, 26, 50, 100, 250, 500, 1000], pageRange: 1, - pageNumber: 1, showPageNumbers: true, showSizeChanger: false, prevText: '<', nextText: '>', formatNavigator: function (currentPage, totalPage) { - return (currentPage - 1) * perPage + 1 + ' - ' + currentPage * perPage + ' of ' + totalPage * perPage; + return (currentPage - 1) * perPage + 1 + ' - ' + currentPage * perPage + ' of ' + totalPage * perPage; }, showNavigator: true, - callback: function (modelsOnPage) { - // Clear the model card block before adding new cards + callback: function (modelsOnPage, pagination) { 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'); @@ -342,41 +341,43 @@ export async function loadFeatherlessModels(data) { 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); - // 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 + card.classList.add('selected'); } - // 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); }); }); + + // Update the current page value whenever the page changes + currentPage = pagination.pageNumber; }, 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 + localStorage.setItem('Models_PerPage', newPerPage); + setupPagination(models, Number(newPerPage), currentPage); // Use the stored current page number }, }); } + + // Add event listener for input on the search bar searchBar.addEventListener('input', function() { applyFiltersAndSort(); @@ -399,6 +400,7 @@ export async function loadFeatherlessModels(data) { // 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; @@ -420,7 +422,7 @@ export async function loadFeatherlessModels(data) { featherlessTop = await fetchFeatherlessStats(); } const featherlessIds = featherlessTop.map(stat => stat.id); - if(selectedCategory === 'New') { + if (selectedCategory === 'New') { featherlessNew = await fetchFeatherlessNew(); } const featherlessNewIds = featherlessNew.map(stat => stat.id); @@ -445,7 +447,6 @@ export async function loadFeatherlessModels(data) { } }); - // 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') { @@ -456,9 +457,10 @@ export async function loadFeatherlessModels(data) { filteredModels.sort((a, b) => b.updated_at.localeCompare(a.updated_at)); } - // Reinitialize pagination with the filtered and sorted models - setupPagination(filteredModels, Number(localStorage.getItem(storageKey)) || perPage); + setupPagination(filteredModels, Number(localStorage.getItem(storageKey)) || perPage, currentPage); } + + } async function fetchFeatherlessStats() { @@ -480,15 +482,14 @@ function onFeatherlessModelSelect(modelId) { textgen_settings.featherless_model = modelId; $('#api_button_textgenerationwebui').trigger('click'); setGenerationParamsFromPreset({ max_length: model.context_length }); - toastr.info(`Selected model: ${modelId}`, '', { timeOut: 2000 }); } -let isGridView = true; // Default state set to grid view +let isGridView = 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('model_card_block'); - modelCardBlock.classList.add('grid-view'); + modelCardBlock.classList.add('list-view'); const toggleButton = document.getElementById('model_grid_toggle'); toggleButton.addEventListener('click', function() { diff --git a/public/style.css b/public/style.css index 20c047985..33fe431df 100644 --- a/public/style.css +++ b/public/style.css @@ -5490,7 +5490,7 @@ body:not(.movingUI) .drawer-content.maximized { display: flex; justify-content: space-between; align-items: center; - padding: 15px; + padding: 5px; border: 1px solid #333; border-radius: 8px; background-color: #222; @@ -5502,7 +5502,7 @@ body:not(.movingUI) .drawer-content.maximized { } .model-card:hover { - transform: scale(1.02); + transform: scale(1.01); background-color: #444; transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Smooth transition */ } @@ -5520,7 +5520,7 @@ body:not(.movingUI) .drawer-content.maximized { } .model-title { - font-size: --mainFontSize; + font-size: 13px; font-weight: bold; overflow: hidden; } @@ -5533,11 +5533,11 @@ body:not(.movingUI) .drawer-content.maximized { min-width: 120px; } -.model-class, .model-context-length { - font-size: calc(--mainFontSize - 3); +.model-class, .model-context-length, .model-date-added { + font-size: 10px; } -.model-class { +.model-class, .model-context-length { margin-bottom: 5px; } @@ -5545,7 +5545,7 @@ body:not(.movingUI) .drawer-content.maximized { grid-template-columns: repeat(2, 1fr); display: flex; flex-wrap: wrap; - gap: 5px; + /* gap: 3px; */ justify-content: flex-start; } @@ -5586,7 +5586,7 @@ body:not(.movingUI) .drawer-content.maximized { align-items: stretch; } - .model-info, .model-details { + .model-info, .model-details, .model-date-added { width: 100%; text-align: left; } @@ -5595,7 +5595,4 @@ body:not(.movingUI) .drawer-content.maximized { width: 100%; } - #model_sort_order, #model_grid_toggle { - margin-top: 10px; - } }