Bento: 單一 HTML 檔案簡報工具

Bento 是一款簡報工具，它將整個應用程式——包括簡報數據、檢視器和編輯器——整合到單一個 HTML 檔案中。這種架構允許使用者在任何現代瀏覽器中開啟簡報，直接進行編輯，並在不需要帳戶、安裝或外部伺服器依賴的情況下進行儲存。

核心架構：單一檔案應用程式

Bento 以「單一檔案 Web App」的方式運作，軟體本身即是該檔案。執行環境被固定在 HTML 文件中，確保簡報不會隨著時間而「腐朽」，並只要有瀏覽器就能持續使用。

技術實作

根據創作者 starfallg 的說法，該 HTML 檔案分為兩個主要部分：

• Slide Data： 位於檔案頂部附近的一個純 JSON 區塊，使文件可以被外部工具或 AI agents 讀取與搜尋 (grep-able)。
• Application Logic： 應用程式以 base64 blob 的形式儲存，透過一個小的 shim 進行載入。它使用 DecompressionStream 在瀏覽器中解壓縮應用程式，保持檔案體積精簡（預設簡報約為 560 KB）。

數據持久化與更新

Bento 使用 File System Access API，在使用者儲存 (⌘S) 時將 JSON 數據寫回同一個 HTML 檔案。它還會在啟動時檢查簽署過的 manifest 以處理更新，儘管使用者可以禁用此功能。

關鍵簡報功能

Bento 提供高保真度的簡報體驗，並專注於動態效果與互動式數據。

動態轉場與動態效果

Bento 利用 GSAP/Flip 來處理動畫。它具有「Morph」轉場功能，具有相同 ID 的元素會在幻燈片之間對其位置、大小、顏色和漸層進行動畫處理，創造出無縫的視覺流。

互動式與即時數據

與靜態幻燈片不同，Bento 整合了即時圖表與互動狀態：

• Live Charts： 圖表是具有活動工具提示 (tooltips) 和縮放功能的真實實例。數據可以在不同的圖表類型之間轉換（例如從長條圖轉換為圓餅圖或散點圖），同時保持相同的數據集。

• Interactive Scenes： 使用者可以在單個幻燈片中創建「場景 (scenes)」——本質上是隱藏的狀態，可以透過按鈕進行連結，在不跳轉到下一張幻燈片的情況下重新排列元素或更改佈局。

• Live-Linked Tables： 編輯表格數據會即時更新關聯的圖表和增長線。

內容創作

Bento 內建了編輯器（按 Esc 鍵進入），並支援 Markdown 以實現即時的排版與格式化（項目符號、程式碼區塊和刪除線）。

協作與安全性

雖然 Bento 以離線優先為核心，但它透過「盲目中繼 (blind relay)」系統支援選擇性的即時協作。

• CRDTs 與加密： 協作由無衝突複製數據類型 (CRDTs) 和加密數據驅動。託管在 Cloudflare Durable Objects 上的中繼伺服器只能看到加密的負載，確保了隱私。
• 存取控制： 協作是透過分享邀請檔案來啟動的。存取權限透過使用者金鑰進行管理，允許創作者分配唯讀權限或撤銷使用者的存取權。

社群回饋與洞察

Hacker News 上的使用者討論了關於該工具實用性與潛在改進點的以下幾點：

「非常適合使用 agents 進行編輯並與同事分享。在行動裝置上表現也很好。嵌入圖片和影片也運作得非常完美。」

「知道我需要的一切都在單一個檔案中，這感覺非常令人滿足。」

一位使用者 (@aag) 注意到關於隱私的一個差異，觀察到雖然首頁聲稱「不會回傳任何資訊 (nothing phones home)」，但某些 Bento 檔案包含了一個 cloudflareinsights.com 的信標 (beacon)。其他使用者建議增加一個禁用所有動畫的設定以提升無障礙體驗，或將該工具整合進 Pandoc 作為一種輸出格式。