Spaces:
Running
Running
File size: 3,236 Bytes
5ab0e8d 8ceeb62 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D Word Embeddings Visualization</title>
<style>
body { margin: 0; }
canvas { display: block; }
#info {
position: absolute;
top: 10px;
left: 10px;
background: rgba(255,255,255,0.8);
padding: 10px;
border-radius: 4px;
}
</style>
</head>
<body>
<div id="info">Click on a word to see details</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
let scene, camera, renderer, controls;
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
let spheres = []; // To keep track of word nodes
init();
animate();
function init() {
// Create scene and camera
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 100;
// Renderer
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Controls for interactive orbiting
controls = new THREE.OrbitControls(camera, renderer.domElement);
// Load JSON data with word embeddings
fetch('fasttext_3d.json')
.then(response => response.json())
.then(data => {
// Normalize coordinates (optional, depending on your TSNE results)
data.forEach(item => {
// Create a sphere for each word
let geometry = new THREE.SphereGeometry(1.5, 16, 16);
let material = new THREE.MeshBasicMaterial({ color: 0x0077ff });
let sphere = new THREE.Mesh(geometry, material);
sphere.position.set(item.x, item.y, item.z);
sphere.userData = { word: item.word };
scene.add(sphere);
spheres.push(sphere);
});
})
.catch(err => console.error(err));
// Add event listener for mouse click
window.addEventListener('click', onMouseClick, false);
}
function onMouseClick(event) {
// Calculate mouse position in normalized device coordinates (-1 to +1)
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
// Calculate objects intersecting the picking ray
let intersects = raycaster.intersectObjects(spheres);
if (intersects.length > 0) {
let selected = intersects[0].object;
let infoDiv = document.getElementById("info");
infoDiv.innerHTML = "Word: " + selected.userData.word +
"<br>Position: (" +
selected.position.x.toFixed(2) + ", " +
selected.position.y.toFixed(2) + ", " +
selected.position.z.toFixed(2) + ")";
}
}
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
</script>
</body>
</html>
|