Android या iOS पर अपना पहला कंप्यूटर विज़न ऐप्लिकेशन बनाएं

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

इस कोडलैब में आप #39;कंप्यूटर विज़न इस्तेमाल करने का तरीका समझने वाले ऐप्लिकेशन को बनाने का तरीका जानेंगे. साथ ही, इमेज के मुख्य कॉन्टेंट की पहचान भी करेंगे. आम तौर पर, इसे इमेज की कैटगरी तय करना या इमेज लेबल करना कहा जाता है.

ज़रूरी बातें

यह कोडलैब इमेज की कैटगरी तय करने के तरीके के साथ शुरू करें पाथ का हिस्सा है. यह अनुभव उन डेवलपर के लिए लिखा गया है जो मशीन लर्निंग के मामले में नए हैं.

आप क्या बनाएंगे #39;

• एक Android ऐप्लिकेशन, जो फूलों की इमेज की कैटगरी तय कर सकता है
• (ज़रूरी नहीं) एक iOS ऐप्लिकेशन जो फूलों की इमेज को कैटगरी में बांट सकता है

आपको इनकी ज़रूरत होगी

• Android Studio, कोडलैब के Android वाले हिस्से के लिए https://developer.android.com/studio पर उपलब्ध है
• Xcode, कोडलैब के iOS हिस्से के लिए Apple App Store में उपलब्ध है

2. अपनी प्रोफ़ाइल बनाना शुरू करें

कंप्यूटर विज़न, मशीन लर्निंग के बड़े विषय में एक फ़ील्ड है. यह मशीन को इमेज के कॉन्टेंट से जानकारी लेने और उसे प्रोसेस करने के नए तरीके खोजने के लिए काम करता है. जहां पहले कंप्यूटर ने इमेज का असल डेटा, जैसे कि इमेज बनाने वाले पिक्सल का मान सेव किया था, वहीं कंप्यूटर दृष्टि से कंप्यूटर को इमेज के कॉन्टेंट को पार्स करने और इसमें मौजूद #39; के बारे में जानकारी पाने की अनुमति मिलती है.

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

इस कोडलैब (कोड बनाना सीखना) में, आप #39; मुख्य ऐप्लिकेशन के केस को हैंडल करने वाला ऐप्लिकेशन बनाने का तरीका जानेंगे. साथ ही, इमेज के मुख्य कॉन्टेंट की पहचान करेंगे. आम तौर पर, इसे इमेज की कैटगरी तय करना या इमेज लेबल करना कहा जाता है.

ऐप्लिकेशन को जितना हो सके उतना आसान रखने के लिए, वह ऐसी इमेज का इस्तेमाल करेगा जो रिसॉर्स के तौर पर उनके साथ बंडल की गई होती हैं. साथ ही, वह आपको उनकी कैटगरी में दिखाती हैं. आने वाले समय में एक्सटेंशन, इमेज पिकर का इस्तेमाल कर सकते हैं या सीधे कैमरे से इमेज खींच सकते हैं.

आपको Android Studio का इस्तेमाल करके, Android पर ऐप्लिकेशन बनाने की प्रोसेस शुरू करनी होगी. (iOS पर यही काम करने के लिए सातवें चरण पर जाएं.)

1. Android Studio खोलें. फ़ाइल मेन्यू में जाकर, नया प्रोजेक्ट बनाएं चुनें.
2. आपको प्रोजेक्ट प्रोजेक्ट चुनने के लिए कहा जाएगा. खाली गतिविधि चुनें.

3. आगे बढ़ें पर क्लिक करें. आपसे #अपना प्रोजेक्ट कॉन्फ़िगर करें कहा जाएगा. इसे कोई भी नाम और पैकेज का नाम दें, लेकिन इस कोडलैब में मौजूद सैंपल कोड में प्रोजेक्ट का नाम ImageClassifierStep1 और पैकेज का नाम com.google.imageclassifierstep1 इस्तेमाल होता है.

4. Kotlin या Java में से, अपनी पसंदीदा भाषा चुनें. यह लैब, Kotlin का इस्तेमाल करती है. इसलिए, अगर आपको पूरी तरह से फ़ॉलो करना है, तो आपको Kotlin चुनना होगा.
5. तैयार होने पर, 'पूरा करें' पर क्लिक करें. Android Studio आपके लिए ऐप्लिकेशन बना देगा. सब कुछ सेट अप होने में कुछ समय लग सकता है.

3. एमएल किट's इमेज लेबलिंग लाइब्रेरी इंपोर्ट करें

एमएल किट (https://developers.google.com/ml-kit) डेवलपर के लिए कई समाधान ऑफ़र करती है, मशीन लर्निंग में सामान्य परिस्थितियों को पूरा करती है, और उन्हें लागू करना और क्रॉस-प्लैटफ़ॉर्म पर काम करना आसान बनाती है. एमएल किट, टर्नकी लाइब्रेरी उपलब्ध कराती है. इस लाइब्रेरी को इमेज लेबलिंग नाम की ऐप्लिकेशन में इस्तेमाल किया जा सकता है. इस लाइब्रेरी में एक मॉडल शामिल है, जिसे 600 से ज़्यादा इमेज की पहचान करने के लिए पहले से ट्रेनिंग दी गई है. इस तरह, इसकी शुरुआत करना बहुत आसान है.

ध्यान दें कि एमएल किट आपको एक ही एपीआई का इस्तेमाल करके कस्टम मॉडल का इस्तेमाल करने की सुविधा भी देती है. इसलिए, जब आप ##39 पर तैयार हो जाएं, तब आप &शुरू करें;और अपने मामले के लिए प्रशिक्षित मॉडल का इस्तेमाल करने वाले मनमुताबिक इमेज लेबलिंग ऐप्लिकेशन बनाना शुरू करें.

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

1. Android Studio में, प्रोजेक्ट एक्सप्लोरर का इस्तेमाल करके पक्का करें कि सबसे ऊपर Android चुना गया हो.
2. Gradle स्क्रिप्ट फ़ोल्डर खोलें और ऐप्लिकेशन के लिए, build.gradle फ़ाइल चुनें. यहां दो या उससे ज़्यादा फ़ाइल हो सकती हैं, इसलिए पक्का करें कि आप ऐप्लिकेशन लेवल की फ़ाइल का इस्तेमाल कर रहे हैं, जैसा कि यहां दिखाया गया है:

3. फ़ाइल के सबसे नीचे, आपको डिपेंडेंसी नाम का एक सेक्शन दिखेगा, जिसमें implementation, testImplementation, और androidImplementation सेटिंग की सूची सेव होगी. इस कोड वाली फ़ाइल में नई कुंजी जोड़ें:

implementation 'com.google.mlkit:image-labeling:17.0.3'

(पक्का करें कि यह डिपेंडेंसी के अंदर हो { } (

4. आपको #39;विंडो के सबसे ऊपर एक बार दिखेगा, जिसमें बताया जाएगा कि build.gradle बदल गया है. साथ ही, आपको फिर से सिंक करना होगा. आगे बढ़ें और ऐसा करें. अगर आपको यह नहीं दिख रहा है, तो सबसे ऊपर दाईं ओर टूलबार में छोटे हाथी के आइकॉन पर क्लिक करें और उस पर क्लिक करें.

अब आपने*#39 एमएल किट इंपोर्ट कर ली है और आप इमेज लेबल करने के लिए तैयार हैं.

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

4. यूज़र इंटरफ़ेस बनाना

Android Studio में, एक्सएमएल-आधारित लेआउट फ़ाइल का इस्तेमाल करके, हर स्क्रीन (या गतिविधि) के लिए यूज़र इंटरफ़ेस में बदलाव किया जाता है. आपने जो बुनियादी ऐप्लिकेशन बनाया है उसमें एक गतिविधि है (जिसका कोड MainActivity है और आप जल्द ही उसे देख पाएंगे) और यूज़र इंटरफ़ेस का एलान activity_main.xml में है.

आप इसे Android's प्रोजेक्ट एक्सप्लोरर में res > लेआउट फ़ोल्डर में पा सकते हैं – इस तरह से:

इससे, एक पूरा एडिटर खुलेगा. इसकी मदद से, आप अपनी गतिविधि का यूज़र इंटरफ़ेस डिज़ाइन कर सकते हैं. इसमें बहुत कुछ है और इस लैब का मकसद आपको इसका इस्तेमाल करना नहीं सिखाना है. लेआउट एडिटर के बारे में ज़्यादा जानने के लिए, यहां जाएं: https://developer.android.com/studio/write/layout-editor

इस लैब के लिए, एडिटर के ऊपरी दाएं कोने पर मौजूद कोड टूल को चुनें.

अब आपको विंडो के मुख्य हिस्से में सिर्फ़ एक्सएमएल कोड दिखेगा. कोड को इस तरह बदलें:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageToLabel"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <Button
            android:id="@+id/btnTest"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Label Image"
            android:layout_gravity="center"/>
        <TextView
            android:id="@+id/txtOutput"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:gravity="start|top" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

इससे आपको एक बहुत ही आसान लेआउट मिलेगा, जिसमें ImageView (इमेज को रेंडर करने के लिए), Button (उपयोगकर्ता को प्रेस करने के लिए), और TextView शामिल होगा, जहां लेबल दिखाए जाएंगे.

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

5. ऐप्लिकेशन के साथ इमेज बंडल करें

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

1. प्रोजेक्ट एक्सप्लोरर में सबसे ऊपर दाईं ओर, ऐप्लिकेशन पर दायां क्लिक करें और नई डायरेक्ट्री चुनें.
2. अलग-अलग डायरेक्ट्री के साथ दिखने वाले डायलॉग पर, src/main/asset चुनें.

यह #&39; कर लेने के बाद, आपको प्रोजेक्ट एक्सप्लोरर में एक नया एसेट फ़ोल्डर दिखेगा:

3. इस फ़ोल्डर पर दायां क्लिक करने पर, आपको #39; विकल्पों की सूची वाला पॉप-अप दिखेगा. इनमें से एक फ़ोल्डर, आपके फ़ाइल सिस्टम में खोलना होगा. अपने ऑपरेटिंग सिस्टम के हिसाब से सही सिस्टम चुनें और उसे चुनें. (Mac पर यह फ़ाइंडर में दिखाएं होगा, Windows पर एक्सप्लोरर में खोलें होगा, और Ubuntu पर यह फ़ाइलों में दिखाएं होगा.)

4. फ़ाइल को उसमें कॉपी करें. आप Pixabay जैसी साइटों से इमेज डाउनलोड कर सकते हैं. इमेज का नाम बदलकर कुछ आसान करने का सुझाव दिया जाता है. इस मामले में, इमेज का नाम बदलकर flower1.jpg कर दिया गया है.

ऐसा करने के बाद, Android Studio पर वापस जाएं. इसके बाद, आपको एसेट फ़ोल्डर में अपनी फ़ाइल दिखेगी.

अब आप इस इमेज को लेबल करने के लिए तैयार हैं!

6. इमेज को लेबल करने के लिए क्लासिफ़िकेशन कोड लिखें

अब Android के लिए कंप्यूटर विज़न कर रहे हैं!

1. आप अपना कोड MainActivity फ़ाइल में लिखते हैं, इसलिए com.google.devrel.imageclassifierstep1 (या अगर आप कोई दूसरा नेमस्पेस चुनते हैं, तो) के तहत प्रोजेक्ट फ़ोल्डर में उसे ढूंढें. ध्यान दें कि आम तौर पर किसी Android Studio प्रोजेक्ट में तीन नेमस्पेस फ़ोल्डर सेट अप होते हैं, एक ऐप्लिकेशन के लिए, एक Android टेस्ट के लिए, और एक टेस्ट के लिए. MainActivity आपको उस यूआरएल में मिलेगा जिस पर ब्रैकेट के बाद ब्यौरा नहीं है.

अगर आप Kotlin का इस्तेमाल करते हैं, तो आप जानना चाहेंगे कि पैरंट फ़ोल्डर को Java क्यों कहा जाता है. यह एक ऐतिहासिक आर्टफ़ैक्ट है, जो सिर्फ़ Android Studio पहले से मौजूद है. आने वाले वर्शन में यह समस्या ठीक हो सकती है. हालांकि, अगर आप Kotlin का इस्तेमाल करना चाहते हैं, तो चिंता न करें. यह अब भी ठीक है. स्रोत कोड के लिए यह सिर्फ़ फ़ोल्डर का नाम है.

2. MainActivity फ़ाइल खोलने पर, आपको #39;कोड एडिटर में MainActivity नाम की क्लास फ़ाइल दिखेगी. यह कुछ ऐसा दिखना चाहिए:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

क्लोज़िंग कर्ली ब्रैकेट के नीचे, आप एक ऐसा एक्सटेंशन कोड जोड़ सकते हैं जो क्लास का हिस्सा#39;नहीं है, लेकिन क्लास में इसका इस्तेमाल किया जा सकता है. आपको एसेट की बिट मैप के तौर पर फ़ाइल पढ़ने के लिए, एक्सटेंशन की ज़रूरत होगी. इसका इस्तेमाल उस इमेज को लोड करने के लिए किया जाएगा जिसे आपने पहले एसेट फ़ोल्डर में कॉपी किया था.

3. यह कोड जोड़ें:

// extension function to get bitmap from assets
fun Context.assetsToBitmap(fileName: String): Bitmap?{
    return try {
        with(assets.open(fileName)){
            BitmapFactory.decodeStream(this)
        }
    } catch (e: IOException) { null }
}

Android Studio शायद इस समय शिकायत करेगा और लाल रंग में कुछ कोड हाइलाइट करेगा, जैसे कि Context, Bitmap और IOException:

चिंता न करें! ऐसा इसलिए है, क्योंकि आपने अभी तक उन लाइब्रेरी को इंपोर्ट नहीं किया है जिनमें #39 हैं. Android Studio एक आसान शॉर्टकट है.

4. कर्सर को शब्द के ऊपर खींचें और ALT + Enter (Mac पर Option + Enter दबाएं. इससे आपके लिए इंपोर्ट जनरेट हो जाएगा.
5. इसके बाद, आप एसेट से बिट मैप लोड कर सकते हैं और उसे ImageView में रख सकते हैं. MainActivity के onCreateFunction में, setContentView लाइन के ठीक नीचे यह कोड जोड़ें:

val img: ImageView = findViewById(R.id.imageToLabel)
// assets folder image file name with extension
val fileName = "flower1.jpg"
// get bitmap from assets folder
val bitmap: Bitmap? = assetsToBitmap(fileName)
bitmap?.apply {
    img.setImageBitmap(this)
}

6. पहले की तरह, कुछ कोड लाल रंग में हाइलाइट किए जाएंगे. इंपोर्ट करने के लिए कर्सर को उस लाइन पर रखें और Alt + Enter / Option + Enter इस्तेमाल करें.
7. आपने पहले जो layout.xml फ़ाइल बनाई थी, उसमें आपने ImageView Name को imageToLabel नाम दिया है, इसलिए पहली पंक्ति उस लेआउट जानकारी का इस्तेमाल करके, img नाम के ImageView ऑब्जेक्ट का एक इंस्टेंस बनाएगा. यह बिल्ट-इन android फ़ंक्शन, findViewById का इस्तेमाल करके जानकारी ढूंढता है. इसके बाद, यह एसेट के फ़ोल्डर से किसी इमेज को लोड करने के लिए, flower1.jpg फ़ाइल नाम का इस्तेमाल करता है. इसके लिए, यह assetsToBitmap फ़ंक्शन का इस्तेमाल करता है, जिसे आपने पिछले चरण में बनाया था. आखिर में, यह img मैप में बिट मैप लोड करने के लिए, बिट मैप के ऐब्स्ट्रैक्ट क्लास का इस्तेमाल करता है.
8. लेआउट फ़ाइल में TextView का इस्तेमाल करके, इमेज के लिए अनुमान लगाए गए लेबल को रेंडर किया जाएगा. इसके बाद, कोड ऑब्जेक्ट पाएं. पिछले कोड के ठीक नीचे, इसे जोड़ें:

val txtOutput : TextView = findViewById(R.id.txtOutput)

पहले की तरह, टेक्स्ट व्यू के नाम के लिए लेआउट व्यू की जानकारी को लेआउट फ़ाइल के बारे में पता चलता है. (एक्सएमएल (जहां यह' txtOutput कहा जाता है) देखें) और इसका इस्तेमाल txt आउटपुट नाम के TextView ऑब्जेक्ट को इंस्टैंशिएट करने के लिए करता है.

इसी तरह, आप बटन को दिखाने के लिए एक बटन ऑब्जेक्ट बनाएंगे और उसे लेआउट फ़ाइल कॉन्टेंट की मदद से इंस्टैंशिएट करेंगे.

लेआउट फ़ाइल में हमने बटन btnTest कहा, ताकि हम इसे इस तरह इंस्टैंशिएट कर सकें:

val btn: Button = findViewById(R.id.btnTest)

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

जारी रखने से पहले, पक्का करें कि आपका onCreate कोड ऐसा दिखता है:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val img: ImageView = findViewById(R.id.imageToLabel)
    // assets folder image file name with extension
    val fileName = "flower1.jpg"
    // get bitmap from assets folder
    val bitmap: Bitmap? = assetsToBitmap(fileName)
    bitmap?.apply {
        img.setImageBitmap(this)
    }
    val txtOutput : TextView = findViewById(R.id.txtOutput)
    val btn: Button = findViewById(R.id.btnTest)
}

किसी भी कीवर्ड का रंग लाल नहीं होना चाहिए, जो यह बताता है कि उन्हें अभी तक इंपोर्ट नहीं किया गया है. अगर ऐसा है, तो कृपया वापस जाएं और इंपोर्ट करने के लिए ALT + Enter आज़माएं.

इमेज लेबल का एमएल किट' का इस्तेमाल करते समय आम तौर पर, सबसे पहले चरण को पसंद के मुताबिक बनाने के लिए विकल्प ऑब्जेक्ट बनाना होता है. आप अपनी इमेज को InputImage फ़ॉर्मैट में बदल सकते हैं, जिसे ML Kit पहचान सकता है. फिर आप अनुमान लगाने के लिए लेबलर ऑब्जेक्ट बनाते हैं. इससे आपको नतीजों के साथ एक एसिंक्रोनस कॉल वापस मिलेगा, जिसे आप पार्स कर सकते हैं.

अभी-अभी बनाए गए बटन पर, यह सब कुछ #&30;s onClickListener इवेंट में करें. पूरा कोड यहां है:

btn.setOnClickListener {
  val labeler = ImageLabeling.getClient(ImageLabelerOptions.DEFAULT_OPTIONS)
  val image = InputImage.fromBitmap(bitmap!!, 0)
  var outputText = ""
  labeler.process(image)
    .addOnSuccessListener { labels ->
      // Task completed successfully
      for (label in labels) {
        val text = label.text
        val confidence = label.confidence
        outputText += "$text : $confidence\n"
      }
      txtOutput.text = outputText
  }
    .addOnFailureListener { e ->
      // Task failed with an exception
  }
}

• जब उपयोगकर्ता पहली बार बटन पर क्लिक करता है, तो कोड, ImageLabeling.getClient का इस्तेमाल करके लेबलर को इंस्टैंशिएट करता है, जिससे वह ImageLabelerOptions पास करता है. यह DEFAULT_OPTIONS प्रॉपर्टी के साथ आता है, जिसकी मदद से हम तुरंत काम शुरू कर सकते हैं.
• इसके बाद, बिटमैप से, उसकी बिटमैप तरीके का इस्तेमाल करके एक InputImage बनाया जाएगा. InputImage, ML Kit' का फ़ॉर्मैट है जो इमेज को प्रोसेस कर रहा है.
• आखिर में, लेबलर इमेज को प्रोसेस करेगा और सफल होने या काम न कर पाने पर एसिंक्रोनस कॉलबैक देगा. अगर अनुमान सफल होता है, तो कॉलबैक में लेबल की सूची शामिल होगी. इसके बाद, आप लेबल की सूची और कॉन्फ़िडेंस वैल्यू को पढ़ने के लिए, इस सूची को पार्स कर सकते हैं. अगर यह विफल होता है, तो यह आपको एक अपवाद वापस भेजेगा, जिसका इस्तेमाल करके आप उपयोगकर्ता से शिकायत कर सकते हैं.

इसके साथ ही, काम हो गया! अब आप Android डिवाइस पर या एम्युलेटर में ऐप्लिकेशन चला सकते हैं. अगर आपने पहले कभी ऐसा नहीं किया है, तो यहां जाने का तरीका जानें: https://developer.android.com/studio/run/emulator

यह ऐप्लिकेशन एम्युलेटर में चल रहा है. सबसे पहले आपको इमेज और बटन दिखेगा, लेकिन लेबल खाली रहेगा.

बटन को दबाएं और आपको इमेज के लिए लेबल का एक सेट मिलेगा.

यहां आप देख सकते हैं कि लेबलर ने तय किया है कि इमेज में पंखुड़ी, फूल, पौधे, और आसमान शामिल है. ये सभी सही हैं और ये सभी दिखाते हैं कि मॉडल, इमेज को पार्स करने के लिए काम कर रहा है.

लेकिन यह अब तक तय नहीं कर पा रहा है कि यह डेज़ी की तस्वीर है. इसके लिए आपको एक कस्टम मॉडल की ज़रूरत होगी जिसे खास फूलों पर ट्रेनिंग दी जाए और आप इसे #39; अगले लैब में करने का तरीका देखेंगे.

नीचे दिए गए तरीके से, आप iOS पर यह ऐप्लिकेशन बनाने का तरीका जानेंगे{0}.

7. iOS पर इमेज की कैटगरी तय करने वाला टूल बनाना - शुरू करना

आप Xcode का इस्तेमाल करके, iOS पर एक जैसा ऐप्लिकेशन बना सकते हैं.

1. Xcode लॉन्च करें और फ़ाइल मेन्यू से, नया प्रोजेक्ट चुनें. आपको यह डायलॉग #39 दिखेगा:

2. दिखाए गए ऐप्लिकेशन में से पर क्लिक करें और आगे बढ़ें पर क्लिक करें. आपसे #39; प्रोजेक्ट के विकल्प चुनने के लिए कहा जाएगा. इसे नाम और संगठन का पहचानकर्ता दें, जैसा कि दिखाया गया है. पक्का करें कि इंटरफ़ेस का टाइप Storyboard है और भाषा Swift है, जैसा कि दिखाया गया है.

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

8. Cocoapods का इस्तेमाल करके एमएल किट जोड़ें

iOS पर एमएल किट भी काम करती है. इसलिए, आप इमेज की कैटगरी तय करने के लिए इसका इस्तेमाल कर सकते हैं. इसे शामिल करने के लिए आप'CocoaPods का इस्तेमाल करेंगे. अगर आपने इसे पहले से इंस्टॉल नहीं किया है, तो https://cocoapods.org/ पर दिए गए निर्देशों का पालन करके, ऐसा किया जा सकता है

1. वह डायरेक्ट्री खोलें जहां आपने अपना प्रोजेक्ट बनाया था. इसमें आपकी .xcodeChoose फ़ाइल होनी चाहिए.

यहां आपको .xcodeChoose फ़ाइल दिखेगी, जिसमें I'm सही जगह पर दिखेगा.

2. इस फ़ोल्डर में, Podfile नाम की एक नई फ़ाइल बनाएं. यहां कोई एक्सटेंशन नहीं है, बस यह Podfile है. इसमें, ये चीज़ें जोड़ें:

platform :ios, '10.0'

target 'ImageClassifierStep1' do
        pod 'GoogleMLKit/ImageLabeling'
end

3. इसे सेव करें और टर्मिनल पर वापस आएं. समान निर्देशिका pod install में. कोकोपॉड, सही लाइब्रेरी और डिपेंडेंसी डाउनलोड करेंगे और एक नया फ़ाइल फ़ोल्डर बनाएंगे, जो आपके प्रोजेक्ट को उसकी बाहरी डिपेंडेंसी के साथ जोड़ता हो.

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

अब आप अगले चरण पर जाने और यूज़र इंटरफ़ेस बनाने के लिए तैयार हैं.

9. स्टोरीबोर्ड का इस्तेमाल करके iOS यूज़र इंटरफ़ेस (यूआई) बनाना

1. Main.storyboard फ़ाइल खोलें. इसके बाद, आपको और #39;उपयोगकर्ता का इंटरफ़ेस लेआउट दिखेगा, जिसमें फ़ोन के डिज़ाइन की जगह होगी.
2. स्क्रीन पर सबसे ऊपर दाईं ओर, + बटन दिया गया है. इसका इस्तेमाल करके आप कंट्रोल जोड़ सकते हैं. कंट्रोल पैलेट पाने के लिए इस पर क्लिक करें.

3. वहां से, डिज़ाइन पेज पर ImageView, बटन और लेबल खींचें और छोड़ें. उन्हें ऊपर से नीचे की तरह व्यवस्थित करें:

4. बटन के टेक्स्ट में बदलाव करने के लिए, बटन पर बटन से श्रेणी तय करें करें.
5. लेबल को बड़ा करने के लिए, उसके कंट्रोल के हैंडल को खींचें और छोड़ें. (UIImageView की ऊंचाई और दोगुनी ऊंचाई के बराबर जानकारी रखें.)
6. अगर लेबल अब भी चुना हुआ है, तो सबसे ऊपर दाईं ओर मौजूद सिलेक्टर बटन पर क्लिक करके इंस्पेक्टर पैलेट दिखाएं.
7. ऐसा करने के बाद#39, लाइंस की सेटिंग ढूंढें और पक्का करें कि यह 's 0 पर सेट है. इसकी मदद से लेबल, पंक्तियों की एक डाइनैमिक संख्या रेंडर कर सकता है.

अब आप अगले चरण पर जाने के लिए तैयार हैं – यूज़र इंटरफ़ेस (यूआई) को आउटलेट और कार्रवाइयों का इस्तेमाल करके कोड करने के लिए वायर करना.

10. कार्रवाइयाँ और आउटलेट बनाना

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

अगले चरण में आपको इमेज व्यू और लेबल के लिए, आउटलेट बनाने होंगे. इमेज व्यू को इसमें लोड करने के लिए कोड में दिखाया जाएगा. लेबल का कोड एमएल किट से मिलने वाले अनुमान के आधार पर कोड सेट करने के लिए भेजा जाएगा.

1. स्क्रीन की ऊपरी दाईं ओर दिए गए नियंत्रण पर क्लिक करके इंस्पेक्टर पैलेट बंद करें, फिर दाईं ओर संपादक जोड़ें बटन पर क्लिक करें जो #33; के ठीक नीचे है.

2. आपको एक गुमराह करने वाला स्क्रीन लेआउट मिलेगा, जिसमें main.storyboard दो बार खोला जाएगा. बाईं ओर, प्रोजेक्ट नेविगेटर में ViewController.swift चुनें, ताकि व्यू कंट्रोलर कोड खुल जाए. हो सकता है कि बाईं ओर के स्टोरीबोर्ड एडिटर से आपका डिज़ाइन प्लैटफ़ॉर्म गायब हो गया हो. हालांकि, चिंता न करें, यह अब भी मौजूद है!
3. इसे वापस पाने के लिए, व्यू कंट्रोलर सीन में कंट्रोलर देखें पर क्लिक करें. अपना यूज़र इंटरफ़ेस (यूआई) इस तरह दिखाने की कोशिश करें - बाईं ओर दिया गया स्टोरीबोर्ड, आपका डिज़ाइन दिखाता है और दाईं ओर ViewController.swift का कोड देता है.

4. बाईं ओर मौजूद डिज़ाइन प्लैटफ़ॉर्म से यूज़र इंटरफ़ेस (यूआई) व्यू चुनें. कंट्रोल बटन को दबाकर, दाईं ओर बने कोड में उसे खींचें और छोड़ें. यह सिर्फ़ class कीवर्ड (ऊपर दिए गए स्क्रीनशॉट में लाइन 11 पर) के ठीक नीचे है.

जब आप खींचेंगे, तब आपको एक ऐरो दिखेगा. वहीं, ऊपर जाने के बाद आपको एक # पॉप-अप दिखेगा:

5. नाम फ़ील्ड को "imageView&kot; के तौर पर भरें और कनेक्ट करें पर क्लिक करें.
6. लेबल के साथ यह प्रोसेस दोहराएं और उसे नाम &कोटेशन, एलबीएल आउटपुट दें.
7. अहम जानकारी: बटन के लिए, आप वही काम #33 करेंगे. पक्का करें कि आपने कनेक्शन टाइप को कार्रवाई पर सेट किया है, न कि आउटलेट पर!

8. इसे नाम &kot;doClassization&कोटेशन; दें और कनेक्ट करें पर क्लिक करें.

जब आप #39;हो जाते हैं, तो आपका कोड इस तरह दिखना चाहिए: (ध्यान दें कि लेबल और इमेज व्यू को IBOutlet (इंटरफ़ेस बिल्डर आउटलेट) और IBAction (इंटरफ़ेस बिल्डर कार्रवाई) के तौर पर दिखाया जाता है.

import UIKit

class ViewController: UIViewController {

    @IBAction func doClassification(_ sender: Any) {
    }
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var lblOutput: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

}

9. आखिर में, ऐप्लिकेशन के साथ इमेज जोड़ें, ताकि हम आसानी से कैटगरी तय कर सकें. ऐसा करने के लिए, फ़ाइल एक्सप्लोरर से फ़ाइल को Xcode के बाईं ओर एक्सप्लोरर में खींचें और छोड़ें. जब आप इसे छोड़ देंगे, तो आपको एक पॉप-अप मिलेगा, जैसे:

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

इस फ़ाइल को आपके ऐप्लिकेशन के साथ बंडल किया जाएगा और अब आप इसे आसानी से अलग-अलग कैटगरी में बांट पाएंगे. अब आप #39; यूज़र इंटरफ़ेस का इस्तेमाल करके, इमेज की कैटगरी तय करने के लिए कोड बना सकते हैं!

11. इमेज की कैटगरी तय करने के लिए कोड लिखें

अब जब सब कुछ सेट अप हो चुका है, तो इमेज को अलग-अलग ग्रुप में बांटने के लिए कोड लिखना बहुत आसान है.

1. स्टोरीबोर्ड डिज़ाइनर को बंद करने के लिए, डिज़ाइन प्लैटफ़ॉर्म के ऊपर सबसे ऊपर बाएं कोने में मौजूद X बटन पर क्लिक करें. इससे आप सिर्फ़ अपने कोड पर फ़ोकस कर सकेंगे. आप इस लैब के बाकी हिस्से के लिए, ViewController.swift में बदलाव करेंगे.
2. UIKit के इंपोर्ट के ठीक नीचे, इस कोड को सबसे ऊपर जोड़कर MLKitVision और MLKit इमेज लेबलिंग लाइब्रेरी को इंपोर्ट करें:

import MLKitVision
import MLKitImageLabeling

3. इसके बाद, अपने viewDidLoad फ़ंक्शन में, ऐप्लिकेशन में बंडल की गई फ़ाइल का इस्तेमाल करके ImageView शुरू करें:

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    imageView.image = UIImage(named:"flower1.jpg")
}

4. इमेज के लिए लेबल पाने के लिए हेल्पर फ़ंक्शन बनाएं: viewDidLoad() के ठीक नीचे:

func getLabels(with image: UIImage){

5. इमेज से VisionImage बनाएं. इमेज की कैटगरी तय करते समय, एमएल किट इस टाइप का इस्तेमाल करती है. इसलिए, getLabel फ़ंक में, यह कोड जोड़ें:

let visionImage = VisionImage(image: image)
visionImage.orientation = image.imageOrientation

6. इसके बाद, इमेज लेबलर के लिए विकल्प बनाएं. इन विकल्पों का इस्तेमाल करके इसे शुरू किया जाएगा. इस मामले में आप confidenceThreshold का बुनियादी विकल्प सेट करेंगे. इसका मतलब यह है कि आप लेबलर से सिर्फ़ ऐसे लेबल लौटाने के लिए कहेंगे जिनमें 0.4 या इससे ज़्यादा का भरोसा हो. उदाहरण के लिए, हमारे फूलों के लिए &कोट</कोट

let options = ImageLabelerOptions()
options.confidenceThreshold = 0.4

7. अब इन विकल्पों का इस्तेमाल करके लेबलर बनाएं:

let labeler = ImageLabeler.imageLabeler(options: options)

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

labeler.process(visionImage) { labels, error in
    self.processResult(from: labels, error: error)
  }

अगर Xcode ने यह शिकायत की है कि कोई processResult सदस्य नहीं है, तो चिंता न करें. आपने अभी तक इसे #39;लागू नहीं किया है. इसके बाद आप ऐसा कर पाएंगे.

सुविधा के लिए, यहां #labels फ़ंक का पूरा ऐक्सेस दिया गया है:

// This is called when the user presses the button
func getLabels(with image: UIImage){
    // Get the image from the UI Image element and set its orientation
    let visionImage = VisionImage(image: image)
    visionImage.orientation = image.imageOrientation

    // Create Image Labeler options, and set the threshold to 0.4
    // so we will ignore all classes with a probability of 0.4 or less
    let options = ImageLabelerOptions()
    options.confidenceThreshold = 0.4

    // Initialize the labeler with these options
    let labeler = ImageLabeler.imageLabeler(options: options)

    // And then process the image, with the callback going to self.processresult
    labeler.process(visionImage) { labels, error in
        self.processResult(from: labels, error: error)
 }
}

इसलिए, अब आपको processResult फ़ंक्शन लागू करना होगा. यह अब बहुत आसान है, क्योंकि हमारे पास लेबल हैं और हमें एक गड़बड़ी का ऑब्जेक्ट मिला है. लेबल को ML किट से, ImageLabel टाइप में कास्ट किया जाना चाहिए.

एक बार यह हो जाने के बाद, आप लेबल के सेट में से दोहरा सकते हैं, विवरण और कॉन्फ़िडेंस वैल्यू को पा सकते हैं, और उन्हें labeltexts नाम के var में जोड़ सकते हैं. इन सभी पर ध्यान देने के बाद, आपको बस lblआउटपुट.टेक्स्ट को उस मान पर सेट करना होगा.

यहां पूरा फ़ंक्शन है:

// This gets called by the labeler's callback
func processResult(from labels: [ImageLabel]?, error: Error?){
    // String to hold the labels
    var labeltexts = ""
    // Check that we have valid labels first
    guard let labels = labels else{
        return
    }
  // ...and if we do we can iterate through the set to get the description and confidence
    for label in labels{
        let labelText = label.text + " : " + label.confidence.description + "\n"
        labeltexts += labelText
    }
    // And when we're done we can update the UI with the list of labels
    lblOutput.text = labeltexts
}

बस उपयोगकर्ता को बटन दबाने पर getLabels कॉल करना है.

जब आपने वह कार्रवाई बनाई थी जो आपके लिए वायर्ड थी, तो आपको बस doClassificaiton नाम के IBAction को अपडेट करना होगा जिसे आपने getLabels को कॉल करने के लिए पहले बनाया था.

इमेज व्यू के कॉन्टेंट के साथ इसे कॉल करने के लिए कोड यहां दिया गया है:

@IBAction func doClassification(_ sender: Any) {
    getLabels(with: imageView.image!)
}

अब अपना ऐप्लिकेशन चलाएं और आज़माएं. आप इसे यहां काम करते देख सकते हैं:

ध्यान दें कि आपके डिवाइस के आधार पर आपका लेआउट अलग दिख सकता है.

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

जैसे-जैसे आप iOS डेवलपमेंट के बारे में ज़्यादा जानेंगे, आपको यह समझने में मदद मिलेगी कि सभी फ़ोन पर आपका यूज़र इंटरफ़ेस (यूआई) एक जैसा है, लेकिन इस लैब के दायरे से बाहर आने पर यह #{0/}3.

12. बधाई हो!

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

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