ทุกสิ่งที่สร้างด้วย Claude Artifacts ในสัปดาห์นี้

 (simonwillison.net)
18 คะแนน โดย GN⁺ 2024-10-24 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Claude Artifacts เป็นฟีเจอร์ที่ใช้ HTML, CSS และ JavaScript เพื่อสร้างแอปหน้าเดียวแบบอินเทอร์แอกทีฟ สามารถดูผลลัพธ์ภายในอินเทอร์เฟซของ Claude และปรับปรุงต่อได้
    • เมื่อแปลงประวัติการใช้งาน Claude ล่าสุดเป็น SQLite เพื่อนำมาวิเคราะห์ ก็พบว่าในสัปดาห์ที่ผ่านมาได้ใช้ Claude Artifacts มากกว่าที่คาดไว้
    • ฟีเจอร์นี้ถูกนำมาใช้เป็นเครื่องมือที่มีประโยชน์สำหรับการแก้ปัญหาด้วยตัวเองหรือสร้างต้นแบบ

[โปรเจ็กต์ที่สร้างด้วย Claude Artifacts]

ใช้ URL to Markdown กับ Jina Reader

  • พัฒนาเว็บ UI ที่เรียก Jina Reader API เพื่อแปลงข้อความทั้งหน้าของเว็บเพจเป็นมาร์กดาวน์
  • ป้อน URL → สร้างมาร์กดาวน์ผ่าน Jina Reader API → แสดงผลมาร์กดาวน์และมีปุ่ม "Copy"
  • แก้ปัญหาที่บน Safari มือถือคัดลอก/วางข้อความทั้งหน้าลงใน LLM ได้ยาก

เดโม SQLite in WASM

  • จากบทสนทนาบน Hacker News เกี่ยวกับ WASM build ของ SQLite ทำให้ค้นพบแพ็กเกจ NPM @sqlite.org/sqlite-wasm
  • พัฒนาเดโมแบบอินเทอร์แอกทีฟอย่างง่ายเพื่อตรวจสอบว่ามันทำงานได้หรือไม่

เครื่องมือดึง URL

  • ต้องการดึง URL ที่ลิงก์อยู่ในข้อความของเว็บเพจ
  • สร้างอาร์ติแฟกต์ที่รับการวาง rich-text HTML และใช้ HTML parser เพื่อดึงลิงก์ออกมา

ตัวดูคลิปบอร์ด

  • พัฒนาเครื่องมือดีบักที่ใช้ Clipboard API ของเบราว์เซอร์ เพื่อวางคอนเทนต์หลายประเภทและตรวจสอบข้อมูล
  • คัดลอก/วาง plain text, rich text, ไฟล์, รูปภาพ ฯลฯ และดูข้อมูลที่เบราว์เซอร์เข้าถึงได้

Pyodide REPL

  • พบ https://cdn.jsdelivr.net/pyodide/ ใน CSP header
  • เป็นนัยว่าทีมพัฒนา Anthropic ตั้งค่าไว้โดยเจตนาเพื่อให้ Pyodide (Python compiled to WebAssembly) โหลดได้ในอาร์ติแฟกต์
  • พัฒนาเดโมอย่างง่ายเพื่อพิสูจน์ว่ามันทำงานได้จริง

เครื่องจำลองการตั้งค่ากล้องถ่ายภาพ

  • สงสัยว่าจะจำลองการตั้งค่ากล้องด้วย JavaScript ได้หรือไม่ แต่มีบั๊กและผลลัพธ์ก็ไม่น่าประทับใจ
  • พบไลบรารี Fabric.js

เครื่องคำนวณราคา LLM

  • พัฒนาเครื่องคำนวณราคาเป็นส่วนหนึ่งของการทดลองสแครปวิดีโอด้วย Google Gemini
  • สร้างขึ้นเพราะไม่มั่นใจการคำนวณของตัวเองเกี่ยวกับราคาที่ถูกของ Gemini

ตัวแปลง YAML เป็น JSON

  • พัฒนาเครื่องมือที่เมื่อป้อน YAML แล้วจะแปลงเป็น JSON แบบเรียลไทม์ เพื่อช่วยทบทวนบางแง่มุมของไวยากรณ์ YAML

OpenAI Audio

  • สำรวจ Audio API ใหม่ของ OpenAI
  • พัฒนาเว็บเพจที่ขอสิทธิ์เข้าถึงไมโครโฟน บันทึกเสียง เข้ารหัสเป็น base64 แล้วส่งไปยัง OpenAI API
  • Claude Artifacts ไม่สามารถส่ง API request ไปยังโฮสต์ภายนอกได้โดยตรง แต่สามารถพัฒนาเวอร์ชันที่ใช้งานได้ก่อน แล้วค่อยย้ายไปโฮสต์อื่นเพื่อทำให้เสร็จสมบูรณ์

ตัวถอดรหัส QR code

  • ระหว่างเข้าประชุมที่มีสไลด์ซึ่งมี QR code จำเป็นต้องมีวิธีแปลง QR code ให้เป็น URL ปกติ
  • ใช้ Claude Artifacts พัฒนาตัวถอดรหัส QR code ได้อย่างรวดเร็ว

ตัวแปลงภาพและตัวดาวน์โหลดหน้าเว็บ

  • มีคนบน Hacker News เสนอไอเดียเครื่องมือที่เมื่อเอารูปมาวางลงบนหน้า ก็จะฝังเป็น base64 URL และเมื่อ "บันทึกเป็น HTML" จะได้หน้าแบบ standalone ที่มีแกลเลอรีรวมอยู่ด้วย
  • เสนอเพิ่มฟีเจอร์ "ลิงก์ดาวน์โหลด" ที่มีประโยชน์เมื่อบนมือถือไม่สามารถ "บันทึกเป็น HTML" ได้ และพัฒนาต้นแบบขึ้นมา

HTML Entity Escaper

  • ต้องการ escape HTML entity ของข้อความบางช่วงบนมือถือ จึงขอให้ Claude สร้างเครื่องมือนี้

text-wrap-balance-nav

  • ได้แรงบันดาลใจจาก Terence Eden ให้ทดลองคุณสมบัติ CSS text-wrap: balance
  • ขอให้ Claude สร้างตัวอย่าง nav bar ที่มี slider และ checkbox

ตัวแปลงอักษรสัทศาสตร์ ARES

  • ระหว่างเป็นอาสาสมัครสนับสนุนงานวิทยุ HAM กังวลว่าจะใช้ phonetic alphabet ผิดพลาด จึงขอให้ Claude สร้างเครื่องมือนี้

[ข้อดีและข้อจำกัดของ Claude Artifacts]

  • ผู้เขียนใช้อาร์ติแฟกต์อย่างหนักถึงขั้นสร้างโปรเจ็กต์ 14 ชิ้นในเวลาเพียงหนึ่งสัปดาห์
  • ใช้มาต่อเนื่องตั้งแต่เปิดตัวเมื่อวันที่ 20 มิถุนายน และตอนนี้สร้างอาร์ติแฟกต์แบบอินเทอร์แอกทีฟใหม่หลายครั้งต่อวัน
  • Claude Artifacts มีประโยชน์ในการตอบสนองความอยากรู้อยากเห็น การทำต้นแบบอย่างรวดเร็ว และเป็นเครื่องมือแก้ปัญหา
  • เครื่องมือส่วนใหญ่สร้างเสร็จได้ภายใน 5 นาที
  • แม้แต่เครื่องมือ OpenAI Audio ที่ซับซ้อนกว่าก็ใช้เวลาเพียง 12 นาทีสำหรับเวอร์ชันแรก และ 9 นาทีสำหรับการปรับรอบที่สอง รวมทั้งหมดแค่ 21 นาที
  • อย่างไรก็ตาม ยังผิดหวังกับข้อจำกัดของฟังก์ชันอย่างการเรียก API, การส่งฟอร์ม, การลิงก์ไปยังหน้าภายนอก เป็นต้น
  • จากสิ่งที่ได้เรียนรู้ มีแผนจะสร้างทางเลือกของอาร์ติแฟกต์ขึ้นมาเอง
  • สรุปแล้ว แนะนำให้ใช้ Artifacts
    • หากคุณยังไม่ได้ใช้ หวังว่าบทความนี้จะช่วยให้เข้าใจเหตุผล
    • สำหรับผู้เขียน Artifacts เป็นหนึ่งในเครื่องมือที่ขับเคลื่อนด้วย LLM ที่ชื่นชอบที่สุดในตอนนี้

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

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

 
GN⁺ 2024-10-24
ความคิดเห็นจาก Hacker News

  • มีความเห็นว่าการผสานเครื่องมือเข้ากับโค้ดเบสที่มีอยู่นั้นยาก แม้จะทำเป็นหน้าแยกอิสระได้ แต่ต้องใช้เวลามากในการรีวิวและแก้ไขโค้ดให้เข้ากันได้กับโค้ดเบสเดิม การเขียนโค้ดเองโดยตรงจึงเป็นทางเลือกที่ดีกว่า

    • น่าสนใจที่จากยุคที่เคยคิดว่าคอมพิวเตอร์ไม่มีทางเขียนโค้ดที่มีความหมายได้ด้วยตัวเอง ตอนนี้กลับกลายเป็นเรื่องธรรมดาไปแล้ว
    • Sonnet เวอร์ชันใหม่เก่งมากในการเขียนโค้ด แต่ก็มักชนข้อจำกัดขนาดเอาต์พุตในแอป Claude บ่อย ๆ หวังว่าจะมีการปรับปรุงข้อจำกัดด้านเอาต์พุต

  • เคยหยุดทำเว็บดีเวลอปเมนต์ตั้งแต่ช่วงต้นยุค 2000 แล้วไปโฟกัสกับธุรกิจบนเว็บ แต่ตอนนี้ดีใจที่สามารถใช้ LAMP ทำงานสร้างสรรค์ได้อีกครั้ง เช่น สามารถดีพลอยเว็บไซต์การตลาดที่ต้องการได้ภายใน 20 นาที

  • กำลังมองหาโพสต์บล็อกหรือ "แนวทางปฏิบัติที่ดีที่สุด" เกี่ยวกับวิธีใช้ LLM ร่วมกับโค้ดเบสในเครื่องให้ได้ผลที่สุด และคาดหวังว่าน่าจะมีแหล่งข้อมูลที่ชุมชนแนะนำได้

  • มีความเห็นว่ายุคนี้น่าทึ่งมาก เพิ่งเริ่มเรียน Rust ในช่วงสุดสัปดาห์ และ ChatGPT 4 ก็ทำหน้าที่เป็นครูที่ยอดเยี่ยมคอยช่วยแบบเรียลไทม์

  • Anthropic กำลังเข้าใกล้สถานะซูเปอร์แอปแบบ WeChat มากขึ้นเรื่อย ๆ จำเป็นต้องมีวิธีที่ทำให้แสดงอาร์ติแฟกต์ที่เผยแพร่แล้วไว้ในแถบด้านข้างได้ง่าย เนื่องจาก Elon สนใจโมเดลนี้มาก หาก xAI มีความสามารถแบบ Claude ก็น่าจะมุ่งหน้าไปในทิศทางนั้น

  • กระบวนทัศน์ใหม่ที่ Anthropic นำเสนอคือการที่คอนเทนต์ถูกโฮสต์ไว้ เอาต์พุตของ LLM ถูกทำให้เป็นแอปที่โฮสต์ได้เองซึ่งผู้ใช้สามารถนำไปใช้งานได้ ซึ่งก็ไม่ได้ต่างจากการสร้างเว็บไซต์ส่วนตัวมากนัก.