From 2f3061ce7cf82d9bbd23348351e40a8ff9fb7e6a Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 19 Feb 2025 11:20:26 +0800
Subject: [PATCH] checkpoint

---
 static/css/components/modal.css  | 38 ++++++++++++++++----------
 static/js/components/LoraCard.js | 47 ++++++++++++++++++--------------
 2 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/static/css/components/modal.css b/static/css/components/modal.css
index a111f439..a02a8575 100644
--- a/static/css/components/modal.css
+++ b/static/css/components/modal.css
@@ -543,7 +543,7 @@ body.modal-open {
     opacity: 0.9;
 }
 
-/* Modal Header */
+/* Lora Modal Header */
 .modal-header {
     display: flex;
     justify-content: space-between;
@@ -585,6 +585,20 @@ body.modal-open {
     word-break: break-word;
 }
 
+.info-item.notes {
+    grid-column: 1 / -1 !important; /* Make notes section full width */
+}
+
+/* Add specific styles for notes content */
+.info-item.notes .editable-field [contenteditable] {
+    min-height: 60px; /* Increase height for multiple lines */
+    max-height: 150px; /* Limit maximum height */
+    overflow-y: auto; /* Add scrolling for long content */
+    white-space: pre-wrap; /* Preserve line breaks */
+    line-height: 1.5; /* Improve readability */
+    padding: 8px 12px; /* Slightly increase padding */
+}
+
 .file-path {
     font-family: monospace;
     font-size: 0.9em;
@@ -659,6 +673,7 @@ body.modal-open {
     margin-top: var(--space-1);
 }
 
+/* Update Trigger Words styles */
 .trigger-word-tag {
     display: inline-flex;
     align-items: center;
@@ -671,19 +686,20 @@ body.modal-open {
     gap: 6px;
 }
 
-/* Keep the existing trigger word tag hover and content styles */
-.trigger-word-tag:hover {
-    background: oklch(var(--lora-accent) / 0.1);
-    border-color: var(--lora-accent);
-}
-
+/* Update trigger word content color to use theme accent */
 .trigger-word-content {
-    color: oklch(65% 0.2 256);
+    color: var(--lora-accent) !important; /* Override general span color */
     font-size: 0.85em;
     line-height: 1.4;
     word-break: break-word;
 }
 
+/* Keep the hover effect using accent color */
+.trigger-word-tag:hover {
+    background: oklch(var(--lora-accent) / 0.1);
+    border-color: var(--lora-accent);
+}
+
 .trigger-word-copy {
     display: flex;
     align-items: center;
@@ -748,12 +764,6 @@ body.modal-open {
     font-size: 0.9em;
 }
 
-/* Adjust info items for the new fields */
-.info-item.usage-tips,
-.info-item.notes {
-    grid-column: span 1;
-}
-
 @media (max-width: 640px) {
     .info-item.usage-tips,
     .info-item.notes {
diff --git a/static/js/components/LoraCard.js b/static/js/components/LoraCard.js
index 7b879b85..fa648172 100644
--- a/static/js/components/LoraCard.js
+++ b/static/js/components/LoraCard.js
@@ -12,6 +12,7 @@ export function createLoraCard(lora) {
     card.dataset.folder = lora.folder;
     card.dataset.modified = lora.modified;
     card.dataset.from_civitai = lora.from_civitai;
+    card.dataset.base_model = lora.base_model;
     card.dataset.meta = JSON.stringify(lora.civitai || {});
 
     const version = state.previewVersions.get(lora.file_path);
@@ -58,17 +59,18 @@ export function createLoraCard(lora) {
 
     // Main card click event
     card.addEventListener('click', () => {
-        const meta = JSON.parse(card.dataset.meta || '{}');
-        if (Object.keys(meta).length) {
-            showLoraModal(meta);
-        } else {
-            showToast(
-                card.dataset.from_civitai === 'true' ?
-                'Click "Fetch" to retrieve metadata' :
-                'No CivitAI information available',
-                'info'
-            );
-        }
+        const loraMeta = {
+            sha256: card.dataset.sha256,
+            file_path: card.dataset.filepath.replace(/[^/]+$/, ''), // Extract directory path
+            model_name: card.dataset.name,
+            file_name: card.dataset.file_name,
+            folder: card.dataset.folder,
+            modified: card.dataset.modified,
+            from_civitai: card.dataset.from_civitai === 'true',
+            base_model: card.dataset.base_model,
+            civitai: JSON.parse(card.dataset.meta || '{}')
+        };
+        showLoraModal(loraMeta);
     });
 
     // Copy button click event
@@ -108,9 +110,9 @@ export function showLoraModal(lora) {
 
     const content = `
         <div class="modal-content">
+            <button class="close" onclick="modalManager.closeModal('loraModal')">&times;</button>
             <header class="modal-header">
-                <button class="close" onclick="modalManager.closeModal('loraModal')">&times;</button>
-                <h2>${lora.model.name}</h2>
+                <h2>${lora.model_name}</h2>
                 <div class="modal-actions">
                     ${lora.from_civitai ? 
                         `<button class="fetch-btn" title="Refresh metadata from Civitai">
@@ -128,7 +130,7 @@ export function showLoraModal(lora) {
                     <div class="info-grid">
                         <div class="info-item">
                             <label>Version</label>
-                            <span>${lora.name || 'N/A'}</span>
+                            <span>${lora.civitai.name || 'N/A'}</span>
                         </div>
                         <div class="info-item">
                             <label>File Name</label>
@@ -145,12 +147,13 @@ export function showLoraModal(lora) {
                         <div class="info-item usage-tips">
                             <label>Usage Tips</label>
                             <div class="editable-field">
-                                <div class="usage-tips-content" contenteditable="true" spellcheck="false">${lora.usage_tips || 'Strength: 0.8'}</div>
+                                <div class="usage-tips-content" contenteditable="true" spellcheck="false">${lora.usage_tips || 'Save usage tips here..'}</div>
                                 <button class="save-btn" onclick="saveUsageTips('${lora.file_path}')">
                                     <i class="fas fa-save"></i>
                                 </button>
                             </div>
                         </div>
+                        ${renderTriggerWords(escapedWords)}
                         <div class="info-item notes">
                             <label>Additional Notes</label>
                             <div class="editable-field">
@@ -160,7 +163,6 @@ export function showLoraModal(lora) {
                                 </button>
                             </div>
                         </div>
-                        ${renderTriggerWords(escapedWords)}
                         <div class="info-item full-width">
                             <label>About this version</label>
                             <div class="description-text">${lora.description || 'N/A'}</div>
@@ -175,7 +177,7 @@ export function showLoraModal(lora) {
                         Scroll for more examples
                     </div>
                     <div class="carousel">
-                        ${renderShowcaseImages(lora.images)}
+                        ${renderShowcaseImages(lora.civitai.images)}
                     </div>
                 </div>
             </div>
@@ -192,7 +194,7 @@ function setupEditableFields() {
     editableFields.forEach(field => {
         field.addEventListener('focus', function() {
             if (this.textContent === 'Add your notes here...' || 
-                this.textContent === 'Strength: 0.8') {
+                this.textContent === 'Save usage tips here..') {
                 this.textContent = '';
             }
         });
@@ -200,7 +202,7 @@ function setupEditableFields() {
         field.addEventListener('blur', function() {
             if (this.textContent.trim() === '') {
                 this.textContent = this.classList.contains('usage-tips-content') 
-                    ? 'Strength: 0.8' 
+                    ? 'Save usage tips here..' 
                     : 'Add your notes here...';
             }
         });
@@ -246,7 +248,12 @@ async function saveModelMetadata(filePath, data) {
 }
 
 function renderTriggerWords(words) {
-    if (!words.length) return '';
+    if (!words.length) return `
+        <div class="info-item full-width trigger-words">
+            <label>Trigger Words</label>
+            <span>No trigger word needed</span>
+        </div>
+    `;
     
     return `
         <div class="info-item full-width trigger-words">