Defuddle - โอเพนซอร์ส HTML-to-Markdown ที่มาแทน Readability

• เป็นเครื่องมือที่ลบ องค์ประกอบที่ไม่จำเป็น (คอมเมนต์, แถบด้านข้าง, ส่วนหัว, ส่วนท้าย ฯลฯ) ออกจากหน้าเว็บเพื่อให้เหลือเฉพาะเนื้อหาหลัก
• ต่างจาก Mozilla Readability ตรงที่ทำงานได้ยืดหยุ่นกว่า และรองรับการทำ HTML ให้เป็นมาตรฐานอย่างสม่ำเสมอสำหรับ สูตรคณิตศาสตร์, โค้ดบล็อก, เชิงอรรถ ฯลฯ
• พัฒนามาเพื่อ Obsidian Web Clipper และมุ่งให้เข้ากันได้กับเครื่องมือแปลง HTML-to-Markdown อื่น ๆ (เช่น Turndown)
• มีฟีเจอร์ดึงเมตาดาต้าหลากหลายแบบในตัว เช่น สไตล์สำหรับมือถือ และข้อมูล schema.org
• รองรับทั้ง Node.js และเบราว์เซอร์ และสามารถเลือกใช้ บันเดิลได้หลายแบบตามวัตถุประสงค์

จุดแตกต่างระหว่าง Defuddle กับ Readability

• ใช้การกรองที่ผ่อนปรนกว่า จึง ลดการลบองค์ประกอบที่ยังไม่แน่ชัด
• จัดการ พื้นที่พิเศษ อย่างเชิงอรรถ สูตรคณิตศาสตร์ และโค้ด ได้อย่างสม่ำเสมอ
• อ้างอิง สไตล์ชีตสำหรับมือถือ ของหน้าเว็บ
• สามารถดึง ข้อมูลเพิ่มเติม เช่น เมตาดาต้า schema.org, รูปภาพ, favicon, วันที่เผยแพร่ เป็นต้น

องค์ประกอบของบันเดิล

• Core bundle (defuddle): เหมาะกับการใช้งานบนเบราว์เซอร์, ไม่มี dependency ภายนอก
• Full bundle (defuddle/full): มีฟีเจอร์เพิ่มเติม เช่น การ parse สูตรคณิตศาสตร์
• Node bundle (defuddle/node): ปรับแต่งมาสำหรับสภาพแวดล้อม Node.js (JSDOM), รองรับสูตรคณิตศาสตร์และการแปลง Markdown อย่างครบถ้วน

โครงสร้างของอ็อบเจ็กต์ที่ส่งกลับ

Defuddle จะส่งกลับอ็อบเจ็กต์ที่มีข้อมูลดังต่อไปนี้

• author: ชื่อผู้เขียน ของบทความหรือหน้าเว็บ
• content: สตริงของ เนื้อหาหลักที่ผ่านการจัดระเบียบแล้ว
• description: คำอธิบายสรุปของบทความหรือหน้าเว็บ
• domain: ชื่อโดเมน ของเว็บไซต์
• favicon: URL ของ favicon ประจำเว็บไซต์
• image: URL ของรูปภาพหลัก
• metaTags: ข้อมูล meta tag
• parseTime: เวลาที่ใช้ประมวลผล (หน่วยมิลลิวินาที)
• published: ข้อมูลวันที่เผยแพร่
• site: ชื่อเว็บไซต์
• schemaOrgData: ข้อมูลที่ดึงจาก schema.org
• title: ชื่อเรื่อง ของคอนเทนต์
• wordCount: จำนวนคำของเนื้อหาหลัก

ตัวเลือก

• debug: เปิดใช้งาน logging สำหรับดีบัก
• url: ระบุ URL ของหน้าเป้าหมายที่จะวิเคราะห์
• markdown: แปลงเนื้อหาหลักเป็น Markdown
• separateMarkdown: ส่งกลับทั้ง HTML และ Markdown พร้อมกัน
• removeExactSelectors: ตัวเลือกสำหรับ ลบ selector ที่ตรงกันแบบ exact (โฆษณา, ปุ่มโซเชียล ฯลฯ) (ค่าเริ่มต้น true)
• removePartialSelectors: ตัวเลือกสำหรับ ลบ selector ที่ตรงกันบางส่วน (เช่น โฆษณาที่คล้ายกัน) (ค่าเริ่มต้น true)

[GN⁺]

ความคิดเห็นใน Hacker News

• ฉันไม่ค่อยชอบวิธีที่ตัวแก้ไข wysiwyg ที่ใช้อยู่แปลงจาก markdown เป็น HTML เลยคิดว่าถ้าลองทำทูลบาร์กับเอดิเตอร์ขึ้นมาเองแล้วนำเครื่องมือนี้ไปใช้ ก็น่าจะได้ผลลัพธ์ที่ดีกว่า

• เมื่อไม่นานมานี้เคยลองศึกษาเรื่องคล้ายกัน และไม่ค่อยมั่นใจในคุณภาพของ Readability ที่มีการพอร์ตไปหลายภาษา Readability.js ดีที่สุด แต่สภาพแวดล้อม Javascript ไม่เหมาะกับโปรเจกต์ของฉัน สุดท้ายเลยเลือกใช้ไลบรารี Trafilatura ของ Python สำหรับดึงคอนเทนต์คุณภาพสูงพร้อมเมตาดาต้าได้อย่างแม่นยำ น่าจะลองเอา implementation ของฉันไปเทียบกับ Trafilatura เพื่อหาจุดที่ควรปรับปรุงได้

  • ถ้าใช้ภาษา Go ก็มีทั้ง Readability สำหรับ Go และพอร์ตของ Trafilatura ที่ฉันดูแลอยู่ เวอร์ชัน Go ของ Trafilatura ให้ประสิทธิภาพใกล้เคียงกับเวอร์ชัน Python ลิงก์อ้างอิง: go-shiori/go-readability, markusmobius/go-trafilatura
  • ดูเอกสารทางการของ Trafilatura ได้ที่นี่ อนึ่ง Trafilatura ในภาษาอิตาลีหมายถึง "การอัดรีด" โดยชื่อนี้มาจากคุณสมบัติที่มักกะโรนีเกาะซอสได้ดี พร้อมเกร็ดเบื้องหลังคำศัพท์เกี่ยวกับ pasta ที่น่าสนใจ (และมีคนทักว่าคำที่ถูกต้องคือ trafilatura ไม่ใช่ trifatura)

• ฉันใช้ Obsidian Clipper มาตั้งแต่ช่วงเปิดตัว และชื่นชอบฟีเจอร์ดึงข้อมูลตามโปรไฟล์รายเว็บไซต์เป็นพิเศษ ต่อให้ไม่ใช่ผู้ใช้ Obsidian ก็ตาม คุณภาพการดึง markdown ก็ยังน่าเชื่อถือที่สุดเท่าที่ฉันเคยเห็นมา

  • ขอบคุณสำหรับคำแนะนำดีๆ

• ในช่วงที่เว็บไซต์สมัยนี้ซับซ้อนและรกรุงรังขึ้นเรื่อยๆ ฉันคิดว่าเราจำเป็นต้องมี markdown converter ที่ robust เพื่อช่วยให้ผู้อ่านโฟกัสกับเนื้อหาจริงๆ ดีใจที่มีโปรเจกต์เข้ามาเติมช่องว่างที่ Readability ทิ้งไว้ และขอเป็นกำลังใจให้

• ฉันทึ่งกับคุณภาพการแปลงเป็น markdown ของ Obsidian Web-clipper มาก จนไปไล่วิเคราะห์ซอร์สโค้ดแล้วพบ Defuddle เข้า ตอนนี้ตั้งใจจะนำไปใช้กับแอป read-it-later/knowledge-base ที่กำลังพัฒนาอยู่ เลยอยากขอบคุณล่วงหน้า

• สงสัยว่า Readability ของ Mozilla ถูกปล่อยทิ้งจริงหรือไม่ เพราะรีลีสล่าสุดก็เพิ่งเมื่อ 2 เดือนก่อน และ Gijs ผู้ดูแลก็ตอบ issue อย่างแข็งขันมาก

  • โค้ดเบสนี้ยังมีจุดที่ควรปรับปรุงอีกเยอะ ฉันเคยฟอร์กมันมาเพื่อแก้บั๊กในงาน ตัวอย่างเช่นมีบั๊กที่ทำให้ข้อมูลราคาในหน้าที่มีภาษาซึ่งใช้เครื่องหมายจุลภาคคั่นตัวเลข เช่น ภาษาดัตช์ ถูกมองว่าเป็นข้อความสำคัญทั้งหมด พอจะส่ง PR ก็ต้องให้เทสต์ผ่านก่อน แต่เทสต์กลับล้มเหลวกับหน้าที่ฉันทดลองอยู่ ทำให้เจอความไม่มีประสิทธิภาพจน merge ได้ยาก

• ขอแนะนำโปรเจกต์คล้ายกันที่พัฒนาด้วย PHP คือ markydown มีข้อดีตรงที่ self-host ได้ง่าย

• Obsidian Web Clipper เป็นเครื่องมือที่มีประโยชน์มากสำหรับแปลงบทสนทนา chatGPT เป็น markdown หรือใช้แบบง่ายๆ เพื่อการพิมพ์

  • ไคลเอนต์บางตัว เช่น Kagi Assistant มีฟีเจอร์บันทึกบทสนทนาเป็น markdown ได้โดยตรง และการใช้ web-clipper ของ Obsidian ก็เป็นไอเดียที่ดี
  • ฉันมักขอให้ chatGPT สรุปหรือจัดสิ่งที่ต้องการออกมาเป็นไฟล์ markdown โดยตรงแล้วนำไปใช้

• สงสัยว่าทำไมบางเว็บไซต์เวลาเข้าอ่านผ่านโหมดอ่าน (เช่น iPhone Reader) หน้าจอถึงขึ้นขาวโพลนหรือมองไม่เห็นบทความตามปกติ โดยเฉพาะเว็บข่าวที่เจอบ่อย อยากรู้ว่าเป็นเพราะจงใจซ่อนเพื่อให้เห็นโฆษณาหรือเปล่า และถ้าใช่ทำได้อย่างไร

  • ปัญหานี้มักเกิดจากแบนเนอร์ความเป็นส่วนตัวหรือการแจ้งเตือนคุกกี้ โดยเฉพาะใน EU/UK/แคลิฟอร์เนีย เป็นต้น บางเว็บไซต์แสดงแบนเนอร์เหล่านี้เป็นโมดัลอย่างเดียว ซึ่งโหมดอ่านยังพอจัดการได้ แต่บางแห่งใช้การรีไดเร็กต์หรือ server-side rendering เพื่อบังเนื้อหาไปเลย ถ้าจะใช้โหมดอ่าน แนะนำให้ปิดแบนเนอร์ที่เกี่ยวข้องก่อนแล้วค่อยลองใหม่