Hugging Face's logo

Spaces:
noranisa
/
Sentimen-Analysis
Sleeping

App Files Community
noranisa commited on
Commit
b3c3d74
·
verified ·
1 Parent(s): acfb9de

Update templates/result.html

Browse files
Files changed (1) hide show
  1. templates/result.html +66 -127
templates/result.html CHANGED
@@ -1,138 +1,68 @@
1
  <!DOCTYPE html>
2
- <html lang="id">
3
  <head>
4
- <meta charset="UTF-8">
5
  <title>Hasil Sentimen</title>
6
-
7
- <!-- Bootstrap -->
8
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
9
-
10
- <!-- Chart.js -->
11
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
-
13
- <style>
14
- body {
15
- background-color: #f4f6f9;
16
- }
17
- .card {
18
- border-radius: 15px;
19
- }
20
- .badge-positive {
21
- background-color: #28a745;
22
- }
23
- .badge-neutral {
24
- background-color: #6c757d;
25
- }
26
- .badge-negative {
27
- background-color: #dc3545;
28
- }
29
- </style>
30
  </head>
31
 
32
- <body>
33
 
34
  <div class="container mt-5">
35
 
36
- <!-- HEADER -->
37
- <div class="text-center mb-4">
38
- <h1>📊 Hasil Analisis Sentimen</h1>
39
- <p class="text-muted">Keyword: <b>{{ request.form['keyword'] }}</b></p>
40
- <p class="text-muted">Sumber Data: <b>{{ source }}</b></p>
41
- </div>
42
-
43
- <!-- CHART + STAT -->
44
- <div class="row">
45
-
46
- <!-- CHART -->
47
- <div class="col-md-6">
48
- <div class="card p-3 shadow">
49
- <h5 class="text-center">Distribusi Sentimen</h5>
50
- <canvas id="sentimentChart"></canvas>
51
- </div>
52
- </div>
53
-
54
- <!-- STAT -->
55
- <div class="col-md-6">
56
- <div class="card p-3 shadow">
57
- <h5 class="text-center">Statistik</h5>
58
-
59
- <ul class="list-group mt-3">
60
- <li class="list-group-item d-flex justify-content-between">
61
- Positive
62
- <span class="badge bg-success">
63
- {{ counts['Positive']|default(0) }}
64
- </span>
65
- </li>
66
-
67
- <li class="list-group-item d-flex justify-content-between">
68
- Neutral
69
- <span class="badge bg-secondary">
70
- {{ counts['Neutral']|default(0) }}
71
- </span>
72
- </li>
73
-
74
- <li class="list-group-item d-flex justify-content-between">
75
- Negative
76
- <span class="badge bg-danger">
77
- {{ counts['Negative']|default(0) }}
78
- </span>
79
- </li>
80
- </ul>
81
- </div>
82
- </div>
83
-
84
- </div>
85
-
86
- <!-- TABLE DATA -->
87
- <div class="card mt-5 shadow">
88
- <div class="card-header bg-dark text-white">
89
- <h5>📝 Data Komentar</h5>
90
- </div>
91
-
92
- <div class="table-responsive">
93
- <table class="table table-striped table-hover">
94
-
95
- <thead class="table-dark">
96
- <tr>
97
- <th>No</th>
98
- <th>Komentar</th>
99
- <th>Sentimen</th>
100
- </tr>
101
- </thead>
102
-
103
- <tbody>
104
- {% for text, sent in data %}
105
- <tr>
106
- <td>{{ loop.index }}</td>
107
- <td>{{ text }}</td>
108
- <td>
109
- {% if sent == "Positive" %}
110
- <span class="badge badge-positive">Positive</span>
111
- {% elif sent == "Neutral" %}
112
- <span class="badge badge-neutral">Neutral</span>
113
- {% else %}
114
- <span class="badge badge-negative">Negative</span>
115
- {% endif %}
116
- </td>
117
- </tr>
118
- {% endfor %}
119
- </tbody>
120
-
121
- </table>
122
- </div>
123
- </div>
124
-
125
- <!-- BUTTON BACK -->
126
- <div class="text-center mt-4">
127
- <a href="/" class="btn btn-secondary">⬅ Kembali</a>
128
- </div>
129
 
130
  </div>
131
 
132
- <!-- CHART SCRIPT -->
133
  <script>
134
- const data = {
135
- labels: ["Positive", "Neutral", "Negative"],
 
 
136
  datasets: [{
137
  data: [
138
  {{ counts['Positive']|default(0) }},
@@ -140,12 +70,21 @@
140
  {{ counts['Negative']|default(0) }}
141
  ]
142
  }]
143
- };
144
-
145
- new Chart(document.getElementById('sentimentChart'), {
146
- type: 'pie',
147
- data: data
148
- });
 
 
 
 
 
 
 
 
 
149
  </script>
150
 
151
  </body>
 
1
  <!DOCTYPE html>
2
+ <html>
3
  <head>
 
4
  <title>Hasil Sentimen</title>
 
 
5
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
 
6
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  </head>
8
 
9
+ <body class="bg-light">
10
 
11
  <div class="container mt-5">
12
 
13
+ <h2>📊 Hasil Sentimen</h2>
14
+ <p><b>Keyword:</b> {{ keyword }}</p>
15
+ <p><b>Sumber:</b> {{ source }}</p>
16
+
17
+ <!-- PIE -->
18
+ <canvas id="pieChart"></canvas>
19
+
20
+ <hr>
21
+
22
+ <!-- 📊 PER PLATFORM -->
23
+ <h4>Perbandingan Platform</h4>
24
+ <canvas id="platformChart"></canvas>
25
+
26
+ <hr>
27
+
28
+ <!-- ☁️ WORDCLOUD -->
29
+ <h4>WordCloud</h4>
30
+ <img src="/static/wordcloud.png" width="500">
31
+
32
+ <hr>
33
+
34
+ <!-- 📁 DOWNLOAD -->
35
+ <a href="/download" class="btn btn-success">⬇ Download CSV</a>
36
+
37
+ <hr>
38
+
39
+ <!-- 📊 EVALUASI -->
40
+ <h4>Evaluasi Model</h4>
41
+ <pre>{{ report }}</pre>
42
+
43
+ <hr>
44
+
45
+ <!-- DATA -->
46
+ <table class="table table-striped">
47
+ <tr><th>No</th><th>Text</th><th>Sentiment</th><th>Source</th></tr>
48
+
49
+ {% for t,s,src in data %}
50
+ <tr>
51
+ <td>{{ loop.index }}</td>
52
+ <td>{{ t }}</td>
53
+ <td>{{ s }}</td>
54
+ <td>{{ src }}</td>
55
+ </tr>
56
+ {% endfor %}
57
+ </table>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58
 
59
  </div>
60
 
 
61
  <script>
62
+ new Chart(document.getElementById('pieChart'), {
63
+ type: 'pie',
64
+ data: {
65
+ labels: ["Positive","Neutral","Negative"],
66
  datasets: [{
67
  data: [
68
  {{ counts['Positive']|default(0) }},
 
70
  {{ counts['Negative']|default(0) }}
71
  ]
72
  }]
73
+ }
74
+ });
75
+
76
+ const platformData = {
77
+ labels: {{ platform_counts.keys()|list }},
78
+ datasets: [{
79
+ label: "Positive",
80
+ data: {{ platform_counts.values()|map(attribute='Positive')|list }}
81
+ }]
82
+ };
83
+
84
+ new Chart(document.getElementById('platformChart'), {
85
+ type: 'bar',
86
+ data: platformData
87
+ });
88
  </script>
89
 
90
  </body>