Update index.html

index.html

@@ -81,8 +81,8 @@
 
         const gridHelper = new THREE.GridHelper(100, 100, 0xcccccc, 0xcccccc);
         scene.add(gridHelper);
-
-        // --- 3. CREATE THE 3D MANNEQUIN ---
+      
+        // --- 3. CREATE THE 3D MANNEQUIN (UPGRADED MESH) ---
         const maxPoints = 22;
         const boneConnections = [
             0,1,   0,2,   0,3,    
@@ -95,29 +95,33 @@
             18,20, 19,21          
         ];
 
-        const jointMaterial = new THREE.MeshStandardMaterial({ color: 0x008080, roughness: 0.3, metalness: 0.2 });
-        const boneMaterial = new THREE.MeshStandardMaterial({ color: 0xbbbbbb, roughness: 0.5, metalness: 0.1 });
+        // Give the mesh a sleek, modern plastic look
+        const jointMaterial = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.2, metalness: 0.8 });
+        const boneMaterial = new THREE.MeshStandardMaterial({ color: 0xe0e0e0, roughness: 0.5, metalness: 0.1 });
 
         const jointMeshes = [];
-        const sphereGeo = new THREE.SphereGeometry(0.04, 16, 16);
+        // Make joints larger to look like robotic hinges
+        const sphereGeo = new THREE.SphereGeometry(0.08, 32, 32); 
         for (let i = 0; i < maxPoints; i++) {
             const sphere = new THREE.Mesh(sphereGeo, jointMaterial);
-            sphere.castShadow = true; // JOINTS CAST SHADOWS
+            sphere.castShadow = true; 
             scene.add(sphere);
             jointMeshes.push(sphere);
         }
 
         const boneMeshes = [];
-        const cylinderGeo = new THREE.CylinderGeometry(0.02, 0.02, 1, 8);
-        cylinderGeo.rotateX(Math.PI / 2); 
+        // UPGRADE: Use CapsuleGeometry instead of thin cylinders for realistic body volume
+        // Arguments: radius, length, cap segments, radial segments
+        const capsuleGeo = new THREE.CylinderGeometry(0.06, 0.06, 1, 16);
+        capsuleGeo.rotateX(Math.PI / 2);
 
         for (let i = 0; i < boneConnections.length; i += 2) {
-            const cylinder = new THREE.Mesh(cylinderGeo, boneMaterial);
-            cylinder.castShadow = true; // BONES CAST SHADOWS
-            scene.add(cylinder);
-            boneMeshes.push(cylinder);
+            const boneMesh = new THREE.Mesh(capsuleGeo, boneMaterial);
+            boneMesh.castShadow = true; 
+            scene.add(boneMesh);
+            boneMeshes.push(boneMesh);
         }
-
+      
         // --- 4. ANIMATION & STATE LOGIC ---
         let motionData = []; 
         let currentFrame = 0;
@@ -203,11 +207,14 @@
             socketStatus.innerHTML = "🔴 Disconnected";
             socketStatus.style.color = "red";
         };
+// --- INSIDE index.html ---
+        let currentTicket = 0; // Keep track of the newest request
 
         ws.onmessage = (event) => {
             const data = JSON.parse(event.data);
             
-            if (data.status === "success" && data.data) {
+            // SECURITY CHECK: Only play the animation if the ticket matches our latest request!
+            if (data.status === "success" && data.ticket === currentTicket && data.data) {
                 motionData = data.data; 
                 currentFrame = 0;
                 isPlaying = true;
@@ -217,12 +224,15 @@
                 document.getElementById('payloadSize').textContent = `Payload Size: ${kbSize} KB`;
                 statusText.textContent = "Rendering...";
                 statusText.style.color = "teal";
+            } else if (data.ticket !== currentTicket) {
+                console.log(`Dropped outdated packet. Ticket: ${data.ticket}, Current: ${currentTicket}`);
             }
         };
 
         let typingTimer;
         const inputField = document.getElementById('promptInput');
 
+        // Back to live listening!
         inputField.addEventListener('input', () => {
             clearTimeout(typingTimer);
             statusText.textContent = "Typing...";
@@ -232,13 +242,16 @@
                 const promptText = inputField.value.trim();
                 
                 if (promptText.length > 0 && ws.readyState === WebSocket.OPEN) {
+                    currentTicket++; // Generate a new ticket number for this specific word
+                    
                     statusText.textContent = "Transmitting to Edge GPU...";
-                    ws.send(JSON.stringify({ prompt: promptText }));
+                    // Send the text AND the ticket number
+                    ws.send(JSON.stringify({ prompt: promptText, ticket: currentTicket }));
                 } else if (promptText.length === 0) {
                     statusText.textContent = "Waiting for input...";
                     statusText.style.color = "teal";
                 }
-            }, 300); // Reduced debounce for a slightly snappier feel
+            }, 400); // 400ms debounce: waits just long enough for you to finish a word
         });
     </script>
 </body>