Update

nodes.py

@@ -71,6 +71,11 @@ class LorasEndpoint:
                 
                 # Convert to dict for API response
                 lora_data = metadata.to_dict()
+                # Get relative path and remove filename to get just the folder structure
+                rel_path = os.path.relpath(file_path, self.loras_root)
+                folder = os.path.dirname(rel_path)
+                # Ensure forward slashes for consistency across platforms
+                lora_data['folder'] = folder.replace(os.path.sep, '/')
                 
                 loras.append(lora_data)
             
@@ -98,7 +103,10 @@ class LorasEndpoint:
             
             # Format the data for the template
             formatted_loras = [self.format_lora(l) for l in data]
-            
+            folders = sorted(list(set(l['folder'] for l in data)))
+
+            print("folders:",folders)
+
             # Debug logging
             if formatted_loras:
                 print(f"Sample lora data: {formatted_loras[0]}")
@@ -107,11 +115,13 @@ class LorasEndpoint:
                 
             context = {
                 "loras": formatted_loras,
+                "folders": folders,
                 # Only set single lora if we're viewing details
                 "lora": formatted_loras[0] if formatted_loras else {
                     "model_name": "",
                     "file_name": "",
                     "preview_url": "",
+                    "folder": "",
                     "civitai": {
                         "id": "",
                         "model": "",
@@ -148,6 +158,8 @@ class LorasEndpoint:
                 "model_name": lora["model_name"],
                 "file_name": lora["file_name"],   
                 "preview_url": lora["preview_url"],
+                "base_model": lora["base_model"],
+                "folder": lora["folder"],
                 "civitai": lora.get("civitai", {}) or {}  # 确保当 civitai 为 None 时返回空字典
             }
         except Exception as e:
@@ -156,7 +168,9 @@ class LorasEndpoint:
             return {
                 "model_name": lora.get("model_name", "Unknown"),
                 "file_name": lora.get("file_name", ""),   
-                "preview_url": lora.get("preview_url", ""),
+                "preview_url": lora.get("preview_url", ""), 
+                "base_model": lora.get("base_model", ""),
+                "folder": lora.get("folder", ""),
                 "civitai": {
                     "id": "",
                     "modelId": "",

static/css/style.css

@@ -27,22 +27,25 @@ body {
 /* 文件夹标签样式 */
 .folder-tags {
     display: flex;
-    gap: 8px;
+    gap: 4px;
     overflow-x: auto;
-    padding: 10px 0;
+    padding: 4px 0;
+    flex-wrap: wrap;
 }
 
 .tag {
-    padding: 6px 12px;
-    border-radius: 20px;
-    background: #e0e0e0;
     cursor: pointer;
-    white-space: nowrap;
+    padding: 2px 8px;
-    transition: all 0.3s;
+    margin: 2px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    display: inline-block;
+    line-height: 1.2;
+    font-size: 14px;
 }
 
 .tag.active {
-    background: var(--primary-color);
+    background-color: #007bff;
     color: white;
 }
 

static/js/script.js

@@ -17,22 +17,6 @@ function sortCards(sortBy) {
     cards.forEach(card => grid.appendChild(card));
 }
 
-// 文件夹筛选
-document.querySelectorAll('.tag').forEach(tag => {
-    tag.addEventListener('click', () => {
-        document.querySelectorAll('.tag').forEach(t => t.classList.remove('active'));
-        tag.classList.add('active');
-        const folder = tag.dataset.folder;
-        filterByFolder(folder);
-    });
-});
-
-function filterByFolder(folder) {
-    document.querySelectorAll('.lora-card').forEach(card => {
-        card.style.display = card.dataset.folder === folder ? 'block' : 'none';
-    });
-}
-
 // 刷新功能
 async function refreshLoras() {
     try {
@@ -210,6 +194,28 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 });
 
+function toggleFolder(element) {
+    // Remove active class from all tags if clicking already active tag
+    if (element.classList.contains('active')) {
+        document.querySelectorAll('.tag').forEach(tag => tag.classList.remove('active'));
+        // Show all cards
+        document.querySelectorAll('.lora-card').forEach(card => card.style.display = '');
+    } else {
+        // Remove active class from all tags
+        document.querySelectorAll('.tag').forEach(tag => tag.classList.remove('active'));
+        // Add active class to clicked tag
+        element.classList.add('active');
+        // Hide all cards first
+        document.querySelectorAll('.lora-card').forEach(card => {
+            if (card.getAttribute('data-folder') === element.getAttribute('data-folder')) {
+                card.style.display = '';
+            } else {
+                card.style.display = 'none';
+            }
+        });
+    }
+}
+
 // 主题切换
 function toggleTheme() {
   const theme = document.body.dataset.theme || 'light';

templates/loras.html

@@ -29,7 +29,7 @@
         <div class="controls">
             <div class="folder-tags">
                 {% for folder in folders %}
-                <div class="tag" data-folder="{{ folder }}">{{ folder }}</div>
+                <div class="tag" data-folder="{{ folder }}" onclick="toggleFolder(this)">{{ folder }}</div>
                 {% endfor %}
             </div>
             
@@ -48,7 +48,7 @@
         <div class="card-grid" id="loraGrid">
             {% for lora in loras %}
             <!-- 在卡片部分更新元数据展示 -->
-            <div class="lora-card" data-name="{{ lora.model_name }}" data-file_name="{{ lora.file_name }}" data-meta="{{ lora.civitai | default({}) | tojson | forceescape }}">
+            <div class="lora-card" data-name="{{ lora.model_name }}" data-file_name="{{ lora.file_name }}" data-folder="{{ lora.folder }}" data-meta="{{ lora.civitai | default({}) | tojson | forceescape }}">
                 <div class="card-preview">
                     <img src="{{ lora.preview_url or '/loras_static/images/no-preview.png' }}" alt="{{ lora.name }}">
                     <div class="card-header">