अपने आईपीएफएस एनएफटी छवियों और मेटाडेटा को बड़े पैमाने पर प्रीप्रोसेस कैसे करें

एनएफटी मिंटिंग डैप बनाने के लिए आप जो पहला कदम उठाएंगे, वह है कलाकृति तैयार करना। कलाकृति के बिना, आप अपने NFT प्रोजेक्ट को साकार नहीं कर सकते।

आपकी कलाकृतियों को पूर्व-संसाधित करने का एक अन्य कारण प्रत्येक छवि के लिए मेटाडेटा उत्पन्न करना है। इस मेटाडेटा के बिना, आपका NFT किसी भी बड़े द्वितीयक बाज़ार, जैसे Opensea में नहीं बेचा जा सकता है।

उदाहरण के लिए, नीचे दी गई छवि ओपनसी मार्केटप्लेस में एक एनएफटी है जिसमें कुछ मेटाडेटा है जिसे नीचे भी देखा जा सकता है।

कलाकृति, इसके विवरण और लक्षणों सहित उपरोक्त जानकारी नीचे आईपीएफएस छवि पर देखी जा सकती है।

परियोजना निर्भरता स्थापित करना

अपना टर्मिनल खोलें और अपनी प्रोजेक्ट निर्देशिका में नेविगेट करें या किसी विशिष्ट स्थान पर प्रोजेक्ट फ़ोल्डर बनाएं। उदाहरण के लिए, टर्मिनल पर **mkdir preprocessor** चलाने से आपके निर्दिष्ट स्थान पर " प्रीप्रोसेसर" नामक फ़ोल्डर बन जाएगा।

इसके बाद, टर्मिनल पर निम्न कमांड चलाएँ।

 cd preprocessor npm init -y npm install sharp @faker.js/faker --save-dev

उपरोक्त आदेश आपके प्रोजेक्ट पर और दोनों पुस्तकालय स्थापित करेंगे। फ़ेकर लाइब्रेरी हमें यादृच्छिक जानकारी उत्पन्न करने में मदद करेगी। जबकि, तेज पुस्तकालय हमें छवि को एक निश्चित आयाम, गुणवत्ता और प्रारूप में संसाधित करने में मदद करेगा।

इसके बाद, अपने प्रोजेक्ट में एक फ़ोल्डर बनाएं जिसे arts कहा जाता है और दूसरा outputs कहा जाता है। "कला" फ़ोल्डर में, प्रसंस्करण के लिए सभी छवियों को इसके अंदर रखें।

उपरोक्त चरणों को पूरा करने के साथ, "वीएस कोड" पर प्रोजेक्ट खोलें। परियोजना संरचना नीचे की तरह दिखनी चाहिए।

 - preprocessor/ - arts/ - node_modules/ - outputs/ - package.json - package-lock.json

बढ़िया, आइए छवियों को संसाधित करने के लिए जिम्मेदार इंजन को कोड करने के लिए आगे बढ़ते हैं।

आवश्यक शर्तें

इस ट्यूटोरियल को पूरा करने के लिए आपको अपने कंप्यूटर पर निम्नलिखित स्थापित करने की आवश्यकता होगी।

• NodeJs
• आईपीएफएस डेस्कटॉप ऐप
• वी.एस. कोड

प्रोसेसिंग इंजन की कोडिंग

अपने प्रोजेक्ट के मूल में **imagify.js** नामक फ़ाइल बनाएं और निम्न कोड पेस्ट करें

 const fs = require('fs') const path = require('path') const sharp = require('sharp') const { faker } = require('@faker-js/faker') const input = './arts' const output = './outputs' let img_counter = 1 const imgSize = { width: 500, height: 500 } const desired_ext = '.webp' const base_url = '//ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/' const attributes = { weapon: [ 'Stick', 'Knife', 'Blade', 'Clube', 'Ax', 'Sword', 'Spear', 'Gun', 'Craft', ], environment: [ 'Space', 'Sky', 'Desert', 'Forest', 'Grassland', 'Moiuntains', 'Oceans', 'Rainforest', ], rarity: Array.from(Array(10).keys()), } fs.readdirSync(input).forEach((file) => { const orginal_ext = path.extname(file) const orginal_file_name = path.basename(file).split('.')[0] if (['.jpg', '.jpeg', '.png', '.gif', '.webp'].includes(orginal_ext)) { const id = img_counter const metadata = { id, name: `Adulam NFT #${id}`, description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: base_url + id + desired_ext, demand: faker.random.numeric({ min: 10, max: 100 }), attributes: [ { trait_type: 'Environment', value: attributes.environment.sort(() => 0.5 - Math.random())[0], }, { trait_type: 'Weapon', value: attributes.weapon.sort(() => 0.5 - Math.random())[0], }, { trait_type: 'Rarity', value: attributes.rarity.sort(() => 0.5 - Math.random())[0], max_value: 10, }, { display_type: 'date', trait_type: 'Created', value: Date.now(), }, { display_type: 'number', trait_type: 'generation', value: 1, }, ], } if (fs.existsSync(`${input}/${orginal_file_name + orginal_ext}`)) { sharp(`${input}/${orginal_file_name + orginal_ext}`) .resize(imgSize.height, imgSize.width) .toFile(`${output}/images/${id + desired_ext}`, (err, info) => console.log(err), ) fs.writeFileSync(`${output}/metadata/${id}.json`, JSON.stringify(metadata), { encoding: 'utf-8', flag: 'w', }) } console.log(metadata) img_counter++ } })

निम्नलिखित कदम आपको यह समझने में मदद करेंगे कि यह मेटाडेटा प्रोसेसिंग इंजन कैसे काम करता है।

आवश्यक पुस्तकालय आयात करना

 const fs = require('fs') const path = require('path') const sharp = require('sharp') const { faker } = require('@faker-js/faker') const input = './arts' const output = './outputs'

fs फाइल सिस्टम का प्रतिनिधित्व करता है, यह एक इनबिल्ट मॉड्यूल है जो NodeJs के साथ आया है। यह आपकी मशीन पर फ़ाइल पढ़ने और लिखने की गतिविधियों को प्रबंधित करने की ज़िम्मेदारी है।

path एक अन्य नोड मॉड्यूल है जो आपकी मशीन पर निर्देशिका संरचनाओं के माध्यम से नेविगेट करने में आपकी सहायता करता है। यह पता लगाने में सहायक होगा कि हमारी छवियों को कहाँ रखा गया है।

शार्प वह मॉड्यूल है जिसका उपयोग हम छवि को संसाधित करने के लिए करते हैं जैसे कि आकार बदलना और एक अलग फ़ाइल प्रकार में बदलना।

हम एक यादृच्छिक संख्या उत्पन्न करने के लिए फ़ेकर का उपयोग करेंगे।

अंत में, input वेरिएबल में वह स्थान होता है जहां संसाधित की जाने वाली छवियां स्थित होती हैं और output उस स्थान को इंगित करता है जहां संसाधित छवियां सहेजी जाएंगी।

आवश्यक चर को परिभाषित करना

 let img_counter = 1 const imgSize = { width: 500, height: 500 } const desired_ext = '.webp' const base_url = '//ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/' const attributes = { weapon: [ 'Stick', 'Knife', 'Blade', 'Clube', 'Ax', 'Sword', 'Spear', 'Gun', 'Craft', ], environment: [ 'Space', 'Sky', 'Desert', 'Forest', 'Grassland', 'Moiuntains', 'Oceans', 'Rainforest', ], rarity: Array.from(Array(10).keys()), }

उपरोक्त कोड में हमारे मेटाडेटा को उत्पन्न करने के दौरान उपयोग किए जाने वाले महत्वपूर्ण चर शामिल हैं।

• **Image_counter** वर्तमान पुनरावृत्ति के साथ छवियों को लगातार क्रमांकित करने में हमारी सहायता करता है।
• **ImgSize** संसाधित की जाने वाली प्रत्येक छवि की चौड़ाई और ऊंचाई के आयाम को परिभाषित करता है।
• **Desired_ext** उस फ़ाइल प्रारूप की बात करता है जिसे आप अपनी संसाधित छवियों को सहन करना चाहते हैं।
• **Base_url** उस स्थान को निर्दिष्ट करता है जहां छवियों को IPFS पर संग्रहीत किया जाना है।
• **Attributes** प्रत्येक छवि के मेटाडेटा के बारे में अधिक जानकारी रखती हैं।

पुनरावर्ती कार्य निष्पादित करना

 fs.readdirSync(input).forEach((file) => { if(['.jpg', '.jpeg', '.png', '.gif', '.webp'].includes(orginal_ext)) { // Images and metadata tasks are recursively performed here... } })

कोड के उपरोक्त ब्लॉक में, हमने फ़ाइल सिस्टम लाइब्रेरी (fs) का उपयोग **input** स्थान (कला) में सभी छवियों के माध्यम से लूप करने के लिए किया। और प्रत्येक छवि के लिए, हमने सुनिश्चित किया कि हमारा इंजन केवल स्वीकृत एक्सटेंशन की सूची से छवियों का चयन कर रहा है।

मेटाडेटा कार्य निष्पादित करना

 const id = img_counter const metadata = { id, name: `Adulam NFT #${id}`, description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: base_url + id + desired_ext, demand: faker.random.numeric({ min: 10, max: 100 }), attributes: [ { trait_type: 'Environment', value: attributes.environment.sort(() => 0.5 - Math.random())[0], }, { trait_type: 'Weapon', value: attributes.weapon.sort(() => 0.5 - Math.random())[0], }, { trait_type: 'Rarity', value: attributes.rarity.sort(() => 0.5 - Math.random())[0], max_value: 10, }, { display_type: 'date', trait_type: 'Created', value: Date.now(), }, { display_type: 'number', trait_type: 'generation', value: 1, }, ], }

उपरोक्त कोड ब्लॉक में, हमने प्रत्येक मेटाडेटा स्थान के लिए मान प्रदान किए हैं। उदाहरण के लिए, वातावरण, हथियार, और सभी विशेषता मान बेतरतीब ढंग से और गतिशील रूप से आपूर्ति किए जाते हैं।

छवि परिवर्तन कार्य करना

 if (fs.existsSync(`${input}/${orginal_file_name + orginal_ext}`)) { sharp(`${input}/${orginal_file_name + orginal_ext}`) .resize(imgSize.height, imgSize.width) .toFile(`${output}/images/${id + desired_ext}`, (err, info) => console.log(err), ) fs.writeFileSync(`${output}/metadata/${id}.json`, JSON.stringify(metadata), { encoding: 'utf-8', flag: 'w', }) } console.log(metadata) img_counter++

ऊपर दिए गए स्निपेट में, हमने अपने प्रत्येक आर्टवर्क का पता लगाने के लिए फ़ाइल सिस्टम मॉड्यूल का फिर से उपयोग किया और इसे हमारे निर्दिष्ट आयाम (500 x 500) में बदल दिया। इसके अलावा, हमने वर्तमान पुनरावृत्ति के अनुरूप एक नया नाम दिया और इसे अपना वांछित विस्तार (वेबपी) दिया।

छवियों को webp में बदलने और बदलने से हमारी कलाकृतियों को आश्चर्यजनक ऊंचाई तक अनुकूलित किया गया है।

उदाहरण के लिए, जहां मैंने इस छवि प्रीप्रोसेसिंग इंजन को 111 111MB के कुल आकार की 99 छवियों के अधीन किया है। .png एक्सटेंशन के लिए आकार 62MB और .webp एक्सटेंशन के लिए आश्चर्यजनक 4.5MB तक चला गया। मेरी छवियों के साथ निर्मित एक मिंटिंग वेबसाइट के लोड समय में एक बड़ी छलांग के लिए उस विशाल आकार में कमी का कारण है।

अंत में उपरोक्त कोड के ब्लॉक से, हमने संसाधित प्रत्येक छवि के लिए JSON मेटाडेटा बनाया, जिसमें एक समान नाम और छवि के स्थान को इंगित करने वाला URL दोनों शामिल हैं। यह मेटाडेटा वह है जिसे हम छवियों को संसाधित करने के बाद IPFS में तैनात करेंगे।

अब, अपनी छवि को रूपांतरित करने के लिए नीचे दिए गए आदेश को चलाएँ। सुनिश्चित करें कि आप अपने प्रोजेक्ट फ़ोल्डर में हैं।

 node imagify.js

इस बिंदु पर, हम अपने छवि इंजन के साथ कर रहे हैं, हमारे आउटपुट फ़ोल्डर में परिणाम के रूप में निम्न फ़ाइल संरचना होनी चाहिए।

 - output/ - images - 1.webp - 2.webp - ...... - metadata - 1.json - 2.json - ......

IPFS में छवियाँ और मेटाडेटा अपलोड करना

IPFS का मतलब इंटरप्लेनेटरी फाइल सिस्टम है, यह पीयर-टू-पीयर और विकेन्द्रीकृत है। IPFS पर संग्रहीत डेटा को निकालने का कोई आसान तरीका नहीं है और इसलिए, यह मीडिया सामग्री को संग्रहीत करने के लिए आपके ब्लॉकचेन अनुप्रयोगों के साथ उपयोग करने के लिए एक बिल्कुल सही सहकर्मी है।

आसान और कम भ्रमित करने वाले तरीके का उपयोग करने के लिए, आईपीएफएस डेस्कटॉप ऐप इंस्टॉलेशन पेज पर जाएं और वहां निर्दिष्ट निर्देशों का पालन करें।

इंस्टॉलेशन सफल होने के बाद, IPFS ऐप खोलें और FIRST अपलोड करें, और मैं दोहराता हूं, FIRST इमेज फोल्डर अपलोड करें।

फ़ोल्डर नाम के हिस्से के रूप में एक अद्वितीय सीआईडी (सामग्री पहचान) स्ट्रिंग उत्पन्न होगी, नीचे दी गई छवि देखें।

अब, इमेज फोल्डर CID को कॉपी करें जैसा कि ऊपर इमेज से देखा जा सकता है, और इसे अपने **imagify.js** कोड में बदलें। नीचे दिए गए कोड को देखें।

 const base_url = "//ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/" //old string const base_url = "//ipfs.io/ipfs/QmY1zrFibpdHQ7qcqZqq7THsqTremZYepXNWR5Au3MF1ST/" //new string

अब, अपने JSON मेटाडेटा में प्रत्येक छवि का सटीक स्थान शामिल करने के लिए **node imagify.js** फिर से चलाएँ। CID को बदलने से पहले और बाद में जनरेट किए गए JSON मेटाडेटा का एक उदाहरण देखें।

आप यह समझने के लिए यह वीडियो देख सकते हैं कि कैसे मैंने इन छवियों और मेटाडेटा का उपयोग एक पूर्ण NFT मिंटिंग प्रोजेक्ट पर किया।

सीआईडी बदलने से पहले

 { id: 97, name: 'Adulam NFT #97', description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: '//ipfs.io/ipfs/REPLACE_WITH_IPFS_CID/97.webp', demand: '4', attributes: [ { trait_type: 'Environment', value: 'Forest' }, { trait_type: 'Weapon', value: 'Craft' }, { trait_type: 'Rarity', value: 4, max_value: 10 }, { display_type: 'date', trait_type: 'Created', value: 24 }, { display_type: 'number', trait_type: 'generation', value: 1 } ] }

सीआईडी बदलने के बाद

 { id: 97, name: 'Adulam NFT #97', description: 'AI Arts NFTs Collection, Mint and collect the hottest NFTs around.', price: 1, image: '//ipfs.io/ipfs/QmY1zrFibpdHQ7qcqZqq7THsqTremZYepXNWR5Au3MF1ST/97.webp', demand: '7', attributes: [ { trait_type: 'Environment', value: 'Moiuntains' }, { trait_type: 'Weapon', value: 'Clube' }, { trait_type: 'Rarity', value: 2, max_value: 10 }, { display_type: 'date', trait_type: 'Created', value: 87 }, { display_type: 'number', trait_type: 'generation', value: 1 } ] }

अंत में, जैसा कि नीचे दी गई छवि में दिखाया गया है, मेटाडेटा फ़ोल्डर को छवि फ़ोल्डर के साथ IPFS में अपलोड करें।

बढ़िया, अब इसे दुनिया के देखने के लिए वेब पर पिन करते हैं। वर्तमान में, दोनों फ़ोल्डर आपके स्थानीय आईपीएफएस नोड (आपका कंप्यूटर) पर बैठे हैं, इसके लिए दुनिया भर में पहुंच योग्य होने के लिए, आपको जैसी पिनिंग सेवा का उपयोग करने की आवश्यकता है।

अपने फ़ोल्डर्स को IPFS में पिन करना

सबसे पहले, के पास जाएं और साइन अप करें यदि आपने पहले ऐसा नहीं किया है। फिर अकाउंट आइकन पर क्लिक करें और एपीआई कीज चुनें। नीचे दी गई छवि देखें।

कुंजी निर्माण पृष्ठ पर, एक नई कुंजी बनाएं पर क्लिक करें और कुंजी के लिए नाम दर्ज करें। नीचे दी गई छवि पर गौर करें।

अब JWT की को अपने क्लिपबोर्ड पर कॉपी करें। इसका उपयोग हम अपने IPFS डेस्कटॉप को अपने Pinata खाते से जोड़ने के लिए करेंगे। नीचे दी गई छवि देखें।

इसके बाद, अपना आईपीएफएस डेस्कटॉप एप्लिकेशन खोलें, सेटिंग टैब पर जाएं और एक नई सेवा जोड़ें, पिनाटा का चयन करें और दिए गए स्थान पर अपना जेडब्ल्यूटी टोकन पेस्ट करें। नीचे दी गई छवि का संदर्भ लें।

आखिरी बात यह है कि वास्तव में नीचे दिए गए निर्देश का उपयोग करके अपने फ़ोल्डर्स को पिनाटा में पिन करना है।

फाइल टैब पर जाएं, ट्रिपल डॉटेड लाइन पर क्लिक करें और सेट पिनिंग चुनें। यह नीचे दी गई छवि में पॉप अप होगा।

पिनाटा का चयन करें और आवेदन करें, ऐसा करने से आपका इमेज फोल्डर विश्व स्तर पर पहुंच योग्य होगा।

वैश्विक छवि अभिगम्यता की पुष्टि

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

उपरोक्त छवि के परिणाम बताते हैं कि कई आईपीएफएस नोड्स में अब इमेज फोल्डर की प्रतियां उपलब्ध हैं और वैश्विक स्तर पर पहुंच योग्य हैं, भले ही आपने अपने स्थानीय नोड पर मूल प्रति हटा दी हो।

आपके लिए स्पष्ट रूप से बताए गए चरणों के साथ, मेटाडेटा फ़ोल्डर को भी सार्वजनिक रूप से ऑनलाइन उपलब्ध कराने के लिए पिन करें।

अब आप ERC721 टोकन के लिए अपने आधार URL के रूप में ऊपर की छवि के किसी भी लिंक का उपयोग कर सकते हैं। नीचे दी गई छवि देखें।

और वहां आपके पास यह है कि आईपीएफएस पर अपनी कलाकृतियां कैसे तैयार करें और अपलोड करें।

निष्कर्ष

आपको हमेशा यह समझने की आवश्यकता होगी कि IPFS पर बैच पैमाने पर कलाकृतियों को कैसे प्रीप्रोसेस और अपलोड किया जाए।

एक बार जब आप समझ जाते हैं कि IPFS में छवियों को कैसे काम करना और संसाधित करना है, तो आप इसे अपने विशेष web3 प्रोजेक्ट पर उपयोग करना शुरू कर सकते हैं।

अगली बार तक इसे कुचलते रहें!

गोएर्ली पर मेरे एनएफटी प्रोजेक्ट पर लाइव डेमो उपयोग देखें। ओपनसी का स्थान देखें। आप मेरे YouTube चैनल पर वीडियो संस्करण देख सकते हैं।

लेखक के बारे में

मैं एक पूर्ण-स्टैक ब्लॉकचैन डेवलपर हूं, जिसके पास सॉफ्टवेयर विकास उद्योग में 6+ वर्षों का अनुभव है।

सॉफ्टवेयर विकास, लेखन और शिक्षण के संयोजन से, मैं प्रदर्शित करता हूं कि ईवीएम-संगत ब्लॉकचेन नेटवर्क पर विकेंद्रीकृत अनुप्रयोगों का निर्माण कैसे किया जाता है।

मेरे स्टैक में JavaScript , React , Vue , Angular , Node , React Native , Solidity , NextJs और बहुत कुछ शामिल हैं।

शुरुआत से ही Web3 ऐप बनाने का तरीका जानने के । मैं गंभीर लोगों के लिए निजी और विशेष कक्षाएं भी प्रदान करता हूं जो एक सलाहकार से एक-एक करके सीखना चाहते हैं।

।

अब, मैं आपको दिखाता हूं कि उपरोक्त छवि और मेटाडेटा को आपके कोड में कैसे प्रस्तुत किया जाए।