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