claw/insightflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: frontend connects to real backend API

Browse Source
This commit is contained in:
OpenClaw Bot
2026-02-17 18:16:23 +08:00
parent 2750fb102a
commit 96f4ffe7c1
2 changed files with 175 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
frontend/app.js
View File

@@ -1,57 +1,126 @@
// InsightFlow Phase 2 - Workbench
// InsightFlow Frontend - Production Version
const API_BASE = '/api/v1';
let currentProject = null;
let currentData = null;
let selectedEntity = null;
// Init
document.addEventListener('DOMContentLoaded', () => {
initUpload();
loadSampleData(); // For demo
initApp();
});
// Sample data for demo
function loadSampleData() {
currentData = {
transcript_id: "demo_001",
segments: [
{
start: 0,
end: 5,
text: "我们今天讨论 Project Alpha 的进度，需要协调后端团队和前端团队。",
speaker: "张三"
},
{
start: 5,
end: 12,
text: "K8s 集群已经部署完成，但是 Redis 缓存出现了一些问题。",
speaker: "李四"
},
{
start: 12,
end: 18,
text: "建议下周进行 Code Review，确保代码质量符合标准。",
speaker: "王五"
}
],
entities: [
{ id: 'ent_1', name: 'Project Alpha', type: 'PROJECT', start: 8, end: 21, definition: '当前核心开发项目' },
{ id: 'ent_2', name: 'K8s', type: 'TECH', start: 0, end: 3, definition: 'Kubernetes容器编排平台' },
{ id: 'ent_3', name: 'Redis', type: 'TECH', start: 32, end: 37, definition: '内存数据库缓存系统' },
{ id: 'ent_4', name: 'Code Review', type: 'OTHER', start: 10, end: 21, definition: '代码审查流程' }
],
full_text: "我们今天讨论 Project Alpha 的进度..."
// 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();
};
renderTranscript();
renderGraph();
renderEntityList();
document.getElementById('uploadOverlay').classList.add('hidden');
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) => {
@@ -59,18 +128,16 @@ function renderTranscript() {
div.className = 'segment';
div.dataset.index = idx;
// Highlight entities in text
let text = seg.text;
const entities = findEntitiesInSegment(seg, idx);
// Sort by position (descending) to replace from end
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="selectEntity('${ent.id}')">${name}</span>` + after;
text = before + `<span class="entity" data-id="${ent.id}" onclick="window.selectEntity('${ent.id}')">${name}</span>` + after;
});
div.innerHTML = `
@@ -84,7 +151,8 @@ function renderTranscript() {
// Find entities within a segment
function findEntitiesInSegment(seg, segIndex) {
// Simple calculation - in real app, need proper offset tracking
if (!currentData || !currentData.entities) return [];
let offset = 0;
for (let i = 0; i < segIndex; i++) {
offset += currentData.segments[i].text.length + 1;
@@ -104,12 +172,21 @@ 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; // Minus entity list
const height = svg.node().parentElement.clientHeight - 200;
svg.attr('width', width).attr('height', height);
// Prepare nodes and links
const nodes = currentData.entities.map(e => ({
id: e.id,
name: e.name,
@@ -117,13 +194,11 @@ function renderGraph() {
...e
}));
// Create some sample links (in real app, extract from relationships)
const links = [];
for (let i = 0; i < nodes.length - 1; i++) {
links.push({ source: nodes[i].id, target: nodes[i + 1].id });
}
// Color scale
const colorMap = {
'PROJECT': '#7b2cbf',
'TECH': '#00d4ff',
@@ -132,14 +207,12 @@ function renderGraph() {
'OTHER': '#666'
};
// Force simulation
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));
// Draw links
const link = svg.append('g')
.selectAll('line')
.data(links)
@@ -147,7 +220,6 @@ function renderGraph() {
.attr('stroke', '#333')
.attr('stroke-width', 1);
// Draw nodes
const node = svg.append('g')
.selectAll('g')
.data(nodes)
@@ -157,16 +229,14 @@ function renderGraph() {
.on('start', dragstarted)
.on('drag', dragged)
.on('end', dragended))
.on('click', (e, d) => selectEntity(d.id));
.on('click', (e, d) => window.selectEntity(d.id));
// Node circles
node.append('circle')
.attr('r', 30)
.attr('fill', d => colorMap[d.type] || '#666')
.attr('stroke', '#fff')
.attr('stroke-width', 2);
// Node labels
node.append('text')
.text(d => d.name.length > 8 ? d.name.slice(0, 6) + '...' : d.name)
.attr('text-anchor', 'middle')
@@ -174,7 +244,6 @@ function renderGraph() {
.attr('fill', '#fff')
.attr('font-size', '11px');
// Update positions
simulation.on('tick', () => {
link
.attr('x1', d => d.source.x)
@@ -206,12 +275,19 @@ function renderGraph() {
// Render entity list
function renderEntityList() {
const container = document.getElementById('entityList');
container.innerHTML = '<h3 style="margin-bottom:12px;color:#888;font-size:0.9rem;">识别实体</h3>';
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 = () => selectEntity(ent.id);
div.onclick = () => window.selectEntity(ent.id);
div.innerHTML = `
<span class="entity-type-badge type-${ent.type.toLowerCase()}">${ent.type}</span>
@@ -225,24 +301,22 @@ function renderEntityList() {
});
}
// Select entity (highlight in both views)
function selectEntity(entityId) {
// Select entity
window.selectEntity = function(entityId) {
selectedEntity = entityId;
const entity = currentData.entities.find(e => e.id === entityId);
const entity = currentData && currentData.entities.find(e => e.id === entityId);
if (!entity) return;
// Highlight in transcript
document.querySelectorAll('.entity').forEach(el => {
el.style.background = el.dataset.id === entityId ? '#ff6b6b' : '';
});
// Highlight in graph
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() {
@@ -252,11 +326,33 @@ function initUpload() {
input.addEventListener('change', async (e) => {
if (!e.target.files.length) return;
overlay.innerHTML = '<div style="text-align:center;"><h2>分析中...</h2></div>';
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();
// TODO: Upload and analyze
setTimeout(() => {
overlay.classList.add('hidden');
}, 2000);
} 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>
`;
}
});
}

57
frontend/index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InsightFlow - Phase 2 Workbench</title>
<title>InsightFlow - 知识工作台</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
@@ -33,7 +33,6 @@
display: flex;
height: calc(100vh - 50px);
}
/* Left: Transcript Editor */
.editor-panel {
width: 50%;
border-right: 1px solid #222;
@@ -68,10 +67,6 @@
.segment:hover {
background: #1a1a1a;
}
.segment.active {
background: rgba(0, 212, 255, 0.1);
border: 1px solid rgba(0, 212, 255, 0.3);
}
.speaker {
color: #00d4ff;
font-weight: 600;
@@ -87,12 +82,10 @@
padding: 0 4px;
border-radius: 3px;
cursor: pointer;
position: relative;
}
.entity:hover {
background: rgba(123, 44, 191, 0.5);
}
/* Right: Graph Panel */
.graph-panel {
width: 50%;
display: flex;
@@ -134,33 +127,13 @@
.type-person { background: #ff6b6b; }
.type-org { background: #4ecdc4; color: #000; }
.type-other { background: #666; }
/* Tooltip */
.tooltip {
position: absolute;
background: #222;
border: 1px solid #333;
border-radius: 8px;
padding: 12px;
max-width: 300px;
z-index: 1000;
display: none;
}
.tooltip h4 {
color: #00d4ff;
margin-bottom: 4px;
}
.tooltip p {
color: #aaa;
font-size: 0.9rem;
}
/* Upload overlay */
.upload-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.9);
background: rgba(0,0,0,0.95);
display: flex;
align-items: center;
justify-content: center;
@@ -185,48 +158,46 @@
cursor: pointer;
margin-top: 20px;
}
.btn:hover {
opacity: 0.9;
}
.hidden { display: none !important; }
</style>
</head>
<body>
<div class="header">
<h1>InsightFlow Workbench</h1>
<span style="color:#666;font-size:0.85rem;">Phase 2 - 双视图联动</span>
<h1>InsightFlow 知识工作台</h1>
<span style="color:#666;font-size:0.85rem;">连接音频与知识图谱</span>
</div>
<div class="main">
<!-- Left: Editor -->
<div class="editor-panel">
<div class="panel-header">
<span>📄 转录文本</span>
<span style="font-size:0.8rem;color:#666;">点击实体高亮 | 划词新建</span>
<span style="font-size:0.8rem;color:#666;">点击实体高亮</span>
</div>
<div class="transcript-content" id="transcriptContent">
<!-- Segments loaded here -->
<p style="color:#666;text-align:center;margin-top:40px;">请上传音频文件开始分析</p>
</div>
</div>
<!-- Right: Graph -->
<div class="graph-panel">
<div class="panel-header">
<span>🔗 知识图谱</span>
<span style="font-size:0.8rem;color:#666;">拖拽节点 | 点击查看关系</span>
<span style="font-size:0.8rem;color:#666;">拖拽节点查看关系</span>
</div>
<svg id="graph-svg"></svg>
<div class="entity-list" id="entityList">
<!-- Entity list loaded here -->
<h3 style="margin-bottom:12px;color:#888;font-size:0.9rem;">项目实体</h3>
<p style="color:#666;font-size:0.85rem;">暂无实体数据</p>
</div>
</div>
</div>
<!-- Tooltip -->
<div class="tooltip" id="tooltip"></div>
<!-- Upload Overlay -->
<div class="upload-overlay" id="uploadOverlay">
<div class="upload-box">
<div class="upload-box"
<h2 style="margin-bottom:10px;">上传音频开始分析</h2>
<p style="color:#666;">支持 MP3, WAV, M4A</p>
<p style="color:#666;">支持 MP3, WAV, M4A (最大 500MB)</p>
<input type="file" id="fileInput" accept="audio/*" hidden>
<button class="btn" onclick="document.getElementById('fileInput').click()">选择文件</button>
</div>