Hugging Face's logo

Spaces:
noranisa
/
Sentimen-Analysis
Running

App Files Community
noranisa commited on
Commit
9102b27
·
verified ·
1 Parent(s): f0073a1

Update templates/result.html

Browse files
Files changed (1) hide show
  1. templates/result.html +136 -29
templates/result.html CHANGED
@@ -1,45 +1,152 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
4
- <title>Hasil</title>
 
 
 
 
 
 
5
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  </head>
7
- <body class="bg-light">
 
8
 
9
  <div class="container mt-5">
10
 
11
- <h2>Hasil Sentimen</h2>
 
 
 
 
 
12
 
13
- <canvas id="chart"></canvas>
 
14
 
15
- <script>
16
- const data = {
17
- labels: ["Positive","Neutral","Negative"],
18
- datasets: [{
19
- data: [
20
- {{ counts['Positive']|default(0) }},
21
- {{ counts['Neutral']|default(0) }},
22
- {{ counts['Negative']|default(0) }}
23
- ]
24
- }]
25
- };
26
-
27
- new Chart(document.getElementById('chart'), {
28
- type: 'pie',
29
- data: data
30
- });
31
- </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
 
33
- <hr>
34
 
35
- <h3>Data Komentar</h3>
 
 
 
 
36
 
37
- <ul>
38
- {% for text, sent in data %}
39
- <li>{{ text }} → <b>{{ sent }}</b></li>
40
- {% endfor %}
41
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
 
43
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  </body>
45
  </html>
 
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) }},
139
+ {{ counts['Neutral']|default(0) }},
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>
152
  </html>