359 lines
11 KiB
JavaScript
359 lines
11 KiB
JavaScript
// InsightFlow Frontend - Production Version
|
|
const API_BASE = '/api/v1';
|
|
|
|
let currentProject = null;
|
|
let currentData = null;
|
|
let selectedEntity = null;
|
|
|
|
// Init
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initApp();
|
|
});
|
|
|
|
// Initialize app - load projects
|
|
async function initApp() {
|
|
try {
|
|
const projects = await fetchProjects();
|
|
if (projects.length === 0) {
|
|
// Create default project
|
|
await createProject('默认项目', '自动创建的默认项目');
|
|
location.reload();
|
|
return;
|
|
}
|
|
|
|
currentProject = projects[0];
|
|
renderProjectSelector(projects);
|
|
initUpload();
|
|
|
|
// Load existing entities for this project
|
|
await loadProjectEntities();
|
|
|
|
} catch (err) {
|
|
console.error('Init failed:', err);
|
|
alert('加载失败，请刷新重试');
|
|
}
|
|
}
|
|
|
|
// API Calls
|
|
async function fetchProjects() {
|
|
const res = await fetch(`${API_BASE}/projects`);
|
|
if (!res.ok) throw new Error('Failed to fetch projects');
|
|
return await res.json();
|
|
}
|
|
|
|
async function createProject(name, description) {
|
|
const res = await fetch(`${API_BASE}/projects`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name, description })
|
|
});
|
|
if (!res.ok) throw new Error('Failed to create project');
|
|
return await res.json();
|
|
}
|
|
|
|
async function uploadAudio(file) {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
const res = await fetch(`${API_BASE}/projects/${currentProject.id}/upload`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (!res.ok) throw new Error('Upload failed');
|
|
return await res.json();
|
|
}
|
|
|
|
async function loadProjectEntities() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/projects/${currentProject.id}/entities`);
|
|
if (!res.ok) return;
|
|
const entities = await res.json();
|
|
|
|
// Convert to currentData format
|
|
currentData = {
|
|
transcript_id: 'project_view',
|
|
project_id: currentProject.id,
|
|
segments: [],
|
|
entities: entities.map(e => ({
|
|
id: e.id,
|
|
name: e.name,
|
|
type: e.type,
|
|
definition: e.definition || ''
|
|
})),
|
|
full_text: '',
|
|
created_at: new Date().toISOString()
|
|
};
|
|
|
|
renderGraph();
|
|
renderEntityList();
|
|
|
|
} catch (err) {
|
|
console.error('Load entities failed:', err);
|
|
}
|
|
}
|
|
|
|
// Render project selector
|
|
function renderProjectSelector(projects) {
|
|
// Simple project selector in header
|
|
const header = document.querySelector('.header');
|
|
const selector = document.createElement('select');
|
|
selector.style.cssText = 'background:#222;color:#fff;border:1px solid #333;padding:4px 12px;border-radius:4px;margin-left:20px;';
|
|
|
|
projects.forEach(p => {
|
|
const opt = document.createElement('option');
|
|
opt.value = p.id;
|
|
opt.textContent = p.name;
|
|
if (p.id === currentProject.id) opt.selected = true;
|
|
selector.appendChild(opt);
|
|
});
|
|
|
|
selector.onchange = (e) => {
|
|
currentProject = projects.find(p => p.id === e.target.value);
|
|
loadProjectEntities();
|
|
};
|
|
|
|
header.appendChild(selector);
|
|
}
|
|
|
|
// Render transcript with entity highlighting
|
|
function renderTranscript() {
|
|
const container = document.getElementById('transcriptContent');
|
|
if (!container || !currentData || !currentData.segments) return;
|
|
|
|
container.innerHTML = '';
|
|
|
|
currentData.segments.forEach((seg, idx) => {
|
|
const div = document.createElement('div');
|
|
div.className = 'segment';
|
|
div.dataset.index = idx;
|
|
|
|
let text = seg.text;
|
|
const entities = findEntitiesInSegment(seg, idx);
|
|
|
|
entities.sort((a, b) => b.start - a.start);
|
|
|
|
entities.forEach(ent => {
|
|
const before = text.slice(0, ent.start);
|
|
const name = text.slice(ent.start, ent.end);
|
|
const after = text.slice(ent.end);
|
|
text = before + `<span class="entity" data-id="${ent.id}" onclick="window.selectEntity('${ent.id}')">${name}</span>` + after;
|
|
});
|
|
|
|
div.innerHTML = `
|
|
<div class="speaker">${seg.speaker}</div>
|
|
<div class="segment-text">${text}</div>
|
|
`;
|
|
|
|
container.appendChild(div);
|
|
});
|
|
}
|
|
|
|
// Find entities within a segment
|
|
function findEntitiesInSegment(seg, segIndex) {
|
|
if (!currentData || !currentData.entities) return [];
|
|
|
|
let offset = 0;
|
|
for (let i = 0; i < segIndex; i++) {
|
|
offset += currentData.segments[i].text.length + 1;
|
|
}
|
|
|
|
return currentData.entities.filter(ent => {
|
|
return ent.start >= offset && ent.end <= offset + seg.text.length;
|
|
}).map(ent => ({
|
|
...ent,
|
|
start: ent.start - offset,
|
|
end: ent.end - offset
|
|
}));
|
|
}
|
|
|
|
// Render D3 force-directed graph
|
|
function renderGraph() {
|
|
const svg = d3.select('#graph-svg');
|
|
svg.selectAll('*').remove();
|
|
|
|
if (!currentData || !currentData.entities || currentData.entities.length === 0) {
|
|
svg.append('text')
|
|
.attr('x', '50%')
|
|
.attr('y', '50%')
|
|
.attr('text-anchor', 'middle')
|
|
.attr('fill', '#666')
|
|
.text('暂无实体数据，请上传音频');
|
|
return;
|
|
}
|
|
|
|
const width = svg.node().parentElement.clientWidth;
|
|
const height = svg.node().parentElement.clientHeight - 200;
|
|
|
|
svg.attr('width', width).attr('height', height);
|
|
|
|
const nodes = currentData.entities.map(e => ({
|
|
id: e.id,
|
|
name: e.name,
|
|
type: e.type,
|
|
...e
|
|
}));
|
|
|
|
const links = [];
|
|
for (let i = 0; i < nodes.length - 1; i++) {
|
|
links.push({ source: nodes[i].id, target: nodes[i + 1].id });
|
|
}
|
|
|
|
const colorMap = {
|
|
'PROJECT': '#7b2cbf',
|
|
'TECH': '#00d4ff',
|
|
'PERSON': '#ff6b6b',
|
|
'ORG': '#4ecdc4',
|
|
'OTHER': '#666'
|
|
};
|
|
|
|
const simulation = d3.forceSimulation(nodes)
|
|
.force('link', d3.forceLink(links).id(d => d.id).distance(100))
|
|
.force('charge', d3.forceManyBody().strength(-300))
|
|
.force('center', d3.forceCenter(width / 2, height / 2))
|
|
.force('collision', d3.forceCollide().radius(40));
|
|
|
|
const link = svg.append('g')
|
|
.selectAll('line')
|
|
.data(links)
|
|
.enter().append('line')
|
|
.attr('stroke', '#333')
|
|
.attr('stroke-width', 1);
|
|
|
|
const node = svg.append('g')
|
|
.selectAll('g')
|
|
.data(nodes)
|
|
.enter().append('g')
|
|
.attr('class', 'node')
|
|
.call(d3.drag()
|
|
.on('start', dragstarted)
|
|
.on('drag', dragged)
|
|
.on('end', dragended))
|
|
.on('click', (e, d) => window.selectEntity(d.id));
|
|
|
|
node.append('circle')
|
|
.attr('r', 30)
|
|
.attr('fill', d => colorMap[d.type] || '#666')
|
|
.attr('stroke', '#fff')
|
|
.attr('stroke-width', 2);
|
|
|
|
node.append('text')
|
|
.text(d => d.name.length > 8 ? d.name.slice(0, 6) + '...' : d.name)
|
|
.attr('text-anchor', 'middle')
|
|
.attr('dy', 5)
|
|
.attr('fill', '#fff')
|
|
.attr('font-size', '11px');
|
|
|
|
simulation.on('tick', () => {
|
|
link
|
|
.attr('x1', d => d.source.x)
|
|
.attr('y1', d => d.source.y)
|
|
.attr('x2', d => d.target.x)
|
|
.attr('y2', d => d.target.y);
|
|
|
|
node.attr('transform', d => `translate(${d.x},${d.y})`);
|
|
});
|
|
|
|
function dragstarted(e, d) {
|
|
if (!e.active) simulation.alphaTarget(0.3).restart();
|
|
d.fx = d.x;
|
|
d.fy = d.y;
|
|
}
|
|
|
|
function dragged(e, d) {
|
|
d.fx = e.x;
|
|
d.fy = e.y;
|
|
}
|
|
|
|
function dragended(e, d) {
|
|
if (!e.active) simulation.alphaTarget(0);
|
|
d.fx = null;
|
|
d.fy = null;
|
|
}
|
|
}
|
|
|
|
// Render entity list
|
|
function renderEntityList() {
|
|
const container = document.getElementById('entityList');
|
|
if (!container) return;
|
|
|
|
container.innerHTML = '<h3 style="margin-bottom:12px;color:#888;font-size:0.9rem;">项目实体</h3>';
|
|
|
|
if (!currentData || !currentData.entities || currentData.entities.length === 0) {
|
|
container.innerHTML += '<p style="color:#666;font-size:0.85rem;">暂无实体，请上传音频文件</p>';
|
|
return;
|
|
}
|
|
|
|
currentData.entities.forEach(ent => {
|
|
const div = document.createElement('div');
|
|
div.className = 'entity-item';
|
|
div.onclick = () => window.selectEntity(ent.id);
|
|
|
|
div.innerHTML = `
|
|
<span class="entity-type-badge type-${ent.type.toLowerCase()}">${ent.type}</span>
|
|
<div>
|
|
<div style="font-weight:500;">${ent.name}</div>
|
|
<div style="font-size:0.8rem;color:#666;">${ent.definition || '暂无定义'}</div>
|
|
</div>
|
|
`;
|
|
|
|
container.appendChild(div);
|
|
});
|
|
}
|
|
|
|
// Select entity
|
|
window.selectEntity = function(entityId) {
|
|
selectedEntity = entityId;
|
|
const entity = currentData && currentData.entities.find(e => e.id === entityId);
|
|
if (!entity) return;
|
|
|
|
document.querySelectorAll('.entity').forEach(el => {
|
|
el.style.background = el.dataset.id === entityId ? '#ff6b6b' : '';
|
|
});
|
|
|
|
d3.selectAll('.node circle')
|
|
.attr('stroke', d => d.id === entityId ? '#ff6b6b' : '#fff')
|
|
.attr('stroke-width', d => d.id === entityId ? 4 : 2);
|
|
|
|
console.log('Selected:', entity.name);
|
|
};
|
|
|
|
// Upload handling
|
|
function initUpload() {
|
|
const input = document.getElementById('fileInput');
|
|
const overlay = document.getElementById('uploadOverlay');
|
|
|
|
input.addEventListener('change', async (e) => {
|
|
if (!e.target.files.length) return;
|
|
|
|
const file = e.target.files[0];
|
|
overlay.innerHTML = `
|
|
<div style="text-align:center;">
|
|
<h2>正在分析...</h2>
|
|
<p style="color:#666;margin-top:10px;">${file.name}</p>
|
|
</div>
|
|
`;
|
|
|
|
try {
|
|
const result = await uploadAudio(file);
|
|
currentData = result;
|
|
|
|
renderTranscript();
|
|
renderGraph();
|
|
renderEntityList();
|
|
|
|
overlay.classList.add('hidden');
|
|
|
|
} catch (err) {
|
|
console.error('Upload failed:', err);
|
|
overlay.innerHTML = `
|
|
<div style="text-align:center;">
|
|
<h2 style="color:#ff6b6b;">分析失败</h2>
|
|
<p style="color:#666;margin-top:10px;">${err.message}</p>
|
|
<button class="btn" onclick="location.reload()">重试</button>
|
|
</div>
|
|
`;
|
|
}
|
|
});
|
|
}
|