CRBC-MaaS-Platform-Project
/
LQAgentPlatform


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
							<!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">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🔍 RAG管道测试可视化工具</h1>
            <p class="subtitle">RAG链路各环节输入输出数据流转调试工具</p>
        </header>

        <!-- RAG测试输入区域 -->
        <section class="rag-input-section">
            <h2>🚀 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="ragInput" placeholder="输入测试文本，点击执行RAG检索...&#10;&#10;示例：主要部件说明&#10;1、主梁总成&#10;主梁总成由主梁和导梁构成。主梁单节长12m,共7节,每节重10.87t..."></textarea>
            </div>
            <div class="action-buttons">
                <button class="btn btn-primary" id="runRagBtn" onclick="runRAG()">
                    <span class="btn-icon">▶</span> 执行RAG检索
                </button>
                <button class="btn btn-secondary" onclick="loadSampleData()">加载历史数据</button>
                <button class="btn btn-secondary" onclick="clearData()">清空</button>
            </div>
            <div class="loading-overlay" id="loadingOverlay" style="display: none;">
                <div class="loading-spinner"></div>
                <p>正在执行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>
    </div>

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