feat: Phase 2 workbench - dual-view editor with D3 graph

frontend/app.js

@@ -1,10 +1,262 @@
+// InsightFlow Phase 2 - Workbench
 const API_BASE = '/api/v1';
-async function upload(file) {
+
-    const formData = new FormData();
+let currentData = null;
-    formData.append('file', file);
+let selectedEntity = null;
-    const res = await fetch(API_BASE + '/upload', {
+
-        method: 'POST',
+// Init
-        body: formData
+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();
 }

frontend/index.html

@@ -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; }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
-        h1 { color: #00d4ff; }
+        body {
-        .upload { border: 2px dashed #333; padding: 40px; text-align: center; border-radius: 8px; }
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        .entity { background: rgba(123,44,191,0.3); padding: 2px 6px; border-radius: 4px; }
+            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>
+    <div class="header">
-    <p>Phase 1 MVP - 音频转录与实体提取</p>
+        <h1>InsightFlow Workbench</h1>
-    <div class="upload">拖拽音频文件上传</div>
+        <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>