Spaces:

PatriciaWening
/

emoapi

Runtime error

App Files Files Community

PatriciaWening commited on May 20, 2025

Commit

cb28fad

verified ·

1 Parent(s): f6abaad

Upload 4 files

Browse files

Files changed (4) hide show

CameraPage.html +43 -0
ReportPage.html +65 -0
cameraPage.js +173 -0
reportPage.js +112 -0

CameraPage.html ADDED Viewed

	@@ -0,0 +1,43 @@

+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pendeteksi Tingkat Stres</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-100 font-sans">
+  <div class="max-w-2xl mx-auto p-6">
+    <h1 class="text-3xl font-bold text-center text-gray-800 mb-8">Pendeteksi Tingkat Stres</h1>
+    <div class="bg-white p-6 rounded-lg shadow-md">
+      <label for="time-input" class="block text-lg font-semibold text-gray-700 mb-2">Masukkan Waktu Pengamatan (detik):</label>
+      <input id="time-input" type="number" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Contoh: 10" min="1">
+      <button id="start-btn" class="mt-4 w-full py-2 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">Mulai Deteksi</button>
+    </div>
+    <div class="mt-6 text-center">
+      <p id="countdown" class="text-2xl font-bold text-gray-800">00:00</p>
+    </div>
+    <div class="mt-8">
+      <video id="video" width="100%" height="auto" class="border-2 border-gray-300 rounded-lg" autoplay></video>
+    </div>
+    <div class="mt-6 text-center">
+      <p id="status" class="text-lg text-gray-700">Tunggu untuk memulai...</p>
+      <p id="stress-level" class="text-xl font-bold text-red-600"></p>
+    </div>
+    <div class="mt-6 text-center hidden" id="show-result-btn">
+      <a href="ReportPage.html" class="w-full py-2 px-4 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">Show Result</a>
+    </div>
+  </div>
+  <script src="cameraPage.js"></script>
+</body>
+</html>

ReportPage.html ADDED Viewed

	@@ -0,0 +1,65 @@

+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Laporan Deteksi Stres</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body class="bg-gray-100 font-sans">
+  <div class="max-w-4xl mx-auto p-6">
+    <h1 class="text-3xl font-bold text-center text-gray-800 mb-8">Laporan Analisis Tingkat Stres</h1>
+    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
+      <h2 class="text-xl font-semibold text-gray-700 mb-4">Ringkasan Analisis</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
+          <p class="text-gray-600">Emosi Dominan:</p>
+          <p id="dominant-emotion" class="text-2xl font-bold text-blue-600"></p>
+          <p class="text-gray-600 mt-4">Rata-rata Tingkat Stres:</p>
+          <p id="avg-stress" class="text-2xl font-bold"></p>
+          <p class="text-gray-600 mt-4">Total Frame Dianalisis:</p>
+          <p id="total-frames" class="text-2xl font-bold text-gray-800"></p>
+        </div>
+        <div>
+          <p class="text-gray-600">Tingkat Stres Tertinggi:</p>
+          <p id="max-stress" class="text-2xl font-bold text-red-600"></p>
+          <p class="text-gray-600 mt-4">Tingkat Stres Terendah:</p>
+          <p id="min-stress" class="text-2xl font-bold text-green-600"></p>
+          <p class="text-gray-600 mt-4">Durasi Analisis:</p>
+          <p id="duration" class="text-2xl font-bold text-gray-800"></p>
+        </div>
+      </div>
+    </div>
+    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
+      <h2 class="text-xl font-semibold text-gray-700 mb-4">Distribusi Emosi</h2>
+      <div class="w-full h-64">
+        <canvas id="emotion-chart"></canvas>
+      </div>
+    </div>
+    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
+      <h2 class="text-xl font-semibold text-gray-700 mb-4">Interpretasi Tingkat Stres</h2>
+      <div id="stress-interpretation" class="p-4 rounded-lg"></div>
+    </div>
+    <div class="mt-6 text-center">
+      <a href="CameraPage.html" class="py-2 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">Kembali ke Kamera</a>
+    </div>
+  </div>
+  <script src="reportPage.js"></script>
+</body>
+</html>

cameraPage.js ADDED Viewed

	@@ -0,0 +1,173 @@

+const timeInput = document.getElementById('time-input');
+  const startBtn = document.getElementById('start-btn');
+  const videoElement = document.getElementById('video');
+  const statusElement = document.getElementById('status');
+  const stressLevelElement = document.getElementById('stress-level');
+  const countdownElement = document.getElementById('countdown');
+  const showResultBtn = document.getElementById('show-result-btn');
+  let stream;
+  let interval;
+  let countdownInterval;
+  let totalTime;
+  let frameCount = 0;
+  let countdownTime;
+  let sessionId = Date.now().toString();
+  async function startCamera() {
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({
+        video: true,
+      });
+      videoElement.srcObject = stream;
+    } catch (err) {
+      console.error("Error accessing the camera", err);
+      statusElement.textContent = "Gagal mengakses kamera.";
+    }
+  }
+  function stopCamera() {
+    if (stream) {
+      let tracks = stream.getTracks();
+      tracks.forEach(track => track.stop());
+      videoElement.srcObject = null;
+    }
+  }
+async function sendFrameToBackend(dataUrl) {
+  try {
+    console.log("Preparing to send frame to backend...");
+    const formData = new FormData();
+    formData.append('image', dataUrl);
+    formData.append('sessionId', sessionId);
+    console.log("Sending request to backend...");
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000);
+    const apiResponse = await fetch('https://PatriciaWening-emoapi.hf.space/api/deteksi-emosi', {
+      method: 'POST',
+      body: formData,
+      signal: controller.signal
+    });
+    clearTimeout(timeoutId);
+    if (!apiResponse.ok) {
+      const errorText = await apiResponse.text();
+      console.error(`Server returned error ${apiResponse.status}: ${errorText}`);
+      throw new Error(`HTTP error! Status: ${apiResponse.status}`);
+    }
+    const data = await apiResponse.json();
+    console.log("API response:", data);
+    if (data.faceDetected) {
+      drawFaceRectangle(data.faceRegion);
+      updateStressLevel(data.stressLevel, data.emotion);
+      statusElement.textContent = `Emosi terdeteksi: ${data.emotion}, Tingkat stres: ${data.stressLevel}%`;
+    } else {
+      statusElement.textContent = data.error || "Wajah tidak terdeteksi, mohon cek posisi kamera.";
+    }
+  } catch (error) {
+    console.error('Error sending frame to backend:', error);
+    statusElement.textContent = "Kesalahan saat memproses data: " + error.message;
+  }
+}
+  function drawFaceRectangle(region) {
+    const canvas = document.createElement('canvas');
+    canvas.width = videoElement.videoWidth;
+    canvas.height = videoElement.videoHeight;
+    const context = canvas.getContext('2d');
+    context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
+    context.strokeStyle = '#00FF00';
+    context.lineWidth = 3;
+    context.strokeRect(region.x, region.y, region.width, region.height);
+    const dataURL = canvas.toDataURL('image/png');
+    const tempImg = document.createElement('img');
+    tempImg.src = dataURL;
+    tempImg.style.width = '100%';
+    tempImg.style.height = 'auto';
+    tempImg.style.border = '2px solid #ccc';
+    tempImg.style.borderRadius = '8px';
+    const videoParent = videoElement.parentNode;
+    videoParent.insertBefore(tempImg, videoElement);
+    videoElement.style.display = 'none';
+    setTimeout(() => {
+      tempImg.remove();
+      videoElement.style.display = 'block';
+    }, 200);
+  }
+  function updateStressLevel(stressLevel, emotion) {
+    stressLevelElement.textContent = `Tingkat Stres: ${stressLevel} (${emotion})`;
+    if (stressLevel >= 80) {
+      stressLevelElement.classList.remove('text-green-600', 'text-yellow-600');
+      stressLevelElement.classList.add('text-red-600');
+    } else if (stressLevel >= 50) {
+      stressLevelElement.classList.remove('text-green-600', 'text-red-600');
+      stressLevelElement.classList.add('text-yellow-600');
+    } else {
+      stressLevelElement.classList.remove('text-yellow-600', 'text-red-600');
+      stressLevelElement.classList.add('text-green-600');
+    }
+    localStorage.setItem('currentSessionId', sessionId);
+  }
+  async function captureAndAnalyze() {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    canvas.width = videoElement.videoWidth;
+    canvas.height = videoElement.videoHeight;
+    context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
+    const frame = canvas.toDataURL('image/jpeg');
+    sendFrameToBackend(frame);
+    frameCount++;
+  }
+  function updateCountdown() {
+    const minutes = Math.floor(countdownTime / 60);
+    const seconds = countdownTime % 60;
+    countdownElement.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+    countdownTime--;
+    if (countdownTime < 0) {
+      clearInterval(countdownInterval);
+    }
+  }
+  function startDetection() {
+    totalTime = parseInt(timeInput.value) * 1000;
+    if (isNaN(totalTime) || totalTime <= 0) {
+      statusElement.textContent = "Waktu input tidak valid.";
+      return;
+    }
+    countdownTime = totalTime / 1000;
+    countdownInterval = setInterval(updateCountdown, 1000);
+    statusElement.textContent = `Kamera aktif selama ${totalTime / 1000} detik.`;
+    startCamera();
+    interval = setInterval(captureAndAnalyze, 1000);
+    setTimeout(() => {
+      clearInterval(interval);
+      stopCamera();
+      statusElement.textContent = "Proses selesai!";
+      showResultBtn.classList.remove('hidden');
+    }, totalTime);
+  }
+  startBtn.addEventListener('click', startDetection);

reportPage.js ADDED Viewed

	@@ -0,0 +1,112 @@

+    const sessionId = localStorage.getItem('currentSessionId');
+    async function fetchReportData() {
+      try {
+        if (!sessionId) {
+          document.getElementById('dominant-emotion').textContent = "Tidak ada data";
+          return;
+        }
+        const response = await fetch(`http://localhost:8080/api/session-report/${sessionId}`);
+        const data = await response.json();
+        if (data.error) {
+          document.getElementById('dominant-emotion').textContent = data.error;
+          return;
+        }
+        document.getElementById('dominant-emotion').textContent = capitalizeFirstLetter(data.dominantEmotion);
+        document.getElementById('avg-stress').textContent = data.averageStressLevel;
+        setStressLevelColor('avg-stress', data.averageStressLevel);
+        document.getElementById('total-frames').textContent = data.totalFrames;
+        document.getElementById('max-stress').textContent = data.maxStressLevel;
+        document.getElementById('min-stress').textContent = data.minStressLevel;
+        document.getElementById('duration').textContent = `${Math.round(data.totalFrames / 1)} detik`;
+        setStressInterpretation(data.averageStressLevel);
+        createEmotionChart(data.emotionCounts);
+      } catch (error) {
+        console.error('Error fetching report data:', error);
+        document.getElementById('dominant-emotion').textContent = "Error mengambil data laporan";
+      }
+    }
+    function capitalizeFirstLetter(string) {
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    }
+    function setStressLevelColor(elementId, stressLevel) {
+      const element = document.getElementById(elementId);
+      if (stressLevel >= 80) {
+        element.classList.add('text-red-600');
+      } else if (stressLevel >= 50) {
+        element.classList.add('text-yellow-600');
+      } else {
+        element.classList.add('text-green-600');
+      }
+    }
+    function setStressInterpretation(stressLevel) {
+      const interpretationElement = document.getElementById('stress-interpretation');
+      let message, bgColor, textColor;
+      if (stressLevel >= 80) {
+        message = "Tingkat stres tinggi. Rekomendasi: Istirahat dan konsultasi dengan profesional kesehatan mental.";
+        bgColor = "bg-red-100";
+        textColor = "text-red-800";
+      } else if (stressLevel >= 50) {
+        message = "Tingkat stres sedang. Rekomendasi: Pertimbangkan teknik relaksasi dan manajemen stres.";
+        bgColor = "bg-yellow-100";
+        textColor = "text-yellow-800";
+      } else {
+        message = "Tingkat stres rendah. Tetap jaga kesehatan fisik dan mental.";
+        bgColor = "bg-green-100";
+        textColor = "text-green-800";
+      }
+      interpretationElement.classList.add(bgColor, textColor);
+      interpretationElement.textContent = message;
+    }
+    function createEmotionChart(emotionCounts) {
+      const ctx = document.getElementById('emotion-chart').getContext('2d');
+      const labels = Object.keys(emotionCounts).map(emotion => capitalizeFirstLetter(emotion));
+      const data = Object.values(emotionCounts);
+      const backgroundColors = [
+        'rgba(255, 99, 132, 0.7)',
+        'rgba(75, 192, 192, 0.7)',
+        'rgba(255, 205, 86, 0.7)',
+        'rgba(54, 162, 235, 0.7)',
+        'rgba(153, 102, 255, 0.7)',
+        'rgba(201, 203, 207, 0.7)',
+        'rgba(255, 159, 64, 0.7)'
+      ];
+      new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+          labels: labels,
+          datasets: [{
+            data: data,
+            backgroundColor: backgroundColors.slice(0, labels.length),
+            borderColor: 'white',
+            borderWidth: 2
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              position: 'right'
+            }
+          }
+        }
+      });
+    }
+    window.addEventListener('DOMContentLoaded', fetchReportData);