feat(widgets): add Description tab to LoraInfoWidget with dual-mode rendering support

- Add Notes/Description tab switching with tab state persistence in widget value - Lazy-load model description and version description from /lm/loras/metadata - Render CivitAI HTML descriptions inline via v-html - Auto-fetch description when LoRA selection changes while on Description tab - Fix Vue mode height containment via contain:layout size (lm-vue-node class) - Fix scroll wheel isolation: widget scroll vs canvas zoom in both render modes - Add docs/comfyui-dual-mode-widgets.md with widget rendering patterns
2026-08-07 22:40:14 -03:00 · 2026-07-17 15:04:47 +08:00
parent 7f51812c1e
commit 6f71335be4
7 changed files with 1445 additions and 160 deletions
--- a/vue-widgets/src/components/LoraInfoWidget.vue
+++ b/vue-widgets/src/components/LoraInfoWidget.vue
@@ -1,40 +1,111 @@
 <template>
-  <div class="lora-info-widget">
+  <div class="lora-info-widget" :class="{ 'lm-vue-node': isVueMode }" @wheel="onWheel">
    <template v-if="loraName">
-      <div class="info-field">
-        <label class="info-label">Filename</label>
-        <div class="lora-filename">{{ loraName }}</div>
+      <!-- Tab bar -->
+      <div class="lora-info-tabs">
+        <label
+          class="lora-info-tab"
+          :class="{ active: activeTab === 'notes' }"
+        >
+          <input
+            type="radio"
+            v-model="activeTab"
+            value="notes"
+            class="lora-info-tab-input"
+          />
+          <span class="lora-info-tab-label">Notes</span>
+        </label>
+        <label
+          class="lora-info-tab"
+          :class="{ active: activeTab === 'description' }"
+        >
+          <input
+            type="radio"
+            v-model="activeTab"
+            value="description"
+            class="lora-info-tab-input"
+            @change="onDescriptionTabActivated"
+          />
+          <span class="lora-info-tab-label">Description</span>
+        </label>
      </div>
-      <div class="info-field notes-field">
-        <label class="info-label">Notes</label>
-        <textarea
-          v-model="notes"
-          class="lora-notes"
-          placeholder="Add notes about this LoRA..."
-          :disabled="saving"
-        ></textarea>
+
+      <!-- Notes tab content -->
+      <div v-show="activeTab === 'notes'" class="tab-content notes-tab">
+        <div class="info-field">
+          <label class="info-label">Filename</label>
+          <div class="lora-filename">{{ loraName }}</div>
+        </div>
+        <div class="info-field notes-field">
+          <label class="info-label">Notes</label>
+          <textarea
+            v-model="notes"
+            class="lora-notes lm-wheel-scrollable"
+            placeholder="Add notes about this LoRA..."
+            :disabled="saving"
+          ></textarea>
+        </div>
+        <button
+          class="save-btn"
+          :disabled="notes === originalNotes || saving"
+          @click="saveNotes"
+        >
+          {{ saving ? 'Saving...' : 'Save' }}
+        </button>
+      </div>
+
+      <!-- Description tab content -->
+      <div v-show="activeTab === 'description'" class="tab-content description-tab lm-wheel-scrollable">
+        <!-- Loading state -->
+        <div v-if="descriptionLoading" class="description-state">
+          <i class="fas fa-spinner fa-spin"></i>
+          <span>Loading description...</span>
+        </div>
+
+        <!-- Error state -->
+        <div v-else-if="descriptionError" class="description-state error">
+          <span>Failed to load description</span>
+        </div>
+
+        <!-- Empty state (loaded but no content) -->
+        <div v-else-if="!hasDescription" class="description-state placeholder">
+          <span>No description available</span>
+        </div>
+
+        <!-- Description content -->
+        <div v-else class="description-content">
+          <div v-if="versionDescription" class="description-section">
+            <label class="info-label">About this version</label>
+            <div class="description-text" v-html="versionDescription"></div>
+          </div>
+          <div v-if="modelDescription" class="description-section">
+            <label class="info-label">Model Description</label>
+            <div class="description-text" v-html="modelDescription"></div>
+          </div>
+        </div>
      </div>
-      <button
-        class="save-btn"
-        :disabled="notes === originalNotes || saving"
-        @click="saveNotes"
-      >
-        {{ saving ? 'Saving...' : 'Save' }}
-      </button>
    </template>
    <div v-else class="placeholder">No LoRA selected</div>
  </div>
 </template>

 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, computed, watch } from 'vue'

 interface LoraInfoWidget {
  serializeValue?: () => Promise<unknown>
  value?: unknown
  onSetValue?: (v: unknown) => void
  callback?: unknown
-  _setLoraInfo?: (data: { name: string; notes: string; filePath: string }) => void
+  _setLoraInfo?: (data: { name: string; notes: string; filePath: string; activeTab?: string } | null) => void
+  __pendingLoraInfo?: { name: string; notes: string; filePath: string; activeTab?: string } | null
+}
+
+interface LoraInfoWidgetValue {
+  name?: string
+  notes?: string
+  filePath?: string
+  activeTab?: string
 }

 const props = defineProps<{
@@ -42,6 +113,7 @@ const props = defineProps<{
  node: { id: number }
  api: { fetchApi: (url: string, options?: RequestInit) => Promise<Response> }
  app: { extensionManager: { toast: { add: (opts: Record<string, unknown>) => void } } }
+  isVueMode?: boolean
 }>()

 const loraName = ref<string>('')
@@ -49,6 +121,69 @@ const notes = ref<string>('')
 const originalNotes = ref<string>('')
 const filePath = ref<string>('')
 const saving = ref<boolean>(false)
+const activeTab = ref<string>('notes')
+
+// Description tab state
+const versionDescription = ref<string>('')
+const modelDescription = ref<string>('')
+const descriptionLoading = ref<boolean>(false)
+const descriptionError = ref<boolean>(false)
+const descriptionLoaded = ref<boolean>(false)
+
+const hasDescription = computed(() =>
+  !!(versionDescription.value || modelDescription.value)
+)
+
+// Reset and auto-fetch description state when the LoRA selection changes
+watch(filePath, (newPath) => {
+  descriptionLoaded.value = false
+  descriptionError.value = false
+  versionDescription.value = ''
+  modelDescription.value = ''
+  if (newPath && activeTab.value === 'description') {
+    fetchDescription()
+  }
+})
+
+function onDescriptionTabActivated() {
+  if (!descriptionLoaded.value && filePath.value) {
+    fetchDescription()
+  }
+}
+
+async function fetchDescription() {
+  if (descriptionLoading.value || !filePath.value) return
+
+  descriptionLoading.value = true
+  descriptionError.value = false
+
+  try {
+    const response = await props.api.fetchApi(
+      `/lm/loras/metadata?file_path=${encodeURIComponent(filePath.value)}`,
+      { method: 'GET' }
+    )
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch metadata: ${response.statusText}`)
+    }
+
+    const data = await response.json()
+    if (data.success && data.metadata) {
+      versionDescription.value = data.metadata.description || ''
+      modelDescription.value = data.metadata.model?.description || ''
+      descriptionLoaded.value = true
+    } else {
+      // Successful response but no metadata — treat as empty, not error
+      descriptionLoaded.value = true
+    }
+  } catch (e) {
+    console.error('[LoraInfoWidget] Failed to fetch description:', e)
+    descriptionError.value = true
+    // Don't set descriptionLoaded — allow retry on next tab switch
+  } finally {
+    descriptionLoading.value = false
+  }
+}

 async function saveNotes() {
  if (notes.value === originalNotes.value || saving.value) return
@@ -91,47 +226,99 @@ async function saveNotes() {
  }
 }

+function onWheel(event: WheelEvent) {
+  const target = event.target as HTMLElement | null
+  if (!target) return
+
+  const comfyApp = (window as unknown as { app?: { canvas?: { processMouseWheel?: (e: WheelEvent) => void } } }).app
+  if (!comfyApp?.canvas?.processMouseWheel) return
+
+  // Always pass pinch-to-zoom to canvas
+  if (event.ctrlKey) {
+    event.preventDefault()
+    event.stopPropagation()
+    comfyApp.canvas.processMouseWheel(event)
+    return
+  }
+
+  // Horizontal scroll: pass to canvas
+  if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+    event.preventDefault()
+    event.stopPropagation()
+    comfyApp.canvas.processMouseWheel(event)
+    return
+  }
+
+  // Check if the target is inside a scrollable area (notes textarea or description tab)
+  const scrollableEl = target.closest('.lora-notes, .description-tab') as HTMLElement | null
+  if (scrollableEl) {
+    const canScrollY = scrollableEl.scrollHeight > scrollableEl.clientHeight
+    if (canScrollY) {
+      // Let native scroll handle it, but stop propagation to prevent canvas zoom
+      event.stopPropagation()
+      return
+    }
+  }
+
+  // Forward to canvas for zoom
+  event.preventDefault()
+  event.stopPropagation()
+  comfyApp.canvas.processMouseWheel(event)
+}
+
 onMounted(() => {
-  // Display-only widget - return null on serialization to avoid saving to workflow
-  props.widget.serializeValue = async () => null
+  // Persist tab state along with other widget data
+  props.widget.serializeValue = async (): Promise<LoraInfoWidgetValue> => ({
+    name: loraName.value,
+    notes: notes.value,
+    filePath: filePath.value,
+    activeTab: activeTab.value,
+  })

  // Handle external value updates (e.g., loading workflow, paste)
  props.widget.onSetValue = (v: unknown) => {
    if (v && typeof v === 'object') {
-      const data = v as { name?: string; notes?: string; filePath?: string }
+      const data = v as LoraInfoWidgetValue
      if (data.name !== undefined) loraName.value = data.name
      if (data.notes !== undefined) {
        notes.value = data.notes
        originalNotes.value = data.notes
      }
      if (data.filePath !== undefined) filePath.value = data.filePath
+      if (data.activeTab !== undefined) activeTab.value = data.activeTab
    }
  }

  // Restore from saved value if exists (for workflow loading)
  if (props.widget.value && typeof props.widget.value === 'object') {
-    const data = props.widget.value as { name?: string; notes?: string; filePath?: string }
+    const data = props.widget.value as LoraInfoWidgetValue
    if (data.name !== undefined) loraName.value = data.name
    if (data.notes !== undefined) {
      notes.value = data.notes
      originalNotes.value = data.notes
    }
    if (data.filePath !== undefined) filePath.value = data.filePath
+    if (data.activeTab !== undefined) activeTab.value = data.activeTab
  }

  // Expose setLoraInfo on the widget object for external callers (e.g., lora_info.js).
  // Accepts null to clear the display (when selection is deselected).
-  props.widget._setLoraInfo = (data: { name: string; notes: string; filePath: string } | null) => {
+  props.widget._setLoraInfo = (data: { name: string; notes: string; filePath: string; activeTab?: string } | null) => {
    if (data) {
      loraName.value = data.name
      notes.value = data.notes
      originalNotes.value = data.notes
      filePath.value = data.filePath
+      // Preserve existing activeTab unless explicitly provided
+      if (data.activeTab !== undefined) {
+        activeTab.value = data.activeTab
+      }
    } else {
      loraName.value = ''
      notes.value = ''
      originalNotes.value = ''
      filePath.value = ''
+      // Do NOT reset activeTab on deselection — user's tab preference persists
    }
  }

@@ -155,6 +342,86 @@ onMounted(() => {
  overflow: hidden;
 }

+/* Vue node mode: prevent content from pushing node size via ResizeObserver.
+   contain:layout size tells the browser the element's intrinsic size is
+   determined solely by CSS — not by descendant content. This breaks the
+   feedback loop where content grows → ResizeObserver resizes → content
+   reflows → repeat. Same technique used by tags_widget.js + lm_styles.css. */
+.lora-info-widget.lm-vue-node {
+  contain: layout size;
+}
+
+/* ── Tab bar ── */
+.lora-info-tabs {
+  display: flex;
+  gap: 0;
+  margin-bottom: 10px;
+  border-bottom: 1px solid var(--border-color, #444);
+  flex-shrink: 0;
+}
+
+.lora-info-tab {
+  flex: 1;
+  text-align: center;
+  cursor: pointer;
+  padding: 6px 0;
+  position: relative;
+}
+
+.lora-info-tab-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.lora-info-tab-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fg-color, #fff);
+  opacity: 0.5;
+  transition: opacity 0.15s;
+}
+
+.lora-info-tab:hover .lora-info-tab-label {
+  opacity: 0.75;
+}
+
+.lora-info-tab.active .lora-info-tab-label {
+  opacity: 1;
+}
+
+.lora-info-tab.active::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 25%;
+  right: 25%;
+  height: 2px;
+  background: rgba(66, 153, 225, 0.8);
+  border-radius: 1px;
+}
+
+/* ── Tab content ── */
+.tab-content {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.notes-tab {
+  display: flex;
+  flex-direction: column;
+}
+
+.description-tab {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+/* ── Info fields (shared) ── */
 .info-field {
  display: flex;
  flex-direction: column;
@@ -235,6 +502,87 @@ onMounted(() => {
  border-color: rgba(226, 232, 240, 0.1);
 }

+/* ── Description states ── */
+.description-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px 16px;
+  color: var(--fg-color, #fff);
+  opacity: 0.5;
+  font-size: 12px;
+  min-height: 0;
+  flex-shrink: 0;
+}
+
+.description-state.error {
+  opacity: 0.7;
+  color: #f87171;
+}
+
+/* ── Description content ── */
+.description-content {
+  min-height: 0;
+}
+
+.description-section {
+  margin-bottom: 14px;
+}
+
+.description-section:last-child {
+  margin-bottom: 0;
+}
+
+.description-text {
+  padding: 8px 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--fg-color, #fff);
+  opacity: 0.85;
+  word-break: break-word;
+}
+
+.description-text :deep(p) {
+  margin: 0 0 8px 0;
+}
+
+.description-text :deep(p:last-child) {
+  margin-bottom: 0;
+}
+
+.description-text :deep(a) {
+  color: rgba(66, 153, 225, 0.9);
+}
+
+.description-text :deep(ul),
+.description-text :deep(ol) {
+  padding-left: 20px;
+  margin: 4px 0;
+}
+
+.description-text :deep(h1),
+.description-text :deep(h2),
+.description-text :deep(h3) {
+  font-size: 13px;
+  margin: 10px 0 4px 0;
+  font-weight: 600;
+  opacity: 0.95;
+}
+
+.description-text :deep(code) {
+  background: rgba(255, 255, 255, 0.08);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 11px;
+}
+
+.description-text :deep(img) {
+  max-width: 100%;
+  border-radius: 4px;
+}
+
+/* ── Placeholder (shared) ── */
 .placeholder {
  font-style: italic;
  color: rgba(226, 232, 240, 0.5);
@@ -242,4 +590,14 @@ onMounted(() => {
  padding: 16px 0;
  font-size: 12px;
 }
+
+/* ── Spinner (Font Awesome) ── */
+.fa-spinner {
+  animation: fa-spin 1s linear infinite;
+}
+
+@keyframes fa-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
 </style>
--- a/vue-widgets/src/main.ts
+++ b/vue-widgets/src/main.ts
@@ -656,7 +656,7 @@ function createLoraInfoWidget(node: any) {

  forwardMiddleMouseToCanvas(container)

-  let internalValue: { name?: string; notes?: string; filePath?: string } | undefined
+  let internalValue: { name?: string; notes?: string; filePath?: string; activeTab?: string } | undefined

  const widget = node.addDOMWidget(
    'lora_info_display',
@@ -666,13 +666,13 @@ function createLoraInfoWidget(node: any) {
      getValue() {
        return internalValue
      },
-      setValue(v: { name?: string; notes?: string; filePath?: string }) {
+      setValue(v: { name?: string; notes?: string; filePath?: string; activeTab?: string }) {
        internalValue = v
        if (typeof widget.onSetValue === 'function') {
          widget.onSetValue(v)
        }
      },
-      serialize: false, // Display-only widget
+      serialize: true,
      getMinHeight() {
        return LORA_INFO_WIDGET_MIN_HEIGHT
      }
@@ -684,6 +684,7 @@ function createLoraInfoWidget(node: any) {
    node,
    api,
    app,
+    isVueMode: typeof LiteGraph !== 'undefined' && LiteGraph.vueNodesMode,
  })

  vueApp.use(PrimeVue, {