Mascode01/PantunGen

1{% extends "base.html" %}2 3{% block content %}4<!-- Page Header -->5<section class="section-full" style="background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); color: white; padding: 4rem 5vw 6rem 5vw;">6    <div class="container text-center">7        <h1 style="color: white; margin-bottom: 1rem;">Tentang PantunGen</h1>8        <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>9    </div>10</section>11 12<div class="container mb-4" style="margin-top: -3rem; position: relative; z-index: 10;">13    <div class="card mb-4 fade-in" style="animation-delay: 0.1s;">14        <div style="display: flex; gap: 4rem; align-items: center; flex-wrap: wrap;">15            <div style="flex: 1.5; min-width: 300px;">16                <h2 class="mb-3">Tujuan Kami</h2>17                <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>18                <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>19            </div>20            <div style="flex: 1; min-width: 300px; text-align: center;">21                <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;">22                    <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>23                </div>24            </div>25        </div>26    </div>27 28    <div class="card mb-4 fade-in" style="animation-delay: 0.2s;">29        <h2 class="mb-4 text-center">Bagaimana Model Ini Bekerja?</h2>30        31        <div style="display: flex; gap: 3rem; flex-wrap: wrap; justify-content: center;">32            <div style="flex: 1; min-width: 250px; text-align: center; padding: 1.5rem; background: var(--color-surface); border-radius: var(--radius-lg);">33                <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);">34                    <i class="fa-solid fa-database" style="font-size: 2rem; color: var(--color-primary);"></i>35                </div>36                <h4 style="margin-bottom: 1rem;">1. Pengumpulan Data</h4>37                <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>38            </div>39            40            <div style="flex: 1; min-width: 250px; text-align: center; padding: 1.5rem; background: var(--color-surface); border-radius: var(--radius-lg);">41                <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);">42                    <i class="fa-solid fa-brain" style="font-size: 2rem; color: var(--color-accent);"></i>43                </div>44                <h4 style="margin-bottom: 1rem;">2. Fine-Tuning Model</h4>45                <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>46            </div>47            48            <div style="flex: 1; min-width: 250px; text-align: center; padding: 1.5rem; background: var(--color-surface); border-radius: var(--radius-lg);">49                <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);">50                    <i class="fa-solid fa-gears" style="font-size: 2rem; color: var(--color-warning);"></i>51                </div>52                <h4 style="margin-bottom: 1rem;">3. Evaluasi Metrik</h4>53                <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>54            </div>55        </div>56    </div>57 58    <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);">59        <h2 class="mb-4 text-center" style="color: white;">Alur Penggunaan</h2>60        <div style="display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap;">61            <div class="text-center" style="flex: 1;">62                <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);">63                    <i class="fa-solid fa-keyboard" style="font-size: 1.5rem;"></i>64                </div>65                <p style="font-weight: 600; font-size: 1.1rem; color: rgba(255,255,255,0.9);">Input Tema</p>66            </div>67            <i class="fa-solid fa-chevron-right" style="opacity: 0.5; font-size: 1.5rem;"></i>68            <div class="text-center" style="flex: 1;">69                <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);">70                    <i class="fa-solid fa-sliders" style="font-size: 1.5rem;"></i>71                </div>72                <p style="font-weight: 600; font-size: 1.1rem; color: rgba(255,255,255,0.9);">Atur Gaya</p>73            </div>74            <i class="fa-solid fa-chevron-right" style="opacity: 0.5; font-size: 1.5rem;"></i>75            <div class="text-center" style="flex: 1;">76                <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);">77                    <i class="fa-solid fa-microchip" style="font-size: 1.5rem;"></i>78                </div>79                <p style="font-weight: 600; font-size: 1.1rem; color: rgba(255,255,255,0.9);">Generasi Pantun</p>80            </div>81            <i class="fa-solid fa-chevron-right" style="opacity: 0.5; font-size: 1.5rem;"></i>82            <div class="text-center" style="flex: 1;">83                <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);">84                    <i class="fa-solid fa-scroll" style="font-size: 1.5rem;"></i>85                </div>86                <p style="font-weight: 600; font-size: 1.1rem; color: rgba(255,255,255,0.9);">Pantun Selesai</p>87            </div>88        </div>89    </div>90</div>91{% endblock %}92