TIF_E41202548/FlaskSentimen/templates/analisis_hasil.html

<!-- Navigation -->
{% extends "base.html" %}
{% block title %}Hasil Uji{% endblock %}
<!-- Page Content -->
{% block content %}

<style>
  .table td {
    font-size: 20px;
  }

  .table th {
    font-size: 22px;
  }
</style>

<div class="container" id="media-content">

  {% include "menu_dataset.html" %}

  {% if msg %}
  <br>
  <div class="card card-body mt-4" style="margin-bottom: 10px;">
    <h2 class="text-center">Diagram Batang Document Frequency</h2>
    <div id="barchart" class="chart"></div>
  </div>
  <br>

  <div class="card card-body mt-4" style="margin-bottom: 10px;">
    <h2 class="text-center">Diagram Lingkaran Seluruh Dataset</h2>
    <div id="piechart" class="chart"></div>
  </div>
  <br>

  <div class="card card-body mt-4" style="margin-bottom: 10px;">
    <div id="wordcloud" class="col-lg-12">
      <h3 class="text-center">Word Cloud Kelas Positif</h3>
      <br>
      <img class="img-responsive center-block d-block mx-auto" alt="Responsive image"
        src="data:image/jpeg;base64,{{ img_data_pos }}" alt="img_data" id="imgslot" />
    </div>
  </div>
  <br>
  <div class="card card-body mt-4" style="margin-bottom: 10px;">
    <div id="wordcloud3" class="col-lg-12">
      <h3 class="text-center">Word Cloud Kelas Netral</h3>
      <br>
      <img class="img-responsive center-block d-block mx-auto" alt="Responsive image"
        src="data:image/jpeg;base64,{{ img_data_net }}" alt="img_data" id="imgslot" />
    </div>
  </div>
  <br>
  <div class="card card-body mt-4" style="margin-bottom: 10px;">
    <div id="wordcloud2" class="col-lg-12">
      <h3 class="text-center">Word Cloud Kelas Negatif</h3>
      <br>
      <img class="img-responsive center-block d-block mx-auto" alt="Responsive image"
        src="data:image/jpeg;base64,{{ img_data_neg }}" alt="img_data" id="imgslot" />
    </div>
  </div>
  <br>

  <div class="card card-body mt-4" style="margin-bottom: 10px;">
    <h2>Hasil Posterior Probability</h2>
    <div class="table caption-top table-striped table-bordered table-responsive-md" cellspacing="0" width="100%"
      style="height: 400px; font-size: 20; overflow-y: auto; overflow-x: auto;">
      {{ show|safe }}
    </div>
  </div>
  <br>
  <div class="card card-body mt-4" style="margin-bottom: 10px;">
    <h2>Confusion Matrik</h2>
    <div class="table caption-top table-striped table-bordered table-responsive-md" cellspacing="0" width="100%"
      style="overflow-y: auto; overflow-x: auto;">
      {{ confusion_matrix|safe }}
    </div>
  </div>
  <br>

  <div class="card card-body mt-4" style="margin-bottom: 10px;">
    <h2>Hasil Evaluasi Sistem</h2>
    <br>
    <div class="table-responsive-md">
      <table class="table caption-top table-striped table-bordered" cellspacing="0" width="100%" style="width: 23%;">
        <tr>
          <th>Akurasi</th>
          <td>
            {{ akurasi|safe }}%
          </td>
        </tr>
      </table>

      <table class="table caption-top table-striped table-bordered" cellspacing="0" width="100%"
        style="overflow-y: auto; overflow-x: auto;">
        <tr>
          <th></th>
          <th>Positif</th>
          <th>Netral</th>
          <th>Negatif</th>
          <th>Rata-Rata</th>
        </tr>
        <tr>
          <th>Precision</th>
          <td>{{ presisi_pos|safe }}%</td>
          <td>{{ presisi_net|safe }}%</td>
          <td>{{ presisi_neg|safe }}%</td>
          <td>{{ rata_rata_presisi|safe }}%</td>
        </tr>
        <tr>
          <th>Recall</th>
          <td>{{ recall_pos|safe }}%</td>
          <td>{{ recall_net|safe }}%</td>
          <td>{{ recall_neg|safe }}%</td>
          <td>{{ rata_rata_recall|safe }}%</td>
        </tr>
        <tr>
          <th>F1-Score</th>
          <td>{{ Fscore_pos|safe }}%</td>
          <td>{{ Fscore_net|safe }}%</td>
          <td>{{ Fscore_neg|safe }}%</td>
          <td>{{ rata_rata_Fscore|safe }}%</td>
        </tr>
      </table>
    </div>
  </div>
  <br>
  {% else %}

  <div class="alert alert-warning" role="alert">
    Dataset Kosong!!
  </div>

  {% endif %}

</div>

{% block script %}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
  //var graphs = {{graphJSON | safe}};
  var piegraph = {{ pieJSON | safe}};
  var bargraph = {{ barJSON | safe}};
  // Plotly.plot('chart',graphs,{});
  Plotly.plot('barchart', bargraph, {});
  Plotly.plot('piechart', piegraph, {});
</script>
{% endblock %}
<!-- /.container -->
{% endblock %}