00:00:00जेनरेटिव AI कितना शक्तिशाली हो गया है।
00:00:02नए टूल लगातार सामने आ रहे हैं,
00:00:03और सबके बीच,
00:00:04Google ने Gemini 3 के आने के बाद से वाकई अपना खेल सुधार लिया है।
00:00:07इसी वजह से,
00:00:08आपने शायद X पर लोगों को एक ही बार में ये शानदार लैंडिंग पेज बनाते देखा होगा और कहते देखा होगा कि ये मॉडल गेम चेंजर है।
00:00:14लेकिन वे झूठ बोल रहे हैं।
00:00:15सच्चाई यह है कि उन्हें ये साइट्स बनाने के लिए कई टूल्स का इस्तेमाल करना पड़ता है।
00:00:18और Google अपने प्रयोगात्मक टूल्स के साथ जबरदस्त काम कर रहा है,
00:00:21जो Gemini 3 और Nano Banana द्वारा संचालित हैं।
00:00:23लेकिन Google इन सभी को एक साथ इस्तेमाल करने का कोई तरीका नहीं देता।
00:00:26इसलिए आपको एक पूर्ण वर्कफ़्लो की जरूरत होगी जो इन सभी टूल्स को जोड़ता है।
00:00:29आज हमें बहुत कुछ बात करनी है,
00:00:30क्योंकि मुझे वास्तव में उम्मीद नहीं थी कि ये इतनी अच्छी तरह से एक साथ काम करेंगे।
00:00:34उन साइट्स पर आप जो एनिमेशन देखते हैं,
00:00:35वे सिर्फ फ्रेम्स की एक श्रृंखला हैं।
00:00:37लेकिन अगर आप इन फ्रेम्स को जेनरेट करने के लिए AI टूल्स का इस्तेमाल करते हैं,
00:00:40तो आपको लगातार परिणाम नहीं मिलते।
00:00:41Google इसे WISC नामक एक प्रयोगात्मक टूल जारी करके हल करता है,
00:00:44जो विशेष रूप से एसेट जेनरेशन के लिए डिज़ाइन किया गया है।
00:00:47यह इमेज जेनरेशन के लिए Nano Banana द्वारा संचालित है।
00:00:49मैं अक्सर हीरो सेक्शन के लिए इमेज की श्रृंखला बनाने के लिए WISC का इस्तेमाल करता हूं।
00:00:53मैं सरल शब्दों में प्रॉम्प्ट देता हूं,
00:00:55हर सीक्वेंस के लिए कदम-दर-कदम विवरण अपडेट करता हूं,
00:00:58और फिर हीरो सेक्शन में परिणामी इमेज का इस्तेमाल करता हूं।
00:01:01इस पूरी प्रक्रिया का उपयोग करके,
00:01:02मैंने यह लैंडिंग पेज बनाया और कैमरे के साथ इस शानदार एनिमेटेड इफेक्ट को लागू करने में सफल रहा।
00:01:07शुरुआत करने के लिए,
00:01:07हम एक सीक्वेंस के सिर्फ पहले और आखिरी फ्रेम जेनरेट करेंगे,
00:01:10और फिर हीरो सेक्शन के लिए उन दो कीफ्रेम्स का उपयोग करके एक एनिमेशन बनाएंगे।
00:01:14लेकिन अगर आप बिना किसी संरचना के सिर्फ प्रॉम्प्ट करना शुरू करते हैं,
00:01:17तो जो कीफ्रेम्स आप चाहते हैं उनमें समान संरचना निरंतरता नहीं होगी।
00:01:20इस उद्देश्य के लिए,
00:01:21आपको स्पष्ट रूप से विषय,
00:01:22विज़ुअल इरादा,
00:01:23और आप इमेज में कितना विवरण चाहते हैं,
00:01:25यह परिभाषित करना होगा।
00:01:26WISC इमेज जेनरेशन को गाइड करने के लिए एक विषय,
00:01:28दृश्य और शैली की फ्रेमवर्क का उपयोग करता है,
00:01:30जो आपको उन्हें एक नए विज़ुअल में संयोजित करने की अनुमति देता है।
00:01:33इसलिए मैंने सभी विवरण शामिल किए कि मुझे किस तरह का कैमरा चाहिए,
00:01:36लेंस पर रिफ्लेक्शन कैसे दिखें,
00:01:38रिज़ॉल्यूशन क्या हो,
00:01:39और इमेज की गहराई कितनी हो,
00:01:40और इसने ठीक वैसा ही विज़ुअल बनाया जैसा प्रॉम्प्ट में बताया गया था।
00:01:44जेनरेट की गई इमेज हमेशा आपकी अपेक्षाओं को पूरा नहीं करेगी।
00:01:47ऐसे मामले में,
00:01:48आपको बस सरल शब्दों में बदलाव का उल्लेख करना होगा,
00:01:50और यह बदलावों को एक नए विज़ुअल में शामिल कर देता है।
00:01:53WISC के बारे में मुझे सबसे ज्यादा जो पसंद है वह यह है कि आपको बेहतरीन परिणाम पाने के लिए लंबे,
00:01:56विस्तृत प्रॉम्प्ट लिखने की जरूरत नहीं है।
00:01:58ऐसा इसलिए है क्योंकि यह मध्य परत के रूप में Gemini 3 का उपयोग करता है,
00:02:01जो आपके सरल शब्दों के ऊपर विस्तृत प्रॉम्प्ट लिखता है,
00:02:04जिससे बेहतरीन विज़ुअल मिलते हैं।
00:02:05अब सवाल उठता है कि मैंने WISC को क्यों चुना।
00:02:08जबकि Nano Banana को व्यापक टेक्स्ट प्रॉम्प्ट की जरूरत होती है,
00:02:10और Google का Mix Board मूड बोर्ड के लिए डिज़ाइन किया गया है,
00:02:13दोनों में से कोई भी तेज़,
00:02:14नियंत्रित इमेज रीमिक्सिंग के लिए अनुकूलित नहीं है।
00:02:16WISC की मुख्य ताकत रेफरेंस इमेज को संयोजित करने में निहित है,
00:02:19जो आपको बेहतर नियंत्रण के साथ इमेज जेनरेट करने की अनुमति देती है।
00:02:21जब मेरे पास मेरा पहला फ्रेम था,
00:02:23तो मैं चाहता था कि मेरा आखिरी फ्रेम कैमरे का साइड एंगल हो,
00:02:25जिसमें घटकों को दिखाने के लिए लेंस को अलग किया गया हो।
00:02:28इसलिए मैंने इसे एक तकनीकी कटअवे जेनरेट करने के लिए प्रॉम्प्ट किया,
00:02:31यह निर्दिष्ट करते हुए कि इसे आंतरिक लेंस को कैसे लेयर करना चाहिए,
00:02:33और बैकग्राउंड कैसा दिखना चाहिए।
00:02:35यह पहली कोशिश में सही नहीं हुआ।
00:02:37इसने आंतरिक सर्किटरी को भी तोड़ दिया,
00:02:38जिसे मैं नहीं दिखाना चाहता था।
00:02:40जैसा कि मैंने पहले कहा,
00:02:41आपको बस वह बदलाव बताना होता है जो आप करना चाहते हैं।
00:02:42इसलिए मैंने इसे केवल लेंस लेयरिंग दिखाने का निर्देश दिया,
00:02:46जिसके बाद इसने आंतरिक सर्किटरी दिखाए बिना सफलतापूर्वक इमेज जेनरेट की।
00:02:49अब,
00:02:50WISC VIO मॉडल का उपयोग करके एनिमेशन का भी समर्थन करता है।
00:02:53लेकिन WISC के एनिमेशन एक इमेज को एनिमेट करने पर केंद्रित होते हैं,
00:02:56बजाय इसके कि कई कीफ्रेम्स को एक साथ जोड़ सकें।
00:02:58इसलिए मैंने Google Flow नामक एक और टूल का इस्तेमाल किया।
00:03:01Flow कहानी की योजना बनाने के लिए Gemini का,
00:03:02स्थिर पात्रों को डिज़ाइन करने के लिए Google के इमेज मॉडल का,
00:03:05और वीडियो कंटेंट बनाने के लिए VIO का उपयोग करता है।
00:03:07मैंने पहले ही कैमरा एनिमेशन के लिए अपने शुरुआती और अंतिम फ्रेम बना लिए थे,
00:03:10और अब मैं उनमें एक ट्रांजिशन बनाना चाहता था।
00:03:13इसलिए मैंने फ्रेम टू वीडियो विकल्प का इस्तेमाल किया और अपने फ्रेम प्रदान किए।
00:03:16सुचारू संक्रमण सुनिश्चित करने के लिए,
00:03:17आपको प्रॉम्प्ट में यह उल्लेख करना होगा कि शुरुआती फ्रेम अंतिम फ्रेम तक कैसे पहुँचता है,
00:03:21क्योंकि यह मॉडल को एक तार्किक मार्ग प्रदान करता है।
00:03:24आपके प्रॉम्प्ट में यह शामिल होना चाहिए कि आप एनिमेशन को कैसे प्रवाहित करना चाहते हैं,
00:03:27शुरुआती फ्रेम को अंतिम फ्रेम में कैसे संक्रमित होना चाहिए और एनिमेशन शैली क्या होनी चाहिए,
00:03:30क्योंकि ये विवरण सुनिश्चित करते हैं कि गति जानबूझकर की गई है।
00:03:33कभी-कभी ये मॉडल जटिल कार्यों में गलतियाँ करते हैं,
00:03:35इसलिए इसने मेरा एनिमेशन पहली बार में सही नहीं किया।
00:03:38जेनरेट किए गए वीडियो में स्पिन की दिशा और अंतिम फ्रेम दोनों पूरी तरह से गलत थे,
00:03:43जिससे संक्रमण अजीब हो गया।
00:03:44समाधान बस कुछ आवश्यक परिवर्तनों के साथ पुनः प्रॉम्प्ट करना था ताकि एनिमेशन सही हो,
00:03:48बिल्कुल वैसे ही जैसे मैंने सुगम संक्रमण के लिए कैमरे के घूमने की दिशा बदलने के लिए प्रॉम्प्ट किया,
00:03:53जिसके बाद इसने वह संस्करण तैयार किया जो मैं चाहता था और जिसे मैंने अपने प्रोजेक्ट में उपयोग के लिए डाउनलोड किया।
00:03:58अब वीडियो जेनरेशन फ्री टियर पर असीमित रूप से उपलब्ध नहीं है क्योंकि वीडियो जेनरेशन मॉडल महंगे होते हैं।
00:04:04यह क्षेत्र के आधार पर केवल 180 मासिक क्रेडिट प्रदान करता है।
00:04:08चूंकि VIO 3.1 के साथ प्रत्येक वीडियो जेनरेशन 20 क्रेडिट का उपयोग करता है,
00:04:12इसलिए आपको प्रति माह 9 वीडियो तक मिलते हैं।
00:04:14चूंकि Flow द्वारा जेनरेट किए गए वीडियो MP4 फॉर्मेट में हैं और उन्हें सीधे Hero सेक्शन में उपयोग नहीं किया जा सकता क्योंकि उन्हें स्क्रॉल एनिमेशन के माध्यम से मैप करना कठिन है,
00:04:22इस कारण से मैंने उन्हें एक मुफ्त ऑनलाइन कनवर्टर का उपयोग करके WebP में परिवर्तित किया।
00:04:26मैंने MP4 वीडियो अपलोड किया,
00:04:27सर्वोत्तम गुणवत्ता वाला एनिमेटेड WebP बनाने के लिए कनवर्जन सेटिंग्स सेट कीं और यह WebP फॉर्मेट में परिवर्तित हो गया जिसे मैंने अपने प्रोजेक्ट में उपयोग के लिए डाउनलोड किया।
00:04:35WebP चुनना महत्वपूर्ण है क्योंकि इसके साथ स्क्रॉल इंटरैक्शन को मैप करना आसान है,
00:04:39क्योंकि वेब पर इस फॉर्मेट को एक इमेज के रूप में माना जाता है जिसे अन्य फॉर्मेट की तरह मीडिया प्लेयर रैपर की आवश्यकता नहीं होती। ये फाइलें अधिक कॉम्पैक्ट हैं और बेहतर प्रदर्शन देती हैं,
00:04:49जो उन्हें शॉर्ट फॉर्म एनिमेटेड कंटेंट के लिए आदर्श बनाता है।
00:04:52मैंने परिवर्तित WebP फाइल को अपने नए इनिशियलाइज़ किए गए Next.js प्रोजेक्ट की पब्लिक डायरेक्टरी में जोड़ा क्योंकि यहीं पर प्रोजेक्ट में सभी एसेट्स रहते हैं।
00:05:00अब जब हमारा एनिमेशन तैयार हो गया,
00:05:02तो मैं इसे अपने लैंडिंग पेज के Hero सेक्शन में जोड़ना चाहता था।
00:05:05मैं आम तौर पर Claude को XML फॉर्मेट में प्रॉम्प्ट करता हूँ क्योंकि उनके मॉडल XML को समझने के लिए अनुकूलित हैं,
00:05:10जिससे वे संरचित इरादे को अधिक विश्वसनीय रूप से पार्स कर सकते हैं और प्रत्येक खंड पर स्वतंत्र रूप से विचार कर सकते हैं।
00:05:15एनिमेशन जोड़ने के लिए मैंने Claude को जो प्रॉम्प्ट दिया उसमें इस बात का संदर्भ शामिल था कि मैं क्या बनाना चाहता हूँ,
00:05:21एनिमेशन के लिए एसेट्स कहाँ स्थित हैं और स्क्रॉल-थ्रू एनिमेशन को कैसे काम करना चाहिए और कॉन्टेक्स्ट टैग में हमारा लक्ष्य। मैंने रिक्वायरमेंट टैग में सभी आवश्यकताएँ शामिल कीं,
00:05:29एनिमेशन बिहेवियर टैग में वर्णन किया कि एनिमेशन को कैसे व्यवहार करना चाहिए और प्रॉम्प्ट में सीधे उनके संबंधित टैग के भीतर इम्प्लीमेंटेशन विवरण,
00:05:36बाधाएं और आवश्यक आउटपुट निर्दिष्ट किया। जब मैंने Claude को यह प्रॉम्प्ट दिया,
00:05:40तो इसने स्वचालित रूप से एनिमेशन को बिल्कुल वैसे ही लागू किया जैसा मैं चाहता था। हालांकि हमारा Hero सेक्शन अच्छा लग रहा था,
00:05:46बाकी कंपोनेंट्स सामान्य जेनेरिक वेबसाइटों जैसे दिख रहे थे जो AI आमतौर पर जेनरेट करता है। ऐसा इसलिए था क्योंकि हम मौजूदा सुंदर कंपोनेंट लाइब्रेरीज़ पर निर्भर होने के बजाय वेनिला CSS से उच्च गुणवत्ता के परिणामों की उम्मीद कर रहे थे।
00:05:57कई UI लाइब्रेरीज़ हैं,
00:05:58प्रत्येक की अपनी विशेष शैली और डिज़ाइन थीम है,
00:06:01लेकिन आपको वह लाइब्रेरी चुननी होगी जो आपके प्रोजेक्ट की शैली के लिए सबसे उपयुक्त हो। मेरे कैमरा लैंडिंग पेज के लिए,
00:06:07मैं Apple शैली UI के लिए जा रहा था और उस विचार के सबसे करीब लाइब्रेरी Hero UI है। यह Tailwind CSS के शीर्ष पर बनाई गई है और पूरी वेबसाइट पर अपने कंपोनेंट्स को जीवंत बनाने के लिए Framer Motion पर निर्भर करती है।
00:06:17यह लाइब्रेरी Next.js,
00:06:18Vite और Laravel जैसे सबसे अधिक उपयोग किए जाने वाले फ्रेमवर्क का समर्थन करती है। इसलिए मेरे मौजूदा Next.js सेटअप के साथ इसका उपयोग करना आसान था। इंस्टॉलेशन के दो तरीके हैं। या तो आप install कमांड के माध्यम से सभी कंपोनेंट्स के साथ इसे पूरे प्रोजेक्ट में इंस्टॉल करें या आप आवश्यकतानुसार अलग-अलग कंपोनेंट्स इंस्टॉल करें,
00:06:34जो मैंने Claude के साथ किया। मैंने Claude को मौजूदा कंपोनेंट्स को Hero UI कंपोनेंट्स से बदलने के लिए प्रॉम्प्ट किया और वेबसाइट में काफी सुधार हुआ,
00:06:41जिससे साइट को और अधिक पेशेवर रूप और अनुभव मिला। उपयोगकर्ता यह तय करते हैं कि लैंडिंग पेज पर रुकना है या नहीं,
00:06:46कुछ ही सेकंड में यह देखकर कि UI कितना आकर्षक है। मोशन विजिटर का ध्यान उन विशेषताओं की ओर आकर्षित करने में मदद करता है जिन्हें हम उन्हें दिखाना चाहते हैं,
00:06:53जिससे उपयोगकर्ता प्रतिधारण अधिक होता है। वेनिला JavaScript का उपयोग करके शुरुआत से एनिमेशन को लागू करना चुनौतीपूर्ण हो सकता है,
00:06:59इसलिए मैं प्रक्रिया को सरल बनाने के लिए मौजूदा लाइब्रेरी पर निर्भर रहता हूं। इस प्रोजेक्ट के लिए,
00:07:04मैंने Motion.dev का उपयोग किया,
00:07:05जो एक मुफ्त और ओपन सोर्स लाइब्रेरी है जो तैयार एनिमेशन की एक विस्तृत श्रृंखला प्रदान करती है। सामान्य रूप से,
00:07:11एनिमेशन के लिए DOM अपडेट को एनिमेशन टाइमिंग के साथ मैन्युअल रूप से सिंक करने की आवश्यकता होती है। हालांकि,
00:07:16Motion.dev इस तर्क को आंतरिक रूप से DOM अपडेट को संभालकर अमूर्त बनाता है। यह स्वचालित रूप से कंपोनेंट्स को अपडेट करता है जैसे ही उपयोगकर्ता स्क्रॉल करता है,
00:07:23ताकि एनिमेशन स्क्रॉल पोजीशन को मैन्युअल रूप से ट्रैक करने की आवश्यकता के बिना सुचारू रूप से चले। यह लाइब्रेरी मानक कंपोनेंट्स के बजाय मोशन कंपोनेंट्स का उपयोग करती है। इन कंपोनेंट्स में props में परिभाषित start और end states होती हैं,
00:07:34और लाइब्रेरी उनके बीच संक्रमणकालीन तर्क को स्वचालित रूप से संभालती है। हमारे लैंडिंग पेज के लिए,
00:07:39मैंने Claude को लाइब्रेरी का उपयोग करके parallax और scroll एनिमेशन लागू करने के लिए प्रॉम्प्ट किया। परिणामस्वरूप,
00:07:44पेज के मुख्य खंडों की ओर ध्यान आकर्षित करके उपयोगकर्ता अनुभव में सुधार हुआ। यह वर्णन करना कि पेज के अनुभाग कैसे दिखने चाहिए एक थकाऊ प्रक्रिया है। मौजूदा गैलरी से प्रेरणा लेना बेहतर है जहां लोग अपनी रचनाएं पोस्ट करते हैं। मैंने 21st.dev का उपयोग किया,
00:07:56जो एक ऐसा प्लेटफॉर्म है जो कई डिजाइनरों द्वारा बनाए गए विभिन्न प्रकार के UI कंपोनेंट्स के लिए प्रेरणा प्रदान करता है। ये कंपोनेंट्स Aceternity UI,
00:08:03Prism UI,
00:08:04Coconut UI,
00:08:04Magic UI और कई अन्य जैसी लोकप्रिय UI लाइब्रेरी के ऊपर बनाए गए हैं। विचारों की तलाश करते समय,
00:08:09मुझे यह call to action सेक्शन मिला जो मेरे लैंडिंग पेज पर बहुत अच्छा लगेगा। 21st.dev के बारे में मुझे सबसे अच्छी बात यह लगती है कि किसी भी कंपोनेंट के लिए जिसे मैं उपयोग करना चाहता हूं,
00:08:18मैं AI कोडिंग एजेंट के लिए विशेष रूप से तैयार किए गए प्रॉम्प्ट की कॉपी कर सकता हूं। मुझे खुद Claude को गाइड करने की आवश्यकता नहीं है। प्रॉम्प्ट व्यापक रूप से संरचित है,
00:08:26जिसमें ShadCN और TypeScript समर्थन जैसी परियोजना आवश्यकताएं शामिल हैं। यह कोडिंग एजेंट के लिए निर्देशों के साथ कोड प्रदान करता है कि सीधे कंपोनेंट्स डायरेक्टरी में पेस्ट करें। इसमें सभी आवश्यक dependency कोड और वे paths शामिल हैं जहां इसे जोड़ा जाना चाहिए,
00:08:38और यह आवश्यक NPM पैकेज की सूची देता है जिन्हें इंस्टॉल करना है। इसमें आपके AI एजेंट के लिए एक implementation गाइड भी शामिल है,
00:08:44जो आपके एप्लिकेशन में सीधे कंपोनेंट को एकीकृत करने के लिए आवश्यक सभी चरणों का विवरण देती है और एजेंट को इसे विशिष्ट परियोजना की आवश्यकताओं के अनुसार कैसे तैयार करना चाहिए। मैंने यह प्रॉम्प्ट Claude को दिया और उसने ठीक उसी call to action सेक्शन को एकीकृत किया जिसके लिए मैंने प्रॉम्प्ट की कॉपी की थी। इसने motion लाइब्रेरी से motion भी जोड़ा जो हमने इंस्टॉल की थी,
00:09:02हालांकि मैंने कहीं भी motion जोड़ने का स्पष्ट रूप से उल्लेख नहीं किया था। मैंने 21st.dev से footer भी प्राप्त किया,
00:09:07हालांकि demo footer में GitHub और Twitter के लिए icons शामिल थे।
00:09:11जब मैंने Claude को कॉपी किया गया प्रॉम्प्ट दिया,
00:09:13तो उसने GitHub icon को छोड़ दिया क्योंकि यह हमारे प्रोजेक्ट के लिए प्रासंगिक नहीं था। इसने footer को केवल camera product साइट से संबंधित icons शामिल करने के लिए अनुकूलित किया,
00:09:21जिससे एक ऐसा footer बना जो हमारे लैंडिंग पेज के लिए पूरी तरह से फिट था। इसके साथ हम इस वीडियो के अंत तक पहुंच गए।
00:09:25यदि आप चैनल का समर्थन करना चाहते हैं और इस तरह के वीडियो बनाने में हमारी मदद करना चाहते हैं,
00:09:29तो आप नीचे दिए गए super thanks बटन का उपयोग करके ऐसा कर सकते हैं। हमेशा की तरह,
00:09:32देखने के लिए धन्यवाद और मैं आपको अगले वीडियो में मिलूंगा।