rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

BugFix and UI improvements

This commit is contained in:
DarokCx 2024-10-09 13:56:31 -04:00
parent 9b3552631a
commit 64ff555425
3 changed files with 36 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@ -2293,11 +2293,11 @@
</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">

51
public/scripts/textgen-models.js
View File

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

19
public/style.css
View File

@ -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;
}
}