rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-03-11 01:20:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

new search bar for featherless

Browse Source
This commit is contained in:
DarokCx 2024-09-27 13:16:27 -04:00
parent b01ae4e0ea
commit bebd0e438b
3 changed files with 288 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/index.html
View File

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

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

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

109
public/style.css
View File

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