From 9b956985525d5185a4f0c93fd2811f641bb25b24 Mon Sep 17 00:00:00 2001 From: tangwang Date: Mon, 30 Mar 2026 19:35:43 +0800 Subject: [PATCH] 调试工具展示优化 --- config/config.yaml | 4 ++-- frontend/static/css/style.css | 54 +++++++++++++++++++++++++++++++++++++++--------------- frontend/static/js/app.js | 44 +++++++++++++++++++++++++++----------------- 3 files changed, 68 insertions(+), 34 deletions(-) diff --git a/config/config.yaml b/config/config.yaml index c468a31..7551686 100644 --- a/config/config.yaml +++ b/config/config.yaml @@ -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: diff --git a/frontend/static/css/style.css b/frontend/static/css/style.css index 4e26c5e..b37b938 100644 --- a/frontend/static/css/style.css +++ b/frontend/static/css/style.css @@ -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 { diff --git a/frontend/static/js/app.js b/frontend/static/js/app.js index d0e2b4f..7ead241 100644 --- a/frontend/static/js/app.js +++ b/frontend/static/js/app.js @@ -436,7 +436,7 @@ function displayResults(data) {
${escapeHtml(title)}
- + ${debug ? buildMultilingualFieldsHtml(debug) : ''}
${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) => ` -
-
${escapeHtml(item.label)}
-
${escapeHtml(String(item.value))}
+ .map( + (item) => ` +
+ ${escapeHtml(item.label)}:${escapeHtml(String(item.value))}
- `) + ` + ) .join(''); - return rows ? `
${rows}
` : ''; + return lines ? `
${lines}
` : ''; } 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 `
${renderJsonDetails('Multilingual Fields', titlePayload, true)}
`; +} + 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 }) {
`; - 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 `
Ranking Funnel
@@ -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)}