diff --git a/themes/momentry/page-api-demo-query.php b/themes/momentry/page-api-demo-query.php
index 05cd6e3..78f26df 100644
--- a/themes/momentry/page-api-demo-query.php
+++ b/themes/momentry/page-api-demo-query.php
@@ -473,15 +473,24 @@ async function semanticSearch() {
const textAttr = (i.text_content || '').replace(/"/g, '"').replace(//g, '>');
const startTime = i.start_time || (i.start_frame && i.fps ? i.start_frame / i.fps : 0);
const endTime = i.end_time || (i.end_frame && i.fps ? i.end_frame / i.fps : startTime + 10);
+ const thumbFrame = Math.round(startTime * 24);
return `
-
${i.name} (${i.source || 'unknown'})
-
${startTime.toFixed(1)}s - ${endTime.toFixed(1)}s${i.chunk_id ? ` | ${i.chunk_id}` : ''}
-
${i.text_content || ''}
-
+
+
![]()
+
+
${i.name} (${i.source || 'unknown'})
+
${startTime.toFixed(1)}s - ${endTime.toFixed(1)}s${i.chunk_id ? ` | ${i.chunk_id}` : ''}
+
${i.text_content || ''}
+
+
+
找到 ${data.total || 0} 個身份相關片段
${resultsHtml || '沒有結果
'}`;
@@ -498,23 +507,72 @@ async function semanticSearch() {
const textAttr = (r.text || '').replace(/"/g, '"').replace(//g, '>');
const startTime = r.start_time || (r.start_frame && r.fps ? r.start_frame / r.fps : 0);
const endTime = r.end_time || (r.end_frame && r.fps ? r.end_frame / r.fps : startTime + 10);
+ const thumbFrame = Math.round(startTime * 24);
return `
-
${startTime.toFixed(1)}s - ${endTime.toFixed(1)}s${r.chunk_id ? ` | ${r.chunk_id}` : ''}
-
${r.text || ''}
-
相似度: ${(r.score * 100).toFixed(1)}%
-
+
+
![]()
+
+
${startTime.toFixed(1)}s - ${endTime.toFixed(1)}s${r.chunk_id ? ` | ${r.chunk_id}` : ''}
+
${r.text || ''}
+
相似度: ${(r.score * 100).toFixed(1)}%
+
+
+
找到 ${data.total || 0} 個片段
${resultsHtml || '沒有結果
'}`;
}
+ loadSearchThumbnails();
} catch (e) {
resultEl.innerHTML = '錯誤: ' + e.message + '
';
}
}
+
+function loadSearchThumbnails(){
+ const imgs = Array.from(document.querySelectorAll('img.search-thumb[data-src]'));
+ const MAX = 4;
+ let queue = [];
+ let inflight = 0;
+
+ function next(){
+ while (inflight < MAX && queue.length) {
+ const img = queue.shift();
+ inflight++;
+ img.onload = function(){ inflight--; next(); };
+ img.onerror = function(){ inflight--; next(); };
+ img.src = img.dataset.src;
+ }
+ }
+
+ if ('IntersectionObserver' in window) {
+ const obs = new IntersectionObserver(function(entries){
+ entries.forEach(function(e){
+ if (!e.isIntersecting) return;
+ var img = e.target;
+ if (img.dataset.loaded) return;
+ img.dataset.loaded = '1';
+ queue.push(img);
+ obs.unobserve(img);
+ next();
+ });
+ }, { rootMargin: '200px 0px' });
+ imgs.forEach(function(img){ obs.observe(img); });
+ } else {
+ imgs.forEach(function(img){
+ if (img.dataset.loaded) return;
+ img.dataset.loaded = '1';
+ queue.push(img);
+ });
+ next();
+ }
+}