From 29d2b5ee4bd7b0d73b31e4f844a2b695c97e6cf7 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Tue, 22 Jul 2025 17:43:33 +0800
Subject: [PATCH] feat: Enhance creator info display and add Civitai view
 functionality in ModelModal

---
 .../css/components/lora-modal/lora-modal.css  | 42 +++++++++++++++++--
 static/js/components/shared/ModelModal.js     | 42 +++++++++++++------
 2 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/static/css/components/lora-modal/lora-modal.css b/static/css/components/lora-modal/lora-modal.css
index 50a21528..c0dde2ff 100644
--- a/static/css/components/lora-modal/lora-modal.css
+++ b/static/css/components/lora-modal/lora-modal.css
@@ -436,12 +436,13 @@
     display: flex;
     align-items: center;
     gap: 10px;
-    margin-bottom: var(--space-1);
-    padding: 6px 10px;
+    padding: 2px 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;
+    cursor: pointer;
+    transition: all 0.2s;
 }
 
 [data-theme="dark"] .creator-info {
@@ -482,8 +483,43 @@
     color: var(--text-color);
 }
 
-/* Optional: add hover effect for creator info */
+/* Add hover effect for creator info */
 .creator-info:hover {
     background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
     border-color: var(--lora-accent);
+    transform: translateY(-1px);
+}
+
+.creator-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: var(--space-1);
+    flex-wrap: wrap;
+}
+
+.civitai-view-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: var(--lora-accent);
+    color: white;
+    border: none;
+    border-radius: var(--border-radius-sm);
+    cursor: pointer;
+    font-size: 0.9em;
+    transition: all 0.2s;
+}
+
+.civitai-view-btn:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+}
+
+.civitai-view-btn i {
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
\ No newline at end of file
diff --git a/static/js/components/shared/ModelModal.js b/static/js/components/shared/ModelModal.js
index e27c8e8c..bbeba6ca 100644
--- a/static/js/components/shared/ModelModal.js
+++ b/static/js/components/shared/ModelModal.js
@@ -1,4 +1,4 @@
-import { showToast } from '../../utils/uiHelpers.js';
+import { showToast, openCivitai } from '../../utils/uiHelpers.js';
 import { modalManager } from '../../managers/ModalManager.js';
 import { 
     toggleShowcase,
@@ -95,18 +95,25 @@ export function showModelModal(model, modelType) {
                     </button>
                 </div>
 
-                ${model.civitai?.creator ? `
-                <div class="creator-info">
-                    ${model.civitai.creator.image ? 
-                        `<div class="creator-avatar">
-                            <img src="${model.civitai.creator.image}" alt="${model.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">${model.civitai.creator.username}</span>
-                </div>` : ''}
+                <div class="creator-actions">
+                    ${model.from_civitai ? `
+                    <button class="civitai-view-btn" title="View on Civitai" data-action="view-civitai" data-filepath="${model.file_path}">
+                        <i class="fas fa-globe"></i> View on Civitai
+                    </button>` : ''}
+
+                    ${model.civitai?.creator ? `
+                    <div class="creator-info" data-username="${model.civitai.creator.username}" data-action="view-creator" title="View Creator Profile">
+                        ${model.civitai.creator.image ? 
+                            `<div class="creator-avatar">
+                                <img src="${model.civitai.creator.image}" alt="${model.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">${model.civitai.creator.username}</span>
+                    </div>` : ''}
+                </div>
 
                 ${renderCompactTags(model.tags || [], model.file_path)}
             </header>
@@ -269,6 +276,15 @@ function setupEventHandlers(filePath) {
             case 'scroll-to-top':
                 scrollToTop(target);
                 break;
+            case 'view-civitai':
+                openCivitai(target.dataset.filepath);
+                break;
+            case 'view-creator':
+                const username = target.dataset.username;
+                if (username) {
+                    window.open(`https://civitai.com/user/${username}`, '_blank');
+                }
+                break;
         }
     }