Bento - ชุดออฟฟิศที่รวมทุกอย่างไว้ในไฟล์เดียว

 (bento.page)
3 คะแนน โดย GN⁺ 4 시간 전 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • รวมเอกสาร/ตัวแก้ไข/ตัวดู/เครื่องมือนำเสนอไว้ในไฟล์ .bento.html ไฟล์เดียว เป็นทางเลือกแทน PowerPoint ที่เปิด แก้ไข และนำเสนอได้ถ้ามีแค่เบราว์เซอร์
  • ไฟล์เดียวขนาดประมาณ 570KB ทำงานเป็นแอปพลิเคชันเต็มรูปแบบ สามารถบันทึกและส่งต่อทางอีเมลหรือ AirDrop ได้โดยไม่ต้องมีบัญชี/คลาวด์/โปรแกรมติดตั้ง
  • ข้อมูลสไลด์ถูกเก็บเป็น JSON แบบอ่านได้ภายในไฟล์ ทำให้ AI agent อย่าง Claude Code/Codex/Gemini/ChatGPT แก้ไขไฟล์ได้โดยตรง
  • หากส่งไฟล์ .pptx เดิมให้ AI ไปพร้อมกัน ก็สามารถ เขียนใหม่ ให้เป็นสไลด์ที่ใช้ความสามารถของ Bento เช่น Morph และกราฟแบบเรียลไทม์ได้ แทนการแปลงแบบตรง ๆ
  • รองรับทรานซิชัน Morph/กราฟ/วิดีโอ/เสียง/การทำงานร่วมกันแบบเข้ารหัสเรียลไทม์ และมีแผนจะออก Docs กับ Sheets ในรูปแบบไฟล์เดี่ยวแบบเดียวกันต่อจาก Slides

ไฟล์เดียวที่เป็นทั้งเอกสารและแอป

  • ภายใน .bento.html มีทั้งสไลด์และโปรแกรมแก้ไขทั้งหมดรวมอยู่ด้วย
  • เมื่อเปิดไฟล์ในเบราว์เซอร์ ตัวแก้ไขจะเริ่มทำงานทันที และเมื่อบันทึก ข้อมูลเอกสารจะถูกเขียนกลับลงในตัวไฟล์เอง
  • ฟอนต์/รูปภาพ/กราฟก็ถูกรวมไว้ด้วย จึงเปิดและนำเสนอได้อย่างอิสระด้วยแค่สำเนาไฟล์
  • ในโหมด Offline จะปิดกั้นการอัปเดตและการทำงานร่วมกัน เพื่อให้ ทุกอย่างประมวลผลอยู่ในเครื่อง
  • สามารถรันได้ทันทีบนเบราว์เซอร์ที่ Bento/Slides หรือดาวน์โหลด ไฟล์แอปพลิเคชันเดี่ยว ได้

รูปแบบเอกสารสำหรับ AI agent

  • ข้อมูลเอกสารถูกเก็บเป็น JSON แบบข้อความล้วน ในบล็อก <script type="application/bento+json" id="bento-doc"> ด้านบนของไฟล์
  • สามารถอ่านเอกสารปัจจุบันได้ด้วย window.bento.doc และโหลดเอกสารที่แก้ไขแล้วได้ด้วย window.bento.loadDoc(json)
  • AI agent สามารถเพิ่มสไลด์/กราฟ/โน้ตผู้บรรยาย ฯลฯ ได้ด้วยการแก้เฉพาะ JSON โดยไม่ต้องแตะโค้ดแอปพลิเคชัน
  • ใช้ได้ทั้งกับ coding agent อย่าง Claude Code/Cursor/Aider และแชตบอตทั่วไปที่รองรับการแนบไฟล์
  • สำหรับแชตบอตที่ไม่รองรับไฟล์ สามารถคัดลอก JSON ไปแก้ไขแล้ววางกลับเข้าไปใหม่ได้
  • หากใช้ Ollama/llama.cpp/LM Studio ก็สามารถรันการแก้ไขด้วย AI แบบโลคัลได้ทั้งหมด
  • มี agents.md เพื่อแนะนำให้ AI agent ใช้งาน Bento ได้อย่างถูกต้อง

ความสามารถด้านการนำเสนอที่ใกล้เว็บมากกว่า PowerPoint

  • รองรับ ทรานซิชัน Morph ที่ทำให้องค์ประกอบที่มี id เดียวกันเคลื่อนที่อย่างเป็นธรรมชาติระหว่างสไลด์
    • เพียงคัดลอกสไลด์เดิมแล้วขยับองค์ประกอบหรือเปลี่ยนสไตล์ ก็จัดทรานซิชันได้โดยไม่ต้องสร้างไทม์ไลน์แยก
  • มีเอนจินกราฟในตัวที่ไม่มี dependency สำหรับวาดกราฟแท่ง/เส้น/วงกลม/กระจาย
    • กราฟแท่ง/เส้น/วงกลม/กระจายยังคงใช้งาน tooltip/การซูม/การสลับข้อมูลได้แม้ระหว่างการนำเสนอ
  • สามารถฝังวิดีโอและเสียงไว้ในสไลด์ หรือเชื่อมกับไฟล์ภายนอกได้
  • ไฟล์ PowerPoint เดิมไม่ได้ถูกนำเข้าแบบตรง ๆ แต่ให้ AI จัดองค์ประกอบใหม่เป็นเอกสาร Bento
  • รองรับหน้าจอผู้บรรยาย/คอมเมนต์/เลย์เอาต์/ส่งออก PDF/หลายขนาดหน้า/ภาษา UI 8 ภาษา
  • การแก้ไขเน้นเดสก์ท็อป แต่ ยังดูและนำเสนอได้บนสมาร์ตโฟน

การทำงานร่วมกันแบบ local-first

  • เมื่อเริ่ม live session จากไฟล์ ผู้ใช้ที่เปิดสำเนาของไฟล์เดียวกันจะเข้าร่วมพื้นที่ทำงานร่วมกันได้
  • ข้อมูลการทำงานร่วมกันถูกเข้ารหัสแบบ end-to-end ด้วย AES-GCM และเซิร์ฟเวอร์ตัวกลางจะจัดการเฉพาะข้อความเข้ารหัส
  • CRDT ที่พัฒนาขึ้นเองทำหน้าที่ดูแลการแก้ไขแบบเรียลไทม์และการรวมการเปลี่ยนแปลงจากออฟไลน์
  • ตัวไฟล์เองมีคีย์สำหรับการทำงานร่วมกันอยู่แล้ว ดังนั้นการส่งไฟล์จึงทำหน้าที่เป็นวิธีเชิญไปด้วย
  • แม้เนื้อหาที่แก้ไขจะแยกกันไปตอนออฟไลน์ เมื่อกลับมาเชื่อมต่ออีกครั้งก็จะถูกรวมแบบสองทาง

โรดแมปและไลเซนส์ของ Bento/Suite

  • Bento/Slides ที่กำลังแจกจ่ายอยู่ในตอนนี้คือแอปตัวแรกของ Bento/Suite
  • มีแผนจะออก Bento/Docs และ Bento/Sheets เป็นไฟล์ .bento.html แบบ self-contained แยกอิสระของตัวเอง
  • ซอฟต์แวร์ Bento เองเผยแพร่ภายใต้ MIT License

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 4 시간 전
ความคิดเห็นจาก Hacker News

  • ผมเป็นผู้สร้าง Bento เอง ด้านบนของไฟล์จะมี บล็อก JSON ธรรมดา ซึ่งเป็นข้อมูลสไลด์ ทำให้อ่าน, grep หรือประมวลผลด้วยเครื่องมืออัตโนมัติได้ แอปเป็น blob แบบ base64 ที่โหลดผ่าน loader ขนาดเล็ก และแตกไฟล์ด้วย DecompressionStream ของเบราว์เซอร์เพื่อให้แพ็กเกจมีขนาดเล็ก และไม่ดึงไฟล์ภายนอกตอนรัน
    ใช้ File System Access API เพื่อเขียน JSON กลับไปยังไฟล์เดิม และถ้าไม่รองรับก็ fallback เป็นการดาวน์โหลดตามปกติ โดยทุกอัปเดตมีการเซ็นด้วย ECDSA เดิมทีใช้ reveal.js เป็นฐาน แล้วเพิ่ม GSAP/Flip กับ echarts เข้าไป แต่เพราะปัญหาเรื่องขนาดและพฤติกรรม จึงเขียนฟีเจอร์แอนิเมชันและแผนภูมิใหม่เองทั้งหมด
    โดยเฉพาะอย่างยิ่งผมพอใจที่ การทำงานร่วมกันด้วย CRDT ทำงานได้ลื่นไหล relay แบบ blind ขนาดเล็กที่รันบน Cloudflare Durable Objects จะเห็นเฉพาะข้อมูลที่เข้ารหัสแล้วของไคลเอนต์ และการทำงานร่วมกันจะถูกปิดไว้จนกว่าจะเริ่มเซสชันด้วยการแชร์ไฟล์เชิญ ใช้คีย์ของผู้ใช้จัดการสิทธิ์เข้าถึง จึงมีผู้ใช้แบบอ่านอย่างเดียวได้ และยังเพิกถอนสิทธิ์การทำงานร่วมกันแบบเรียลไทม์เป็นรายผู้ใช้ได้ด้วย

    • ดูเหมือนว่าคุณเพิ่งสร้างบัญชี GitHub ใหม่สำหรับโปรเจกต์นี้เมื่อสัปดาห์ก่อน เลยสงสัยว่ามีบัญชี GitHub อื่นที่ใช้ตรวจสอบ ประวัติการบำรุงรักษาและความปลอดภัย ได้หรือไม่
    • ผมสงสัยว่าในเมื่อจัดการแค่ไฟล์เดียว CRDT ทำงานตรงไหน และเซิร์ฟเวอร์อยู่ที่ไหน ผมเคยชอบ TiddlyWiki แต่ไม่ได้ใช้ต่อจริงจัง ขณะที่ พรีเซนเทชันที่แก้ไขได้ง่าย เป็นกรณีใช้งานที่เข้าใจง่ายกว่า
      ถ้าฟีเจอร์การทำงานร่วมกันเปิดให้ผู้ใช้ทุกคนโดยค่าเริ่มต้น ก็สงสัยว่าจะมีความเสี่ยงที่ทราฟฟิกจะไหลไปถล่มบัญชี Cloudflare หรือไม่
    • ฟีเจอร์มหัศจรรย์ของ Reveal.js คือ สไลด์แนวตั้ง ที่เลื่อนขึ้นลงได้ เหมือนในตัวอย่าง ภายใน slide deck เดียวกัน สามารถเลื่อนลงไปแสดงเนื้อหาเชิงเทคนิคตามผู้ฟัง หรือข้ามไปก็ได้
      ดูเหมือนว่าคุณตัดฟีเจอร์นี้ออกเพื่อให้เหมือน PowerPoint แต่ผมชอบฟีเจอร์นี้ที่สุดใน Reveal.js เลยหวังว่าจะไม่ลืมมัน
    • สงสัยว่าเมื่อ Bento อัปเกรดเป็น v2 แล้ว slide deck v1 จะเป็นอย่างไร เมื่อกดอัปเกรด ควรจะสามารถส่งออก ข้อมูลสไลด์ JSON เดิมไปยัง shell v2 ได้
    • เส้นทางการรองรับฟอร์แมต Office อันชั่วร้ายนำไปสู่นรก ดังนั้นผมอยากเรียกมันว่า สไลด์โชว์ มากกว่า PowerPoint หวังว่าฟอร์แมตเรียบง่ายแบบนี้จะกลายเป็นมาตรฐาน และฟอร์แมตเก่า ๆ จะหายไป

  • ผมเคยทำเครื่องมือคล้ายกันที่เน้นการสร้างแอป React ขนาดเล็กแทนพรีเซนเทชัน HTML พื้นฐานที่มีแอปตัวอย่างอยู่ ที่นี่ และเอกสารอยู่ ที่นี่ แม้ยังไม่ได้ขัดเกลา แต่ก็ใช้งานได้ดีพอ
    มี ตัวแปลง JSX และตัวแก้ไขโค้ด ในตัว รองรับการบันทึกลงไฟล์หรือ localStorage และยังสามารถส่งออกโดยแยก JSX กับข้อมูล JSON ออกจาก shell ที่ทำหน้าที่บันทึกไฟล์ แปลง และแก้ไขได้ด้วย
    ผมยังทำ แอป iOS สำหรับเก็บมินิแอปด้วย ไม่ได้พึ่งแค่ localStorage แต่บันทึกการเปลี่ยนแปลงของข้อมูลและโค้ดในระยะยาว ทำให้ flow การบันทึกและรีเฟรชลื่นไหล sandbox จะบล็อก network call ของแอปที่บันทึกไว้ แต่สามารถอนุญาตเป็นรายแอปได้ และในอนาคตอยากเพิ่มฟีเจอร์อำนวยความสะดวกอย่าง editor แบบ native ด้วย

  • คิดว่ารูปแบบแบบนี้จะพบได้บ่อยขึ้น ซอฟต์แวร์จำนวนมากสามารถ ให้บริการแบบ local ล้วน ๆ ด้วย HTML, TypeScript, React ฯลฯ และเก็บ state ไว้ในเครื่องได้ แต่จนถึงตอนนี้ยังขาดแรงจูงใจทางเศรษฐกิจ
    ส่วนตัวผมกำลังใช้ Kimi K3 สร้างเกมที่เป็นมิตรกับมือถือ ครอบคลุมตั้งแต่พีชคณิตเชิงเส้นไปจนถึงฟิสิกส์ควอนตัม โดยคำนึงถึงผู้ใช้ที่มีความหลากหลายทางระบบประสาท เก็บ state ทั้งหมดไว้ในเครื่อง และให้บริการผ่าน GitHub Pages เพื่อชวนให้คนสนใจสาขานั้น เป็นโปรเจกต์ที่ต้องใช้ความเชี่ยวชาญหลากหลายและเวลา จึงคงไม่คุ้มทางเศรษฐกิจถ้าไม่มี LLM ผมตั้งใจจะเล่นเอง ปรับปรุง กำจัดบั๊ก แล้วค่อยเผยแพร่บน HN

    • ผมเคยคุยกับเพื่อนร่วมงานเรื่อง เอกสารไฮบริด ที่รวมฟังก์ชันควบคุมการแก้ไขและเนื้อหาไว้ในไฟล์ HTML ไฟล์เดียว วิกิอย่าง Feather Wiki เป็นตัวอย่างมาก่อน และสงสัยว่าถ้าทำด้วย SVG หรือสเปรดชีตจะออกมาเป็นอย่างไร

  • ผมสนุกกับการใช้ สมุดเยี่ยมชมแบบเรียลไทม์ แต่สุดท้าย M1 Mac ของผมค้างจนต้องบังคับรีบูต ถ้าไม่ใช่สถานการณ์ที่ทั้ง HN แก้ไขพร้อมกัน ก็น่าจะทำงานได้ดีเป็นส่วนใหญ่ แต่ดูเหมือนมีเหตุผลที่ Figma ใช้ WASM และ renderer แบบกำหนดเอง
    เมื่อผู้ใช้คนอื่นแก้ไขเนื้อหาที่ไม่เกี่ยวข้อง ไม่ควรทำให้ input focus ปัจจุบันถูกรีเซ็ต อีกอย่าง ข้อความบน landing page และ deck ตัวอย่างดูเป็นสำนวน LLM มากเกินไป ส่วนข้อความที่ส่งขึ้น HN อ่านง่ายกว่ามาก การเผยแพร่เป็นซอฟต์แวร์โอเพนซอร์สเสรีเป็นเรื่องยอดเยี่ยม

    • เพราะสแปมจึงรีเซ็ตสมุดเยี่ยมชม ตอนนี้เป็น epoch 4 แล้ว ปัญหา focus ถูกรีเซ็ตไม่โผล่ในการทดสอบที่มีผู้เข้าร่วมแค่หนึ่งสองคน แต่จะรีบแก้ทันที
      เห็นด้วยเรื่องข้อความเช่นกัน แต่ผมไม่ค่อยมั่นใจในการเขียน และมีเวลาน้อยระหว่างงานกับการเลี้ยงลูก เลยตั้งใจจะค่อย ๆ ปรับแก้ไป

  • ผมกำลังเผยแพร่แนวคิด เว็บแอปไฟล์เดียว แบบนี้ และน่าจะเพิ่ม Bento ลงใน ร่างบทความ Wikipedia ที่กำลังเสนออยู่ได้

    • mdwiki ที่ผมทำไว้ในปี 2013 ก็น่าจะเข้าข่าย เป็นไฟล์ .html เพียงไฟล์เดียวที่รวมรูปภาพ ไอคอน และสไตล์ทั้งหมดแบบ inline และทำงานออฟไลน์ได้ ตอนนั้นพูดเล่น ๆ ว่ามันคือ single page app ที่แท้จริงตัวแรก
    • ร่างนี้ ไม่ค่อยเหมือนบทความ Wikipedia เช่นเรียกผู้อ่านว่า you Wikipedia ควรเป็นแหล่งข้อมูลระดับตติยภูมิ ไม่ใช่ที่โปรโมตแนวคิดที่อยากทำให้เป็นที่ยอมรับ จึงดูไม่ใช่สถานที่ที่เหมาะนัก
    • ไดอะแกรมของ Ilograph ก็ส่งออกเป็น HTML แบบรันได้ในตัวเอง ได้เช่นกัน เหมือนตัวอย่างนี้ มีฟังก์ชันคล้ายสไลด์บางอย่างด้วย และไฟล์มีขนาดประมาณ 560KB
    • Hyperclay ก็น่าจะอยู่ในรายการได้เหมือนกัน
    • ตอนเริ่มทำ Bento ผมรู้จักแค่ TiddlyWiki เลยจะลองดูรายการนี้

  • เจ๋งดีที่แค่บอก Claude เกี่ยวกับ เทคโนโลยี Bento ก็ใช้งานได้

  • หลังจากใช้ draw.io ทำไดอะแกรมมานาน ผมรู้สึกว่าวิธีเก็บเอกสารแบบเป็น iframe blob ที่มีทั้งตัวแก้ไขและไฟล์อยู่ด้วยกันนั้นฉลาดดี แต่ draw.io ไม่ได้รวมตัวแก้ไขไว้ในไฟล์เอง จึงต้องโหลดโค้ดผ่านการเชื่อมต่อเว็บ
    เคยหวังว่าจะนำแนวทางนี้มาเป็นกรณีใช้งานหลักได้ และ Bento ก็แทบจะตรงกับภาพที่จินตนาการไว้

    • เราใช้ draw.io บ่อย จึงพิจารณาวิธีนี้ด้วย แต่เบื้องต้นเห็นว่าเริ่มจาก ไฟล์โลคัลไฟล์เดียว จะดีกว่า หากภายหลังต้องการฟีเจอร์สำหรับองค์กรอย่าง SSO การโฮสต์ก็อาจสมเหตุสมผล

  • ตอบโจทย์ที่พบบ่อยมากในสภาพแวดล้อมองค์กร บางทีมในบริษัทเลิกใช้ผลิตภัณฑ์คลาวด์หรือเดสก์ท็อป แล้วหันไปใช้ เครื่องมือบน HTML·JavaScript เพราะบั๊กของซอฟต์แวร์นำเสนอ/แสดงผลข้อมูลเดิมไม่ได้รับการแก้ไข และไม่มีการเพิ่มฟีเจอร์เฉพาะตามต้องการ
    ดูเหมือนพวกผู้มีอำนาจเล็ก ๆ ในฝ่าย IT ภายในองค์กรควรเริ่มกังวลได้แล้ว

    • ที่บริษัทของเรา วิศวกรก็ทำ เว็บแอปสำหรับพรีเซนเทชัน เจ๋ง ๆ จนทุกคนทึ่ง แต่ถ้าตัวเลขผิดและต้องแก้ก่อนประชุมคณะกรรมการปฏิบัติการช่วงบ่าย คนที่ไม่ใช่สายเทคนิคซึ่งมีแค่ Claude แต่ไม่มี Claude Code ก็จะจนปัญญา เพราะมีการกำหนดให้เฉพาะช่างเทคนิคและวิศวกรซอฟต์แวร์ใช้ Claude Code ได้

  • กำลังคิดทำเครื่องมือนำเสนอแบบสแตนด์อโลน โดยติดตั้ง Bento เปล่าเป็น PWA ผ่านฟีเจอร์ ‘ติดตั้งไซต์เป็นแอป’ ของเบราว์เซอร์ แล้วกรอกชื่อผู้เขียน ฯลฯ อัตโนมัติ จากนั้นทำให้เป็นแบบอ่านอย่างเดียวเพื่อให้ผู้ใช้ ‘บันทึกเป็น’
    ถ้าโปรเจกต์มีฟีเจอร์ติดตั้งเอกสารพื้นฐานเปล่าเป็น PWA ซึ่งเป็นแบบอ่านอย่างเดียวยกเว้นข้อมูลผู้เขียน ก็น่าจะดี

    • เราก็พิจารณา PWA แล้วเช่นกัน แต่โดยรวมยังลังเลเรื่อง จะโฮสต์หรือไม่ หากต้องรองรับการใช้งานในองค์กร สุดท้ายก็คงต้องมีการโฮสต์ แต่ตอนนี้อยากโฟกัสกับการทำเครื่องมือที่เรียบง่ายและเจ๋งก่อน
      จะลองดูเพิ่มเติมว่าจะรักษาฟีเจอร์ที่ผู้ใช้ต้องการในเวอร์ชันโฮสต์ พร้อมกับหลักการพิเศษของ Bento ได้อย่างไร

  • ถ้าใช้ code agent ทำพรีเซนเทชัน HTML ผลลัพธ์ออกมาค่อนข้างดี อาจใช้ Slidev ที่อิง Markdown ตามวัตถุประสงค์ หรือให้ agent ทำ สไลด์ Typst ซึ่งสวยเป็นพิเศษสำหรับนิพจน์คณิตศาสตร์ ฯลฯ ก็ได้
    อย่างไรก็ตาม ตอนเห็นชื่อเรื่องนึกว่าเป็นเครื่องมือที่เกี่ยวข้องโดยตรงกับ PowerPoint แต่จริง ๆ แล้วเป็นการใช้ PowerPoint ในความหมายพ้องกับ ‘พรีเซนเทชัน’ มากกว่า ซึ่งก็ออกจะย้อนแย้งอยู่บ้างเมื่อคิดว่ามีคนจำนวนมากไม่ชอบ PowerPoint