resources/views/user/pages/finish_ujian/index.blade.php

@@ -114,11 +114,11 @@
                   <h4 class="card-title">
                       Prediksi AI
                   </h4>
-                  <h5 class="mt-4">
+                  <h2 class="mt-4" id="result-model">
-                      Belum tersedia
+                    Loading...
-                  </h5>
+                  </h2>
                   <p class="text-muted">
-                      Model AI masih dalam tahap pengembangan
+                    Model Confidence: <span id="confidence-model"></span>
                   </p>
                 </div>
                 <div class="col-md-2 d-flex justify-content-center align-items-center bg-primary-subtle border border primary rounded-circle" style="aspect-ratio: 1/1;">
@@ -190,6 +190,23 @@
             </div>
           </div>
           <div class="row">
+            <div class="col-md-4">
+              <div class="bg-custom p-4 my-3 border rounded">
+                <div class="row">
+                  <div class="col-md-10">
+                    <h5 class="text-body">Detail Confidence Prediksi Model</h5>
+                  </div>
+                  <div class="col-md-2 d-flex justify-content-center align-items-center bg-primary-subtle border border primary rounded-circle" style="aspect-ratio: 1/1;">
+                    <i class="bi bi-easel fs-4"></i>
+                  </div>
+                </div>
+                <ul class="list-unstyled">
+                  <li><strong>Normal:</strong> <span id="normal-confidence">0%</span></li>
+                  <li><strong>Sedang:</strong> <span id="sedang-confidence"></span></li>
+                  <li><strong>Tinggi:</strong> <span id="tinggi-confidence"></span></li>
+                </ul>
+              </div>
+            </div>
             <div class="col-md-4">
               <div class="bg-custom p-4 my-3 border rounded">
                 <div class="row">
@@ -412,6 +429,28 @@ function renderVelocityChart(timeseries) {
         });
         heatmapContainer.style.removeProperty('position');
         renderStats(result.statistics);
+      }
+    }
+
+    async function getPredict(data) {
+      const res = await fetch("{{ env('PYTHON_API_URL') }}/predict", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(data)
+      });
+
+      const result = await res.json();
+      if(result != null) {
+        let classBg = ['text-warning', 'text-danger'];
+        let textResult = ['Sedang', 'Tinggi'];
+        $('#result-model').addClass(classBg[result.hasil_prediksi]);
+        $('#result-model').html(textResult[result.hasil_prediksi]);
+        $('#confidence-model').html(result.confidence + '%');
+        $('#normal-confidence').html(result.detail_probabilitas.normal + "%");
+        $('#sedang-confidence').html(result.detail_probabilitas.sedang + "%");
+        $('#tinggi-confidence').html(result.detail_probabilitas.tinggi + "%");
         Swal.close();
       }
     }
@@ -618,6 +657,7 @@ function showInsight(type) {
 
         ws.onmessage = (event) => {
           const data = JSON.parse(event.data);
+          console.log(data);
           if(data.type === 'json_file_data') {
             if(data.data != null) {
               data_tobii = null;
@@ -649,6 +689,7 @@ function showInsight(type) {
                       blur: 0.85
                     });
                     loadData(data_tobii);
+                    getPredict(data_tobii.data);
                   } else {
                     Swal.fire({
                       title: 'Error',
@@ -664,6 +705,15 @@ function showInsight(type) {
 
               xhttp.open('GET', '{{ route('test-sessions.getScreen', ['id_test_sessions' => $id_session]) }}', true);
               xhttp.send();
+            } else {
+              Swal.fire({
+                title: 'Error',
+                text: 'Gagal memuat data mata, silahkan coba lagi nanti',
+                icon: 'error',
+                showConfirmButton: true,
+                allowOutsideClick: false,
+                allowEscapeKey: false
+              });
             }
           }
         };