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

1. परिचय

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

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

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

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

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

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

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

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

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

2. Firebase होस्टिंग क्या है?

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

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

Firebase होस्टिंग की मुख्य सुविधाएं

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

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

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

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

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

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

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

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

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

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

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

मॉडल सेव करना

ऊपर दिए गए 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 होस्टिंग पर डिप्लॉय करना आसान हो जाता है. आज के ट्यूटोरियल के लिए, हम Linux एनवायरमेंट का इस्तेमाल करेंगे. हालांकि, अगर आपके पास Windows या Mac है, तो अपने डिवाइस पर CLI टूलिंग सेट अप करने के लिए, यहाँ दिए गए निर्देशों का पालन करें.

हालांकि, 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 स्क्वेयर फ़ीट के लिए, मॉडल का अनुमान सही तरीके से दिखता है. यह अनुमान 13,36,999.25 डॉलर है. यह वाकई एक बहुत अच्छा अनुमान है, क्योंकि हमें उम्मीद थी कि यह स्क्वेयर फ़ीट का 1000 गुना होगा. अगर हम मॉडल को कॉल करने के लिए एक अच्छा यूज़र इंटरफ़ेस बनाते हैं, तो हम अपनी पसंद के हिसाब से कई अनुमान लगा सकते हैं. यह सब JavaScript में चलेगा. इससे आपकी क्वेरी निजी और सुरक्षित रहेंगी.

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

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

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

42b1cb8f7c10016.pngfbdd6504bec7c3d.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 के अन्य कोडलैब

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