update toggle

templates/dashboard/base.html

@@ -205,7 +205,7 @@
                       ></path>
                     </svg>
                   </span>
-                  <span class="nav-link-text">Klasifikasi</span>
+                  <span class="nav-link-text">Inferensi</span>
                 </a>
               </li>
               <li class="nav-item d-none" id="menu-history">

templates/dashboard/classifier.html

@@ -1,17 +1,14 @@
-{% extends 'dashboard/base.html' %} {% block title %}Klasifikasi{% endblock
-title %} {% block content %}
+{% extends 'dashboard/base.html' %} {% block title %}Inferensi{% endblock title
+%} {% block content %}
 
-<h1 class="app-page-title">Klasifikasi</h1>
-
-<hr class="my-4" />
+<h1 class="app-page-title">Inferensi</h1>
 
 <div class="row g-4 settings-section">
   <div class="col-12">
-    <h3 class="section-title">Kelas</h3>
     <div class="section-intro">
       Terdapat
-      <span class="text-unmuted">4 kelompok bidang keahlian </span> sebagai
-      kelas klasifikasi.
+      <span class="text-unmuted">4 Kelompok Bidang Keahlian (KBK) </span>untuk
+      diklasifikasikan:
     </div>
   </div>
 
@@ -170,20 +167,43 @@ title %} {% block content %}
   </div>
 </div>
 
-<hr class="my-4" />
-
-<div class="row g-4 settings-section">
-  <div class="col-12">
-    <h3 class="section-title">Data</h3>
-    <div class="section-intro">
-      Masukkan <span class="text-unmuted">abstrak dan kata kunci</span> Anda
-      sebagai data untuk diklasifikasikan.
-    </div>
-  </div>
+<div class="row g-4 mt-3 settings-section">
   <div class="col-12">
     <div class="app-card app-card-settings shadow-sm p-4">
       <div class="app-card-body">
-        <form method="post" id="inference">
+        <nav
+          id="orders-table-tab"
+          class="orders-table-tab app-nav-tabs nav shadow-sm flex-column flex-sm-row mb-4"
+        >
+          <a
+            class="flex-sm-fill text-sm-center nav-link active"
+            data-bs-toggle="tab"
+            role="tab"
+            aria-controls="orders-all"
+            aria-selected="true"
+            id="setKlasifikasi"
+            >Klasifikasi KBK</a
+          >
+          <a
+            class="flex-sm-fill text-sm-center nav-link"
+            data-bs-toggle="tab"
+            role="tab"
+            aria-controls="orders-paid"
+            aria-selected="false"
+            id="setRekomendasi"
+            >Rekomendasi Dosen</a
+          >
+          <a
+            class="flex-sm-fill text-sm-center nav-link"
+            data-bs-toggle="tab"
+            role="tab"
+            aria-controls="orders-pending"
+            aria-selected="false"
+            id="setAll"
+            >Semua</a
+          >
+        </nav>
+        <form method="post" id="inferencer">
           <div class="mb-3">
             <div class="d-flex justify-content-between">
               <label for="abstrak" class="form-label">Abstrak</label>
@@ -232,9 +252,7 @@ title %} {% block content %}
               </button>
             </div>
             <div class="col-auto">
-              <button class="btn app-btn-primary" type="submit">
-                Klasifikasi
-              </button>
+              <button class="btn app-btn-primary" type="submit">Submit</button>
             </div>
           </div>
         </form>
@@ -245,13 +263,14 @@ title %} {% block content %}
   </div>
 </div>
 
-<hr class="my-4" />
-
-<div class="row g-3 settings-section justify-content-center d-none" id="hasil">
+<div
+  class="row g-3 settings-section justify-content-center d-none mt-4"
+  id="hasil"
+>
   <div class="col-12">
     <h3 class="section-title">Hasil</h3>
   </div>
-  <div class="col-12 col-lg-6">
+  <div class="col-12 col-lg-6 hasil-klasifikasi">
     <div class="app-card app-card-stats-table h-100 shadow-sm">
       <div class="app-card-header p-3">
         <div class="row justify-content-between align-items-center">
@@ -281,7 +300,7 @@ title %} {% block content %}
     <!--//app-card-->
   </div>
 
-  <div class="col-12 mt-5 text-center">
+  <div class="col-12 mt-5 text-center hasil-klasifikasi">
     <h3 class="section-title">
       Dosen Kelompok Bidang Keahlian<br /><span
         id="kbk"
@@ -290,21 +309,26 @@ title %} {% block content %}
     </h3>
   </div>
 
-  <div class="row justify-content-center gy-2" id="lecturers"></div>
+  <div
+    class="row justify-content-center gy-2 hasil-klasifikasi"
+    id="lecturers"
+  ></div>
 
-  <div class="col-12 mt-5 text-center mb-3">
+  <div class="col-12 mt-5 text-center mb-3 hasil-rekomendasi">
     <h3 class="section-title">
       Dosen dengan
       <span style="color: #128c9b">Riwayat Bimbingan Termirip</span>
     </h3>
   </div>
 
-  <div class="container-xl" id="similarity-results"></div>
+  <div class="container-xl hasil-rekomendasi" id="similarity-results"></div>
 </div>
 
 {% endblock content %} {% block script %}
 <script>
   let keywords = [];
+  let klasifikasi = true;
+  let rekomendasi = false;
 
   $("#abstrak").on("input", function () {
     let text = $(this).val().trim();
@@ -337,8 +361,8 @@ title %} {% block content %}
     if (keyword) {
       let badge = $(
         `<span class="badge px-2 me-2" style="border: 1px solid #128c9b; color: #128c9b">${keyword}<svg class="close-badge ms-1" xmlns="http://www.w3.org/2000/svg" width="16" height="13" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
-          <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
-        </svg></span>`
+            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+          </svg></span>`
       );
       $("#keywordContainer").append(badge);
       keywords.push(keyword);
@@ -361,13 +385,28 @@ title %} {% block content %}
     keywords = [];
   });
 
-  $("#inference").on("submit", function (e) {
+  $("#setKlasifikasi").on("click", function () {
+    klasifikasi = true;
+    rekomendasi = false;
+  });
+
+  $("#setRekomendasi").on("click", function () {
+    klasifikasi = false;
+    rekomendasi = true;
+  });
+
+  $("#setAll").on("click", function () {
+    klasifikasi = true;
+    rekomendasi = true;
+  });
+
+  $("#inferencer").on("submit", function (e) {
     e.preventDefault();
 
     if ($("#abstrak").val().trim() == "") {
       alertMessage(
         "Abstrak Harus Diisi",
-        "Tidak dapat melakukan klasifikasi",
+        "Tidak dapat melakukan inferensi",
         "error"
       );
       return;
@@ -376,7 +415,7 @@ title %} {% block content %}
     if (keywords.length == 0) {
       alertMessage(
         "Minimal 1 Kata Kunci",
-        "Tidak dapat melakukan klasifikasi",
+        "Tidak dapat melakukan inferensi",
         "error"
       );
       return;
@@ -392,122 +431,134 @@ title %} {% block content %}
       data: JSON.stringify({
         abstrak: $("#abstrak").val(),
         kata_kunci: keywords.join(", "),
+        klasifikasi: klasifikasi,
+        rekomendasi: rekomendasi,
       }),
       xhrFields: {
         withCredentials: true,
       },
       success: function (response) {
         $("#statsResult").empty();
-
-        probs = response["message"]["probs"];
-
-        const classificationResult = Object.entries(probs)
-          .sort((x, y) => x[1] - y[1])
-          .reverse();
-
-        let isFirstRow = true;
-        classificationResult.forEach(([key, value]) => {
-          $("#statsResult").append(
-            `<tr>
-              <td>${key}</td>
-              <td class="stat-cell${
-                isFirstRow ? " fw-bold" : ""
-              }" style="color: #128c9b">${value}%</td>
-            </tr>`
-          );
-          isFirstRow = false;
-        });
-
-        $("#kbk").text(response["message"]["kbk"]);
-
         $("#lecturers").empty();
-        $.each(response["message"]["lecturers"], function (index, lecturer) {
-          $("#lecturers").append(
-            `<div class="col-6 col-md-3">
-                <div class="app-card app-card-doc shadow-sm h-100">
-                  <div class="app-card-thumb-holder p-3 d-flex justify-content-center">
-                    <div
-                      style="
-                        width: 95px;
-                        height: 95px;
-                        overflow: hidden;
-                        border-radius: 50%;
-                        border: 2px solid white;
-                      "
-                    >
-                      <img src="${lecturer.foto}" style="width: 100%; height: 100%; object-fit: cover" />
+        $("#similarity-results").empty();
+
+        if (klasifikasi) {
+          $(".hasil-klasifikasi").removeClass("d-none");
+          probs = response["message"]["probs"];
+
+          const classificationResult = Object.entries(probs)
+            .sort((x, y) => x[1] - y[1])
+            .reverse();
+
+          let isFirstRow = true;
+          classificationResult.forEach(([key, value]) => {
+            $("#statsResult").append(
+              `<tr>
+                <td>${key}</td>
+                <td class="stat-cell${
+                  isFirstRow ? " fw-bold" : ""
+                }" style="color: #128c9b">${value}%</td>
+              </tr>`
+            );
+            isFirstRow = false;
+          });
+
+          $("#kbk").text(response["message"]["kbk"]);
+
+          $.each(response["message"]["lecturers"], function (index, lecturer) {
+            $("#lecturers").append(
+              `<div class="col-6 col-md-3">
+                  <div class="app-card app-card-doc shadow-sm h-100">
+                    <div class="app-card-thumb-holder p-3 d-flex justify-content-center">
+                      <div
+                        style="
+                          width: 95px;
+                          height: 95px;
+                          overflow: hidden;
+                          border-radius: 50%;
+                          border: 2px solid white;
+                        "
+                      >
+                        <img src="${lecturer.foto}" style="width: 100%; height: 100%; object-fit: cover" />
+                      </div>
+                    </div>
+  
+                    <div class="app-card-body p-3 has-card-actions">
+                      <h4 class="app-doc-title truncate mb-0">
+                        <a href="#">${lecturer.nama}</a>
+                      </h4>
+                      <div class="app-doc-meta">
+                        <ul class="list-unstyled mb-0">
+                          <li>
+                            Kelompok Bidang Keahlian:
+                            <span class="text-unmuted">${lecturer.kelompok_bidang_keahlian}</span>
+                          </li>
+                        </ul>
+                      </div>
                     </div>
                   </div>
+                </div>`
+            );
+          });
+        } else {
+          $(".hasil-klasifikasi").addClass("d-none");
+        }
 
-                  <div class="app-card-body p-3 has-card-actions">
-                    <h4 class="app-doc-title truncate mb-0">
-                      <a href="#">${lecturer.nama}</a>
-                    </h4>
-                    <div class="app-doc-meta">
-                      <ul class="list-unstyled mb-0">
-                        <li>
-                          Kelompok Bidang Keahlian:
-                          <span class="text-unmuted">${lecturer.kelompok_bidang_keahlian}</span>
+        if (rekomendasi) {
+          $(".hasil-rekomendasi").removeClass("d-none");
+          var topSimilarity = response["message"]["top_similarity"];
+
+          for (var index = 0; index < topSimilarity.length; index++) {
+            $("#similarity-results").append(
+              `<div class="app-card app-card-notification shadow-sm mb-4">
+                <div class="app-card-header px-4 py-3">
+                  <div class="row g-3 align-items-center">
+                    <div class="col-12 col-lg-auto text-start">
+                      <div class="notification-type mb-3">
+                        <span class="badge" style="background-color: #128c9b"
+                          >Rank #${topSimilarity[index]["rank"]}</span
+                        >
+                      </div>
+  
+                      <h4 class="notification-title mb-1">${
+                        topSimilarity[index]["supervisor"]
+                      }</h4>
+  
+                      <ul class="notification-meta list-inline mb-0">
+                        <li class="list-inline-item fw-bold">
+                          Skor Kemiripan: <span style="color: #128c9b">${
+                            topSimilarity[index]["similarity_score"]
+                          }%</span>
                         </li>
+                        ${
+                          topSimilarity[index]["similarity_score"] > 80
+                            ? `<li class="fw-bold" style="color: red;">Tingkat Kemiripan Sangat Tinggi</li>`
+                            : ``
+                        }
                       </ul>
                     </div>
                   </div>
                 </div>
-              </div>`
-          );
-        });
-
-        $("#similarity-results").empty();
-        var topSimilarity = response["message"]["top_similarity"];
-
-        for (var index = 0; index < topSimilarity.length; index++) {
-          $("#similarity-results").append(
-            `<div class="app-card app-card-notification shadow-sm mb-4">
-              <div class="app-card-header px-4 py-3">
-                <div class="row g-3 align-items-center">
-                  <div class="col-12 col-lg-auto text-start">
-                    <div class="notification-type mb-3">
-                      <span class="badge" style="background-color: #128c9b"
-                        >Rank #${topSimilarity[index]["rank"]}</span
-                      >
-                    </div>
-
-                    <h4 class="notification-title mb-1">${
-                      topSimilarity[index]["supervisor"]
-                    }</h4>
-
-                    <ul class="notification-meta list-inline mb-0">
-                      <li class="list-inline-item fw-bold">
-                        Skor Kemiripan: <span style="color: #128c9b">${
-                          topSimilarity[index]["similarity_score"]
-                        }%</span>
-                      </li>
-                      ${
-                        topSimilarity[index]["similarity_score"] > 80
-                          ? `<li class="fw-bold" style="color: red;">Tingkat Kemiripan Sangat Tinggi</li>`
-                          : ``
-                      }
-                    </ul>
+                <div class="app-card-body p-4">
+                  <div class="notification-content mb-4">
+                    <b>Judul</b><br />${topSimilarity[index]["title"]}
+                  </div>
+                  <div class="notification-content mb-4">
+                    <b>Abstrak</b><br />${topSimilarity[index]["abstract"]}
+                  </div>
+                  <div class="notification-content">
+                    <b>Kata Kunci</b><br />${topSimilarity[index]["keywords"]}
                   </div>
                 </div>
-              </div>
-              <div class="app-card-body p-4">
-                <div class="notification-content mb-4">
-                  <b>Judul</b><br />${topSimilarity[index]["title"]}
-                </div>
-                <div class="notification-content mb-4">
-                  <b>Abstrak</b><br />${topSimilarity[index]["abstract"]}
-                </div>
-                <div class="notification-content">
-                  <b>Kata Kunci</b><br />${topSimilarity[index]["keywords"]}
+                <div class="app-card-footer px-4 py-3">
+                  <a class="action-link" href="${topSimilarity[index]["url"]}"
+                    >${topSimilarity[index]["url"]}</a>
                 </div>
-              </div>
-              <div class="app-card-footer px-4 py-3">
-                <a class="action-link" href="${topSimilarity[index]["url"]}"
-                  >${topSimilarity[index]["url"]}</a>
-              </div>
-            </div>`
-          );
+              </div>`
+            );
+          }
+        } else {
+          $(".hasil-rekomendasi").addClass("d-none");
         }
 
         $("#hasil").removeClass("d-none");
@@ -525,7 +576,7 @@ title %} {% block content %}
       error: function (response) {
         $(".spinner").addClass("d-none");
         $(".overlay").addClass("d-none");
-        alertMessage("Klasifikasi Gagal", "Terjadi kesalahan server", "error");
+        alertMessage("Inferensi Gagal", "Terjadi kesalahan server", "error");
       },
     });
   });

templates/dashboard/history.html

@@ -109,6 +109,7 @@
           </div>
         </div>
 
+        {% if history.probabilitas %}
         <div class="accordion-item">
           <h2 class="accordion-header" id="faq1-heading-3">
             <button
@@ -167,7 +168,7 @@
             </div>
           </div>
         </div>
-
+        {% endif %} {% if history.top_similarity %}
         <div class="accordion-item">
           <h2 class="accordion-header" id="faq1-heading-5">
             <button
@@ -205,6 +206,7 @@
             </div>
           </div>
         </div>
+        {% endif %}
       </div>
     </div>
   </div>

views/classifier.py

@@ -15,14 +15,26 @@ tz = timezone('Asia/Jakarta')
 def inference():
     abstrak = request.get_json().get('abstrak')
     kata_kunci = request.get_json().get('kata_kunci')
+    klasifikasi = request.get_json().get('klasifikasi')
+    rekomendasi = request.get_json().get('rekomendasi')
 
     try:
         text = current_app.inference.text_processing(abstrak, kata_kunci)
 
-        probs, kbk = current_app.inference.classification(text)
-        lecturers = Lecturer.fetch(kelompok_bidang_keahlian=kbk)
+        if klasifikasi:
+            probs, kbk = current_app.inference.classification(text)
+            lecturers = Lecturer.fetch(kelompok_bidang_keahlian=kbk)
 
-        recommended = current_app.inference.content_based_filtering(text)
+        else:
+            probs = {}
+            kbk = ""
+            lecturers = []
+
+        if rekomendasi:
+            recommended = current_app.inference.content_based_filtering(text)
+
+        else:
+            recommended = []
 
         history = History(abstrak=abstrak, kata_kunci=kata_kunci, probabilitas=probs, kelompok_bidang_keahlian=kbk, tanggal_inferensi=datetime.now(tz), top_similarity=recommended)
         history.save(current_user.id)