ShadCN Loop आपके टूटे हुए UI के लिए सबसे बेहतरीन समाधान है

AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00आप में से अधिकांश लोग शैड सीएन को सबसे व्यापक रूप से उपयोग की जाने वाली यूआई लाइब्रेरीज़ में से एक के रूप में जानते हैं लेकिन इसके साथ बिल्ड करने के लिए एआई एजेंट का उपयोग करना समस्याग्रस्त हो सकता है अगर आप वन-शॉट लैंडिंग पेज बना रहे हैं तो आपको कोई बड़ी समस्या नहीं होगी लेकिन अगर आप एक नया ऐप बना रहे हैं या नई फीचर लागू कर रहे हैं तो चीजें टूट जाती हैं और वे ऐप के अन्य हिस्सों को भी तोड़ देती हैं लेकिन यह कुछ नया नहीं है यह समस्या पहले ही हल हो चुकी है और इसी तरह इंजीनियर अब ऐप्स बनाते हैं एआई एजेंट हमेशा उस कोड का परीक्षण करते हैं जो वे लिखते हैं लेकिन बड़े संदर्भों के साथ ये एजेंट अविश्वसनीय हो जाते हैं इसलिए हमें यह सुनिश्चित करने का एक तरीका चाहिए कि एजेंट उन्हें दिए गए काम को पूरा करें यहीं पर एजेंटिक लूप्स की अवधारणा आती है और एंथ्रोपिक इसे राल्फ लूप का उपयोग करके हल करता है मेरी यूआई समस्या को हल करने के लिए मैंने राल्फ लूप को लागू करने की कोशिश की और पहले तो यह पूरी तरह से विफल हो गया लेकिन मुझे जल्द ही पता चला कि यह राल्फ लूप के कारण नहीं था यह उस प्रक्रिया के कारण था जो मैंने इसके साथ लागू की थी तो राल्फ वास्तव में एक नया प्लगइन है जो एंथ्रोपिक द्वारा ही जारी किया गया है लेकिन यह उनके मूल विचारों में से एक नहीं था यह किसी और की तकनीक पर आधारित है और एंथ्रोपिक ने इसे लागू किया और ओपन-सोर्स किया मूल रूप से राल्फ एक लूप है और अगर आप क्लॉड कोड हुक्स के बारे में जानते हैं तो यह इन स्टॉप हुक्स का उपयोग करता है जो तब चलते हैं जब क्लॉड उत्तर आउटपुट करना बंद कर देता है जैसे ही यह रुकता है एआई एजेंट को उसकी प्रारंभिक प्रॉम्प्ट फ़ाइल फिर से फीड की जाती है और यह इसे अपने काम को पुनरावृत्त रूप से सुधारने की अनुमति देता है अब यहाँ महत्वपूर्ण सवाल है कि यह वास्तव में लूप से कब बाहर निकलता है एक चीज़ है जिसे कम्प्लीशन प्रॉमिस कहा जाता है जो कोई भी शब्द हो सकता है जिसे आप इनपुट करते हैं जब क्लॉड को लगता है कि उसका कार्य पूरा हो गया है तो यह इस प्रॉमिस को अपने आप आउटपुट करता है उदाहरण के लिए इस मामले में प्रॉमिस शब्द कम्प्लीट है अगर रिटर्न प्रॉम्प्ट में प्रॉमिस है तो लूप फिर से नहीं चलता है तो जब तक क्लॉड प्रॉमिस आउटपुट नहीं करता तब तक यह नहीं रुकता है यह सुनिश्चित करता है कि क्लॉड जब चाहे तब छोड़कर नहीं चला जाता प्लगइन इंस्टॉल करने के बाद आपके पास तीन कमांड होंगे राल्फ लूप कमांड एक कैंसल कमांड और एक हेल्प कमांड लूप कमांड में आपको वह प्रॉम्प्ट प्रदान करना होगा जो एजेंट को बार-बार फीड किया जाता है कभी-कभी इसे एक असंभव कार्य मिल सकता है जिसे यह हल करने में सक्षम नहीं है और यह एक अनंत लूप में फंस सकता है इसलिए अधिकतम पुनरावृत्ति गिनती सेट करना वास्तव में एक अच्छा अभ्यास है मैं नीचे रेपो का लिंक छोड़ूंगा क्योंकि उनके पास कुछ अच्छे सर्वोत्तम अभ्यास हैं उन प्रॉम्प्ट के लिए जो आप राल्फ लूप को दे सकते हैं लेकिन इस वीडियो में मैं केवल उन लोगों पर चर्चा करने जा रहा हूं जो यूआई वर्कफ़्लो से संबंधित हैं जो मैं आपको दिखाने जा रहा हूं तो मान लीजिए हम इस ऐप में दो फीचर लागू करना चाहते हैं एक कमांड पैलेट है जहां हम अपने ऐप को खोजने और अन्य कमांड निष्पादित करने के लिए एक मेनू जोड़ते हैं यह सुनिश्चित करने के लिए कि यह नई फीचर ऐप के अन्य हिस्सों को नहीं तोड़ती आप परीक्षणों से शुरू करेंगे इसे टेस्ट ड्रिवेन डेवलपमेंट कहा जाता है अगर आप इससे परिचित नहीं हैं तो आप क्लॉड कोड से टीडीडी संरचना सेटअप करने के लिए कह सकते हैं जहां यह एंड-टू-एंड टेस्ट फोल्डर बनाता है यूआई समस्याओं की जांच के लिए एक स्क्रीनशॉट फोल्डर और संबंधित परीक्षण भी दूसरी फीचर जो हम लागू करने जा रहे हैं वह डेटाबेस में बोर्ड व्यू है जैसा कि नोशन हमें अपने डेटाबेस के साथ करने की अनुमति देता है अगर आप समझ गए हैं तो टेस्ट ड्रिवेन डेवलपमेंट एक दृष्टिकोण है जहां कोड लागू करने से पहले परीक्षण लिखे जाते हैं लेकिन इसका मतलब है कि प्रारंभिक परीक्षण हमेशा विफल होंगे तो अगर मैं कमांड पैलेट फीचर लागू कर रहा हूं तो मैं बस इसके लिए कोड लिखना शुरू नहीं करूंगा इसके बजाय मैं पहले इसके लिए विस्तृत परीक्षण लिखूंगा फिर हम उन परीक्षणों को पास करने के लिए आवश्यक न्यूनतम मात्रा में कोड लिखते हैं एक बार जब यह हो जाता है तो हम रीफैक्टर करते हैं और अधिक फंक्शनैलिटी जोड़ते हैं और हर जोड़ के साथ हम सुनिश्चित करते हैं कि परीक्षण अभी भी पास हो रहे हैं एक और दिलचस्प बात यह है कि ये परीक्षण स्वचालित हैं और प्लेराइट को विज़ुअल वेरिफिकेशन के लिए इम्पोर्ट और उपयोग किया जा सकता है अगर आपको लगता है कि हम ब्राउज़र के माध्यम से स्वायत्त रूप से इसे वेरीफाई करने के लिए प्लेराइट एमसीपी का उपयोग कर रहे हैं तो आप गलत हैं टीडीडी के साथ प्रत्येक फंक्शनल व्यवहार के लिए आप स्क्रीनशॉट ले सकते हैं उदाहरण के लिए अगर फंक्शनल व्यवहार कार्ड जोड़ना है तो स्क्रीनशॉट बोर्ड में जोड़ा गया कार्ड दिखाएगा तो अब एआई एजेंट को बस इन स्क्रीनशॉट को देखना है और सुनिश्चित करना है कि इन शैड सीएन कंपोनेंट्स को लागू करने के तरीके में कोई समस्या नहीं है ये टेस्ट फाइलें सुनिश्चित करती हैं कि जब भी कुछ नया जोड़ा जाता है या जब एक फीचर बनाई जा रही होती है तो हमारी सभी व्यवहारिक आवश्यकताएं पूरी हो रही हैं लेकिन हमारे मामले में हम स्क्रीनशॉट का उपयोग विशुद्ध रूप से यूआई वेरिफिकेशन के लिए करना चाहते हैं लेकिन अगर हमारे पास पहले से टीडीडी है तो हमें राल्फ लूप की आवश्यकता क्यों है जैसा कि मैंने पहले ही बताया बड़े कार्यों और संदर्भ विंडो के लगभग भर जाने के साथ ये मॉडल अचानक अपने कार्यों को छोड़ देते हैं और निरंतर मानवीय इनपुट की आवश्यकता होती है इसलिए मेरे पास किसी भी प्रकार के फंक्शन के लिए पहले से परीक्षण लिखे जा सकते हैं जो मैं चाहता हूं फिर लूप का उपयोग करके इसे निर्देश दे सकता हूं कि क्या करना है और यह स्वायत्त रूप से काम कर सकता है इसे बताकर कि किस वर्कफ़्लो का पालन करना है और फिर इसे वह शर्त देकर कि यह कब प्रॉमिस आउटपुट कर सकता है यह कार्य पूरा करता है और लूप से बाहर निकल जाता है जो इस मामले में तब होता है जब यह सभी 25 अद्वितीय परीक्षणों को पास कर लेता है तो राल्फ स्लैश कमांड का उपयोग करते हुए मैंने इसे एक प्रॉम्प्ट दिया ताकि यह कमांड पैलेट फीचर को पुनरावृत्त रूप से बनाए प्रॉम्प्ट में हम मूल रूप से इसे कुछ बुनियादी आवश्यकताओं के साथ फीचर लागू करने के लिए कह रहे थे जो वास्तव में महत्वपूर्ण नहीं हैं क्योंकि आवश्यकताएं परीक्षणों में भी पाई जा सकती हैं लेकिन हमने उस वर्कफ़्लो में पूरे वर्कफ़्लो की रूपरेखा तैयार की उस वर्कफ़्लो में इसे परीक्षण चलाकर शुरू करना था यह जानता है कि परीक्षण विफल होंगे और उसके बाद उसे उन्हें पास करने के लिए कंपोनेंट लागू करने की आवश्यकता है तो यही पूरा लक्ष्य है अब अगर यह एक बहुत व्यापक कार्य होता तो संभावना है कि जब संदर्भ विंडो भर जाती है या क्लॉड भ्रमित हो जाता है तो यह स्वचालित रूप से छोड़ देगा यह कभी भी कम्प्लीशन प्रॉमिस आउटपुट नहीं करेगा और चूंकि यह कभी प्रॉमिस आउटपुट नहीं करता है प्रॉम्प्ट फिर से वापस फीड किया जाएगा और इसे फिर से शुरू करना होगा मतलब यह पुनरावृत्त रूप से इस पर काम करता रहेगा लेकिन चूंकि यह एक छोटा कार्य था यह वास्तव में एक ही बार में सब कुछ लागू करने में सक्षम था सभी कंपोनेंट लिखें और सभी परीक्षणों को पास करें अब परीक्षण पास होने के बाद वर्कफ़्लो इसे कमांड पैलेट के सभी स्क्रीनशॉट की समीक्षा करने के लिए कहता है ये विभिन्न चरणों में लिए गए स्क्रीनशॉट हैं यह सुनिश्चित करने के लिए कि यूआई चाहे वह शैड सीएन हो या कोई अन्य कंपोनेंट लाइब्रेरी जिसका आप उपयोग कर रहे हैं सही तरीके से लागू की गई है और कोई छोटी समस्या नहीं है उसके बाद इसे फिर से परीक्षण चलाना चाहिए और सुनिश्चित करना चाहिए कि यूआई परिवर्तनों के बाद भी वे पास हो रहे हैं चूंकि सभी परीक्षण पास हो रहे थे और स्क्रीनशॉट की समीक्षा की गई थी इसने कम्प्लीशन प्रॉमिस आउटपुट किया यहीं पर लूप रुक गया और फिर से जारी नहीं रहा लेकिन इसके साथ एक बहुत बड़ी समस्या थी जो मैंने कमांड पैलेट फीचर में नोटिस नहीं की क्योंकि यूआई त्रुटियों की बहुत कम संभावनाएं थीं हालांकि जब मैं बोर्ड व्यू को लागू करने के लिए आगे बढ़ा तो मुझे एहसास हुआ कि सिस्टम में एक बड़ी गलती थी मैंने उसी प्रॉम्प्ट के साथ बोर्ड को लागू करना शुरू किया आवश्यकताएं निश्चित रूप से अलग थीं लेकिन वर्कफ़्लो लगभग वैसा ही था अब मैं थोड़ा आश्चर्यचकित था जब इसने एक ही बार में सभी आवश्यकताओं को पूरा किया मुझे गलत मत समझिए यह वास्तव में यह सुनिश्चित कर रहा था कि सभी परीक्षण पास हो रहे हैं लेकिन जब यह ऐसा कर रहा था तो ऐसे मामले थे जहां सफल परीक्षणों की संख्या वास्तव में कम हो जाती थी क्योंकि कुछ बदलकर यह कुछ और तोड़ देता था और यही कारण है कि टीडीडी वास्तव में महत्वपूर्ण है इस पुनरावर्ती परीक्षण के कारण और यह सुनिश्चित करना कि सब कुछ काम करता है लेकिन मुख्य समस्या यह थी कि जब इसने वेरिफाई किया कि यह हो गया और मैं आगे बढ़कर यूआई की जांच करने गया तो अधिकांश चीजें सही तरीके से लागू की गई थीं लेकिन इसने कुछ यूआई त्रुटियों को पूरी तरह से मिस कर दिया जैसे यह वाली मैंने स्क्रीनशॉट भी चेक किए और उन स्क्रीनशॉट में भी त्रुटियां दिख रही थीं तो मैंने इससे पूछा और हमने विश्लेषण किया कि वास्तव में क्या गलत हुआ असली समस्या एक प्रक्रिया विफलता थी विशेष रूप से यूआई को ठीक करने के संदर्भ में क्या हुआ यह था कि इसने सभी परीक्षणों को पास किया क्योंकि इसे टेस्ट फाइलों को बार-बार चलाना था लेकिन स्क्रीनशॉट के अलावा यूआई के लिए कोई विशिष्ट परीक्षण नहीं था इसने उनमें से कुछ पर एक नज़र डाली और इसने कुछ यूआई त्रुटियों को भी नजरअंदाज कर दिया जो इसने देखी थीं कुछ फाइलों को पूरी तरह से नजरअंदाज कर दिया गया तो मुख्य समस्या यह थी कि इसने अपना प्रॉमिस स्टेटमेंट समय से पहले आउटपुट कर दिया और यह वेरिफाई नहीं किया कि यूआई वास्तव में ठीक किया गया था या नहीं हम इस बारे में विचार-मंथन सत्र से गुजरे कि हम इसे कैसे ठीक कर सकते हैं और मैंने रेपो से प्रॉम्प्ट लिखने के सर्वोत्तम अभ्यास भी क्लॉड कोड को दिए लेकिन अंत में हम कुछ विशिष्ट नियमों और प्रक्रिया में बदलाव के साथ आए जो यह सुनिश्चित करेगा कि यूआई हमेशा सही है अब इसका परीक्षणों से कुछ लेना-देना नहीं था क्योंकि वे हमेशा चलने वाले हैं जो प्रॉम्प्ट हमने कमांड पैलेट के लिए उपयोग किया था वह वास्तव में सहायक है जब फीचर या इम्प्लीमेंटेशन बहुत बड़ा होता है जहां क्लॉड को भ्रम नहीं होता कि उसने कार्य पूरा कर लिया है बल्कि पूर्ण संदर्भ विंडो या कार्य की जटिलता के कारण यह अचानक छोड़ देता है अब क्लॉड कोड पहले से ही वास्तव में स्वायत्त है इसमें कोई संदेह नहीं है लेकिन अभी भी ऐसी समस्याएं हैं जिन्हें हमें ठीक करने की आवश्यकता है तो हमने मुख्य प्रॉम्प्ट में कई चीजें बदलीं पहला स्क्रीनशॉट वेरिफिकेशन प्रोटोकॉल था हमने प्रत्येक छवि में एक साधारण उपसर्ग जोड़ा जो क्लॉड को बताता था कि उसने स्क्रीनशॉट पढ़ा है या नहीं लेकिन जब मैंने पहली बार इसे लागू किया तब भी इसने सभी छवियों को नहीं पढ़ा यह कुछ पढ़ता उनके ऊपर वेरिफाइड लिखता और पहले की तरह यह जल्दी छोड़ देता तो इसे हल करने के लिए हमने इसे एक अलग तरीके से सोचने के लिए प्रोत्साहित किया हमने इसे बताया कि इसने सभी स्क्रीनशॉट का नाम बदलने के बाद इसे अभी तक प्रॉमिस आउटपुट नहीं करना चाहिए मतलब इसे कार्य पूर्ण नहीं मानना चाहिए और इसे अगले पुनरावृत्ति को पूर्णता की पुष्टि करने देनी चाहिए तो कम से कम दो लूप चलने चाहिए अगले वेरिफिकेशन में क्या होता है कि क्लॉड वेरिफाई करता है कि सभी फाइलों में वेरिफाइड उपसर्ग है निश्चित रूप से इसका मतलब था कि हमें परीक्षणों को बदलना होगा और छवि वेरिफिकेशन को फंक्शनल परीक्षणों से अलग करना होगा अगला पुनरावृत्ति सुनिश्चित करती है कि सभी छवियों में वेरिफाइड परिणाम हैं और अगर क्लॉड किसी को मिस करता है तो यह फिर से उन्हें देखता है और आउटपुट को ठीक करता है इस बदलाव के साथ जो छोटी यूआई त्रुटियां हम सामना कर रहे थे वे अंततः ठीक हो गईं और यह इन सभी फीचर्स को सही तरीके से लागू करने में सक्षम था तो जब यह अगले लूप में प्रवेश किया तो इसने फिर से परीक्षण चलाए चूंकि इसे कुछ त्रुटियां मिलीं इसने उन्हें ठीक किया और क्योंकि सभी फाइलों में वेरिफाइड शब्द था इसने एक अंतिम परीक्षण चलाया इस बार इसने दो लूप में अपना कार्य पूरा किया और ऐप में सभी प्रमुख यूआई त्रुटियों को ठीक करने में सक्षम था अब ऑटोमेटा के बारे में बात करते हैं लाखों लोगों को एआई के साथ कैसे बिल्ड करना है यह सिखाने के बाद हमने इन वर्कफ़्लो को खुद लागू करना शुरू किया हमने पाया कि हम पहले से कहीं बेहतर उत्पाद तेजी से बना सकते हैं हम आपके विचारों को जीवन में लाने में मदद करते हैं चाहे वह ऐप हो या वेबसाइट शायद आपने हमारे वीडियो देखते हुए सोचा हो मेरे पास एक बढ़िया आइडिया है लेकिन मेरे पास इसे बनाने के लिए कोई टेक टीम नहीं है यही वह जगह है जहां हम आते हैं हमें अपनी तकनीकी को-पायलट के रूप में सोचें हम वही वर्कफ़्लो लागू करते हैं जो हमने लाखों लोगों को सिखाया है सीधे आपके प्रोजेक्ट पर अवधारणाओं को वास्तविक कार्यशील समाधानों में बदलना बिना किराए पर लेने या डेव टीम को प्रबंधित करने की परेशानी के अपने विचार को वास्तविकता में तेजी से बदलने के लिए तैयार हैं hello@automata.dev पर संपर्क करें अगर आप चैनल का समर्थन करना चाहते हैं और हमें इस तरह के वीडियो बनाते रहने में मदद करना चाहते हैं तो आप नीचे सुपर थैंक्स बटन का उपयोग करके ऐसा कर सकते हैं हमेशा की तरह देखने के लिए धन्यवाद और मैं आपको अगले में मिलूंगा

Key Takeaway

RALF Loop और Test-Driven Development को सही प्रोटोकॉल के साथ मिलाकर ShadCN UI लाइब्रेरी के साथ AI एजेंट्स द्वारा बनाए गए ऐप्स में होने वाली UI त्रुटियों को स्वायत्त रूप से हल किया जा सकता है।

Highlights

ShadCN जैसी UI लाइब्रेरीज़ के साथ AI एजेंट्स का उपयोग करते समय बड़े ऐप्स में चीजें टूट जाती हैं और अन्य हिस्सों को भी प्रभावित करती हैं

Anthropic का RALF Loop एक प्लगइन है जो stop hooks का उपयोग करके AI एजेंट को अपने काम को पुनरावृत्त रूप से सुधारने की अनुमति देता है

Test-Driven Development (TDD) में पहले परीक्षण लिखे जाते हैं, फिर उन्हें पास करने के लिए कोड लिखा जाता है, और फिर रीफैक्टर किया जाता है

RALF Loop एक completion promise का उपयोग करता है जो तब आउटपुट होता है जब Claude को लगता है कि कार्य पूरा हो गया है

स्क्रीनशॉट वेरिफिकेशन प्रोटोकॉल में 'verified' उपसर्ग जोड़ने और दो लूप चलाने से UI त्रुटियों की पहचान में सुधार हुआ

बड़े संदर्भ विंडो वाले कार्यों में AI मॉडल अचानक काम छोड़ देते हैं, इसलिए RALF Loop की आवश्यकता होती है

Playwright का उपयोग विज़ुअल वेरिफिकेशन के लिए स्वचालित परीक्षणों में किया जा सकता है

Timeline

ShadCN और AI एजेंट्स के साथ समस्याएं

वीडियो की शुरुआत में ShadCN को सबसे व्यापक रूप से उपयोग की जाने वाली UI लाइब्रेरीज़ में से एक बताया गया है। हालांकि, AI एजेंट्स के साथ बिल्ड करते समय समस्याएं आती हैं - one-shot लैंडिंग पेज बनाना आसान है, लेकिन नए ऐप या फीचर बनाते समय चीजें टूट जाती हैं। ये टूटी हुई चीजें ऐप के अन्य हिस्सों को भी प्रभावित करती हैं। यह बताया गया कि यह नई समस्या नहीं है और इंजीनियर इसे पहले से ही हल कर चुके हैं - AI एजेंट हमेशा अपने लिखे कोड का परीक्षण करते हैं, लेकिन बड़े संदर्भों के साथ ये एजेंट अविश्वसनीय हो जाते हैं।

RALF Loop की अवधारणा और कार्यप्रणाली

RALF Loop की अवधारणा को विस्तार से समझाया गया है, जो Anthropic द्वारा जारी किया गया एक प्लगइन है। यह किसी और की तकनीक पर आधारित है जिसे Anthropic ने लागू किया और ओपन-सोर्स किया। RALF मूल रूप से Claude Code hooks का उपयोग करता है, विशेष रूप से stop hooks जो तब चलते हैं जब Claude उत्तर आउटपुट करना बंद कर देता है। जैसे ही यह रुकता है, AI एजेंट को उसकी प्रारंभिक प्रॉम्प्ट फाइल फिर से फीड की जाती है, जिससे यह अपने काम को पुनरावृत्त रूप से सुधार सकता है। Completion promise का उपयोग करके loop से बाहर निकलने की शर्त निर्धारित की जाती है - जब Claude को लगता है कि कार्य पूरा हो गया है, तो यह 'complete' जैसा शब्द आउटपुट करता है और loop रुक जाता है।

RALF Loop प्लगइन की स्थापना और उपयोग

प्लगइन इंस्टॉल करने के बाद तीन मुख्य कमांड मिलते हैं - RALF loop command, cancel command, और help command। Loop command में वह प्रॉम्प्ट प्रदान करना होता है जो एजेंट को बार-बार फीड किया जाता है। कभी-कभी एजेंट को एक असंभव कार्य मिल सकता है जिसे यह हल नहीं कर सकता और अनंत लूप में फंस सकता है, इसलिए अधिकतम पुनरावृत्ति गिनती सेट करना अच्छा अभ्यास है। रेपो में सर्वोत्तम अभ्यासों के लिंक का उल्लेख किया गया है, लेकिन वीडियो में केवल UI वर्कफ़्लो से संबंधित प्रॉम्प्ट पर चर्चा की गई है।

Test-Driven Development (TDD) का परिचय

दो फीचर्स - command palette और database में board view - को लागू करने के उदाहरण दिए गए हैं। Test-Driven Development (TDD) की अवधारणा को विस्तार से समझाया गया है, जहां नई फीचर ऐप के अन्य हिस्सों को न तोड़े इसके लिए पहले परीक्षण लिखे जाते हैं। Claude Code से TDD संरचना सेटअप करने के लिए कहा जा सकता है जो end-to-end test folder, UI समस्याओं की जांच के लिए screenshot folder, और संबंधित परीक्षण बनाता है। TDD दृष्टिकोण में कोड लागू करने से पहले परीक्षण लिखे जाते हैं, इसलिए प्रारंभिक परीक्षण हमेशा विफल होते हैं, फिर परीक्षणों को पास करने के लिए न्यूनतम कोड लिखा जाता है, और फिर रीफैक्टर किया जाता है।

स्वचालित परीक्षण और विज़ुअल वेरिफिकेशन

परीक्षणों को स्वचालित बनाने और Playwright को विज़ुअल वेरिफिकेशन के लिए इम्पोर्ट और उपयोग करने की प्रक्रिया बताई गई है। यह स्पष्ट किया गया कि Playwright MCP का उपयोग ब्राउज़र के माध्यम से स्वायत्त रूप से वेरिफाई करने के लिए नहीं किया जा रहा है। TDD के साथ प्रत्येक फंक्शनल व्यवहार के लिए स्क्रीनशॉट लिए जाते हैं - उदाहरण के लिए, अगर फंक्शनल व्यवहार कार्ड जोड़ना है तो स्क्रीनशॉट बोर्ड में जोड़ा गया कार्ड दिखाएगा। AI एजेंट को इन स्क्रीनशॉट को देखना होता है और सुनिश्चित करना होता है कि ShadCN components को लागू करने में कोई समस्या नहीं है। ये test files सुनिश्चित करती हैं कि जब भी कुछ नया जोड़ा जाता है तो सभी व्यवहारिक आवश्यकताएं पूरी हो रही हैं।

TDD के साथ RALF Loop की आवश्यकता

यह सवाल उठाया गया कि अगर पहले से TDD है तो RALF Loop की आवश्यकता क्यों है। इसका जवाब यह दिया गया कि बड़े कार्यों और संदर्भ विंडो के लगभग भर जाने के साथ, ये मॉडल अचानक अपने कार्यों को छोड़ देते हैं और निरंतर मानवीय इनपुट की आवश्यकता होती है। इसलिए, किसी भी प्रकार के फंक्शन के लिए पहले से परीक्षण लिखे जा सकते हैं, फिर loop का उपयोग करके इसे निर्देश दिया जा सकता है कि क्या करना है। यह स्वायत्त रूप से काम करता है जब इसे बताया जाता है कि किस वर्कफ़्लो का पालन करना है और कब completion promise आउटपुट करना है। इस मामले में, यह तब होता है जब सभी 25 अद्वितीय परीक्षणों को पास कर लिया जाता है।

Command Palette फीचर का सफल कार्यान्वयन

RALF slash command का उपयोग करके command palette फीचर को पुनरावृत्त रूप से बनाने के लिए प्रॉम्प्ट दिया गया। प्रॉम्प्ट में बुनियादी आवश्यकताओं के साथ फीचर लागू करने के लिए कहा गया था, हालांकि आवश्यकताएं परीक्षणों में भी पाई जा सकती हैं। पूरे वर्कफ़्लो की रूपरेखा दी गई जिसमें परीक्षण चलाकर शुरू करना, परीक्षणों के विफल होने को जानना, और फिर उन्हें पास करने के लिए components लागू करना शामिल था। चूंकि यह एक छोटा कार्य था, Claude एक ही बार में सब कुछ लागू करने, सभी components लिखने और सभी परीक्षणों को पास करने में सक्षम था। परीक्षण पास होने के बाद, वर्कफ़्लो ने command palette के सभी स्क्रीनशॉट की समीक्षा करने को कहा, जिसके बाद completion promise आउटपुट हुआ और loop रुक गया।

Board View में UI त्रुटियों की समस्या

Board view को लागू करते समय एक बड़ी समस्या का पता चला। उसी प्रॉम्प्ट के साथ (अलग आवश्यकताओं के साथ लेकिन लगभग वैसे ही वर्कफ़्लो के साथ) board को लागू करना शुरू किया गया। Claude ने एक ही बार में सभी आवश्यकताओं को पूरा किया और यह सुनिश्चित किया कि सभी परीक्षण पास हो रहे हैं। हालांकि, ऐसे मामले थे जहां सफल परीक्षणों की संख्या कम हो जाती थी क्योंकि कुछ बदलकर यह कुछ और तोड़ देता था - यही कारण है कि TDD वास्तव में महत्वपूर्ण है। मुख्य समस्या यह थी कि जब UI की जांच की गई, तो अधिकांश चीजें सही थीं लेकिन कुछ UI त्रुटियों को पूरी तरह से मिस कर दिया गया। स्क्रीनशॉट में भी त्रुटियां दिख रही थीं।

समस्या का विश्लेषण और प्रक्रिया विफलता

Claude के साथ विश्लेषण करने पर पता चला कि असली समस्या एक प्रक्रिया विफलता थी, विशेष रूप से UI को ठीक करने के संदर्भ में। क्या हुआ कि Claude ने सभी परीक्षणों को पास किया क्योंकि इसे test files को बार-बार चलाना था, लेकिन स्क्रीनशॉट के अलावा UI के लिए कोई विशिष्ट परीक्षण नहीं था। इसने कुछ स्क्रीनशॉट पर नज़र डाली और कुछ UI त्रुटियों को भी नजरअंदाज कर दिया जो इसने देखी थीं। कुछ फाइलों को पूरी तरह से नजरअंदाज कर दिया गया। मुख्य समस्या यह थी कि इसने अपना completion promise statement समय से पहले आउटपुट कर दिया और यह वेरिफाई नहीं किया कि UI वास्तव में ठीक किया गया था या नहीं।

सुधारित स्क्रीनशॉट वेरिफिकेशन प्रोटोकॉल

समस्या को हल करने के लिए विचार-मंथन सत्र किया गया और repo से प्रॉम्प्ट लिखने के सर्वोत्तम अभ्यास भी Claude Code को दिए गए। अंत में कुछ विशिष्ट नियमों और प्रक्रिया में बदलाव के साथ आए जो यह सुनिश्चित करेगा कि UI हमेशा सही है। मुख्य प्रॉम्प्ट में पहला बदलाव स्क्रीनशॉट वेरिफिकेशन प्रोटोकॉल था - प्रत्येक छवि में एक साधारण 'verified' उपसर्ग जोड़ा गया जो Claude को बताता था कि उसने स्क्रीनशॉट पढ़ा है या नहीं। हालांकि पहली बार लागू करने पर भी सभी छवियों को नहीं पढ़ा गया - यह कुछ पढ़ता, उनके ऊपर verified लिखता और जल्दी छोड़ देता। इसे हल करने के लिए, Claude को एक अलग तरीके से सोचने के लिए प्रोत्साहित किया गया।

दो-चरणीय वेरिफिकेशन प्रक्रिया

Claude को बताया गया कि सभी स्क्रीनशॉट का नाम बदलने के बाद भी इसे completion promise आउटपुट नहीं करना चाहिए और कार्य पूर्ण नहीं मानना चाहिए। इसे अगले पुनरावृत्ति को पूर्णता की पुष्टि करने देनी चाहिए, मतलब कम से कम दो loop चलने चाहिए। अगले वेरिफिकेशन में Claude वेरिफाई करता है कि सभी फाइलों में verified उपसर्ग है। इसका मतलब था कि परीक्षणों को बदलना होगा और छवि वेरिफिकेशन को फंक्शनल परीक्षणों से अलग करना होगा। अगला पुनरावृत्ति सुनिश्चित करती है कि सभी छवियों में verified परिणाम हैं, और अगर Claude किसी को मिस करता है तो यह फिर से उन्हें देखता है और आउटपुट को ठीक करता है। इस बदलाव के साथ छोटी UI त्रुटियां अंततः ठीक हो गईं।

सफल कार्यान्वयन और परिणाम

सुधारित प्रोटोकॉल के साथ Claude सभी फीचर्स को सही तरीके से लागू करने में सक्षम था। जब यह अगले loop में प्रवेश किया, तो इसने फिर से परीक्षण चलाए। कुछ त्रुटियां मिलने पर इसने उन्हें ठीक किया। चूंकि सभी फाइलों में verified शब्द था, इसने एक अंतिम परीक्षण चलाया। इस बार Claude ने दो loop में अपना कार्य पूरा किया और ऐप में सभी प्रमुख UI त्रुटियों को ठीक करने में सक्षम था। यह दर्शाता है कि सही प्रोटोकॉल और वर्कफ़्लो के साथ RALF Loop और TDD को मिलाकर UI समस्याओं को प्रभावी रूप से हल किया जा सकता है।

Automata सेवाओं का परिचय और समापन

वीडियो के अंत में Automata की सेवाओं का परिचय दिया गया है। लाखों लोगों को AI के साथ कैसे बिल्ड करना है यह सिखाने के बाद, टीम ने इन वर्कफ़्लो को खुद लागू करना शुरू किया और पाया कि वे पहले से कहीं बेहतर उत्पाद तेजी से बना सकते हैं। Automata विचारों को जीवन में लाने में मदद करता है, चाहे वह ऐप हो या वेबसाइट। अगर किसी के पास बढ़िया आइडिया है लेकिन इसे बनाने के लिए कोई टेक टीम नहीं है, तो Automata तकनीकी को-पायलट के रूप में काम करता है। वे वही वर्कफ़्लो लागू करते हैं जो उन्होंने लाखों लोगों को सिखाया है, सीधे आपके प्रोजेक्ट पर, बिना किराए पर लेने या डेव टीम को प्रबंधित करने की परेशानी के। hello@automata.dev पर संपर्क करने और super thanks button के माध्यम से चैनल का समर्थन करने का आग्रह किया गया है।

Community Posts

View all posts