การนำ Imagen ไปใช้งานใน Cloud Run

1. เกี่ยวกับ Codelab นี้

อัปเดตล่าสุด: 2024-10-11

เขียนโดย: Laurie White

การสร้างรูปภาพ

เรามาพูดกันตามตรง การสร้างรูปภาพโดยโมเดลภาษาขนาดใหญ่ (LLM) อาจเป็นเรื่องสนุก แน่นอนว่ามีแอปพลิเคชันทางธุรกิจมากมายสำหรับการสร้างรูปภาพจากพรอมต์ ตั้งแต่การโฆษณาที่ปรับแต่งไปจนถึงงานนำเสนอที่น่าสนใจ เว็บไซต์ Google Cloud มีตัวอย่างการใช้งานเฉพาะมากมายของบริษัทที่ใช้เอเจนซีครีเอทีฟ อย่างไรก็ตาม การดูผลลัพธ์เมื่อคุณขอรูปภาพ "สุนัขสีเขียวมีความสุขในทุ่งหญ้า" ก็อาจเป็นเรื่องที่น่าขบขัน

ไม่ว่าคุณจะสนใจการสร้างรูปภาพด้วยเหตุผลทางอาชีพหรือเพื่อความบันเทิง (หรือทั้ง 2 อย่าง) การใช้โปรแกรมสร้างรูปภาพและการนําไปใช้กับเว็บแอปพลิเคชันก็มีความท้าทายบางอย่าง แล็บนี้จะช่วยให้คุณเอาชนะความท้าทายเหล่านั้นได้

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณจะได้สร้างแอปที่จะรับพรอมต์ข้อความและแสดงหน้าเว็บพร้อมรูปภาพที่สร้างขึ้นโดยใช้พรอมต์นั้น

สิ่งที่คุณจะได้เรียนรู้

ในแล็บนี้ คุณจะได้เรียนรู้สิ่งต่อไปนี้

วิธีใช้ Google Imagen เพื่อสร้างรูปภาพจากพรอมต์ข้อความในสภาพแวดล้อมของ Notebook
ความยากในการย้ายโค้ด Imagen จาก Notebook ไปยังเว็บแอป
วิธีทำให้แอปพลิเคชัน Cloud Run ที่ใช้ Imagen สร้างรูปภาพใช้งานได้
วิธีใส่รูปภาพจาก Imagen ใน HTML

Codelab นี้มุ่งเน้นที่ Imagen และการติดตั้งใช้งาน เราจะข้ามแนวคิดและบล็อกโค้ดที่ไม่เกี่ยวข้องไป และจะให้คุณคัดลอกและวางได้ง่ายๆ

สิ่งที่คุณต้องมี

เบราว์เซอร์ Chrome เวอร์ชันล่าสุด
มีความรู้เกี่ยวกับ Cloud Run คุณดูข้อมูลนี้ได้จาก Codelab ที่ค่อนข้างสั้นที่นี่
คุ้นเคยกับการแก้ไขไฟล์ใน Cloud Shell หรือ Cloud Shell Editor ดูข้อมูลเพิ่มเติมเกี่ยวกับ Cloud Shell และ Cloud Shell Editor ได้จาก Codelab นี้
โปรเจ็กต์ Google Cloud ที่เปิดใช้การเรียกเก็บเงิน คู่มือนี้จะแสดงวิธีสร้างโปรเจ็กต์ มีผลิตภัณฑ์มากมายที่มีรุ่นฟรีและช่วงทดลองใช้ฟรีให้ใช้งาน

โค้ดที่สมบูรณ์สำหรับ Codelab นี้มีอยู่ที่ https://github.com/Annie29/imagen-deployment

2. เปิดใช้ API

เลือกโปรเจ็กต์ที่จะใช้สำหรับ Codelab นี้ คุณอาจต้องการสร้างโปรเจ็กต์ใหม่เพื่อให้การนำงานทั้งหมดออกง่ายขึ้นเมื่อเสร็จสิ้น

คุณต้องเปิดใช้ API บางอย่างก่อนจึงจะเริ่มใช้ Imagen ได้

ไปที่คอนโซล Google Cloud
ไปที่แดชบอร์ด Vertex AI
เลือก "เปิดใช้ API ที่แนะนำทั้งหมด"

3. สำรวจ Google Imagen (ไม่บังคับ)

หากคุ้นเคยกับ Imagen อยู่แล้ว ให้ข้ามส่วนนี้ไป

ก่อนที่จะพยายามสร้างเว็บแอปที่ใช้ Imagen คุณควรดูว่า Imagen ทำอะไรได้บ้าง โชคดีที่มี Notebook หลายรายการที่เรียกใช้โค้ด Imagen อย่างง่าย ดังนั้นเรามาเริ่มด้วย Notebook เหล่านั้นกัน

ไปที่ Notebook ที่ https://github.com/GoogleCloudPlatform/generative-ai/blob/main/vision/getting-started/image_generation.ipynb
เลือก "เปิดใน Colab" เพื่อเปิดสมุดบันทึกในเซิร์ฟเวอร์สมุดบันทึกของ Google
เลือก "ไฟล์ -> บันทึกสำเนาในไดรฟ์" หรือคลิก "คัดลอกไปยังไดรฟ์" ที่ด้านบนของหน้าเพื่อสร้างสำเนาของสมุดบันทึกนี้
ปิดสำเนาต้นฉบับ (เพื่อไม่ให้ทำงานในไฟล์ที่ไม่ถูกต้อง)
คุณจะต้องเชื่อมต่อกับรันไทม์โดยคลิกปุ่มเชื่อมต่อที่ด้านขวาบน
เริ่มทำงานกับแต่ละเซลล์ในสมุดบันทึก
หากต้องการเรียกใช้เซลล์ คุณสามารถคลิกใน [] หรือลูกศรทางด้านซ้ายของเซลล์ หรือใช้ตัวเลือก "เรียกใช้ส่วนที่เลือก" จากเมนูรันไทม์ (หรือทางลัด)
เมื่อรีสตาร์ทรันไทม์ปัจจุบัน คุณจะได้รับข้อความว่าระบบขัดข้อง ไม่ต้องตกใจ ซึ่งเป็นเรื่องปกติ
คุณจะต้องตรวจสอบสิทธิ์สภาพแวดล้อมของ Notebook
คุณสามารถป้อนรหัสโปรเจ็กต์ (ไม่ใช่ชื่อ) และสถานที่ตั้ง (us-central1 จะใช้ได้หากคุณยังไม่ได้ตั้งค่าสถานที่ตั้ง) ในช่องทางด้านขวาของโค้ด แล้วให้ Colab แทรกข้อมูลดังกล่าวลงในโค้ดให้คุณ
เมื่อไปที่ "สร้างรูปภาพ" คุณจะมีโอกาสได้ดูว่า Imagen ทำอะไรได้บ้าง คุณสามารถเปลี่ยนพรอมต์และเรียกใช้เซลล์อีกครั้งเพื่อดูรูปภาพต่างๆ ที่คุณจะได้รับ
ตอนนี้คุณควรทราบแล้วว่า Imagen สร้างรูปภาพจาก Notebook ได้อย่างไร คุณสามารถทำสมุดบันทึกนี้ให้เสร็จสมบูรณ์เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับพารามิเตอร์รูปภาพได้เลย หรือจะทำในเวลาที่สะดวกก็ได้

4. เริ่มสร้างเว็บแอปพลิเคชันเพื่อแสดงรูปภาพ

เราจะใช้ Python โดยใช้เฟรมเวิร์ก Flask ใน Cloud Run เพื่อสร้างแอป

ระบบจะตั้งค่าแอป Python Flask ในโฟลเดอร์ดังนี้

app-folder
    templates
        template.html
        (etc.)
        anothertemplate.html
    main.py
    requirements.txt

เทมเพลตคือไฟล์ที่มี HTML ซึ่งมักจะมีตัวยึดตำแหน่งที่มีชื่อซึ่งโปรแกรมจะแทรกข้อความที่สร้างขึ้น main.py คือแอปเว็บเซิร์ฟเวอร์เอง และ requirements.txt คือรายการไลบรารีที่ไม่เป็นมาตรฐานทั้งหมดที่ main.py ใช้

แอปพลิเคชันจะมี 2 หน้า โดยหน้าแรกจะใช้รับพรอมต์ และหน้า 2 จะใช้แสดงรูปภาพและอนุญาตให้ผู้ใช้ป้อนพรอมต์อื่น

ก่อนอื่นให้สร้างกรอบโปรเจ็กต์

การสร้างโครงสร้างไฟล์

Codelab นี้ถือว่าโปรเจ็กต์ของคุณอยู่ในโฟลเดอร์ imageapp หากใช้ชื่ออื่น โปรดอัปเดตคำสั่งตามความเหมาะสม

เข้าสู่ Cloud Shell โดยเลือกไอคอนพรอมต์ที่ด้านขวาบนของหน้าจอ

คุณสามารถเพิ่มพื้นที่ทำงานได้โดยย้าย Shell ไปยัง Tab ใหม่โดยใช้ลูกศรที่ด้านบนของหน้าต่าง Shell

จากไดเรกทอรีหลักใน Cloud Shell ให้สร้างโฟลเดอร์ imageapp เปลี่ยนไปที่โฟลเดอร์นั้น แล้วสร้างโฟลเดอร์ templates คุณสามารถทำได้จากบรรทัดคำสั่งหรือโปรแกรมแก้ไข Cloud Shell

สร้างเทมเพลต

แอปพลิเคชันจะมี 2 หน้า หน้าแรก (ซึ่งเราจะเรียกว่า home.html) สำหรับรับพรอมต์ และหน้าสอง (ซึ่งเราจะเรียกว่า display.html) สำหรับแสดงรูปภาพและอนุญาตให้ผู้ใช้ป้อนพรอมต์อื่น

สร้างเทมเพลต 2 รายการโดยใช้เครื่องมือแก้ไข Cloud Shell หรือเครื่องมือแก้ไข Linux ที่คุณเลือก จากโฟลเดอร์ imageapp/templates ให้สร้างหน้าแรกที่ผู้ใช้จะเห็น home.html โดยจะใช้ตัวแปร prompt เพื่อแสดงคำอธิบายที่ผู้ใช้ป้อน

templates/home.html

<!DOCTYPE html>
<html>
   <head>
       <title>Let's draw a picture</title>
   </head>
   <body>
       <h1>Let's draw a picture</h1>
       <form  action="/" method="post" >
           <input type="text" id="prompt" name="prompt">
           <input type="submit" value="Send">
       </form>
   </body>
</html>

จากนั้นสร้าง display.html ซึ่งจะแสดงรูปภาพ โปรดทราบว่าตำแหน่งของรูปภาพจะอยู่ใน image_url

templates/display.html

<!DOCTYPE html>
<html>
   <head>
       <title>Let's draw a picture</title>
   </head>
   <body>
       <h1>Let's draw a picture</h1>

       <div>
           <form  action="/" method="post" >
               <input type="text" id="prompt" name="prompt">
               <input type="submit" value="Send">
           </form>

           <p></p>
       </div>

       <div id="picture">
           <img id="pict" name="pict" alt="The created image" src="{{image_uri}}" style="width:100%;">
       </div>

   </body>
</html>

5. เริ่มต้นเขียนโค้ด

คุณจะต้องสร้างไฟล์ requirements.txt เพื่อให้แน่ใจว่ามีไลบรารีทั้งหมดที่โปรแกรมของคุณต้องการ ตอนนี้ให้ใส่ flask ในไฟล์ requirements.txt

ไฟล์ main.py มีโค้ดที่จะแสดงคำขอเว็บ เรามีคำขอที่ต้องจัดการเพียง 2 รายการ ได้แก่ คำขอ GET สำหรับหน้าแรก และคำขอ POST ที่ส่งแบบฟอร์มซึ่งอธิบายรูปภาพที่เราต้องการสร้าง

สร้างไฟล์ main.py ในโฟลเดอร์ imageapp โดยใช้โปรแกรมแก้ไข Cloud Shell หรือโปรแกรมแก้ไข Linux ที่คุณเลือก เราจะเริ่มจากโครงสร้างด้านล่าง

main.py

import flask

app = flask.Flask(__name__)

@app.route("/", methods=["GET"])
def home_page():
    return flask.render_template("home.html")

@app.route("/", methods=["POST"])
def display_image():
    # Code to get the prompt (called prompt) from the submitted form
    # Code to generate the image
    # Code to create a URL for the image (called image_url)

    return flask.render_template("display.html", prompt=prompt, image_url=image_url)

# Initialize the web server app when the code locally (Cloud Run handles it in that environment)
if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=8080)

จริงๆ แล้วนั่นก็เกือบจะทั้งแอปแล้ว มีความคิดเห็น 3 รายการใน display_image ที่ต้องขยายความด้วยโค้ด Python และนั่นก็คือทั้งหมด

มาเริ่มกรอกข้อมูลในส่วนที่ขาดหายไปกัน Flask ช่วยให้ดึงข้อมูลพรอมต์ได้ง่าย เพิ่มบรรทัดหลังความคิดเห็นดังที่แสดงด้านล่าง

# Code to get the prompt (called prompt) from the submitted form
prompt = flask.request.form["prompt"]

หากต้องการทดสอบแอปตอนนี้ คุณสามารถเพิ่มบรรทัดก่อนคำสั่ง return ใน display_image เพื่อกำหนดค่าให้กับ image_url (URL ที่ถูกต้องซึ่งชี้ไปยังรูปภาพ)

เช่น image_url="<your url here>"

คุณเรียกใช้โปรแกรมได้ในเครื่องจาก Cloud Shell (โดยใช้คำสั่ง python main.py) และแสดงตัวอย่างโดยใช้ตัวอย่างบนพอร์ต 8080 ที่ด้านขวาบนของหน้าจอ

ในโปรแกรมปัจจุบัน คุณจะเห็นรูปภาพใน URL ที่คุณระบุเสมอ มาดูวิธีรับค่าจากแอปกันต่อ อย่าลืมนำบรรทัดที่ให้ค่าแบบคงที่แก่ image_url ออก

6. การสร้างรูปภาพ

Google Cloud มี Python API สำหรับ Generative AI ใน Vertex AI หากต้องการใช้ เราต้องเพิ่มบรรทัดที่นำเข้าพร้อมกับการนำเข้าอื่นๆ ใกล้กับด้านบนของโปรแกรม

from vertexai.vision_models import ImageGenerationModel

และใส่ vertexai ในไฟล์ requirements.txt

เอกสารประกอบสำหรับ ImageGenerationModel แสดงวิธีใช้งาน เราจะสร้างโมเดลแล้วสร้างรูปภาพจากโมเดลนั้นเมื่อได้รับพรอมต์ เพิ่มโค้ดลงใน main.py สำหรับขั้นตอนที่ 2 เพื่อสร้างรูปภาพและจัดเก็บไว้ใน response

# Code to generate the image
model = ImageGenerationModel.from_pretrained("imagegeneration@006")
response = model.generate_images(prompt=prompt)[0]

สร้างรูปภาพได้สูงสุด 4 ภาพในครั้งเดียว ขึ้นอยู่กับพารามิเตอร์ที่ส่งไปยัง generate_images ค่าที่แสดงผลจึงเป็นรายการของ GeneratedImage แม้ว่าจะมีการแสดงผลรูปภาพเพียงภาพเดียวก็ตาม ดังเช่นในกรณีนี้

ตอนนี้เราต้องแสดงรูปภาพในหน้า WWW GeneratedImage มีวิธีshowรูปภาพ แต่ใช้ได้เฉพาะในสภาพแวดล้อมของ Notebook แต่ก็มีวิธีบันทึกรูปภาพ เราจะบันทึกรูปภาพและส่ง URL ของรูปภาพที่บันทึกไว้เมื่อแสดงเทมเพลต

ซึ่งอาจมีความซับซ้อนเล็กน้อยและทำได้หลายวิธี มาดูวิธีการที่ง่ายกว่ากันทีละขั้นตอน (และมีรูปภาพขั้นตอนด้านล่างหากคุณเป็นคนที่เรียนรู้ด้วยภาพ)

ก่อนอื่นเราต้องบันทึกรูปภาพ แต่จะตั้งชื่อว่าอะไร การใช้ชื่อแบบคงที่อาจทำให้เกิดปัญหาเนื่องจากมีผู้ใช้โปรแกรมพร้อมกันหลายคน แม้ว่าเราจะสร้างชื่อรูปภาพแยกต่างหากสำหรับผู้ใช้แต่ละรายได้ (ด้วยสิ่งต่างๆ เช่น UUID) แต่วิธีที่ง่ายกว่าคือการใช้ไลบรารี tempfile ของ Python ซึ่งจะสร้างไฟล์ชั่วคราวที่มีชื่อที่ไม่ซ้ำกัน โค้ดด้านล่างจะสร้างไฟล์ชั่วคราว รับชื่อ และเขียนการตอบกลับของขั้นตอนการสร้างรูปภาพลงในไฟล์ชั่วคราว เราจะยังไม่ป้อนในโค้ด เนื่องจากต้องรับ URL ก่อน

with tempfile.NamedTemporaryFile("wb") as f:
    filename = f.name
    response.save(filename, include_generation_parameters=False)
    # process the saved file here, before it goes away

คุณประมวลผลไฟล์ที่บันทึกไว้ได้หลายวิธี แต่วิธีที่ง่ายและปลอดภัยที่สุดวิธีหนึ่งคือการใช้ URL ข้อมูล

URL ข้อมูลช่วยให้ส่งข้อมูลจริงใน URL ได้ ไม่ใช่แค่เส้นทางไปยังข้อมูล ไวยากรณ์สำหรับ URL ข้อมูลมีดังนี้

data:[image/png][;base64],<data>

หากต้องการรับการเข้ารหัส base64 ของรูปภาพ เราจะต้องเปิดไฟล์ที่ tempfile บันทึกไว้และอ่านลงในตัวแปร ใช่ นี่จะเป็นสตริงขนาดใหญ่ แต่เบราว์เซอร์และเซิร์ฟเวอร์สมัยใหม่ควรจะรองรับได้ จากนั้นเราจะใช้ไลบรารี base64 เพื่อเข้ารหัสเป็นสตริงที่เราส่งใน URL ของข้อมูลได้

โค้ดสุดท้ายของเราในการทำขั้นตอนที่ 3 (การสร้าง URL) จะเป็นดังนี้

# Code to create a URL for the image (called image_url)
with tempfile.NamedTemporaryFile("wb") as f:
    filename = f.name
    response.save(filename, include_generation_parameters=False)
    # process the saved file here, before it goes away
    with open(filename, "rb") as image_file:
        binary_image = image_file.read()
        base64_image = base64.b64encode(binary_image).decode("utf-8")
        image_url = f"data:image/png;base64,{base64_image}"

คุณดูขั้นตอนทั้งหมดนี้ได้ในรูปภาพด้านล่าง

คุณจะต้องนำเข้า tempfile และ base64 ที่จุดเริ่มต้นของโปรแกรม

import tempfile
import base64

ลองเรียกใช้โปรแกรมจาก Cloud Shell โดยตรวจสอบว่าคุณอยู่ในโฟลเดอร์ที่มี main.py และเรียกใช้คำสั่งต่อไปนี้

python main.py

จากนั้นคุณจะแสดงตัวอย่างได้โดยใช้ "แสดงตัวอย่างบนพอร์ต 8080" ที่ด้านขวาบนของหน้าจอ

7. ข้อผิดพลาดที่พบบ่อย

เมื่อถึงจุดหนึ่ง คุณอาจสังเกตเห็นว่าเมื่อเรียกใช้โปรแกรม (ทั้งในระหว่างการทดสอบหรือหลังจากที่คุณทำให้ใช้งานได้) คุณจะได้รับข้อความต่อไปนี้

โดยส่วนใหญ่แล้วปัญหานี้เกิดจากพรอมต์ที่ละเมิดแนวทางปฏิบัติสำหรับการใช้ AI อย่างมีความรับผิดชอบของ Google พรอมต์ที่เรียบง่ายอย่าง "ลูกแมวกำลังเล่นลูกบอลสีสันสดใส" ก็อาจทำให้เกิดปัญหานี้ได้ (แต่ไม่ต้องกังวล คุณสามารถหารูปภาพ "ลูกแมวเล่นกับของเล่นสีสันสดใส" ได้)

เราจะเพิ่มโค้ดเพื่อดักจับข้อยกเว้นที่เกิดขึ้นเมื่อพยายามสร้างรูปภาพเพื่อจัดการกับข้อผิดพลาดนี้ หากมี เราจะแสดงผลเทมเพลต home.html อีกครั้งพร้อมข้อความที่แสดง

ก่อนอื่น มาเพิ่ม div ในเทมเพลต home.html หลังแบบฟอร์มแรกที่จะแสดงหากมีข้อผิดพลาดกัน

<!DOCTYPE html>
<html>
   <head>
       <title>Let's draw a picture</title>
   </head>
   <body>
       <h1>Let's draw a picture</h1>
       <form  action="/" method="post" >
           <input type="text" id="prompt" name="prompt">
           <input type="submit" value="Send">
       </form>
       {% if mistake %}
       <div id="warning">
       The prompt contains sensitive words that violate
       <a href=\"https://ai.google/responsibility/responsible-ai-practices\">
           Google's Responsible AI practices</a>.
       Try rephrasing the prompt."</div>

       {% endif %}

   </body>
</html>

จากนั้นเพิ่มโค้ดใน main.py เพื่อดักจับข้อยกเว้นที่อาจเกิดขึ้นเมื่อเรียกใช้โค้ด generate_images ใน display_image หากมีข้อยกเว้น โค้ดจะแสดงผลเทมเพลต home.html พร้อมข้อความ

# Code to generate the image
   model = ImageGenerationModel.from_pretrained("imagegeneration@006")
   try:
       response = model.generate_images(prompt=prompt)[0]   
   except:
       #  This is probably due to a questionable prompt
       return flask.render_template("home.html", warning=True)

นี่ไม่ใช่ฟีเจอร์ AI อย่างมีความรับผิดชอบเพียงอย่างเดียวของ Imagen มีฟีเจอร์หลายอย่างที่ปกป้องการสร้างรูปภาพบุคคลและเด็ก รวมถึงตัวกรองทั่วไปในรูปภาพ ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ที่นี่

8. การทำให้แอปใช้งานได้บนเว็บ

คุณสามารถทำให้แอปใช้งานได้กับเว็บโดยใช้คำสั่งจากโฟลเดอร์ imageapp ใน Cloud Shell อย่าลืมใช้รหัสโปรเจ็กต์จริงในคำสั่ง

gcloud run deploy imageapp \
  --source . \
  --region us-central1 \
  --allow-unauthenticated \
  --project your-project-id

คุณควรเห็นคำตอบที่คล้ายกับคำตอบต่อไปนี้ ซึ่งจะบอกตำแหน่งของแอปพลิเคชัน

Service [imageapp] revision [imageapp-00001-t48] has been deployed and is serving 100 percent of traffic.
Service URL: https://imageapp-708208532564.us-central1.run.app```

9. การล้างข้อมูล

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

วิธีลบที่เก็บรูปภาพคอนเทนเนอร์

gcloud artifacts repositories delete cloud-run-source-deploy \
  --location $REGION

หากต้องการลบบริการ Cloud Run ให้ทำดังนี้

gcloud run services delete imageapp \
  --platform managed \
  --region $REGION

วิธีลบโปรเจ็กต์ Google Cloud

ดึงข้อมูลรหัสโปรเจ็กต์ปัจจุบัน

PROJECT_ID=$(gcloud config get-value core/project)

โปรดตรวจสอบว่าโปรเจ็กต์ที่คุณต้องการลบคือโปรเจ็กต์นี้

echo $PROJECT_ID

ลบโปรเจ็กต์

gcloud projects delete $PROJECT_ID

10. ขอแสดงความยินดี

ขอแสดงความยินดี คุณสร้างเว็บแอปพลิเคชันที่จะแสดงรูปภาพที่ Imagen สร้างขึ้นได้สำเร็จแล้ว คุณจะใช้ฟีเจอร์นี้ในแอปพลิเคชันได้อย่างไร

สิ่งต่อไปที่ควรทำ

ลองใช้ Codelab เหล่านี้