- Claude Artifacts, HTML, CSS और JavaScript का उपयोग करके इंटरैक्टिव single-page apps बनाने की सुविधा है, जिसमें नतीजों को Claude इंटरफ़ेस के भीतर देखा जा सकता है और आगे सुधार भी किया जा सकता है।
- हाल ही में Claude की गतिविधि हिस्ट्री को SQLite में बदलकर विश्लेषण करने पर पता चला कि पिछले हफ्ते Claude Artifacts का उपयोग उम्मीद से कहीं ज़्यादा किया गया था।
- इस फ़ीचर का उपयोग समस्याओं को सीधे हल करने या प्रोटोटाइप बनाने के लिए एक उपयोगी टूल के रूप में किया गया।
[Claude Artifacts से बने प्रोजेक्ट]
URL to Markdown with Jina Reader का उपयोग
- Jina Reader API को कॉल करके पूरे वेब पेज के टेक्स्ट को Markdown में बदलने वाला web UI विकसित किया गया।
- URL इनपुट → Jina Reader API से Markdown तैयार → Markdown आउटपुट और "Copy" बटन उपलब्ध
- मोबाइल Safari में पूरे पेज का टेक्स्ट LLM में copy/paste करना मुश्किल था, यह समस्या हल हुई।
SQLite in WASM डेमो
- SQLite के WASM build पर Hacker News की चर्चा के चलते NPM का @sqlite.org/sqlite-wasm पैकेज मिला।
- यह देखने के लिए कि यह काम करता है या नहीं, एक सरल इंटरैक्टिव डेमो बनाया गया।
URL एक्सट्रैक्शन टूल
- वेब पेज टेक्स्ट से लिंक किए गए URL निकालने की ज़रूरत थी।
- एक artifact बनाया गया जो rich-text HTML paste स्वीकार करता है और HTML parser का उपयोग करके लिंक निकालता है।
क्लिपबोर्ड व्यूअर
- browser Clipboard API का उपयोग करके अलग-अलग तरह के कंटेंट के paste और जानकारी की जाँच के लिए एक debugging tool विकसित किया गया।
- plain text, rich text, files, images आदि को copy/paste करके ब्राउज़र में उपलब्ध जानकारी देखी जा सकती है।
Pyodide REPL
- CSP header में https://cdn.jsdelivr.net/pyodide/ मिला।
- इससे संकेत मिला कि Anthropic की development team ने जानबूझकर ऐसा सेटअप किया है ताकि Pyodide (Python compiled to WebAssembly) artifacts में लोड हो सके।
- यह साबित करने के लिए कि यह काम करता है, एक सरल डेमो बनाया गया।
फ़ोटो कैमरा सेटिंग सिम्युलेटर
- यह जिज्ञासा थी कि क्या JavaScript से camera settings का simulation किया जा सकता है, लेकिन इसमें bugs थे और नतीजे प्रभावशाली नहीं थे।
- Fabric.js लाइब्रेरी मिली।
LLM प्राइसिंग कैलकुलेटर
- Google Gemini का उपयोग करके video scraping प्रयोग के हिस्से के रूप में pricing calculator बनाया गया।
- Gemini की कम कीमत को लेकर अपनी गणना पर भरोसा नहीं था, इसलिए इसे बनाया गया।
YAML to JSON कन्वर्टर
- YAML syntax के कुछ पहलुओं को याद करने के लिए ऐसा टूल बनाया गया जो YAML इनपुट पर JSON को real time में बदलकर दिखाता है।
OpenAI Audio
- OpenAI के नए Audio API की खोज की गई।
- माइक्रोफ़ोन access permission माँगने, audio रिकॉर्ड करने, उसे base64 में encode करने और फिर OpenAI API पर भेजने वाला web page बनाया गया।
- Claude Artifacts सीधे external hosts पर API requests नहीं कर सकता, लेकिन working version बनाने के बाद उसे किसी दूसरी hosting पर ले जाकर पूरा किया जा सकता है।
QR कोड डिकोडर
- एक मीटिंग में QR code वाले slide को देखकर QR code को सामान्य URL में बदलने का तरीका चाहिए था।
- Claude Artifacts का उपयोग करके जल्दी से एक QR code decoder बनाया गया।
इमेज कन्वर्टर और पेज डाउनलोडर
- Hacker News पर किसी ने ऐसा टूल सुझाया जिसमें फ़ोटो को पेज पर drop करने पर उसे base64 URL के रूप में embed किया जा सके, और "Save as HTML" करने पर gallery सहित standalone page मिल जाए।
- जब मोबाइल फ़ोन पर "Save as HTML" संभव न हो, तब काम आने वाले "download link" फ़ीचर को जोड़ने का सुझाव दिया गया और उसका prototype बनाया गया।
HTML Entity Escaper
- फ़ोन पर टेक्स्ट chunks के HTML entities को escape करना था, इसलिए Claude से टूल बनाने को कहा गया।
text-wrap-balance-nav
- Terence Eden से प्रेरित होकर text-wrap: balance CSS property के साथ प्रयोग किया गया।
- Claude से slider और checkbox वाले nav bar का उदाहरण बनाने को कहा गया।
ARES phonetic alphabet कन्वर्टर
- HAM radio communication में स्वयंसेवा करते समय phonetic alphabet के उपयोग में गलती हो जाने की चिंता थी, इसलिए Claude से यह टूल बनवाया गया।
[Claude Artifacts के फ़ायदे और सीमाएँ]
- लेखक एक हफ्ते में 14 प्रोजेक्ट बनाने जितना बड़े पैमाने पर artifacts का उपयोग कर रहा है।
- 20 जून को लॉन्च होने के बाद से इसका लगातार उपयोग किया गया है, और अब हर दिन कई बार नए इंटरैक्टिव artifacts बनाए जा रहे हैं।
- Claude Artifacts जिज्ञासा शांत करने, तेज़ prototyping और समस्या समाधान के लिए उपयोगी है।
- ज़्यादातर टूल 5 मिनट के भीतर बनाए जा सकते हैं।
- थोड़ा अधिक जटिल OpenAI Audio टूल भी पहले version में 12 मिनट, दूसरे iteration में 9 मिनट, यानी कुल सिर्फ़ 21 मिनट में बन गया।
- लेकिन API calls, form submission, external page links जैसी सुविधाओं पर सीमाएँ हैं, इसलिए इनकी हदें निराश करती हैं।
- सीखी गई बातों के आधार पर अपना artifact विकल्प बनाने की योजना है।
- निष्कर्ष के तौर पर artifacts के उपयोग की सिफारिश की जाती है।
- अगर आप artifacts का उपयोग नहीं कर रहे हैं, तो उम्मीद है यह लेख उसका कारण समझने में मदद करेगा।
- मेरे लिए artifacts इस समय सबसे पसंदीदा LLM-आधारित टूल्स में से एक हैं
1 टिप्पणियां
Hacker News राय
कुछ लोगों का मानना है कि मौजूदा codebase में tools को integrate करना मुश्किल है। इसे एक standalone page के रूप में बनाया जा सकता है, लेकिन मौजूदा codebase के साथ compatible बनाने के लिए code review और modification में बहुत समय लगता है। सीधे खुद code लिखना बेहतर विकल्प है.
2000 के दशक की शुरुआत में web development छोड़कर web business पर ध्यान दिया था, लेकिन अब LAMP का इस्तेमाल करके creative काम कर पाने की बात खुशी देती है। उदाहरण के लिए, मनचाही marketing site को 20 मिनट के भीतर deploy किया जा सकता है.
local codebase के साथ LLM का इस्तेमाल करने के सबसे अच्छे तरीके पर blog posts या "best practices" ढूंढे जा रहे हैं। उम्मीद है कि community में ऐसी सामग्री की अच्छी सिफारिशें होंगी.
यह राय है कि मौजूदा दौर हैरान कर देने वाला है। सप्ताहांत में Rust सीखना शुरू किया, और ChatGPT 4 real-time में मदद करते हुए एक शानदार teacher की भूमिका निभा रहा है.
Anthropic, WeChat जैसे super app status के करीब पहुंच रहा है। published artifacts को sidebar में आसानी से दिखाने का कोई तरीका होना चाहिए। Elon की इस model में काफी दिलचस्पी है, इसलिए अगर xAI को Claude जैसी functionality मिलती है, तो वह उसी दिशा में जाएगा.
Anthropic ने जो नया paradigm पेश किया है, उसकी खास बात यह है कि content hosted होता है। LLM का output ऐसे self-hosted apps में बदल जाता है जिन्हें उपभोक्ता इस्तेमाल कर सकते हैं। यह personal site बनाने से बहुत अलग नहीं है.