From b68dbba5122b44d96cd56bcf70f3e3b9d195688d Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Fri, 31 Jan 2025 20:30:21 +0800
Subject: [PATCH] Add trigger words section with copy functionality; update
 toast notifications for user feedback

---
 static/css/style.css | 169 ++++++++++++++++++++++++++++++++++++++++---
 static/js/script.js  | 125 ++++++++++++++++++++++++++------
 2 files changed, 262 insertions(+), 32 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 387364f1..6c2d1862 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -567,6 +567,8 @@ body.modal-open {
 }
 
 .trigger-words {
+    display: flex;
+    gap: var(--space-2);
     background: var(--lora-surface);
     border: 1px solid var(--lora-border);
     border-radius: var(--border-radius-sm);
@@ -574,17 +576,94 @@ body.modal-open {
     margin: var(--space-2) 0;
 }
 
-.trigger-words strong {
-    display: block;
-    margin-bottom: var(--space-1);
-    color: var(--text-color);
+.trigger-words-categories {
+    flex: 0 0 200px;
+    border-right: 1px solid var(--lora-border);
+    padding-right: var(--space-2);
 }
 
-.word-list {
-    color: var(--lora-accent);
-    font-size: 1.1em;
-    font-weight: 500;
-    letter-spacing: 0.02em;
+.trigger-category {
+    padding: 8px;
+    margin-bottom: 4px;
+    border-radius: var(--border-radius-xs);
+    cursor: pointer;
+    color: var(--text-color);
+    font-size: 0.9em;
+    transition: background-color 0.2s;
+}
+
+.trigger-category:hover {
+    background: var(--lora-border);
+}
+
+.trigger-category.active {
+    background: var(--lora-accent);
+    color: white;
+}
+
+.trigger-words-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow-y: auto;
+    max-height: 300px;
+}
+
+.trigger-word-tag {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-xs);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 0.85em;
+    color: var(--text-color);
+    position: relative;
+    gap: var(--space-1);
+}
+
+.trigger-word-tag:hover {
+    background: oklch(var(--lora-accent) / 0.1);
+    border-color: var(--lora-accent);
+}
+
+.trigger-word-tag:active {
+    transform: scale(0.98);
+}
+
+.trigger-word-content {
+    flex: 1;
+    word-break: break-word;
+    line-height: 1.4;
+}
+
+.trigger-word-copy {
+    opacity: 0.5;
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.trigger-word-tag:hover .trigger-word-copy {
+    opacity: 0.8;
+}
+
+/* Update toast animation for trigger word copy */
+.toast.toast-copy {
+    background: var(--lora-accent);
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    font-size: 0.9em;
+    transform: translateX(-50%) translateY(20px);
+}
+
+.toast.toast-copy.show {
+    transform: translateX(-50%) translateY(0);
 }
 
 .copy-btn {
@@ -683,4 +762,76 @@ body.modal-open .toast-info {
 [data-theme="dark"] .toast {
     background: var(--lora-surface);
     color: var(--lora-text);
+}
+
+/* Updated Trigger Words Section */
+.trigger-words-container {
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    align-items: flex-start;
+    gap: var(--space-2);
+    margin: var(--space-2) 0;
+    padding: var(--space-2);
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-sm);
+}
+
+.trigger-words-title {
+    font-size: 0.95em;
+    color: var(--text-color);
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100%;
+}
+
+.trigger-words-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: flex-start;
+}
+
+.trigger-word-tag {
+    display: inline-flex;
+    align-items: center;
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-xs);
+    padding: 6px 10px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    gap: 8px;
+    max-width: 100%;
+}
+
+.trigger-word-content {
+    color: oklch(65% 0.2 256); /* Accent color for trigger words */
+    font-size: 0.85em;
+    line-height: 1.4;
+    word-break: break-word;
+}
+
+.trigger-word-copy {
+    display: flex;
+    align-items: center;
+    color: var(--text-color);
+    opacity: 0.5;
+    flex-shrink: 0;
+    transition: opacity 0.2s;
+}
+
+.trigger-word-tag:hover {
+    background: oklch(var(--lora-accent) / 0.1);
+    border-color: var(--lora-accent);
+}
+
+.trigger-word-tag:hover .trigger-word-copy {
+    opacity: 0.8;
+}
+
+.trigger-word-tag:active {
+    transform: scale(0.98);
 }
\ No newline at end of file
diff --git a/static/js/script.js b/static/js/script.js
index 8d1f0881..b89c4f75 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -191,9 +191,18 @@ const modalManager = new ModalManager();
 // 修改现有的 showModal 函数为 showLoraModal
 function showLoraModal(lora) {
     const escapedWords = lora.trainedWords?.length ? 
-        lora.trainedWords.join(', ').toUpperCase().replace(/'/g, '\\\'') : '';
+        lora.trainedWords.map(word => word.replace(/'/g, '\\\'')) : [];
+
+    // Organize trigger words by categories
+    const categories = {};
+    escapedWords.forEach(word => {
+        const category = word.includes(':') ? word.split(':')[0] : 'General';
+        if (!categories[category]) {
+            categories[category] = [];
+        }
+        categories[category].push(word);
+    });
         
-    // 添加图片加载策略
     const imageMarkup = lora.images.map(img => {
         if (img.type === 'video') {
             return `<video controls autoplay muted loop crossorigin="anonymous" referrerpolicy="no-referrer">
@@ -207,33 +216,103 @@ function showLoraModal(lora) {
                         loading="lazy">`;
         }
     }).join('');
+ 
+    const triggerWordsMarkup = escapedWords.length ? `
+        <div class="trigger-words-container">
+            <div class="trigger-words-title">Trigger Words</div>
+            <div class="trigger-words-tags">
+                ${escapedWords.map(word => `
+                    <div class="trigger-word-tag" onclick="copyTriggerWord('${word}')">
+                        <span class="trigger-word-content">${word}</span>
+                        <span class="trigger-word-copy">
+                            <svg width="14" height="14" viewBox="0 0 24 24">
+                                <path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+                            </svg>
+                        </span>
+                    </div>
+                `).join('')}
+            </div>
+        </div>
+    ` : '<div class="trigger-words-container">No trigger words available</div>';
     
     const content = `
-      <div class="modal-content">
-        <h2>${lora.model.name}</h2>
-        <div class="carousel">
-          ${imageMarkup}
+        <div class="modal-content">
+            <h2>${lora.model.name}</h2>
+            <div class="carousel">
+                ${imageMarkup}
+            </div>
+            <div class="description">About this version: ${lora.description || 'N/A'}</div>
+            ${triggerWordsMarkup}
+            <div class="model-link">
+                <a href="https://civitai.com/models/${lora.modelId}?modelVersionId=${lora.id}" 
+                   target="_blank">more details on CivitAI</a>
+            </div>
+            <button class="close" onclick="modalManager.closeModal('loraModal')">&times;</button>
         </div>
-        <div class="description">About this version: ${lora.description ? lora.description : 'N/A'}</div>
-        <div class="trigger-words">
-          <strong>Trigger Words:</strong>
-          <span class="word-list">${escapedWords || 'N/A'}</span>
-          ${escapedWords ? `
-          <button class="copy-btn" onclick="copyTriggerWords(\`${escapedWords}\`)">
-            <svg width="16" height="16" viewBox="0 0 24 24">
-                <path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
-            </svg>
-          </button>
-          ` : ''}
-        </div>
-        <div class="model-link">
-          <a href="https://civitai.com/models/${lora.modelId}?modelVersionId=${lora.id}" target="_blank">more details on CivitAI</a>
-        </div>
-        <button class="close" onclick="modalManager.closeModal('loraModal')">&times;</button>
-      </div>
     `;
     
     modalManager.showModal('loraModal', content);
+
+    // Add category switching event listeners
+    document.querySelectorAll('.trigger-category').forEach(category => {
+        category.addEventListener('click', function() {
+            const categoryName = this.dataset.category;
+            document.querySelectorAll('.trigger-category').forEach(c => c.classList.remove('active'));
+            this.classList.add('active');
+            
+            const wordsList = document.querySelector('.trigger-words-list');
+            wordsList.innerHTML = categories[categoryName].map(word => `
+                <div class="trigger-word-tag" onclick="copyTriggerWord('${word}')">
+                    <span class="trigger-word-content">${word}</span>
+                    <span class="trigger-word-copy">
+                        <svg width="14" height="14" viewBox="0 0 24 24">
+                            <path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+                        </svg>
+                    </span>
+                </div>
+            `).join('');
+        });
+    });
+}
+
+function copyTriggerWord(word) {
+    navigator.clipboard.writeText(word).then(() => {
+        const toast = document.createElement('div');
+        toast.className = 'toast toast-copy';
+        toast.textContent = 'Copied!';
+        document.body.appendChild(toast);
+        
+        requestAnimationFrame(() => {
+            toast.classList.add('show');
+            setTimeout(() => {
+                toast.classList.remove('show');
+                setTimeout(() => toast.remove(), 300);
+            }, 1000);
+        });
+    });
+}
+
+// Add new functions for trigger word handling
+function toggleTriggerWord(element) {
+    element.classList.toggle('selected');
+}
+
+function copySelectedTriggerWords() {
+    const selectedWords = Array.from(document.querySelectorAll('.trigger-word-tag.selected'))
+        .map(el => el.textContent.trim());
+    
+    if (selectedWords.length === 0) {
+        // If no words are selected, select and copy all words
+        const allWords = Array.from(document.querySelectorAll('.trigger-word-tag'))
+            .map(el => el.textContent.trim());
+        navigator.clipboard.writeText(allWords.join(', '))
+            .then(() => showToast(`Copied all ${allWords.length} trigger words to clipboard`, 'success'))
+            .catch(() => showToast('Failed to copy trigger words', 'error'));
+    } else {
+        navigator.clipboard.writeText(selectedWords.join(', '))
+            .then(() => showToast(`Copied ${selectedWords.length} selected trigger words to clipboard`, 'success'))
+            .catch(() => showToast('Failed to copy trigger words', 'error'));
+    }
 }
 
 // 修改现有的 showDeleteModal 函数