LayananPaketPortofolioMarketplaceCara KerjaFAQ
Mulai project →Akun0813 4079 780
Mini App

Denah Hidup

Denah jadi rumah 3D, render yang setia pada denah, RAB kasar, dan brosur PDF.

Versi 1.0.1Diperbarui 30 September 202615 screenshot

Denah dan 3D berdampinganSatu denah, dua tampilan. Dinding terpilih bisa diseret atau digeser dengan panah keyboard, 3D di sebelahnya ikut.1 / 15
Denah dan 3D berdampingan1 / 15
Denah Hidup — Denah dan 3D berdampingan

Satu denah, dua tampilan. Dinding terpilih bisa diseret atau digeser dengan panah keyboard, 3D di sebelahnya ikut.

Ringkasan

Gambar atau jiplak denah, lalu rumahnya langsung berdiri dalam 3D dan bisa dijelajahi. Render foto per sudut kamera memakai geometri denah Anda sendiri, jadi dinding dan jendela tidak berpindah. Luas m², RAB kasar, dan brosur PDF dihitung dari denah yang sama.

Masalah yang diselesaikan

Calon pembeli susah membayangkan rumah dari denah hitam putih. Render 3D dari jasa desain makan waktu seminggu dan mahal per sudut, sementara aplikasi AI biasa suka mengarang: kamar jadi lebih luas, jendela pindah, label m² hilang. Padahal untuk iklan properti, gambar yang tidak sesuai unit bisa jadi masalah dengan pembeli. Kontraktor juga harus menghitung ulang volume keramik dan cat dari denah yang sama secara manual.

Cocok untuk
  • Agen properti primary dan secondary
  • Tim marketing developer perumahan
  • Desainer interior dan studio arsitek kecil
  • Kontraktor dan pemborong renovasi
Hasil yang kamu dapat
  • Seret dinding di denah, dinding 3D ikut bergeser saat itu juga
  • Jalan di dalam rumah dan simpan 8 kamera lengkap dengan arah pandang
  • Render per kamera dari gambar clay + satu papan gaya, jadi semua sudut cocok
  • Ubah satu area dengan kuas tanpa mengubah piksel lain
  • RAB kasar dan brosur PDF A4 dengan denah berlabel m² dari data
  • 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
Alegreya Sans + Fira Sans · plester hangat, terakota, rumah maket disinari matahari sore

Fitur

Denah

  • Templat tipe 36, 45, 54 dengan kamera siap pakai
  • Alat dinding, pintu, jendela, bukaan, ruang, hapus
  • Seret dinding dengan sambungan ikut; panah keyboard 10 cm, Shift 50 cm
  • Kalibrasi skala dua titik ("7,50" atau "750 cm")
  • Jiplak foto atau pindaian denah (PNG, JPG, WebP, SVG)
  • Baca denah otomatis sebagai draf JSON yang wajib disetujui
  • Luas m² per ruang (shoelace), jumlah KT/KM, urungkan/ulangi

3D

  • Ekstrusi three.js langsung dari data denah, pintu dan jendela terpotong
  • Mode rumah boneka dan jalan di dalam (WASD, seret, kunci kursor, pad sentuh)
  • Tabrakan dinding, bisa lewat pintu
  • 8 kamera tersimpan dengan rel X/Y/Arah/FOV
  • Animasi dinding naik saat masuk 3D; bingkai diam untuk prefers-reduced-motion
  • Tanpa WebGL: denah tampak atas dengan pin kamera

Render AI

  • Gambar clay per kamera + papan gaya yang sama untuk semua kamera
  • 8 papan gaya Indonesia (minimalis tropis, Japandi, industrial, kolonial Indische, Bali tropis, joglo Jawa, Islami modern, Skandi hangat) atau unggah sendiri
  • Draf dan final 2K; setujui, tolak, render ulang maksimal 2 kali
  • Ubah area dengan kuas, tempel balik piksel-aman dan laporan piksel berubah
  • Tanda "Ilustrasi, bukan foto asli"
  • Meteran biaya Rupiah dan batas harian di server

RAB & brosur

  • RAB kasar: keramik (+ sisa potong), keramik kamar mandi, parket opsional, cat dinding dikurangi bukaan, plafon, pintu, jendela
  • Harga satuan bisa diubah, ekspor CSV untuk Excel
  • Brosur PDF A4 2 halaman dibuat di browser
  • Gambar Instagram 1080×1350 dan ringkasan WhatsApp
  • Validasi nomor WA 08…/+62…

Data

  • Tersimpan di browser (localStorage + IndexedDB)
  • Cadangan JSON unduh/buka
  • Halaman privasi, hak gambar, dan batasan

Animasi 3D

Konsep

3D adalah produknya: dinding diekstrusi three.js langsung dari data editor 2D, jadi menyeret dinding di denah memindahkan dinding 3D saat itu juga. Jalan di dalam dengan tabrakan dan kamera tersimpan (posisi + arah) menjadi sumber gambar clay untuk render, sehingga render selalu cocok dengan dinding sebenarnya.

Tanpa WebGL / gerak dikurangi

Tanpa WebGL: denah tampak atas statis dengan pin kamera bernomor; editor, RAB, dan brosur tetap jalan. prefers-reduced-motion: dinding langsung penuh tanpa animasi naik dan loncat kamera tanpa transisi.

Screenshot

  1. 01Denah dan 3D berdampinganSatu denah, dua tampilan. Dinding terpilih bisa diseret atau digeser dengan panah keyboard, 3D di sebelahnya ikut.desktop
  2. 02Seret dinding, 3D ikutDiambil saat mouse masih menyeret: dinding tengah naik 60 cm, luas kamar dan ruang tamu berubah, dinding 3D sudah berpindah.desktop
  3. 03Jalan di dalam rumahKamera tersimpan menyimpan posisi, arah, dan FOV. Nama ruang tampil di atas tur 3D, dan ruang itu disorot di denah bersama kerucut pandangnya.desktop
  4. 04Render per kameraHasil render disetujui manusia, bertanda "Ilustrasi, bukan foto asli", dengan batas render ulang dan meteran biaya Rupiah.desktop
  5. 05Yang dikirim ke modelGambar clay dari geometri denah dan satu papan gaya yang sama untuk semua kamera, plus perintahnya. Tidak ada kotak hitam.desktop
  6. 06Ubah satu areaDua langkah: sapu area, lalu tulis perubahannya. Hasil model hanya ditempel di area sapuan; piksel lain dijamin sama.desktop
  7. 07RAB kasar dari denahKeramik, cat, plafon, pintu, jendela dihitung dari luas denah. Total menempel di atas kolom harga satuan, jadi langsung terlihat berubah saat harga diubah. Ekspor CSV.desktop
  8. 08Brosur PDF 2 halamanFoto utama, denah berlabel m² dari data, spesifikasi, sudut ruang, dan RAB. Unduh PDF, gambar IG 4:5, atau kirim ringkasan WA.desktop
  9. 09Mulai dari tipe rumahTemplat tipe 36, 45, 54 lengkap dengan kamera, atau jiplak gambar denah arsitek.desktop
  10. 10Jiplak & kalibrasi skalaKlik dua ujung garis dimensi, ketik 7,50 m. Semua ukuran dan luas mengikuti skala itu.desktop
  11. 11Draf AI menunggu persetujuanModel membaca dinding dan ruang dari gambar sebagai draf. Ruang yang ragu ditandai kuning sampai Anda menyetujui.desktop
  12. 12Denah di ponselEditor lengkap di layar 390 px: alat, zoom, dan target sentuh 44 px.mobile
  13. 13Jalan-jalan 3D di ponselPad arah sentuh dan tombol simpan kamera. Terukur 49,5 fps saat berputar di uji CPU 4x lebih lambat (target minimal 45).mobile
  14. 14Tinjau render di ponselSetujui, tolak, ubah area, atau render ulang langsung dari ponsel.mobile
  15. 15RAB di ponselTotal perkiraan dan rincian volume bisa dikirim ke klien dari lapangan.mobile

Contoh hasil

  • PDFBuka PDF ↗
    Contoh brosur PDFBrosur 2 halaman A4 dari proyek fiktif Griya Sawo Asri tipe 45, dibuat di Mode demo.
  • Render demo: ruang tamu — Render Mode demo (3D bergaya di browser, bukan model AI) dari kamera 1, bertanda ilustrasi.
    Render demo: ruang tamuRender Mode demo (3D bergaya di browser, bukan model AI) dari kamera 1, bertanda ilustrasi.
  • Render demo: ruang keluarga — Kamera 2 dengan papan gaya yang sama, jadi material dan perabot konsisten.
    Render demo: ruang keluargaKamera 2 dengan papan gaya yang sama, jadi material dan perabot konsisten.

Cara Pasang

  1. Ekstrak & pasang

    Ekstrak ZIP lalu pasang dependensi.

    npm install

  2. Jalankan

    Web di http://localhost:4421, API di port 8421. Tanpa kunci langsung Mode demo.

    npm run dev

  3. Aktifkan render AI (opsional)

    Salin .env.example ke .env, isi AI_API_KEY dan id model. Kunci tidak pernah masuk ke browser.

    cp .env.example .env

  4. Deploy

    Statis: unggah dist/ (Mode demo). Dengan AI: SERVE_STATIC=1 npx tsx server/index.ts di VPS di belakang nginx. Lengkap di docs/INSTALL.md.

    npm run build

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 halaman Render > 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.

Isi Paket

  • src/ · aplikasi React (editor denah, 3D, render, RAB, brosur)
  • server/ · proxy Hono ke penyedia AI dengan batas biaya harian
  • tests/ · uji unit, e2e Playwright, skrip tangkapan layar
  • docs/ · INSTALL, CUSTOMIZE, CARA-KERJA (dengan tangkapan layar)
  • design/ · sistem desain, riset, iterasi
  • public/samples/ · contoh denah pindaian fiktif
  • .env.example, README.md, LICENSE.txt, NOTICE.md, CHANGELOG.md

Kustomisasi

  • Nama, logo, dan warna lewat token CSS
  • Templat tipe rumah developer Anda sendiri (dinding, bukaan, ruang, kamera)
  • Papan gaya dan perintah render
  • Harga satuan RAB bawaan per daerah
  • Data agen dan teks brosur
  • Penyedia dan id model AI lewat .env (Gemini, gpt-image, FLUX Kontext, Seedream, ComfyUI)

AI in the loop

Yang dikerjakan AI

Model gambar merender foto interior dari gambar clay (geometri dan perspektif tepat dari denah) dan satu papan gaya; model yang sama mengubah area yang disapu kuas. Model teks-visi membaca gambar denah menjadi draf dinding dan ruang.

Kendali manusia

Setiap render adalah draf: Anda menyetujui, menolak, atau me-render ulang (maksimal 2 kali). Edit bermasker hanya ditempel di area sapuan dan aplikasi melaporkan jumlah piksel di luar sapuan yang berubah. Draf denah dari AI tidak dipakai sebelum Anda menekan Setujui draf. Brosur hanya memakai foto yang disetujui, dan denah berlabel m² selalu digambar dari data, tidak dari model.

Penyedia model

Endpoint kompatibel OpenAI dari .env (bawaan FlatKey, model gemini-3.1-flash-image dan gemini-3.1-flash-lite-image). Bisa diganti ke gpt-image, FLUX Kontext, Seedream, atau ComfyUI. Mode demo tanpa kunci memakai render 3D di browser.

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

FAQ

Apakah render bisa mengubah ukuran kamar atau memindah jendela?

Model menerima gambar clay yang dirender dari denah Anda dengan perintah untuk mempertahankan semua dinding, pintu, dan jendela. Itu jauh lebih ketat daripada menyuruh model menebak dari denah 2D, tetapi model gambar tetap bisa meleset. Karena itu setiap hasil adalah draf yang Anda tinjau, dan brosur selalu menampilkan denah berlabel m² dari data di sampingnya. Untuk geometri paling ketat, arahkan ke ComfyUI + ControlNet (lihat CUSTOMIZE).

Berapa biaya per render di mode nyata?

Tergantung penyedia. Bawaan tercatat Rp 750 untuk draf dan Rp 1.700 untuk final 2K per gambar terkirim (ubah di .env sesuai tarif Anda). Galat dan blokir filter tidak ditagih, dan server menolak permintaan saat batas harian tercapai.

Bisa dipakai tanpa kunci API?

Bisa. Mode demo menjalankan semua fitur: denah, 3D, kamera, RAB, brosur. Render dibuat dari 3D di browser dan diberi label bukan model AI.

Apakah RAB-nya bisa dipakai sebagai penawaran ke klien?

Tidak. RAB ini perkiraan kasar dari volume denah dan harga satuan yang Anda isi, untuk diskusi awal. Asumsinya ditulis di halaman RAB dan di brosur.

Denah saya berupa PDF dari arsitek. Bisa?

Ekspor dulu halaman PDF itu menjadi gambar PNG/JPG, lalu unggah di Proyek dan kalibrasi skala dengan satu garis dimensi.

Rumah dua lantai atau ruko?

Versi 1.0 satu lantai per proyek. Untuk dua lantai, buat satu proyek per lantai; brosur bisa dibuat per lantai.

Data klien saya disimpan di mana?

Di browser pengguna. Server hanya meneruskan gambar ke penyedia AI saat tombol render/edit/baca ditekan di mode nyata. Tidak ada akun dan tidak ada basis data.

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 atau baca denah ditagih penyedia langsung ke akun Anda. Meteran Rupiah dan batas harian di aplikasi membantu mengendalikannya.

Changelog

  1. v1.0.1
    30 September 2026
    • Kunci API sendiri: tempel kunci di halaman Render, 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 render/baca-denah dan prompt dipakai bersama oleh server, Worker, dan browser
  2. v1.0.0
    26 September 2026
    • Rilis pertama: editor denah, 3D sinkron, jalan di dalam, kamera tersimpan, render clay + papan gaya, edit bermasker piksel-aman, RAB kasar, brosur PDF, Mode demo
Denah Hidup
Rp 549.000
Demo ↗