00:00:00जब हर हफ्ते एक नया डिज़ाइन टूल आता है, तो आपको कैसे पता चलेगा कि असल में कौन सा इस्तेमाल करने लायक है?
00:00:04दिक्कत यह है कि हर दिन नए टूल्स लॉन्च हो रहे हैं, जो क्वालिटी का वादा तो करते हैं, लेकिन उनमें से ज़्यादातर सिर्फ दिखावा होते हैं।
00:00:09टूल्स की टेस्टिंग के दौरान, हमें कुछ ऐसे टूल्स मिले जो वाकई अपने वादे पर खरे उतरते हैं और हमारे वर्कफ़्लो में अच्छी तरह फिट बैठते हैं।
00:00:15हमारी टीम का एक सदस्य कार के लिए एक प्रोडक्ट लैंडिंग पेज पर काम कर रहा था, जिसके हीरो सेक्शन में 3D एनिमेशन था।
00:00:21इस वेबसाइट का सोर्स कोड और इसमें इस्तेमाल किए गए सभी फीचर्स AI Labs Pro पर उपलब्ध हैं।
00:00:25जो लोग नहीं जानते, उनके लिए बता दूँ कि यह हमारी हाल ही में लॉन्च की गई कम्युनिटी है जहाँ आपको बने-बनाए टेम्पलेट्स, प्रॉम्प्ट्स और वो सभी कमांड्स और स्किल्स मिलते हैं जिन्हें आप इस वीडियो और पिछले सभी वीडियो के प्रोजेक्ट्स में सीधे इस्तेमाल कर सकते हैं।
00:00:36अगर आपको हमारे काम से मदद मिली है और आप चैनल को सपोर्ट करना चाहते हैं, तो यह इसका सबसे अच्छा तरीका है। लिंक्स डिस्क्रिप्शन में हैं।
00:00:42तो ऐसी वेबसाइट बनाने का पहला कदम है एक अच्छा एसेट होना, और इसके लिए मैंने AI-पावर्ड 3D ऑब्जेक्ट जनरेटर, Tripo3D का इस्तेमाल किया।
00:00:50जब मैंने साइन-इन किया, तो मुझे लगभग 300 क्रेडिट्स मिले, जो करीब 10 जनरेशंस के लिए काफी थे।
00:00:54अब मुझे 3D में बदलने के लिए एक इमेज की ज़रूरत थी।
00:00:57हीरो सेक्शन के लिए मेरे पास कार की एक इमेज थी, लेकिन बैकग्राउंड की वजह से मॉडल जनरेशन में दिक्कत आ रही थी क्योंकि ऐसे टूल्स के लिए बैकग्राउंड और फोरग्राउंड की पहचान करना मुश्किल होता है, और मैं खराब आउटपुट पर क्रेडिट्स बर्बाद नहीं करना चाहता था।
00:01:08इसलिए मैंने Canva के बैकग्राउंड रिमूवर टूल का इस्तेमाल करके बैकग्राउंड हटा दिया, लेकिन आप Remove BG का भी इस्तेमाल कर सकते हैं, जो एक फ्री विकल्प है।
00:01:16बैकग्राउंड हटने के बाद, मैं Tripo3D पर गया और उस इमेज को एक रेफरेंस के तौर पर अपलोड कर दिया।
00:01:21मॉडल जेनरेट होने में करीब 1 मिनट लगा और यह काफी हद तक ओरिजिनल इमेज जैसा ही था।
00:01:25मैं हर एंगल से मॉडल को चेक कर पा रहा था, और मॉडल सभी तरफ से बिल्कुल सही दिख रहा था।
00:01:31जब 3D मॉडल तैयार हो गया, तो मैंने उसे एक्सपोर्ट कर लिया।
00:01:34Tripo3D के फ्री प्लान पर आपको सिर्फ 15 एक्सपोर्ट्स मिलते हैं, इसलिए मैंने तसल्ली कर ली कि जनरेशन सही है और दो कोशिशों में से जो सबसे अच्छा था, उसे डाउनलोड किया।
00:01:43मैंने रेजोल्यूशन को 4K पर सेट किया और उसे एक्सपोर्ट कर दिया।
00:01:45GLB फाइल डाउनलोड होने के बाद, मैंने उसे एक नए Next.js ऐप की पब्लिक डायरेक्टरी में डाल दिया, ताकि उसे आसानी से एक्सेस किया जा सके।
00:01:52दूसरे फॉर्मेट्स के बजाय GLB में एक्सपोर्ट करने की वजह यह है कि इसमें टेक्सचर्स और मटेरियल्स अलग होने के बजाय एक ही फाइल में होते हैं, और यह एक नेटिव वेब फॉर्मेट है, इसलिए यह वेब लाइब्रेरीज़ के साथ आसानी से जुड़ जाता है।
00:02:04जब GLB फाइल तैयार हो गई, तो इसे वेब ऐप में लागू करने का समय था।
00:02:08लैंडिंग पेज बनाने के लिए, मैंने Codex ऐप को चुना, जो हाल ही में रिलीज़ हुआ है और फिलहाल सिर्फ macOS पर उपलब्ध है।
00:02:14अब आप सोच रहे होंगे कि जब हमारे पास पहले से ही Claude code है, तो हम इस वीडियो में Codex का इस्तेमाल क्यों कर रहे हैं?
00:02:19अपने नए प्रोडक्ट की लॉन्चिंग के साथ, वे फ्री प्लान्स पर भी बड़ी लिमिट्स और अच्छा कोटा दे रहे हैं, इसलिए अभी इसका फायदा उठाने का सबसे अच्छा समय है।
00:02:29लेकिन आप अपनी पसंद के किसी भी एजेंट के साथ यही प्रोसेस फॉलो कर सकते हैं।
00:02:32मैंने Codex डाउनलोड किया और उसमें प्रोजेक्ट फोल्डर खोल लिया।
00:02:34इसका इंटरफेस काफी हद तक AntiGravity के एजेंट मैनेजर जैसा है, लेकिन यह कोड के बजाय एजेंट्स पर ज़्यादा फोकस करता है।
00:02:40इसका “स्किल्स” फीचर हमें सबसे ज़्यादा पसंद आया।
00:02:43दूसरे एजेंट्स में जब भी आपको अपनी स्किल बनानी होती है, तो आपको एक ओपन-सोर्स स्किल क्रिएटर लेना पड़ता है और वहां से उसे बनाना पड़ता है।
00:02:49लेकिन Codex में स्किल क्रिएटर पहले से ही मौजूद है और इसमें इंस्टॉलेशन के साथ कई काम की स्किल्स भी मिलती हैं, जो दूसरे एजेंट्स में नहीं थीं।
00:02:563D एनिमेशन के काम को आसान बनाने के लिए, मैंने स्किल क्रिएटर का इस्तेमाल किया और विस्तार से बताया कि इसे एनिमेशन कैसे बनाना चाहिए और किन लाइब्रेरीज़ का इस्तेमाल करना चाहिए।
00:03:06इसने कुछ सवाल पूछे, और उनके जवाब देने के बाद, इसने स्किल क्रिएटर की स्क्रिप्ट्स चलाईं, स्किल तैयार की और उसे इस्तेमाल के लिए रेडी कर दिया।
00:03:13अब यहाँ एक चीज़ अलग थी।
00:03:14आमतौर पर, एजेंट्स स्किल्स को अपने .agent या .claud फोल्डर में इंस्टॉल करते हैं, लेकिन Codex ने इसे रूट फोल्डर में इंस्टॉल किया, इसलिए मैंने इसे मैन्युअली .agent फोल्डर में डाल दिया।
00:03:24लेकिन इसने Claude द्वारा तय किए गए उसी ओपन-सोर्स एजेंट फ्रेमवर्क को फॉलो किया, जिसमें स्क्रिप्ट्स, रेफरेंस और स्किल में क्षमताएं जोड़ने के लिए सभी एसेट्स मौजूद थे।
00:03:33इसमें एक yaml फाइल भी थी जिसमें जेनेरिक प्रॉम्प्ट था, जो एजेंट को यह समझने में मदद करता है कि किस यूजर प्रॉम्प्ट पर यह स्किल ट्रिगर होगी।
00:03:40मैंने Codex को अभी-अभी बनाई गई स्किल का इस्तेमाल करके एनिमेशन सेटअप करने का काम दिया, और प्रॉम्प्ट में सभी ज़रूरी डिटेल्स डाल दीं।
00:03:47इसने काम शुरू किया और इंस्टॉल कमांड्स चलाए।
00:03:49काफी समय बाद इसने काम पूरा किया, लेकिन इसने कहा कि कमांड टाइमआउट की वजह से यह डिपेंडेंसीज़ इंस्टॉल नहीं कर पाया, इसलिए मैंने इसे डिपेंडेंसीज़ को सीधे package.json में लिखने को कहा।
00:04:01जब मैंने मैन्युअली इंस्टॉल कमांड चलाया, तो लाइब्रेरीज़ के अलग-अलग वर्जन्स की वजह से एरर्स आने लगे।
00:04:08मुझे Codex के साथ कई बार डीबगिंग करनी पड़ी, जब तक कि हीरो सेक्शन का एनिमेशन मेरी पसंद के मुताबिक काम नहीं करने लगा।
00:04:14अब Codex हर एक फीचर को पूरा करने में काफी समय ले रहा था, इसलिए मैंने काम को चार सब-टास्क में बाँट दिया।
00:04:21हर टास्क में लैंडिंग पेज का एक फीचर था जो दूसरों से अलग था और उसमें अपने खुद के गोल्स, ज़रूरतें और सीमाएं थीं।
00:04:28मैंने Codex के मल्टी-एजेंट फीचर का इस्तेमाल किया और हर एजेंट को एक टास्क सौंप दिया।
00:04:32चूंकि वे सभी एक ही लैंडिंग पेज पर काम कर रहे थे, मैंने उन्हें मेन ब्रांच के बजाय अलग-अलग वर्क-ट्रीज़ में काम करने को कहा, क्योंकि एक ही सेक्शन पर काम करने वाले एजेंट्स कोड में टकराव (conflicts) पैदा कर सकते हैं।
00:04:43लगभग सभी एजेंट्स ने एक ही समय के आसपास अपना काम पूरा कर लिया।
00:04:46मैंने उनके आउटपुट को मर्ज किया और बिना किसी कॉन्फ्लिक्ट के सारे फीचर्स एक साथ मिल गए, और यह अकेले Codex के मुकाबले काफी तेज़ था।
00:04:55अब वेबसाइट तैयार थी और इसमें ज़रूरी कंपोनेंट्स भी थे, लेकिन हीरो सेक्शन के अलावा बाकी सब कुछ बिना एनिमेशन के काफी सपाट लग रहा था, तो मैंने उसके लिए gsap का सहारा लिया।
00:05:03gsap एक जावास्क्रिप्ट एनिमेशन लाइब्रेरी है जिसे बहुत से प्रोफेशनल्स इस्तेमाल करते हैं और इसकी परफॉरमेंस बेहतरीन होती है।
00:05:09चूंकि पहले डिपेंडेंसीज़ में दिक्कत आ रही थी और टाइमआउट एरर मिला था, इसलिए मैंने टर्मिनल पर जाकर npm install कमांड से पहले ही gsap इंस्टॉल कर लिया।
00:05:18मैंने Codex को एनिमेशन जोड़ने के लिए बहुत ही विस्तृत निर्देश दिए और उसे खास तौर पर हीरो सेक्शन को न छेड़ने को कहा क्योंकि वह पहले से ही ठीक था।
00:05:27मैंने एनिमेशन कहाँ और कैसे जोड़ने हैं, इसके लिए खास निर्देश दिए। इस काम को करने में उसने काफी समय लिया।
00:05:33कुछ छोटी-मोटी गलतियाँ थीं जिन्हें मैंने Codex को वापस एरर मैसेज देकर ठीक करवाया।
00:05:37उसके बाद एनिमेशन्स लागू हो गए और हीरो सेक्शन बिल्कुल वैसा ही रहा जैसा वह पहले था।
00:05:42लेकिन बाकी सभी सेक्शन्स में स्क्रॉल से ट्रिगर होने वाले एनिमेशन्स जुड़ गए, जिससे पूरी साइट के अहसास में एक बड़ा बदलाव आया।
00:05:48अब वेबसाइट में एनिमेशन तो थे, लेकिन हीरो सेक्शन के मुकाबले बाकी कंपोनेंट्स अभी भी साधारण लग रहे थे।
00:05:54तो मैं Aceternity UI पर गया और वहां से कंपोनेंट्स चुने क्योंकि Aceternity के कंपोनेंट्स में पहले से ही बहुत सारे माइक्रो-इंटरेक्शन और एनिमेशन होते हैं जिन्हें सीधे प्रोजेक्ट में इस्तेमाल किया जा सकता है।
00:06:04मैंने Codex से मौजूदा कंपोनेंट्स को Aceternity के कंपोनेंट्स से बदलने को कहा, साथ ही एनिमेशन्स को वैसे ही रखने का निर्देश दिया।
00:06:10इंप्लीमेंटेशन के बाद, मैंने देखा कि उसने कुछ ऐसे ग्रेडिएंट्स जोड़ दिए थे जो ऐप की थीम से मेल नहीं खा रहे थे।
00:06:14इसलिए मैंने उसे एक स्क्रीनशॉट दिया और बताया कि ग्रेडिएंट्स थीम के खिलाफ जा रहे हैं, जिसके बाद उसने उन्हें मैचिंग कलर्स से बदल दिया।
00:06:21लेकिन जब मैंने एनिमेशन्स देखे, तो जो कंपोनेंट्स उसने लगाए थे वे स्थिर थे और उनमें वे माइक्रो-इंटरेक्शन नहीं थे जो आमतौर पर Aceternity कंपोनेंट्स में होते हैं।
00:06:30तो मैंने Codex को बताया कि कुछ Aceternity कंपोनेंट्स में टिल्ट-ऑन-होवर जैसे माइक्रो-इंटरेक्शन भी होते हैं और उसे साधारण वाले के बजाय उनका इस्तेमाल करने को कहा।
00:06:38उसके बाद, कंपोनेंट्स में होवर-टिल्ट और इंटरेक्शन इफेक्ट्स आ गए और साइट काफी इंटरैक्टिव लगने लगी।
00:06:44विजुअल्स को और बेहतर बनाने के लिए, मैंने “post-processing” नाम की एक पब्लिक रिपॉजिटरी का इस्तेमाल किया जो NPM पैकेज के रूप में उपलब्ध है।
00:06:51यह एक पोस्ट-प्रोसेसिंग एनिमेशन लेयर है जो React 3 fiber का इस्तेमाल करते समय एफेक्ट्स के बाद लगाई जाती है।
00:06:56इसके ज़रिए हम हाई-परफॉरमेंस रिजल्ट्स के लिए गामा करेक्शन और दूसरी बारीकियों जैसी इमेज प्रोसेसिंग सुविधाओं का इस्तेमाल कर सकते हैं।
00:07:01मैंने Codex को इस लाइब्रेरी का इस्तेमाल करके हल्के लाइटिंग इफेक्ट्स बनाने के लिए प्रॉम्प्ट दिया और उसे पूरी प्रोसेस में मेरा मार्गदर्शन करने को कहा।
00:07:07पहली बार में यह सही नहीं हुआ और आउटपुट में कोई खास अंतर नहीं दिखा।
00:07:11मुझे बार-बार प्रॉम्प्ट देकर इसे डीबग करना पड़ा जब तक कि आखिर में इफेक्ट सही नहीं हो गया और 3D मॉडल में एक हल्की चमक (glow) जुड़ गई, जिससे हीरो सेक्शन की लाइटिंग और भी शानदार दिखने लगी।
00:07:23इसी के साथ हम इस वीडियो के अंत में पहुँच गए हैं।
00:07:25अगर आप चैनल को सपोर्ट करना चाहते हैं और हमें ऐसे ही वीडियो बनाने में मदद करना चाहते हैं, तो आप नीचे दिए गए 'Super Thanks' बटन का इस्तेमाल कर सकते हैं।
00:07:31हमेशा की तरह, देखने के लिए धन्यवाद और मैं आपसे अगले वीडियो में मिलूँगा।