2026-01-09 16:52:45 +08:00
|
|
|
<!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>
|
2026-01-31 20:27:17 +08:00
|
|
|
<link rel="stylesheet" href="/static/clean_style.css">
|
2026-01-09 16:52:45 +08:00
|
|
|
|
2026-01-31 20:27:17 +08:00
|
|
|
<!-- Fonts -->
|
2026-01-09 16:52:45 +08:00
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
2026-01-22 22:26:04 +08:00
|
|
|
<link
|
2026-01-31 20:27:17 +08:00
|
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
|
2026-01-22 22:26:04 +08:00
|
|
|
rel="stylesheet">
|
2026-01-31 20:27:17 +08:00
|
|
|
|
|
|
|
|
<!-- Icons -->
|
2026-01-09 16:52:45 +08:00
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
2026-01-31 20:27:17 +08:00
|
|
|
|
|
|
|
|
<!-- Markdown -->
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
2026-01-09 16:52:45 +08:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<!-- Sidebar -->
|
|
|
|
|
<aside class="sidebar">
|
|
|
|
|
<div class="brand">
|
2026-01-31 20:27:17 +08:00
|
|
|
<i class="fa-solid fa-cube"></i>
|
|
|
|
|
<span>IOV Agent</span>
|
2026-01-09 16:52:45 +08:00
|
|
|
</div>
|
|
|
|
|
|
2026-01-31 20:27:17 +08:00
|
|
|
<nav class="nav-menu">
|
|
|
|
|
<button class="nav-item active" onclick="switchView('analysis')">
|
2026-01-09 16:52:45 +08:00
|
|
|
<i class="fa-solid fa-chart-line"></i> Analysis
|
|
|
|
|
</button>
|
|
|
|
|
|
2026-01-31 20:27:17 +08:00
|
|
|
<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>
|
2026-01-09 16:52:45 +08:00
|
|
|
</div>
|
2026-01-31 20:27:17 +08:00
|
|
|
</nav>
|
2026-01-09 16:52:45 +08:00
|
|
|
|
2026-01-31 20:27:17 +08:00
|
|
|
<div class="status-bar">
|
|
|
|
|
<div id="statusDot" class="status-dot"></div>
|
|
|
|
|
<span id="statusText">Ready</span>
|
2026-01-09 16:52:45 +08:00
|
|
|
</div>
|
|
|
|
|
</aside>
|
|
|
|
|
|
2026-01-31 20:27:17 +08:00
|
|
|
<!-- Main Content -->
|
2026-01-09 16:52:45 +08:00
|
|
|
<main class="main-content">
|
2026-01-31 20:27:17 +08:00
|
|
|
<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">
|
|
|
|
|
<label class="form-label">2. 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>
|
2026-01-09 16:52:45 +08:00
|
|
|
</div>
|
|
|
|
|
|
2026-01-31 20:27:17 +08:00
|
|
|
<!-- 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('logs')">Live Log</div>
|
|
|
|
|
<div class="tab" onclick="switchTab('report')">Report</div>
|
|
|
|
|
<div class="tab" onclick="switchTab('gallery')">Gallery</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>
|
|
|
|
|
|
|
|
|
|
<div class="output-container" id="outputContainer">
|
|
|
|
|
<!-- Logs Tab -->
|
|
|
|
|
<div id="logsTab" class="tab-content active" style="height:100%; overflow-y:auto;">
|
|
|
|
|
<pre id="logOutput" class="log-content">Waiting to start...</pre>
|
|
|
|
|
</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>
|
|
|
|
|
|
|
|
|
|
<!-- Gallery Tab -->
|
|
|
|
|
<div id="galleryTab" class="tab-content hidden"
|
|
|
|
|
style="height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;">
|
|
|
|
|
<div class="carousel-container">
|
|
|
|
|
<button class="carousel-btn prev" onclick="prevImage()"><i
|
|
|
|
|
class="fa-solid fa-chevron-left"></i></button>
|
|
|
|
|
<div class="carousel-slide" id="carouselSlide">
|
|
|
|
|
<p class="placeholder-text" style="color:var(--text-secondary);">No images
|
|
|
|
|
generated.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<button class="carousel-btn next" onclick="nextImage()"><i
|
|
|
|
|
class="fa-solid fa-chevron-right"></i></button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="image-info" id="imageInfo" style="margin-top:1rem; text-align:center;">
|
|
|
|
|
<!-- Title/Desc -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-09 16:52:45 +08:00
|
|
|
|
2026-01-31 20:27:17 +08:00
|
|
|
</div>
|
2026-01-09 16:52:45 +08:00
|
|
|
</div>
|
2026-01-22 22:26:04 +08:00
|
|
|
|
2026-01-09 16:52:45 +08:00
|
|
|
</div>
|
2026-01-31 20:27:17 +08:00
|
|
|
</main>
|
2026-01-09 16:52:45 +08:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="/static/script.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
