diff --git a/lightrag/api/webui/static/css/graph.css b/lightrag/api/webui/static/css/graph.css
index 098ff2f6..4b76a5c8 100644
--- a/lightrag/api/webui/static/css/graph.css
+++ b/lightrag/api/webui/static/css/graph.css
@@ -1,6 +1,6 @@
/* css/lightrag.css */
-/* 模态框样式 */
+/*Modal box style*/
.modal {
display: none;
position: fixed;
@@ -50,7 +50,7 @@
color: var(--text-primary);
}
-/* 图谱节点样式 */
+/* graph style */
.node {
cursor: pointer;
fill: var(--primary);
@@ -73,20 +73,14 @@
pointer-events: none;
}
-/* 添加边样式 */
+/* edge style */
.link {
- stroke: #999; /* 连线颜色 */
- stroke-width: 2px; /* 连线粗细 */
- stroke-opacity: 0.6;/* 透明度 */
-}
-/* 边样式 */
-.link {
- stroke: #999; /* 边颜色 */
- stroke-width: 2px; /* 边粗细 */
- stroke-opacity: 0.8; /* 边透明度 */
+ stroke: #999;
+ stroke-width: 2px;
+ stroke-opacity: 0.8;
}
-/* 箭头颜色匹配边颜色 */
+/* Arrow color matches edge color */
#arrow path {
- fill: #999 !important; /* 覆盖默认颜色 */
+ fill: #999 !important;
}
diff --git a/lightrag/api/webui/static/css/lightrag.css b/lightrag/api/webui/static/css/lightrag.css
index e803f51a..d7d822dd 100644
--- a/lightrag/api/webui/static/css/lightrag.css
+++ b/lightrag/api/webui/static/css/lightrag.css
@@ -12,7 +12,7 @@ body {
color: var(--text-primary);
}
-/* 主容器 */
+/* main container */
.app-container {
max-width: 1600px;
margin: 0 auto;
@@ -23,7 +23,7 @@ body {
min-height: 100vh;
}
-/* 导航侧边栏 */
+/* Navigation sidebar */
.nav-panel {
position: sticky;
top: 2rem;
@@ -43,14 +43,14 @@ body {
border-bottom: 1px solid var(--border);
}
-/* 主内容区 */
+/* Main content area */
.main-content {
display: grid;
gap: 1.5rem;
align-content: start;
}
-/* 卡片式模块 */
+/* Card based module */
.card {
background: var(--surface);
border-radius: 12px;
@@ -70,7 +70,7 @@ body {
color: var(--primary);
}
-/* 文件上传区域 */
+/* File upload area */
.file-dropzone {
border: 2px dashed var(--border);
border-radius: 8px;
@@ -85,7 +85,7 @@ body {
background: rgba(79, 70, 229, 0.05);
}
-/* 按钮样式 */
+
.btn {
display: inline-flex;
align-items: center;
@@ -116,7 +116,6 @@ body {
background: #059669;
}
-/* 输入框样式 */
.input-field {
width: 100%;
padding: 0.875rem;
@@ -132,7 +131,7 @@ body {
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
-/* 响应式设计 */
+
@media (max-width: 768px) {
.app-container {
grid-template-columns: 1fr;
@@ -144,7 +143,6 @@ body {
margin-bottom: 1.5rem;
}
- /* 添加按钮激活状态样式 */
.btn.active {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
transform: translateY(1px);
@@ -230,7 +228,6 @@ body {
color: white;
}
-/* 添加以下CSS样式 */
.status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -322,13 +319,11 @@ body {
border: 1px solid rgba(16, 185, 129, 0.2);
}
-/* 加载状态 */
.status-badge.loading {
background: rgba(79, 70, 229, 0.1);
color: var(--primary);
}
-/* 错误状态 */
.status-badge.error {
background: rgba(239, 68, 68, 0.1);
color: #EF4444;
diff --git a/lightrag/api/webui/static/index.html b/lightrag/api/webui/static/index.html
index 8884eb7a..f28c8ee9 100644
--- a/lightrag/api/webui/static/index.html
+++ b/lightrag/api/webui/static/index.html
@@ -261,19 +261,19 @@
}
function showSection(sectionId) {
- // 隐藏所有内容区块 Hide all content blocks
+ // Hide all content blocks
const sections = document.querySelectorAll('.main-content .card');
sections.forEach(section => {
section.style.display = 'none';
});
- // 显示目标区块 Display target block
+ // Display target block
const targetSection = document.getElementById(sectionId);
if (targetSection) {
targetSection.style.display = 'block';
}
- // 更新按钮激活状态（可选）Update button activation status (optional)
+ // Update button activation status (optional)
const buttons = document.querySelectorAll('.nav-menu button');
buttons.forEach(button => {
button.classList.remove('active');
@@ -281,10 +281,9 @@
event.target.classList.add('active');
}
- // 初始化显示文档管理模块 Initialize the display document management module
+ // Initialize the display document management module
showSection('documents');
-
diff --git a/lightrag/api/webui/static/js/graph.js b/lightrag/api/webui/static/js/graph.js
index 5c3318c7..140a7781 100644
--- a/lightrag/api/webui/static/js/graph.js
+++ b/lightrag/api/webui/static/js/graph.js
@@ -38,7 +38,7 @@ async function getGraph(label) {
node.id = Date.now().toString(36) + Math.random().toString(36).substring(2); // 使用 crypto.randomUUID() 生成唯一 UUID
});
- // 严格验证边数据 Strictly verify edge data
+ // Strictly verify edge data
const edges = (rawData.edges || []).map(edge => {
const sourceNode = nodes.find(n => n.labels.includes(edge.source));
const targetNode = nodes.find(n => n.labels.includes(edge.target)
@@ -72,20 +72,19 @@ async function renderGraph(label) {
return;
}
- //
+
const svg = d3.select("#graph-svg");
const width = svg.node().clientWidth;
const height = svg.node().clientHeight;
- //
svg.selectAll("*").remove();
- // 创建力导向图布局 Create a force oriented diagram layout
+ // Create a force oriented diagram layout
const simulation = d3.forceSimulation(data.nodes)
.force("charge", d3.forceManyBody().strength(-300))
.force("center", d3.forceCenter(width / 2, height / 2));
- // 添加连线（如果存在有效边） Add a connection (if there are valid edges)
+ // Add a connection (if there are valid edges)
if (data.edges.length > 0) {
simulation.force("link",
d3.forceLink(data.edges)
@@ -94,9 +93,7 @@ async function renderGraph(label) {
);
}
-
-
- // 绘制节点 Draw nodes
+ // Draw nodes
const nodes = svg.selectAll(".node")
.data(data.nodes)
.enter()
@@ -123,21 +120,21 @@ async function renderGraph(label) {
.attr("d", "M0,0 L10,5 L0,10 Z")
.attr("fill", "#999");
- // 绘制边（带箭头） Draw edges (with arrows)
+ // Draw edges (with arrows)
const links = svg.selectAll(".link")
.data(data.edges)
.enter()
.append("line")
.attr("class", "link")
- .attr("marker-end", "url(#arrow-out)"); // 始终在 target 侧绘制箭头 Always draw arrows on the target side
+ .attr("marker-end", "url(#arrow-out)"); // Always draw arrows on the target side
- // 边样式配置 Edge style configuration
+ // Edge style configuration
links
.attr("stroke", "#999")
.attr("stroke-width", 2)
.attr("stroke-opacity", 0.8);
- // 绘制标签（带背景框） Draw label (with background box)
+ // Draw label (with background box)
const labels = svg.selectAll(".label")
.data(data.nodes)
.enter()
@@ -148,16 +145,16 @@ async function renderGraph(label) {
.attr("dy", "0.3em")
.attr("fill", "#333");
- // 更新位置 Update Location
+ // Update Location
simulation.on("tick", () => {
links
.attr("x1", d => {
- // 计算源节点到目标节点的方向向量 Calculate the direction vector from the source node to the target node
+ // Calculate the direction vector from the source node to the target node
const dx = d.target.x - d.source.x;
const dy = d.target.y - d.source.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance === 0) return d.source.x; // 避免除以零 Avoid dividing by zero
- // 根据半径 10 调整起点坐标（源节点边缘）Adjust the starting point coordinates (source node edge) based on radius 10
+ // Adjust the starting point coordinates (source node edge) based on radius 10
return d.source.x + (dx / distance) * 10;
})
.attr("y1", d => {
@@ -168,7 +165,7 @@ async function renderGraph(label) {
return d.source.y + (dy / distance) * 10;
})
.attr("x2", d => {
- // 根据半径 10 调整终点坐标（目标节点边缘） Adjust the endpoint coordinates (target node edge) based on a radius of 10
+ // Adjust the endpoint coordinates (target node edge) based on a radius of 10
const dx = d.target.x - d.source.x;
const dy = d.target.y - d.source.y;
const distance = Math.sqrt(dx * dx + dy * dy);
@@ -183,7 +180,7 @@ async function renderGraph(label) {
return d.target.y - (dy / distance) * 10;
});
- // 更新节点和标签的位置（保持不变） Update the position of nodes and labels (keep unchanged)
+ // Update the position of nodes and labels (keep unchanged)
nodes
.attr("cx", d => d.x)
.attr("cy", d => d.y);
@@ -193,7 +190,7 @@ async function renderGraph(label) {
.attr("y", d => d.y + 4);
});
- // 拖拽逻辑 Drag and drop logic
+ // Drag and drop logic
function dragStarted(event, d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;