Tiru Laris
Amati iklan pesaing yang laris, buat 27 varian merekmu, tanpa menjiplak dan tanpa klaim BPOM terlarang
Versi 1.0.1Diperbarui 30 September 202613 screenshot
Ringkasan
Mini app untuk penjual online dan agensi iklan: iklan pesaing diurai jadi blueprint (hook, tata letak, penawaran, gaya), lalu diisi dengan merek dan harga sendiri menjadi matriks 3 hook x 3 gaya visual x 3 format. Penjaga kemiripan mengunci varian yang terlalu mirip sumber, filter klaim menahan kalimat yang melanggar aturan BPOM, dan hasil yang disetujui diekspor dalam ukuran Meta dan TikTok.
Setiap penjual tahu rumus ATM: amati iklan pesaing yang sudah lama tayang, tiru, lalu modifikasi. Praktiknya, bagian modifikasi sering dilewati. Desainnya dijiplak terlalu mirip sampai dilaporkan pesaing, harga di gambar salah ketik karena ditulis ulang, dan kalimat seperti "flek hilang dalam 7 hari, dijamin" ikut ditiru lalu iklannya ditolak Meta atau ditegur BPOM. Membuat varian untuk diuji juga makan waktu: satu hook, satu gaya, satu ukuran, diulang berkali-kali di Canva. Tiru Laris mengambil pola iklan yang laris, bukan gambarnya, lalu membuat banyak varian sekaligus dengan penjaga kemiripan dan filter klaim yang bekerja sebelum iklan diekspor.
- Penjual Shopee, Tokopedia, dan TikTok Shop yang rutin pasang iklan Meta/TikTok
- Agensi dan freelancer iklan yang membuat varian A/B untuk banyak klien
- Tim marketing UMKM kosmetik, makanan, dan minuman
- Developer yang ingin menjual alat kreatif iklan dengan merek sendiri
- Iklan pesaing diurai jadi blueprint yang bisa diedit; gambar aslinya tidak pernah dikirim ke model gambar
- 27 draf sekaligus: 3 hook x 3 gaya visual x 3 format, diputuskan satu per satu dengan kartu yang dibalik
- Penjaga kemiripan dihitung di browser (pHash, tata letak, warna) dan mengunci ekspor di atas 62%
- Filter klaim BPOM dan UU Perlindungan Konsumen dengan saran kalimat pengganti
- Harga, diskon, dan tombol digambar oleh kode: angka di iklan selalu sama dengan isian
- Meter biaya rupiah, batas harian, maksimal 2 kali buat ulang per kartu
- 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
Fitur
Amati
- Unggah PNG/JPG/WebP maks 5 MB dengan pernyataan penggunaan, atau pilih 3 contoh pesaing fiktif
- Blueprint: jenis hook, tata letak dengan zona, urutan mata membaca, penawaran, palet, blok warna, gaya visual, gaya tombol, lama tayang
- Zona digambar di atas iklan sumber dan bisa disembunyikan
- Klaim berisiko di iklan sumber ditandai "jangan ditiru"
Tiru
- Kit merek: nama, dua warna, foto produk tanpa latar (piksel ditempel apa adanya, label BPOM/halal utuh)
- Penawaran: harga jual, harga coret tervalidasi, gratis ongkir, COD, cicilan 0%, diskon dihitung otomatis
- Gaya bahasa formal, santai, atau gaul untuk hook dan tombol
- Pratinjau iklan langsung
Modifikasi
- Matriks baris hook x kolom gaya visual, format 1:1 / 4:5 / 9:16
- Kartu dibalik (Cell Flip) untuk Setujui, Tolak, Buat ulang, Unduh PNG
- Kubus 3D kombinasi yang bisa diputar dengan jari, mouse, atau panah keyboard
- Penjaga kemiripan dengan slider kedekatan dan meter yang berubah langsung
- Filter klaim terlarang dan perlu bukti, satu klik ganti ke saran aman, cek angka diskon di teks
- Hook bisa diedit langsung, semua kartu di baris itu ikut berubah
Ekspor
- Render final hanya untuk varian yang disetujui
- ZIP: PNG 1080x1080, 1080x1350, 1080x1920, versi 1200x628 opsional (ditata ulang, bukan dibuat ulang)
- Nama berkas merek_hook_gaya_format_v1 dan daftar-varian.csv dengan skor kemiripan dan waktu WIB
- Opsi label "Gambar dibuat dengan bantuan AI" dan pratinjau zona aman TikTok/Reels
Teknis
- Vite + React 19 + TypeScript, server Hono sebagai proksi AI (Node atau Cloudflare Workers)
- Model dari .env atau dari kunci sendiri di browser: visi, teks, gambar final, gambar lite (default gemini-3.1-flash-image / -lite-image via FlatKey)
- Rute gambar menolak permintaan yang membawa gambar sumber, batas biaya harian di server dan di Worker (KV)
- Kunci API Anda sendiri (BYOK): browser memanggil penyedia langsung, kunci tidak lewat server aplikasi
- Mode demo tanpa kunci, semua contoh SVG buatan sendiri
- Uji logika/server (Vitest, termasuk Worker) dan uji browser Playwright (alur lengkap, kunci sendiri, 4 lebar layar, tanpa WebGL, fps)
Animasi 3D
Kubus kombinasi: setiap sisi adalah satu varian iklan (hook x gaya visual) pada format aktif, dirender dari data yang sama dengan matriks. Geser kiri-kanan mengganti hook, atas-bawah mengganti gaya, putaran selalu jatuh tepat 90 derajat. Pengguna memutar-mutar kombinasi dulu, lalu membuka kombinasi yang menarik langsung di matriks untuk diputuskan.
Tanpa WebGL tampil kanvas datar kombinasi aktif dengan tombol arah yang sama. Dengan prefers-reduced-motion kubus diam dan berganti tanpa animasi.
Screenshot
- 01Amati: unggah iklan sumberCentang pernyataan, seret tangkapan layar Ad Library, atau coba tiga iklan pesaing fiktif.desktop
- 02Blueprint dari iklan sumberZona judul, produk, harga, lencana, tombol digambar di atas sumber; klaim berisiko ditandai jangan ditiru.desktop
- 03Merek dan penawaranFoto produk tanpa latar, dua warna merek, harga coret dengan diskon dihitung otomatis, pratinjau langsung.desktop
- 04Matriks varian dan kubus 3DBaris hook x kolom gaya visual, blueprint menempel di atas, hitungan keputusan per format, kubus kombinasi yang bisa diputar.desktop
- 05Penjaga kemiripan terkunciSlider dinaikkan ke 80: skor 64% masuk pita Terkunci (62% ke atas), kartu merah dan tombol Setujui dikunci.desktop
- 06Filter klaim BPOMDraf 'Flek hilang dalam 7 hari, dijamin!' ditahan: kata yang dilarang dicoret, alasan ditulis, satu tombol untuk ganti ke kalimat aman.desktop
- 07Format 9:16Teks di pita aman Reels/TikTok; 1:1, 4:5, 9:16 tinggal dipilih.desktop
- 08Ekspor ZIPHanya yang disetujui, render final, nama berkas siap Ads Manager, CSV, batas biaya harian.desktop
- 09Amati di ponselUnggah dan pernyataan tetap nyaman di layar 390 px.mobile
- 10Kubus kombinasi di ponselGeser kubus dengan jari atau pakai empat tombol arah.mobile
- 11Matriks yang digeserSetiap baris hook menjadi strip kartu yang digeser ke samping.mobile
- 12Penjaga kemiripan di ponselSkor struktur, tata letak, warna, dan slider kedekatan.mobile
- 13Ekspor di ponselAksi ekspor di atas, daftar varian dengan nama berkas di bawah.mobile
Cara Pasang
Ekstrak dan pasang
Ekstrak zip, buka folder di terminal.
npm installCoba mode demo
Jalan tanpa kunci API dengan contoh bawaan. Buka http://localhost:4416.
npm run devNyalakan mode nyata
Isi
.envdari.env.example(kunci FlatKey atau penyedia lain, nama model), build klien denganVITE_REAL_MODE=1, lalu jalankan server. Panduan VPS + nginx didocs/INSTALL.md.VITE_REAL_MODE=1 npm run build && npm run server
Butuh kredensial
- Kunci API model (visi, teks, gambar; milik Anda sendiri)Berbayar
Daftar di FlatKey (router.flatkey.ai) atau penyedia kompatibel OpenAI lain. Pilih salah satu: tempel di panel Ekspor > 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 di Mode demo. Dibayar per pemakaian ke penyedia; perkiraan per langkah tercantum di src/lib/cost.ts.
Isi Paket
- src/views/: layar Amati, Tiru, Matriks (kubus, penjaga, filter), Ekspor, Privasi
- src/lib/: blueprint, pHash, klaim, teks, biaya, zip, render iklan
- src/three/cube.ts: kubus kombinasi 3D
- server/: proksi Hono (visi, teks, gambar, batas biaya)
- scripts/make-samples.mjs: pembuat contoh SVG
- tests/: uji Vitest, uji Playwright, skrip tangkapan layar
- docs/: INSTALL, CUSTOMIZE, CARA-KERJA
- design/: sistem desain, riset, catatan iterasi
Kustomisasi
- Aturan klaim terlarang (regex, alasan, saran) di satu berkas
- Batas kemiripan dan bobot struktur/tata letak/warna
- Harga per langkah, batas harian, jumlah buat ulang
- Tata letak zona iklan dan gaya visual
- Model AI dan penyedia lewat .env
- Warna dan huruf antarmuka lewat variabel CSS
AI in the loop
Model visi mengurai iklan sumber jadi blueprint JSON. Model teks menulis 3 hook dalam gaya bahasa pilihan. Model gambar hanya membuat latar tanpa teks dari blueprint dan warna merek; produk, harga, dan tombol ditempel/digambar oleh kode.
Blueprint bisa diedit sebelum dipakai. Setiap varian adalah draf yang harus disetujui atau ditolak pengguna; maksimal 2 kali buat ulang per kartu. Penjaga kemiripan dan filter klaim mengunci tombol Setujui sampai masalahnya dibetulkan. Render final hanya untuk yang disetujui, dan ekspor butuh centang pemeriksaan terakhir. Biaya tampil dalam rupiah sebelum setiap langkah, dengan batas harian.
Endpoint kompatibel OpenAI (default FlatKey https://router.flatkey.ai/v1), dari .env, dari secret Cloudflare Worker, atau ditempel sendiri di browser (BYOK). Model visi/teks/gambar diganti tanpa mengubah kode. Kunci server tidak pernah dikirim ke browser; kunci BYOK tidak pernah dikirim ke server aplikasi ini.
Hasil AI selalu berupa draf. Tidak ada yang terkirim atau tersimpan sebelum kamu menyetujuinya.
FAQ
Apakah ini sama dengan menjiplak iklan orang?
Tidak. Yang diambil hanya polanya (jenis hook, urutan baca, tata letak, penawaran). Gambar sumber tidak dikirim ke model gambar, produk dan logo pesaing tidak dipakai, dan penjaga kemiripan mengunci varian yang terlalu mirip. Tanggung jawab akhir isi iklan tetap pada pengiklan.
Bagaimana cara kerja penjaga kemiripan?
Setiap varian dibandingkan dengan iklan sumber di browser: sidik jari pHash 64 bit (struktur), korelasi terang-gelap 16x16 (tata letak), dan jarak warna per blok. Skor gabungan di atas 62% mengunci ekspor. Batas dan bobotnya bisa diubah di src/lib/phash.ts.
Klaim apa saja yang ditahan?
Klaim obat, "menghilangkan" masalah kulit, hasil permanen, jaminan hasil, aman mutlak, klaim penyakit pada pangan (dilarang); klaim waktu hasil, uji klinis, superlatif, memutihkan (perlu bukti). Rujukannya Peraturan BPOM No. 3/2022 dan No. 32/2021, UU 8/1999, dan Etika Pariwara Indonesia. Aturannya bisa ditambah sendiri.
Kenapa harga tidak dibuat oleh AI?
Model gambar sering salah menulis angka dan huruf Indonesia. Di iklan, harga yang salah adalah masalah hukum. Semua teks, harga, diskon, dan tombol digambar oleh kode dari isian kamu.
Bisa jalan tanpa kunci API?
Bisa. Mode demo memakai contoh bawaan sehingga semua fitur bisa dicoba dan dipamerkan ke klien. Kunci hanya perlu untuk mengurai iklan unggahan dengan model visi, menulis hook baru, dan membuat latar baru.
Apakah gambar yang saya unggah disimpan?
Tidak. Di mode demo gambar hanya dibaca di browser. Di mode nyata gambar dikirim sekali ke model visi lewat server milikmu, lalu tidak disimpan. Merek, penawaran, dan keputusan disimpan di penyimpanan lokal browser dan bisa dihapus dari halaman Privasi.
Bisa ambil data langsung dari Meta Ad Library?
Versi ini memakai tangkapan layar yang diunggah. Meta Ad Library API butuh verifikasi identitas dan TikTok Creative Center tidak punya API publik, jadi kami tidak mengikis situsnya.
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 panggilan model 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 (BYOK): tempel kunci di panel Ekspor, browser memanggil penyedia langsung tanpa lewat server
- Deploy ke Cloudflare Workers akun sendiri (wrangler.jsonc, secret AI_API_KEY, batas harian tersimpan di KV)
- Validasi dan prompt dipakai bersama oleh server, Worker, dan browser (server/core.ts, server/providers.ts)
- v1.0.0
26 September 2026- Rilis pertama: Amati, Tiru, Modifikasi (matriks, kubus 3D, penjaga kemiripan, filter klaim), Ekspor ZIP, server proksi Hono.