huanghai/dsProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8e799f8d5568d05823039a4a164dde495ebcbc02
dsProject/dsLightRag/Tools/knowledge_graph.html

250 lines
2.5 MiB
HTML
Raw Normal View History

'commit'
2025-08-14 15:45:08 +08:00
<html>
<head>
<meta charset="utf-8">
<script src="lib/bindings/utils.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<center>
<h1></h1>
</center>
<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"
></script>
<center>
<h1></h1>
</center>
<style type="text/css">
#mynetwork {
width: 100%;
height: 100vh;
background-color: #ffffff;
border: 1px solid lightgray;
position: relative;
float: left;
}
#loadingBar {
position:absolute;
top:0px;
left:0px;
width: 100%;
height: 100vh;
background-color:rgba(200,200,200,0.8);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
opacity:1;
}
#bar {
position:absolute;
top:0px;
left:0px;
width:20px;
height:20px;
margin:auto auto auto auto;
border-radius:11px;
border:2px solid rgba(30,30,30,0.05);
background: rgb(0, 173, 246); /* Old browsers */
box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
}
#border {
position:absolute;
top:10px;
left:10px;
width:500px;
height:23px;
margin:auto auto auto auto;
box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
border-radius:10px;
}
#text {
position:absolute;
top:8px;
left:530px;
width:30px;
height:50px;
margin:auto auto auto auto;
font-size:22px;
color: #000000;
}
div.outerBorder {
position:relative;
top:400px;
width:600px;
height:44px;
margin:auto auto auto auto;
border:8px solid rgba(0,0,0,0.1);
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
border-radius:72px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="card" style="width: 100%">
<div id="mynetwork" class="card-body"></div>
</div>
<div id="loadingBar">
<div class="outerBorder">
<div id="text">0%</div>
<div id="border">
<div id="bar"></div>
</div>
</div>
</div>
<script type="text/javascript">
// initialize global variables.
var edges;
var nodes;
var allNodes;
var allEdges;
var nodeColors;
var originalNodes;
var network;
var container;
var options, data;
var filter = {
item : '',
property : '',
value : []
};
// This method is responsible for drawing the graph, returns the drawn network
function drawGraph() {
var container = document.getElementById('mynetwork');
// parsing and collecting nodes and edges from the python
nodes = new vis.DataSet([{"color": "#59a103", "created_at": 1752674350, "description": "A comprehensive discussion on various issues in elementary school mathematics teaching, covering number recognition, operations, geometry, and statistics.", "entity_id": "\u5c0f\u5b66\u6570\u5b66\u6559\u5b66\u4e2d\u7684\u82e5\u5e72\u95ee\u9898", "entity_type": "category", "file_path": "unknown_source", "id": "\u5c0f\u5b66\u6570\u5b66\u6559\u5b66\u4e2d\u7684\u82e5\u5e72\u95ee\u9898", "label": "\u5c0f\u5b66\u6570\u5b66\u6559\u5b66\u4e2d\u7684\u82e5\u5e72\u95ee\u9898", "shape": "dot", "size": 10, "source_id": "chunk-077f3fe9070c0d50896deaf218c86bde", "title": "A comprehensive discussion on various issues in elementary school mathematics teaching, covering number recognition, operations, geometry, and statistics."}, {"color": "#ed8f2b", "created_at": 1752674350, "description": "A section discussing the understanding of numbers, including natural numbers, negatives, fractions, and decimals.", "entity_id": "\u6570\u7684\u8ba4\u8bc6", "entity_type": "category", "file_path": "unknown_source", "id": "\u6570\u7684\u8ba4\u8bc6", "label": "\u6570\u7684\u8ba4\u8bc6", "shape": "dot", "size": 10, "source_id": "chunk-077f3fe9070c0d50896deaf218c86bde", "title": "A section discussing the understanding of numbers, including natural numbers, negatives, fractions, and decimals."}, {"color": "#0bd472", "created_at": 1752674350, "description": "A section exploring arithmetic operations, including addition, subtraction, multiplication, and division, and their mathematical principles.\u003cSEP\u003e\u6570\u7684\u8fd0\u7b97refers to the basic arithmetic operations-like addition-that students are expected to understand in the\u7b2c\u4e00\u5b66\u6bb5, particularly in relation to real-world problems.", "entity_id": "\u6570\u7684\u8fd0\u7b97", "entity_type": "category", "file_path": "unknown_source", "id": "\u6570\u7684\u8fd0\u7b97", "label": "\u6570\u7684\u8fd0\u7b97", "shape": "dot", "size": 10, "source_id": "chunk-612d665e8236ed57ac928a378892167b\u003cSEP\u003echunk-077f3fe9070c0d50896deaf218c86bde", "title": "A section exploring arithmetic operations, including addition, subtraction, multiplication, and division, and their mathematical principles.\u003cSEP\u003e\u6570\u7684\u8fd0\u7b97refers to the basic arithmetic operations-like addition-that students are expected to understand in the\u7b2c\u4e00\u5b66\u6bb5, particularly in relation to real-world problems."}, {"color": "#729a4d", "created_at": 1752674350, "description": "A mathematics curriculum domain focusing on shape recognition and geometric properties in primary education.\u003cSEP\u003eA section on geometry, covering points, lines, shapes, and spatial concepts, as well as their educational value.\u003cSEP\u003eThe mathematics subject area covering shapes and spatial relationships in curriculum reform.\u003cSEP\u003e\u56fe\u5f62\u4e0e\u51e0\u4f55\u662f\u5c0f\u5b66\u6570\u5b66\u7684\u91cd\u8981\u5185\u5bb9\uff0c\u6db5\u76d6\u56fe\u5f62\u7684\u5206\u7c7b\u3001\u5ea6\u91cf\u3001\u8fd0\u52a8\u7b49\u76f4\u89c2\u51e0\u4f55\u6982\u5ff5and provides a foundation for understanding spatial relationships and properties of shapes.", "entity_id": "\u56fe\u5f62\u4e0e\u51e0\u4f55", "entity_type": "category", "file_path": "unknown_source", "id": "\u56fe\u5f62\u4e0e\u51e0\u4f55", "label": "\u56fe\u5f62\u4e0e\u51e0\u4f55", "shape": "dot", "size": 10, "source_id": "chunk-b8cb0b3bb1cff9a2ccf4623209e1bea6\u003cSEP\u003echunk-430e3c18006bdd475de44abe95f47d89\u003cSEP\u003echunk-077f3fe9070c0d50896deaf218c86bde\u003cSEP\u003echunk-2abc65aa9bf3cc848d8609779c8072da", "title": "A mathematics curriculum domain focusing on shape recognition and geometric properties in primary education.\u003cSEP\u003eA section on geometry, covering points, lines, shapes, and spatial concepts, as well as their educational value.\u003cSEP\u003eThe mathematics subject area covering shapes and spatial relationships in curriculum reform.\u003cSEP\u003e\u56fe\u5f62\u4e0e\u51e0\u4f55\u662f\u5c0f\u5b66\u6570\u5b66\u7684\u91cd\u8981\u518
edges = new vis.DataSet([{"created_at": 1752674566, "description": "The text includes a detailed section on understanding numbers, forming a core part of the discussion.", "file_path": "unknown_source", "from": "\u5c0f\u5b66\u6570\u5b66\u6559\u5b66\u4e2d\u7684\u82e5\u5e72\u95ee\u9898", "keywords": "curriculum focus,educational content", "source_id": "chunk-077f3fe9070c0d50896deaf218c86bde", "title": "The text includes a detailed section on understanding numbers, forming a core part of the discussion.", "to": "\u6570\u7684\u8ba4\u8bc6", "width": 9.0}, {"created_at": 1752674566, "description": "The text dedicates a section to arithmetic operations, highlighting their importance in elementary math.", "file_path": "unknown_source", "from": "\u5c0f\u5b66\u6570\u5b66\u6559\u5b66\u4e2d\u7684\u82e5\u5e72\u95ee\u9898", "keywords": "foundational skills,mathematical operations", "source_id": "chunk-077f3fe9070c0d50896deaf218c86bde", "title": "The text dedicates a section to arithmetic operations, highlighting their importance in elementary math.", "to": "\u6570\u7684\u8fd0\u7b97", "width": 9.0}, {"created_at": 1752674566, "description": "Geometry is a key section in the text, addressing spatial concepts and their educational value.", "file_path": "unknown_source", "from": "\u5c0f\u5b66\u6570\u5b66\u6559\u5b66\u4e2d\u7684\u82e5\u5e72\u95ee\u9898", "keywords": "geometry education,spatial reasoning", "source_id": "chunk-077f3fe9070c0d50896deaf218c86bde", "title": "Geometry is a key section in the text, addressing spatial concepts and their educational value.", "to": "\u56fe\u5f62\u4e0e\u51e0\u4f55", "width": 8.0}, {"created_at": 1752674566, "description": "The text includes a section on statistics and probability, emphasizing data analysis in elementary education.", "file_path": "unknown_source", "from": "\u5c0f\u5b66\u6570\u5b66\u6559\u5b66\u4e2d\u7684\u82e5\u5e72\u95ee\u9898", "keywords": "data literacy,statistical concepts", "source_id": "chunk-077f3fe9070c0d50896deaf218c86bde", "title": "The text includes a section on statistics and probability, emphasizing data analysis in elementary education.", "to": "\u7edf\u8ba1\u4e0e\u6982\u7387", "width": 7.0}, {"created_at": 1752674566, "description": "The author is the creator of this comprehensive work on elementary mathematics education.", "file_path": "unknown_source", "from": "\u5c0f\u5b66\u6570\u5b66\u6559\u5b66\u4e2d\u7684\u82e5\u5e72\u95ee\u9898", "keywords": "academic work,authorship", "source_id": "chunk-077f3fe9070c0d50896deaf218c86bde", "title": "The author is the creator of this comprehensive work on elementary mathematics education.", "to": "\u53f2\u5b81\u4e2d", "width": 10.0}, {"created_at": 1752674566, "description": "The author is affiliated with this institution, contributing to mathematics education research.", "file_path": "unknown_source", "from": "\u53f2\u5b81\u4e2d", "keywords": "academic affiliation,research contribution", "source_id": "chunk-077f3fe9070c0d50896deaf218c86bde", "title": "The author is affiliated with this institution, contributing to mathematics education research.", "to": "\u4e1c\u5317\u5e08\u8303\u5927\u5b66\u6570\u5b66\u4e0e\u7edf\u8ba1\u5b66\u9662", "width": 8.0}, {"created_at": 1752674566, "description": "\u53f2\u5b81\u4e2d\u5f3a\u8c03\u601d\u7ef4\u65b9\u6cd5\u7684\u517b\u6210\u5e94\u901a\u8fc7\u5b66\u751f\u81ea\u4e3b\u611f\u609f\uff0c\u800c\u975e\u6559\u5e08\u76f4\u63a5\u4f20\u6388\u3002", "file_path": "unknown_source", "from": "\u53f2\u5b81\u4e2d", "keywords": "\u601d\u7ef4\u53d1\u5c55,\u6559\u80b2\u7406\u5ff5", "source_id": "chunk-4ad0fa3c80600287487ea0909ce52c30", "title": "\u53f2\u5b81\u4e2d\u5f3a\u8c03\u601d\u7ef4\u65b9\u6cd5\u7684\u517b\u6210\u5e94\u901a\u8fc7\u5b66\u751f\u81ea\u4e3b\u611f\u609f\uff0c\u800c\u975e\u6559\u5e08\u76f4\u63a5\u4f20\u6388\u3002", "to": "\u601d\u7ef4\u65b9\u6cd5", "width": 8.0}, {"created_at": 1752674566, "description": "\u53f2\u5b81\u4e2d\u6240\u8457\u300a\u6570\u5b66\u601d\u60f3\u6982\u8bba\u300b\u591a\u8f91\u5747\u7531\u4e1c\u5317\u5e08\u8303\u5927\u5b66\u51fa\u7248\u793e\u51fa\u7248\u3002",
nodeColors = {};
allNodes = nodes.get({ returnType: "Object" });
for (nodeId in allNodes) {
nodeColors[nodeId] = allNodes[nodeId].color;
}
allEdges = edges.get({ returnType: "Object" });
// adding nodes and edges to the graph
data = {nodes: nodes, edges: edges};
var options = {
"configure": {
"enabled": false
},
"edges": {
"color": {
"inherit": true
},
"smooth": {
"enabled": true,
"type": "dynamic"
}
},
"interaction": {
"dragNodes": true,
"hideEdgesOnDrag": false,
"hideNodesOnDrag": false
},
"physics": {
"enabled": true,
"stabilization": {
"enabled": true,
"fit": true,
"iterations": 1000,
"onlyDynamicEdges": false,
"updateInterval": 50
}
}
};
network = new vis.Network(container, data, options);
network.on("stabilizationProgress", function(params) {
document.getElementById('loadingBar').removeAttribute("style");
var maxWidth = 496;
var minWidth = 20;
var widthFactor = params.iterations/params.total;
var width = Math.max(minWidth,maxWidth * widthFactor);
document.getElementById('bar').style.width = width + 'px';
document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
});
network.once("stabilizationIterationsDone", function() {
document.getElementById('text').innerHTML = '100%';
document.getElementById('bar').style.width = '496px';
document.getElementById('loadingBar').style.opacity = 0;
// really clean the dom element
setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
});
return network;
}
drawGraph();
</script>
</body>
</html>
Reference in New Issue Copy Permalink