Mini App

Papan Ajar

Diagram belajar berlabel yang bisa diedit guru. Satu klik jadi kuis dan LKPD A4.

Versi 1.0.1Diperbarui 30 September 202614 screenshot

Papan Ajar — Papan diagram berlabel — Papan diagram berlabelSiklus air Fase C: gambar tanpa tulisan, 7 label teks di margin, label Pengembunan sedang dipilih untuk diedit.1 / 14

Ringkasan

Aplikasi pembuat diagram belajar Kurikulum Merdeka untuk guru dan bimbel. Gambar dibuat tanpa tulisan, lalu nama bagian ditambahkan sebagai label teks yang bisa diketik ulang, digeser, dan diterjemahkan. Satu saklar menyapu label jadi soal isian bernomor, lengkap dengan lembar kerja A4, kunci jawaban, dan model 3D bangun ruang, molekul, serta tata surya.

Masalah yang diselesaikan

Gambar dari generator AI biasa menulis labelnya langsung di piksel: "mitokondria" jadi "mitokandria", panah menunjuk bagian yang salah, dan guru tidak bisa membetulkannya tanpa aplikasi desain. Untuk membuat versi soal, label harus ditutup satu per satu di Word, lalu kunci jawaban diketik terpisah dan sering tidak cocok nomornya. Belum lagi gambar yang tidak nyambung dengan Fase dan tujuan pembelajaran, foto siswa yang ikut dikirim ke layanan asing, dan tagihan model yang baru ketahuan di akhir bulan.

Cocok untuk

Guru SD dan SMP yang menyiapkan LKPD bergambar tiap minggu
Bimbel dan les privat yang butuh kuis bergambar dan kartu materi untuk grup WhatsApp
Orang tua homeschooling yang mengikuti Kurikulum Merdeka
Developer dan agensi pendidikan yang ingin menjual layanan bahan ajar dengan merek sendiri

Hasil yang kamu dapat

Label adalah teks, bukan piksel: ketik ulang, geser, terjemahkan ke English, atau hapus
Satu saklar Mode kuis: label tersapu penghapus, nomor dan garis isian muncul, lembar kerja ikut berubah
LKPD A4 siap cetak dengan kop sekolah, kolom Nama/Kelas/Tanggal, dan halaman kunci jawaban
Model 3D berlabel: label bagian ikut berputar bersama kubus, bangun ruang lain, dan molekul, dan bisa dijadikan nomor isian satu per satu
Setiap gambar adalah draf sampai guru menyetujui; nama peninjau dicetak di kaki halaman
Tanpa unggahan foto siswa; saringan keamanan anak di browser dan server; biaya dalam Rupiah dengan batas harian
Tiga cara memakai model: kunci API Anda sendiri di browser, secret di Cloudflare Worker Anda, atau .env server; kami tidak menyediakan atau menagih biaya model

Bahasa desain

Baloo 2 + Atkinson Hyperlegible · papan tulis kelas, kapur hijau, ramah dan jelas

Fitur

Papan diagram

Pemilih Fase A–F, topik, elemen, dan tujuan pembelajaran; 3 saran visual per topik
8 topik bawaan: bagian tumbuhan, siklus air, lapisan bumi, sel tumbuhan, molekul air, tata surya, unsur lingkaran, kubus
Label di dua kolom margin dengan garis penunjuk, tata letak otomatis tanpa tumpang tindih
Seret label dengan mouse atau sentuh; Tab + panah untuk papan ketik
Tambah label dengan klik titik di gambar, hapus label, rapikan posisi
Bahasa label Indonesia dan English per diagram

Kuis dan lembar kerja

Mode kuis dengan sapuan penghapus; nomor mengikuti format kunci jawaban
Coba jawab langsung di layar: isian yang disentuh menyorot nomornya di papan; menerima nama utama, istilah dalam kurung, atau English
Bank kata untuk versi lebih mudah, di layar dan di lembar cetak; Ulangi yang salah mengosongkan jawaban salah saja
Lembar bacaan berlabel dengan arti tiap bagian, atau lembar soal isian
Halaman kunci jawaban terpisah, tanda DRAF untuk diagram yang belum disetujui
Cetak atau simpan PDF A4 dari browser
Kartu PNG 1080×1350 untuk WhatsApp dan Instagram

Model 3D

Label teks pada model 3D yang ikut berputar, bisa diketik ulang, dan dipilih mana yang jadi nomor isian di Mode kuis
Kubus berengsel yang dibuka menjadi jaring-jaring dengan penggeser
Balok, prisma segitiga, limas segi empat, tabung, kerucut, bola: volume dan luas permukaan dari ukuran yang diketik
Jumlah sisi, rusuk, dan titik sudut per bangun
Molekul H₂O, CO₂, CH₄, NH₃, O₂ bola-dan-batang dengan warna atom
Tata surya 8 planet + sabuk asteroid, kecepatan edar bisa diatur, sorot planet
Tanpa WebGL: diagram berlabel tampil sebagai gantinya
Latar papan hijau untuk proyektor kelas dan tombol Putar ke awal

Tinjauan guru dan keamanan

Setujui, Perbaiki (maksimal 2 kali), Tolak, Cek fakta label
Pemeran tetap: 4 tokoh benda kelas tanpa wajah manusia
Saringan permintaan: foto/wajah siswa, kekerasan, konten dewasa, zat adiktif, NIK/NISN/nomor HP
Pustaka diagram disetujui, bisa dicari berdasarkan nama bagian
Meteran biaya Rupiah, batas harian yang diatur ulang 00.00 WIB
Kunci API hanya di server; id model di .env

Animasi 3D

Konsep

Model 3D dipasang di dalam papan sesuai topik, satu model sekaligus: kubus berengsel yang dibuka menjadi jaring-jaring bersama bangun ruang lain dengan rumus yang dihitung langsung, molekul bola-dan-batang, dan tata surya yang bergerak. Nama bagian menempel pada model sebagai label teks yang ikut berputar; di Mode kuis guru memilih label mana yang jadi nomor isian. Ini materi yang sering digambar salah oleh model gambar, jadi dibuat pasti dengan kode dan gratis per tayangan.

Tanpa WebGL / gerak dikurangi

Tanpa WebGL tab Model 3D menampilkan diagram berlabel statis topik yang sama. Dengan prefers-reduced-motion orbit tata surya diam, model hanya digambar ulang saat diputar, dan Mode kuis berganti tanpa sapuan.

Screenshot

01Papan diagram berlabelSiklus air Fase C: gambar tanpa tulisan, 7 label teks di margin, label Pengembunan sedang dipilih untuk diedit.desktop
02Mode kuis: sapuan penghapusPenghapus menyapu label lintasan demi lintasan; di jalurnya label berganti nomor dan garis isian.desktop
03Coba jawabBank kata aktif: istilah yang sudah dipakai dicoret. Isian nomor 7 sedang disentuh dan nomornya tersorot di papan; benar hijau, salah merah dengan jawaban benar di bawahnya.desktop
04Kubus 3D berlabel, mode kuisKubus di latar papan hijau: 3 dari 5 label jadi nomor isian, Rusuk dan Sisi samping tetap tertulis sebagai petunjuk. Label ikut bergerak saat model diputar.desktop
05Tata surya 3DDelapan planet bergerak dengan kecepatan edar sebanding periode revolusi; Bumi disorot dari daftar.desktop
06Lembar kerja A4LKPD siap cetak: kop sekolah, Nama/Kelas/Tanggal, soal isian bernomor, perintah dari Si Kapur, halaman kunci jawaban.desktop
07PustakaDiagram yang disetujui tersimpan dengan nama peninjau dan tanggal, bisa dicari berdasarkan nama bagian.desktop
08PengaturanNama peninjau, meteran biaya Rupiah dengan batas harian, mode dan model, enam aturan keamanan anak.desktop
09Cek fakta labelLabel Mitokondria diubah guru; cek fakta menandai perubahan dan menampilkan arti bawaan tiap organel.desktop
10Jaring-jaring kubus 3DKubus dibuka 62% menjadi jaring-jaring; volume 1.000 cm³ dan luas 600 cm² dari sisi 10 cm. Label disembunyikan selama kubus terbuka.desktop
11Papan di ponselDi layar sempit label menjadi nomor di gambar dengan daftar nama di bawahnya.mobile
12Kuis di ponselIsian jawaban langsung di bawah gambar, hasil 2 dari 5 benar dengan koreksi.mobile
13Lembar kerja di ponselPratinjau A4 menyesuaikan lebar layar; lembar soal dan kunci jawaban.mobile
14Molekul 3D di ponselMolekul air bengkok 104,5° dengan label atom dan ikatan yang ikut berputar; pilih CO₂, CH₄, NH₃, O₂.mobile

Cara Pasang

1
Pasang
Ekstrak ZIP lalu pasang dependensi.
```
npm install
```
2
Jalankan Mode demo
Web di http://localhost:4419, API di port 8419. Delapan topik bawaan langsung bisa dicoba tanpa kunci.
```
npm run dev
```
3
Aktifkan model gambar
Salin .env.example ke .env, isi AI_API_KEY, periksa id model dan harga Rupiah, jalankan ulang.
```
cp .env.example .env
```
4
Produksi di VPS
Satu proses menyajikan antarmuka dan API. Contoh systemd dan nginx ada di docs/INSTALL.md.
```
npm run build && SERVE_STATIC=1 npm run server
```

Butuh kredensial

Kunci API penyedia gambar (milik Anda sendiri)Berbayar
Buat kunci di dasbor penyedia kompatibel OpenAI (misalnya FlatKey atau OpenRouter). Pilih salah satu: tempel di panel Pengaturan > Kunci API Anda sendiri (browser langsung ke penyedia), simpan sebagai secret Cloudflare Worker (wrangler secret put AI_API_KEY), atau isi AI_API_KEY di .env server. Tanpa kunci aplikasi tetap jalan penuh di Mode demo.

Isi Paket

src/: aplikasi React: papan, label SVG, mode kuis, lembar kerja, pustaka, pengaturan, model 3D
server/: proxy Hono: adapter penyedia, batas biaya, saringan keamanan anak
src/data/kurikulum.ts: 8 topik, tujuan pembelajaran, label, glosarium
public/samples/ + scripts/make-samples.mjs: 16 gambar bawaan Mode demo dan pembuatnya
docs/: INSTALL, CUSTOMIZE, CARA-KERJA
tests/: uji logika dan server (vitest), e2e dan tangkapan layar (Playwright)

Kustomisasi

Tambah topik dan label di satu berkas data
Ganti nama sekolah, nama guru, warna, dan font lewat token CSS
Ganti penyedia dan model gambar lewat .env tanpa menyentuh kode
Atur harga Rupiah per panggilan dan batas harian
Tambah pola saringan keamanan sesuai kebijakan sekolah

AI in the loop

Yang dikerjakan AI

Model gambar membuat draf diagram tanpa tulisan dan tanpa manusia; model teks memberi titik koordinat tiap bagian (labelnya tetap teks dari kurikulum) dan memeriksa istilah saat Cek fakta. Perbaiki memakai gambar yang sama sebagai acuan.

Kendali manusia

Setiap gambar berstatus draf sampai guru menekan Setujui; nama guru dan tanggal dicetak di lembar kerja, dan lembar dari draf dicetak bertanda DRAF. Guru mengedit, menggeser, dan menghapus label sendiri. Perbaikan maksimal 2 kali per draf, biaya terlihat dalam Rupiah dan dibatasi per hari. Tidak ada foto siswa yang pernah dikirim.

Penyedia model

Adapter kompatibel OpenAI, default FlatKey (router.flatkey.ai) dengan gemini-3.1-flash-lite-image untuk draf, gemini-3.1-flash-image untuk final, dan model teks Gemini Flash; bisa diganti ke FLUX, Seedream, atau gpt-image lewat .env.

Hasil AI selalu berupa draf. Tidak ada yang terkirim atau tersimpan sebelum kamu menyetujuinya.

FAQ

Apakah label bisa salah eja seperti gambar AI biasa?

Tidak. Model diminta menggambar tanpa tulisan. Nama bagian adalah teks dari data kurikulum yang Anda edit sendiri, jadi ejaan sepenuhnya di tangan guru.

Topiknya hanya delapan?

Delapan topik bawaan lengkap dengan gambar Mode demo. Di mode nyata Anda bisa membuat gambar baru untuk topik itu, dan menambah topik sendiri di src/data/kurikulum.ts (langkahnya di CUSTOMIZE.md).

Apakah aman untuk siswa?

Aplikasi tidak menerima unggahan foto sama sekali. Tokoh di lembar kerja adalah benda tanpa wajah manusia. Permintaan yang menyebut foto siswa, kekerasan, konten dewasa, atau data pribadi ditolak sebelum dikirim dan diperiksa ulang di server.

Berapa biaya per gambar di mode nyata?

Tergantung penyedia. Bawaan dihitung Rp 750 per draf gambar + Rp 20 untuk koordinat label; angka ini bisa Anda ubah di .env sesuai tagihan penyedia. Batas harian menghentikan pembuatan sebelum melewati anggaran.

Bisa dipakai tanpa internet?

Mode demo, lembar kerja, kuis, dan model 3D berjalan tanpa panggilan model. Membuat gambar baru di mode nyata butuh koneksi ke penyedia.

Apakah TP sudah sesuai CP resmi?

Tujuan pembelajaran bawaan diringkas dari Capaian Pembelajaran dan diberi label sebagai ringkasan. Cocokkan dengan dokumen CP dan modul ajar sekolah Anda; teksnya bisa diubah di satu berkas.

Data guru disimpan di mana?

Draf, label, dan pustaka disimpan di penyimpanan lokal peramban. Tidak ada akun dan tidak ada basis data server.

Apakah harga produk sudah termasuk biaya AI?

Tidak. Produk dijual apa adanya dan tidak menyertakan kunci API. Anda memakai kunci dari akun penyedia sendiri, dan biaya tiap gambar ditagih penyedia langsung ke akun Anda. Meteran Rupiah dan batas harian di aplikasi membantu mengendalikannya.

Changelog

v1.0.1
30 September 2026
- Kunci API sendiri: tempel kunci di panel Pengaturan, browser memanggil penyedia langsung tanpa lewat server
- Deploy ke Cloudflare Workers akun sendiri (wrangler.jsonc, secret AI_API_KEY, batas harian tersimpan di KV)
- Logika validasi dan prompt dipakai bersama oleh server, Worker, dan browser
v1.0.0
26 September 2026
- Rilis pertama: 8 topik, label SVG, Mode kuis, lembar kerja A4, kartu PNG, model 3D, proxy Hono dengan batas biaya