125 lines
6.1 KiB
HTML
125 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Smart Kampung - Sentiment Analysis</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="row justify-content-center mt-4">
|
|
<div class="col-md-8 text-center">
|
|
<img src="{{ url_for('static', filename='assets/smartkampung.png') }}" alt="Smart Kampung Logo" class="logo mb-4">
|
|
<h1 class="text-primary mb-4">Analisis Sentimen</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="card shadow">
|
|
<div class="card-header bg-primary text-white">
|
|
<h3 class="text-center mb-0">Masukkan Teks untuk Dianalisis</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="sentimentForm">
|
|
<div class="mb-3">
|
|
<label for="text" class="form-label">Teks:</label>
|
|
<textarea class="form-control" id="text" name="text" rows="4" required
|
|
placeholder="Masukkan teks yang ingin dianalisis..."></textarea>
|
|
</div>
|
|
<div class="text-center">
|
|
<button type="submit" class="btn btn-primary btn-lg">
|
|
<i class="fas fa-search"></i> Analisis Sentimen
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div id="result" class="mt-4" style="display: none;">
|
|
<div class="alert p-3 rounded" role="alert">
|
|
<h4 class="alert-heading">Hasil Analisis</h4>
|
|
<p class="mb-0">Sentimen: <span id="sentiment" class="fw-bold"></span></p>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<h5 class="text-center mb-3">Skor Kepercayaan:</h5>
|
|
<div class="progress-group">
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<label>Positif</label>
|
|
<span id="positive-percent" class="text-success"></span>
|
|
</div>
|
|
<div class="progress">
|
|
<div id="positive-prob" class="progress-bar bg-success" role="progressbar"></div>
|
|
</div>
|
|
</div>
|
|
<div class="progress-group">
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<label>Negatif</label>
|
|
<span id="negative-percent" class="text-danger"></span>
|
|
</div>
|
|
<div class="progress">
|
|
<div id="negative-prob" class="progress-bar bg-danger" role="progressbar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer mt-5">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 text-center">
|
|
<p class="footer-text">© 2026 By Desi Laila Fitria - Politeknik Negeri Jember</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://kit.fontawesome.com/your-font-awesome-kit.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#sentimentForm').on('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
$.ajax({
|
|
url: '/analyze',
|
|
method: 'POST',
|
|
data: $(this).serialize(),
|
|
success: function(response) {
|
|
console.log('Response from server:', response);
|
|
$('#result').show();
|
|
$('#sentiment').text(response.sentiment);
|
|
|
|
// Update progress bars and percentages
|
|
$('#positive-prob').css('width', response.probabilities.Positive);
|
|
$('#negative-prob').css('width', response.probabilities.Negative);
|
|
|
|
$('#positive-percent').text(response.probabilities.Positive);
|
|
$('#negative-percent').text(response.probabilities.Negative);
|
|
|
|
// Update alert color based on sentiment
|
|
const alert = $('#result .alert');
|
|
alert.removeClass('alert-success alert-danger');
|
|
|
|
const sentimentText = response.sentiment.trim().toLowerCase();
|
|
if (response.sentiment === 'Positif' || sentimentText === 'positive') {
|
|
alert.addClass('alert-success');
|
|
} else if (sentimentText === 'negatif' || sentimentText === 'negative') {
|
|
alert.addClass('alert-danger');
|
|
}
|
|
},
|
|
|
|
error: function() {
|
|
alert('Terjadi kesalahan saat menganalisis teks.');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |