feat: Phase 2 workbench - dual-view editor with D3 graph
This commit is contained in:
OpenClaw Bot
266
frontend/app.js
266
frontend/app.js
@@ -1,10 +1,262 @@
|
||||
// InsightFlow Phase 2 - Workbench
|
||||
const API_BASE = '/api/v1';
|
||||
async function upload(file) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
const res = await fetch(API_BASE + '/upload', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
|
||||
let currentData = null;
|
||||
let selectedEntity = null;
|
||||
|
||||
// Init
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initUpload();
|
||||
loadSampleData(); // For demo
|
||||
});
|
||||
|
||||
// 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 的进度..."
|
||||
};
|
||||
|
||||
renderTranscript();
|
||||
renderGraph();
|
||||
renderEntityList();
|
||||
document.getElementById('uploadOverlay').classList.add('hidden');
|
||||
}
|
||||
|
||||
// Render transcript with entity highlighting
|
||||
function renderTranscript() {
|
||||
const container = document.getElementById('transcriptContent');
|
||||
container.innerHTML = '';
|
||||
|
||||
currentData.segments.forEach((seg, idx) => {
|
||||
const div = document.createElement('div');
|
||||
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;
|
||||
});
|
||||
|
||||
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) {
|
||||
// Simple calculation - in real app, need proper offset tracking
|
||||
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();
|
||||
|
||||
const width = svg.node().parentElement.clientWidth;
|
||||
const height = svg.node().parentElement.clientHeight - 200; // Minus entity list
|
||||
|
||||
svg.attr('width', width).attr('height', height);
|
||||
|
||||
// Prepare nodes and links
|
||||
const nodes = currentData.entities.map(e => ({
|
||||
id: e.id,
|
||||
name: e.name,
|
||||
type: e.type,
|
||||
...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',
|
||||
'PERSON': '#ff6b6b',
|
||||
'ORG': '#4ecdc4',
|
||||
'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)
|
||||
.enter().append('line')
|
||||
.attr('stroke', '#333')
|
||||
.attr('stroke-width', 1);
|
||||
|
||||
// Draw nodes
|
||||
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) => 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')
|
||||
.attr('dy', 5)
|
||||
.attr('fill', '#fff')
|
||||
.attr('font-size', '11px');
|
||||
|
||||
// Update positions
|
||||
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');
|
||||
container.innerHTML = '<h3 style="margin-bottom:12px;color:#888;font-size:0.9rem;">识别实体</h3>';
|
||||
|
||||
currentData.entities.forEach(ent => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'entity-item';
|
||||
div.onclick = () => 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 (highlight in both views)
|
||||
function selectEntity(entityId) {
|
||||
selectedEntity = entityId;
|
||||
const entity = 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() {
|
||||
const input = document.getElementById('fileInput');
|
||||
const overlay = document.getElementById('uploadOverlay');
|
||||
|
||||
input.addEventListener('change', async (e) => {
|
||||
if (!e.target.files.length) return;
|
||||
|
||||
overlay.innerHTML = '<div style="text-align:center;"><h2>分析中...</h2></div>';
|
||||
|
||||
// TODO: Upload and analyze
|
||||
setTimeout(() => {
|
||||
overlay.classList.add('hidden');
|
||||
}, 2000);
|
||||
});
|
||||
return await res.json();
|
||||
}
|
||||
|
||||
@@ -1,18 +1,237 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>InsightFlow MVP</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>InsightFlow - Phase 2 Workbench</title>
|
||||
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||||
<style>
|
||||
body { font-family: sans-serif; background: #0a0a0a; color: #e0e0e0; padding: 40px; }
|
||||
h1 { color: #00d4ff; }
|
||||
.upload { border: 2px dashed #333; padding: 40px; text-align: center; border-radius: 8px; }
|
||||
.entity { background: rgba(123,44,191,0.3); padding: 2px 6px; border-radius: 4px; }
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #0a0a0a;
|
||||
color: #e0e0e0;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.header {
|
||||
height: 50px;
|
||||
background: #111;
|
||||
border-bottom: 1px solid #222;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 1.2rem;
|
||||
background: linear-gradient(90deg, #00d4ff, #7b2cbf);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.main {
|
||||
display: flex;
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
/* Left: Transcript Editor */
|
||||
.editor-panel {
|
||||
width: 50%;
|
||||
border-right: 1px solid #222;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.panel-header {
|
||||
padding: 12px 20px;
|
||||
background: #141414;
|
||||
border-bottom: 1px solid #222;
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.transcript-content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
line-height: 1.8;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.segment {
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
background: #141414;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.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;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.segment-text {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.entity {
|
||||
background: rgba(123, 44, 191, 0.3);
|
||||
border-bottom: 2px solid #7b2cbf;
|
||||
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;
|
||||
flex-direction: column;
|
||||
}
|
||||
#graph-svg {
|
||||
flex: 1;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
.entity-list {
|
||||
height: 200px;
|
||||
border-top: 1px solid #222;
|
||||
background: #111;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.entity-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background: #1a1a1a;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.entity-item:hover {
|
||||
background: #222;
|
||||
}
|
||||
.entity-type-badge {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
margin-right: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.type-project { background: #7b2cbf; }
|
||||
.type-tech { background: #00d4ff; color: #000; }
|
||||
.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);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
}
|
||||
.upload-box {
|
||||
border: 2px dashed #333;
|
||||
border-radius: 16px;
|
||||
padding: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
.upload-box:hover {
|
||||
border-color: #00d4ff;
|
||||
}
|
||||
.btn {
|
||||
background: linear-gradient(90deg, #00d4ff, #7b2cbf);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 32px;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.hidden { display: none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>InsightFlow</h1>
|
||||
<p>Phase 1 MVP - 音频转录与实体提取</p>
|
||||
<div class="upload">拖拽音频文件上传</div>
|
||||
<div class="header">
|
||||
<h1>InsightFlow Workbench</h1>
|
||||
<span style="color:#666;font-size:0.85rem;">Phase 2 - 双视图联动</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>
|
||||
</div>
|
||||
<div class="transcript-content" id="transcriptContent">
|
||||
<!-- Segments loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Graph -->
|
||||
<div class="graph-panel">
|
||||
<div class="panel-header">
|
||||
<span>🔗 知识图谱</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 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tooltip -->
|
||||
<div class="tooltip" id="tooltip"></div>
|
||||
|
||||
<!-- Upload Overlay -->
|
||||
<div class="upload-overlay" id="uploadOverlay">
|
||||
<div class="upload-box">
|
||||
<h2 style="margin-bottom:10px;">上传音频开始分析</h2>
|
||||
<p style="color:#666;">支持 MP3, WAV, M4A</p>
|
||||
<input type="file" id="fileInput" accept="audio/*" hidden>
|
||||
<button class="btn" onclick="document.getElementById('fileInput').click()">选择文件</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user