ติดป้ายกำกับรูปภาพอย่างปลอดภัยด้วย Cloud Vision โดยใช้ Firebase Auth และ Functions บน Android

ในการเรียกใช้ Google Cloud API จากแอปของคุณคุณต้องสร้าง REST API ระดับกลางที่จัดการการอนุญาตและปกป้องค่าลับเช่นคีย์ API จากนั้นคุณต้องเขียนโค้ดในแอพมือถือของคุณเพื่อตรวจสอบสิทธิ์และสื่อสารกับบริการระดับกลางนี้

วิธีหนึ่งในการสร้าง REST API นี้คือการใช้ Firebase Authentication and Functions ซึ่งทำให้คุณมีเกตเวย์ที่มีการจัดการและไร้เซิร์ฟเวอร์ไปยัง Google Cloud API ที่จัดการการตรวจสอบสิทธิ์และสามารถเรียกจากแอปบนอุปกรณ์เคลื่อนที่ของคุณด้วย SDK ที่สร้างไว้ล่วงหน้า

คู่มือนี้สาธิตวิธีใช้เทคนิคนี้เพื่อเรียก Cloud Vision API จากแอปของคุณ วิธีนี้จะช่วยให้ผู้ใช้ที่ได้รับการรับรองความถูกต้องทั้งหมดสามารถเข้าถึงบริการที่เรียกเก็บเงินของ Cloud Vision ผ่านโปรเจ็กต์ระบบคลาวด์ของคุณได้ดังนั้นโปรดพิจารณาว่ากลไกการตรวจสอบสิทธิ์นี้เพียงพอสำหรับกรณีการใช้งานของคุณหรือไม่ก่อนดำเนินการต่อ

ก่อนที่คุณจะเริ่ม

กำหนดค่าโครงการของคุณ

เพิ่ม Firebase ในโปรเจ็กต์ Android ของคุณ หากยังไม่ได้ ทำ
หากคุณยังไม่ได้เปิดใช้งาน API บนระบบคลาวด์สำหรับโปรเจ็กต์ของคุณให้ดำเนินการตอนนี้:
1. เปิดหน้า Firebase ML APIs ของคอนโซล Firebase
2. หากคุณยังไม่ได้อัปเกรดโปรเจ็กต์เป็นแผน Blaze ให้คลิก อัปเกรด เพื่อดำเนินการดังกล่าว (คุณจะได้รับแจ้งให้อัปเกรดเฉพาะในกรณีที่โปรเจ็กต์ของคุณไม่อยู่ในแผน Blaze)
  เฉพาะโปรเจ็กต์ระดับ Blaze เท่านั้นที่สามารถใช้ API บนคลาวด์ได้
3. หากยังไม่ได้เปิด ใช้ API บนระบบคลาวด์ ให้คลิก เปิดใช้งาน API บนระบบคลาวด์
กำหนดค่าคีย์ Firebase API ที่มีอยู่เพื่อไม่อนุญาตให้เข้าถึง Cloud Vision API:
1. เปิดหน้า ข้อมูลรับรอง ของ Cloud Console
2. สำหรับคีย์ API แต่ละรายการในรายการให้เปิดมุมมองการแก้ไขและในส่วนข้อ จำกัด ของคีย์ให้เพิ่ม API ที่มี ทั้งหมดยกเว้น Cloud Vision API ลงในรายการ

ปรับใช้ฟังก์ชันที่เรียกได้

จากนั้นปรับใช้ฟังก์ชันคลาวด์ที่คุณจะใช้เพื่อเชื่อมโยงแอปและ Cloud Vision API ที่เก็บ functions-samples มีตัวอย่างที่คุณสามารถใช้ได้

โดยค่าเริ่มต้นการเข้าถึง Cloud Vision API ผ่านฟังก์ชั่นนี้จะอนุญาตให้เฉพาะผู้ใช้ที่ได้รับการรับรองความถูกต้องของแอปของคุณเท่านั้นที่สามารถเข้าถึง Cloud Vision API ได้ คุณสามารถปรับเปลี่ยนฟังก์ชันสำหรับความต้องการที่แตกต่างกัน

ในการปรับใช้ฟังก์ชัน:

โคลนหรือดาวน์โหลด repo ของฟังก์ชันตัวอย่าง และเปลี่ยนเป็นไดเร็กทอรี vision-annotate-image :
```
git clone https://github.com/firebase/functions-samples
cd vision-annotate-image
```
ติดตั้งการอ้างอิง:
```
cd functions
npm install
cd ..
```
หากคุณไม่มี Firebase CLI ให้ ติดตั้ง
เริ่มต้นโปรเจ็กต์ Firebase ในไดเร็กทอรี vision-annotate-image เมื่อได้รับแจ้งให้เลือกโครงการของคุณในรายการ
```
firebase init
```

ปรับใช้ฟังก์ชัน:

firebase deploy --only functions:annotateImage

เพิ่ม Firebase Auth ให้กับแอปของคุณ

ฟังก์ชันที่เรียกใช้งานได้ข้างต้นจะปฏิเสธคำขอใด ๆ จากผู้ใช้ที่ไม่ได้รับการรับรองความถูกต้องของแอปของคุณ หากคุณยังไม่ได้ดำเนินการคุณจะต้อง เพิ่ม Firebase Auth ลงในแอปของคุณ

เพิ่มการอ้างอิงที่จำเป็นให้กับแอปของคุณ

เพิ่มการอ้างอิงสำหรับ Firebase Functions และ gson ไลบรารี Android ในโมดูลของคุณ (ระดับแอป) ไฟล์ Gradle (โดยปกติคือ app / build.gradle):

implementation 'com.google.firebase:firebase-functions:19.2.0'
implementation 'com.google.code.gson:gson:2.8.6'

ตอนนี้คุณพร้อมที่จะติดป้ายกำกับภาพแล้ว

1. เตรียมภาพที่ใส่

ในการเรียกใช้ Cloud Vision รูปภาพจะต้องถูกจัดรูปแบบเป็นสตริงที่เข้ารหัส base64 ในการประมวลผลภาพจากไฟล์ที่บันทึก URI:

รับภาพเป็นวัตถุ Bitmap :

Java

Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), uri);

โคตรลิน + KTX

var bitmap: Bitmap = MediaStore.Images.Media.getBitmap(contentResolver, uri)

หรือปรับขนาดภาพลงเพื่อประหยัดแบนด์วิดท์ ดู ขนาดรูปภาพที่แนะนำ ของ Cloud Vision

Java

private Bitmap scaleBitmapDown(Bitmap bitmap, int maxDimension) {
    int originalWidth = bitmap.getWidth();
    int originalHeight = bitmap.getHeight();
    int resizedWidth = maxDimension;
    int resizedHeight = maxDimension;

    if (originalHeight > originalWidth) {
        resizedHeight = maxDimension;
        resizedWidth = (int) (resizedHeight * (float) originalWidth / (float) originalHeight);
    } else if (originalWidth > originalHeight) {
        resizedWidth = maxDimension;
        resizedHeight = (int) (resizedWidth * (float) originalHeight / (float) originalWidth);
    } else if (originalHeight == originalWidth) {
        resizedHeight = maxDimension;
        resizedWidth = maxDimension;
    }
    return Bitmap.createScaledBitmap(bitmap, resizedWidth, resizedHeight, false);
}

โคตรลิน + KTX

private fun scaleBitmapDown(bitmap: Bitmap, maxDimension: Int): Bitmap {
    val originalWidth = bitmap.width
    val originalHeight = bitmap.height
    var resizedWidth = maxDimension
    var resizedHeight = maxDimension
    if (originalHeight > originalWidth) {
        resizedHeight = maxDimension
        resizedWidth =
                (resizedHeight * originalWidth.toFloat() / originalHeight.toFloat()).toInt()
    } else if (originalWidth > originalHeight) {
        resizedWidth = maxDimension
        resizedHeight =
                (resizedWidth * originalHeight.toFloat() / originalWidth.toFloat()).toInt()
    } else if (originalHeight == originalWidth) {
        resizedHeight = maxDimension
        resizedWidth = maxDimension
    }
    return Bitmap.createScaledBitmap(bitmap, resizedWidth, resizedHeight, false)
}

Java

// Scale down bitmap size
bitmap = scaleBitmapDown(bitmap, 640);

โคตรลิน + KTX

// Scale down bitmap size
bitmap = scaleBitmapDown(bitmap, 640)

แปลงวัตถุบิตแมปเป็นสตริงเข้ารหัส base64:

Java

// Convert bitmap to base64 encoded string
ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, byteArrayOutputStream);
byte[] imageBytes = byteArrayOutputStream.toByteArray();
String base64encoded = Base64.encodeToString(imageBytes, Base64.NO_WRAP);

โคตรลิน + KTX

// Convert bitmap to base64 encoded string
val byteArrayOutputStream = ByteArrayOutputStream()
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, byteArrayOutputStream)
val imageBytes: ByteArray = byteArrayOutputStream.toByteArray()
val base64encoded = Base64.encodeToString(imageBytes, Base64.NO_WRAP)

Bitmap

2. เรียกใช้ฟังก์ชันที่เรียกได้เพื่อติดป้ายกำกับภาพ

ในการติดป้ายกำกับออบเจ็กต์ในรูปภาพให้เรียกใช้ฟังก์ชันที่เรียกได้ผ่าน คำขอ JSON Cloud Vision

ขั้นแรกเริ่มต้นอินสแตนซ์ของ Cloud Functions:

Java

private FirebaseFunctions mFunctions;
// ...
mFunctions = FirebaseFunctions.getInstance();

โคตรลิน + KTX

private lateinit var functions: FirebaseFunctions
// ...
functions = Firebase.functions

กำหนดวิธีการเรียกใช้ฟังก์ชัน:

Java

private Task<JsonElement> annotateImage(String requestJson) {
    return mFunctions
            .getHttpsCallable("annotateImage")
            .call(requestJson)
            .continueWith(new Continuation<HttpsCallableResult, JsonElement>() {
                @Override
                public JsonElement then(@NonNull Task<HttpsCallableResult> task) {
                    // This continuation runs on either success or failure, but if the task
                    // has failed then getResult() will throw an Exception which will be
                    // propagated down.
                    return JsonParser.parseString(new Gson().toJson(task.getResult().getData()));
                }
            });
}

โคตรลิน + KTX

private fun annotateImage(requestJson: String): Task<JsonElement> {
    return functions
            .getHttpsCallable("annotateImage")
            .call(requestJson)
            .continueWith { task ->
                // This continuation runs on either success or failure, but if the task
                // has failed then result will throw an Exception which will be
                // propagated down.
                val result = task.result?.data
                JsonParser.parseString(Gson().toJson(result))
            }
}

สร้างคำขอ JSON โดยตั้งค่า Type เป็น LABEL_DETECTION :

Java

// Create json request to cloud vision
JsonObject request = new JsonObject();
// Add image to request
JsonObject image = new JsonObject();
image.add("content", new JsonPrimitive(base64encoded));
request.add("image", image);
//Add features to the request
JsonObject feature = new JsonObject();
feature.add("maxResults", new JsonPrimitive(5));
feature.add("type", new JsonPrimitive("LABEL_DETECTION"));
JsonArray features = new JsonArray();
features.add(feature);
request.add("features", features);

โคตรลิน + KTX

// Create json request to cloud vision
val request = JsonObject()
// Add image to request
val image = JsonObject()
image.add("content", JsonPrimitive(base64encoded))
request.add("image", image)
//Add features to the request
val feature = JsonObject()
feature.add("maxResults", JsonPrimitive(5))
feature.add("type", JsonPrimitive("LABEL_DETECTION"))
val features = JsonArray()
features.add(feature)
request.add("features", features)

สุดท้ายเรียกใช้ฟังก์ชัน:

Java

annotateImage(request.toString())
        .addOnCompleteListener(new OnCompleteListener<JsonElement>() {
            @Override
            public void onComplete(@NonNull Task<JsonElement> task) {
                if (!task.isSuccessful()) {
                    // Task failed with an exception
                    // ...
                } else {
                    // Task completed successfully
                    // ...
                }
            }
        });

โคตรลิน + KTX

annotateImage(request.toString())
        .addOnCompleteListener { task ->
            if (!task.isSuccessful) {
                // Task failed with an exception
                // ...
            } else {
                // Task completed successfully
                // ...
            }
        }

3. รับข้อมูลเกี่ยวกับวัตถุที่ติดฉลาก

หากการดำเนินการติดฉลากอิมเมจสำเร็จการตอบสนอง JSON ของ BatchAnnotateImagesResponse จะถูกส่งกลับในผลลัพธ์ของงาน แต่ละออบเจ็กต์ในอาร์เรย์ labelAnnotations แสดงถึงสิ่งที่ติดป้ายกำกับในรูปภาพ สำหรับป้ายกำกับแต่ละรายการคุณจะได้รับคำอธิบายข้อความของป้ายกำกับ รหัสเอนทิตีกราฟความรู้ (ถ้ามี) และคะแนนความเชื่อมั่นของการแข่งขัน ตัวอย่างเช่น:

Java

for (JsonElement label : task.getResult().getAsJsonArray().get(0).getAsJsonObject().get("labelAnnotations").getAsJsonArray()) {
    JsonObject labelObj = label.getAsJsonObject();
    String text = labelObj.get("description").getAsString();
    String entityId = labelObj.get("mid").getAsString();
    float score = labelObj.get("score").getAsFloat();
}

โคตรลิน + KTX

for (label in task.result!!.asJsonArray[0].asJsonObject["labelAnnotations"].asJsonArray) {
    val labelObj = label.asJsonObject
    val text = labelObj["description"]
    val entityId = labelObj["mid"]
    val confidence = labelObj["score"]
}