- Claude Artifacts là một tính năng cho phép tạo các ứng dụng trang đơn tương tác bằng HTML, CSS và JavaScript, xem kết quả ngay trong giao diện Claude và tiếp tục tinh chỉnh thêm
- Sau khi chuyển đổi lịch sử hoạt động gần đây của Claude sang SQLite để phân tích, tác giả phát hiện mình đã dùng Claude Artifacts trong tuần qua nhiều hơn dự đoán.
- Tính năng này được tác giả dùng như một công cụ hữu ích để tự giải quyết vấn đề hoặc tạo prototype.
[Các dự án được tạo bằng Claude Artifacts]
Tận dụng URL to Markdown with Jina Reader
- Phát triển một web UI gọi Jina Reader API để chuyển toàn bộ văn bản của trang web sang Markdown
- Nhập URL → tạo Markdown qua Jina Reader API → hiển thị Markdown và cung cấp nút "Copy"
- Giải quyết vấn đề khó copy/paste toàn bộ văn bản trang vào LLM trên Safari di động
Demo SQLite in WASM
- Từ một cuộc thảo luận trên Hacker News về bản build WASM của SQLite, tác giả phát hiện gói NPM
@sqlite.org/sqlite-wasm
- Tạo một demo tương tác đơn giản để kiểm tra xem nó có hoạt động hay không
Công cụ trích xuất URL
- Tác giả muốn trích xuất các URL được liên kết từ văn bản của một trang web
- Tạo một artifact có thể nhận nội dung dán rich-text HTML và dùng HTML parser để trích xuất liên kết
Trình xem clipboard
- Phát triển một công cụ debug dùng Clipboard API của trình duyệt để dán nhiều loại nội dung khác nhau và kiểm tra thông tin
- Có thể copy/paste văn bản thường, rich text, tệp, hình ảnh... và xem thông tin khả dụng trong trình duyệt
Pyodide REPL
- Phát hiện
https://cdn.jsdelivr.net/pyodide/ trong CSP header
- Điều này gợi ý rằng đội ngũ phát triển Anthropic đã cố ý cấu hình để Pyodide (Python biên dịch sang WebAssembly) có thể được tải trong artifact
- Tạo một demo đơn giản để chứng minh nó hoạt động
Trình mô phỏng thiết lập camera chụp ảnh
- Tác giả tò mò liệu có thể mô phỏng thiết lập camera bằng JavaScript hay không, nhưng có lỗi và kết quả không ấn tượng
- Phát hiện thư viện Fabric.js
Máy tính giá LLM
- Tạo một máy tính giá như một phần của thí nghiệm scraping video bằng Google Gemini
- Được làm vì tác giả không tin vào phép tính riêng của mình về mức giá rẻ của Gemini
Bộ chuyển đổi YAML sang JSON
- Tạo một công cụ nhập YAML và chuyển đổi sang JSON theo thời gian thực để ôn lại một số khía cạnh cụ thể của cú pháp YAML
OpenAI Audio
- Khám phá Audio API mới của OpenAI
- Phát triển một trang web yêu cầu quyền truy cập micro, ghi âm, mã hóa base64 rồi gửi tới OpenAI API
- Claude Artifacts không thể gửi yêu cầu API trực tiếp tới host bên ngoài, nhưng sau khi làm ra phiên bản chạy được thì có thể chuyển sang nơi host khác để hoàn thiện
Bộ giải mã QR code
- Trong một cuộc họp có slide chứa QR code, tác giả cần cách chuyển QR code thành URL thông thường
- Dùng Claude Artifacts để nhanh chóng phát triển một bộ giải mã QR code
Bộ chuyển đổi hình ảnh và trình tải trang xuống
- Trên Hacker News, có người nêu ý tưởng về một công cụ cho phép thả ảnh vào trang, nhúng chúng dưới dạng URL base64, rồi "Lưu dưới dạng HTML" để nhận được một trang độc lập có chứa gallery
- Đề xuất thêm tính năng "liên kết tải xuống" hữu ích trong trường hợp không thể "Lưu dưới dạng HTML" trên điện thoại di động, và tạo prototype cho nó
HTML Entity Escaper
- Tác giả cần escape HTML entity cho một đoạn văn bản trên điện thoại nên đã nhờ Claude tạo công cụ
text-wrap-balance-nav
- Lấy cảm hứng từ Terence Eden để thử nghiệm thuộc tính CSS
text-wrap: balance
- Nhờ Claude tạo một ví dụ nav bar có slider và checkbox
Bộ chuyển đổi bảng chữ cái phiên âm ARES
- Khi làm tình nguyện viên hỗ trợ vận hành liên lạc HAM radio, tác giả lo mình sẽ dùng sai bảng chữ cái phiên âm nên đã nhờ Claude tạo công cụ
[Ưu điểm và giới hạn của Claude Artifacts]
- Tác giả đang dùng artifact với tần suất rất cao, đến mức tạo ra 14 dự án chỉ trong một tuần
- Từ khi ra mắt ngày 20 tháng 6 đến nay, tác giả vẫn dùng liên tục và hiện tạo các artifact tương tác mới nhiều lần mỗi ngày
- Claude Artifacts hữu ích để thỏa mãn sự tò mò, làm prototype nhanh và giải quyết vấn đề
- Phần lớn công cụ có thể làm trong chưa đến 5 phút
- Ngay cả công cụ OpenAI Audio phức tạp hơn cũng chỉ mất tổng cộng 21 phút: 12 phút cho phiên bản đầu tiên và 9 phút cho lần lặp thứ hai
- Tuy nhiên, tác giả thất vọng với những giới hạn như gọi API, gửi form và liên kết tới trang bên ngoài
- Dựa trên những gì đã học được, tác giả đang lên kế hoạch tạo một giải pháp thay thế artifact của riêng mình
- Kết luận, tác giả khuyến nghị dùng artifact
- Nếu bạn chưa dùng artifact, tác giả hy vọng bài viết này sẽ giúp bạn hiểu lý do
- Với tác giả, artifact hiện là một trong những công cụ dựa trên LLM yêu thích nhất
1 bình luận
Ý kiến trên Hacker News
Có ý kiến cho rằng việc tích hợp công cụ vào codebase hiện có là khó. Có thể làm thành một trang độc lập, nhưng để tương thích với codebase hiện tại thì phải tốn rất nhiều thời gian cho việc rà soát và chỉnh sửa mã. Tự viết mã trực tiếp là lựa chọn tốt hơn.
Đã ngừng phát triển web từ đầu những năm 2000 và tập trung vào kinh doanh web, nhưng giờ rất vui vì lại có thể làm việc sáng tạo bằng LAMP. Ví dụ, có thể triển khai trang marketing mong muốn trong vòng chưa đến 20 phút.
Đang tìm các bài viết blog hoặc "thực tiễn tốt nhất" về cách tối ưu để sử dụng LLM cùng với codebase cục bộ. Hy vọng cộng đồng sẽ có những tài liệu đáng để giới thiệu.
Có ý kiến cho rằng thời đại hiện nay thật đáng kinh ngạc. Cuối tuần bắt đầu học Rust, và ChatGPT 4 đóng vai trò như một người thầy tuyệt vời hỗ trợ theo thời gian thực.
Anthropic đang tiến gần đến trạng thái một siêu ứng dụng kiểu như WeChat. Cần một cách để dễ dàng hiển thị các artifact đã đăng ở thanh bên. Vì Elon rất quan tâm đến mô hình này, nên nếu xAI có được các tính năng của Claude thì họ cũng sẽ đi theo hướng đó.
Mô hình mới mà Anthropic giới thiệu là nội dung được lưu trữ sẵn. Đầu ra của LLM được biến thành một ứng dụng tự lưu trữ mà người dùng có thể sử dụng. Điều này thực ra không khác nhiều so với việc xây dựng một trang web cá nhân.