CRBC-MaaS-Platform-Project
/
LQAgentPlatform


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAG管道测试可视化工具</title>
    <link rel="stylesheet" href="styles.css">
    <!-- Markdown渲染库 -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <!-- LaTeX公式渲染库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🔍 RAG管道测试可视化工具</h1>
            <p class="subtitle">RAG链路各环节输入输出数据流转调试工具 + 专业性审查完整测试</p>
        </header>

        <!-- 功能切换Tab -->
        <section class="function-tabs">
            <button class="function-tab active" data-function="rag" onclick="switchFunction('rag')">
                🔍 RAG召回测试
            </button>
            <button class="function-tab" data-function="native_rag" onclick="window.open('native_rag.html','_blank')">
                ⚡ Native RAG
            </button>
            <button class="function-tab" data-function="professional" onclick="switchFunction('professional')">
                🎯 专业性审查测试
            </button>
            <button class="function-tab" data-function="debug" onclick="switchFunction('debug')">
                🔬 环节调试
            </button>
        </section>

        <!-- 统一的测试输入区域 -->
        <section class="test-input-section">
            <h2 id="sectionTitle">🚀 RAG链路测试</h2>
            <div class="server-status" id="serverStatus">
                <span class="status-dot offline"></span>
                <span class="status-text">服务未连接</span>
            </div>
            <div class="input-area">
                <textarea id="testInput" placeholder="输入测试文本，点击执行RAG检索...&#10;&#10;示例：主要部件说明&#10;1、主梁总成&#10;主梁总成由主梁和导梁构成。主梁单节长12m,共7节,每节重10.87t..."></textarea>
            </div>

            <!-- 专业性审查类型选择器 -->
            <div class="review-type-selector" id="reviewTypeSelector" style="display: none;">
                <label>审查类型：</label>
                <label class="radio-label">
                    <input type="radio" name="checkType" value="both" checked><span>全部审查</span>
                </label>
                <label class="radio-label">
                    <input type="radio" name="checkType" value="non_parameter"><span>非参数审查</span>
                </label>
                <label class="radio-label">
                    <input type="radio" name="checkType" value="parameter"><span>参数审查</span>
                </label>
            </div>

            <!-- Native RAG已移至独立页面 native_rag.html -->

            <!-- 动作按钮 -->
            <div class="action-buttons">
                <!-- RAG召回按钮 -->
                <button class="btn btn-primary" id="runRagBtn" onclick="runRAG()">
                    <span class="btn-icon">▶</span> 执行RAG检索
                </button>

                <!-- 专业性审查按钮 -->
                <button class="btn btn-success" id="runProfessionalBtn" onclick="runProfessionalReview()" style="display: none;">
                    <span class="btn-icon">▶</span> 执行专业性审查
                </button>

                <button class="btn btn-secondary" onclick="loadSampleData()" id="loadSampleBtn">加载历史数据</button>
                <button class="btn btn-secondary" onclick="clearAllData()">清空</button>
            </div>

            <div class="loading-overlay" id="loadingOverlay" style="display: none;">
                <div class="loading-spinner"></div>
                <p id="loadingText">正在执行RAG检索...</p>
            </div>
        </section>

        <!-- 文件上传区域 -->
        <section class="upload-section">
            <div class="upload-area" id="uploadArea">
                <div class="upload-icon">📁</div>
                <p>或拖拽JSON文件到此处查看历史数据</p>
                <input type="file" id="fileInput" accept=".json" hidden>
            </div>
        </section>

        <!-- 管道概览 -->
        <section class="pipeline-overview" id="pipelineOverview" style="display: none;">
            <h2>📊 管道概览</h2>
            <div class="overview-cards">
                <div class="overview-card">
                    <div class="card-icon">⏱️</div>
                    <div class="card-content">
                        <span class="card-label">执行时间</span>
                        <span class="card-value" id="totalTime">-</span>
                    </div>
                </div>
                <div class="overview-card">
                    <div class="card-icon">📝</div>
                    <div class="card-content">
                        <span class="card-label">处理阶段</span>
                        <span class="card-value" id="stageCount">-</span>
                    </div>
                </div>
                <div class="overview-card">
                    <div class="card-icon">✅</div>
                    <div class="card-content">
                        <span class="card-label">执行状态</span>
                        <span class="card-value" id="execStatus">-</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 管道流程图 -->
        <section class="pipeline-flow" id="pipelineFlow" style="display: none;">
            <h2>🔄 管道流程</h2>
            <div class="flow-container" id="flowContainer">
                <!-- 动态生成流程节点 -->
            </div>
        </section>

        <!-- 详细数据面板 -->
        <section class="detail-panel" id="detailPanel" style="display: none;">
            <h2>📋 详细数据</h2>
            <div class="tabs">
                <button class="tab-btn active" data-tab="input">输入数据</button>
                <button class="tab-btn" data-tab="output">输出数据</button>
                <button class="tab-btn" data-tab="raw">原始JSON</button>
            </div>
            <div class="tab-content">
                <div class="tab-pane active" id="inputPane">
                    <pre class="json-viewer" id="inputViewer"></pre>
                </div>
                <div class="tab-pane" id="outputPane">
                    <pre class="json-viewer" id="outputViewer"></pre>
                </div>
                <div class="tab-pane" id="rawPane">
                    <pre class="json-viewer" id="rawViewer"></pre>
                </div>
            </div>
        </section>

        <!-- 各阶段详情 -->
        <section class="stages-detail" id="stagesDetail" style="display: none;">
            <h2>🔬 各阶段详情</h2>
            <div class="accordion" id="stagesAccordion">
                <!-- 动态生成各阶段详情 -->
            </div>
        </section>

        <!-- Native RAG已移至独立页面 native_rag.html -->

        <!-- 专业性审查结果展示 -->
        <section class="professional-results" id="professionalResults" style="display: none;">
            <h2>📊 专业性审查结果</h2>

            <!-- RAG召回摘要 -->
            <div class="result-section">
                <h3>🔍 RAG召回摘要</h3>
                <div class="rag-summary" id="ragSummary">
                    <!-- 动态生成 -->
                </div>
            </div>

            <!-- 审查结果列表 -->
            <div class="result-section">
                <h3>📋 审查结果详情</h3>
                <div class="review-results-list" id="reviewResultsList">
                    <!-- 动态生成 -->
                </div>
            </div>
        </section>

        <!-- 环节调试 Section -->
        <section class="debug-section" id="debugSection" style="display: none;">
            <h2>🔬 RAG环节调试</h2>
            <div class="server-status" id="debugServerStatus">
                <span class="status-dot offline"></span>
                <span class="status-text">服务未连接</span>
            </div>

            <!-- 环节选择器 -->
            <div class="step-selector">
                <span class="step-selector-label">选择环节：</span>
                <div class="step-buttons" id="stepButtons">
                    <button class="step-btn active" data-step="query_extract" onclick="selectDebugStep('query_extract')">
                        <span class="step-num">1</span>
                        <span class="step-name">查询提取</span>
                        <span class="step-desc">query_extract</span>
                    </button>
                    <span class="step-arrow">→</span>
                    <button class="step-btn" data-step="entity_enhance" onclick="selectDebugStep('entity_enhance')">
                        <span class="step-num">2</span>
                        <span class="step-name">实体增强</span>
                        <span class="step-desc">entity_enhance</span>
                    </button>
                    <span class="step-arrow">→</span>
                    <button class="step-btn" data-step="multi_stage_recall" onclick="selectDebugStep('multi_stage_recall')">
                        <span class="step-num">3</span>
                        <span class="step-name">多阶段召回</span>
                        <span class="step-desc">multi_stage_recall</span>
                    </button>
                </div>
                <div class="step-buttons second-row" id="stepButtonsRow2">
                    <button class="step-btn" data-step="hybrid_search" onclick="selectDebugStep('hybrid_search')">
                        <span class="step-num">4</span>
                        <span class="step-name">混合检索</span>
                        <span class="step-desc">hybrid_search</span>
                    </button>
                    <span class="step-arrow">→</span>
                    <button class="step-btn" data-step="parent_doc_enhance" onclick="selectDebugStep('parent_doc_enhance')">
                        <span class="step-num">5</span>
                        <span class="step-name">父文档增强</span>
                        <span class="step-desc">parent_doc_enhance</span>
                    </button>
                    <span class="step-arrow">→</span>
                    <button class="step-btn" data-step="extract_results" onclick="selectDebugStep('extract_results')">
                        <span class="step-num">6</span>
                        <span class="step-name">结果提取</span>
                        <span class="step-desc">extract_results</span>
                    </button>
                </div>
            </div>

            <!-- 当前环节提示 -->
            <div class="current-step-info" id="currentStepInfo">
                <span class="step-info-icon">📌</span>
                <span class="step-info-text">当前环节: <strong>查询提取</strong> — 从输入内容中提取查询实体和关键词</span>
            </div>

            <!-- 输入区域 -->
            <div class="debug-input-area">
                <div class="input-area">
                    <textarea id="debugInput" placeholder="输入测试文本...&#10;&#10;示例：主要部件说明&#10;1、主梁总成&#10;主梁总成由主梁和导梁构成。主梁单节长12m,共7节,每节重10.87t..."></textarea>
                </div>

                <!-- 参数面板 -->
                <div class="params-panel">
                    <div class="params-header" onclick="toggleParamsPanel()">
                        <span>⚙️ 参数配置</span>
                        <span class="params-toggle" id="paramsToggleIcon">▼</span>
                    </div>
                    <div class="params-body" id="paramsBody" style="display: none;">
                        <div class="param-row">
                            <label>collection_name</label>
                            <input type="text" id="paramCollectionName" value="rag_children_hybrid" placeholder="集合名称">
                        </div>
                        <div class="param-row">
                            <label>top_k</label>
                            <input type="number" id="paramTopK" value="10" min="1" max="100">
                        </div>
                        <div class="param-row">
                            <label>hybrid_top_k</label>
                            <input type="number" id="paramHybridTopK" value="50" min="1" max="200">
                        </div>
                        <div class="param-row">
                            <label>score_threshold</label>
                            <input type="number" id="paramScoreThreshold" value="0.5" min="0" max="1" step="0.05">
                        </div>
                        <div class="param-row">
                            <label>dense_weight</label>
                            <input type="number" id="paramDenseWeight" value="0.7" min="0" max="1" step="0.1">
                        </div>
                        <div class="param-row">
                            <label>max_parents_per_pair</label>
                            <input type="number" id="paramMaxParents" value="3" min="1" max="10">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <button class="btn btn-primary" id="runDebugStepBtn" onclick="runDebugStep()">
                    <span class="btn-icon">▶</span> 执行当前环节
                </button>
                <button class="btn btn-success" id="runDebugChainBtn" onclick="runDebugChain()">
                    <span class="btn-icon">🔗</span> 链式执行全部
                </button>
                <button class="btn btn-secondary" onclick="clearDebugResult()">清空结果</button>
            </div>

            <div class="loading-overlay" id="debugLoadingOverlay" style="display: none;">
                <div class="loading-spinner"></div>
                <p id="debugLoadingText">正在执行...</p>
            </div>

            <!-- 结果展示 -->
            <section class="debug-result-section" id="debugResultSection" style="display: none;">
                <h3>📊 执行结果</h3>

                <!-- 统计卡片 -->
                <div class="overview-cards" id="debugOverviewCards"></div>

                <!-- 链式执行步骤图 -->
                <div class="chain-flow" id="chainFlow" style="display: none;"></div>

                <!-- 输出详情 -->
                <div class="debug-output-area" id="debugOutputArea"></div>
            </section>
        </section>
    </div>

    <!-- 审查依据侧边栏 -->
    <div class="reference-sidebar" id="referenceSidebar">
        <div class="sidebar-header">
            <h3>📚 审查依据</h3>
            <button class="sidebar-close-btn" onclick="closeReferenceSidebar()">✕</button>
        </div>
        <div class="sidebar-content" id="sidebarContent">
            <!-- 动态加载Markdown内容 -->
        </div>
    </div>
    <div class="sidebar-overlay" id="sidebarOverlay" onclick="closeReferenceSidebar()"></div>

    <script src="app.js"></script>
    <script src="professional_review.js"></script>
</body>
</html>