added new filter and css fix

aea985d78c243f4a5c7ecbd8084d0cf3a6137a73

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

3 files changed, +47 -12Ignore whitespace
package.json+1 -0
@@ -34,6 +34,7 @@
3434 "rate-limiter-flexible": "^5.0.0",
3535 "response-time": "^2.3.2",
3636 "sanitize-filename": "^1.6.3",
37+ "sillytavern": "file:",
3738 "sillytavern-transformers": "2.14.6",
3839 "simple-git": "^3.19.1",
3940 "tiktoken": "^1.0.16",
public/scripts/textgen-models.js+19 -4
@@ -412,13 +412,18 @@ export async function loadFeatherlessModels(data) {
412412 const selectedSortOrder = sortOrderSelect.value;
413413 const selectedClass = classSelect.value;
414414 const selectedCategory = categoriesSelect.value;
415+
415416 const featherlessTop = await fetchFeatherlessStats();
416417 const featherlessIds = featherlessTop.map(stat => stat.id);
417- // Filter the models based on the search query and selected class
418+
419+ const featherlessNew = await fetchFeatherlessNew();
420+ const featherlessNewIds = featherlessNew.map(stat => stat.id);
421+
418422 let filteredModels = originalModels.filter(model => {
419423 const matchesSearch = model.id.toLowerCase().includes(searchQuery);
420424 const matchesClass = selectedClass ? model.model_class === selectedClass : true;
421425 const matchesTop = featherlessIds.includes(model.id);
426+ const matchesNew = featherlessNewIds.includes(model.id);
422427
423428 if (selectedCategory === 'All') {
424429 return matchesSearch && matchesClass;
@@ -426,8 +431,12 @@ export async function loadFeatherlessModels(data) {
426431 else if (selectedCategory === 'Top') {
427432 return matchesSearch && matchesClass && matchesTop;
428433 }
429-
434+ else if (selectedCategory === 'New') {
430435 return matchesSearch && matchesClass && matchesNew;
436+ }
437+ else {
438+ return null;
439+ }
431440 });
432441
433442 // Sort the filtered models based on selected sort order (A-Z or Z-A)
@@ -448,8 +457,14 @@ async function fetchFeatherlessStats() {
448457 return data.popular;
449458}
450459
460+async function fetchFeatherlessNew() {
461+ const response = await fetch('https://api.featherless.ai/feather/models?sort=-created_at&perPage=10');
462+ const data = await response.json();
463+ return data.items;
464+}
465+
451466function onFeatherlessModelSelect(modelId) {
452- // Find the selected model and set the settings
467+
453468 const model = featherlessModels.find(x => x.id === modelId);
454469 selectedModelId = modelId;
455470 textgen_settings.featherless_model = modelId;
public/style.css+27 -8
@@ -5564,12 +5564,14 @@ body:not(.movingUI) .drawer-content.maximized {
55645564#model_search_bar {
55655565 flex-grow: 1;
55665566 min-width: 10ch;
5567+ align-self: center;
55675568}
55685569
55695570/* Sort dropdown should be auto-sized based on its content */
55705571#model_sort_order {
5571- width: auto; /* Set the width of the dropdown to its content size */
5572+ width: auto;
55725573 flex-shrink: 0; /* Prevent it from shrinking */
5574+ align-self: center;
55735575}
55745576
55755577/* Grid toggle button */
@@ -5579,13 +5581,30 @@ body:not(.movingUI) .drawer-content.maximized {
55795581 cursor: pointer;
55805582}
55815583
55825584#category_selection,
5583-{
5585+#class_selection {
55845586 display: flex;
55855587 width: auto;
5588+ align-self: center;
55865589}
5587-#class_selection
5590+
5588-{
5591+/* Media query for mobile devices */
5589- display: flex;
5592+@media (max-width: 768px) {
5590- width: auto;
5593+ .model-card {
5594+ flex-direction: column; /* Stack content vertically on small screens */
5595+ align-items: stretch; /* Stretch items to take full width */
5596+ }
5597+
5598+ .model-info, .model-details {
5599+ width: 100%; /* Take full width */
5600+ text-align: left; /* Left-align text */
5601+ }
5602+
5603+ #model_search_bar {
5604+ width: 100%; /* Take full width on small screens */
5605+ }
5606+
5607+ #model_sort_order, #model_grid_toggle {
5608+ margin-top: 10px; /* Add some space above these elements */
5609+ }
55915610}