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

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>