From 8250acdfb572f5af7d96ef60d630dd8effe09fc9 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 21 May 2025 15:31:23 +0800
Subject: [PATCH] Add creator information display to Lora and Checkpoint
 modals. #186

---
 py/utils/routes_common.py                     |  2 +-
 static/css/components/lora-modal.css          | 58 +++++++++++++++++++
 static/js/components/checkpointModal/index.js | 14 +++++
 static/js/components/loraModal/index.js       | 15 +++++
 4 files changed, 88 insertions(+), 1 deletion(-)

diff --git a/py/utils/routes_common.py b/py/utils/routes_common.py
index 32b94e4a..6d5c56f2 100644
--- a/py/utils/routes_common.py
+++ b/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}
 
diff --git a/static/css/components/lora-modal.css b/static/css/components/lora-modal.css
index ad8deaf1..1f42e4eb 100644
--- a/static/css/components/lora-modal.css
+++ b/static/css/components/lora-modal.css
@@ -1323,4 +1323,62 @@
 
 .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);
 }
\ No newline at end of file
diff --git a/static/js/components/checkpointModal/index.js b/static/js/components/checkpointModal/index.js
index 1066b49e..7df41fd0 100644
--- a/static/js/components/checkpointModal/index.js
+++ b/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>
 
diff --git a/static/js/components/loraModal/index.js b/static/js/components/loraModal/index.js
index 458edd27..3b8e517b 100644
--- a/static/js/components/loraModal/index.js
+++ b/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>