287 lines
12 KiB
HTML
287 lines
12 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Sentiment Dashboard" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h1 class="h3 mb-0">{% trans "Sentiment Analytics Dashboard" %}</h1>
|
|
<p class="text-muted">{% trans "AI-powered sentiment analysis insights" %}</p>
|
|
</div>
|
|
<div>
|
|
<a href="{% url 'ai_engine:sentiment_list' %}" class="btn btn-outline-secondary">
|
|
<i class="bi bi-list"></i> {% trans "View All Results" %}
|
|
</a>
|
|
<a href="{% url 'ai_engine:analyze_text' %}" class="btn btn-primary">
|
|
<i class="bi bi-plus-circle"></i> {% trans "Analyze Text" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overall Statistics -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h6 class="text-muted mb-2">{% trans "Total Analyzed" %}</h6>
|
|
<h2 class="mb-0">{{ overall_stats.total }}</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card border-success">
|
|
<div class="card-body">
|
|
<h6 class="text-muted mb-2">😊 {% trans "Positive" %}</h6>
|
|
<h2 class="mb-0 text-success">
|
|
{{ overall_stats.positive }}
|
|
</h2>
|
|
<small class="text-muted">{{ overall_stats.positive_pct }}%</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card border-secondary">
|
|
<div class="card-body">
|
|
<h6 class="text-muted mb-2">😐 {% trans "Neutral" %}</h6>
|
|
<h2 class="mb-0 text-secondary">
|
|
{{ overall_stats.neutral }}
|
|
</h2>
|
|
<small class="text-muted">{{ overall_stats.neutral_pct }}%</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card border-danger">
|
|
<div class="card-body">
|
|
<h6 class="text-muted mb-2">😞 {% trans "Negative" %}</h6>
|
|
<h2 class="mb-0 text-danger">
|
|
{{ overall_stats.negative }}
|
|
</h2>
|
|
<small class="text-muted">{{ overall_stats.negative_pct }}%</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Sentiment Distribution -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">{% trans "Sentiment Distribution" %}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span>😊 {% trans "Positive" %}</span>
|
|
<span>{{ overall_stats.positive }} ({{ overall_stats.positive_pct }}%)</span>
|
|
</div>
|
|
<div class="progress" style="height: 30px;">
|
|
<div class="progress-bar bg-success" role="progressbar"
|
|
style="width: {{ overall_stats.positive_pct }}%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span>😐 {% trans "Neutral" %}</span>
|
|
<span>{{ overall_stats.neutral }} ({{ overall_stats.neutral_pct }}%)</span>
|
|
</div>
|
|
<div class="progress" style="height: 30px;">
|
|
<div class="progress-bar bg-secondary" role="progressbar"
|
|
style="width: {{ overall_stats.neutral_pct }}%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span>😞 {% trans "Negative" %}</span>
|
|
<span>{{ overall_stats.negative }} ({{ overall_stats.negative_pct }}%)</span>
|
|
</div>
|
|
<div class="progress" style="height: 30px;">
|
|
<div class="progress-bar bg-danger" role="progressbar"
|
|
style="width: {{ overall_stats.negative_pct }}%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row text-center">
|
|
<div class="col-6">
|
|
<h6 class="text-muted">{% trans "Avg Score" %}</h6>
|
|
<h4>{{ overall_stats.avg_score|floatformat:2 }}</h4>
|
|
</div>
|
|
<div class="col-6">
|
|
<h6 class="text-muted">{% trans "Avg Confidence" %}</h6>
|
|
<h4>{{ overall_stats.avg_confidence|floatformat:2 }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Language Distribution -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">{% trans "Language Distribution" %}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% for lang_stat in language_stats %}
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span>
|
|
{% if lang_stat.language == 'ar' %}
|
|
العربية (Arabic)
|
|
{% else %}
|
|
English
|
|
{% endif %}
|
|
</span>
|
|
<span>{{ lang_stat.count }}</span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-info" role="progressbar"
|
|
style="width: {% widthratio lang_stat.count overall_stats.total 100 %}%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<hr>
|
|
<h6 class="mb-3">{% trans "Sentiment by Language" %}</h6>
|
|
{% for lang, stats in sentiment_by_language.items %}
|
|
<div class="mb-3">
|
|
<strong>
|
|
{% if lang == 'ar' %}العربية{% else %}English{% endif %}:
|
|
</strong>
|
|
<div class="d-flex gap-2 mt-1">
|
|
<span class="badge bg-success">
|
|
😊 {{ stats.positive }} ({{ stats.positive_pct }}%)
|
|
</span>
|
|
<span class="badge bg-secondary">
|
|
😐 {{ stats.neutral }} ({{ stats.neutral_pct }}%)
|
|
</span>
|
|
<span class="badge bg-danger">
|
|
😞 {{ stats.negative }} ({{ stats.negative_pct }}%)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Top Keywords -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">{% trans "Top Keywords" %}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if top_keywords %}
|
|
{% for keyword, count in top_keywords %}
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<span class="badge bg-primary">{{ keyword }}</span>
|
|
<span class="badge bg-light text-dark">{{ count }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="text-muted text-center">{% trans "No keywords found" %}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Service Stats -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">{% trans "AI Service Usage" %}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% for service_stat in service_stats %}
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span class="text-capitalize">{{ service_stat.ai_service }}</span>
|
|
<span>{{ service_stat.count }}</span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar"
|
|
style="width: {% widthratio service_stat.count overall_stats.total 100 %}%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Results -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">{% trans "Recent Analysis Results" %}</h5>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "Text" %}</th>
|
|
<th>{% trans "Sentiment" %}</th>
|
|
<th>{% trans "Score" %}</th>
|
|
<th>{% trans "Language" %}</th>
|
|
<th>{% trans "Date" %}</th>
|
|
<th>{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for result in recent_results %}
|
|
<tr>
|
|
<td>
|
|
<div class="text-truncate" style="max-width: 400px;">
|
|
{{ result.text }}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{% if result.sentiment == 'positive' %}
|
|
<span class="badge bg-success">😊 {% trans "Positive" %}</span>
|
|
{% elif result.sentiment == 'negative' %}
|
|
<span class="badge bg-danger">😞 {% trans "Negative" %}</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">😐 {% trans "Neutral" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ result.sentiment_score|floatformat:2 }}</td>
|
|
<td>
|
|
{% if result.language == 'ar' %}
|
|
<span class="badge bg-info">AR</span>
|
|
{% else %}
|
|
<span class="badge bg-info">EN</span>
|
|
{% endif %}
|
|
</td>
|
|
<td><small>{{ result.created_at|date:"Y-m-d H:i" }}</small></td>
|
|
<td>
|
|
<a href="{% url 'ai_engine:sentiment_detail' result.id %}"
|
|
class="btn btn-sm btn-outline-primary">
|
|
<i class="bi bi-eye"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="6" class="text-center text-muted py-4">
|
|
{% trans "No recent results" %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|