From a934ec57e4526d8bd8b2a6b9ba0f0cc7d0d225c4 Mon Sep 17 00:00:00 2001
From: Momentry Studio <admin@momentry.local>
Date: Tue, 27 Oct 2026 06:38:22 +0800
Subject: [PATCH] feat: show multilingual VLM summary and tags in scene detail
 modal

- Added VLM description sections (localized + English) to text detail modal
- Added VLM tags display with both local and English labels
- Styled with language labels, tag badges, and proper spacing
---
 src/views/SearchView.vue | 70 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)

diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue
index 3d26f4f..5180300 100644
--- a/src/views/SearchView.vue
+++ b/src/views/SearchView.vue
@@ -270,6 +270,27 @@
             <span>F{{ textDetailModal.startFrame }}–{{ textDetailModal.endFrame }}</span>
             <span>({{ formatTime(textDetailModal.startTime) }}–{{ formatTime(textDetailModal.endTime) }})</span>
           </div>
+          <!-- VLM Summary - Multilingual -->
+          <div v-if="textDetailModal.vlm_description_en || textDetailModal.vlm_description_localized" class="text-detail-vlm">
+            <div v-if="textDetailModal.vlm_description_localized" class="vlm-section">
+              <div class="vlm-lang-label">{{ textDetailModal.output_lang || 'JA' }}</div>
+              <div class="vlm-text">{{ textDetailModal.vlm_description_localized }}</div>
+            </div>
+            <div v-if="textDetailModal.vlm_description_en" class="vlm-section">
+              <div class="vlm-lang-label">EN</div>
+              <div class="vlm-text">{{ textDetailModal.vlm_description_en }}</div>
+            </div>
+          </div>
+          <!-- VLM Tags -->
+          <div v-if="textDetailModal.vlm_tags && textDetailModal.vlm_tags.length" class="text-detail-tags">
+            <div class="vlm-lang-label">Tags</div>
+            <div class="vlm-tags-list">
+              <span v-for="(tag, i) in textDetailModal.vlm_tags" :key="i" class="vlm-tag">
+                <span class="vlm-tag-local">{{ tag.local || tag.en }}</span>
+                <span v-if="tag.local && tag.en" class="vlm-tag-en">{{ tag.en }}</span>
+              </span>
+            </div>
+          </div>
           <div class="text-detail-content" v-html="highlightMatch(textDetailModal.text, textDetailModal.query)"></div>
         </div>
         <div class="text-detail-actions">
@@ -434,6 +455,11 @@ function showTextDetail(r: any) {
     query: r.search_query || '',
     _traces: r._traces || null,
     _isPerson: r._isPerson || false,
+    // VLM multilingual data
+    vlm_description_en: r.vlm_description_en || r.vlm_description || '',
+    vlm_description_localized: r.vlm_description_localized || '',
+    vlm_tags: r.vlm_tags || [],
+    output_lang: r.output_lang || 'JA',
   }
 }
 
@@ -2583,6 +2609,50 @@ mark.highlight {
   color: var(--text-secondary);
   margin-bottom: 12px;
 }
+.text-detail-vlm {
+  margin-bottom: 16px;
+}
+.vlm-section {
+  margin-bottom: 12px;
+}
+.vlm-lang-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--primary-color);
+  margin-bottom: 4px;
+  text-transform: uppercase;
+}
+.vlm-text {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-primary);
+}
+.text-detail-tags {
+  margin-bottom: 16px;
+}
+.vlm-tags-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+.vlm-tag {
+  display: inline-flex;
+  flex-direction: column;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: var(--border-light);
+  font-size: 11px;
+}
+.vlm-tag-local {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+.vlm-tag-en {
+  font-size: 10px;
+  color: var(--text-secondary);
+  margin-top: 2px;
+}
 .text-detail-content {
   font-size: 14px;
   line-height: 1.6;