- Tổng hợp các mẫu thiết kế lặp lại dựa trên kinh nghiệm xây dựng HTML tools chạy bằng cách gói HTML·JavaScript·CSS trong một tệp duy nhất
- Giải thích bằng các ví dụ cụ thể cách hơn 150 công cụ nhỏ được tạo ra và duy trì trong thực tế suốt 2 năm qua
- Cấu trúc không cần bước build và tận dụng CDN giúp tự nhiên hình thành quy trình phát triển dựa trên sao chép và dán
- Mở rộng phạm vi có thể làm chỉ với tính năng của trình duyệt, từ URL·localStorage·mở tệp·tải xuống cho tới Pyodide·WebAssembly
- Việc lưu lại prompt và kết quả, cùng tái tổ hợp các công cụ sẵn có, càng củng cố dòng chảy nơi chính bộ sưu tập công cụ trở thành nền tảng phát triển
Khái niệm và ví dụ về HTML tools
Cấu trúc cơ bản của HTML tool
- Cấu thành bởi một tệp HTML duy nhất có chứa JavaScript và CSS inline
- Không dùng React cần build JSX nên việc sao chép và tái phân phối trở nên đơn giản
- Các thư viện cần thiết được tải trực tiếp từ CDN như CDNjs hoặc jsDelivr, đồng thời giữ phụ thuộc ở mức tối thiểu
- Giữ quy mô mã ở mức vài trăm dòng để giảm gánh nặng bảo trì và duy trì trạng thái mà LLM có thể nhanh chóng đọc hiểu và chỉnh sửa
Tạo nguyên mẫu bằng Canvas·Artifacts
- Cách dùng ChatGPT Canvas, Claude Artifacts, Gemini Canvas để chạy ngay HTML tool và định hình phiên bản ban đầu
- Thêm điều kiện “No React” để sinh mã có thể chạy ngay mà không cần bước build
- Ví dụ chuyển JSON được dán vào thành YAML
Khi phức tạp hơn thì chuyển sang coding agent
- Dùng Claude Code hoặc Codex CLI thì có thể tự động hóa công việc lặp, bao gồm cả kiểm thử trình duyệt bằng Playwright
- Với công cụ phức tạp hơn, chẳng hạn trình xem chuỗi thảo luận Bluesky, tác giả dùng cách “nâng cấp” sang các agent này
- Tạo PR trực tiếp vào repo simonw/tools để thêm hoặc cập nhật công cụ
- Có thể xem quy trình làm việc với agent trên web tại video sử dụng Claude Code for web
Quản lý phụ thuộc dựa trên CDN
- Khi cần dùng thư viện bổ sung thì tải từ CDN
- Do Artifacts/Canvas của LLM có danh sách CDN allow-list, các chỉ thị như “dùng PDF.js” sẽ dẫn tới việc cấu hình URL tương ứng
- Khi cần, tác giả tìm URL trên cdnjs·jsDelivr rồi dán vào cuộc trò chuyện
- Công cụ vận hành chỉ với một tệp HTML, không cần cài npm hay quy trình build
- npm + bước build làm giảm năng suất khi muốn hack nhanh từng công cụ riêng lẻ và self-host
- URL CDN có chứa phiên bản nên giữ được khả năng tái hiện trong thời gian dài
Static hosting bên ngoài
- Hosting nội bộ trong các nền tảng LLM thường có nhiều hạn chế sandbox, nên đôi khi bị chặn tải dữ liệu/hình ảnh từ URL bên ngoài hoặc chức năng liên kết ra ngoài
- Về trải nghiệm người dùng, còn có thể phát sinh vấn đề như cảnh báo, tải thêm, hoặc quảng bá nền tảng chen vào
- Tổ hợp “No React + CDN” giúp dễ triển khai ở bất kỳ đâu mà không cần build
- Chỉ cần tải tệp HTML lên GitHub Pages là có thể truy cập ngay bằng URL cố định
- Phần lớn công cụ được quản lý trong repo simonw/tools và được cung cấp qua tools.simonwillison.net
Nhập/xuất xoay quanh sao chép và dán
- Nhiều công cụ lấy việc biến đổi dữ liệu được dán vào rồi sao chép lại vào clipboard làm cơ chế cốt lõi
- Vì sao chép và dán trên di động khá bất tiện nên thường xuyên thêm nút “Copy to clipboard”
- Clipboard của hệ điều hành có thể chứa nhiều định dạng cùng lúc, và trong sự kiện paste của JavaScript cũng có thể truy cập loại dữ liệu “rich” này
- Công cụ tiêu biểu
Công cụ debug
- Tạo các công cụ chuyên dụng để kiểm tra cấu trúc dữ liệu thực tế mà trình duyệt đang xử lý
- clipboard-viewer: hiển thị toàn bộ dữ liệu clipboard như văn bản·rich text·hình ảnh·tệp
- Công cụ bổ sung
Lưu trạng thái vào URL
- Có thể lưu rất nhiều trạng thái vào URL ngay cả khi không có DB phía máy chủ
- Tác giả ưu tiên mẫu này cho các công cụ hướng tới khả năng bookmark và chia sẻ
- icon-editor: giữ nguyên trạng thái chỉnh sửa biểu tượng 24×24 trong URL
Tận dụng localStorage
- localStorage là API trình duyệt lưu dữ liệu bền vững trên thiết bị người dùng mà không lộ ra máy chủ
- Được dùng để lưu trạng thái lớn khó đưa vào URL hoặc các giá trị bí mật như API key, nhằm tránh rủi ro lộ trong log máy chủ của static host
- word-counter: tự động lưu văn bản đang viết
- render-markdown: giữ lại nội dung đang soạn Markdown
- haiku: lưu API key trong localStorage để tạo haiku từ ảnh webcam
Tận dụng API có CORS
- CORS (Cross-origin resource sharing) là cơ chế kiểm soát việc JavaScript trong trình duyệt có thể gọi API ở tên miền khác hay không
- Các API mở header CORS là tài nguyên rất phù hợp cho HTML tools, và theo thời gian rất đáng để tích lũy danh sách này
- Tác giả dùng iNaturalist, PyPI, GitHub (nội dung repo công khai có thể truy cập ẩn danh qua raw.githubusercontent.com), Bluesky, Mastodon, v.v.
- Ví dụ công cụ
Gọi trực tiếp LLM API
- Có thể gọi trực tiếp JSON API của OpenAI·Anthropic·Gemini từ trình duyệt qua CORS
- Nếu nhúng API key vào HTML thì có nguy cơ bị đánh cắp và phát sinh chi phí, nên tác giả dùng “mẫu secrets” là lưu vào localStorage
- Về trải nghiệm người dùng, quá trình cấp và dán API key có khá nhiều ma sát nhưng vẫn hoạt động được
- Công cụ ví dụ
Đừng ngại mở tệp
- Với
<input type="file">, có thể đọc và dùng tệp trực tiếp trong trình duyệt mà không cần tải lên máy chủ
- ocr: dùng PDF.js và Tesseract.js để chuyển PDF thành ảnh từng trang rồi thực hiện OCR ngay trong trình duyệt
- social-media-cropper: mở/dán ảnh rồi hỗ trợ cắt theo tỷ lệ dành cho mạng xã hội, ví dụ Twitter/LinkedIn 2:1, Substack 1.4:1
- ffmpeg-crop: tạo lệnh ffmpeg để crop video
Cung cấp tệp tải xuống
- Ngay cả khi không có máy chủ, trình duyệt vẫn có thể tạo tệp và cung cấp cho người dùng tải xuống
- Trong hệ sinh thái JavaScript có nhiều thư viện tạo ra đa dạng định dạng
- Công cụ ví dụ
Pyodide và WebAssembly
- Pyodide là bản phân phối chạy Python trong trình duyệt bằng cách biên dịch sang WebAssembly
- Có thể tải rất gọn từ CDN nên hầu như không có lý do gì để không dùng trong HTML tools
- Qua micropip, có thể tải thêm các gói Python thuần từ PyPI bằng CORS
- Ví dụ công cụ
Mở rộng thêm với WebAssembly
- Nền tảng khiến Pyodide khả thi chính là WebAssembly, và nó cũng cho phép tải phần mềm viết bằng ngôn ngữ khác để chạy trong trình duyệt
- Squoosh.app cung cấp nhiều thư viện nén ảnh ngay trong trình duyệt
- Ví dụ công cụ
Tái tổ hợp các công cụ trước đó
- Khi có một bộ sưu tập công khai duy nhất với hơn 100 công cụ, một lợi thế khác là LLM có thể dễ dàng tái tổ hợp chúng
- Đôi khi tác giả sao chép công cụ cũ vào ngữ cảnh; với coding agent thì dùng tên để tham chiếu hoặc yêu cầu tìm ví dụ
- Mã nguồn của những công cụ đang hoạt động đóng vai trò như tài liệu, bao gồm cả mẫu dùng thư viện biên tập, từ đó nâng xác suất thành công của LLM
- Toàn bộ quá trình tạo pypi-changelog: bản ghi transcript prompt
- Prompt được xây dựng bằng cách chỉ dẫn xem công cụ “pypi package explorer”, sau đó đọc mã nguồn zip-wheel-explorer, lấy wheel từ PyPI API, render diff giữa các phiên bản và tạo công cụ mới có nút Copy
- Cũng có thể tham khảo chạy OCR trong trình duyệt
Ghi lại prompt·transcript
- Hình thành thói quen lưu và công khai lịch sử sử dụng LLM sẽ giúp chính bản thân nâng cao năng lực khai thác công cụ này
- Với các công cụ tạo trên nền tảng LLM dạng chat, tác giả dùng chức năng share làm phương tiện lưu vết
- Khi dùng agent như Claude Code·Codex CLI, tác giả sao chép toàn bộ transcript terminal, chuyển log sang HTML bằng terminal-to-html rồi chia sẻ qua Gist
- Khi lưu công cụ hoàn chỉnh vào repo, tác giả đưa liên kết transcript vào commit message - bộ sưu tập bản ghi: tools.simonwillison.net/colophon
Kết luận
- Trong 1 năm rưỡi qua, việc khám phá LLM và các công cụ HTML theo cách này đã rất thú vị, đồng thời giúp hiểu rõ hơn phạm vi những gì HTML có thể làm và năng lực của LLM
- Nếu muốn bắt đầu bộ sưu tập công cụ của riêng mình, chỉ cần tạo một repo GitHub rồi bật GitHub Pages và sao chép các tệp .html vào là có thể bắt đầu
- Kèm theo đó là liên kết transcript bonus dùng Claude Code và shot-scraper để thêm ảnh chụp màn hình cho bài viết này
3 bình luận
Các mẫu HTML
Có vẻ thú vị đấy.
Tuyệt vời.