Hugging Face's logo

Spaces:
13Aluminium
/
New_MODEL_3
Running

App Files Community
13Aluminium commited on
Commit
5ab0e8d
·
verified ·
1 Parent(s): 8ceeb62

Update index.html

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