BugFix and UI improvements

64ff555425c074ef992da74f6291f71ee69cb8b5

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

Parents: 9b3552631a045342390d9435346b8ce0a3a8ee83
3 files changed, +36 -38Ignore whitespace
public/index.html+2 -2
@@ -2293,11 +2293,11 @@
22932293
22942294 </div>
22952295 </div>
22962296 <!-- <select id="featherless_model" hidden>
22972297 <option value="" data-i18n="-- Connect to the API --">
22982298 -- Connect to the API --
22992299 </option>
23002300 </select> -->
23012301 </div>
23022302 <div data-tg-type="vllm">
23032303 <div class="flex-container flexFlowColumn">
public/scripts/textgen-models.js+26 -25
@@ -267,6 +267,7 @@ export async function loadAphroditeModels(data) {
267267}
268268
269269let selectedModelId = null;
270+let currentPage = 1;
270271export async function loadFeatherlessModels(data) {
271272 const searchBar = document.getElementById('model_search_bar');
272273 const modelCardBlock = document.getElementById('model_card_block');
@@ -293,32 +294,30 @@ export async function loadFeatherlessModels(data) {
293294 populateClassSelection(data);
294295
295296 // Retrieve the stored number of items per page or default to 5
296297 const perPage = Number(localStorage.getItem(storageKey)) || 610;
297298
298299 // Initialize pagination with the full set of models
299300 setupPagination(originalModels, perPage);
300301
301302 // Function to set up pagination (also used for filtered results)
302303 function setupPagination(models, perPage, pageNumber = currentPage) {
303304 paginationContainer.pagination({
304305 dataSource: models,
305306 pageSize: perPage,
307+ pageNumber: pageNumber,
306308 sizeChangerOptions: [6, 10, 26, 50, 100, 250, 500, 1000],
307309 pageRange: 1,
308- pageNumber: 1,
309310 showPageNumbers: true,
310311 showSizeChanger: false,
311312 prevText: '<',
312313 nextText: '>',
313314 formatNavigator: function (currentPage, totalPage) {
314315 return (currentPage - 1) * perPage + 1 + ' - ' + currentPage * perPage + ' of ' + totalPage * perPage;
315316 },
316317 showNavigator: true,
317318 callback: function (modelsOnPage, pagination) {
318- // Clear the model card block before adding new cards
319319 modelCardBlock.innerHTML = '';
320320
321- // Loop through the models for the current page and create cards
322321 modelsOnPage.forEach(model => {
323322 const card = document.createElement('div');
324323 card.classList.add('model-card');
@@ -342,41 +341,43 @@ export async function loadFeatherlessModels(data) {
342341 contextLengthDiv.classList.add('model-context-length');
343342 contextLengthDiv.textContent = `Context Length: ${model.context_length}`;
344343
344+ const dateAddedDiv = document.createElement('div');
345+ dateAddedDiv.classList.add('model-date-added');
346+ dateAddedDiv.textContent = `Added On: ${new Date(model.updated_at).toLocaleDateString()}`;
347+
345348 detailsContainer.appendChild(modelClassDiv);
346349 detailsContainer.appendChild(contextLengthDiv);
350+ detailsContainer.appendChild(dateAddedDiv);
347351
348352 card.appendChild(modelNameContainer);
349353 card.appendChild(detailsContainer);
350354
351- // Append the card to the container
352355 modelCardBlock.appendChild(card);
353356
354- // Check if this card is the currently selected model
355357 if (model.id === selectedModelId) {
356358 card.classList.add('selected'); // Keep the selected class if it's the same model
357359 }
358360
359- // Add click event listener to the card
360361 card.addEventListener('click', function() {
361- // Remove the selected class from all other cards
362362 document.querySelectorAll('.model-card').forEach(c => c.classList.remove('selected'));
363-
364- // Add the selected class to the clicked card
365363 card.classList.add('selected');
366-
367- // Call the onFeatherlessModelSelect function with the selected model ID
368364 onFeatherlessModelSelect(model.id);
369365 });
370366 });
367+
368+ // Update the current page value whenever the page changes
369+ currentPage = pagination.pageNumber;
371370 },
372371 afterSizeSelectorChange: function (e) {
373372 const newPerPage = e.target.value;
374373 localStorage.setItem('Models_PerPage', newPerPage); // Save the new value in localStorage
375374 setupPagination(models, Number(newPerPage), currentPage); // Reinitialize pagination withUse the newstored percurrent page valuenumber
376375 },
377376 });
378377 }
379378
379+
380+
380381 // Add event listener for input on the search bar
381382 searchBar.addEventListener('input', function() {
382383 applyFiltersAndSort();
@@ -399,6 +400,7 @@ export async function loadFeatherlessModels(data) {
399400 // Function to populate class selection dropdown
400401 function populateClassSelection(models) {
401402 const uniqueClasses = [...new Set(models.map(model => model.model_class).filter(Boolean))]; // Get unique class names
403+ uniqueClasses.sort((a, b) => a.localeCompare(b));
402404 uniqueClasses.forEach(className => {
403405 const option = document.createElement('option');
404406 option.value = className;
@@ -420,7 +422,7 @@ export async function loadFeatherlessModels(data) {
420422 featherlessTop = await fetchFeatherlessStats();
421423 }
422424 const featherlessIds = featherlessTop.map(stat => stat.id);
423425 if (selectedCategory === 'New') {
424426 featherlessNew = await fetchFeatherlessNew();
425427 }
426428 const featherlessNewIds = featherlessNew.map(stat => stat.id);
@@ -445,7 +447,6 @@ export async function loadFeatherlessModels(data) {
445447 }
446448 });
447449
448- // Sort the filtered models based on selected sort order (A-Z or Z-A)
449450 if (selectedSortOrder === 'asc') {
450451 filteredModels.sort((a, b) => a.id.localeCompare(b.id));
451452 } else if (selectedSortOrder === 'desc') {
@@ -456,9 +457,10 @@ export async function loadFeatherlessModels(data) {
456457 filteredModels.sort((a, b) => b.updated_at.localeCompare(a.updated_at));
457458 }
458459
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);
461461 }
462+
463+
462464}
463465
464466async function fetchFeatherlessStats() {
@@ -480,15 +482,14 @@ function onFeatherlessModelSelect(modelId) {
480482 textgen_settings.featherless_model = modelId;
481483 $('#api_button_textgenerationwebui').trigger('click');
482484 setGenerationParamsFromPreset({ max_length: model.context_length });
483- toastr.info(`Selected model: ${modelId}`, '', { timeOut: 2000 });
484485}
485486
486487let isGridView = truefalse; // Default state set to grid view
487488
488489// Ensure the correct initial view is applied when the page loads
489490document.addEventListener('DOMContentLoaded', function() {
490491 const modelCardBlock = document.getElementById('model_card_block');
491492 modelCardBlock.classList.add('gridlist-view');
492493
493494 const toggleButton = document.getElementById('model_grid_toggle');
494495 toggleButton.addEventListener('click', function() {
public/style.css+8 -11
@@ -5490,7 +5490,7 @@ body:not(.movingUI) .drawer-content.maximized {
54905490 display: flex;
54915491 justify-content: space-between;
54925492 align-items: center;
54935493 padding: 15px5px;
54945494 border: 1px solid #333;
54955495 border-radius: 8px;
54965496 background-color: #222;
@@ -5502,7 +5502,7 @@ body:not(.movingUI) .drawer-content.maximized {
55025502}
55035503
55045504.model-card:hover {
55055505 transform: scale(1.0201);
55065506 background-color: #444;
55075507 transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Smooth transition */
55085508}
@@ -5520,7 +5520,7 @@ body:not(.movingUI) .drawer-content.maximized {
55205520}
55215521
55225522.model-title {
55235523 font-size: --mainFontSize13px;
55245524 font-weight: bold;
55255525 overflow: hidden;
55265526}
@@ -5533,11 +5533,11 @@ body:not(.movingUI) .drawer-content.maximized {
55335533 min-width: 120px;
55345534}
55355535
55365536.model-class, .model-context-length, .model-date-added {
55375537 font-size: calc(--mainFontSize - 3)10px;
55385538}
55395539
55405540.model-class, .model-context-length {
55415541 margin-bottom: 5px;
55425542}
55435543
@@ -5545,7 +5545,7 @@ body:not(.movingUI) .drawer-content.maximized {
55455545 grid-template-columns: repeat(2, 1fr);
55465546 display: flex;
55475547 flex-wrap: wrap;
55485548 /* gap: 5px3px; */
55495549 justify-content: flex-start;
55505550}
55515551
@@ -5586,7 +5586,7 @@ body:not(.movingUI) .drawer-content.maximized {
55865586 align-items: stretch;
55875587 }
55885588
55895589 .model-info, .model-details, .model-date-added {
55905590 width: 100%;
55915591 text-align: left;
55925592 }
@@ -5595,7 +5595,4 @@ body:not(.movingUI) .drawer-content.maximized {
55955595 width: 100%;
55965596 }
55975597
5598- #model_sort_order, #model_grid_toggle {
5599- margin-top: 10px;
5600- }
56015598}