Master Prompt: Membina Aplikasi AI Modul Ajar Generator (Kurikulum Merdeka)
Bertindaklah sebagai Senior Web Developer dan AI Engineer. Buatkan sebuah aplikasi web "AI Modul Ajar Builder" dalam SATU fail HTML tunggal. Aplikasi ini akan menggunakan Tailwind CSS (melalui CDN) untuk antaramuka, JavaScript tulen (Vanilla JS) untuk logik, dan Gemini API untuk penjanaan teks.
Berikut adalah spesifikasi sangat terperinci yang WAJIB anda ikuti tanpa tertinggal satu pun:
1. STRUKTUR ANTARAMUKA (UI/UX)
Tema: Bersih, moden, profesional. Latar belakang bg-slate-50.
Borang Input (Grid Layout):
Topik Utama / Materi Pokok (Input Text, Lebar penuh)
Mata Pelajaran (Input Text)
Fase / Kelas (Input Text)
Tahun Ajaran (Input Text)
Model Pembelajaran (Dropdown Select: PBL, PjBL, Discovery, Inquiry, Cooperative, Tatap Muka)
Nama Guru (Input Text)
Sekolah (Input Text)
Butang Tindakan:
"✨ Generate dengan AI" (Warna Biru) - Mencetuskan panggilan API.
"📝 Ekspor ke Word (.doc)" (Warna Gelap/Slate) - Memuat turun hasil ke MS Word.
Loading State: Semasa AI memproses, paparkan overlay skrin penuh dengan spinner animasi dan teks "AI sedang menyusun Modul & LKPD...". Butang mesti dilumpuhkan (disabled) semasa memproses.
Kawasan Pratonton (Preview Area): Sebuah div dengan ID print-area di bawah borang, dibentuk menyerupai kertas A4 putih (shadow, padding luas, margin tengah). Semua hasil AI akan dipaparkan di dalam div ini (#content-body).
2. PANGGILAN API & LOGIK JAVASCRIPT
Gunakan fetch ke endpoint Gemini API: https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=[API_KEY]
Laksanakan Exponential Backoff (1s, 2s, 4s, 8s, 16s) untuk mengelakkan ralat rangkaian.
Selepas menerima respons teks dari AI, bersihkan teks tersebut dari sebarang tag pembalut Markdown (seperti html atau ) sebelum menyuntiknya ke dalam #content-body menggunakan innerHTML.
Tambahkan Header (Judul, Mapel, Fase) dan Footer (Tandatangan Guru & Kepala Sekolah) secara hardcode melalui JS, mengapit hasil dari AI.
3. ARAHAN SISTEM UNTUK AI (SYSTEM PROMPT) - WAJIB SAMA PERSIS!
Suntikkan teks arahan sistem ini ke dalam payload API agar AI menghasilkan format yang tepat:
Output HANYA format HTML murni. DILARANG menggunakan tag <html>, <head>, <body>.
DILARANG menggunakan simbol Markdown (seperti ** atau ##). Gunakan <strong> dan <h3>.
Gunakan istilah 'Dimensi Profil Lulusan' (Bukan Profil Pelajar Pancasila).
ATURAN TABEL (SANGAT KRITIKAL): Penggunaan <table> HANYA DIIZINKAN pada 2 bahagian: "Informasi Umum" dan "Rubrik Penilaian".
Bahagian lain (Komponen Inti, Langkah-langkah Pembelajaran, Remedial, Asesmen, Refleksi) DILARANG keras menggunakan jadual/tabel. WAJIB gunakan format teks rapi dengan senarai <ul> dan <li>.
Jadual "Informasi Umum" mesti mengandungi atribut style="line-height: 1; padding: 3px 8px;" pada setiap <td> agar sangat rapat.
Setiap tag <th> pada jadual WAJIB mempunyai style="background-color: #dbeafe;".
"Model Pembelajaran" dan "Dimensi Profil Lulusan" WAJIB diletakkan di dalam "Komponen Inti", BUKAN di Informasi Umum.
Sediakan kotak kosong menggunakan <div style="min-height:150px; border:1px solid black;"></div> untuk ruangan jawapan LKPD.
4. LOGIK EKSPOR KE MS WORD (ANTI TERPOTONG)
Ini adalah bahagian paling penting untuk memastikan jadual tidak terpotong (melebihi margin) apabila dibuka di Microsoft Word. Gunakan FileSaver.js dari CDN.
Di dalam fungsi exportDoc():
Klon elemen #content-body.
Untuk setiap elemen <table> dalam klon:
Set atribut: border="1", cellspacing="0", width="100%".
Set style: border-collapse: collapse; width: 100%; table-layout: auto; border: 1px solid #000; margin-bottom: 20px;
Untuk setiap <th> dan <td>:
Set word-wrap: break-word; dan word-break: normal;.
Pastikan padding diset (contoh: 3px 10px untuk Informasi Umum, 6px 10px untuk Rubrik).
Struktur HTML Word: Balut klon HTML dengan struktur khusus Word:
<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='[http://www.w3.org/TR/REC-html40](http://www.w3.org/TR/REC-html40)'>
<head>
<style>
@page WordSection1 {
size: 210mm 297mm;
margin: 2cm 2cm 2cm 2cm;
mso-page-orientation: portrait;
}
div.WordSection1 { page: WordSection1; }
body { font-family: 'Times New Roman', serif; font-size: 11pt; line-height: 1.5; color: #000; }
table { border-collapse: collapse; width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
th, td { word-wrap: break-word; overflow-wrap: break-word; }
</style>
</head>
<body>
<div class="WordSection1">[SUNTIK KLON HTML DI SINI]</div>
</body>
