BugFix and UI improvements

64ff555425c074ef992da74f6291f71ee69cb8b5

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

Parents: 9b3552631a045342390d9435346b8ce0a3a8ee83

public/index.html+2 -2 Viewed

                                     </div>
                                 </div>
-                                <!-- <select id="featherless_model">
+                                 <select id="featherless_model" hidden>
                                     <option value="" data-i18n="-- Connect to the API --">
                                         -- Connect to the API --
                                     </option>
-                                </select> -->
+                                </select>
                             </div>
                             <div data-tg-type="vllm">
                                 <div class="flex-container flexFlowColumn">

public/scripts/textgen-models.js+26 -25 Viewed

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

     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) {
+            callback: function (modelsOnPage, pagination) {
-                // 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');

                     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
+                localStorage.setItem('Models_PerPage', newPerPage);
-                setupPagination(models, Number(newPerPage));   // Reinitialize pagination with the new per page value
+                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();

     // 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) {
420	featherlessTop = await fetchFeatherlessStats();	422	featherlessTop = await fetchFeatherlessStats();
421	}	423	}
422	const featherlessIds = featherlessTop.map(stat => stat.id);	424	const featherlessIds = featherlessTop.map(stat => stat.id);
423	if(selectedCategory === 'New') {	425	if (selectedCategory === 'New') {
424	featherlessNew = await fetchFeatherlessNew();	426	featherlessNew = await fetchFeatherlessNew();
425	}	427	}
426	const featherlessNewIds = featherlessNew.map(stat => stat.id);	428	const featherlessNewIds = featherlessNew.map(stat => stat.id);

+            }
         });
-        // 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) {
456	filteredModels.sort((a, b) => b.updated_at.localeCompare(a.updated_at));	457	filteredModels.sort((a, b) => b.updated_at.localeCompare(a.updated_at));
457	}	458	}
458		459
459	// Reinitialize pagination with the filtered and sorted models	460	setupPagination(filteredModels, Number(localStorage.getItem(storageKey)) \|\| perPage, currentPage);
460	setupPagination(filteredModels, Number(localStorage.getItem(storageKey)) \|\| perPage);
461	}	461	}
		462
		463
462	}	464	}
463		465
464	async function fetchFeatherlessStats() {	466	async function fetchFeatherlessStats() {

     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() {

public/style.css+8 -11 Viewed

     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 {
5502	}	5502	}
5503		5503
5504	.model-card:hover {	5504	.model-card:hover {
5505	transform: scale(1.02);	5505	transform: scale(1.01);
5506	background-color: #444;	5506	background-color: #444;
5507	transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Smooth transition */	5507	transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Smooth transition */
5508	}	5508	}

@@ -5520,7 +5520,7 @@ body:not(.movingUI) .drawer-content.maximized {
5520	}	5520	}
5521		5521
5522	.model-title {	5522	.model-title {
5523	font-size: --mainFontSize;	5523	font-size: 13px;
5524	font-weight: bold;	5524	font-weight: bold;
5525	overflow: hidden;	5525	overflow: hidden;
5526	}	5526	}

@@ -5533,11 +5533,11 @@ body:not(.movingUI) .drawer-content.maximized {
5533	min-width: 120px;	5533	min-width: 120px;
5534	}	5534	}
5535		5535
5536	.model-class, .model-context-length {	5536	.model-class, .model-context-length, .model-date-added {
5537	font-size: calc(--mainFontSize - 3);	5537	font-size: 10px;
5538	}	5538	}
5539		5539
5540	.model-class {	5540	.model-class, .model-context-length {
5541	margin-bottom: 5px;	5541	margin-bottom: 5px;
5542	}	5542	}
5543		5543

     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 {
5586	align-items: stretch;	5586	align-items: stretch;
5587	}	5587	}
5588		5588
5589	.model-info, .model-details {	5589	.model-info, .model-details, .model-date-added {
5590	width: 100%;	5590	width: 100%;
5591	text-align: left;	5591	text-align: left;
5592	}	5592	}

@@ -5595,7 +5595,4 @@ body:not(.movingUI) .drawer-content.maximized {
5595	width: 100%;	5595	width: 100%;
5596	}	5596	}
5597		5597
5598	#model_sort_order, #model_grid_toggle {
5599	margin-top: 10px;
5600	}
5601	}	5598	}