Add creator information display to Lora and Checkpoint modals. #186

py/utils/routes_common.py

@@ -204,7 +204,7 @@ class ModelRouteUtils:
         fields = [
             "id", "modelId", "name", "createdAt", "updatedAt", 
             "publishedAt", "trainedWords", "baseModel", "description",
-            "model", "images"
+            "model", "images", "creator"
         ]
         return {k: data[k] for k in fields if k in data}
 

static/css/components/lora-modal.css

@@ -1324,3 +1324,61 @@
 .recipes-error i {
     color: var(--lora-error);
 }
+
+/* Creator Information Styles */
+.creator-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: var(--space-1);
+    margin-bottom: var(--space-2);
+    padding: 6px 10px;
+    background: rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-sm);
+    max-width: fit-content;
+}
+
+[data-theme="dark"] .creator-info {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--lora-border);
+}
+
+.creator-avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+}
+
+.creator-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.creator-placeholder {
+    background: var(--lora-accent);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.creator-username {
+    font-size: 0.9em;
+    font-weight: 500;
+    color: var(--text-color);
+}
+
+/* Optional: add hover effect for creator info */
+.creator-info:hover {
+    background: oklch(var(--lora-accent) / 0.1);
+    border-color: var(--lora-accent);
+}

static/js/components/checkpointModal/index.js

@@ -32,6 +32,20 @@ export function showCheckpointModal(checkpoint) {
                         <i class="fas fa-pencil-alt"></i>
                     </button>
                 </div>
+
+                ${checkpoint.civitai?.creator ? `
+                <div class="creator-info">
+                    ${checkpoint.civitai.creator.image ? 
+                        `<div class="creator-avatar">
+                            <img src="${checkpoint.civitai.creator.image}" alt="${checkpoint.civitai.creator.username}" onerror="this.onerror=null; this.src='static/icons/user-placeholder.png';">
+                        </div>` : 
+                        `<div class="creator-avatar creator-placeholder">
+                            <i class="fas fa-user"></i>
+                        </div>`
+                    }
+                    <span class="creator-username">${checkpoint.civitai.creator.username}</span>
+                </div>` : ''}
+
                 ${renderCompactTags(checkpoint.tags || [])}
             </header>
 

static/js/components/loraModal/index.js

@@ -24,6 +24,7 @@ import { updateLoraCard } from '../../utils/cardUpdater.js';
  * @param {Object} lora - LoRA模型数据
  */
 export function showLoraModal(lora) {
+    console.log('Lora data:', lora);
     const escapedWords = lora.civitai?.trainedWords?.length ? 
         lora.civitai.trainedWords.map(word => word.replace(/'/g, '\\\'')) : [];
 
@@ -37,6 +38,20 @@ export function showLoraModal(lora) {
                         <i class="fas fa-pencil-alt"></i>
                     </button>
                 </div>
+                
+                ${lora.civitai?.creator ? `
+                <div class="creator-info">
+                    ${lora.civitai.creator.image ? 
+                      `<div class="creator-avatar">
+                         <img src="${lora.civitai.creator.image}" alt="${lora.civitai.creator.username}" onerror="this.onerror=null; this.src='static/icons/user-placeholder.png';">
+                       </div>` : 
+                      `<div class="creator-avatar creator-placeholder">
+                         <i class="fas fa-user"></i>
+                       </div>`
+                    }
+                    <span class="creator-username">${lora.civitai.creator.username}</span>
+                </div>` : ''}
+                
                 ${renderCompactTags(lora.tags || [])}
             </header>