Bento - Suite Office yang Muat dalam Satu File

 (bento.page)
3 poin oleh GN⁺ 4 jam lalu | 1 komentar | Bagikan ke WhatsApp
  • Alat dokumen/editor/penampil/presentasi dimasukkan ke dalam satu file .bento.html, sehingga bisa dibuka, diedit, dan dipresentasikan hanya dengan browser sebagai pengganti PowerPoint
  • Satu file sekitar 570KB berfungsi sebagai aplikasi lengkap, dan bisa disimpan serta dikirim lewat email atau AirDrop tanpa akun/cloud/installer
  • Data slide disimpan sebagai JSON yang dapat dibaca di dalam file, sehingga agen AI seperti Claude Code/Codex/Gemini/ChatGPT dapat langsung mengubah file tersebut
  • File .pptx yang sudah ada juga bisa dikirim bersama ke AI, lalu bukan sekadar dikonversi, melainkan ditulis ulang menjadi slide yang memanfaatkan fitur Bento seperti Morph/grafik real-time
  • Mendukung transisi Morph/grafik/video/audio/kolaborasi terenkripsi real-time, dan setelah Slides berencana menghadirkan Docs dan Sheets dengan pendekatan file tunggal yang sama

Satu file yang sekaligus menjadi dokumen dan aplikasi

  • Di dalam .bento.html, slide dan seluruh program editor berada bersama
  • Saat file dibuka di browser, editor langsung berjalan, dan saat disimpan, data dokumen ditulis kembali ke file itu sendiri
  • Font/gambar/grafik juga ikut disertakan, sehingga salinan file saja sudah bisa dibuka dan dipresentasikan secara mandiri
  • Dalam mode Offline, pembaruan dan kolaborasi diblokir sehingga semua pekerjaan diproses secara lokal
  • Bisa dijalankan langsung di browser lewat Bento/Slides atau mengunduh file aplikasi tunggal

Format dokumen untuk agen AI

  • Data dokumen disimpan sebagai JSON teks biasa di blok <script type="application/bento+json" id="bento-doc"> di bagian atas file
  • Dokumen saat ini bisa dibaca lewat window.bento.doc dan dokumen yang telah diubah bisa dimuat lewat window.bento.loadDoc(json)
  • Agen AI dapat menambahkan slide/grafik/catatan presenter dan lainnya hanya dengan mengubah JSON tanpa menyentuh kode aplikasi
  • Bisa digunakan bukan hanya di agen coding seperti Claude Code/Cursor/Aider, tetapi juga di chatbot umum yang mendukung lampiran file
  • Pada chatbot yang tidak mendukung file, JSON bisa disalin, diubah, lalu ditempel kembali
  • Dengan Ollama/llama.cpp/LM Studio, pengeditan AI juga bisa dijalankan sepenuhnya secara lokal
  • Menyediakan agents.md agar agen AI dapat memanfaatkan Bento dengan benar

Fitur presentasi yang lebih dekat ke web daripada PowerPoint

  • Mendukung transisi Morph yang membuat elemen dengan id yang sama bergerak mulus di antara slide
    • Cukup duplikasi slide yang ada lalu pindahkan elemen atau ubah gayanya, transisi akan tersusun tanpa perlu membuat timeline terpisah
  • Mesin grafik bawaan tanpa dependensi sendiri menggambar grafik batang/garis/lingkaran/sebar
    • Grafik batang/garis/lingkaran/sebar tetap interaktif saat presentasi, termasuk tooltip/zoom/pergantian data
  • Video dan audio bisa disematkan di dalam slide atau ditautkan sebagai file eksternal
  • File PowerPoint lama tidak diimpor apa adanya, melainkan disusun ulang oleh AI menjadi dokumen Bento
  • Juga mendukung layar presenter/komentar/layout/ekspor PDF/berbagai ukuran halaman/8 bahasa UI
  • Pengeditan berfokus pada desktop, tetapi melihat dan presentasi juga bisa dilakukan di smartphone

Kolaborasi yang mengutamakan lokal

  • Saat sesi live dimulai dari file, pengguna yang membuka salinan file yang sama dapat bergabung ke ruang kolaborasi
  • Data kolaborasi dienkripsi end-to-end dengan AES-GCM, dan server relay hanya menangani ciphertext
  • CRDT milik sendiri menangani pengeditan real-time dan penggabungan perubahan offline
  • Kunci kolaborasi berada di dalam file itu sendiri, sehingga mengirim file berfungsi sebagai metode undangan
  • Perubahan edit yang sempat bercabang saat offline juga akan digabung dua arah saat tersambung kembali

Roadmap dan lisensi Bento/Suite

  • Bento/Slides yang saat ini didistribusikan adalah aplikasi pertama dari Bento/Suite
  • Berencana menyediakan Bento/Docs dan Bento/Sheets masing-masing sebagai file .bento.html mandiri yang self-contained
  • Perangkat lunak Bento sendiri dirilis di bawah MIT License

Bacaan terkait

1 komentar

 
GN⁺ 4 jam lalu
Opini Hacker News

  • Saya pembuat Bento. Di bagian atas file ada blok JSON biasa yang berisi data slide, sehingga bisa dibaca, di-grep, atau diproses dengan alat otomatisasi. Aplikasinya adalah blob base64 yang dimuat lewat loader kecil; blob itu didekompresi dengan DecompressionStream di browser agar paket tetap kecil dan tidak mengambil file eksternal saat dijalankan.
    Dengan File System Access API, JSON ditulis kembali ke file yang sama; jika tidak didukung, mekanisme ini diganti dengan unduhan biasa, dan semua pembaruan ditandatangani dengan ECDSA. Awalnya berbasis reveal.js lalu ditambahkan GSAP/Flip dan echarts, tetapi karena masalah ukuran dan perilaku, semua fitur animasi dan chart akhirnya diimplementasikan ulang sendiri.
    Saya terutama puas karena kolaborasi CRDT bekerja mulus. Relay buta kecil yang berjalan di Cloudflare Durable Objects hanya melihat data terenkripsi dari klien, dan kolaborasi nonaktif sampai sesi dimulai dengan berbagi file undangan. Hak akses dikelola dengan kunci pengguna, sehingga bisa ada pengguna read-only, dan izin kolaborasi real-time per pengguna juga bisa dicabut.

    • Sepertinya akun GitHub baru dibuat seminggu lalu untuk proyek ini; saya penasaran apakah ada akun GitHub lain yang bisa menunjukkan riwayat pemeliharaan dan keamanan.
    • Karena hanya menangani satu file, saya penasaran di mana CRDT bekerja dan di mana servernya berada. Saya menyukai TiddlyWiki tetapi tidak pernah benar-benar menggunakannya terus-menerus, sedangkan presentasi yang mudah diedit adalah kasus penggunaan yang mudah dipahami.
      Jika fitur kolaborasi disediakan secara default untuk semua pengguna, saya juga penasaran apakah tidak ada risiko trafik membanjiri akun Cloudflare.
    • Fitur ajaib Reveal.js adalah slide vertikal yang bergerak naik-turun seperti contoh ini. Dalam satu deck slide, kita bisa turun untuk menunjukkan detail teknis kepada audiens tertentu atau melewatinya.
      Sepertinya fitur ini dihilangkan agar lebih mirip PowerPoint, tetapi ini fitur favorit saya di Reveal.js, jadi semoga tidak dilupakan.
    • Saya penasaran apa yang terjadi pada deck slide v1 ketika Bento ditingkatkan ke v2. Saat menekan upgrade, seharusnya data slide JSON yang ada bisa diekspor ke shell v2.
    • Jalan untuk mendukung format Office yang jahat itu mengarah ke neraka, jadi saya lebih suka menyebutnya slide show daripada PowerPoint. Semoga format sederhana seperti ini menjadi standar dan format lama menghilang.

  • Saya membuat alat serupa yang berfokus pada pembuatan aplikasi React kecil, bukan presentasi. HTML dasar dengan contoh aplikasi ada di sini, dokumentasinya di sini; masih belum dipoles, tetapi sudah cukup bisa dipakai.
    Alat ini menyematkan transformer JSX dan editor kode, mendukung penyimpanan ke file atau localStorage, dan juga bisa mengekspor JSX serta data JSON secara terpisah dari shell yang menangani penyimpanan, transformasi, dan pengeditan file.
    Saya juga membuat aplikasi iOS untuk menyimpan mini-app. Aplikasi ini tidak hanya bergantung pada localStorage, tetapi menyimpan perubahan data dan kode jangka panjang sehingga alur simpan dan refresh terasa mulus. Sandbox memblokir panggilan jaringan dari aplikasi yang tersimpan, tetapi bisa diizinkan per aplikasi; ke depannya saya juga ingin menambahkan fitur kenyamanan seperti editor native.

  • Saya rasa bentuk seperti ini akan makin umum. Banyak perangkat lunak bisa disajikan sepenuhnya secara lokal dengan HTML, TypeScript, React, dan sebagainya, serta menyimpan state secara lokal juga, tetapi sejauh ini insentif ekonominya kurang.
    Secara pribadi, saya memakai Kimi K3 untuk membuat game yang ramah mobile, membahas topik dari aljabar linear hingga fisika kuantum. Tujuannya adalah memperhatikan pengguna neurodivergen, menyimpan seluruh state secara lokal, dan menyajikannya lewat GitHub Pages agar orang tertarik pada bidang tersebut. Ini proyek yang membutuhkan beragam keahlian dan waktu, sehingga tanpa LLM tidak akan ekonomis; setelah saya mainkan sendiri, perbaiki, dan hilangkan bug, saya berencana merilisnya di HN.

    • Saya pernah berdiskusi dengan rekan tentang dokumen hibrida yang memasukkan kontrol pengeditan dan konten ke dalam satu file HTML. Wiki seperti Feather Wiki adalah preseden; saya penasaran seperti apa jadinya jika diimplementasikan sebagai SVG atau spreadsheet.

  • Saya senang memakai buku tamu real-time, tetapi akhirnya M1 Mac saya macet dan harus direstart paksa. Kalau bukan seluruh HN yang mengedit bersamaan, mungkin sebagian besar akan berjalan baik, tetapi sepertinya ada alasan mengapa Figma memakai WASM dan renderer khusus.
    Fokus input saat ini seharusnya tidak direset ketika pengguna lain mengubah hal yang tidak berkaitan. Selain itu, teks di landing page dan deck contoh terasa terlalu seperti buatan LLM, sedangkan tulisan pengajuan HN jauh lebih enak dibaca. Bagus sekali proyek ini dirilis sebagai perangkat lunak bebas dan open source.

    • Karena spam, buku tamu direset dan sekarang berada di epoch 4. Masalah reset fokus tidak muncul dalam pengujian yang hanya melibatkan satu-dua orang, tetapi akan segera saya perbaiki.
      Saya juga setuju soal masalah teks, tetapi saya kurang percaya diri dalam menulis dan waktu saya terbatas di antara pekerjaan dan mengasuh anak, jadi saya berencana memperbaikinya secara bertahap.

  • Saya sedang memperkenalkan konsep aplikasi web satu file seperti ini, dan akan bagus jika Bento ditambahkan ke draf Wikipedia yang sedang diusulkan.

    • mdwiki yang saya buat pada 2013 sepertinya juga termasuk. Itu satu file .html yang memuat gambar, ikon, dan style semuanya secara inline serta bekerja offline, jadi dulu saya bercanda menyebutnya aplikasi satu halaman pertama yang benar-benar sejati.
    • Draf ini tidak terasa seperti artikel Wikipedia, misalnya menyapa pembaca dengan you. Wikipedia semestinya menjadi sumber tersier, bukan tempat mempromosikan konsep yang ingin dipopulerkan, jadi sepertinya bukan tempat yang tepat.
    • Diagram Ilograph juga bisa diekspor sebagai HTML mandiri seperti contoh ini. Ada semacam fitur slide juga, dan ukuran filenya sekitar 560KB.
    • Hyperclay sepertinya juga bisa masuk daftar.
    • Saat mulai membuat Bento saya hanya tahu TiddlyWiki, jadi saya akan melihat daftar ini.

  • Keren bahwa Claude bisa menggunakannya hanya dengan diberi tahu tentang teknologi Bento.

  • Setelah lama membuat diagram dengan draw.io, saya merasa cara menyimpan dokumen seperti blob iframe yang berisi editor dan file itu cerdas. Namun, di draw.io editor itu sendiri tidak disertakan dalam file, sehingga kodenya harus dimuat lewat koneksi web
    Saya berharap pendekatan ini bisa dijadikan use case utama, dan Bento hampir persis seperti yang saya bayangkan

    • Karena sering menggunakan draw.io, kami juga mempertimbangkan pendekatan ini, tetapi untuk saat ini kami menilai lebih baik memulai sebagai satu file lokal. Nanti jika fitur enterprise seperti SSO diperlukan, hosting juga bisa masuk akal

  • Ini memenuhi kebutuhan yang sangat umum di lingkungan perusahaan. Beberapa tim di perusahaan meninggalkan produk cloud atau desktop karena bug pada software presentasi/visualisasi lama tidak diperbaiki dan fitur kustom juga tidak ditambahkan, lalu beralih ke alat berbasis HTML dan JavaScript
    Para “penguasa kecil” di organisasi IT internal sepertinya perlu waspada

    • Di perusahaan kami juga, para teknisi membuat presentasi web app keren yang membuat semua orang kagum, tetapi ketika angkanya salah dan harus diperbaiki sebelum komite operasional sore hari, staf non-teknis yang hanya punya Claude dan tidak punya Claude Code jadi kebingungan. Ini karena Claude Code ditetapkan hanya boleh dipakai oleh teknisi dan software engineer

  • Saya sedang membayangkan alat presentasi mandiri yang memasang Bento kosong sebagai PWA lewat fitur browser “instal situs sebagai aplikasi”, mengisi otomatis nama penulis dan sebagainya, lalu menjadikannya read-only agar pengguna menyimpannya dengan “Save As”
    Akan bagus jika proyek ini menyertakan fitur untuk memasang dokumen dasar kosong yang read-only kecuali informasi penulis sebagai PWA

    • PWA juga sudah dipertimbangkan, tetapi soal apakah perlu hosting secara keseluruhan masih sedang dipikirkan. Untuk mendukung penggunaan enterprise, pada akhirnya hosting mungkin diperlukan, tetapi saat ini saya ingin fokus membuat alat yang sederhana dan keren
      Kami akan meninjau lebih jauh fitur apa yang diinginkan pengguna pada versi hosting dan bagaimana mempertahankan prinsip-prinsip khas Bento

  • Jika membuat presentasi HTML dengan code agent, hasilnya cukup bagus. Tergantung tujuan, bisa menggunakan Slidev berbasis Markdown, atau agent juga bisa membuat slide Typst yang terutama indah untuk ekspresi matematika dan sebagainya
    Namun dari judulnya saya mengira ini alat yang terkait langsung dengan PowerPoint, padahal sebenarnya PowerPoint digunakan sebagai sinonim untuk “presentasi”. Agak ironis mengingat banyak orang tidak menyukai PowerPoint