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
This commit is contained in:
2026-10-27 06:38:22 +08:00
parent 63f8f3562a
commit a934ec57e4

View File

@@ -270,6 +270,27 @@
<span>F{{ textDetailModal.startFrame }}–{{ textDetailModal.endFrame }}</span> <span>F{{ textDetailModal.startFrame }}–{{ textDetailModal.endFrame }}</span>
<span>({{ formatTime(textDetailModal.startTime) }}–{{ formatTime(textDetailModal.endTime) }})</span> <span>({{ formatTime(textDetailModal.startTime) }}–{{ formatTime(textDetailModal.endTime) }})</span>
</div> </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 class="text-detail-content" v-html="highlightMatch(textDetailModal.text, textDetailModal.query)"></div>
</div> </div>
<div class="text-detail-actions"> <div class="text-detail-actions">
@@ -434,6 +455,11 @@ function showTextDetail(r: any) {
query: r.search_query || '', query: r.search_query || '',
_traces: r._traces || null, _traces: r._traces || null,
_isPerson: r._isPerson || false, _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); color: var(--text-secondary);
margin-bottom: 12px; 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 { .text-detail-content {
font-size: 14px; font-size: 14px;
line-height: 1.6; line-height: 1.6;