TensorFlow.js: बड़े पैमाने पर मशीन लर्निंग मॉडल को डिप्लॉय और होस्ट करने के लिए, Firebase होस्टिंग का इस्तेमाल करें

1. परिचय

आपने TensorFlow.js की मदद से, कस्टम मशीन लर्निंग मॉडल बनाया है. हालांकि, अब आपको इसे किसी ऐसी जगह पर होस्ट करना है जहां से इसे अपनी पसंद की वेबसाइट पर इस्तेमाल किया जा सके. इसके लिए कई विकल्प उपलब्ध हैं. हालांकि, आज हम देखेंगे कि Firebase Hosting का इस्तेमाल करना कितना आसान है. इससे आपको कुछ अतिरिक्त फ़ायदे भी मिल सकते हैं. जैसे, वर्शनिंग, सुरक्षित कनेक्शन पर मॉडल उपलब्ध कराना, और अन्य सुविधाएं.

आपको क्या बनाने को मिलेगा

इस कोड लैब में, आपको एक ऐसा सिस्टम बनाने का तरीका बताया जाएगा जो कस्टम सेव किए गए TensorFlow.js मॉडल को होस्ट और चला सके. साथ ही, उससे जुड़ी ऐसेट को भी होस्ट और चला सके. जैसे, एचटीएमएल, सीएसएस, और JavaScript. हम एक बहुत ही आसान और हल्का मॉडल बनाएंगे. यह मॉडल, कुछ इनपुट वैल्यू के आधार पर संख्यात्मक आउटपुट वैल्यू का अनुमान लगा सकता है. उदाहरण के लिए, घर के स्क्वेयर फ़ीट के हिसाब से उसकी कीमत क्या है. हम इसे Firebase Hosting के ज़रिए होस्ट करेंगे, ताकि इसका बड़े पैमाने पर इस्तेमाल किया जा सके.

आपको क्या सीखने को मिलेगा

  • कस्टम TensorFlow.js मॉडल को सही फ़ॉर्मैट में सेव करने का तरीका
  • होस्टिंग के लिए Firebase खाता कैसे सेट अप करें
  • ऐसेट को Firebase Hosting पर डिप्लॉय करने का तरीका
  • मॉडल के नए वर्शन को डिप्लॉय करने का तरीका.

कृपया ध्यान दें: इस कोड लैब का फ़ोकस, कस्टम ट्रेनिंग वाले मॉडल को डिप्लॉय करने के लिए होस्ट करने के तरीके पर है. इसका फ़ोकस, मॉडल के बेहतर आर्किटेक्चर को बनाने के तरीके पर नहीं है. इसलिए, हम मशीन लर्निंग मॉडल को बनाने के तरीके के बारे में तेज़ी से आगे बढ़ेंगे. इसके लिए, हम एक सामान्य उदाहरण का इस्तेमाल करेंगे. सिद्धांत वही रहेंगे, भले ही आपने खुद कोई भी मॉडल बनाया हो.

हमारे साथ अपनी बनाई गई चीज़ें शेयर करना

अगर आपने इस स्टैक का इस्तेमाल करके कोई शानदार चीज़ बनाई है, तो हमें बताएं! हमें आपके बनाए गए कॉन्टेंट को देखने में बेहद खुशी होगी.

हमें सोशल मीडिया पर टैग करें. इसके लिए, #MadeWithTFJS हैशटैग का इस्तेमाल करें. इससे आपके प्रोजेक्ट को हमारे TensorFlow ब्लॉग या आने वाले समय में होने वाले इवेंट, जैसे कि Show & Tells में शामिल किया जा सकता है.

2. Firebase Hosting क्या है?

Firebase होस्टिंग, आपके वेब ऐप्लिकेशन, स्टैटिक / डाइनैमिक कॉन्टेंट, और माइक्रोसेवाओं के लिए, प्रोडक्शन-ग्रेड की तेज़ और सुरक्षित होस्टिंग उपलब्ध कराता है

एक ही कमांड से, वेब ऐप्लिकेशन को तुरंत डिप्लॉय किया जा सकता है. साथ ही, कॉन्टेंट को ग्लोबल सीडीएन (कॉन्टेंट डिलीवरी नेटवर्क) पर उपलब्ध कराया जा सकता है. इससे यह पक्का किया जा सकता है कि आपका कॉन्टेंट, कम समय में दुनिया के ज़्यादातर हिस्सों में उपलब्ध हो. माइक्रोसर्विसेज़ बनाने और उन्हें होस्ट करने के लिए, Firebase Hosting को Firebase Cloud Functions या Cloud Run के साथ भी जोड़ा जा सकता है. हालांकि, यह इस कोडलैब के दायरे से बाहर है.

Firebase Hosting की मुख्य सुविधाएं

  • सुरक्षित कनेक्शन के ज़रिए कॉन्टेंट दिखाना - आधुनिक वेब सुरक्षित है. अक्सर क्लाइंट साइड पर सेंसर ऐक्सेस करने के लिए, साइट को सुरक्षित कॉन्टेक्स्ट में डिलीवर किया जाना चाहिए. Firebase Hosting में, ज़ीरो-कॉन्फ़िगरेशन एसएसएल की सुविधा पहले से मौजूद होती है. इसलिए, होस्ट की गई सभी फ़ाइलों के लिए कॉन्टेंट हमेशा सुरक्षित तरीके से डिलीवर किया जाता है.
  • स्टैटिक और डाइनैमिक कॉन्टेंट के साथ-साथ, पुष्टि करने की सुविधा वाली माइक्रोसेवाएं होस्ट करें. इससे सिर्फ़ लॉग इन किए हुए उपयोगकर्ता ही उन फ़ाइलों को लोड / देख पाएंगे.
  • कॉन्टेंट को तेज़ी से डिलीवर करना - अपलोड की गई हर फ़ाइल को दुनिया भर में मौजूद सीडीएन एज पर एसएसडी में कैश किया जाता है. उपयोगकर्ता चाहे जहां कहीं भी हों, कॉन्टेंट तेज़ी से डिलीवर किया जाता है.
  • एक कमांड से नए वर्शन डिप्लॉय करें - Firebase कमांड लाइन इंटरफ़ेस का इस्तेमाल करके, अपने ऐप्लिकेशन को कुछ ही सेकंड में चालू किया जा सकता है.
  • एक क्लिक से रोलबैक करें - तेज़ी से डिप्लॉयमेंट करना अच्छी बात है, लेकिन गलतियों को ठीक करने की सुविधा होना और भी अच्छी बात है. Firebase Hosting, एक क्लिक में रोलबैक करने की सुविधा के साथ-साथ वर्शनिंग और रिलीज़ मैनेजमेंट की सुविधा देता है.

चाहे आपको कोई सामान्य ऐप्लिकेशन लैंडिंग पेज डिप्लॉय करना हो या कोई जटिल प्रोग्रेसिव वेब ऐप्लिकेशन (PWA), Hosting आपको वेबसाइटों और ऐप्लिकेशन को डिप्लॉय और मैनेज करने के लिए, बुनियादी ढांचा, सुविधाएं, और टूल उपलब्ध कराता है.

डिफ़ॉल्ट रूप से, हर Firebase प्रोजेक्ट में web.app और firebaseapp.com डोमेन पर मुफ़्त सबडोमेन होते हैं. ये दोनों साइटें, एक जैसा डिप्लॉय किया गया कॉन्टेंट और कॉन्फ़िगरेशन दिखाती हैं. अगर चाहें, तो अपने डोमेन नेम को Firebase पर होस्ट की गई साइट से भी कनेक्ट किया जा सकता है.

लागू करने का तरीका

हालांकि, इनमें से कोई भी काम करने से पहले, हमें मशीन लर्निंग मॉडल और वेब ऐप्लिकेशन की ज़रूरत होगी, ताकि हम उन्हें डिप्लॉय कर सकें. इसलिए, आइए एक बनाते हैं!

3. घर की कीमतों का अनुमान लगाने के लिए एक सामान्य मशीन लर्निंग मॉडल

इस अभ्यास के लिए, हम एक बहुत ही सामान्य एमएल मॉडल बनाएंगे. यह मॉडल, संख्यात्मक वैल्यू का अनुमान लगाता है. हम मशीन लर्निंग का इस्तेमाल करके, एक काल्पनिक घर की कीमत का अनुमान लगाने की कोशिश करेंगे. यह अनुमान, घर के साइज़ के हिसाब से लगाया जाएगा. घर का साइज़ स्क्वेयर फ़ीट में दिया गया है. यह सिर्फ़ समझाने के मकसद से किया जा रहा है. इस डेमो के लिए, हम घर के स्क्वेयर फ़ीट को 1,000 गुना कर देंगे, ताकि हमें ट्रेनिंग डेटा के लिए घर की अनुमानित वैल्यू मिल जाए. हालांकि, मशीन लर्निंग को यह खुद सीखना होगा.

असल में, आपको ऐसे डेटा का इस्तेमाल करना होगा जिसमें ज़्यादा जटिल संबंध हो सकते हैं. उदाहरण के लिए, छोटे घरों के लिए डॉलर वैल्यू का अनुमान लगाने के लिए, यह सिर्फ़ 500 गुना हो सकता है, लेकिन एक तय सीमा के बाद यह धीरे-धीरे 1,000 गुना वगैरह हो जाता है. साथ ही, आपको उन वैल्यू का सबसे सही अनुमान लगाने का तरीका जानने के लिए, ज़्यादा बेहतर मॉडल की ज़रूरत पड़ सकती है.

आज हम जिस मॉडल (लीनियर रिग्रेशन) को बनाएंगे उसका इस्तेमाल, असल दुनिया के ज़्यादा डेटा के आधार पर कई अन्य चीज़ों का अनुमान लगाने के लिए किया जा सकता है. साथ ही, ऊपर दिए गए काल्पनिक इस्तेमाल के उदाहरण के लिए, इसे आसानी से शुरू किया जा सकता है. हालांकि, हमारा फ़ोकस आज किसी मॉडल को सेव और डिप्लॉय करने के तरीके पर है. न कि किसी इस्तेमाल के उदाहरण के लिए मॉडल को डिज़ाइन और ऑप्टिमाइज़ करने पर. तो चलिए, शुरू करते हैं!

ट्रेनिंग और टेस्टिंग के लिए डेटा

सभी एमएल मॉडल, ट्रेनिंग के लिए कुछ उदाहरण डेटा से शुरू होते हैं. इस डेटा का इस्तेमाल करके, मॉडल को आने वाले समय में वैल्यू का अनुमान लगाने के लिए सिखाया जा सकता है. आम तौर पर, इस तरह का डेटा किसी डेटाबेस, फ़ाइलों के फ़ोल्डर, CSV या अन्य सोर्स से लिया जा सकता है. हालांकि, यहां हम सीधे तौर पर 20 उदाहरणों को JavaScript में एक ऐरे के तौर पर हार्डकोड करेंगे. जैसा कि नीचे दिखाया गया है. हमारा सुझाव है कि आप इस कोड को ऐसे एनवायरमेंट में कॉपी करें जिसमें आपको कोडिंग करने में आसानी हो. जैसे, Glitch.com. इसके अलावा, अगर आपके पास लोकलहोस्ट पर सर्वर चलाने की सुविधा है, तो इसे अपने टेक्स्ट एडिटर में भी कॉपी किया जा सकता है.

model.js

// House square footage.
const data =    [800, 850, 900, 950, 980, 1000, 1050, 1075, 1100, 1150, 1200, 1250, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000];

// Estimated dollar cost of house for each piece of data above (1000x square footage).
const answers = [800000, 850000, 900000, 950000, 980000, 1000000, 1050000, 1075000, 1100000, 1150000, 1200000,  1250000 , 1300000, 1400000, 1500000, 1600000, 1700000, 1800000, 1900000, 2000000];

// Testing data separate from training data.
const dataTest =     [886, 1225, 500];
const answersTest =  [886000, 1225000, 500000];

जैसा कि आप देख सकते हैं, हमारे पास हर डेटा के लिए एक जवाब की वैल्यू है. हम आने वाले समय में इस वैल्यू का अनुमान लगाने की कोशिश करेंगे. इसे एक सामान्य 2D ग्राफ़ पर x और y वैल्यू के तौर पर देखा जा सकता है.

इसलिए, वैल्यू 800 के लिए, हमें आउटपुट के तौर पर जवाब का अनुमान 8,00,000 डॉलर चाहिए. वैल्यू 900 के लिए, हम 9,00,000 डॉलर का आउटपुट देंगे. इसी तरह, अन्य वैल्यू के लिए भी आउटपुट दिया जाएगा. असल में, संख्या को 1,000 से गुणा किया जाता है. हालांकि, एमएल मॉडल को 1000 * N के इस सामान्य संबंध के बारे में पता नहीं है. इसलिए, उसे हमारे दिए गए इन उदाहरणों से इसे खुद सीखना होगा.

ध्यान दें कि हमारे पास कुछ ऐसा टेस्टिंग डेटा भी है जो ट्रेनिंग डेटा से पूरी तरह अलग है. इससे हमें ट्रेन किए गए मॉडल का आकलन करने में मदद मिलती है. इससे यह पता चलता है कि मॉडल, ऐसे डेटा पर कैसा परफ़ॉर्म करता है जिसे उसने पहले कभी नहीं देखा.

हम इस स्क्रिप्ट को TensorFlow.js लाइब्रेरी के साथ लोड करेंगे. इसके लिए, हम यहां दिए गए एचटीएमएल का इस्तेमाल करेंगे:

train.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Training Model</title>
    <meta charset="utf-8">
  </head>  
  <body>   
    <!-- Import TensorFlow.js library -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
    <!-- Import our JS code to train the model -->
    <script src="/model.js" defer></script>
  </body>
</html>

मॉडल को ट्रेनिंग देना

इसके बाद, मॉडल को ट्रेन करने का समय आता है. इसके लिए, फ़ाइल के आखिर में, ऊपर दिए गए हमारे मौजूदा JS कोड में नीचे दिया गया कोड जोड़ें.

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

model.js

// Create Tensor representations of our vanilla JS arrays above 
// so can be used to train our model.
const trainTensors = {
  data: tf.tensor2d(data, [data.length, 1]),
  answer: tf.tensor2d(answers, [answers.length, 1])
};

const testTensors = {
  data: tf.tensor2d(dataTest, [dataTest.length, 1]),
  answer: tf.tensor2d(answersTest, [answersTest.length, 1])
};


// Now actually create and define model architecture.
const model = tf.sequential();

// We will use one dense layer with 1 neuron and an input of 
// a single value.
model.add(tf.layers.dense({inputShape: [1], units: 1}));

// Choose a learning rate that is suitable for the data we are using.
const LEARNING_RATE = 0.0001;

train();

async function train() {
  // Compile the model with the defined learning rate and specify
  // our loss function to use.
  model.compile({
    optimizer: tf.train.sgd(LEARNING_RATE),
    loss: 'meanAbsoluteError'
  });

  // Finally do the training itself over 500 iterations of the data.
  // As we have so little training data we use batch size of 1.
  // We also set for the data to be shuffled each time we try 
  // and learn from it.
  let results = await model.fit(trainTensors.data, trainTensors.answer, {epochs: 500, batchSize: 1, shuffle: true});
  
  // Once trained we can evaluate the model.
  evaluate();
}

async function evaluate(stuff) {
  // Predict answer for a single piece of data.
  model.predict(tf.tensor2d([[768]])).print();
}

ऊपर दिए गए कोड का इस्तेमाल करके, हमने एक ऐसे मॉडल को ट्रेन किया है जो इनपुट वैल्यू के आधार पर आउटपुट वैल्यू का अनुमान लगा सकता है. ऊपर दिए गए कोड को चलाने पर, मुझे इनपुट वैल्यू 768 के लिए 7,68,073 का अनुमान मिलता है. यह आपके ब्राउज़र के डेवलपर कंसोल में प्रिंट होता है. अगर आपने इसे पहले से नहीं खोला है, तो इसे खोलने के लिए F12 दबाएं. हमने इनपुट से 1,000 गुना ज़्यादा कीमत वाले उदाहरण दिए थे. इसके बावजूद, घर की कीमत का यह अनुमान काफ़ी सटीक है. ध्यान दें: अनुमानित वैल्यू थोड़ी अलग हो सकती है. यह सामान्य है.

अगर हम इस परफ़ॉर्मेंस से संतुष्ट हैं, तो अब हमें इस मॉडल को डिस्क में सेव करना होगा, ताकि हम इसे Firebase Hosting पर अपलोड कर सकें!

मॉडल सेव करना

ऊपर दिए गए evaluate फ़ंक्शन के आखिर में (model.predict के बाद) नीचे दिया गया कोड जोड़ने से, हमें ट्रेनिंग पूरी होने के बाद, वेब ब्राउज़र से सीधे तौर पर मॉडल एक्सपोर्ट करने की सुविधा मिलती है. साथ ही, इसे डिस्क में सेव करने की सुविधा मिलती है. इससे हम मॉडल को कहीं और होस्ट कर सकते हैं और आने वाले समय में इसका इस्तेमाल कर सकते हैं. इसके लिए, हमें हर बार पेज लोड करते समय मॉडल को फिर से ट्रेन करने की ज़रूरत नहीं होगी.

model.js

await model.save('downloads://my-model');

अब train.html पर जाएं और पेज को चलाएं. इससे मॉडल को ट्रेनिंग मिलनी चाहिए. इसमें कुछ सेकंड लग सकते हैं. इसके बाद, ट्रेनिंग वाले मॉडल को डाउनलोड करने का प्रॉम्प्ट दिखेगा.

4. Firebase सेट अप करना

Firebase में साइन इन करना और प्रोजेक्ट बनाना

अगर आपने Firebase का इस्तेमाल पहले कभी नहीं किया है, तो अपने Google खाते से आसानी से साइन अप किया जा सकता है. https://firebase.google.com/ पर जाएं और उस Google खाते से साइन इन करें जिसका आपको इस्तेमाल करना है. होम पेज पर रीडायरेक्ट होने के बाद, पेज के सबसे ऊपर दाईं ओर मौजूद "कंसोल पर जाएं" पर क्लिक करें:

ea7ff3f08e4019b0.png

कंसोल पर रीडायरेक्ट होने के बाद, आपको कुछ इस तरह का लैंडिंग पेज दिखेगा:

166d9408ad46599b.png

नया Firebase प्रोजेक्ट बनाने के लिए, 'प्रोजेक्ट जोड़ें' पर क्लिक करें. इसके बाद, अपने प्रोजेक्ट को कोई यूनीक नाम दें, शर्तें स्वीकार करें, और जारी रखें पर क्लिक करें.

इसके बाद, आपसे पूछा जाएगा कि क्या आपको अपने प्रोजेक्ट में Analytics जोड़ना है. अगर आपको इस तरह के आंकड़ों का ऐक्सेस चाहिए, तो इस विकल्प को चालू करें और 'जारी रखें' पर क्लिक करें.

a34c2be47b26e6b5.png

अगर सब कुछ ठीक रहा, तो आपको 'प्रोजेक्ट तैयार है' पेज दिखेगा. यह पेज इस तरह दिखता है:

1306dc803ad22338.png

बहुत बढ़िया! हमारे पास एक प्रोजेक्ट है. हाल ही में बनाए गए प्रोजेक्ट के कंसोल पर जाने के लिए, जारी रखें पर क्लिक करें. इस पेज को खुला रखें, ताकि बाद में इसका इस्तेमाल किया जा सके. हालांकि, अभी हमें कुछ टूल इंस्टॉल करने होंगे.

सीएलआई को इंस्टॉल और कनेक्ट करना

Firebase, Node NPM पैकेज के तौर पर उपलब्ध है. इसे कमांड लाइन इंटरफ़ेस (सीएलआई) के ज़रिए इंस्टॉल और इस्तेमाल किया जा सकता है. इससे, अपनी लोकल फ़ाइलों और फ़ोल्डर को Firebase Hosting पर आसानी से डिप्लॉय किया जा सकता है. आज के ट्यूटोरियल के लिए, हम Linux एनवायरमेंट का इस्तेमाल करेंगे. हालांकि, अगर आपके पास Windows या Mac है, तो अपने डिवाइस पर सीएलआई टूलिंग सेट अप करने के लिए, यहाँ दिए गए निर्देशों का पालन करें.

हालांकि, Linux पर हम सबसे पहले NPM और Node.js इंस्टॉल करेंगे. अगर ये पहले से इंस्टॉल नहीं हैं, तो टर्मिनल विंडो में इन तीन कमांड का इस्तेमाल करें: अगर दूसरे एनवायरमेंट का इस्तेमाल किया जा रहा है, तो इन निर्देशों का पालन करें:

कमांड लाइन टर्मिनल:

sudo apt update

कमांड लाइन टर्मिनल:

sudo apt install nodejs

कमांड लाइन टर्मिनल:

sudo apt install npm

अब Node.js और NPM इंस्टॉल हो गए हैं. Firebase कमांड लाइन टूल इंस्टॉल करने के लिए, आपको टर्मिनल विंडो में यह कमांड डालनी होगी:

कमांड लाइन टर्मिनल:

sudo npm install -g firebase-tools

बढ़िया! अब हम अपने Firebase प्रोजेक्ट को अपने सिस्टम से कनेक्ट करने के लिए तैयार हैं, ताकि हम उसमें फ़ाइलें पुश कर सकें और अन्य काम कर सकें.

Firebase में लॉग इन करना

अपने Google खाते का इस्तेमाल करके Firebase में लॉग इन करें. इसके लिए, यह कमांड चलाएं:

कमांड लाइन टर्मिनल:

firebase login

आपको अपने Google Firebase खाते का ऐक्सेस देने के लिए कहा जाएगा. यह ऐक्सेस इस तरह दिया जाता है:

4dc28589bef2ff5d.png

इसकी अनुमति दें. इसके बाद, आपको अपने कमांड-लाइन टूल को अपने Firebase खाते से कनेक्ट करने का विकल्प दिखेगा:

df397ec7a555e8de.png

विंडो बंद करें और उस कमांड लाइन टर्मिनल पर वापस जाएं जिसमें आपने पहले टाइप किया था. अब यह नई कमांड स्वीकार करने के लिए तैयार होना चाहिए, जैसा कि दिखाया गया है (हमने अपने स्क्रीनशॉट में कोई भी निजी जानकारी छिपाई है):

67a3ff39d3c0f3e4.png

बधाई हो! अब हम अपनी लोकल मशीन से, बनाए गए प्रोजेक्ट में फ़ाइलें पुश करने के लिए तैयार हैं.

Firebase Hosting पर डिप्लॉय करने के लिए, अपने प्रोजेक्ट को शुरू करना

अपने लोकल फ़ोल्डर को Firebase प्रोजेक्ट से कनेक्ट करने के लिए, अपनी लोकल प्रोजेक्ट डायरेक्ट्री (वह फ़ोल्डर जिसका इस्तेमाल आपको डिप्लॉय करते समय फ़ाइलें अपलोड करने के लिए करना है) के रूट से यह कमांड चलाएं.

कमांड लाइन टर्मिनल:

firebase init

इस कमांड को चलाने के बाद, सेटअप पूरा करने के लिए टर्मिनल में दिए गए निर्देशों का पालन करें. जैसा कि यहां दिखाया गया है:

61e0f6d92ef3e1c4.png

यहां हम कीबोर्ड पर मौजूद डाउन ऐरो का इस्तेमाल करके, होस्टिंग का तरीका चुनें विकल्प को चुन सकते हैं. इसके बाद, spacebar दबाकर विकल्प को चुनें और फिर Enter दबाकर पुष्टि करें.

अब हम इस्तेमाल करने के लिए, पहले से बनाए गए प्रोजेक्ट को चुन सकते हैं:

4f2a1696d5cfd72f.png

"किसी मौजूदा प्रोजेक्ट का इस्तेमाल करें" पर Enter दबाएं. इसके बाद, नीचे दिए गए तरीके से डाउन ऐरो का इस्तेमाल करके इसे चुनें:

4dfcf2dff745f2c.png

इसका इस्तेमाल करने के लिए, आखिर में Enter दबाएं. इसके बाद, पॉप-अप होने वाली आखिरी स्क्रीन पर डिफ़ॉल्ट सेटिंग स्वीकार करें. साथ ही, सिंगल पेज ऐप्लिकेशन के तौर पर कॉन्फ़िगर करने के लिए, "नहीं" कहें:

7668a2175b624af2.png

अगर आपको एक से ज़्यादा एचटीएमएल पेज होस्ट करने हैं, तो इस विकल्प को चुनें.

अब इनिशियलाइज़ेशन पूरा हो गया है. आपको firebase.json फ़ाइल दिखेगी. साथ ही, जिस डायरेक्ट्री से हमने ऊपर दिए गए निर्देश लागू किए थे उसमें "public" फ़ोल्डर बन गया है.

cd7724b92f3d507.png

अब हमें उन फ़ाइलों को उस सार्वजनिक फ़ोल्डर में ले जाना है जिन्हें हमें डिप्लॉय करना है. इसके बाद, उन्हें डिप्लॉय किया जा सकेगा! चलिए, अब ऐसा करते हैं.

5. TensorFlow.js वेबपेज बनाना

सेव किया गया मॉडल लोड हो रहा है

सबसे पहले, पक्का करें कि हमने कोडलैब में पहले सेव किए गए मशीन लर्निंग मॉडल को, Firebase की मदद से बनाए गए अपने सार्वजनिक फ़ोल्डर में कॉपी कर लिया हो. सेव की गई फ़ाइलों को इस फ़ोल्डर में खींचकर छोड़ें. इसके लिए, यहां दिया गया तरीका अपनाएं:

cd6f565189e23705.png

आपको यह भी दिखेगा कि Firebase ने हमारे लिए index.html और 404.html फ़ाइलें बनाई हैं. आइए, अपनी मशीन पर अपने पसंदीदा टेक्स्ट एडिटर का इस्तेमाल करके index.html में बदलाव करें, ताकि हम अपना कस्टम कोड जोड़ सकें. इसे इस तरह से जोड़ा जा सकता है:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello World - TensorFlow.js</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Import the webpage's stylesheet -->
    <link rel="stylesheet" href="style.css">
  </head>  
  <body>
    <h1>TensorFlow.js Hello World</h1>
    <p>Check the console (Press F12) to see predictions!</p>
    <!-- Import TensorFlow.js library -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>

    <!-- Import the page's JavaScript to do some stuff -->
    <script src="script.js" defer></script>
  </body>
</html>

ऊपर दिए गए index.html के नए कोड में, हमने एक स्टाइल शीट तय की है. इससे हम बाद में अपने पेज में स्टाइल जोड़ सकते हैं. साथ ही, हमने script.js को भी तय किया है, ताकि हम अपने TensorFlow.js सेव किए गए मॉडल का इस्तेमाल करने के लिए ज़रूरी कोड को होस्ट कर सकें.

आइए, अब इन फ़ाइलों को बनाएं और इन्हें इस तरह से भरें, ताकि ये कुछ काम की जानकारी दे सकें:

style.css

/** Leave blank for now **/

script.js

// Load our saved model from current directory (which will be 
// hosted via Firebase Hosting)
async function predict() {
  // Relative URL provided for my-model.json.
  const model = await tf.loadLayersModel('my-model.json');
  // Once model is loaded, let's try using it to make a prediction!
  // Print to developer console for now.
  model.predict(tf.tensor2d([[1337]])).print();
}

predict();

अगर आपने सभी चरणों को सही तरीके से पूरा किया है, तो अब आपको हमारे बनाए गए सार्वजनिक फ़ोल्डर में, बदलाव की गई ये फ़ाइलें दिखेंगी:

253498c703c04ee.png

अब हमें सिर्फ़ अपनी फ़ाइलों को डिप्लॉय करना है, ताकि हम यह देख सकें कि यह काम करता है या नहीं!

6. मॉडल और वेबसाइट को डिप्लॉय करना

लाइव होना

अपनी लोकल मशीन के firebase प्रोजेक्ट फ़ोल्डर में खोली गई टर्मिनल विंडो पर वापस जाएं. यह वह फ़ोल्डर है जिसमें ऊपर दिया गया "public" फ़ोल्डर और firebase init फ़ाइलें मौजूद हैं.

अपने सार्वजनिक फ़ोल्डर की फ़ाइलों को डिप्लॉय करने के लिए, बस यह टाइप करें:

कमांड लाइन टर्मिनल:

firebase deploy

टर्मिनल कमांड को पूरा होने दें. इसके बाद, आपको रिलीज़ पूरी होने का मैसेज मिलेगा. साथ ही, आपको एक यूआरएल मिलेगा, जिसका इस्तेमाल करके इसे इस्तेमाल किया जा सकता है:

c5795cae85ed82a5.png

ऊपर दिए गए उदाहरण में, हमारे डिप्लॉयमेंट को देखने के लिए फ़ाइनल यूआरएल यह है:

https://tensorflow-js-demo.web.app (हालांकि, आपका यूआरएल उस प्रोजेक्ट का नाम होगा जिसे आपने बनाया है).

इस यूआरएल को वेब ब्राउज़र में खोलें. इससे यह पता चलेगा कि यह काम कर रहा है या नहीं. अगर यह काम कर रहा है, तो आपको खोले गए पेज के डेवलपर कंसोल में कुछ ऐसा दिखेगा (डेवलपर कंसोल खोलने के लिए, F12 दबाएं).

182aee0acfa7c41e.png

जैसा कि आप देख सकते हैं कि पेज, डिप्लॉय किए गए डोमेन पर लोड होता है. साथ ही, हम 1337 स्क्वेयर फ़ीट के लिए अपने मॉडल का अनुमान सही तरीके से देख सकते हैं. यह अनुमान 1,336,999.25 डॉलर है. यह वाकई एक बहुत अच्छा अनुमान है, क्योंकि हमें उम्मीद थी कि यह स्क्वेयर फ़ीट का 1000 गुना होगा. अगर हम मॉडल को कॉल करने के लिए एक अच्छा यूज़र इंटरफ़ेस (यूआई) बनाते हैं, तो हम अपनी पसंद के हिसाब से कई अनुमान लगा सकते हैं. यह सब JavaScript में चलेगा. इससे आपकी क्वेरी निजी और सुरक्षित रहेंगी.

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

इस्तेमाल पर नज़र रखना

अपनी वेबसाइट के कोड में जोड़े गए किसी भी Google Analytics के अलावा, Firebase आपके प्रोजेक्ट के लिए कंसोल के ज़रिए वर्शनिंग और इस्तेमाल के आंकड़े भी उपलब्ध कराता है. डिप्लॉय करने के बाद, आपको कुछ ऐसा दिखेगा. इसे समय-समय पर अपनी ज़रूरत के हिसाब से देखा जा सकता है:

42b1cb8f7c10016.png

fbdd6504bec7c3d.png

जैसा कि आप देख सकते हैं, डिफ़ॉल्ट रूप से, फ़्री टियर में आपको होस्ट की गई फ़ाइलों के लिए हर महीने 10 जीबी बैंडविड्थ मिलता है. अगर आपकी साइट ज़्यादा लोकप्रिय है, तो आपको किसी महीने में इससे ज़्यादा डेटा इस्तेमाल करने के लिए, बिलिंग खाता जोड़ना पड़ सकता है. बड़े प्रोजेक्ट के लिए, Firebase के प्लान यहां देखे जा सकते हैं. हालांकि, प्रोटोटाइप के लिए सामान्य उपयोगकर्ताओं को शायद ही मुफ़्त टियर से ज़्यादा की ज़रूरत पड़े. ऐसा तब होता है, जब आपका मॉडल छोटा हो और उसका इस्तेमाल कम हो. इसलिए, यह एक बेहतरीन तरीका है. इससे यह टेस्ट किया जा सकता है कि यह आपकी ज़रूरतों को पूरा करता है या नहीं. इससे आपको अपने कारोबार या आइडिया को आगे बढ़ाने के लिए, पैसे चुकाकर लिए जाने वाले प्लान को चुनने में मदद मिलेगी.

7. बधाई हो

बधाई हो! आपने Firebase के साथ TensorFlow.js का इस्तेमाल करके, मशीन लर्निंग का कस्टम मॉडल बनाने और उसे डिप्लॉय करने की शुरुआत कर दी है. अब इसे दुनिया के साथ शेयर किया जा सकता है. ज़रा सोचें कि इस असरदार और आसानी से इस्तेमाल की जा सकने वाली सुविधा का इस्तेमाल करके, और क्या-क्या बनाया जा सकता है. अगर आपको चाहें, तो इसे प्रोडक्शन के इस्तेमाल के मामलों के लिए भी तैयार किया जा सकता है. ऐसा इसलिए, क्योंकि Firebase की सुविधाएँ माँग के हिसाब से अपने-आप बढ़ती हैं. इसलिए, इससे कोई फ़र्क़ नहीं पड़ता कि 10 या 10,000 उपयोगकर्ता इसका इस्तेमाल करना चाहते हैं. यह सुविधा काम करेगी.

अगर आपको अपनी किसी फ़ाइल में बदलाव करना है, तो पहले की तरह firebase deploy का इस्तेमाल करके, अपने ऐप्लिकेशन को फिर से डिप्लॉय करें. साथ ही, अपने ब्राउज़र की कैश मेमोरी को मिटाना न भूलें, ताकि अगली बार पेज लोड करने पर आपको फ़ाइलों का नया वर्शन मिल सके. अगर आपने डेवलपर टूल खोले हैं, तो नेटवर्क टैब में जाकर इस सुविधा को चालू किया जा सकता है. इससे आपको जांच करने में आसानी होगी. इसके लिए, इस टैब में सबसे ऊपर मौजूद "कैश मेमोरी बंद करें" चेकबॉक्स को चुनें:

b1e4c1bf304a4869.png

रीकैप

इस कोड लैब में हम:

  1. घर की कीमतों का अनुमान लगाने के लिए, पूरी तरह से स्क्रैच से कस्टम TensorFlow.js मॉडल बनाया और उसे ट्रेन किया.
  2. आपने डेवलपमेंट मशीन पर Firebase + Firebase CLI टूलिंग के लिए साइन अप किया हो, उसे कॉन्फ़िगर किया हो, और इंस्टॉल किया हो.
  3. हमने एक ऐसी वेबसाइट लॉन्च की है जो काम करती है. यह पहले चरण में ट्रेन किए गए मॉडल को लोड करती है और इसका इस्तेमाल असल दुनिया के वेब ऐप्लिकेशन में करती है. इस ऐप्लिकेशन को दुनिया में कहीं भी, कोई भी व्यक्ति ऐक्सेस कर सकता है.

आगे क्या करना है?

अब आपके पास मशीन लर्निंग मॉडल को डिप्लॉय करने के लिए एक वर्किंग बेस है. इस बॉयलरप्लेट को बढ़ाने के लिए, आपके पास कौनसे क्रिएटिव आइडिया हैं?

हमें उम्मीद है कि आप इस सुविधा का इस्तेमाल अपने डेटा के साथ करेंगे. उस इंडस्ट्री या इलाके के बारे में सोचें जहां आप रहते हैं या काम करते हैं. इस तरह के डेटा का इस्तेमाल करके, ऐसी भविष्यवाणियां कैसे की जा सकती हैं जो आने वाले समय में आपके (या अन्य लोगों के) काम आ सकती हैं? यहां सिर्फ़ रियल एस्टेट का उदाहरण नहीं दिया गया है. हम आपको सलाह देते हैं कि आप इस सिद्धांत को अपनी चुनौतियों पर भी लागू करें. हैकिंग का आनंद लें!

#MadeWithTFJS का इस्तेमाल करके बनाए गए किसी भी कॉन्टेंट में हमें टैग करना न भूलें. इससे आपको सोशल मीडिया पर फ़ीचर होने या आने वाले समय में TensorFlow के इवेंट में दिखाए जाने का मौका मिल सकता है. अन्य लोगों ने क्या बनाया है, यह जानने के लिए इस लिंक पर क्लिक करें! हमें यह देखने में खुशी होगी कि आपने क्या बनाया है. अगर आपको कोई सुझाव, शिकायत या राय देनी है या कोई सवाल पूछना है, तो इस कोडलैब के लेखक से संपर्क करें.

ज़्यादा जानकारी पाने के लिए, TensorFlow.js के अन्य कोडलैब

एक्सप्लोर करने के लिए वेबसाइटें