mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-03-15 19:40:14 +01:00
Merge pull request #2964 from DarokCx/release
Featherless model search improvements.
This commit is contained in:
Cohee
GitHub
commit
ac7135c386
@ -2260,7 +2260,37 @@
|
||||
<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>
|
||||
<select id="featherless_model">
|
||||
<hr>
|
||||
<h4 data-i18n="Featherless Model Selection">Featherless Model Selection</h4>
|
||||
<div class="flex-container wide100p flexGap10">
|
||||
<div class="flex1 overflowHidden wide100p">
|
||||
<div class="flex-container marginBot10 alignitemscenter">
|
||||
<input id="featherless_model_search_bar" class="text_pole width100p flex1 margin0" type="search" data-i18n="[placeholder]Search..." placeholder="Search...">
|
||||
<select id="featherless_model_sort_order" class="margin0 text_pole">
|
||||
<option value="search" data-i18n="Search" hidden>A-Z</option>
|
||||
<option value="asc">A-Z</option>
|
||||
<option value="desc">Z-A</option>
|
||||
<option value="date_asc">Date Asc</option>
|
||||
<option value="date_desc">Date Desc</option>
|
||||
</select>
|
||||
<select id="featherless_category_selection" class="text_pole">
|
||||
<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="featherless_class_selection" class="text_pole">
|
||||
<option value="" selected data-i18n="class">All Classes</option>
|
||||
</select>
|
||||
<div id="featherless_model_pagination_container" class="flex1"></div>
|
||||
<i id="featherless_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="featherless_model_card_block" data-i18n="[no_desc_text]No model description" no_desc_text="[No description]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Do not remove. Needed for the /model command to function -->
|
||||
<select id="featherless_model" class="displayNone">
|
||||
<option value="" data-i18n="-- Connect to the API --">
|
||||
-- Connect to the API --
|
||||
</option>
|
||||
|
||||
@ -4,6 +4,7 @@ import { textgenerationwebui_settings as textgen_settings, textgen_types } from
|
||||
import { tokenizers } from './tokenizers.js';
|
||||
import { renderTemplateAsync } from './templates.js';
|
||||
import { POPUP_TYPE, callGenericPopup } from './popup.js';
|
||||
import { PAGINATION_TEMPLATE } from './utils.js';
|
||||
|
||||
let mancerModels = [];
|
||||
let togetherModels = [];
|
||||
@ -265,19 +266,212 @@ export async function loadAphroditeModels(data) {
|
||||
}
|
||||
}
|
||||
|
||||
let featherlessCurrentPage = 1;
|
||||
export async function loadFeatherlessModels(data) {
|
||||
const searchBar = document.getElementById('featherless_model_search_bar');
|
||||
const modelCardBlock = document.getElementById('featherless_model_card_block');
|
||||
const paginationContainer = $('#featherless_model_pagination_container');
|
||||
const sortOrderSelect = document.getElementById('featherless_model_sort_order');
|
||||
const classSelect = document.getElementById('featherless_class_selection');
|
||||
const categoriesSelect = document.getElementById('featherless_category_selection');
|
||||
const storageKey = 'FeatherlessModels_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));
|
||||
originalModels = data; // Store the original data for search
|
||||
featherlessModels = data;
|
||||
|
||||
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)) || 10;
|
||||
|
||||
// Initialize pagination with the full set of models
|
||||
const selectedModelPage = (data.findIndex(x => x.id === textgen_settings.featherless_model) / perPage) + 1;
|
||||
featherlessCurrentPage = selectedModelPage > 0 ? selectedModelPage : 1;
|
||||
setupPagination(originalModels, perPage);
|
||||
|
||||
// Function to set up pagination (also used for filtered results)
|
||||
function setupPagination(models, perPage, pageNumber = featherlessCurrentPage) {
|
||||
paginationContainer.pagination({
|
||||
dataSource: models,
|
||||
pageSize: perPage,
|
||||
pageNumber: pageNumber,
|
||||
sizeChangerOptions: [6, 10, 26, 50, 100, 250, 500, 1000],
|
||||
pageRange: 1,
|
||||
showPageNumbers: true,
|
||||
showSizeChanger: false,
|
||||
prevText: '<',
|
||||
nextText: '>',
|
||||
formatNavigator: function (currentPage, totalPage) {
|
||||
return (currentPage - 1) * perPage + 1 + ' - ' + currentPage * perPage + ' of ' + totalPage * perPage;
|
||||
},
|
||||
showNavigator: true,
|
||||
callback: function (modelsOnPage, pagination) {
|
||||
modelCardBlock.innerHTML = '';
|
||||
|
||||
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.replace(/_/g, '_\u200B');
|
||||
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}`;
|
||||
|
||||
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);
|
||||
|
||||
modelCardBlock.appendChild(card);
|
||||
|
||||
if (model.id === textgen_settings.featherless_model) {
|
||||
card.classList.add('selected');
|
||||
}
|
||||
|
||||
card.addEventListener('click', function () {
|
||||
document.querySelectorAll('.model-card').forEach(c => c.classList.remove('selected'));
|
||||
card.classList.add('selected');
|
||||
onFeatherlessModelSelect(model.id);
|
||||
});
|
||||
});
|
||||
|
||||
// Update the current page value whenever the page changes
|
||||
featherlessCurrentPage = pagination.pageNumber;
|
||||
},
|
||||
afterSizeSelectorChange: function (e) {
|
||||
const newPerPage = e.target.value;
|
||||
localStorage.setItem('Models_PerPage', newPerPage);
|
||||
setupPagination(models, Number(newPerPage), featherlessCurrentPage); // Use the stored current page number
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Unset previously added listeners
|
||||
$(searchBar).off('input');
|
||||
$(sortOrderSelect).off('change');
|
||||
$(classSelect).off('change');
|
||||
$(categoriesSelect).off('change');
|
||||
|
||||
// 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();
|
||||
});
|
||||
|
||||
categoriesSelect.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.sort((a, b) => a.localeCompare(b));
|
||||
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
|
||||
async function applyFiltersAndSort() {
|
||||
if (!(searchBar instanceof HTMLInputElement) ||
|
||||
!(sortOrderSelect instanceof HTMLSelectElement) ||
|
||||
!(classSelect instanceof HTMLSelectElement) ||
|
||||
!(categoriesSelect instanceof HTMLSelectElement)) {
|
||||
return;
|
||||
}
|
||||
const searchQuery = searchBar.value.toLowerCase();
|
||||
const selectedSortOrder = sortOrderSelect.value;
|
||||
const selectedClass = classSelect.value;
|
||||
const selectedCategory = categoriesSelect.value;
|
||||
let featherlessTop = [];
|
||||
let featherlessNew = [];
|
||||
|
||||
if (selectedCategory === 'Top') {
|
||||
featherlessTop = await fetchFeatherlessStats();
|
||||
}
|
||||
const featherlessIds = featherlessTop.map(stat => stat.id);
|
||||
if (selectedCategory === 'New') {
|
||||
featherlessNew = await fetchFeatherlessNew();
|
||||
}
|
||||
const featherlessNewIds = featherlessNew.map(stat => stat.id);
|
||||
|
||||
let filteredModels = originalModels.filter(model => {
|
||||
const matchesSearch = model.id.toLowerCase().includes(searchQuery);
|
||||
const matchesClass = selectedClass ? model.model_class === selectedClass : true;
|
||||
const matchesTop = featherlessIds.includes(model.id);
|
||||
const matchesNew = featherlessNewIds.includes(model.id);
|
||||
|
||||
if (selectedCategory === 'All') {
|
||||
return matchesSearch && matchesClass;
|
||||
}
|
||||
else if (selectedCategory === 'Top') {
|
||||
return matchesSearch && matchesClass && matchesTop;
|
||||
}
|
||||
else if (selectedCategory === 'New') {
|
||||
return matchesSearch && matchesClass && matchesNew;
|
||||
}
|
||||
else {
|
||||
return matchesSearch;
|
||||
}
|
||||
});
|
||||
|
||||
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));
|
||||
} else if (selectedSortOrder === 'date_asc') {
|
||||
filteredModels.sort((a, b) => a.updated_at.localeCompare(b.updated_at));
|
||||
} else if (selectedSortOrder === 'date_desc') {
|
||||
filteredModels.sort((a, b) => b.updated_at.localeCompare(a.updated_at));
|
||||
}
|
||||
|
||||
setupPagination(filteredModels, Number(localStorage.getItem(storageKey)) || perPage, featherlessCurrentPage);
|
||||
}
|
||||
|
||||
// Required to keep the /model command function
|
||||
$('#featherless_model').empty();
|
||||
for (const model of data) {
|
||||
const option = document.createElement('option');
|
||||
@ -288,15 +482,49 @@ export async function loadFeatherlessModels(data) {
|
||||
}
|
||||
}
|
||||
|
||||
function onFeatherlessModelSelect() {
|
||||
const modelId = String($('#featherless_model').val());
|
||||
textgen_settings.featherless_model = modelId;
|
||||
$('#api_button_textgenerationwebui').trigger('click');
|
||||
async function fetchFeatherlessStats() {
|
||||
const response = await fetch('https://api.featherless.ai/feather/popular');
|
||||
const data = await response.json();
|
||||
return data.popular;
|
||||
}
|
||||
|
||||
async function fetchFeatherlessNew() {
|
||||
const response = await fetch('https://api.featherless.ai/feather/models?sort=-created_at&perPage=10');
|
||||
const data = await response.json();
|
||||
return data.items;
|
||||
}
|
||||
|
||||
function onFeatherlessModelSelect(modelId) {
|
||||
const model = featherlessModels.find(x => x.id === modelId);
|
||||
textgen_settings.featherless_model = modelId;
|
||||
$('#featherless_model').val(modelId);
|
||||
$('#api_button_textgenerationwebui').trigger('click');
|
||||
setGenerationParamsFromPreset({ max_length: model.context_length });
|
||||
}
|
||||
|
||||
let featherlessIsGridView = 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('featherless_model_card_block');
|
||||
modelCardBlock.classList.add('list-view');
|
||||
|
||||
const toggleButton = document.getElementById('featherless_model_grid_toggle');
|
||||
toggleButton.addEventListener('click', function () {
|
||||
// Toggle between grid and list view
|
||||
if (featherlessIsGridView) {
|
||||
modelCardBlock.classList.remove('grid-view');
|
||||
modelCardBlock.classList.add('list-view');
|
||||
this.title = 'Toggle to grid view';
|
||||
} else {
|
||||
modelCardBlock.classList.remove('list-view');
|
||||
modelCardBlock.classList.add('grid-view');
|
||||
this.title = 'Toggle to list view';
|
||||
}
|
||||
|
||||
featherlessIsGridView = !featherlessIsGridView;
|
||||
});
|
||||
});
|
||||
function onMancerModelSelect() {
|
||||
const modelId = String($('#mancer_model').val());
|
||||
textgen_settings.mancer_model = modelId;
|
||||
@ -469,20 +697,6 @@ function getAphroditeModelTemplate(option) {
|
||||
`));
|
||||
}
|
||||
|
||||
function getFeatherlessModelTemplate(option) {
|
||||
const model = featherlessModels.find(x => x.id === option?.element?.value);
|
||||
|
||||
if (!option.id || !model) {
|
||||
return option.text;
|
||||
}
|
||||
|
||||
return $((`
|
||||
<div class="flex-container flexFlowColumn">
|
||||
<div><strong>${DOMPurify.sanitize(model.name)}</strong> | <span>${model.context_length || '???'} tokens</span></div>
|
||||
</div>
|
||||
`));
|
||||
}
|
||||
|
||||
async function downloadOllamaModel() {
|
||||
try {
|
||||
const serverUrl = textgen_settings.server_urls[textgen_types.OLLAMA];
|
||||
@ -670,9 +884,9 @@ export function initTextGenModels() {
|
||||
$('#ollama_download_model').on('click', downloadOllamaModel);
|
||||
$('#vllm_model').on('change', onVllmModelSelect);
|
||||
$('#aphrodite_model').on('change', onAphroditeModelSelect);
|
||||
$('#featherless_model').on('change', onFeatherlessModelSelect);
|
||||
$('#tabby_download_model').on('click', downloadTabbyModel);
|
||||
$('#tabby_model').on('change', onTabbyModelSelect);
|
||||
$('#featherless_model').on('change', () => onFeatherlessModelSelect(String($('#featherless_model').val())));
|
||||
|
||||
const providersSelect = $('.openrouter_providers');
|
||||
for (const provider of OPENROUTER_PROVIDERS) {
|
||||
@ -745,13 +959,6 @@ export function initTextGenModels() {
|
||||
width: '100%',
|
||||
templateResult: getAphroditeModelTemplate,
|
||||
});
|
||||
$('#featherless_model').select2({
|
||||
placeholder: 'Select a model',
|
||||
searchInputPlaceholder: 'Search models...',
|
||||
searchInputCssClass: 'text_pole',
|
||||
width: '100%',
|
||||
templateResult: getFeatherlessModelTemplate,
|
||||
});
|
||||
providersSelect.select2({
|
||||
sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
|
||||
placeholder: 'Select providers. No selection = all providers.',
|
||||
|
||||
@ -193,6 +193,7 @@ const settings = {
|
||||
openrouter_allow_fallbacks: true,
|
||||
xtc_threshold: 0.1,
|
||||
xtc_probability: 0,
|
||||
featherless_model: '',
|
||||
};
|
||||
|
||||
export let textgenerationwebui_banned_in_macros = [];
|
||||
|
||||
126
public/style.css
126
public/style.css
@ -5541,3 +5541,129 @@ body:not(.movingUI) .drawer-content.maximized {
|
||||
#InstructSequencesColumn details:not(:last-of-type) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#user_avatar_block {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Main structure for the model cards */
|
||||
.model-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 8px;
|
||||
background-color: #222;
|
||||
color: #fff;
|
||||
margin: 7px;
|
||||
width: calc(100% - 7px);
|
||||
box-sizing: border-box;
|
||||
transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.model-card .details-container {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.model-card:hover {
|
||||
transform: scale(1.01);
|
||||
background-color: #444;
|
||||
transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Smooth transition */
|
||||
}
|
||||
|
||||
.model-card.selected {
|
||||
border: 2px solid var(--okGreen70a);
|
||||
background-color: var(--okGreen70a);
|
||||
}
|
||||
|
||||
.model-info {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.model-title {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.model-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.model-class, .model-context-length, .model-date-added {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.model-class, .model-context-length {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#featherless_model_pagination_container .paginationjs-nav {
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
#featherless_model_card_block.grid-view {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* gap: 3px; */
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Grid-view card */
|
||||
#featherless_model_card_block.grid-view .model-card {
|
||||
flex-direction: column;
|
||||
flex: 1 1 calc(50% - 30px);
|
||||
}
|
||||
|
||||
#featherless_model_search_bar {
|
||||
width: 15ch;
|
||||
flex-grow: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#featherless_model_sort_order {
|
||||
width: auto;
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#featherless_model_grid_toggle {
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#featherless_category_selection,
|
||||
#featherless_class_selection {
|
||||
display: flex;
|
||||
width: auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.model-card {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.model-info, .model-details, .model-date-added {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#featherless_model_search_bar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user