大更新,架构调整,数据分析能力提升,

This commit is contained in:
2026-04-19 21:30:08 +08:00
parent 9d01f004d4
commit 00bd48e7e7
26 changed files with 4375 additions and 252 deletions

View File

@@ -6,17 +6,44 @@ const startBtn = document.getElementById('startBtn');
const requirementInput = document.getElementById('requirementInput');
const statusDot = document.getElementById('statusDot');
const statusText = document.getElementById('statusText');
const logOutput = document.getElementById('logOutput');
const reportContainer = document.getElementById('reportContainer');
const downloadScriptBtn = document.getElementById('downloadScriptBtn');
let isRunning = false;
let pollingInterval = null;
let currentSessionId = null;
let selectedTemplate = '';
// 报告段落数据(用于润色功能)
let reportParagraphs = [];
// Supporting data from report API
let supportingData = {};
// Execution Process state
let lastRenderedRound = 0;
// --- Progress Bar ---
function updateProgressBar(percentage, message, currentRound, maxRounds) {
const container = document.getElementById('progressBarContainer');
const fill = document.getElementById('progressBarFill');
const label = document.getElementById('progressLabel');
const percent = document.getElementById('progressPercent');
const msg = document.getElementById('progressMessage');
if (!container || !fill) return;
container.classList.remove('hidden');
fill.style.width = percentage + '%';
if (label) label.textContent = `Round ${currentRound || 0}/${maxRounds || 0}`;
if (percent) percent.textContent = Math.round(percentage) + '%';
if (msg) msg.textContent = message || '';
}
function hideProgressBar() {
const container = document.getElementById('progressBarContainer');
if (container) container.classList.add('hidden');
}
// --- Upload Logic ---
if (uploadZone) {
uploadZone.addEventListener('dragover', (e) => {
@@ -60,6 +87,34 @@ async function handleFiles(files) {
}
}
// --- Template Logic ---
async function loadTemplates() {
try {
const res = await fetch('/api/templates');
if (!res.ok) return;
const data = await res.json();
const selector = document.getElementById('templateSelector');
if (!selector || !data.templates) return;
for (const tpl of data.templates) {
const card = document.createElement('div');
card.className = 'template-card';
card.setAttribute('data-template', tpl.name);
card.onclick = function() { selectTemplate(this, tpl.name); };
card.innerHTML = `<div class="template-card-title">${tpl.display_name}</div><div class="template-card-desc">${tpl.description}</div>`;
selector.appendChild(card);
}
} catch (e) {
console.error('Failed to load templates', e);
}
}
window.selectTemplate = function(el, name) {
document.querySelectorAll('.template-card').forEach(c => c.classList.remove('selected'));
el.classList.add('selected');
selectedTemplate = name;
}
// --- Analysis Logic ---
if (startBtn) {
startBtn.addEventListener('click', startAnalysis);
@@ -75,19 +130,30 @@ async function startAnalysis() {
}
setRunningState(true);
// Reset execution state for new analysis
lastRenderedRound = 0;
const wrapper = document.getElementById('roundCardsWrapper');
if (wrapper) wrapper.innerHTML = '';
const emptyState = document.getElementById('executionEmptyState');
if (emptyState) emptyState.remove();
try {
const body = { requirement };
if (selectedTemplate) {
body.template = selectedTemplate;
}
const res = await fetch('/api/start', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ requirement })
body: JSON.stringify(body)
});
if (res.ok) {
const data = await res.json();
currentSessionId = data.session_id;
startPolling();
switchTab('logs');
switchTab('execution');
} else {
const err = await res.json();
alert('Failed to start: ' + err.detail);
@@ -112,6 +178,8 @@ function setRunningState(running) {
const followUpSection = document.getElementById('followUpSection');
if (followUpSection) followUpSection.classList.add('hidden');
if (downloadScriptBtn) downloadScriptBtn.classList.add('hidden');
const tplGroup = document.getElementById('templateSelectorGroup');
if (tplGroup) tplGroup.classList.add('hidden');
} else {
startBtn.innerHTML = '<i class="fa-solid fa-play"></i> Start Analysis';
statusDot.className = 'status-dot';
@@ -122,6 +190,7 @@ function setRunningState(running) {
}
}
// --- Polling ---
function startPolling() {
if (pollingInterval) clearInterval(pollingInterval);
if (!currentSessionId) return;
@@ -132,14 +201,29 @@ function startPolling() {
if (!res.ok) return;
const data = await res.json();
logOutput.innerText = data.log || "Waiting for output...";
const logTab = document.getElementById('logsTab');
if (logTab) logTab.scrollTop = logTab.scrollHeight;
// Render round cards incrementally
const rounds = data.rounds || [];
renderRoundCards(rounds);
// Load data files during polling
loadDataFiles();
// Update progress bar during analysis
if (data.is_running && data.progress_percentage !== undefined) {
updateProgressBar(data.progress_percentage, data.status_message, data.current_round, data.max_rounds);
}
if (!data.is_running && isRunning) {
updateProgressBar(100, 'Analysis complete', data.current_round || data.max_rounds, data.max_rounds);
setTimeout(hideProgressBar, 3000);
setRunningState(false);
clearInterval(pollingInterval);
// Final render of rounds
renderRoundCards(data.rounds || []);
loadDataFiles();
if (data.has_report) {
await loadReport();
switchTab('report');
@@ -155,7 +239,215 @@ function startPolling() {
}, 2000);
}
// --- Report Logic (with paragraph-level polishing) ---
// --- Execution Process Tab (Task 11) ---
function renderRoundCards(rounds) {
if (!rounds || rounds.length === 0) return;
const wrapper = document.getElementById('roundCardsWrapper');
if (!wrapper) return;
// Handle server restart: if rounds shrunk, re-render all
if (rounds.length < lastRenderedRound) {
lastRenderedRound = 0;
wrapper.innerHTML = '';
}
// Remove empty state if present
const emptyState = document.getElementById('executionEmptyState');
if (emptyState) emptyState.remove();
// Only render new rounds
for (let i = lastRenderedRound; i < rounds.length; i++) {
const rd = rounds[i];
const card = createRoundCard(rd);
wrapper.appendChild(card);
}
lastRenderedRound = rounds.length;
// Auto-scroll when running
if (isRunning) {
const executionTab = document.getElementById('executionTab');
if (executionTab) {
executionTab.scrollTop = executionTab.scrollHeight;
}
}
}
function createRoundCard(rd) {
const roundNum = rd.round || 0;
const summary = escapeHtml(rd.result_summary || '');
const reasoning = escapeHtml(rd.reasoning || '');
const code = escapeHtml(rd.code || '');
const rawLog = escapeHtml(rd.raw_log || '');
const card = document.createElement('div');
card.className = 'round-card';
card.setAttribute('data-round', roundNum);
// Build evidence table HTML
let evidenceHtml = '';
const evidenceRows = rd.evidence_rows || [];
if (evidenceRows.length > 0) {
const cols = Object.keys(evidenceRows[0]);
evidenceHtml = `
<div class="round-section">
<div class="round-section-title">本轮数据案例</div>
<table class="evidence-table">
<thead><tr>${cols.map(c => `<th>${escapeHtml(c)}</th>`).join('')}</tr></thead>
<tbody>${evidenceRows.map(row =>
`<tr>${cols.map(c => `<td>${escapeHtml(String(row[c] ?? ''))}</td>`).join('')}</tr>`
).join('')}</tbody>
</table>
</div>`;
}
card.innerHTML = `
<div class="round-card-header" onclick="toggleRoundCard(${roundNum})">
<span class="round-number">Round ${roundNum}</span>
<span class="round-summary">${summary}</span>
<i class="fa-solid fa-chevron-down round-toggle-icon"></i>
</div>
<div class="round-card-body hidden">
<div class="round-section">
<div class="round-section-title">AI 推理</div>
<div class="round-reasoning">${reasoning}</div>
</div>
<details class="round-details">
<summary>代码</summary>
<pre class="round-code">${code}</pre>
</details>
<div class="round-section">
<div class="round-section-title">执行结果</div>
<div class="round-result">${summary}</div>
</div>
${evidenceHtml}
<details class="round-details">
<summary>原始日志</summary>
<pre class="round-raw-log">${rawLog}</pre>
</details>
</div>
`;
return card;
}
window.toggleRoundCard = function(roundNum) {
const card = document.querySelector(`.round-card[data-round="${roundNum}"]`);
if (!card) return;
const body = card.querySelector('.round-card-body');
const icon = card.querySelector('.round-toggle-icon');
if (!body) return;
body.classList.toggle('hidden');
if (icon) {
icon.classList.toggle('fa-chevron-down');
icon.classList.toggle('fa-chevron-up');
}
card.classList.toggle('expanded');
}
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// --- Data Files Tab (Task 12) ---
async function loadDataFiles() {
if (!currentSessionId) return;
try {
const res = await fetch(`/api/data-files?session_id=${currentSessionId}`);
if (!res.ok) return;
const data = await res.json();
const files = data.files || [];
const grid = document.getElementById('fileCardsGrid');
const emptyState = document.getElementById('datafilesEmptyState');
if (!grid) return;
if (files.length === 0) {
grid.innerHTML = '';
if (emptyState) emptyState.classList.remove('hidden');
return;
}
if (emptyState) emptyState.classList.add('hidden');
grid.innerHTML = files.map(f => {
const desc = escapeHtml(f.description || '');
const name = escapeHtml(f.filename || '');
const rows = f.rows || 0;
const iconClass = name.endsWith('.xlsx') ? 'fa-file-excel' : 'fa-file-csv';
return `
<div class="data-file-card" onclick="previewDataFile('${escapeHtml(f.filename)}')">
<div class="data-file-icon"><i class="fa-regular ${iconClass}"></i></div>
<div class="data-file-info">
<div class="data-file-name">${name}</div>
<div class="data-file-desc">${desc} · ${rows}行</div>
</div>
<button class="btn btn-sm btn-secondary" onclick="event.stopPropagation(); downloadDataFile('${escapeHtml(f.filename)}')">
<i class="fa-solid fa-download"></i>
</button>
</div>`;
}).join('');
} catch (e) {
console.error('Failed to load data files', e);
}
}
window.previewDataFile = async function(filename) {
if (!currentSessionId) return;
try {
const res = await fetch(`/api/data-files/preview?session_id=${currentSessionId}&filename=${encodeURIComponent(filename)}`);
if (!res.ok) {
alert('Failed to load preview');
return;
}
const data = await res.json();
const columns = data.columns || [];
const rows = data.rows || [];
const panel = document.getElementById('dataPreviewPanel');
const nameEl = document.getElementById('previewFileName');
const container = document.getElementById('previewTableContainer');
if (!panel || !container) return;
nameEl.textContent = filename;
let tableHtml = '<table class="data-preview-table">';
tableHtml += '<thead><tr>' + columns.map(c => `<th>${escapeHtml(c)}</th>`).join('') + '</tr></thead>';
tableHtml += '<tbody>';
for (const row of rows) {
tableHtml += '<tr>' + columns.map(c => `<td>${escapeHtml(String(row[c] ?? ''))}</td>`).join('') + '</tr>';
}
tableHtml += '</tbody></table>';
container.innerHTML = tableHtml;
panel.classList.remove('hidden');
} catch (e) {
console.error('Preview failed', e);
}
}
window.downloadDataFile = function(filename) {
if (!currentSessionId) return;
const link = document.createElement('a');
link.href = `/api/data-files/download?session_id=${currentSessionId}&filename=${encodeURIComponent(filename)}`;
link.download = '';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
window.closePreview = function() {
const panel = document.getElementById('dataPreviewPanel');
if (panel) panel.classList.add('hidden');
}
// --- Report Logic with Supporting Data (Task 14) ---
async function loadReport() {
if (!currentSessionId) return;
@@ -166,13 +458,13 @@ async function loadReport() {
if (!data.content || data.content === "Report not ready.") {
reportContainer.innerHTML = '<div class="empty-state"><p>Analysis in progress or no report generated yet.</p></div>';
reportParagraphs = [];
supportingData = {};
return;
}
// 保存段落数据
reportParagraphs = data.paragraphs || [];
supportingData = data.supporting_data || {};
// 渲染段落化的报告(支持点击润色)
renderParagraphReport(reportParagraphs);
} catch (e) {
@@ -190,9 +482,14 @@ function renderParagraphReport(paragraphs) {
for (const p of paragraphs) {
const renderedContent = marked.parse(p.content);
const typeClass = `para-${p.type}`;
const hasSupportingData = supportingData[p.id] && supportingData[p.id].length > 0;
const supportingBtn = hasSupportingData
? `<button class="supporting-data-btn" onclick="event.stopPropagation(); showSupportingData('${p.id}')"><i class="fa-solid fa-table"></i> 查看支撑数据</button>`
: '';
html += `
<div class="report-paragraph ${typeClass}" data-para-id="${p.id}" onclick="selectParagraph('${p.id}')">
<div class="para-content">${renderedContent}</div>
${supportingBtn}
<div class="para-actions hidden">
<button class="polish-btn" onclick="event.stopPropagation(); polishParagraph('${p.id}', 'context')" title="根据上下文润色">
<i class="fa-solid fa-wand-magic-sparkles"></i> 上下文润色
@@ -210,14 +507,40 @@ function renderParagraphReport(paragraphs) {
reportContainer.innerHTML = html;
}
window.showSupportingData = function(paraId) {
const rows = supportingData[paraId];
if (!rows || rows.length === 0) return;
const modal = document.getElementById('supportingDataModal');
const body = document.getElementById('supportingDataBody');
if (!modal || !body) return;
const cols = Object.keys(rows[0]);
let tableHtml = '<table class="evidence-table">';
tableHtml += '<thead><tr>' + cols.map(c => `<th>${escapeHtml(c)}</th>`).join('') + '</tr></thead>';
tableHtml += '<tbody>';
for (const row of rows) {
tableHtml += '<tr>' + cols.map(c => `<td>${escapeHtml(String(row[c] ?? ''))}</td>`).join('') + '</tr>';
}
tableHtml += '</tbody></table>';
body.innerHTML = tableHtml;
modal.classList.remove('hidden');
}
window.closeSupportingData = function() {
const modal = document.getElementById('supportingDataModal');
if (modal) modal.classList.add('hidden');
}
// --- Paragraph Selection & Polishing (preserved from original) ---
window.selectParagraph = function(paraId) {
// 取消所有选中
document.querySelectorAll('.report-paragraph').forEach(el => {
el.classList.remove('selected');
el.querySelector('.para-actions')?.classList.add('hidden');
});
// 选中当前段落
const target = document.querySelector(`[data-para-id="${paraId}"]`);
if (target) {
target.classList.add('selected');
@@ -231,7 +554,6 @@ window.polishParagraph = async function(paraId, mode, customInstruction = '') {
const target = document.querySelector(`[data-para-id="${paraId}"]`);
if (!target) return;
// 显示加载状态
const actionsEl = target.querySelector('.para-actions');
const originalActions = actionsEl.innerHTML;
actionsEl.innerHTML = '<span class="polish-loading"><i class="fa-solid fa-spinner fa-spin"></i> AI 润色中...</span>';
@@ -256,8 +578,6 @@ window.polishParagraph = async function(paraId, mode, customInstruction = '') {
}
const data = await res.json();
// 显示对比视图
showPolishDiff(target, paraId, data.original, data.polished);
} catch (e) {
@@ -296,7 +616,6 @@ function showPolishDiff(targetEl, paraId, original, polished) {
</div>
`;
// 用 addEventListener 绑定,避免内联 onclick 中特殊字符破坏 HTML
document.getElementById(`acceptBtn-${paraId}`).addEventListener('click', (e) => {
e.stopPropagation();
applyPolish(paraId, polished);
@@ -322,7 +641,6 @@ window.applyPolish = async function(paraId, newContent) {
});
if (res.ok) {
// 重新加载报告
await loadReport();
} else {
alert('应用失败');
@@ -334,7 +652,6 @@ window.applyPolish = async function(paraId, newContent) {
}
window.rejectPolish = function(paraId) {
// 重新加载报告恢复原状
loadReport();
}
@@ -371,55 +688,6 @@ window.submitCustomPolish = function(paraId) {
polishParagraph(paraId, 'custom', instruction);
}
// --- Gallery Logic ---
let galleryImages = [];
let currentImageIndex = 0;
async function loadGallery() {
if (!currentSessionId) return;
try {
const res = await fetch(`/api/figures?session_id=${currentSessionId}`);
const data = await res.json();
galleryImages = data.figures || [];
currentImageIndex = 0;
renderGalleryImage();
} catch (e) {
console.error("Gallery load failed", e);
document.getElementById('carouselSlide').innerHTML = '<p class="error">Failed to load images.</p>';
}
}
function renderGalleryImage() {
const slide = document.getElementById('carouselSlide');
const info = document.getElementById('imageInfo');
if (galleryImages.length === 0) {
slide.innerHTML = '<p class="placeholder-text" style="color:var(--text-secondary);">No images generated in this session.</p>';
info.innerHTML = '';
return;
}
const img = galleryImages[currentImageIndex];
slide.innerHTML = `<img src="${img.web_url}" alt="${img.filename}" onclick="window.open('${img.web_url}', '_blank')">`;
info.innerHTML = `
<div class="image-title">${img.filename} (${currentImageIndex + 1}/${galleryImages.length})</div>
<div class="image-desc">${img.description || 'No description available.'}</div>
${img.analysis ? `<div style="font-size:0.8rem; margin-top:0.5rem; color:#4B5563; background:#F3F4F6; padding:0.5rem; border-radius:4px;">${img.analysis}</div>` : ''}
`;
}
window.prevImage = function () {
if (galleryImages.length === 0) return;
currentImageIndex = (currentImageIndex - 1 + galleryImages.length) % galleryImages.length;
renderGalleryImage();
}
window.nextImage = function () {
if (galleryImages.length === 0) return;
currentImageIndex = (currentImageIndex + 1) % galleryImages.length;
renderGalleryImage();
}
// --- Download / Export ---
window.downloadScript = async function () {
if (!currentSessionId) return;
@@ -471,8 +739,12 @@ window.sendFollowUp = async function () {
if (res.ok) {
input.value = '';
setRunningState(true);
// Reset round rendering for follow-up
lastRenderedRound = 0;
const wrapper = document.getElementById('roundCardsWrapper');
if (wrapper) wrapper.innerHTML = '';
startPolling();
switchTab('logs');
switchTab('execution');
} else {
alert('Failed to send request');
}
@@ -524,18 +796,26 @@ window.loadSession = async function (sessionId) {
const activeItem = document.getElementById(`hist-${sessionId}`);
if (activeItem) activeItem.classList.add('active');
logOutput.innerText = "Loading session data...";
reportContainer.innerHTML = "";
if (downloadScriptBtn) downloadScriptBtn.classList.add('hidden');
const tplGroup = document.getElementById('templateSelectorGroup');
if (tplGroup) tplGroup.classList.add('hidden');
// Reset execution state for loaded session
lastRenderedRound = 0;
const wrapper = document.getElementById('roundCardsWrapper');
if (wrapper) wrapper.innerHTML = '';
try {
const res = await fetch(`/api/status?session_id=${sessionId}`);
if (res.ok) {
const data = await res.json();
logOutput.innerText = data.log || "No logs available.";
const logTab = document.getElementById('logsTab');
if (logTab) logTab.scrollTop = logTab.scrollHeight;
// Render rounds for historical session
renderRoundCards(data.rounds || []);
// Load data files for historical session
loadDataFiles();
if (data.has_report) {
await loadReport();
@@ -545,16 +825,17 @@ window.loadSession = async function (sessionId) {
}
switchTab('report');
} else {
switchTab('logs');
switchTab('execution');
}
}
} catch (e) {
logOutput.innerText = "Error loading session.";
console.error("Error loading session", e);
}
}
// --- Init & Navigation ---
// --- Init & Navigation (Task 13) ---
document.addEventListener('DOMContentLoaded', () => {
loadTemplates();
loadHistory();
});
@@ -563,25 +844,29 @@ window.switchView = function (viewName) {
}
window.switchTab = function (tabName) {
// Deactivate all tabs
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
['logs', 'report', 'gallery'].forEach(name => {
// Hide all tab content
['execution', 'datafiles', 'report'].forEach(name => {
const content = document.getElementById(`${name}Tab`);
if (content) content.classList.add('hidden');
});
// Activate the clicked tab button
document.querySelectorAll('.tab').forEach(btn => {
if (btn.getAttribute('onclick') && btn.getAttribute('onclick').includes(`'${tabName}'`)) {
btn.classList.add('active');
}
});
if (tabName === 'logs') {
document.getElementById('logsTab').classList.remove('hidden');
// Show the selected tab content
if (tabName === 'execution') {
document.getElementById('executionTab').classList.remove('hidden');
} else if (tabName === 'datafiles') {
document.getElementById('datafilesTab').classList.remove('hidden');
if (currentSessionId) loadDataFiles();
} else if (tabName === 'report') {
document.getElementById('reportTab').classList.remove('hidden');
} else if (tabName === 'gallery') {
document.getElementById('galleryTab').classList.remove('hidden');
if (currentSessionId) loadGallery();
}
}