added new filter and css fix

package.json

@@ -34,6 +34,7 @@
         "rate-limiter-flexible": "^5.0.0",
         "response-time": "^2.3.2",
         "sanitize-filename": "^1.6.3",
+        "sillytavern": "file:",
         "sillytavern-transformers": "2.14.6",
         "simple-git": "^3.19.1",
         "tiktoken": "^1.0.16",

public/scripts/textgen-models.js

@@ -412,13 +412,18 @@ export async function loadFeatherlessModels(data) {
         const selectedSortOrder = sortOrderSelect.value;
         const selectedClass = classSelect.value;
         const selectedCategory = categoriesSelect.value;
+
         const featherlessTop = await fetchFeatherlessStats();
         const featherlessIds = featherlessTop.map(stat => stat.id);
-        // Filter the models based on the search query and selected class
+
+        const 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;
@@ -426,8 +431,12 @@ export async function loadFeatherlessModels(data) {
             else if (selectedCategory === 'Top') {
                 return matchesSearch && matchesClass && matchesTop;
             }
-
-            return matchesSearch && matchesClass;
+            else if (selectedCategory === 'New') {
+                return matchesSearch && matchesClass && matchesNew;
+            }
+            else {
+                return null;
+            }
         });
 
         // Sort the filtered models based on selected sort order (A-Z or Z-A)
@@ -448,8 +457,14 @@ async function fetchFeatherlessStats() {
     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) {
-    // Find the selected model and set the settings
+
     const model = featherlessModels.find(x => x.id === modelId);
     selectedModelId = modelId;
     textgen_settings.featherless_model = modelId;

public/style.css

@@ -5564,12 +5564,14 @@ body:not(.movingUI) .drawer-content.maximized {
 #model_search_bar {
     flex-grow: 1;
     min-width: 10ch;
+    align-self: center;
 }
 
 /* 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 */
+    width: auto;
+    flex-shrink: 0;
+    align-self: center;
 }
 
 /* Grid toggle button */
@@ -5579,13 +5581,30 @@ body:not(.movingUI) .drawer-content.maximized {
     cursor: pointer;
 }
 
-#category_selection
-{
+#category_selection,
+#class_selection {
     display: flex;
     width: auto;
+    align-self: center;
 }
-#class_selection
-{
-    display: flex;
-    width: auto;
+
+/* Media query for mobile devices */
+@media (max-width: 768px) {
+    .model-card {
+        flex-direction: column;  /* Stack content vertically on small screens */
+        align-items: stretch;  /* Stretch items to take full width */
+    }
+
+    .model-info, .model-details {
+        width: 100%;  /* Take full width */
+        text-align: left;  /* Left-align text */
+    }
+
+    #model_search_bar {
+        width: 100%;  /* Take full width on small screens */
+    }
+
+    #model_sort_order, #model_grid_toggle {
+        margin-top: 10px;  /* Add some space above these elements */
+    }
 }