sayou-visualizer 0.0.10__tar.gz → 0.0.11__tar.gz
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/PKG-INFO +1 -1
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/pyproject.toml +1 -1
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/src/sayou/visualizer/pipeline.py +13 -3
- sayou_visualizer-0.0.11/src/sayou/visualizer/renderer/showcase_kg_renderer.py +291 -0
- sayou_visualizer-0.0.10/src/sayou/visualizer/renderer/showcase_kg_renderer.py +0 -303
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/.gitignore +0 -0
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/README.md +0 -0
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/examples/quick_start.py +0 -0
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/examples/quick_start_ws_client.py +0 -0
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/examples/quick_start_ws_server.py +0 -0
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/src/sayou/visualizer/__init__.py +0 -0
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/src/sayou/visualizer/core/exceptions.py +0 -0
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/src/sayou/visualizer/core/schemas.py +0 -0
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/src/sayou/visualizer/interfaces/base_renderer.py +0 -0
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/src/sayou/visualizer/renderer/analytic_kg_renderer.py +0 -0
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/src/sayou/visualizer/renderer/pyvis_renderer.py +0 -0
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/src/sayou/visualizer/tracer/graph_tracer.py +0 -0
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/src/sayou/visualizer/tracer/rich_tracer.py +0 -0
- {sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/src/sayou/visualizer/tracer/websocket_tracer.py +0 -0
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
from sayou.core.base_component import BaseComponent
|
|
2
2
|
|
|
3
|
-
from .renderer.
|
|
3
|
+
from .renderer.analytic_kg_renderer import AnalyticKGRenderer
|
|
4
|
+
from .renderer.showcase_kg_renderer import ShowcaseKGRenderer
|
|
4
5
|
from .renderer.pyvis_renderer import PyVisRenderer
|
|
5
6
|
from .tracer.graph_tracer import GraphTracer
|
|
6
7
|
from .tracer.rich_tracer import RichConsoleTracer
|
|
@@ -81,11 +82,20 @@ class VisualizerPipeline(BaseComponent):
|
|
|
81
82
|
self._renderer = PyVisRenderer()
|
|
82
83
|
self._renderer.render(self._graph_tracer.graph, output_path, **kwargs)
|
|
83
84
|
|
|
84
|
-
def
|
|
85
|
+
def render_analytic_kg(self, json_path: str, output_path: str = "kg_view.html"):
|
|
85
86
|
"""
|
|
86
87
|
Visualizes the OUTPUT JSON (Knowledge Graph).
|
|
87
88
|
"""
|
|
88
|
-
self._kg_renderer =
|
|
89
|
+
self._kg_renderer = AnalyticKGRenderer()
|
|
90
|
+
self._kg_renderer.render(json_path, output_path)
|
|
91
|
+
|
|
92
|
+
def render_showcase_kg(
|
|
93
|
+
self, json_path: str, output_path: str = "showcase_kg_view.html"
|
|
94
|
+
):
|
|
95
|
+
"""
|
|
96
|
+
Visualizes the OUTPUT JSON (Knowledge Graph).
|
|
97
|
+
"""
|
|
98
|
+
self._kg_renderer = ShowcaseKGRenderer()
|
|
89
99
|
self._kg_renderer.render(json_path, output_path)
|
|
90
100
|
|
|
91
101
|
def save_live_log(self, output_path="live_status.html"):
|
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
import json
|
|
2
|
+
import os
|
|
3
|
+
from sayou.core.base_component import BaseComponent
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
class ShowcaseKGRenderer(BaseComponent):
|
|
7
|
+
"""
|
|
8
|
+
Renders the Final Stable 3D Knowledge Graph.
|
|
9
|
+
- [Architecture] Removed unstable Post-Processing shaders to fix physics crash.
|
|
10
|
+
- [Visuals] Uses native 'Emissive' materials for Neon aesthetics.
|
|
11
|
+
- [Topology] Distinguishes 'Imports' (Gold/Bright) vs 'Hierarchy' (Dark/Blue).
|
|
12
|
+
"""
|
|
13
|
+
|
|
14
|
+
component_name = "ShowcaseKGRenderer"
|
|
15
|
+
|
|
16
|
+
def render(self, json_path: str, output_path: str = "sayou_showcase_3d.html"):
|
|
17
|
+
if not os.path.exists(json_path):
|
|
18
|
+
return
|
|
19
|
+
|
|
20
|
+
with open(json_path, "r", encoding="utf-8") as f:
|
|
21
|
+
raw_data = json.load(f)
|
|
22
|
+
|
|
23
|
+
nodes = []
|
|
24
|
+
links = []
|
|
25
|
+
existing_ids = set()
|
|
26
|
+
|
|
27
|
+
for node in raw_data.get("nodes", []):
|
|
28
|
+
node_id = node.get("node_id")
|
|
29
|
+
existing_ids.add(node_id)
|
|
30
|
+
attrs = node.get("attributes", {})
|
|
31
|
+
n_cls = node.get("node_class", "unknown").lower()
|
|
32
|
+
|
|
33
|
+
group = "Chunk"
|
|
34
|
+
color = "#4a69bd"
|
|
35
|
+
val = 3
|
|
36
|
+
|
|
37
|
+
if "file" in n_cls or "package" in n_cls:
|
|
38
|
+
group = "Document"
|
|
39
|
+
color = "#00d2d3" # Cyan
|
|
40
|
+
val = 20
|
|
41
|
+
elif "class" in n_cls:
|
|
42
|
+
group = "Header"
|
|
43
|
+
color = "#ff6b81" # Pink
|
|
44
|
+
val = 12
|
|
45
|
+
elif "method" in n_cls or "function" in n_cls:
|
|
46
|
+
group = "Code"
|
|
47
|
+
color = "#feca57" # Gold
|
|
48
|
+
val = 6
|
|
49
|
+
elif "library" in n_cls:
|
|
50
|
+
group = "Library"
|
|
51
|
+
color = "#2ed573" # Green
|
|
52
|
+
val = 10
|
|
53
|
+
|
|
54
|
+
label = attrs.get("label") or node.get("friendly_name") or node_id
|
|
55
|
+
if group == "Document":
|
|
56
|
+
label = os.path.basename(attrs.get("sayou:filePath", label))
|
|
57
|
+
|
|
58
|
+
clean_attrs = {}
|
|
59
|
+
for k, v in attrs.items():
|
|
60
|
+
if isinstance(v, str) and len(v) > 200:
|
|
61
|
+
clean_attrs[k] = v[:200] + "..."
|
|
62
|
+
elif not k.startswith("sayou:"):
|
|
63
|
+
clean_attrs[k] = v
|
|
64
|
+
|
|
65
|
+
nodes.append(
|
|
66
|
+
{
|
|
67
|
+
"id": node_id,
|
|
68
|
+
"label": label,
|
|
69
|
+
"group": group,
|
|
70
|
+
"color": color,
|
|
71
|
+
"val": val,
|
|
72
|
+
"attributes": clean_attrs,
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
|
|
76
|
+
# [2] Edge data processing
|
|
77
|
+
for edge in raw_data.get("edges", []):
|
|
78
|
+
src = edge.get("source")
|
|
79
|
+
tgt = edge.get("target")
|
|
80
|
+
|
|
81
|
+
if src in existing_ids and tgt in existing_ids:
|
|
82
|
+
e_type = edge.get("type", "relates")
|
|
83
|
+
is_import = "import" in e_type or "calls" in e_type
|
|
84
|
+
|
|
85
|
+
links.append(
|
|
86
|
+
{
|
|
87
|
+
"source": src,
|
|
88
|
+
"target": tgt,
|
|
89
|
+
"type": e_type,
|
|
90
|
+
"is_import": is_import,
|
|
91
|
+
}
|
|
92
|
+
)
|
|
93
|
+
|
|
94
|
+
graph_data = {"nodes": nodes, "links": links}
|
|
95
|
+
self._generate_html(graph_data, output_path)
|
|
96
|
+
self._log(f"✅ Final Visual Showcase generated at: {output_path}")
|
|
97
|
+
|
|
98
|
+
def _generate_html(self, graph_data, output_path):
|
|
99
|
+
json_str = json.dumps(graph_data)
|
|
100
|
+
|
|
101
|
+
html_content = f"""
|
|
102
|
+
<!DOCTYPE html>
|
|
103
|
+
<html lang="en">
|
|
104
|
+
<head>
|
|
105
|
+
<meta charset="UTF-8">
|
|
106
|
+
<title>Sayou Dataverse</title>
|
|
107
|
+
<script src="https://unpkg.com/three@0.160.0/build/three.min.js"></script>
|
|
108
|
+
<script src="https://unpkg.com/3d-force-graph@1.73.1/dist/3d-force-graph.min.js"></script>
|
|
109
|
+
<style>
|
|
110
|
+
body {{ margin: 0; background-color: #020202; overflow: hidden; font-family: sans-serif; }}
|
|
111
|
+
#graph {{ width: 100%; height: 100vh; }}
|
|
112
|
+
#info {{
|
|
113
|
+
position: absolute; top: 30px; right: 30px; width: 300px;
|
|
114
|
+
background: rgba(15, 20, 30, 0.9);
|
|
115
|
+
border: 1px solid #444; border-left: 4px solid #00d2d3;
|
|
116
|
+
box-shadow: 0 0 20px rgba(0,0,0,0.8);
|
|
117
|
+
color: #fff; padding: 20px; font-size:13px;
|
|
118
|
+
backdrop-filter: blur(5px); display: none; border-radius: 4px; pointer-events: none;
|
|
119
|
+
}}
|
|
120
|
+
.tag {{ display: inline-block; padding: 3px 6px; border-radius: 4px; color: #000; font-weight:bold; font-size:10px; margin-bottom:10px; }}
|
|
121
|
+
h2 {{ margin:0 0 10px 0; font-size:16px; color:#eee; }}
|
|
122
|
+
.row {{ margin-bottom:4px; color:#aaa; border-bottom:1px solid #333; padding-bottom:2px; }}
|
|
123
|
+
.key {{ color:#00d2d3; margin-right:5px; }}
|
|
124
|
+
</style>
|
|
125
|
+
</head>
|
|
126
|
+
<body>
|
|
127
|
+
<div id="graph"></div>
|
|
128
|
+
<div id="info"></div>
|
|
129
|
+
|
|
130
|
+
<script>
|
|
131
|
+
const gData = {json_str};
|
|
132
|
+
const infoDiv = document.getElementById('info');
|
|
133
|
+
|
|
134
|
+
// [State]
|
|
135
|
+
const highlightNodes = new Set();
|
|
136
|
+
const highlightLinks = new Set();
|
|
137
|
+
let hoverNode = null;
|
|
138
|
+
let isFlying = false;
|
|
139
|
+
|
|
140
|
+
// [Init] Big Bang
|
|
141
|
+
gData.nodes.forEach(node => {{
|
|
142
|
+
node.x = Math.random() * 2000 - 1000;
|
|
143
|
+
node.y = Math.random() * 2000 - 1000;
|
|
144
|
+
node.z = Math.random() * 2000 - 1000;
|
|
145
|
+
}});
|
|
146
|
+
|
|
147
|
+
// [Graph Init]
|
|
148
|
+
const Graph = ForceGraph3D()(document.getElementById('graph'))
|
|
149
|
+
.graphData(gData)
|
|
150
|
+
.backgroundColor('#050505')
|
|
151
|
+
.showNavInfo(false)
|
|
152
|
+
.nodeLabel(null)
|
|
153
|
+
.cooldownTicks(50);
|
|
154
|
+
|
|
155
|
+
// [Physics]
|
|
156
|
+
Graph.d3Force('charge').strength(-100);
|
|
157
|
+
Graph.d3Force('link').distance(link => link.is_import ? 10 : 100);
|
|
158
|
+
|
|
159
|
+
// [Visuals]
|
|
160
|
+
Graph
|
|
161
|
+
.nodeThreeObject(node => {{
|
|
162
|
+
let isDimmed = false;
|
|
163
|
+
let isTarget = false;
|
|
164
|
+
if (hoverNode) {{
|
|
165
|
+
if (hoverNode === node || highlightNodes.has(node)) isTarget = true;
|
|
166
|
+
else isDimmed = true;
|
|
167
|
+
}}
|
|
168
|
+
const baseColor = node.color;
|
|
169
|
+
const opacity = isDimmed ? 0.1 : 0.9;
|
|
170
|
+
const emissiveInt = isTarget ? 1.5 : (isDimmed ? 0 : 0.6);
|
|
171
|
+
|
|
172
|
+
const material = new THREE.MeshPhongMaterial({{
|
|
173
|
+
color: baseColor,
|
|
174
|
+
emissive: baseColor,
|
|
175
|
+
emissiveIntensity: emissiveInt,
|
|
176
|
+
transparent: true,
|
|
177
|
+
opacity: opacity,
|
|
178
|
+
shininess: 90
|
|
179
|
+
}});
|
|
180
|
+
|
|
181
|
+
if (node.group === "Document") {{
|
|
182
|
+
const s = node.val;
|
|
183
|
+
const geometry = new THREE.BoxGeometry(s, s, s);
|
|
184
|
+
const edges = new THREE.EdgesGeometry(geometry);
|
|
185
|
+
const lineMat = new THREE.LineBasicMaterial({{ color: baseColor, transparent:true, opacity: isDimmed ? 0.05 : 0.4 }});
|
|
186
|
+
const wireframe = new THREE.LineSegments(edges, lineMat);
|
|
187
|
+
wireframe.add(new THREE.Mesh(new THREE.BoxGeometry(s*0.4, s*0.4, s*0.4), material));
|
|
188
|
+
return wireframe;
|
|
189
|
+
}}
|
|
190
|
+
else if (node.group === "Header") return new THREE.Mesh(new THREE.OctahedronGeometry(node.val * 0.7), material);
|
|
191
|
+
else return new THREE.Mesh(new THREE.IcosahedronGeometry(node.val * 0.6, 2), material);
|
|
192
|
+
}})
|
|
193
|
+
.linkWidth(link => {{
|
|
194
|
+
if (highlightLinks.has(link)) return 3;
|
|
195
|
+
if (hoverNode && !highlightLinks.has(link)) return 0;
|
|
196
|
+
return link.is_import ? 1.5 : 0.5;
|
|
197
|
+
}})
|
|
198
|
+
.linkColor(link => {{
|
|
199
|
+
if (highlightLinks.has(link)) return link.is_import ? '#feca57' : '#00d2d3';
|
|
200
|
+
return link.is_import ? 'rgba(254, 202, 87, 0.4)' : 'rgba(44, 62, 80, 0.3)';
|
|
201
|
+
}})
|
|
202
|
+
.linkDirectionalParticles(link => highlightLinks.has(link) ? 3 : 0)
|
|
203
|
+
.linkDirectionalParticleWidth(3)
|
|
204
|
+
.onNodeHover(node => {{
|
|
205
|
+
if ((!node && !hoverNode) || (node && hoverNode === node)) return;
|
|
206
|
+
|
|
207
|
+
highlightNodes.clear(); highlightLinks.clear();
|
|
208
|
+
if (node) {{
|
|
209
|
+
highlightNodes.add(node);
|
|
210
|
+
gData.links.forEach(link => {{
|
|
211
|
+
if (link.source.id === node.id) {{ highlightNodes.add(link.target); highlightLinks.add(link); }}
|
|
212
|
+
else if (link.target.id === node.id) {{ highlightNodes.add(link.source); highlightLinks.add(link); }}
|
|
213
|
+
}});
|
|
214
|
+
}}
|
|
215
|
+
hoverNode = node || null;
|
|
216
|
+
requestAnimationFrame(() => {{
|
|
217
|
+
Graph
|
|
218
|
+
.nodeThreeObject(Graph.nodeThreeObject())
|
|
219
|
+
.linkWidth(Graph.linkWidth())
|
|
220
|
+
.linkColor(Graph.linkColor())
|
|
221
|
+
.linkDirectionalParticles(Graph.linkDirectionalParticles());
|
|
222
|
+
}});
|
|
223
|
+
|
|
224
|
+
document.body.style.cursor = node ? 'crosshair' : null;
|
|
225
|
+
if (node) {{
|
|
226
|
+
infoDiv.style.display = 'block';
|
|
227
|
+
let html = `<span class='tag' style='background:${{node.color}}'>${{node.group}}</span><h2>${{node.label}}</h2>`;
|
|
228
|
+
if (node.attributes) {{
|
|
229
|
+
for (const [k, v] of Object.entries(node.attributes)) {{
|
|
230
|
+
if(k!=='type') html += `<div class='row'><span class='key'>${{k.split(':').pop()}}:</span> ${{v}}</div>`;
|
|
231
|
+
}}
|
|
232
|
+
}}
|
|
233
|
+
infoDiv.innerHTML = html;
|
|
234
|
+
}} else infoDiv.style.display = 'none';
|
|
235
|
+
}})
|
|
236
|
+
.onNodeClick(node => {{
|
|
237
|
+
if (!node) return;
|
|
238
|
+
isFlying = true;
|
|
239
|
+
const dist = 150;
|
|
240
|
+
const distRatio = 1 + dist/Math.hypot(node.x, node.y, node.z);
|
|
241
|
+
Graph.cameraPosition(
|
|
242
|
+
{{ x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }},
|
|
243
|
+
node,
|
|
244
|
+
2000
|
|
245
|
+
);
|
|
246
|
+
setTimeout(() => {{ isFlying = false; }}, 2000);
|
|
247
|
+
}});
|
|
248
|
+
|
|
249
|
+
// [Env]
|
|
250
|
+
const scene = Graph.scene();
|
|
251
|
+
const starsGeo = new THREE.BufferGeometry();
|
|
252
|
+
const pos = new Float32Array(2000 * 3);
|
|
253
|
+
for(let i=0; i<2000*3; i++) pos[i] = (Math.random()-0.5) * 4000;
|
|
254
|
+
starsGeo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
|
|
255
|
+
scene.add(new THREE.Points(starsGeo, new THREE.PointsMaterial({{size:2, color:0xffffff, opacity:0.5, transparent:true}})));
|
|
256
|
+
scene.add(new THREE.AmbientLight(0x222222));
|
|
257
|
+
const light = new THREE.DirectionalLight(0xffffff, 1);
|
|
258
|
+
light.position.set(100, 100, 100);
|
|
259
|
+
scene.add(light);
|
|
260
|
+
|
|
261
|
+
// [Manual Orbit Engine]
|
|
262
|
+
setInterval(() => {{
|
|
263
|
+
if (hoverNode || isFlying) return;
|
|
264
|
+
const cam = Graph.camera();
|
|
265
|
+
const controls = Graph.controls();
|
|
266
|
+
if (!controls) return;
|
|
267
|
+
|
|
268
|
+
const target = controls.target;
|
|
269
|
+
const relX = cam.position.x - target.x;
|
|
270
|
+
const relZ = cam.position.z - target.z;
|
|
271
|
+
const r = Math.sqrt(relX*relX + relZ*relZ);
|
|
272
|
+
let theta = Math.atan2(relZ, relX);
|
|
273
|
+
|
|
274
|
+
theta += 0.0015;
|
|
275
|
+
|
|
276
|
+
const newX = target.x + r * Math.cos(theta);
|
|
277
|
+
const newZ = target.z + r * Math.sin(theta);
|
|
278
|
+
|
|
279
|
+
Graph.cameraPosition(
|
|
280
|
+
{{ x: newX, y: cam.position.y, z: newZ }},
|
|
281
|
+
target,
|
|
282
|
+
0
|
|
283
|
+
);
|
|
284
|
+
}}, 15);
|
|
285
|
+
|
|
286
|
+
</script>
|
|
287
|
+
</body>
|
|
288
|
+
</html>
|
|
289
|
+
"""
|
|
290
|
+
with open(output_path, "w", encoding="utf-8") as f:
|
|
291
|
+
f.write(html_content)
|
|
@@ -1,303 +0,0 @@
|
|
|
1
|
-
import json
|
|
2
|
-
import os
|
|
3
|
-
from collections import defaultdict
|
|
4
|
-
|
|
5
|
-
from sayou.core.base_component import BaseComponent
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
class ShowcaseKGRenderer(BaseComponent):
|
|
9
|
-
"""
|
|
10
|
-
Renders an immersive 3D Knowledge Graph designed for high-level visualization and presentation.
|
|
11
|
-
|
|
12
|
-
Focuses on the 'Big Picture' and aesthetic impact using spatial layouts and semantic coloring.
|
|
13
|
-
Ideal for demonstrating data scale, clustering patterns, and global connectivity (Wow Effect),
|
|
14
|
-
rather than granular node analysis.
|
|
15
|
-
"""
|
|
16
|
-
|
|
17
|
-
component_name = "ShowcaseKGRenderer"
|
|
18
|
-
|
|
19
|
-
def render(self, json_path: str, output_path: str = "kg_view_3d.html"):
|
|
20
|
-
if not os.path.exists(json_path):
|
|
21
|
-
self._log(f"Output file not found: {json_path}", level="error")
|
|
22
|
-
return
|
|
23
|
-
|
|
24
|
-
with open(json_path, "r", encoding="utf-8") as f:
|
|
25
|
-
raw_data = json.load(f)
|
|
26
|
-
|
|
27
|
-
# ---------------------------------------------------------
|
|
28
|
-
# [Python Logic]
|
|
29
|
-
# ---------------------------------------------------------
|
|
30
|
-
nodes_by_source = defaultdict(list)
|
|
31
|
-
final_nodes = []
|
|
32
|
-
final_links = []
|
|
33
|
-
|
|
34
|
-
existing_ids = set()
|
|
35
|
-
|
|
36
|
-
for node in raw_data.get("nodes", []):
|
|
37
|
-
node_id = node.get("node_id")
|
|
38
|
-
existing_ids.add(node_id)
|
|
39
|
-
attrs = node.get("attributes", {})
|
|
40
|
-
meta = node.get("metadata", {})
|
|
41
|
-
|
|
42
|
-
source = meta.get("source") or attrs.get("sayou:source") or "Unknown Source"
|
|
43
|
-
nodes_by_source[source].append(node_id)
|
|
44
|
-
|
|
45
|
-
sem_type = attrs.get("sayou:semanticType", "text")
|
|
46
|
-
|
|
47
|
-
clean_attrs = {}
|
|
48
|
-
for k, v in attrs.items():
|
|
49
|
-
if isinstance(v, str) and len(v) > 300:
|
|
50
|
-
clean_attrs[k] = v[:200] + "..."
|
|
51
|
-
else:
|
|
52
|
-
clean_attrs[k] = v
|
|
53
|
-
|
|
54
|
-
display_label = attrs.get("schema:text", node_id)
|
|
55
|
-
if len(display_label) > 30:
|
|
56
|
-
display_label = display_label[:30] + "..."
|
|
57
|
-
|
|
58
|
-
group = "Chunk"
|
|
59
|
-
color = "#1e90ff"
|
|
60
|
-
val = 5
|
|
61
|
-
|
|
62
|
-
if sem_type in ["h1", "h2", "h3", "title"]:
|
|
63
|
-
group = "Header"
|
|
64
|
-
color = "#ffa502"
|
|
65
|
-
val = 12
|
|
66
|
-
elif "list" in sem_type:
|
|
67
|
-
group = "List"
|
|
68
|
-
color = "#2ed573"
|
|
69
|
-
val = 4
|
|
70
|
-
elif "table" in sem_type:
|
|
71
|
-
group = "Table"
|
|
72
|
-
color = "#a55eea"
|
|
73
|
-
val = 10
|
|
74
|
-
elif "code" in sem_type:
|
|
75
|
-
group = "Code"
|
|
76
|
-
color = "#ff4757"
|
|
77
|
-
val = 8
|
|
78
|
-
|
|
79
|
-
final_nodes.append(
|
|
80
|
-
{
|
|
81
|
-
"id": node_id,
|
|
82
|
-
"label": display_label,
|
|
83
|
-
"group": group,
|
|
84
|
-
"sem_type": sem_type,
|
|
85
|
-
"color": color,
|
|
86
|
-
"val": val,
|
|
87
|
-
"attributes": clean_attrs,
|
|
88
|
-
"source": source,
|
|
89
|
-
}
|
|
90
|
-
)
|
|
91
|
-
|
|
92
|
-
for edge in raw_data.get("links", []) + raw_data.get("edges", []):
|
|
93
|
-
final_links.append(
|
|
94
|
-
{
|
|
95
|
-
"source": edge.get("source"),
|
|
96
|
-
"target": edge.get("target"),
|
|
97
|
-
"relation": edge.get("relation", "relates_to"),
|
|
98
|
-
}
|
|
99
|
-
)
|
|
100
|
-
|
|
101
|
-
for source_name, child_ids in nodes_by_source.items():
|
|
102
|
-
if source_name in existing_ids:
|
|
103
|
-
continue
|
|
104
|
-
|
|
105
|
-
virtual_doc_id = f"VIRTUAL_DOC:{source_name}"
|
|
106
|
-
|
|
107
|
-
final_nodes.append(
|
|
108
|
-
{
|
|
109
|
-
"id": virtual_doc_id,
|
|
110
|
-
"label": source_name,
|
|
111
|
-
"group": "Document",
|
|
112
|
-
"color": "#ff4757",
|
|
113
|
-
"val": 30,
|
|
114
|
-
"attributes": {
|
|
115
|
-
"type": "Virtual Parent",
|
|
116
|
-
"child_count": len(child_ids),
|
|
117
|
-
},
|
|
118
|
-
"is_virtual": True,
|
|
119
|
-
}
|
|
120
|
-
)
|
|
121
|
-
|
|
122
|
-
for child_id in child_ids:
|
|
123
|
-
final_links.append(
|
|
124
|
-
{
|
|
125
|
-
"source": virtual_doc_id,
|
|
126
|
-
"target": child_id,
|
|
127
|
-
"relation": "CONTAINS",
|
|
128
|
-
}
|
|
129
|
-
)
|
|
130
|
-
|
|
131
|
-
graph_data = {"nodes": final_nodes, "links": final_links}
|
|
132
|
-
self._log(f"Rendering KG with Virtual Hierarchy ({len(final_nodes)} nodes)...")
|
|
133
|
-
|
|
134
|
-
# ---------------------------------------------------------
|
|
135
|
-
# [JS Logic] Renderer
|
|
136
|
-
# ---------------------------------------------------------
|
|
137
|
-
html_content = f"""
|
|
138
|
-
<!DOCTYPE html>
|
|
139
|
-
<html lang="en">
|
|
140
|
-
<head>
|
|
141
|
-
<meta charset="UTF-8">
|
|
142
|
-
<title>Sayou Dataverse</title>
|
|
143
|
-
<style>
|
|
144
|
-
body {{ margin: 0; background-color: #000205; overflow: hidden; }}
|
|
145
|
-
#graph {{ width: 100%; height: 100vh; }}
|
|
146
|
-
|
|
147
|
-
#info {{
|
|
148
|
-
position: absolute; top: 20px; right: 20px; width: 300px;
|
|
149
|
-
background: rgba(5, 10, 20, 0.85);
|
|
150
|
-
border: 1px solid rgba(0, 242, 255, 0.3);
|
|
151
|
-
border-left: 3px solid #00f2ff;
|
|
152
|
-
box-shadow: 0 0 20px rgba(0, 242, 255, 0.1);
|
|
153
|
-
color: #dff9fb; padding: 20px;
|
|
154
|
-
font-family: 'Consolas', 'Monaco', monospace;
|
|
155
|
-
backdrop-filter: blur(5px);
|
|
156
|
-
display: none; pointer-events: none;
|
|
157
|
-
border-radius: 0 10px 10px 0;
|
|
158
|
-
}}
|
|
159
|
-
.tag {{
|
|
160
|
-
display: inline-block; padding: 2px 8px; border-radius: 2px;
|
|
161
|
-
font-size: 9px; font-weight: 800; color: #000; margin-bottom: 12px;
|
|
162
|
-
text-transform: uppercase; letter-spacing: 1px;
|
|
163
|
-
}}
|
|
164
|
-
h3 {{
|
|
165
|
-
margin: 0 0 12px 0; color: #fff;
|
|
166
|
-
border-bottom: 1px dashed #576574; padding-bottom: 8px;
|
|
167
|
-
font-size: 14px; line-height: 1.4;
|
|
168
|
-
}}
|
|
169
|
-
.row {{ font-size: 11px; margin-bottom: 4px; color: #a4b0be; }}
|
|
170
|
-
.key {{ color: #00d2d3; margin-right: 5px; }}
|
|
171
|
-
</style>
|
|
172
|
-
<script src="https://unpkg.com/three@0.160.0/build/three.min.js"></script>
|
|
173
|
-
<script src="https://unpkg.com/3d-force-graph@1.73.1/dist/3d-force-graph.min.js"></script>
|
|
174
|
-
</head>
|
|
175
|
-
<body>
|
|
176
|
-
<div id="graph"></div>
|
|
177
|
-
<div id="info"></div>
|
|
178
|
-
|
|
179
|
-
<script>
|
|
180
|
-
const gData = {json.dumps(graph_data)};
|
|
181
|
-
const infoDiv = document.getElementById('info');
|
|
182
|
-
|
|
183
|
-
const Graph = ForceGraph3D()(document.getElementById('graph'))
|
|
184
|
-
.graphData(gData)
|
|
185
|
-
.backgroundColor('#000205')
|
|
186
|
-
.showNavInfo(false)
|
|
187
|
-
|
|
188
|
-
// [Design Logic]
|
|
189
|
-
.nodeThreeObject(node => {{
|
|
190
|
-
let geometry, material;
|
|
191
|
-
|
|
192
|
-
// 1. Virtual Document
|
|
193
|
-
if (node.group === "Document") {{
|
|
194
|
-
const size = node.val;
|
|
195
|
-
geometry = new THREE.BoxGeometry(size, size, size);
|
|
196
|
-
|
|
197
|
-
const edges = new THREE.EdgesGeometry(geometry);
|
|
198
|
-
material = new THREE.LineBasicMaterial({{
|
|
199
|
-
color: node.color,
|
|
200
|
-
transparent: true,
|
|
201
|
-
opacity: 0.4
|
|
202
|
-
}});
|
|
203
|
-
const wireframe = new THREE.LineSegments(edges, material);
|
|
204
|
-
|
|
205
|
-
const coreGeo = new THREE.BoxGeometry(size*0.2, size*0.2, size*0.2);
|
|
206
|
-
const coreMat = new THREE.MeshBasicMaterial({{ color: node.color, wireframe: true }});
|
|
207
|
-
wireframe.add(new THREE.Mesh(coreGeo, coreMat));
|
|
208
|
-
|
|
209
|
-
return wireframe;
|
|
210
|
-
}}
|
|
211
|
-
|
|
212
|
-
// 2. Headers (H1~H3): [발광 다이아몬드]
|
|
213
|
-
else if (node.group === "Header") {{
|
|
214
|
-
geometry = new THREE.OctahedronGeometry(4);
|
|
215
|
-
material = new THREE.MeshPhongMaterial({{
|
|
216
|
-
color: node.color,
|
|
217
|
-
emissive: node.color,
|
|
218
|
-
emissiveIntensity: 0.5,
|
|
219
|
-
shininess: 100,
|
|
220
|
-
flatShading: true
|
|
221
|
-
}});
|
|
222
|
-
}}
|
|
223
|
-
|
|
224
|
-
// 3. Chunk / Text: [데이터 오브]
|
|
225
|
-
else {{
|
|
226
|
-
// 단순 구 대신 Icosahedron(정이십면체)을 써서 디지털 느낌
|
|
227
|
-
geometry = new THREE.IcosahedronGeometry(3, 1);
|
|
228
|
-
material = new THREE.MeshLambertMaterial({{
|
|
229
|
-
color: node.color,
|
|
230
|
-
transparent: true,
|
|
231
|
-
opacity: 0.8
|
|
232
|
-
}});
|
|
233
|
-
}}
|
|
234
|
-
|
|
235
|
-
return new THREE.Mesh(geometry, material);
|
|
236
|
-
}})
|
|
237
|
-
|
|
238
|
-
// [Link Design]
|
|
239
|
-
.linkWidth(link => link.relation === "CONTAINS" ? 0 : 0.5)
|
|
240
|
-
.linkColor(() => '#2f3542')
|
|
241
|
-
.linkDirectionalParticles(link => link.relation === "CONTAINS" ? 1 : 3)
|
|
242
|
-
.linkDirectionalParticleWidth(1.2)
|
|
243
|
-
.linkDirectionalParticleSpeed(0.006)
|
|
244
|
-
.linkDirectionalParticleColor(link => link.relation === "CONTAINS" ? '#57606f' : '#00f2ff')
|
|
245
|
-
|
|
246
|
-
// [Interaction]
|
|
247
|
-
.onNodeHover(node => {{
|
|
248
|
-
document.body.style.cursor = node ? 'crosshair' : null;
|
|
249
|
-
if (node) {{
|
|
250
|
-
infoDiv.style.display = 'block';
|
|
251
|
-
|
|
252
|
-
let tagColor = node.color;
|
|
253
|
-
if(node.group === 'Document') tagColor = '#ff4757';
|
|
254
|
-
|
|
255
|
-
let html = `<span class='tag' style='background:${{tagColor}}'>${{node.group}}</span>`;
|
|
256
|
-
if(node.sem_type) html += `<span class='tag' style='background:#2f3542; color:#fff; margin-left:5px'>${{node.sem_type}}</span>`;
|
|
257
|
-
|
|
258
|
-
html += `<h3>${{node.label}}</h3>`;
|
|
259
|
-
|
|
260
|
-
if (node.attributes) {{
|
|
261
|
-
for (const [k, v] of Object.entries(node.attributes)) {{
|
|
262
|
-
if(k === 'type' || k === 'child_count') continue;
|
|
263
|
-
let key = k.includes(':') ? k.split(':').pop() : k;
|
|
264
|
-
html += `<div class='row'><span class='key'>${{key}}:</span> ${{v}}</div>`;
|
|
265
|
-
}}
|
|
266
|
-
}}
|
|
267
|
-
infoDiv.innerHTML = html;
|
|
268
|
-
}} else {{
|
|
269
|
-
infoDiv.style.display = 'none';
|
|
270
|
-
}}
|
|
271
|
-
}})
|
|
272
|
-
.onNodeClick(node => {{
|
|
273
|
-
const distance = 70;
|
|
274
|
-
const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
|
|
275
|
-
const newPos = node.x || node.y || node.z
|
|
276
|
-
? {{ x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }}
|
|
277
|
-
: {{ x: 0, y: 0, z: distance }};
|
|
278
|
-
Graph.cameraPosition(newPos, node, 1500);
|
|
279
|
-
}});
|
|
280
|
-
|
|
281
|
-
// [Lighting]
|
|
282
|
-
const ambientLight = new THREE.AmbientLight(0x222222); // 어두운 기본광
|
|
283
|
-
Graph.scene().add(ambientLight);
|
|
284
|
-
|
|
285
|
-
const blueLight = new THREE.PointLight(0x00f2ff, 1, 100); // 청록색 포인트 조명
|
|
286
|
-
blueLight.position.set(50, 50, 50);
|
|
287
|
-
Graph.scene().add(blueLight);
|
|
288
|
-
|
|
289
|
-
const pinkLight = new THREE.PointLight(0xff00ff, 0.5, 100); // 핑크색 포인트 조명 (반대편)
|
|
290
|
-
pinkLight.position.set(-50, -50, -50);
|
|
291
|
-
Graph.scene().add(pinkLight);
|
|
292
|
-
|
|
293
|
-
// [Physics]
|
|
294
|
-
Graph.d3Force('charge').strength(-50);
|
|
295
|
-
Graph.d3Force('link').distance(link => link.relation === "CONTAINS" ? 60 : 30);
|
|
296
|
-
|
|
297
|
-
</script>
|
|
298
|
-
</body>
|
|
299
|
-
</html>
|
|
300
|
-
"""
|
|
301
|
-
with open(output_path, "w", encoding="utf-8") as f:
|
|
302
|
-
f.write(html_content)
|
|
303
|
-
self._log(f"✅ Semantic 3D KG Showcase saved to: {output_path}")
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
{sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/src/sayou/visualizer/interfaces/base_renderer.py
RENAMED
|
File without changes
|
|
File without changes
|
{sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/src/sayou/visualizer/renderer/pyvis_renderer.py
RENAMED
|
File without changes
|
{sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/src/sayou/visualizer/tracer/graph_tracer.py
RENAMED
|
File without changes
|
{sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/src/sayou/visualizer/tracer/rich_tracer.py
RENAMED
|
File without changes
|
{sayou_visualizer-0.0.10 → sayou_visualizer-0.0.11}/src/sayou/visualizer/tracer/websocket_tracer.py
RENAMED
|
File without changes
|