243 lines
13 KiB
HTML
243 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Detail Riwayat Deteksi{% endblock %}
|
|
|
|
{% block content %}
|
|
{% set is_manual_expert_system = prediction.source == 'manual_expert_system' %}
|
|
<div class="container-lg mt-5 mb-5">
|
|
{% if prediction %}
|
|
<div class="row">
|
|
<div class="col-lg-8 offset-lg-2">
|
|
<!-- Header -->
|
|
<div class="card border-success mb-4">
|
|
<div class="card-header bg-success text-white">
|
|
<h4 class="mb-0"><i class="fas fa-search"></i> Detail Riwayat Deteksi</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Basic Info -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Nama File Asli</h6>
|
|
<p class="fw-bold">{{ prediction.original_filename or 'N/A' }}</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Waktu Deteksi</h6>
|
|
<p class="fw-bold">
|
|
{% if prediction.timestamp %}
|
|
{{ prediction.timestamp[:19] | replace('T', ' ') }}
|
|
{% else %}
|
|
N/A
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Display -->
|
|
{% if prediction.image_path and not is_manual_expert_system %}
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="fas fa-image"></i> Foto yang Dianalisis</h5>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
{% set image_url = '/uploads/' + prediction.filename %}
|
|
<img src="{{ image_url }}" alt="Uploaded Image" class="img-fluid rounded" style="max-height: 400px;">
|
|
<p class="text-muted mt-3 small">Gambar yang digunakan untuk analisis</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Prediction Result -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="fas fa-stethoscope"></i>{% if is_manual_expert_system %} Hasil Diagnosis Sistem Pakar{% else %} Hasil Prediksi{% endif %}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="text-center p-4">
|
|
{% if is_manual_expert_system %}
|
|
<div class="badge bg-warning text-dark p-3 mb-3" style="font-size: 1.2rem;">
|
|
<i class="fas fa-biohazard"></i> POSITIF PMK
|
|
</div>
|
|
<h5 class="text-warning fw-bold">Kesimpulan: {{ diagnosis.diagnosis.nama or prediction.diagnosis_label or 'Hasil Forward Chaining' }}</h5>
|
|
{% elif prediction.prediction.lower() == 'sehat' %}
|
|
<div class="badge bg-success p-3 mb-3" style="font-size: 1.2rem;">
|
|
<i class="fas fa-check-circle"></i> SEHAT
|
|
</div>
|
|
<h5 class="text-success fw-bold">Kesimpulan: Organ Sehat</h5>
|
|
{% else %}
|
|
<div class="badge bg-danger p-3 mb-3" style="font-size: 1.2rem;">
|
|
<i class="fas fa-exclamation-circle"></i> SAKIT
|
|
</div>
|
|
<h5 class="text-danger fw-bold">Kesimpulan: PMK Terdeteksi</h5>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
{% if not is_manual_expert_system %}
|
|
<div class="alert alert-info">
|
|
<h6 class="text-muted mb-2">Confidence Score</h6>
|
|
<div class="progress mb-2" style="height: 25px;">
|
|
<div
|
|
class="progress-bar {% if prediction.prediction.lower() == 'sehat' %}bg-success{% else %}bg-danger{% endif %}"
|
|
role="progressbar"
|
|
data-width="{{ prediction.confidence or 0 }}"
|
|
aria-valuenow="{{ prediction.confidence or 0 }}"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<strong>{{ prediction.confidence or 0 }}%</strong>
|
|
</div>
|
|
</div>
|
|
<small class="text-muted">Tingkat kepercayaan model terhadap hasil prediksi</small>
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<h6 class="text-muted mb-2">Sumber Diagnosis</h6>
|
|
<p class="mb-0 fw-bold">Forward Chaining Sistem Pakar</p>
|
|
<small class="text-muted">Confidence tidak ditampilkan untuk diagnosis sistem pakar.</small>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Diagnosis Result (if exists) -->
|
|
{% if diagnosis %}
|
|
<div class="card mb-4 border-primary">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="mb-0"><i class="fas fa-stethoscope"></i> Hasil Diagnosis Sistem Pakar</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Diagnosis Name and Severity -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Diagnosis</h6>
|
|
<h5 class="fw-bold">
|
|
{% set diag_name = diagnosis.diagnosis.nama or 'Tidak diketahui' %}
|
|
{{ diag_name }}
|
|
</h5>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Tingkat Keparahan</h6>
|
|
{% if diagnosis.severity == 'ringan' %}
|
|
<span class="badge bg-success p-2" style="font-size: 1rem;">{{ diagnosis.severity|upper }}</span>
|
|
{% elif diagnosis.severity == 'sedang' %}
|
|
<span class="badge bg-warning text-dark p-2" style="font-size: 1rem;">{{ diagnosis.severity|upper }}</span>
|
|
{% else %}
|
|
<span class="badge bg-danger p-2" style="font-size: 1rem;">{{ diagnosis.severity|upper }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
{% if diagnosis.diagnosis.deskripsi %}
|
|
<div class="mb-4">
|
|
<h6 class="text-muted mb-2">Deskripsi</h6>
|
|
<p class="card-text">{{ diagnosis.diagnosis.deskripsi }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Observed Symptoms -->
|
|
{% if diagnosis.diagnosis.gejala_teramati %}
|
|
<div class="mb-4">
|
|
<h6 class="text-muted mb-3">Gejala yang Teramati</h6>
|
|
<div class="row">
|
|
{% for symptom_code in diagnosis.diagnosis.gejala_teramati %}
|
|
<div class="col-md-12 mb-2">
|
|
<div class="card bg-light">
|
|
<div class="card-body py-2 px-3">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto">
|
|
<span class="badge bg-info">{{ symptom_code }}</span>
|
|
</div>
|
|
<div class="col">
|
|
<p class="mb-0">{{ symptom_code|get_symptom_desc }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Recommended Solutions -->
|
|
{% if diagnosis.diagnosis.solusi %}
|
|
<div class="mb-4">
|
|
<h6 class="text-muted mb-2">Solusi dan Rekomendasi</h6>
|
|
<ul class="list-group list-group-flush">
|
|
{% for solution in diagnosis.diagnosis.solusi %}
|
|
<li class="list-group-item">
|
|
<i class="fas fa-check-circle text-success me-2"></i>{{ solution }}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Waktu Diagnosis -->
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h6 class="text-muted mb-2">Waktu Diagnosis</h6>
|
|
<p class="fw-bold">
|
|
{% if diagnosis.timestamp %}
|
|
{{ diagnosis.timestamp[:19] | replace('T', ' ') }}
|
|
{% else %}
|
|
N/A
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info alert-dismissible fade show" role="alert">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
<strong>Belum Ada Diagnosis.</strong> Prediksi ini belum didiagnosis oleh sistem pakar.
|
|
<a href="{{ url_for('expert_system_page') }}" class="alert-link">Lakukan diagnosis sekarang.</a>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Actions -->
|
|
<div class="d-grid gap-2 d-sm-flex justify-content-sm-between mt-4">
|
|
<a href="{{ url_for('riwayat_deteksi') }}" class="btn btn-secondary btn-lg">
|
|
<i class="fas fa-arrow-left"></i> Kembali ke Riwayat
|
|
</a>
|
|
<a href="{{ url_for('index') }}" class="btn btn-success btn-lg">
|
|
<i class="fas fa-home"></i> Ke Halaman Beranda
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-danger" role="alert">
|
|
<h5 class="alert-heading"><i class="fas fa-exclamation-triangle"></i> Data Tidak Ditemukan</h5>
|
|
<p>Maaf, riwayat deteksi dengan ID yang diminta tidak dapat ditemukan.</p>
|
|
<hr>
|
|
<a href="{{ url_for('riwayat_deteksi') }}" class="btn btn-primary">Kembali ke Riwayat Deteksi</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<style>
|
|
.table-hover tbody tr:hover {
|
|
background-color: rgba(40, 167, 69, 0.1);
|
|
}
|
|
|
|
code {
|
|
background-color: #f8f9fa;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
{% endblock %} |