DALL-E API के लिए एक सरल फ्रंट-एंड बनाएं और आज ही AI-जेनरेट की गई सामग्री के साथ प्रयोग करना शुरू करें।
आर्टिफिशियल इंटेलिजेंस में लगातार सुधार हो रहा है और अब यह आश्चर्यजनक छवियां बना सकता है। एक हालिया वायरल उदाहरण में दुनिया के सबसे धनी और सबसे प्रभावशाली व्यक्तियों को फटे कपड़ों में दिखाया गया है, जो झुग्गी के वातावरण में रहते हैं। छवियों के बारे में जो प्रभावशाली है वह है लोगों और उनके परिवेश दोनों में उच्च स्तर का विवरण।
डीएएल-ई और मिडजर्नी जैसे भाषा मॉडल इन छवि-निर्माण क्षमताओं को इनपुट के रूप में पाठ्य विवरण लेने और मनोरम छवियों को उत्पन्न करने की शक्ति देते हैं।
रिएक्ट एप्लिकेशन में छवियां उत्पन्न करने के लिए OpenAI के DALL-E API को एकीकृत करना सीखें।
OpenAI के DALL-E भाषा मॉडल का उपयोग करके छवि निर्माण
DALL-E भाषा मॉडल वास्तव में छवियां कैसे उत्पन्न करता है? एआई छवि निर्माण की जटिलताओं में बहुत गहराई तक जाने के बिना, डीएएल-ई पहले प्राकृतिक भाषा प्रसंस्करण (एनएलपी) का उपयोग करते हुए इनपुट के रूप में इसे खिलाए गए शाब्दिक विवरणों की व्याख्या करता है। इसके बाद यह एक यथार्थवादी छवि प्रदान करता है जो दिए गए विवरण से निकटता से मेल खाता है।
इनपुट संकेतों में किसी व्यक्ति, वस्तु या दृश्य के पाठ्य विवरण शामिल हो सकते हैं। इसके अतिरिक्त, इसमें एक विशेष रंग, आकार और आकार जैसे विवरण भी शामिल हो सकते हैं। इनपुट पाठ की जटिलता या सरलता के बावजूद, DALL-E एक ऐसी छवि उत्पन्न करेगा जो इनपुट विवरण से निकटता से मेल खाती है।
यह ध्यान रखना महत्वपूर्ण है कि भाषा मॉडल, अन्य मॉडलों की तरह, एक बड़े डेटासेट पर प्रशिक्षित किया गया था लाखों छवि डेटा के साथ दिए गए फ़ोटो-यथार्थवादी छवियों को पहचानने और उत्पन्न करने का तरीका जानने के लिए आदानों।
OpenAI के DALL-E API के साथ आरंभ करना
OpenAI का DALL-E API सार्वजनिक बीटा के रूप में उपयोग के लिए उपलब्ध है। अपने रिएक्ट एप्लिकेशन में उपयोग के लिए एपीआई को एकीकृत करने के लिए, आपको ओपनएआई के एपीआई के लिए एक कुंजी की आवश्यकता होगी। वहां जाओ ओपनएआईऔर अपनी एपीआई कुंजी प्राप्त करने के लिए अपने खाता अवलोकन पृष्ठ पर साइन इन करें।
साइन इन करने के बाद, अपने अवलोकन पृष्ठ के शीर्ष-दाएं अनुभाग पर उपयोगकर्ता प्रोफ़ाइल आइकन पर क्लिक करें। अगला, चुनें और पर क्लिक करें एपीआई कुंजी देखें.
एपीआई कुंजी सेटिंग पृष्ठ पर, पर क्लिक करें नई गुप्त कुंजी बनाएँ बटन, अपनी एपीआई कुंजी के लिए एक नाम प्रदान करें और क्लिक करें गुप्त कुंजी बनाएँ अपनी एपीआई कुंजी उत्पन्न करने के लिए।
एक प्रतिक्रिया परियोजना बनाएँ
स्थानीय रूप से एक नया रिएक्ट प्रोजेक्ट बनाने के लिए अपने टर्मिनल पर नीचे दिए गए कमांड चलाएँ। ध्यान दें, आपके पास Node.js स्थापित होना चाहिए।
कैसे करना है, यह जानने के लिए इन दो लेखों का संदर्भ लें विंडोज़ पर नोड.जेएस स्थापित करें और Ubuntu पर Node.js कैसे स्थापित करें.
mkdir रिएक्ट-प्रोजेक्ट
सीडी रिएक्ट-प्रोजेक्ट
npx क्रिएट-रिएक्शन-ऐप इमेज-जेनरेटर-ऐप
सीडी छवि-जनरेटर-app
एनपीएम प्रारंभवैकल्पिक रूप से, create-react-app कमांड का उपयोग करने के बजाय, आप उपयोग कर सकते हैं अपना रिएक्ट प्रोजेक्ट स्थापित करने के लिए Vite. Vite एक बिल्ड टूल है जिसे वेब एप्लिकेशन को जल्दी और कुशलता से बनाने के लिए डिज़ाइन किया गया है।
छवियाँ उत्पन्न करने के लिए OpenAI के DALL-E API को एकीकृत करें
एक बार जब आप अपना रिएक्ट एप्लिकेशन तैयार कर लेते हैं और चल रहे होते हैं, तो अपने रिएक्ट एप्लिकेशन में उपयोग के लिए OpenAI की Node.js लाइब्रेरी स्थापित करें।
एनपीएम ओपनाई स्थापित करेंअगला, अपने प्रोजेक्ट फ़ोल्डर की रूट डायरेक्टरी में, एक नया बनाएँ .env अपनी एपीआई कुंजी रखने के लिए फ़ाइल।
REACT_APP_OPENAI_API_KEY = "एपीआई कुंजी"आप इस प्रोजेक्ट का कोड इसमें पा सकते हैं गिटहब रिपॉजिटरी.
एक छवि जनरेटर घटक बनाएँ
में /src निर्देशिका, एक नया फ़ोल्डर बनाएँ, इसे नाम दें अवयव, और इसके नाम से एक नई फाइल बनाएं ImageGenerator.js. इस फ़ाइल में नीचे दिए गए कोड को जोड़ें।
आवश्यक मॉड्यूल आयात करके प्रारंभ करें:
आयात'../App.css';
आयात {यूज़स्टेट} से"प्रतिक्रिया";
आयात {विन्यास, OpenAIApi} से"ओपनाई";कॉन्फ़िगरेशन मॉड्यूल उपयोग के लिए OpenAI के API क्लाइंट को कॉन्फ़िगर करता है, जबकि OpenAIApi मॉड्यूल OpenAI के API के साथ सहभागिता करने के तरीके प्रदान करता है। ये दो मॉड्यूल रिएक्ट एप्लिकेशन से DALL-E की सुविधाओं तक पहुंच और उपयोग करना संभव बनाते हैं।
अगला, एक कार्यात्मक घटक को परिभाषित करें और इसमें निम्नलिखित कोड जोड़ें:
समारोहइमेज जेनरेटर() {
कॉन्स्ट [प्रॉम्प्ट, सेटप्रॉम्प्ट] = यूज़स्टेट ("");
कॉन्स्ट [परिणाम, सेट परिणाम] = यूज़स्टेट ("");
कॉन्स्ट [लोड हो रहा है, सेट लोड हो रहा है] = यूज़स्टेट (असत्य);कॉन्स्ट [प्लेसहोल्डर, सेटप्लेसहोल्डर] = यूज़स्टेट (
"मोना लिसा पेंटिंग पेंटिंग पेंट ब्रश के साथ एक शेर के लिए खोजें ..."
);कॉन्स्ट विन्यास = नया विन्यास({
apiKey: process.env। REACT_APP_OPENAI_API_KEY,
});
कॉन्स्ट ओपेनाई = नया ओपनएएपीपीआई (कॉन्फ़िगरेशन);
कॉन्स्ट जेनरेट इमेज = async () => {
सेट प्लेसहोल्डर (`ढूंढो ${प्रॉम्प्ट}..`);
सेट लोड हो रहा है (सत्य);कोशिश {
कॉन्स्ट रेस = इंतजार openai.createImage({
शीघ्र: शीघ्र,
एन: 1,
आकार: "512x512",
});
सेट लोड हो रहा है (असत्य);
सेट परिणाम (res.data.data [0].यूआरएल);
} पकड़ना (गलती) {
सेट लोड हो रहा है (असत्य);
सांत्वना देना।गलती(छवि उत्पन्न करने में त्रुटि: ${error.response.data.error.message}`);
}
};
यह कोड एक रिएक्ट फंक्शनल कंपोनेंट को परिभाषित करता है जिसे कहा जाता है इमेज जेनरेटर. इनपुट प्रॉम्प्ट, आउटपुट परिणाम, लोडिंग स्थिति और प्लेसहोल्डर टेक्स्ट को प्रबंधित करने के लिए घटक कई राज्य चर का उपयोग करता है।
घटक भी बनाता है विन्यास OpenAI API क्लाइंट के लिए ऑब्जेक्ट, जिसमें पर्यावरण चर से प्राप्त API कुंजी शामिल है।
अतुल्यकालिक उत्पन्न छवि जब उपयोगकर्ता एक बटन पर क्लिक करता है, तो उपयोगकर्ता संकेत के साथ गुजरते हुए फ़ंक्शन चलेगा।
फिर, यह कॉल करता है openai.createImage विधि दिए गए संकेत के आधार पर एक छवि उत्पन्न करने के लिए। यह विधि एक प्रतिक्रिया वस्तु लौटाती है जिसमें उत्पन्न छवि URL शामिल होता है।
यदि एपीआई कॉल सफल होती है, तो कोड अपडेट करता है परिणाम URL के साथ स्थिति चर, और लोडिंग स्थिति को सेट करता है असत्य. यदि एपीआई कॉल विफल हो जाती है, तो यह अभी भी लोडिंग स्थिति को सेट करता है असत्य, लेकिन कंसोल में एक त्रुटि संदेश भी लॉग करता है।
अंत में, छवि जनरेटर घटक बनाने वाले रिएक्ट JSX तत्वों को प्रस्तुत करें।
वापस करना ("कंटेनर">
{ लोड हो रहा है? (
<>छवि बनाई जा रही है... कृपया प्रतीक्षा करें...</h3>
</>
): (
<>ओपन एआई एपीआई < का उपयोग करके एक छवि उत्पन्न करें/h2>
वर्गनाम ="ऐप-इनपुट"
प्लेसहोल्डर = {प्लेसहोल्डर}
onChange={(e) => setPrompt (e.target.value)}
पंक्तियाँ ="10"
कोल्स ="100"
/>{ परिणाम लंबाई > 0? (
"परिणाम-छवि" src={result} alt="परिणाम" />
): (
<>
</>
)}
</>
)}
</div>
)
}
निर्यातगलती करना इमेज जेनरेटर
इस घटक का कोड सशर्त रूप से के मूल्य के आधार पर विभिन्न तत्वों को प्रस्तुत करता है लोड हो रहा है अवस्था चर।
अगर लोड हो रहा है सच है, यह एक लोडिंग संदेश दिखाता है। इसके विपरीत यदि लोड हो रहा है असत्य है, यह OpenAI API का उपयोग करके एक छवि उत्पन्न करने के लिए मुख्य इंटरफ़ेस दिखाता है जिसमें एक टेक्स्टारिया होता है जो उपयोगकर्ता के संकेतों और एक सबमिट बटन को कैप्चर करता है।
परिणाम स्टेट वेरिएबल जेनरेटेड इमेज URL को होल्ड करता है जिसे बाद में ब्राउजर पर रेंडर किया जाता है।
App.js घटक को अपडेट करें
इस कोड को अपनी App.js फ़ाइल में जोड़ें:
आयात'./App.css';
आयात इमेज जेनरेटर से'./component/ImageGenerator';समारोहअनुप्रयोग() {
वापस करना ("अनुप्रयोग">"ऐप-हेडर">
</header>
</div>
);
}
निर्यातगलती करना अनुप्रयोग;
अब आप आगे बढ़ सकते हैं और परिवर्तनों को अपडेट करने और नेविगेट करने के लिए विकास सर्वर को स्पिन कर सकते हैं http://localhost: 3000 छवि निर्माण कार्यक्षमता का परीक्षण करने के लिए अपने ब्राउज़र के साथ।
छवि उत्पन्न करने के लिए AI टूल का उपयोग करते समय सर्वोत्तम संभव परिणाम प्राप्त करने के लिए, टेक्स्टारिया में एक विस्तृत संकेत प्रदान करना सुनिश्चित करें। इसका अर्थ यह है कि छवि का यथासंभव विस्तृत वर्णन करना, कोई विवरण नहीं छोड़ना।
इस प्रक्रिया को शीघ्र इंजीनियरिंग कहा जाता है, और इसमें विस्तृत संकेत प्रदान करना शामिल है ताकि प्रदान किए गए उपयोगकर्ता इनपुट के आधार पर भाषा मॉडल सर्वोत्तम परिणाम दे सके।
बाजार में उपलब्ध एआई सॉफ्टवेयर में हालिया उछाल को देखते हुए, शीघ्र इंजीनियरिंग में अपना करियर बनाना लाभकारी अवसर हो सकता है।
सॉफ्टवेयर विकास में भाषा मॉडल की शक्ति को अधिकतम करें
बड़े भाषा मॉडल द्वारा संचालित एआई टूल्स ने अपनी अविश्वसनीय विशेषताओं और क्षमताओं के कारण सॉफ्टवेयर डेवलपमेंट के क्षेत्र में तूफान ला दिया है।
इन उपकरणों में डेवलपर्स को शांत एआई सुविधाओं को एकीकृत करने की अनुमति देकर वर्तमान सॉफ्टवेयर पारिस्थितिकी तंत्र में सुधार करने की क्षमता है जो विभिन्न उत्पादों के उपयोग को बढ़ाता है- एआई तकनीक का उपयोग अभिनव में सॉफ्टवेयर बनाने का एक अनूठा अवसर प्रस्तुत करता है तौर तरीकों।
