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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user