181 lines
No EOL
17 KiB
HTML
181 lines
No EOL
17 KiB
HTML
<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>Entity-Aware Memory Graph - Interactive Visualization</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>Entity-Aware Memory Graph - Interactive Visualization</h1>
|
|
</center>
|
|
<style type="text/css">
|
|
|
|
#mynetwork {
|
|
width: 100%;
|
|
height: 900px;
|
|
background-color: #ffffff;
|
|
border: 1px solid lightgray;
|
|
position: relative;
|
|
float: left;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div style="position: absolute; top: 80px; left: 10px; background: white;
|
|
padding: 15px; border: 2px solid #333; border-radius: 8px;
|
|
font-family: Tahoma; box-shadow: 2px 2px 8px rgba(0,0,0,0.3); z-index: 1000;">
|
|
<h3 style="margin-top: 0; border-bottom: 2px solid #333; padding-bottom: 5px;">Legend</h3>
|
|
|
|
<h4 style="margin-bottom: 5px;">Link Types:</h4>
|
|
<div style="margin-left: 10px;">
|
|
<div style="margin: 5px 0;">
|
|
<span style="display: inline-block; width: 40px; height: 3px;
|
|
background: #00bcd4; border-top: 2px dashed #00bcd4;
|
|
vertical-align: middle;"></span>
|
|
<span style="margin-left: 10px;"><b>Temporal</b> - Time-based (cyan, dashed)</span>
|
|
</div>
|
|
<div style="margin: 5px 0;">
|
|
<span style="display: inline-block; width: 40px; height: 3px;
|
|
background: #ff69b4; vertical-align: middle;"></span>
|
|
<span style="margin-left: 10px;"><b>Semantic</b> - Meaning-based (pink, solid)</span>
|
|
</div>
|
|
<div style="margin: 5px 0;">
|
|
<span style="display: inline-block; width: 40px; height: 5px;
|
|
background: #ffd700; vertical-align: middle;"></span>
|
|
<span style="margin-left: 10px;"><b>Entity</b> - Same entity (gold, thick)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 style="margin-bottom: 5px; margin-top: 15px;">Node Colors:</h4>
|
|
<div style="margin-left: 10px;">
|
|
<div style="margin: 5px 0;">
|
|
<span style="display: inline-block; width: 20px; height: 20px;
|
|
background: #e0e0e0; border: 1px solid #999;
|
|
vertical-align: middle;"></span>
|
|
<span style="margin-left: 10px;">Gray - No entities</span>
|
|
</div>
|
|
<div style="margin: 5px 0;">
|
|
<span style="display: inline-block; width: 20px; height: 20px;
|
|
background: #90caf9; border: 1px solid #999;
|
|
vertical-align: middle;"></span>
|
|
<span style="margin-left: 10px;">Light Blue - 1 entity</span>
|
|
</div>
|
|
<div style="margin: 5px 0;">
|
|
<span style="display: inline-block; width: 20px; height: 20px;
|
|
background: #42a5f5; border: 1px solid #999;
|
|
vertical-align: middle;"></span>
|
|
<span style="margin-left: 10px;">Dark Blue - 2+ entities</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 15px; padding-top: 10px; border-top: 1px solid #ccc;
|
|
font-size: 11px; color: #666;">
|
|
<b>Tip:</b> Hover over nodes/edges for details<br>
|
|
<b>Controls:</b> Drag to move, scroll to zoom
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="width: 100%">
|
|
|
|
|
|
<div id="mynetwork" class="card-body"></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": "#42a5f5", "font": {"color": "#000000"}, "id": "749319d1-c2a6-4b63-ad6f-48db1f488051", "label": "Alice goes hiking every weekend in Yosemite.", "shape": "box", "size": 30, "title": "\n \u003cb\u003eText:\u003c/b\u003e Alice goes hiking every weekend in Yosemite.\u003cbr\u003e\n \u003cb\u003eDate:\u003c/b\u003e 2025-10-23\u003cbr\u003e\n \u003cb\u003eContext:\u003c/b\u003e Casual conversation about hobbies\u003cbr\u003e\n \u003cb\u003eEntities:\u003c/b\u003e Yosemite (GPE)\\nAlice (PERSON)\n "}, {"color": "#90caf9", "font": {"color": "#000000"}, "id": "e7a80842-2654-4902-98f4-660f1a465461", "label": "Alice told me she loves hiking in the mountains.", "shape": "box", "size": 25, "title": "\n \u003cb\u003eText:\u003c/b\u003e Alice told me she loves hiking in the mountains.\u003cbr\u003e\n \u003cb\u003eDate:\u003c/b\u003e 2025-10-23\u003cbr\u003e\n \u003cb\u003eContext:\u003c/b\u003e Casual conversation about hobbies\u003cbr\u003e\n \u003cb\u003eEntities:\u003c/b\u003e Alice (PERSON)\n "}, {"color": "#42a5f5", "font": {"color": "#000000"}, "id": "04826ba5-af05-4316-922e-3982198aa66d", "label": "Alice joined Google last year and loves the cultur...", "shape": "box", "size": 30, "title": "\n \u003cb\u003eText:\u003c/b\u003e Alice joined Google last year and loves the culture.\u003cbr\u003e\n \u003cb\u003eDate:\u003c/b\u003e 2025-10-27\u003cbr\u003e\n \u003cb\u003eContext:\u003c/b\u003e Discussion about careers\u003cbr\u003e\n \u003cb\u003eEntities:\u003c/b\u003e Google (ORG)\\nAlice (PERSON)\n "}, {"color": "#42a5f5", "font": {"color": "#000000"}, "id": "3b718943-4ac8-43d8-96bc-b25ce3280a39", "label": "Alice works at Google as a software engineer.", "shape": "box", "size": 30, "title": "\n \u003cb\u003eText:\u003c/b\u003e Alice works at Google as a software engineer.\u003cbr\u003e\n \u003cb\u003eDate:\u003c/b\u003e 2025-10-27\u003cbr\u003e\n \u003cb\u003eContext:\u003c/b\u003e Discussion about careers\u003cbr\u003e\n \u003cb\u003eEntities:\u003c/b\u003e Google (ORG)\\nAlice (PERSON)\n "}, {"color": "#90caf9", "font": {"color": "#000000"}, "id": "a60a9d42-b4c3-4de1-895b-dcc0c8d59a51", "label": "Bob mentioned he enjoys rock climbing.", "shape": "box", "size": 25, "title": "\n \u003cb\u003eText:\u003c/b\u003e Bob mentioned he enjoys rock climbing.\u003cbr\u003e\n \u003cb\u003eDate:\u003c/b\u003e 2025-10-29\u003cbr\u003e\n \u003cb\u003eContext:\u003c/b\u003e Outdoor activities discussion\u003cbr\u003e\n \u003cb\u003eEntities:\u003c/b\u003e Bob (PERSON)\n "}, {"color": "#90caf9", "font": {"color": "#000000"}, "id": "3546239f-acf8-4317-9217-80f9ef30eaea", "label": "Bob climbs in Yosemite too, on weekends.", "shape": "box", "size": 25, "title": "\n \u003cb\u003eText:\u003c/b\u003e Bob climbs in Yosemite too, on weekends.\u003cbr\u003e\n \u003cb\u003eDate:\u003c/b\u003e 2025-10-29\u003cbr\u003e\n \u003cb\u003eContext:\u003c/b\u003e Outdoor activities discussion\u003cbr\u003e\n \u003cb\u003eEntities:\u003c/b\u003e Bob (PERSON)\n "}, {"color": "#e0e0e0", "font": {"color": "#000000"}, "id": "a6e9decf-e17f-496a-badf-e9339dfe1a09", "label": "the Python project uses machine learning.", "shape": "box", "size": 20, "title": "\n \u003cb\u003eText:\u003c/b\u003e the Python project uses machine learning.\u003cbr\u003e\n \u003cb\u003eDate:\u003c/b\u003e 2025-10-30\u003cbr\u003e\n \u003cb\u003eContext:\u003c/b\u003e Technical discussion\u003cbr\u003e\n \u003cb\u003eEntities:\u003c/b\u003e No entities\n "}, {"color": "#42a5f5", "font": {"color": "#000000"}, "id": "dc685eca-d533-4d41-a3d4-551b642d18fc", "label": "Alice is working on a Python project at Google.", "shape": "box", "size": 30, "title": "\n \u003cb\u003eText:\u003c/b\u003e Alice is working on a Python project at Google.\u003cbr\u003e\n \u003cb\u003eDate:\u003c/b\u003e 2025-10-30\u003cbr\u003e\n \u003cb\u003eContext:\u003c/b\u003e Technical discussion\u003cbr\u003e\n \u003cb\u003eEntities:\u003c/b\u003e Google (ORG)\\nAlice (PERSON)\n "}]);
|
|
edges = new vis.DataSet([{"color": "#ffd700", "dashes": false, "from": "749319d1-c2a6-4b63-ad6f-48db1f488051", "label": "Alice: 1.00", "title": "ENTITY: 1.000 (Entity: Alice)", "to": "e7a80842-2654-4902-98f4-660f1a465461", "value": 3.0, "width": 4}, {"color": "#ffd700", "dashes": false, "from": "dc685eca-d533-4d41-a3d4-551b642d18fc", "label": "Google: 1.00", "title": "ENTITY: 1.000 (Entity: Google)", "to": "3b718943-4ac8-43d8-96bc-b25ce3280a39", "value": 3.0, "width": 4}, {"color": "#ffd700", "dashes": false, "from": "dc685eca-d533-4d41-a3d4-551b642d18fc", "label": "Google: 1.00", "title": "ENTITY: 1.000 (Entity: Google)", "to": "04826ba5-af05-4316-922e-3982198aa66d", "value": 3.0, "width": 4}, {"color": "#ffd700", "dashes": false, "from": "3546239f-acf8-4317-9217-80f9ef30eaea", "label": "Bob: 1.00", "title": "ENTITY: 1.000 (Entity: Bob)", "to": "a60a9d42-b4c3-4de1-895b-dcc0c8d59a51", "value": 3.0, "width": 4}, {"color": "#ffd700", "dashes": false, "from": "3b718943-4ac8-43d8-96bc-b25ce3280a39", "label": "Alice: 1.00", "title": "ENTITY: 1.000 (Entity: Alice)", "to": "749319d1-c2a6-4b63-ad6f-48db1f488051", "value": 3.0, "width": 4}, {"color": "#ffd700", "dashes": false, "from": "3b718943-4ac8-43d8-96bc-b25ce3280a39", "label": "Alice: 1.00", "title": "ENTITY: 1.000 (Entity: Alice)", "to": "e7a80842-2654-4902-98f4-660f1a465461", "value": 3.0, "width": 4}, {"color": "#ffd700", "dashes": false, "from": "dc685eca-d533-4d41-a3d4-551b642d18fc", "label": "Alice: 1.00", "title": "ENTITY: 1.000 (Entity: Alice)", "to": "e7a80842-2654-4902-98f4-660f1a465461", "value": 3.0, "width": 4}, {"color": "#ffd700", "dashes": false, "from": "dc685eca-d533-4d41-a3d4-551b642d18fc", "label": "Alice: 1.00", "title": "ENTITY: 1.000 (Entity: Alice)", "to": "749319d1-c2a6-4b63-ad6f-48db1f488051", "value": 3.0, "width": 4}, {"color": "#ffd700", "dashes": false, "from": "04826ba5-af05-4316-922e-3982198aa66d", "label": "Google: 1.00", "title": "ENTITY: 1.000 (Entity: Google)", "to": "3b718943-4ac8-43d8-96bc-b25ce3280a39", "value": 3.0, "width": 4}, {"color": "#ffd700", "dashes": false, "from": "04826ba5-af05-4316-922e-3982198aa66d", "label": "Alice: 1.00", "title": "ENTITY: 1.000 (Entity: Alice)", "to": "749319d1-c2a6-4b63-ad6f-48db1f488051", "value": 3.0, "width": 4}, {"color": "#ffd700", "dashes": false, "from": "04826ba5-af05-4316-922e-3982198aa66d", "label": "Alice: 1.00", "title": "ENTITY: 1.000 (Entity: Alice)", "to": "e7a80842-2654-4902-98f4-660f1a465461", "value": 3.0, "width": 4}, {"color": "#ff69b4", "dashes": false, "from": "3546239f-acf8-4317-9217-80f9ef30eaea", "label": "S: 0.90", "title": "SEMANTIC: 0.903", "to": "749319d1-c2a6-4b63-ad6f-48db1f488051", "value": 2.71039057559799, "width": 2}, {"color": "#ff69b4", "dashes": false, "from": "a6e9decf-e17f-496a-badf-e9339dfe1a09", "label": "S: 0.88", "title": "SEMANTIC: 0.876", "to": "dc685eca-d533-4d41-a3d4-551b642d18fc", "value": 2.627091898766076, "width": 2}, {"color": "#ff69b4", "dashes": false, "from": "a60a9d42-b4c3-4de1-895b-dcc0c8d59a51", "label": "S: 0.87", "title": "SEMANTIC: 0.867", "to": "e7a80842-2654-4902-98f4-660f1a465461", "value": 2.601015997054119, "width": 2}, {"color": "#ff69b4", "dashes": false, "from": "a60a9d42-b4c3-4de1-895b-dcc0c8d59a51", "label": "S: 0.84", "title": "SEMANTIC: 0.839", "to": "749319d1-c2a6-4b63-ad6f-48db1f488051", "value": 2.517087521205864, "width": 2}, {"color": "#ff69b4", "dashes": false, "from": "3546239f-acf8-4317-9217-80f9ef30eaea", "label": "S: 0.83", "title": "SEMANTIC: 0.833", "to": "e7a80842-2654-4902-98f4-660f1a465461", "value": 2.500378757782956, "width": 2}, {"color": "#ff69b4", "dashes": false, "from": "a6e9decf-e17f-496a-badf-e9339dfe1a09", "label": "S: 0.79", "title": "SEMANTIC: 0.793", "to": "3b718943-4ac8-43d8-96bc-b25ce3280a39", "value": 2.3786623139386167, "width": 2}, {"color": "#ff69b4", "dashes": false, "from": "3546239f-acf8-4317-9217-80f9ef30eaea", "label": "S: 0.78", "title": "SEMANTIC: 0.784", "to": "3b718943-4ac8-43d8-96bc-b25ce3280a39", "value": 2.352983586934743, "width": 2}, {"color": "#ff69b4", "dashes": false, "from": "a60a9d42-b4c3-4de1-895b-dcc0c8d59a51", "label": "S: 0.78", "title": "SEMANTIC: 0.784", "to": "04826ba5-af05-4316-922e-3982198aa66d", "value": 2.350930312220439, "width": 2}, {"color": "#ff69b4", "dashes": false, "from": "a60a9d42-b4c3-4de1-895b-dcc0c8d59a51", "label": "S: 0.78", "title": "SEMANTIC: 0.777", "to": "3b718943-4ac8-43d8-96bc-b25ce3280a39", "value": 2.331290274675819, "width": 2}, {"color": "#ff69b4", "dashes": false, "from": "dc685eca-d533-4d41-a3d4-551b642d18fc", "label": "S: 0.77", "title": "SEMANTIC: 0.774", "to": "a60a9d42-b4c3-4de1-895b-dcc0c8d59a51", "value": 2.3232115525225376, "width": 2}, {"color": "#ff69b4", "dashes": false, "from": "3546239f-acf8-4317-9217-80f9ef30eaea", "label": "S: 0.77", "title": "SEMANTIC: 0.771", "to": "04826ba5-af05-4316-922e-3982198aa66d", "value": 2.314053654670731, "width": 2}, {"color": "#ff69b4", "dashes": false, "from": "a6e9decf-e17f-496a-badf-e9339dfe1a09", "label": "S: 0.76", "title": "SEMANTIC: 0.760", "to": "04826ba5-af05-4316-922e-3982198aa66d", "value": 2.279010944602281, "width": 2}, {"color": "#ff69b4", "dashes": false, "from": "a6e9decf-e17f-496a-badf-e9339dfe1a09", "label": "S: 0.74", "title": "SEMANTIC: 0.736", "to": "a60a9d42-b4c3-4de1-895b-dcc0c8d59a51", "value": 2.2074379550031873, "width": 2}, {"color": "#ff69b4", "dashes": false, "from": "a6e9decf-e17f-496a-badf-e9339dfe1a09", "label": "S: 0.73", "title": "SEMANTIC: 0.734", "to": "749319d1-c2a6-4b63-ad6f-48db1f488051", "value": 2.2021311997098, "width": 2}]);
|
|
|
|
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 = {"nodes": {"font": {"size": 14, "face": "Tahoma"}, "borderWidth": 2, "borderWidthSelected": 3}, "edges": {"smooth": {"type": "continuous", "forceDirection": "none"}, "font": {"size": 12, "align": "middle"}}, "physics": {"enabled": true, "stabilization": {"enabled": true, "iterations": 200}, "barnesHut": {"gravitationalConstant": -8000, "centralGravity": 0.3, "springLength": 200, "springConstant": 0.04, "damping": 0.09}}, "interaction": {"hover": true, "tooltipDelay": 100, "navigationButtons": true, "keyboard": true}};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
network = new vis.Network(container, data, options);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return network;
|
|
|
|
}
|
|
drawGraph();
|
|
</script>
|
|
</body>
|
|
</html> |