调试工具展示优化

tangwang
1 parent 6c35aff8
Showing 3 changed files with 68 additions and 34 deletions Show diff stats
config/config.yaml
frontend/static/css/style.css
frontend/static/js/app.js
@@ -219,8 +219,8 @@ query_config:
   knn_text_k_long: 300
   knn_text_num_candidates_long: 720
-  knn_image_k: 300
-  knn_image_num_candidates: 720
+  knn_image_k: 3000
+  knn_image_num_candidates: 7200
 # Function Score配置（ES层打分规则）
 function_score:
@@ -350,6 +350,25 @@ body {
     flex-shrink: 0;
 }
+/* Per-result multilingual debug (title/brief/vendor) under image, price, title */
+.product-main-multilingual {
+    margin-top: 8px;
+    font-family: Menlo, Consolas, "Courier New", monospace;
+    font-size: 11px;
+    color: #555;
+    width: 100%;
+}
+
+.product-main-multilingual .debug-details {
+    margin-top: 6px;
+}
+
+.product-main-multilingual .debug-json-pre {
+    max-height: 180px;
+    font-size: 10px;
+    padding: 8px;
+}
+
 .product-debug {
     flex: 1;
     font-family: Menlo, Consolas, "Courier New", monospace;
@@ -472,29 +491,34 @@ body {
     font-size: 11px;
 }
+/* Stage cards + query context: one key:value per line, no per-field boxes */
 .debug-metrics {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 1px 0;
+    margin-top: 6px;
+    font-size: 11px;
+    line-height: 1.4;
 }
-.debug-metric {
-    padding: 8px 9px;
-    background: #f7f7f7;
-    border-radius: 6px;
-    border: 1px solid #efefef;
+.debug-metric-line {
+    display: block;
+    word-break: break-word;
 }
-.debug-metric-label {
-    font-size: 11px;
-    color: #777;
-    margin-bottom: 2px;
+.debug-metric-k {
+    color: #666;
+    font-weight: 500;
 }
-.debug-metric-value {
-    color: #222;
+.debug-metric-sep {
+    color: #aaa;
+    margin: 0 3px 0 1px;
+}
+
+.debug-metric-v {
+    color: #111;
     font-weight: 600;
-    word-break: break-word;
 }
 .debug-score-pills {
@@ -436,7 +436,7 @@ function displayResults(data) {
                     <div class="product-title">
                         ${escapeHtml(title)}
                     </div>
-                    
+                    ${debug ? buildMultilingualFieldsHtml(debug) : ''}
                     <div class="product-meta">
                         ${category ? escapeHtml(category) : ''}
                         ${vendor ? ' | ' + escapeHtml(vendor) : ''}
@@ -458,16 +458,17 @@ function formatDebugNumber(value, digits = 4) {
 }
 function renderMetricList(items) {
-    const rows = items
+    const lines = items
         .filter((item) => item && item.value !== undefined && item.value !== null && item.value !== '')
-        .map((item) => `
-            <div class="debug-metric">
-                <div class="debug-metric-label">${escapeHtml(item.label)}</div>
-                <div class="debug-metric-value">${escapeHtml(String(item.value))}</div>
+        .map(
+            (item) => `
+            <div class="debug-metric-line">
+                <span class="debug-metric-k">${escapeHtml(item.label)}</span><span class="debug-metric-sep">:</span><span class="debug-metric-v">${escapeHtml(String(item.value))}</span>
             </div>
-        `)
+        `
+        )
         .join('');
-    return rows ? `<div class="debug-metrics">${rows}</div>` : '';
+    return lines ? `<div class="debug-metrics">${lines}</div>` : '';
 }
 function renderScorePills(items) {
@@ -495,6 +496,21 @@ function renderJsonDetails(title, payload, open = false) {
     `;
 }
+/** Multilingual title/brief/vendor from per-result debug; shown under image/price/title on the left. */
+function buildMultilingualFieldsHtml(debug) {
+    if (!debug || typeof debug !== 'object') {
+        return '';
+    }
+    const titlePayload = {};
+    if (debug.title_multilingual) titlePayload.title = debug.title_multilingual;
+    if (debug.brief_multilingual) titlePayload.brief = debug.brief_multilingual;
+    if (debug.vendor_multilingual) titlePayload.vendor = debug.vendor_multilingual;
+    if (Object.keys(titlePayload).length === 0) {
+        return '';
+    }
+    return `<div class="product-main-multilingual">${renderJsonDetails('Multilingual Fields', titlePayload, true)}</div>`;
+}
+
 function buildProductDebugHtml({ debug, result, spuId, tenantId }) {
     const resultJson = customStringify(result);
     const rawUrl = `${API_BASE_URL}/search/es-doc/${encodeURIComponent(spuId)}?tenant_id=${encodeURIComponent(tenantId)}`;
@@ -527,7 +543,7 @@ function buildProductDebugHtml({ debug, result, spuId, tenantId }) {
                 { label: 'rank', value: esStage.rank ?? debug.initial_rank ?? 'N/A' },
                 { label: 'es_score', value: formatDebugNumber(esStage.score ?? debug.es_score) },
                 { label: 'es_norm', value: formatDebugNumber(esStage.normalized_score ?? debug.es_score_normalized) },
-            ], renderJsonDetails('Matched Queries', esStage.matched_queries ?? debug.matched_queries, false))}
+            ], renderJsonDetails('Matched Queries', esStage.matched_queries ?? debug.matched_queries, true))}
             ${buildStageCard('Coarse Rank', 'Text + vector fusion', [
                 { label: 'rank', value: coarseStage.rank ?? 'N/A' },
                 { label: 'rank_change', value: coarseStage.rank_change ?? 'N/A' },
@@ -542,7 +558,7 @@ function buildProductDebugHtml({ debug, result, spuId, tenantId }) {
                 { label: 'image_knn', value: formatDebugNumber(coarseStage.signals?.image_knn_score ?? debug.image_knn_score) },
                 { label: 'text_factor', value: formatDebugNumber(coarseStage.text_factor ?? debug.coarse_text_factor) },
                 { label: 'knn_factor', value: formatDebugNumber(coarseStage.knn_factor ?? debug.coarse_knn_factor) },
-            ], renderJsonDetails('Coarse Signals', coarseStage.signals, false))}
+            ], renderJsonDetails('Coarse Signals', coarseStage.signals, true))}
             ${buildStageCard('Fine Rank', 'Lightweight reranker output', [
                 { label: 'rank', value: fineStage.rank ?? 'N/A' },
                 { label: 'rank_change', value: fineStage.rank_change ?? 'N/A' },
@@ -550,7 +566,7 @@ function buildProductDebugHtml({ debug, result, spuId, tenantId }) {
                 { label: 'fine_score', value: formatDebugNumber(fineStage.fine_score ?? debug.fine_score) },
                 { label: 'text_score', value: formatDebugNumber(fineStage.text_score ?? debug.text_score) },
                 { label: 'knn_score', value: formatDebugNumber(fineStage.knn_score ?? debug.knn_score) },
-            ], `${renderJsonDetails('Fine Fusion', fineStage.fusion_summary || debug.fusion_summary || fineStage.fusion_factors, false)}${renderJsonDetails('Fine Input', fineStage.rerank_input ?? debug.rerank_input, false)}`)}
+            ], `${renderJsonDetails('Fine Fusion', fineStage.fusion_summary || debug.fusion_summary || fineStage.fusion_factors, true)}${renderJsonDetails('Fine Input', fineStage.rerank_input ?? debug.rerank_input, true)}`)}
             ${buildStageCard('Final Rerank', 'Heavy reranker + final fusion', [
                 { label: 'rank', value: rerankStage.rank ?? finalPageStage.rank ?? debug.final_rank ?? 'N/A' },
                 { label: 'rank_change', value: rerankStage.rank_change ?? finalPageStage.rank_change ?? 'N/A' },
@@ -568,11 +584,6 @@ function buildProductDebugHtml({ debug, result, spuId, tenantId }) {
         </div>
     `;
-    const titlePayload = {};
-    if (debug.title_multilingual) titlePayload.title = debug.title_multilingual;
-    if (debug.brief_multilingual) titlePayload.brief = debug.brief_multilingual;
-    if (debug.vendor_multilingual) titlePayload.vendor = debug.vendor_multilingual;
-
     return `
         <div class="product-debug">
             <div class="product-debug-title">Ranking Funnel</div>
@@ -580,7 +591,6 @@ function buildProductDebugHtml({ debug, result, spuId, tenantId }) {
             ${stageScores}
             ${stageGrid}
             ${renderJsonDetails('Selected SKU', debug.style_intent_sku, true)}
-            ${renderJsonDetails('Multilingual Fields', titlePayload, false)}
             <div class="product-debug-actions">
                 <button type="button" class="product-debug-inline-result-btn"
                     data-action="toggle-result-inline-doc"