now i want to connect backend to this frontend website, this is the backend server URL - http://192.168.99.101:8000,,,, the websocket URL is - WebSocket endpoint: ws://192.168.99.101:8000/ws/emotion-detection,,,

Add WebSocket integration to their "Enable Camera" button in the dashboard:
// When the "Enable Camera" button is clicked
const startEmotionDetection = async () => {
// 1. Access webcam
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const videoElement = document.getElementById('webcam-feed'); // The video element
videoElement.srcObject = stream;

 // 2. Connect to WebSocket  
 const ws = new WebSocket('ws://YOUR_IP_ADDRESS:8000/ws/emotion-detection');  
   
 ws.onopen = () => {  
   console.log('Connected to emotion detection server');  
 };  
   
 ws.onmessage = (event) => {  
   const data = JSON.parse(event.data);  
   if (data.status === 'success') {  
     // 3. Display the processed image with emotion detection  
     const outputCanvas = document.getElementById('emotion-canvas');  
     const ctx = outputCanvas.getContext('2d');  
       
     const image = new Image();  
     image.onload = () => {  
       ctx.clearRect(0, 0, outputCanvas.width, outputCanvas.height);  
       ctx.drawImage(image, 0, 0, outputCanvas.width, outputCanvas.height);  
     };  
     image.src = data.processed_image;  
       
     // 4. Update emotion data in the UI  
     updateEmotionCharts(data.results);  
   }  
 };  
   
 // 5. Start sending frames  
 const sendInterval = setInterval(() => {  
   if (ws.readyState === WebSocket.OPEN && videoElement.readyState === 4) {  
     const canvas = document.createElement('canvas');  
     canvas.width = videoElement.videoWidth;  
     canvas.height = videoElement.videoHeight;  
     const ctx = canvas.getContext('2d');  
     ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);  
     const dataUrl = canvas.toDataURL('image/jpeg', 0.7);  
     ws.send(dataUrl);  
   }  
 }, 200);  
   
 // Store references for cleanup  
 window.emotionDetection = { ws, sendInterval, stream };  

};

// When the "Disable Camera" button is clicked
const stopEmotionDetection = () => {
if (window.emotionDetection) {
clearInterval(window.emotionDetection.sendInterval);
window.emotionDetection.ws.close();
window.emotionDetection.stream.getTracks().forEach(track => track.stop());
window.emotionDetection = null;
}
};

Add required HTML elements to their dashboard:

 <!-- Canvas for displaying the processed image -->  
 <canvas id="emotion-canvas" width="640" height="480" class="w-full h-auto rounded-lg shadow-lg"></canvas>  
   
 <!-- Controls -->  
 <div class="mt-4 flex space-x-4">  
   <button id="enable-camera-btn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">  
     Enable Camera for Emotion Detection  
   </button>  
   <button id="disable-camera-btn" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">  
     Disable Camera  
   </button>  
 </div>  
   
 <!-- Emotion visualization section -->  
 <div id="emotion-results" class="mt-6">  
   <!-- This is where emotion charts would go -->  
 </div>  

Add event listeners to the buttons:

document.getElementById('enable-camera-btn').addEventListener('click', startEmotionDetection);
document.getElementById('disable-camera-btn').addEventListener('click', stopEmotionDetection);

Implement emotion visualization using Chart.js:
function updateEmotionCharts(results) {
if (!results || results.length === 0) return;

 // Extract emotions from first face  
 const emotions = results[0].emotions;  
 const dominantEmotion = results[0].dominant_emotion;  
   
 // Update dominant emotion display  
 document.getElementById('dominant-emotion').textContent = dominantEmotion;  
   
 // Update chart data  
 emotionChart.data.datasets[0].data = [  
   emotions.happy * 100,  
   emotions.sad * 100,  
   emotions.angry * 100,  
   emotions.neutral * 100,  
   emotions.surprise * 100,  
   emotions.fear * 100,  
   emotions.disgust * 100  
 ];  
 emotionChart.update();  

   }

command for running the emotion detection project - python emotion_logger.py

and python visualize_emotions.py - to generate visualization charts

The text in the hero section is not visible. Make it visible on all the devices. If required reduce the padding or remove the parallax scrolling. the screenshot is added below and that is waht visible and the rest of the text is getting hidden. Fix this issue. Also reduce the cursor lag and the cursor tracker. If needed implement a cool new design for the cursor tracker and the cursor as well. Then add a subtle and soothing music for the website, that will suit the website type and its name Sensei. Also change the logo of the website to the provided image that shows the logo Sensei.