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

1. परिचय

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

आपको क्या बनाना है

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

आपको इनके बारे में जानकारी मिलेगी

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

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

अपने वीडियो हमारे साथ शेयर करना

अगर आपने इस स्टैक का इस्तेमाल करके कुछ शानदार बनाया है, तो हमें बताएं! हमें आपके बनाए गए वीडियो देखने में खुशी होगी.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 से गुणा किया जाता है. हालांकि, एमएल मॉडल को 1,000 * 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 होस्टिंग पर अपलोड कर सकें!

मॉडल सेव करना

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

model.js

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

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

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

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

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

ea7ff3f08e4019b0.png

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

166d9408ad46599b.png

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

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

a34c2be47b26e6b5.png

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

1306dc803ad22338.png

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

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

Firebase, Node NPM पैकेज के तौर पर उपलब्ध है. इसे कमांड-लाइन इंटरफ़ेस (सीएलआई) की मदद से इंस्टॉल और इस्तेमाल किया जा सकता है. इससे, Firebase होस्टिंग पर अपनी लोकल फ़ाइलों और फ़ोल्डर को आसानी से डिप्लॉय किया जा सकता है. आज के ट्यूटोरियल में, हम 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 होस्टिंग पर डिप्लॉय करने के लिए, अपने प्रोजेक्ट को शुरू करना

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

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

firebase init

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

61e0f6d92ef3e1c4.png

यहां हम अपने कीबोर्ड पर डाउन ऐरो का इस्तेमाल करके, होस्टिंग को चुन सकते हैं. इसके बाद, चुनें के लिए स्पेसबार दबाएं और पुष्टि करने के लिए 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 प्रोजेक्ट फ़ोल्डर में खोली गई टर्मिनल विंडो पर वापस जाएं. यह वह फ़ोल्डर है जिसमें Firebase init फ़ाइलों के साथ-साथ ऊपर दिया गया "सार्वजनिक" फ़ोल्डर भी शामिल है.

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

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

firebase deploy

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

c5795cae85ed82a5.png

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

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

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

182aee0acfa7c41e.png

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

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

इस्तेमाल को मॉनिटर करना

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

42b1cb8f7c10016.png

fbdd6504bec7c3d.png

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

देखने के लिए वेबसाइटें