माइंडवॉक: अपने पूरे कोडबेस को 3D मैप के रूप में देखें

BBetter Stack
컴퓨터/소프트웨어AI/미래기술

Transcript

00:00:00दो सालों से हम अपने कोडबेस AI एजेंट्स को सौंप रहे हैं और उन्हें अपनी मर्जी से
00:00:05कुछ भी रीराइट करने दे रहे हैं, और फिर लंबे कोड को स्क्रॉल करके उसे रिव्‍यू कर रहे हैं।
00:00:09आखिरकार कोई इससे तंग आ गया और उसने इसका उल्टा बनाया, एक ऐसा तरीका जिससे आप
00:00:14एजेंट को 3D में अपने कोड में काम करते हुए देख सकते हैं।
00:00:17इसे माइंडवॉक (MindWalk) कहते हैं।
00:00:18अब, यह हमारे कोड को विज़ुअलाइज़ करने और उसमें जान फूंकने का एक बेहतर तरीका हो सकता है।
00:00:23हमारे पास ग्राफ़िफाई (Graphify) जैसे टूल्स हैं, तो यह उनसे कैसे मुक़ाबला करता है?
00:00:30अब, असली समस्या यह है जिस पर माइंडवॉक का ध्यान है।
00:00:34हमारे एजेंट का लॉग बताता है कि उसने क्या किया—इसे चलाया, उसे एडिट किया।
00:00:38जो यह कभी नहीं बताता, वह यह कि उसने काम को समझा कैसे।
00:00:41उसने किन फाइलों को प्रासंगिक माना?
00:00:44एक भी लाइन बदलने से पहले उसने कहाँ-कहाँ जाकर छानबीन की?
00:00:47क्या वह अपनी सीमा में रहा या चुपके से आधी रिपॉजिटरी खंगाल डाली?
00:00:51यह सब कुछ।
00:00:52ट्रांसक्रिप्ट में एजेंट की असली सोच एक तरह से गायब ही रहती है।
00:00:55वह बस दिखती ही नहीं।
00:00:56अगर आपको वर्कफ़्लो को तेज़ करने वाले कोडिंग टूल्स पसंद हैं, तो सब्सक्राइब जरूर करें।
00:00:59हम लगातार नए वीडियो लाते रहते हैं।
00:01:01तो चलिए मैं दिखाता हूँ कि जब यह गायब नहीं होती तो कैसी दिखती है।
00:01:04मेरे पास यहाँ क्लाउड कोड (Claude Code) सेश़न में एक प्रोजेक्ट है जो मैंने पहले चलाया था।
00:01:08मैं इसे इंस्टॉल कर सकता हूँ (Go भाषा में) और फिर इसे बिल्ड कर सकता हूँ।
00:01:14अब मैं यहाँ इस कमांड के ज़रिए MindWalk को चला सकता हूँ, और मेरा पूरा कोडबेस इस तरह रेंडर होता है
00:01:20रेंडर हो जाता है।
00:01:21हर फाइल एक इमारत है, और जितना ज्यादा कोड, इमारत उतनी ही ऊंची।
00:01:26फिर मैं सेश़न पर प्ले बटन दबाता हूँ।
00:01:29यहाँ की लाइट्स को देखिए।
00:01:31जब एजेंट केवल किसी फाइल को देखता है, तो वह हल्के काई जैसे हरे रंग में चमकती है।
00:01:36नीला तब जब वह उसे ध्यान से पढ़ता है, और अंबर (नारंगी) तब जब वह कोई बदलाव करता है।
00:01:41और मैं टाइमलाइन को आगे-पीछे ड्रैग करके एजेंट के कोड में
00:01:46चले पूरे रास्ते को देख सकता हूँ।
00:01:48यह एक अकेला Go बाइनरी है जो केवल सेश़न लॉग्स पढ़ता है, जिसे Claude Code और Codex पहले ही
00:01:53आपकी डिस्क में लिख रहे होते हैं।
00:01:54साथ ही 3D के लिए आपके ब्राउज़र में एक Three.js सीन होता है।
00:01:58रंगों का यह कॉम्बिनेशन ही असली कमाल है।
00:02:01ठंडे रंगों का मतलब है कि एजेंट केवल देख रहा था।
00:02:03गर्म रंगों का मतलब है कि वह बदलाव कर रहा था।
00:02:06टाइमलाइन पर भी निशान दिए गए हैं।
00:02:07छोटे सिंबल बिल्कुल सही जगह दिखाते हैं जहाँ सब-एजेंट शुरू हुआ, जहाँ कॉन्टेक्स्ट विंडो कॉम्पैक्ट हुई,
00:02:14और जहाँ आपने नए निर्देश के साथ बीच में हस्तक्षेप किया।
00:02:17तो अब आपको हमेशा पता रहता है कि प्रोसेस कहाँ जा रहा है।
00:02:20लेकिन यह वह हिस्सा है जो मुझे वाकई अहम लगता है।
00:02:22एक बार जब आप इस विचार से आगे बढ़ जाते हैं कि “यह बढ़िया दिखता है”, है ना?
00:02:24इसमें एक 'analyze' कमांड है जो आपके अपने लोकल Claude या Codex का उपयोग करके पूरे
00:02:29सेश़न की समीक्षा करता है, और अभी पूरे हुए रन का मूल्यांकन करता है।
00:02:33क्या एजेंट ने एडिटिंग शुरू करने से पहले काफी छानबीन की?
00:02:37ठीक है, क्या वह काम के दायरे में ही रहा?
00:02:38क्या वह यहाँ-वहाँ भटक गया?
00:02:40क्या उसने अपने खुद के काम को जांचने की जहमत उठाई?
00:02:42और इनमें से हर निष्कर्ष एक क्लिक करने योग्य लिंक है जो सीधे टाइमलाइन के उसी पल पर ले जाता है।
00:02:47यह एजेंट का कोड रिव्यू करने जैसा है।
00:02:49और अगर आपके पास कोई सेश़न रीप्ले नहीं भी है, तो एक 'map' कमांड है जो किसी भी रिपोजिटरी
00:02:54को बिना किसी सेटअप के 3D शहर के रूप में रेंडर कर देगा, जो कि बहुत ही कमाल का फीचर है।
00:02:59ठीक है, तो अब आगे बढ़ते हैं।
00:03:00जब यह टूल Hacker News पर लॉन्च हुआ, तो पहला कमेंट काफी ईमानदार था,
00:03:06क्योंकि शायद आप भी यही सोच रहे होंगे।
00:03:08यह बहुत बढ़िया है, लेकिन क्या मैं सच में इसका इस्तेमाल करूँगा?
00:03:10मैं इसका इस्तेमाल असल में किसलिए करूँगा?
00:03:12और कुछ लोगों ने तो इस बात का विरोध तक नहीं किया।
00:03:14उन्होंने कहा कि इसका कोई व्यावहारिक मकसद नहीं है।
00:03:16यह मनोरंजक है, और हर चीज़ के लिए एक वजह होना जरूरी नहीं है।
00:03:19किसी और ने छोटे-मोटे बदलावों के लिए एक वाजिब तर्क दिया।
00:03:23एक साधारण Git Diff देखना, 3D टूर में एजेंट को देखने से कहीं ज़्यादा तेज़ है।
00:03:28मैं समझ सकता हूँ।
00:03:29तो बात यह है कि यह बहुत नया है।
00:03:31यह सिर्फ वर्ज़न 0.3 है।
00:03:32यह केवल Claude Code और Codex के लॉग्स पढ़ता है।
00:03:34अगर आप Cursor का इस्तेमाल करते हैं, तो आप अभी अपने सेशन्स को रीप्ले नहीं कर सकते।
00:03:38जिससे यह सवाल उठता है कि यह असल में किसके लिए है?
00:03:41क्या यह बस मजे़ के लिए है?
00:03:42खैर, अगर आप मॉड्यूल्स की तुलना कर रहे हैं, तो आप देखना चाहेंगे कि Claude कैसे छानबीन करता है।
00:03:45किसी टास्क पर, बनाम Codex कैसे करता है।
00:03:48यह देखने का बहुत शानदार ज़रिया है जो कहीं और नहीं मिलता।
00:03:51अगर आप एजेंट द्वारा किए गए किसी बहुत बड़े बदलाव को देख रहे हैं, और सामान्य Diff से आपको
00:03:56समझ नहीं आ रहा कि क्या हुआ, तो यह 3D व्यू और जज रिपोर्ट काफी काम की है।
00:04:01यह उसे आसान बना देती है।
00:04:02लेकिन केवल दो लाइनों के फिक्स के लिए, प्लीज।
00:04:04बस Diff पढ़ लीजिए।
00:04:05मुझे नहीं लगता कि MindWalk हमारे किसी रिव्यू टूल की जगह लेने वाला है।
00:04:09लेकिन यह यहाँ शायद इसलिए है ताकि आपको उस प्रक्रिया का अनुभव हो सके जिसे हमारे टूल
00:04:14दिखाने के लिए नहीं बनाए गए थे।
00:04:15और यह वही हिस्सा है जिसके साथ हम यहाँ प्रयोग कर सकते हैं।
00:04:19हमने अपनी मशीनों को कोड लिखना इतनी तेज़ी से सिखा दिया, उससे कहीं तेज़
00:04:24कि हम उनके लिखे कोड को समझ पाते।
00:04:25Graphify की तरह, MindWalk भी...
00:04:29ठीक है, मुझे लगता है मैं इसे सही बोल रहा हूँ।
00:04:31यह इस खाई को पाटने का पहला गंभीर प्रयास हो सकता है, जिससे आप देख सकते हैं कि एजेंट पूरे कोडबेस में
00:04:36कैसे तर्क लगाता है, न कि केवल वे कीस्ट्रोक्स जिन्हें उसने कोड लिखते समय छोड़ा।
00:04:40यह अभी शुरुआती और कच्चा है, लेकिन यह बिल्कुल सही समस्या पर लक्षित है।
00:04:43इसे इस्तेमाल करके देखें और समझें कि क्या यह आपके काम आता है।
00:04:46अगर आपको कोडिंग के ऐसे टिप्स और ट्रिक्स पसंद आते हैं, तो BetterStack चैनल को सब्सक्राइब करना न भूलें।
00:04:50आपसे दूसरे वीडियो में मिलते हैं।

Key Takeaway

माइंडवॉक (MindWalk) AI कोडिंग एजेंट्स के लॉग्स को Three.js और 3D विज़ुअलाइज़ेशन में बदलकर यह समझने में मदद करता है कि एजेंट ने कोड बदलने से पहले किस प्रकार तर्क लगाया और किन फाइलों का विश्लेषण किया।

Highlights

  • माइंडवॉक (MindWalk) Go भाषा में निर्मित एक सिंगल बाइनरी टूल है जो Claude Code और Codex के लोकल सेश़न लॉग्स को पढ़कर कोडबेस को 3D शहर के रूप में रेंडर करता है।

  • 3D मॉडल में प्रत्येक फाइल एक इमारत दर्शाती है, जहाँ कोड की पंक्तियों की संख्या के आधार पर इमारत की ऊँचाई तय होती है।

  • विज़ुअलाइज़र में हल्का हरा रंग फाइल को केवल देखने, नीला रंग ध्यान से पढ़ने और नारंगी (अंबर) रंग कोड में बदलाव करने को प्रदर्शित करता है।

  • माइंडवॉक का 'analyze' कमांड लोकल Claude या Codex मॉडल की मदद से एजेंट के काम का रिव्यू करके खामियों के सीधे क्लिक करने योग्य लिंक जनरेट करता है।

  • माइंडवॉक का वर्ज़न 0.3 वर्तमान में केवल Claude Code और Codex के सेश़न लॉग्स को सपोर्ट करता है, जबकि Cursor जैसे टूल्स के लिए रीप्ले सपोर्ट अभी उपलब्ध नहीं है।

Timeline

AI एजेंट्स के काम को विज़ुअलाइज़ करने की आवश्यकता

  • पारंपरिक एजेंट लॉग्स केवल निष्पादित कमांड और संपादन दिखाते हैं, लेकिन एजेंट की समझ और फाइल चयन की प्रक्रिया को उजागर नहीं करते।
  • माइंडवॉक (MindWalk) एजेंट के पूरे कार्य-प्रवाह को 3D वातावरण में प्रस्तुत करके कोडबेस की समीक्षा प्रक्रिया को आसान बनाता है।

लंबे कोड स्क्रॉलिंग और एजेंट के अस्पष्ट बदलावों से निपटने के लिए एक विज़ुअल मॉडल की आवश्यकता बनी। एजेंट ने संपादन से पहले किन फाइलों की छानबीन की और अपनी निर्धारित सीमा में काम किया या नहीं, यह जानकारी केवल टेक्स्ट लॉग्स से स्पष्ट नहीं होती। MindWalk इस छिपी हुई प्रक्रिया को दृश्यमान बनाता है।

माइंडवॉक की वास्तुकला और कार्यप्रणाली

  • यह टूल Go बाइनरी से लोकल डिस्क में मौजूद सेश़न लॉग्स को पढ़ता है और ब्राउज़र में Three.js के ज़रिए 3D दृश्य रेंडर करता है।
  • इमारतों के रंग एजेंट की गतिविधि का स्तर दर्शाते हैं, जहाँ ठंडे रंग केवल निरीक्षण और गर्म रंग कोड में बदलाव का संकेत देते हैं।
  • टाइमलाइन मार्कर्स सब-एजेंट की शुरुआत, कॉन्टेक्स्ट विंडो के संकुचन और उपयोगकर्ता के हस्तक्षेप के सटीक क्षण दिखाते हैं।

Claude Code या Codex के सेश़न को MindWalk कमांड के ज़रिए रेंडर करने पर पूरा कोडबेस इमारतों के रूप में दिखाई देता है। प्ले बटन दबाने पर समयरेखा के अनुसार रंग बदलते हैं। हल्का हरा रंग फाइल देखने, नीला रंग गहन अध्ययन और अंबर रंग बदलाव को दर्शाता है। टाइमलाइन को आगे-पीछे करके एजेंट के पूरे रास्ते को ट्रैक किया जा सकता है।

विश्लेषण कमांड और बिना सेश़न का 3D मैपिंग फीचर

  • इनबिल्ट 'analyze' कमांड पूरे सेश़न का मूल्यांकन करके एजेंट के अनावश्यक भटकाव और स्व-जांच की कमी को उजागर करता है।
  • बिना किसी एक्टिव सेश़न लॉग के भी 'map' कमांड किसी भी रिपॉजिटरी को सीधे 3D शहर के रूप में रेंडर कर देता है।

विज़ुअलाइज़ेशन के अलावा टूल में मौजूद 'analyze' फ़ीचर लोकल मॉडल का उपयोग करके स्वचालित समीक्षा रिपोर्ट तैयार करता है। रिपोर्ट में दिए गए निष्कर्ष सीधे टाइमलाइन के विशिष्ट बिंदुओं से जुड़े होते हैं, जिससे त्रुटियों का तुरंत पता लगाया जा सकता है। वहीं 'map' कमांड किसी भी परियोजना की संरचना को बिना किसी अतिरिक्त सेटअप के दृश्य रूप में बदल देता है।

व्यावहारिक उपयोगिता और सीमाएँ

  • दो लाइनों के छोटे बदलावों के लिए साधारण Git Diff देखना 3D टूर चलाने की तुलना में अधिक तेज़ और प्रभावी है।
  • यह टूल बड़े बदलावों का विश्लेषण करने और विभिन्न AI मॉडल्स के अन्वेषण पैटर्न की परस्पर तुलना करने में सर्वाधिक उपयोगी है।

वर्ज़न 0.3 में होने के कारण अभी Cursor जैसे लोकप्रिय एडिटर्स का रीप्ले सपोर्ट उपलब्ध नहीं है। Hacker News पर मिली प्रतिक्रियाओं के अनुसार छोटे बदलावों के लिए Git Diff ही बेहतर विकल्प है। हालांकि, बड़े बदलावों की समीक्षा करने और Claude बनाम Codex के सोचने के तरीके की तुलना करने के लिए यह एक प्रभावी माध्यम है, जो AI द्वारा तेज़ी से लिखे जा रहे कोड और इंसानी समझ के बीच के अंतर को पाटता है।

Community Posts

View all posts