204 lines
11 KiB
HTML
204 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>IOV Data Analysis Agent</title>
|
||
<link rel="stylesheet" href="/static/clean_style.css">
|
||
|
||
<!-- Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
|
||
rel="stylesheet">
|
||
|
||
<!-- Icons -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
|
||
<!-- Markdown -->
|
||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="app-container">
|
||
<!-- Sidebar -->
|
||
<aside class="sidebar">
|
||
<div class="brand">
|
||
<i class="fa-solid fa-cube"></i>
|
||
<span>IOV Agent</span>
|
||
</div>
|
||
|
||
<nav class="nav-menu">
|
||
<button class="nav-item active" onclick="switchView('analysis')">
|
||
<i class="fa-solid fa-chart-line"></i> Analysis
|
||
</button>
|
||
|
||
<div class="nav-divider"></div>
|
||
<div class="nav-section-title">History</div>
|
||
<div id="historyList" class="history-list">
|
||
<!-- History items loaded via JS -->
|
||
<div style="padding:0.5rem; font-size:0.8rem; color:#9CA3AF;">Loading...</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="status-bar">
|
||
<div id="statusDot" class="status-dot"></div>
|
||
<span id="statusText">Ready</span>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main Content -->
|
||
<main class="main-content">
|
||
<header class="header">
|
||
<h2 id="pageTitle">Analysis Dashboard</h2>
|
||
</header>
|
||
|
||
<div class="content-area">
|
||
<!-- VIEW: ANALYSIS -->
|
||
<div id="viewAnalysis" class="section active">
|
||
<div class="analysis-grid">
|
||
|
||
<!-- Configuration Panel -->
|
||
<div class="panel">
|
||
<div class="panel-title">
|
||
<span>Configuration</span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">1. Data Upload</label>
|
||
<div id="uploadZone" class="upload-area">
|
||
<i class="fa-solid fa-cloud-arrow-up upload-icon"></i>
|
||
<p>Click or Drag CSV/Excel Files</p>
|
||
<div id="fileList" class="file-list"></div>
|
||
</div>
|
||
<input type="file" id="fileInput" multiple accept=".csv,.xlsx,.xls" hidden>
|
||
</div>
|
||
|
||
<div class="form-group" id="templateSelectorGroup">
|
||
<label class="form-label">2. Analysis Template</label>
|
||
<div id="templateSelector" class="template-cards">
|
||
<div class="template-card selected" data-template="" onclick="selectTemplate(this, '')">
|
||
<div class="template-card-title">No Template</div>
|
||
<div class="template-card-desc">Free Analysis</div>
|
||
</div>
|
||
<!-- Dynamic template cards loaded via JS -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">3. Requirement</label>
|
||
<textarea id="requirementInput" class="form-textarea"
|
||
placeholder="Describe what you want to analyze..."></textarea>
|
||
</div>
|
||
|
||
<button id="startBtn" class="btn btn-primary" style="margin-top: 1rem; width: 100%;">
|
||
<i class="fa-solid fa-play"></i> Start Analysis
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Output Panel -->
|
||
<div class="panel" style="overflow:hidden; display:flex; flex-direction:column;">
|
||
<div class="panel-title" style="margin-bottom:0.5rem;">
|
||
<span>Output</span>
|
||
<div class="tabs">
|
||
<div class="tab active" onclick="switchTab('execution')">执行过程</div>
|
||
<div class="tab" onclick="switchTab('datafiles')">数据文件</div>
|
||
<div class="tab" onclick="switchTab('report')">Report</div>
|
||
</div>
|
||
<button id="downloadScriptBtn" class="btn btn-sm btn-secondary hidden"
|
||
onclick="downloadScript()" style="margin-left:auto;">
|
||
<i class="fa-solid fa-code"></i> Script
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Progress Bar -->
|
||
<div id="progressBarContainer" class="progress-bar-container hidden">
|
||
<div class="progress-bar-info">
|
||
<span id="progressLabel" class="progress-label">Round 0/0</span>
|
||
<span id="progressPercent" class="progress-percent">0%</span>
|
||
</div>
|
||
<div class="progress-bar-track">
|
||
<div id="progressBarFill" class="progress-bar-fill" style="width: 0%"></div>
|
||
</div>
|
||
<div id="progressMessage" class="progress-message"></div>
|
||
</div>
|
||
|
||
<div class="output-container" id="outputContainer">
|
||
<!-- Execution Process Tab -->
|
||
<div id="executionTab" class="tab-content active" style="height:100%; overflow-y:auto;">
|
||
<div id="roundCardsWrapper" class="round-cards-wrapper">
|
||
<div class="empty-state" id="executionEmptyState">
|
||
<p>Waiting to start...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Data Files Tab -->
|
||
<div id="datafilesTab" class="tab-content hidden" style="height:100%; overflow-y:auto;">
|
||
<div id="fileCardsGrid" class="file-cards-grid"></div>
|
||
<div id="dataPreviewPanel" class="data-preview-panel hidden">
|
||
<div class="data-preview-header">
|
||
<span id="previewFileName"></span>
|
||
<button class="btn btn-sm btn-secondary" onclick="closePreview()"><i class="fa-solid fa-xmark"></i></button>
|
||
</div>
|
||
<div id="previewTableContainer"></div>
|
||
</div>
|
||
<div class="empty-state" id="datafilesEmptyState">
|
||
<p>No data files yet.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Report Tab -->
|
||
<div id="reportTab" class="tab-content hidden" style="height:100%; overflow-y:auto;">
|
||
<div id="reportContainer" class="report-content markdown-body">
|
||
<div class="empty-state">
|
||
<p>Report will appear here after analysis.</p>
|
||
</div>
|
||
</div>
|
||
<div id="followUpSection" class="hidden"
|
||
style="margin-top:2rem; border-top:1px solid var(--border-color); padding-top:1rem;">
|
||
<div class="form-group">
|
||
<label class="form-label">Follow-up Analysis</label>
|
||
<div style="display:flex; gap:0.5rem;">
|
||
<input type="text" id="followUpInput" class="form-input"
|
||
placeholder="Ask a follow-up question...">
|
||
<button class="btn btn-primary btn-sm"
|
||
onclick="sendFollowUp()">Send</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:1rem; text-align:right">
|
||
<button id="exportBtn" class="btn btn-secondary btn-sm"
|
||
onclick="triggerExport()">
|
||
<i class="fa-solid fa-download"></i> Export ZIP
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Supporting Data Modal -->
|
||
<div class="supporting-data-modal hidden" id="supportingDataModal">
|
||
<div class="supporting-data-content">
|
||
<div class="supporting-data-header">
|
||
<span>支撑数据</span>
|
||
<button onclick="closeSupportingData()">×</button>
|
||
</div>
|
||
<div class="supporting-data-body" id="supportingDataBody">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="/static/script.js"></script>
|
||
</body>
|
||
|
||
</html> |