File size: 5,843 Bytes
090987a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 |
{% extends 'base.html' %}
{% block content %}
<div class="container py-4">
<h2 class="mb-4 fw-bold text-white">Classification</h2>
<form id="classificationForm" method="POST">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-primary mt-3">
Submit
</button>
</form>
<!-- Progress Bar -->
<div id="progressContainer" class="mt-4" style="display: none;">
<div class="progress">
<div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
</div>
<p id="progressText" class="text-white mt-2"></p>
</div>
<!-- Results Container -->
<div id="resultsContainer" style="display: none;">
<div class="alert alert-secondary text-uppercase small mt-4">
<p><strong>Category:</strong> <span id="category"></span></p>
<p><strong>Keywords:</strong> <span id="keywords"></span></p>
<p><strong>Priority Index:</strong> <span id="priorityScore"></span>/10</p>
</div>
<div class="row g-4 mt-2" id="priorityCards">
<!-- Cards will be dynamically inserted here -->
</div>
<div class="row mt-2 table-responsive" id="sentimentTable">
<!-- Sentiment table will be dynamically inserted here -->
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
$(document).ready(function(){
let progressInterval;
$('#classificationForm').on('submit', function(e) {
e.preventDefault();
// Reset and show progress
$('#progressContainer').show();
$('#resultsContainer').hide();
$('#progressBar').css('width', '0%');
$('#progressText').text('Starting...');
// Clear any existing interval
if (progressInterval) {
clearInterval(progressInterval);
}
// Get form data
const formData = new FormData(this);
const progressKey = Date.now().toString();
formData.append('progress_key', progressKey);
// Start progress checking
progressInterval = setInterval(() => {
$.get(`/progress/${progressKey}/`, function(data) {
$('#progressBar').css('width', `${data.percent}%`);
$('#progressText').text(`${data.stage}...`);
if (data.stage === 'complete') {
clearInterval(progressInterval);
}
});
}, 1000);
// Submit form via AJAX
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
clearInterval(progressInterval);
$('#progressContainer').hide();
$('#resultsContainer').show();
// Update results
$('#category').text(response.classification);
$('#keywords').text(response.keywords.join(', '));
$('#priorityScore').text(response.priority_data.priority_score.toFixed(1));
// Update priority cards
const priorityFlags = response.priority_data.priority_flags;
const cardData = [
{ title: 'Does it have fact-check news value?', flag: 'fact_check_value', bg: 'bg-primary' },
{ title: 'Could it cause confusion?', flag: 'cause_confusion', bg: 'bg-secondary' },
{ title: 'Could it cause chaos?', flag: 'cause_chaos', bg: 'bg-success' },
{ title: 'Does it affect government?', flag: 'affects_government', bg: 'bg-danger' },
{ title: 'Immediate economic impact?', flag: 'economic_impact', bg: 'bg-warning' },
{ title: 'Have laws been broken/bent?', flag: 'law_related', bg: 'bg-info' },
{ title: 'Is it in the public interest?', flag: 'public_interest', bg: 'bg-light' },
{ title: 'Are lives in danger?', flag: 'lives_in_danger', bg: 'bg-dark' },
{ title: 'Is it already viral?', flag: 'viral', bg: 'bg-warning' },
{ title: 'Is it urgent or time sensitive?', flag: 'urgent', bg: 'bg-success' }
];
let cardsHtml = '';
cardData.forEach(card => {
cardsHtml += `
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="card text-white ${card.bg} h-100 shadow">
<div class="card-body">
<h5 class="card-title" style="height: 50px;">${card.title}</h5>
<p class="card-text fs-1">${priorityFlags[card.flag] ? 'Yes' : 'No'}</p>
</div>
</div>
</div>
`;
});
$('#priorityCards').html(cardsHtml);
// Update sentiment table if available
if (response.sentiment_data && response.sentiment_data.table_html) {
$('#sentimentTable').html(response.sentiment_data.table_html);
$('#sentimentTable table').DataTable({
responsive: true
});
}
},
error: function(xhr) {
clearInterval(progressInterval);
$('#progressContainer').hide();
alert('Error: ' + (xhr.responseJSON?.error || 'An error occurred'));
}
});
});
});
</script>
{% endblock %}
|