File size: 7,648 Bytes
28b723d | 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 | {% extends "base.html" %}
{% block content %}
<!-- Page Header -->
<section class="section-full" style="background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); color: white; padding: 4rem 5vw 6rem 5vw;">
<div class="container text-center">
<h1 style="color: white; margin-bottom: 1rem;">Tentang PantunGen</h1>
<p style="color: rgba(255,255,255,0.8); font-size: 1.125rem; max-width: 600px; margin: 0 auto;">Menggabungkan tradisi dan inovasi masa depan melalui kecerdasan buatan.</p>
</div>
</section>
<div class="container mb-4" style="margin-top: -3rem; position: relative; z-index: 10;">
<div class="card mb-4 fade-in" style="animation-delay: 0.1s;">
<div style="display: flex; gap: 4rem; align-items: center; flex-wrap: wrap;">
<div style="flex: 1.5; min-width: 300px;">
<h2 class="mb-3">Tujuan Kami</h2>
<p class="text-muted mb-3" style="font-size: 1.125rem; line-height: 1.8;">PantunGen dikembangkan untuk membantu membuat pantun tematik berbahasa Indonesia dengan lebih mudah sekaligus mendukung pelestarian budaya pantun melalui teknologi NLP. Sistem ini menggunakan model IndoGPT yang telah di-fine-tune pada dataset pantun Indonesia untuk menghasilkan pantun sesuai tema yang diberikan.</p>
<p class="text-muted" style="font-size: 1.125rem; line-height: 1.8;">Pantun yang dihasilkan tetap mengikuti kaidah pantun, seperti pola rima a-b-a-b, keterkaitan antara sampiran dan isi, serta jumlah suku kata yang sesuai, sehingga hasilnya tetap menarik dan mudah dipahami.</p>
</div>
<div style="flex: 1; min-width: 300px; text-align: center;">
<div style="width: 250px; height: 250px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.2)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto;">
<i class="fa-solid fa-seedling" style="font-size: 8rem; color: var(--color-success); filter: drop-shadow(0 10px 15px rgba(16, 185, 129, 0.3));"></i>
</div>
</div>
</div>
</div>
<div class="card mb-4 fade-in" style="animation-delay: 0.2s;">
<h2 class="mb-4 text-center">Bagaimana Model Ini Bekerja?</h2>
<div style="display: flex; gap: 3rem; flex-wrap: wrap; justify-content: center;">
<div style="flex: 1; min-width: 250px; text-align: center; padding: 1.5rem; background: var(--color-surface); border-radius: var(--radius-lg);">
<div style="width: 80px; height: 80px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: var(--shadow-md);">
<i class="fa-solid fa-database" style="font-size: 2rem; color: var(--color-primary);"></i>
</div>
<h4 style="margin-bottom: 1rem;">1. Pengumpulan Data</h4>
<p class="text-muted mt-1" style="font-size: 1rem; line-height: 1.6;">Ribuan pantun tradisional dan modern dikumpulkan, dibersihkan, dan dianotasi untuk membentuk korpus yang solid.</p>
</div>
<div style="flex: 1; min-width: 250px; text-align: center; padding: 1.5rem; background: var(--color-surface); border-radius: var(--radius-lg);">
<div style="width: 80px; height: 80px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: var(--shadow-md);">
<i class="fa-solid fa-brain" style="font-size: 2rem; color: var(--color-accent);"></i>
</div>
<h4 style="margin-bottom: 1rem;">2. Fine-Tuning Model</h4>
<p class="text-muted mt-1" style="font-size: 1rem; line-height: 1.6;">Model IndoGPT dilatih secara khusus untuk memahami konstrain suku kata dan pola rima a-b-a-b.</p>
</div>
<div style="flex: 1; min-width: 250px; text-align: center; padding: 1.5rem; background: var(--color-surface); border-radius: var(--radius-lg);">
<div style="width: 80px; height: 80px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: var(--shadow-md);">
<i class="fa-solid fa-gears" style="font-size: 2rem; color: var(--color-warning);"></i>
</div>
<h4 style="margin-bottom: 1rem;">3. Evaluasi Metrik</h4>
<p class="text-muted mt-1" style="font-size: 1rem; line-height: 1.6;">Performa divalidasi menggunakan metrik standar serta penilaian linguistik untuk memastikan kealamian bahasa.</p>
</div>
</div>
</div>
<div class="card mb-4 fade-in" style="animation-delay: 0.3s; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: white; border: none; box-shadow: 0 20px 25px -5px rgba(79, 70, 229, 0.4);">
<h2 class="mb-4 text-center" style="color: white;">Alur Penggunaan</h2>
<div style="display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap;">
<div class="text-center" style="flex: 1;">
<div style="width: 64px; height: 64px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; backdrop-filter: blur(4px);">
<i class="fa-solid fa-keyboard" style="font-size: 1.5rem;"></i>
</div>
<p style="font-weight: 600; font-size: 1.1rem; color: rgba(255,255,255,0.9);">Input Tema</p>
</div>
<i class="fa-solid fa-chevron-right" style="opacity: 0.5; font-size: 1.5rem;"></i>
<div class="text-center" style="flex: 1;">
<div style="width: 64px; height: 64px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; backdrop-filter: blur(4px);">
<i class="fa-solid fa-sliders" style="font-size: 1.5rem;"></i>
</div>
<p style="font-weight: 600; font-size: 1.1rem; color: rgba(255,255,255,0.9);">Atur Gaya</p>
</div>
<i class="fa-solid fa-chevron-right" style="opacity: 0.5; font-size: 1.5rem;"></i>
<div class="text-center" style="flex: 1;">
<div style="width: 64px; height: 64px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; backdrop-filter: blur(4px);">
<i class="fa-solid fa-microchip" style="font-size: 1.5rem;"></i>
</div>
<p style="font-weight: 600; font-size: 1.1rem; color: rgba(255,255,255,0.9);">Generasi Pantun</p>
</div>
<i class="fa-solid fa-chevron-right" style="opacity: 0.5; font-size: 1.5rem;"></i>
<div class="text-center" style="flex: 1;">
<div style="width: 64px; height: 64px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; backdrop-filter: blur(4px);">
<i class="fa-solid fa-scroll" style="font-size: 1.5rem;"></i>
</div>
<p style="font-weight: 600; font-size: 1.1rem; color: rgba(255,255,255,0.9);">Pantun Selesai</p>
</div>
</div>
</div>
</div>
{% endblock %}
|