Show HN: MarkdownDown เครื่องมือจัดระเบียบและแปลงหน้าเว็บเป็น Markdown

 (markdowndown.vercel.app)
3 คะแนน โดย GN⁺ 2024-04-15 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • MarkdownDown เป็นเครื่องมือที่เปลี่ยนหน้าเว็บใด ๆ ให้เป็นเอกสาร Markdown ที่สะอาดเรียบร้อย
  • รองรับการ ดาวน์โหลดรูปภาพ ในผลลัพธ์การแปลง ทำให้สามารถเชื่อมโยงรูปภาพที่บันทึกไว้ในเครื่องกับ Markdown ได้
  • ตัวเลือก ลบองค์ประกอบที่ไม่ใช่เนื้อหา ช่วยลดองค์ประกอบที่ไม่เกี่ยวข้องกับเนื้อหาหลักได้
  • มีตัวเลือกให้ใช้ GPT Filter กับผลลัพธ์ Markdown ด้วย
  • มีประโยชน์สำหรับผู้ใช้ที่ต้องการเก็บเนื้อหาหน้าเว็บเป็น Markdown หรือจัดระเบียบพร้อมรูปภาพไปด้วย

จัดระเบียบหน้าเว็บเป็น Markdown

  • MarkdownDown แปลงหน้าเว็บให้เป็น Markdown ที่สะอาดเรียบร้อย
  • ระหว่างการแปลง สามารถดาวน์โหลดรูปภาพและใส่ลิงก์รูปภาพในเครื่องลงในผลลัพธ์ได้

ตัวเลือกการแปลง

  • จัดระเบียบโดยเน้นเนื้อหาหลัก

    • ตัวเลือก Remove non-content elements ใช้ลบองค์ประกอบที่ไม่ใช่เนื้อหา

  • การจัดการรูปภาพ

    • ตัวเลือก Download images locally and link them ใช้บันทึกรูปภาพไว้ในเครื่องและเชื่อมโยงลิงก์

  • ใช้ GPT Filter

    • ตัวเลือก Apply GPT Filter on Markdown สามารถใช้ GPT Filter กับผลลัพธ์ Markdown ได้

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

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

 
GN⁺ 2024-04-15
ความคิดเห็นใน Hacker News

  • การแปลงเว็บไซต์เป็น Markdown มีปัญหาที่แตกต่างกันอยู่สามอย่าง: การดึงเนื้อหาของหน้าให้ครบถ้วน, การตัดโฆษณาและเนื้อหาเสริมออก, และการได้เลย์เอาต์กับรูปแบบของแต่ละส่วนที่ถูกต้อง
    สำหรับ การสกัดเนื้อหาอย่างแม่นยำ และการจัดรูปแบบ โซลูชันที่ใช้ Trafilatura, Newspaper4k, python-readability ทำงานได้ดีที่สุดในค่าเริ่มต้น ส่วนการเก็บให้ครบถ้วนเหมาะกับการใช้บริการ scraping ร่วมกับ Selenium
    อยากรู้ว่าเครื่องมือนี้ทำอะไรต่างออกไปหรือดีกว่าอย่างไร วงการนี้หยุดนิ่งมาสักพักแล้ว เลยอยากฟังสิ่งที่ได้เรียนรู้

    • โดยเฉพาะในสภาพแวดล้อมที่ไม่มีหรือไม่อยากใช้ JavaScript runtime การ scraping ให้ทั่วถึง เป็นเรื่องยาก
      ในการสกัดเนื้อหา วิธีของไลบรารี Postlight ค่อนข้างเรียบร้อยดี คือให้คะแนนแต่ละ HTML node ด้วย heuristic เช่น ความยาวข้อความ ความหนาแน่นของลิงก์ และ CSS class แล้วเลือก node ที่ได้คะแนนสูงสุด เคยลองพอร์ตเป็น Swift ตอนทำแอปอ่านทีหลังส่วนตัว
      https://github.com/postlight/parser
    • เว็บสแครปเปอร์บทความของผมตอนนี้ย้ายไปใช้ Playwright กับตัวบล็อกโฆษณา จากนั้นรัน readability ของ Mozilla บนหน้านั้น แล้วให้ LLM ตรวจผลลัพธ์
      ถ้าตรวจไม่ผ่าน ก็จะตัดบริบท HTML ของทั้งหน้าออกมา แปลงเป็น Markdown ด้วย Pandoc แล้วให้ LLM สกัดเนื้อหาหลักจาก Markdown อีกที

  • ใช้ Vercel เหรอ ถ้าทราฟฟิกถาโถมเข้ามาก็คงต้องระวังบิลแล้วล่ะ หวังว่าจะไม่ได้ใช้งานตามแบบที่ Vercel คอยกระตุ้นให้ใช้ต่อไปเรื่อย ๆ

    • น่าขมขื่นนิด ๆ ที่เอกสารทั้งหลายชวนให้ใช้แบบนั้น ทั้งที่บางครั้งแค่ WebP อย่างเดียวก็พอแล้ว
      ตามมีมรถบัสเป๊ะ ๆ ฝั่งที่มีความสุขคือผู้ใช้กับ Vercel ส่วนฝั่งที่เศร้าคือกระเป๋าสตางค์
      แน่นอนว่ามีข้อยกเว้นถ้าจำเป็นต้องสเกลขึ้นลงแบบไดนามิก
    • เอาเข้าจริงก็รับไหวค่อนข้างดี และค่าใช้จ่ายก็เล็กน้อยจนแทบมองข้ามได้
      ไม่ได้ทำอะไรพิเศษเพื่อรับ ทราฟฟิกจาก HN เลย เป็นแค่แอป Next.js พื้นฐาน

  • การมีดาวน์โหลดรูปภาพและการกรองด้วย GPT เป็นไอเดียที่ดี
    ปีที่แล้วผมทำเครื่องมือคล้าย ๆ กัน แต่ไม่มีฟีเจอร์พวกนั้น: https://url2text.com/
    UI อาจช้า แต่ดูตัวอย่างผลลัพธ์ได้จากหน้าแรก
    API พื้นฐานคือ API จับภาพหน้าจอเว็บไซต์ของ Urlbox ซึ่งถ้าใช้โดยตรงจะมีประสิทธิภาพดีกว่ามาก สามารถขอ Markdown พร้อม HTML ที่เรนเดอร์ด้วย JavaScript, metadata และ screenshot ได้ในครั้งเดียว: https://urlbox.com/extracting-text
    ยังสามารถบันทึกผลลัพธ์ลง storage ที่เข้ากันได้กับ S3 ได้โดยตรงด้วย: https://urlbox.com/s3
    หรือจะรับผ่าน webhook ก็ได้: https://urlbox.com/webhooks
    ใน side project ผมใช้ฟีเจอร์ Markdown ของ Urlbox เรนเดอร์เกินเดือนละ 1 ล้านครั้งอยู่ และ Markdown แบบนี้เหมาะกับการใช้ทำ embedding และ prompt มากกว่า
    ถ้าจะ scrape ทั้งเว็บไซต์ด้วยวิธีนี้ เครื่องมือใหม่ของ dctanner ก็น่าดู: https://usescraper.com/

    • เป็นผู้ก่อตั้ง https://usescraper.com ตอนนี้มีตัวเลือก scraping URL เดี่ยว แล้วด้วย: https://docs.usescraper.com/api-reference/scraper/scrape
      ราคา $0.001 ต่อหน้า และใช้เบราว์เซอร์ headless Chrome ผลลัพธ์เร็ว และจ่ายเท่าที่ใช้เท่านั้น
    • ดูไม่เลว แต่ url2text ดูเหมือนจะไม่มี API และ urlbox ดูเหมือนจะไม่มี ตัวเลือกข้าม screenshot เมื่ออยากได้แค่ข้อความ
      ถ้าต้องการแค่ข้อความก็ดูค่อนข้างแพง

  • ถ้าเว็บไซต์แสดงข้อความคุกกี้ เครื่องมือนี้ดูเหมือนจะติดอยู่ตรงนั้นและ parse เนื้อหาจริงไม่ได้
    ตัวอย่างเช่น ลองใส่ https://www.cnbc.com/ แล้วได้ Markdown ที่มีแค่ข้อความคุกกี้กับถ้อยคำทางกฎหมายรอบ ๆ นั้น

    • การหลบเลี่ยงเรื่องแบบนั้นไม่ง่าย แต่ทำให้ทำงานประมาณนี้ได้: https://url2text.com/u/wYVake
      โชคดีที่สร้างบน API ที่ mature ซึ่งจัดการ edge case จำนวนมากจากการเรนเดอร์หน้าหลายประเภทไว้แล้ว

  • แค่ใช้ htmltidy กับการแปลง HTML→Markdown ของ Pandoc ก็ใช้ได้ดีพอสมควรแล้ว
    http://www.html-tidy.org/
    https://pandoc.org/

    • เพิ่งเคยได้ยิน tidy ครั้งแรก ดูมีแววดี
      ทั้งดึงดูดใจและน่ากลัวที่จะลองเอา HTML template สุดท้ายทั้งหมดไปรันผ่านมัน เพื่อหาส่วนโครงสร้างผิด ๆ ที่ยังเหลืออยู่ ขึ้นอยู่กับว่าผลการแก้ไขมีโครงสร้างแค่ไหน อาจทำเป็น test suite ได้ด้วย

  • ผมก็ทำ smort.io ที่คล้ายกันมากไว้เหมือนกัน แค่เติม smort.io/ ไว้หน้า URL ของบทความใด ๆ ก็จะแก้ไข ใส่หมายเหตุ และแชร์ได้ง่าย
    ใช้กับบทความ ArXiv ได้ด้วย
    โพสต์ Show HN ของ Smort อยู่ที่นี่: https://news.ycombinator.com/item?id=30673502

    • โปรเจกต์ล่าสุดของ jina AI เป็นโคลนของไอเดียนี้หรือเปล่า?
      https://jina.ai/reader/

  • ลองใช้กับหน้า marketing ที่ซับซ้อนแล้วจัดการได้ดีมาก
    ถ้าแชร์ได้ อยากรู้ว่าโหลดบน host หนักแค่ไหน อยากรู้ว่ายังรันฟรีต่อไปได้หรือไม่ หรือสุดท้ายแล้วต้นทุนจะไม่คุ้ม

    • เพราะต้องเปิด headless Chrome instance ก็เลยค่อนข้างหนักนิดหน่อย ส่วนนี้ตั้งใจจะดูเรื่องการปรับแต่งต่อไป
      นอกนั้น GPT-4 แพง แต่จนถึงตอนนี้ค่าใช้จ่ายยังเล็กน้อยจนแทบมองข้ามได้ เลยคาดหวังอยู่ น่าจะคงไว้ได้นาน

  • นี่เป็นหนึ่งในกรณีที่ไม่จำเป็นต้องใช้ AI มีอัลกอริทึมที่ทำงานได้ดีมากสำหรับดึงเนื้อหาออกจากหน้าเว็บ และหนึ่งใน implementation คือ https://github.com/buriy/python-readability

    • เมื่อหลายปีก่อนตอนเปรียบเทียบ เครื่องมือลบ boilerplate ผมจำได้ว่า jusText ให้ผลลัพธ์ดีที่สุดในค่าเริ่มต้น
      เคยลองใช้ readability กับไลบรารีอื่น ๆ อีกบางตัวด้วย สงสัยว่ามาตรฐานล่าสุดทุกวันนี้เป็นอย่างไร
    • ในที่นี้ AI เป็นตัวเลือกเสริม ใช้ readability เพื่อจัดระเบียบ HTML ก่อนแปลงเป็น Markdown
    • ครั้งล่าสุดที่ลองใช้ readability มันทำงานได้ดีกับบทความ แต่ลำบากกับหน้าเว็บประเภทอื่น ๆ
      มันตัดเนื้อหาออกไปมากกว่าที่ต้องการมาก
    • สงสัยว่าที่นี่จะทำงานแบบเดียวกันโดยใช้แค่เครื่องมือนั้นและไม่ใช้ AI ได้อย่างไร
    • พูดตามตรง ผมคาดว่าส่วนใหญ่คงเป็นเวทมนตร์ดำ แต่แก่นของโปรเจกต์ดูเหมือน ชุด regex ที่น่าจะสะสมขึ้นมาด้วยความยากลำบาก เจ๋งดี

  • Pandoc (https://pandoc.org/) ซึ่งยอดเยี่ยมเสมอ ทำงานแบบนี้ได้ดีมาก จริง ๆ แล้วมันรองรับรูปแบบเอกสารอื่นแทบทั้งหมดด้วย

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

  • เจ๋งดี อยากให้มี ส่วนขยายเบราว์เซอร์ ที่เอาสิ่งนี้ไปใช้กับทุกหน้าที่ผมอ่าน แล้วบันทึกไว้ที่ไหนสักแห่ง

    • Singlefile สำหรับ Firefox: https://addons.mozilla.org/en-US/firefox/addon/single-file/
    • ตัวเลือกที่ผมใช้แบบ manual คือ Markdown clipper
      https://github.com/deathau/markdown-clipper
      น่าจะมีส่วนขยายทางเลือกคล้าย ๆ กันอยู่เป็นสิบตัว
    • ชุด Wallabag + Obsidian + Wallabag Browser Ext ใช้ดี แม้จะต้องกดเอง แต่ยอดเยี่ยม
    • Omnivore ใช้เว็บอาร์ไคฟ์เพื่อเก็บสำเนาไว้
      https://omnivore.app/
    • แอปอย่าง Pocket, Readwise Reader, Matter น่าจะอธิบายสิ่งนั้นได้อยู่แล้วไม่ใช่หรือ
      แก้ไข: อ่านเร็วไปหน่อย พลาดส่วนที่ว่าจัดการแบบอัตโนมัติและเป็นระบบ