टेक्स्ट को कैटगरी में बांटने के लिए, Flutter ऐप्लिकेशन बनाना

1. शुरू करने से पहले

इस कोडलैब में, आपको REST और gRPC के ज़रिए TensorFlow Serving की मदद से, Flutter ऐप्लिकेशन से टेक्स्ट क्लासिफ़िकेशन इन्फ़्रेंस चलाने का तरीका बताया गया है.

ज़रूरी शर्तें

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

  • आसान Flutter ऐप्लिकेशन बनाने और TensorFlow Serving (REST और gRPC) के ज़रिए टेक्स्ट को कैटगरी में बांटने का तरीका.
  • यूज़र इंटरफ़ेस (यूआई) में नतीजों को दिखाने का तरीका.

आपको किन चीज़ों की ज़रूरत होगी

2. Flutter डेवलपमेंट एनवायरमेंट सेट अप करना

Flutter डेवलपमेंट के लिए, आपको इस लैब को पूरा करने के लिए दो सॉफ़्टवेयर की ज़रूरत होगी— Flutter SDK और एक एडिटर.

इनमें से किसी भी डिवाइस पर कोडलैब चलाया जा सकता है:

  • iOS सिम्युलेटर (इसके लिए, Xcode टूल इंस्टॉल करना ज़रूरी है).
  • Android Emulator (इसे Android Studio में सेट अप करना ज़रूरी है).
  • कोई ब्राउज़र (डीबग करने के लिए Chrome ज़रूरी है).
  • Windows, Linux या macOS के डेस्कटॉप ऐप्लिकेशन के तौर पर. आपको उसी प्लैटफ़ॉर्म पर डेवलपमेंट करना होगा जहां आपको ऐप्लिकेशन डिप्लॉय करना है. इसलिए, अगर आपको Windows डेस्कटॉप ऐप्लिकेशन डेवलप करना है, तो आपको Windows पर ही डेवलप करना होगा, ताकि सही बिल्ड चेन को ऐक्सेस किया जा सके. ऑपरेटिंग सिस्टम के हिसाब से कुछ ज़रूरी शर्तें होती हैं. इनके बारे में docs.flutter.dev/desktop पर पूरी जानकारी दी गई है.

3. सेट अप करें

इस कोडलैब के लिए कोड डाउनलोड करने के लिए:

  1. इस कोडलैब के लिए, GitHub रिपॉज़िटरी पर जाएं.
  2. इस कोडलैब के सभी कोड डाउनलोड करने के लिए, कोड > ज़िप फ़ाइल डाउनलोड करें पर क्लिक करें.

2cd45599f51fb8a2.png

  1. डाउनलोड की गई zip फ़ाइल को अनज़िप करें, ताकि आपको अपनी ज़रूरत के सभी संसाधनों के साथ codelabs-main रूट फ़ोल्डर मिल सके.

इस कोडलैब के लिए, आपको सिर्फ़ रिपॉज़िटरी में मौजूद tfserving-flutter/codelab2 सबडायरेक्ट्री की फ़ाइलों की ज़रूरत होगी. इसमें दो फ़ोल्डर शामिल हैं:

  • starter फ़ोल्डर में, स्टार्टर कोड होता है. इस कोडलैब के लिए, आपको इसी कोड का इस्तेमाल करना है.
  • finished फ़ोल्डर में, तैयार किए गए सैंपल ऐप्लिकेशन का पूरा कोड होता है.

4. प्रोजेक्ट के लिए डिपेंडेंसी डाउनलोड करें

  1. VS Code में, File > Open folder पर क्लिक करें. इसके बाद, पहले डाउनलोड किए गए सोर्स कोड से starter फ़ोल्डर चुनें.
  2. अगर आपको कोई ऐसा डायलॉग दिखता है जिसमें स्टार्टर ऐप्लिकेशन के लिए ज़रूरी पैकेज डाउनलोड करने के लिए कहा गया है, तो पैकेज पाएं पर क्लिक करें.
  3. अगर आपको यह डायलॉग नहीं दिखता है, तो अपना टर्मिनल खोलें. इसके बाद, starter फ़ोल्डर में flutter pub get कमांड चलाएं.

7ada07c300f166a6.png

5. स्टार्टर ऐप्लिकेशन चलाना

  1. VS Code में, पक्का करें कि Android Emulator या iOS Simulator सही तरीके से सेट अप किया गया हो और स्टेटस बार में दिख रहा हो.

उदाहरण के लिए, Android Emulator के साथ Pixel 5 का इस्तेमाल करने पर आपको यह दिखेगा:

9767649231898791.png

iOS सिम्युलेटर के साथ iPhone 13 का इस्तेमाल करने पर, आपको यह दिखेगा:

95529e3a682268b2.png

  1. a19a0c68bc4046e6.png डीबग करना शुरू करें पर क्लिक करें.

ऐप्लिकेशन को चलाना और उसके बारे में ज़्यादा जानना

ऐप्लिकेशन, आपके Android Emulator या iOS Simulator पर लॉन्च होना चाहिए. इसका यूज़र इंटरफ़ेस (यूआई) बहुत आसान है. इसमें एक टेक्स्ट फ़ील्ड होता है, जिसमें उपयोगकर्ता टेक्स्ट टाइप कर सकता है. उपयोगकर्ता यह चुन सकता है कि डेटा को REST या gRPC के साथ बैकएंड में भेजना है या नहीं. बैकएंड, प्रीप्रोसेस किए गए इनपुट पर टेक्स्ट क्लासिफ़िकेशन करने के लिए, TensorFlow मॉडल का इस्तेमाल करता है. साथ ही, क्लाइंट ऐप्लिकेशन को क्लासिफ़िकेशन का नतीजा दिखाता है. इसके बाद, क्लाइंट ऐप्लिकेशन यूज़र इंटरफ़ेस (यूआई) को अपडेट करता है.

b298f605d64dc132.png d3ef3ccd3c338108.png

वर्गीकृत करें पर क्लिक करने से कुछ नहीं होता, क्योंकि यह अभी बैकएंड से कम्यूनिकेट नहीं कर सकता.

6. TensorFlow Serving की मदद से, टेक्स्ट क्लासिफ़िकेशन मॉडल डिप्लॉय करना

टेक्स्ट क्लासिफ़िकेशन, मशीन लर्निंग का एक बहुत ही सामान्य टास्क है. यह टेक्स्ट को पहले से तय की गई कैटगरी में बांटता है. इस कोडलैब में, TensorFlow Lite Model Maker कोडलैब की मदद से, स्पैम टिप्पणी का पता लगाने वाले मॉडल को ट्रेन करें में पहले से ट्रेन किए गए मॉडल को TensorFlow Serving के साथ डिप्लॉय किया जाता है. साथ ही, इनपुट टेक्स्ट को स्पैम या स्पैम नहीं है के तौर पर कैटगरी में बांटने के लिए, अपने Flutter फ़्रंटएंड से बैकएंड को कॉल किया जाता है.

TensorFlow Serving शुरू करना

  • अपने टर्मिनल में, Docker की मदद से TensorFlow Serving शुरू करें. हालांकि, PATH/TO/SAVEDMODEL प्लेसहोल्डर को अपने कंप्यूटर पर मौजूद mm_spam_savedmodel फ़ोल्डर के पूरे पाथ से बदलें.
docker pull tensorflow/serving

docker run -it --rm -p 8500:8500 -p 8501:8501 -v "PATH/TO/SAVEDMODEL:/models/spam-detection" -e MODEL_NAME=spam-detection tensorflow/serving

Docker, TensorFlow Serving की इमेज को अपने-आप डाउनलोड करता है. इसमें एक मिनट लगता है. इसके बाद, TensorFlow Serving शुरू हो जाना चाहिए. लॉग, इस कोड स्निपेट जैसा दिखना चाहिए:

2022-02-25 06:01:12.513231: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:206] Restoring SavedModel bundle.
2022-02-25 06:01:12.585012: I external/org_tensorflow/tensorflow/core/platform/profile_utils/cpu_utils.cc:114] CPU Frequency: 3000000000 Hz
2022-02-25 06:01:13.395083: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:190] Running initialization op on SavedModel bundle at path: /models/ssd_mobilenet_v2_2/123
2022-02-25 06:01:13.837562: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:277] SavedModel load for tags { serve }; Status: success: OK. Took 1928700 microseconds.
2022-02-25 06:01:13.877848: I tensorflow_serving/servables/tensorflow/saved_model_warmup_util.cc:59] No warmup data file found at /models/ssd_mobilenet_v2_2/123/assets.extra/tf_serving_warmup_requests
2022-02-25 06:01:13.929844: I tensorflow_serving/core/loader_harness.cc:87] Successfully loaded servable version {name: spam-detection version: 123}
2022-02-25 06:01:13.985848: I tensorflow_serving/model_servers/server_core.cc:486] Finished adding/updating models
2022-02-25 06:01:13.985987: I tensorflow_serving/model_servers/server.cc:367] Profiler service is enabled
2022-02-25 06:01:13.988994: I tensorflow_serving/model_servers/server.cc:393] Running gRPC ModelServer at 0.0.0.0:8500 ...
[warn] getaddrinfo: address family for nodename not supported
2022-02-25 06:01:14.033872: I tensorflow_serving/model_servers/server.cc:414] Exporting HTTP/REST API at:localhost:8501 ...
[evhttp_server.cc : 245] NET_LOG: Entering the event loop ...

7. इनपुट वाक्य को टोकनाइज़ करें

बैकएंड अब तैयार है. इसलिए, अब TensorFlow Serving को क्लाइंट के अनुरोध भेजे जा सकते हैं. हालांकि, इससे पहले आपको इनपुट वाक्य को टोकन में बदलना होगा. मॉडल के इनपुट टेंसर की जांच करने पर, आपको पता चलेगा कि यह रॉ स्ट्रिंग के बजाय, 20 पूर्णांकों की सूची चाहता है. टोकनाइज़ेशन एक ऐसी प्रोसेस है जिसमें ऐप्लिकेशन में टाइप किए गए हर शब्द को, शब्दावली के शब्दकोश के आधार पर पूर्णांकों की सूची में मैप किया जाता है. इसके बाद, उन्हें क्लासिफ़िकेशन के लिए बैकएंड को भेजा जाता है. उदाहरण के लिए, अगर आपने buy book online to learn more टाइप किया है, तो टोकनाइज़ेशन की प्रोसेस इसे [32, 79, 183, 10, 224, 631, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] पर मैप करती है. शब्दकोश के हिसाब से, ये संख्याएं अलग-अलग हो सकती हैं.

  1. lib/main.dart फ़ाइल में, _vocabMap वोकैबलरी डिक्शनरी बनाने के लिए, इस कोड को predict() तरीके में जोड़ें.
// Build _vocabMap if empty.
if (_vocabMap.isEmpty) {
  final vocabFileString = await rootBundle.loadString(vocabFile);
  final lines = vocabFileString.split('\n');
  for (final l in lines) {
    if (l != "") {
      var wordAndIndex = l.split(' ');
      (_vocabMap)[wordAndIndex[0]] = int.parse(wordAndIndex[1]);
    }
  }
} 
  1. टोकनाइज़ेशन लागू करने के लिए, पिछले कोड स्निपेट के तुरंत बाद यह कोड जोड़ें:
// Tokenize the input sentence.
final inputWords = _inputSentenceController.text
    .toLowerCase()
    .replaceAll(RegExp('[^a-z ]'), '')
    .split(' ');
// Initialize with padding token.
_tokenIndices = List.filled(maxSentenceLength, 0);
var i = 0;
for (final w in inputWords) {
  if ((_vocabMap).containsKey(w)) {
    _tokenIndices[i] = (_vocabMap)[w]!;
    i++;
  }

  // Truncate the string if longer than maxSentenceLength.
  if (i >= maxSentenceLength - 1) {
    break;
  }
}

यह कोड, वाक्य के स्ट्रिंग को छोटे अक्षरों में बदलता है, अक्षरों के अलावा अन्य वर्णों को हटाता है, और शब्दावली टेबल के आधार पर शब्दों को 20 पूर्णांक इंडेक्स पर मैप करता है.

8. REST के ज़रिए, Flutter ऐप्लिकेशन को TensorFlow Serving से कनेक्ट करना

TensorFlow Serving को अनुरोध भेजने के दो तरीके हैं:

  • REST
  • gRPC

REST के ज़रिए अनुरोध भेजना और जवाब पाना

REST के ज़रिए अनुरोध भेजने और जवाब पाने के तीन आसान चरण हैं:

  1. REST अनुरोध बनाएं.
  2. TensorFlow Serving को REST अनुरोध भेजें.
  3. REST रिस्पॉन्स से अनुमानित नतीजे को एक्सट्रैक्ट करें और यूज़र इंटरफ़ेस (यूआई) रेंडर करें.

आपको ये चरण, main.dart फ़ाइल में पूरे करने होंगे.

TensorFlow Serving को REST अनुरोध बनाएं और भेजें

  1. फ़िलहाल, predict() फ़ंक्शन, TensorFlow Serving को REST अनुरोध नहीं भेजता है. REST अनुरोध बनाने के लिए, आपको REST ब्रांच लागू करनी होगी:
if (_connectionMode == ConnectionModeType.rest) {
  // TODO: Create and send the REST request.

}
  1. इस कोड को REST ब्रांच में जोड़ें:
//Create the REST request.
final response = await http.post(
  Uri.parse('http://' +
      _server +
      ':' +
      restPort.toString() +
      '/v1/models/' +
      modelName +
      ':predict'),
  body: jsonEncode(<String, List<List<int>>>{
    'instances': [_tokenIndices],
  }),
);

TensorFlow Serving से मिले REST रिस्पॉन्स को प्रोसेस करना

  • REST रिस्पॉन्स को मैनेज करने के लिए, इस कोड को पिछले कोड स्निपेट के ठीक बाद जोड़ें:
// Process the REST response.
if (response.statusCode == 200) {
  Map<String, dynamic> result = jsonDecode(response.body);
  if (result['predictions']![0][1] >= classificationThreshold) {
    return 'This sentence is spam. Spam score is ' +
        result['predictions']![0][1].toString();
  }
  return 'This sentence is not spam. Spam score is ' +
      result['predictions']![0][1].toString();
} else {
  throw Exception('Error response');
}

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

इसे चलाएं

  1. a19a0c68bc4046e6.png डीबग करना शुरू करें पर क्लिक करें. इसके बाद, ऐप्लिकेशन के लोड होने का इंतज़ार करें.
  2. कुछ टेक्स्ट डालें. इसके बाद, REST > Classify को चुनें.

8e21d795af36d07a.png e79a0367a03c2169.png

9. gRPC के ज़रिए, Flutter ऐप्लिकेशन को TensorFlow Serving से कनेक्ट करना

REST के अलावा, TensorFlow Serving gRPC के साथ भी काम करता है.

b6f4449c2c850b0e.png

gRPC एक आधुनिक, ओपन सोर्स, और हाई-परफ़ॉर्मेंस वाला रिमोट प्रोसीजर कॉल (आरपीसी) फ़्रेमवर्क है. इसे किसी भी एनवायरमेंट में चलाया जा सकता है. यह डेटा सेंटर में और अलग-अलग डेटा सेंटर में मौजूद सेवाओं को आसानी से कनेक्ट कर सकता है. साथ ही, इसमें लोड बैलेंसिंग, ट्रेसिंग, हेल्थ चेकिंग, और पुष्टि करने की सुविधा के लिए प्लगइन का इस्तेमाल किया जा सकता है. यह देखा गया है कि व्यवहार में gRPC, REST से ज़्यादा बेहतर परफ़ॉर्म करता है.

gRPC की मदद से अनुरोध भेजना और जवाब पाना

gRPC की मदद से अनुरोध भेजने और जवाब पाने के लिए, ये चार आसान चरण पूरे करें:

  1. ज़रूरी नहीं: gRPC क्लाइंट स्टब कोड जनरेट करें.
  2. gRPC अनुरोध बनाएं.
  3. TensorFlow Serving को gRPC अनुरोध भेजें.
  4. gRPC रिस्पॉन्स से अनुमानित नतीजे निकालें और यूज़र इंटरफ़ेस (यूआई) रेंडर करें.

आपको ये चरण, main.dart फ़ाइल में पूरे करने होंगे.

ज़रूरी नहीं: gRPC क्लाइंट स्टब कोड जनरेट करना

TensorFlow Serving के साथ gRPC का इस्तेमाल करने के लिए, आपको gRPC वर्कफ़्लो का पालन करना होगा. ज़्यादा जानकारी के लिए, gRPC का दस्तावेज़ देखें.

a9d0e5cb543467b4.png

TensorFlow Serving और TensorFlow, आपके लिए .proto फ़ाइलें तय करते हैं. TensorFlow और TensorFlow Serving 2.8 के मुताबिक, ये .proto फ़ाइलें ज़रूरी हैं:

tensorflow/core/example/example.proto
tensorflow/core/example/feature.proto
tensorflow/core/protobuf/struct.proto
tensorflow/core/protobuf/saved_object_graph.proto
tensorflow/core/protobuf/saver.proto
tensorflow/core/protobuf/trackable_object_graph.proto
tensorflow/core/protobuf/meta_graph.proto
tensorflow/core/framework/node_def.proto
tensorflow/core/framework/attr_value.proto
tensorflow/core/framework/function.proto
tensorflow/core/framework/types.proto
tensorflow/core/framework/tensor_shape.proto
tensorflow/core/framework/full_type.proto
tensorflow/core/framework/versions.proto
tensorflow/core/framework/op_def.proto
tensorflow/core/framework/graph.proto
tensorflow/core/framework/tensor.proto
tensorflow/core/framework/resource_handle.proto
tensorflow/core/framework/variable.proto

tensorflow_serving/apis/inference.proto
tensorflow_serving/apis/classification.proto
tensorflow_serving/apis/predict.proto
tensorflow_serving/apis/regression.proto
tensorflow_serving/apis/get_model_metadata.proto
tensorflow_serving/apis/input.proto
tensorflow_serving/apis/prediction_service.proto
tensorflow_serving/apis/model.proto

google/protobuf/any.proto
google/protobuf/wrappers.proto
  • अपने टर्मिनल में, starter/lib/proto/ फ़ोल्डर पर जाएं और स्टब जनरेट करें:
bash generate_grpc_stub_dart.sh

gRPC अनुरोध बनाएं

REST अनुरोध की तरह ही, gRPC अनुरोध को gRPC ब्रांच में बनाया जाता है.

if (_connectionMode == ConnectionModeType.rest) {

} else {
  // TODO: Create and send the gRPC request.

}
  • gRPC अनुरोध बनाने के लिए, यह कोड जोड़ें:
//Create the gRPC request.
final channel = ClientChannel(_server,
    port: grpcPort,
    options:
        const ChannelOptions(credentials: ChannelCredentials.insecure()));
_stub = PredictionServiceClient(channel,
    options: CallOptions(timeout: const Duration(seconds: 10)));

ModelSpec modelSpec = ModelSpec(
  name: 'spam-detection',
  signatureName: 'serving_default',
);

TensorShapeProto_Dim batchDim = TensorShapeProto_Dim(size: Int64(1));
TensorShapeProto_Dim inputDim =
    TensorShapeProto_Dim(size: Int64(maxSentenceLength));
TensorShapeProto inputTensorShape =
    TensorShapeProto(dim: [batchDim, inputDim]);
TensorProto inputTensor = TensorProto(
    dtype: DataType.DT_INT32,
    tensorShape: inputTensorShape,
    intVal: _tokenIndices);

// If you train your own model, update the input and output tensor names.
const inputTensorName = 'input_3';
const outputTensorName = 'dense_5';
PredictRequest request = PredictRequest(
    modelSpec: modelSpec, inputs: {inputTensorName: inputTensor});

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

TensorFlow Serving को gRPC अनुरोध भेजना

  • TensorFlow Serving को gRPC अनुरोध भेजने के लिए, इस कोड को पिछले कोड स्निपेट के बाद जोड़ें:
// Send the gRPC request.
PredictResponse response = await _stub.predict(request);

TensorFlow Serving से मिले gRPC रिस्पॉन्स को प्रोसेस करना

  • जवाब को हैंडल करने के लिए कॉलबैक फ़ंक्शन लागू करने के लिए, इस कोड को पिछले कोड स्निपेट के बाद जोड़ें:
// Process the response.
if (response.outputs.containsKey(outputTensorName)) {
  if (response.outputs[outputTensorName]!.floatVal[1] >
      classificationThreshold) {
    return 'This sentence is spam. Spam score is ' +
        response.outputs[outputTensorName]!.floatVal[1].toString();
  } else {
    return 'This sentence is not spam. Spam score is ' +
        response.outputs[outputTensorName]!.floatVal[1].toString();
  }
} else {
  throw Exception('Error response');
}

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

इसे चलाएं

  1. a19a0c68bc4046e6.png डीबग करना शुरू करें पर क्लिक करें. इसके बाद, ऐप्लिकेशन के लोड होने का इंतज़ार करें.
  2. कुछ टेक्स्ट डालें. इसके बाद, gRPC > Classify को चुनें.

e44e6e9a5bde2188.png 92644d723f61968c.png

10. बधाई हो

आपने अपने ऐप्लिकेशन में टेक्स्ट क्लासिफ़िकेशन की सुविधाएं जोड़ने के लिए, TensorFlow Serving का इस्तेमाल किया!

अगले कोडलैब में, मॉडल को बेहतर बनाया जाएगा, ताकि ऐसे स्पैम मैसेज का पता लगाया जा सके जिनका पता मौजूदा ऐप्लिकेशन नहीं लगा सकता.

ज़्यादा जानें