CRBC-MaaS-Platform-Project
/
LQAgentPlatform


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
							<!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="professional" onclick="switchFunction('professional')">
                🎯 专业性审查测试
            </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>

            <!-- 动作按钮 -->
            <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>

        <!-- 专业性审查结果展示 -->
        <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>
    </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>