feat: frontend connects to real backend API

frontend/app.js

@@ -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();
+    initApp();
-    loadSampleData(); // For demo
 });
 
-// Sample data for demo
+// Initialize app - load projects
-function loadSampleData() {
+async function initApp() {
-    currentData = {
+    try {
-        transcript_id: "demo_001",
+        const projects = await fetchProjects();
-        segments: [
+        if (projects.length === 0) {
-            {
+            // Create default project
-                start: 0,
+            await createProject('默认项目', '自动创建的默认项目');
-                end: 5,
+            location.reload();
-                text: "我们今天讨论 Project Alpha 的进度，需要协调后端团队和前端团队。",
+            return;
-                speaker: "张三"
+        }
-            },
+        
-            {
+        currentProject = projects[0];
-                start: 5,
+        renderProjectSelector(projects);
-                end: 12,
+        initUpload();
-                text: "K8s 集群已经部署完成，但是 Redis 缓存出现了一些问题。",
+        
-                speaker: "李四"
+        // Load existing entities for this project
-            },
+        await loadProjectEntities();
-            {
+        
-                start: 12,
+    } catch (err) {
-                end: 18,
+        console.error('Init failed:', err);
-                text: "建议下周进行 Code Review，确保代码质量符合标准。",
+        alert('加载失败，请刷新重试');
-                speaker: "王五"
+    }
-            }
+}
-        ],
+
-        entities: [
+// API Calls
-            { id: 'ent_1', name: 'Project Alpha', type: 'PROJECT', start: 8, end: 21, definition: '当前核心开发项目' },
+async function fetchProjects() {
-            { id: 'ent_2', name: 'K8s', type: 'TECH', start: 0, end: 3, definition: 'Kubernetes容器编排平台' },
+    const res = await fetch(`${API_BASE}/projects`);
-            { id: 'ent_3', name: 'Redis', type: 'TECH', start: 32, end: 37, definition: '内存数据库缓存系统' },
+    if (!res.ok) throw new Error('Failed to fetch projects');
-            { id: 'ent_4', name: 'Code Review', type: 'OTHER', start: 10, end: 21, definition: '代码审查流程' }
+    return await res.json();
-        ],
+}
-        full_text: "我们今天讨论 Project Alpha 的进度..."
+
+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();
+    header.appendChild(selector);
-    renderGraph();
-    renderEntityList();
-    document.getElementById('uploadOverlay').classList.add('hidden');
 }
 
 // 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)
+// Select entity
-function selectEntity(entityId) {
+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>
+            `;
+        }
     });
 }

frontend/index.html

@@ -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>
+        <h1>InsightFlow 知识工作台</h1>
-        <span style="color:#666;font-size:0.85rem;">Phase 2 - 双视图联动</span>
+        <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>