การสร้างแอปพลิเคชันในยุค AI

1. ภาพรวม

ในแล็บนี้ คุณจะได้ใช้ผลิตภัณฑ์ Generative AI ของ Google เพื่อสร้างโครงสร้างพื้นฐานใน Google Cloud โดยใช้ Gemini Cloud Assist, ค้นหาข้อมูล BigQuery โดยใช้ฟีเจอร์ภาษาธรรมชาติเป็น SQL ของ Data Canvas, เขียนโค้ดในสมุดบันทึก Jupyter ของ Colab Enterprise และใน Eclipse Theia (Visual Studio Code) โดยใช้ Gemini Code Assist และผสานรวมฟีเจอร์การค้นหาและการแชทด้วย AI ที่สร้างขึ้นจากแหล่งข้อมูลพื้นฐานของ Cloud Storage และ BigQuery ใน Vertex AI Agent Builder

เป้าหมายของเราคือการสร้างเว็บไซต์สูตรอาหารและการทำอาหารที่ชื่อว่า AI Recipe Haven เว็บไซต์จะสร้างขึ้นใน Python และ Streamlit และจะมีหน้าหลัก 2 หน้า คำแนะนำในการทำอาหารจะมีแชทบอทที่เราจะสร้างขึ้นโดยใช้ Gemini และ Vertex AI Agent Builder ที่มีแหล่งข้อมูลที่เชื่อถือได้ซึ่งเชื่อมโยงกับกลุ่มตำราอาหาร โดยจะให้คำแนะนำในการทำอาหารและตอบคำถามที่เกี่ยวข้องกับการทำอาหาร การค้นหาสูตรอาหารจะเป็นเครื่องมือค้นหาที่ Gemini ขับเคลื่อน โดยอิงตามฐานข้อมูลสูตรอาหารใน BigQuery

หากคุณติดขัดกับโค้ดใดๆ ในแบบฝึกหัดนี้ โซลูชันสำหรับไฟล์โค้ดทั้งหมดจะอยู่ในที่เก็บ GitHub ของแบบฝึกหัดในสาขา solution

วัตถุประสงค์

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

• เปิดใช้งานและใช้ Gemini Cloud Assist
• สร้างแอปค้นหาใน Vertex AI Agent Builder สำหรับแชทบอทให้คำแนะนำด้านการทำอาหาร
• โหลดและล้างข้อมูลในสมุดบันทึก Colab Enterprise โดยใช้ความช่วยเหลือจาก Gemini Code Assist
• สร้างแอปค้นหาใน Vertex AI Agent Builder สำหรับเครื่องมือสร้างสูตรอาหาร
• สร้างกรอบแอปพลิเคชันเว็บหลักของ Python และ Streamlit โดยใช้ความช่วยเหลือเล็กๆ น้อยๆ จาก Gemini
• ทําให้เว็บแอปพลิเคชันใช้งานได้ใน Cloud Run
• เชื่อมต่อหน้าคำแนะนำในการทำอาหารกับแอป Agent Builder สำหรับการค้นหาสมุดสูตรอาหาร
• (ไม่บังคับ) เชื่อมต่อหน้าการค้นหาสูตรอาหารกับแอป Agent Builder สำหรับการค้นหาสูตรอาหาร
• (ไม่บังคับ) สำรวจแอปพลิเคชันขั้นสุดท้าย

2. การตั้งค่าและข้อกำหนด

ก่อนคลิกปุ่มเริ่ม Lab

อ่านวิธีการเหล่านี้ ห้องทดลองมีระยะเวลาจำกัดและคุณหยุดชั่วคราวไม่ได้ ตัวจับเวลาซึ่งจะเริ่มทำงานเมื่อคุณคลิก "เริ่ม Lab" จะแสดงระยะเวลาที่ระบบจะจัดสรรทรัพยากร Google Cloud ให้คุณ

Hands-On Lab ของ Qwiklabs นี้ช่วยให้คุณทำกิจกรรมใน Lab ได้ด้วยตนเองในสภาพแวดล้อมระบบคลาวด์จริง ไม่ใช่ในสภาพแวดล้อมการจำลองหรือการสาธิต โดยจะให้ข้อมูลเข้าสู่ระบบใหม่ชั่วคราวแก่คุณ ซึ่งคุณจะใช้เพื่อลงชื่อเข้าใช้และเข้าถึง Google Cloud ในระยะเวลาของแล็บ

สิ่งที่ต้องมี

คุณต้องมีสิ่งต่อไปนี้จึงจะทำแล็บนี้ให้เสร็จสมบูรณ์ได้

• สิทธิ์เข้าถึงอินเทอร์เน็ตเบราว์เซอร์มาตรฐาน (แนะนำให้ใช้เบราว์เซอร์ Chrome)
• เวลาในการทำ Lab ให้เสร็จ

หมายเหตุ: หากคุณมีบัญชีหรือโปรเจ็กต์ Google Cloud ส่วนตัวอยู่แล้ว โปรดอย่าใช้บัญชีหรือโปรเจ็กต์ดังกล่าวในแล็บนี้

หมายเหตุ: หากใช้ Pixelbook ให้เปิดหน้าต่างที่ไม่ระบุตัวตนเพื่อเรียกใช้ Lab นี้

วิธีเริ่มแล็บและลงชื่อเข้าใช้ Google Cloud Console

1. คลิกปุ่มเริ่ม Lab หากคุณต้องชำระเงินสำหรับห้องทดลอง ระบบจะเปิดป๊อปอัปให้คุณเลือกวิธีการชำระเงิน ทางด้านซ้ายคือแผงที่มีข้อมูลเข้าสู่ระบบชั่วคราวที่คุณต้องใช้สำหรับแล็บนี้

2. คัดลอกชื่อผู้ใช้ แล้วคลิกเปิด Google Console Lab จะหมุนเวียนทรัพยากร แล้วเปิดแท็บอื่นที่แสดงหน้าลงชื่อเข้าใช้

เคล็ดลับ: เปิดแท็บในหน้าต่างแยกกันแบบเคียงข้างกัน

หากเห็นหน้า "เลือกบัญชี" ให้คลิก "ใช้บัญชีอื่น"

3. ในหน้าลงชื่อเข้าใช้ ให้วางชื่อผู้ใช้ที่คุณคัดลอกจากแผงรายละเอียดการเชื่อมต่อ จากนั้นคัดลอกและวางรหัสผ่าน

สำคัญ: คุณต้องใช้ข้อมูลเข้าสู่ระบบจากแผงรายละเอียดการเชื่อมต่อ อย่าใช้ข้อมูลเข้าสู่ระบบ Qwiklabs หากคุณมีบัญชี Google Cloud ของตัวเอง โปรดอย่าใช้บัญชีดังกล่าวสำหรับแล็บนี้ (เพื่อหลีกเลี่ยงการเรียกเก็บเงิน) 4. คลิกผ่านหน้าถัดไป

1. ยอมรับข้อกำหนดและเงื่อนไข
2. อย่าเพิ่มตัวเลือกการกู้คืนหรือการยืนยันแบบ 2 ขั้นตอน (เนื่องจากเป็นบัญชีชั่วคราว)
3. อย่าลงชื่อสมัครใช้เพื่อทดลองใช้ฟรี

หลังจากนั้นไม่นาน Cloud Console จะเปิดขึ้นในแท็บนี้

หมายเหตุ: คุณดูเมนูที่มีรายการผลิตภัณฑ์และบริการของ Google Cloud ได้โดยคลิกเมนูการนำทางที่ด้านซ้ายบน

3. งานที่ 0 ตรวจสอบคลัสเตอร์เวิร์กสเตชัน

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

1. ในคอนโซล Google Cloud ให้ใช้ช่องค้นหาเพื่อไปที่ Cloud Workstations
2. ใช้เมนูการนำทางด้านซ้ายมือเพื่อดูการจัดการคลัสเตอร์
3. หากมีคลัสเตอร์ที่กำลังอัปเดต แสดงว่าคุณพร้อมแล้วและสามารถไปยังงานที่ 1 ได้ หากไม่เห็นคลัสเตอร์ใดๆ ในสถานะใดก็ตาม ให้รีเฟรชหน้าเว็บ หากยังไม่เห็นคลัสเตอร์ที่กำลังอัปเดต (สร้าง) ให้สิ้นสุด Lab นี้โดยใช้ปุ่มที่ด้านซ้ายบนของวิธีการเหล่านี้ แล้วรีสตาร์ท Lab

4. งานที่ 1 เปิดใช้งานและใช้ Gemini Cloud Assist

ในงานนี้ เราจะเปิดใช้งานและใช้ Gemini Cloud Assist ขณะทำงานในคอนโซล Google Cloud นั้น Gemini Cloud Assist จะให้คำแนะนำ ช่วยคุณสร้าง กำหนดค่า และตรวจสอบโครงสร้างพื้นฐานของ Google Cloud รวมถึงยังแนะนำคำสั่ง gcloud และเขียนสคริปต์ Terraform ได้ด้วย

1. หากต้องการเปิดใช้งาน Cloud Assist เพื่อใช้งาน ให้คลิกช่องค้นหาที่ด้านบนของ UI ของ Cloud Console แล้วเลือกถาม Gemini (หรืออาจเป็นข้อความถาม Gemini สำหรับ Cloud Console)
2. เลื่อนไปที่ส่วน API ที่จำเป็นของหน้า แล้วเปิดใช้ Gemini สำหรับ Google Cloud API
3. หากไม่เห็นอินเทอร์เฟซแชททันที ให้คลิกเริ่มแชท เริ่มต้นด้วยการขอให้ Gemini อธิบายประโยชน์บางอย่างของการใช้ Cloud Workstations โปรดใช้เวลาสักครู่เพื่อสำรวจคำตอบที่สร้างขึ้น
4. จากนั้นถามเกี่ยวกับประโยชน์ของ Agent Builder และวิธีที่เครื่องมือนี้จะช่วยให้คำตอบแบบ Generative มีความน่าเชื่อถือมากขึ้น
5. สุดท้าย มาดูการเปรียบเทียบกัน ในหน้าต่างแชท Gemini ของ Google Cloud Console ให้ถามคำถามต่อไปนี้

What are the major steps to creating a search app grounded in a
GCS data source using Vertex AI Agent builder?

6. ตอนนี้ในหน้าต่างที่ไม่ระบุตัวตน ให้ไปที่เว็บไซต์สาธารณะของ Gemini ที่นี่ ลงชื่อเข้าใช้หากจำเป็น แล้วถามคำถามเดียวกัน คำตอบเหมือนกันหรือคล้ายกันอย่างน้อย ขั้นตอนที่เฉพาะเจาะจง มีตัวเลือกใดที่เห็นได้ชัดว่าดีกว่าไหม ไม่ว่าคุณจะตอบว่าอย่างไร โปรดจดจำคำตอบของคุณไว้ในใจขณะที่เราดำเนินการตามขั้นตอนถัดไป

หมายเหตุ: หากพยายามทำตามขั้นตอนข้างต้นโดยใช้บัญชี Qwiklabs ชั่วคราว ระบบจะบล็อกคุณ หากบัญชีงานถูกบล็อกด้วยเนื่องจากองค์กรไม่อนุญาตให้ใช้เว็บแอป Gemini ให้ข้ามขั้นตอนนี้ไป ซึ่งจะไม่มีผลต่อความสามารถในการทำแบบฝึกหัดนี้ให้เสร็จสมบูรณ์

5. งานที่ 2 สร้างแอปค้นหาใน Vertex AI Agent Builder สำหรับแชทบอทให้คำแนะนำด้านการทำอาหาร

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

1. ใช้ช่องค้นหาของ Cloud Console เพื่อไปยัง Vertex AI จากแดชบอร์ด ให้คลิกเปิดใช้ API ที่แนะนำทั้งหมด หากคุณได้รับกล่องป๊อปอัปเกี่ยวกับ API ของ Vertex AI เองที่ต้องเปิดใช้ โปรดเปิดใช้ด้วย
2. ใช้การค้นหาเพื่อไปยังเครื่องมือสร้างเอเจนต์ จากนั้นดำเนินการต่อและเปิดใช้งาน API
3. ดังที่ Gemini แนะนำในการขอคำแนะนำก่อนหน้านี้ การสร้างแอปค้นหาใน Agent Builder จะเริ่มต้นด้วยการสร้างแหล่งข้อมูลที่เชื่อถือได้ เมื่อผู้ใช้ค้นหา Gemini จะเข้าใจคำถามและวิธีสร้างคำตอบอัจฉริยะ แต่จะค้นหาข้อมูลที่ใช้ในคำตอบนั้นจากแหล่งข้อมูลที่ยึดโยงไว้ แทนที่จะดึงมาจากความรู้ที่มีอยู่

จากเมนูด้านซ้ายมือ ให้ไปที่พื้นที่เก็บข้อมูลและสร้างพื้นที่เก็บข้อมูล 4. ตำราอาหารที่เป็นสาธารณสมบัติซึ่งเราใช้เป็นพื้นฐานสำหรับหน้าคำแนะนำในการทำอาหารอยู่ใน Bucket ของ Cloud Storage ในโปรเจ็กต์ภายนอก เลือกประเภทแหล่งข้อมูล Cloud Storage 5. ตรวจสอบแต่ไม่ต้องเปลี่ยนตัวเลือกเริ่มต้นที่เกี่ยวข้องกับประเภทข้อมูลที่เรากำลังนำเข้า ปล่อยให้ประเภทการนำเข้าเป็นโฟลเดอร์ และใช้เส้นทางของที่เก็บข้อมูล labs.roitraining.com/labs/old-cookbooks จากนั้นคลิกต่อไป 6. ตั้งชื่อที่เก็บข้อมูล: old-cookbooks แก้ไขและเปลี่ยนรหัสเป็น old-cookbooks-id แล้วสร้างพื้นที่เก็บข้อมูล

Vertex AI Agent Builder รองรับแอปหลายประเภท และ Data Store จะทําหน้าที่เป็นแหล่งข้อมูลที่เชื่อถือได้สําหรับแต่ละแอป แอปค้นหาเหมาะสำหรับการใช้งานทั่วไปและการค้นหา แอป Chat มีไว้สำหรับโฟลว์ Generative ในแอปพลิเคชันแชทบ็อต/วอยซ์บ็อตที่ขับเคลื่อนด้วย Dataflow แอปแนะนำช่วยสร้างเครื่องมือแนะนำที่ดีขึ้น และแอป Agent มีไว้สำหรับสร้าง Agent ที่ขับเคลื่อนด้วย GenAI ในที่สุดแล้ว Agent น่าจะตอบโจทย์สิ่งที่เราต้องการทำได้ดีที่สุด แต่เนื่องจากผลิตภัณฑ์ยังอยู่ในช่วงตัวอย่าง เราจึงจะใช้แอปประเภท Search ต่อไป 7. ใช้เมนูด้านซ้ายเพื่อไปยังแอป แล้วคลิกสร้างแอป 8. เลือกประเภทแอป Search ตรวจสอบแต่ไม่ต้องเปลี่ยนตัวเลือกต่างๆ ตั้งชื่อแอป: cookbook-search แก้ไขและตั้งค่ารหัสแอปเป็น cookbook-search-id ตั้งค่าบริษัทเป็น Google แล้วดำเนินการต่อ 9. ตรวจสอบold-cookbooksพื้นที่เก็บข้อมูลที่คุณสร้างไว้เมื่อ 2-3 ขั้นตอนก่อนหน้า แล้วสร้างแอปค้นหา

หากตรวจสอบแท็บกิจกรรม คุณอาจเห็นว่าระบบยังคงนำเข้าและจัดทำดัชนีตำราอาหาร Agent Builder จะใช้เวลา 5 นาทีขึ้นไปในการจัดทำดัชนีหน้าเว็บหลายพันหน้าในตำราอาหาร 70 เล่มที่เราให้ ในระหว่างที่เครื่องมือทำงาน เรามาโหลดและล้างข้อมูลฐานข้อมูลสูตรอาหารบางส่วนสำหรับเครื่องมือสร้างสูตรอาหารกัน

6. งานที่ 3 โหลดและล้างข้อมูลในสมุดบันทึก Colab Enterprise โดยใช้ความช่วยเหลือจาก Gemini Code Assist

Google Cloud มีวิธีหลักๆ 2 วิธีที่คุณสามารถใช้กับสมุดบันทึก Jupyter ได้ เราจะใช้ข้อเสนอใหม่ล่าสุดของ Google นั่นคือ Colab Enterprise บางท่านอาจคุ้นเคยกับผลิตภัณฑ์ Colab ของ Google ซึ่งบุคคลและองค์กรที่ต้องการทดลองใช้สมุดบันทึก Jupiter ในสภาพแวดล้อมที่ไม่มีค่าใช้จ่ายมักจะใช้ผลิตภัณฑ์นี้ Colab Enterprise เป็นข้อเสนอเชิงพาณิชย์ของ Google Cloud ที่ผสานรวมกับผลิตภัณฑ์คลาวด์อื่นๆ ของ Google อย่างเต็มรูปแบบ และใช้ประโยชน์จากความสามารถด้านความปลอดภัยและการปฏิบัติตามข้อกำหนดของสภาพแวดล้อม GCP อย่างเต็มที่

ฟีเจอร์หนึ่งที่ Colab Enterprise มีให้คือการผสานรวมกับ Gemini Code Assist ของ Google คุณใช้ Code Assist ในโปรแกรมแก้ไขโค้ดต่างๆ ได้ และสามารถให้คำแนะนำรวมถึงคำแนะนำในบรรทัดที่ราบรื่นขณะที่คุณเขียนโค้ด เราจะใช้ประโยชน์จากผู้ช่วยแบบ Generative นี้ในขณะที่เราจัดระเบียบข้อมูลสูตรอาหาร

1. ใช้การค้นหาเพื่อไปยัง Colab Enterprise และสร้างสมุดบันทึก หากได้รับข้อเสนอให้ทดลองใช้ฟีเจอร์ใหม่ๆ ของ Colab ให้ปิดข้อเสนอนั้น หากต้องการเปิดใช้รันไทม์ ซึ่งเป็นกำลังประมวลผลเบื้องหลัง Notebook ให้กดเชื่อมต่อที่มุมขวาบนของ Notebook ใหม่

2. ใช้เมนู 3 จุดข้างชื่อสมุดบันทึกปัจจุบันในแผงไฟล์ของ Colab Enterprise เพื่อเปลี่ยนชื่อ Data Wrangling

3. สร้างช่อง + ข้อความใหม่ แล้วใช้ลูกศรขึ้นเพื่อย้ายให้เป็นเซลล์แรกในหน้า

4. แก้ไขกล่องข้อความแล้วป้อนข้อมูลต่อไปนี้

# Data Wrangling

Import the Pandas library

5. ในโค้ดบล็อกใต้ข้อความบล็อกที่คุณเพิ่งสร้าง ให้เริ่มพิมพ์ imp แล้ว Gemini Code Assist ควรจะแนะนำส่วนที่เหลือของการนำเข้าเป็นสีเทา กด Tab เพื่อยอมรับคําแนะนํา

import pandas as pd

6. สร้างกล่องข้อความอีกกล่องใต้กล่องโค้ดนำเข้า แล้วป้อนข้อความต่อไปนี้

Create a Pandas DataFrame from: gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv. View the first few records.

7. สร้างและแก้ไขบล็อกโค้ดอื่น อีกครั้ง ให้เริ่มพิมพ์ df แล้วตรวจสอบโค้ดที่ Gemini Code Assistant สร้างขึ้น หากเห็นรายการแบบเลื่อนลงของการเติมข้อความอัตโนมัติของคีย์เวิร์ด Python เหนือคำแนะนำที่สร้างขึ้น ให้กด Escape เพื่อดูโค้ดที่แนะนำสีเทาอ่อน กด Tab อีกครั้งเพื่อยอมรับคำแนะนำ หากคำแนะนำไม่มีการเรียกฟังก์ชัน head() ให้เพิ่ม

df = pd.read_csv('gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv')
df.head()

8. คลิกเซลล์โค้ดแรกที่คุณนำเข้า Pandas แล้วใช้เมนูคำสั่งหรือแป้นพิมพ์เพื่อเรียกใช้เซลล์ที่เลือก ในแป้นพิมพ์ shift+enter จะเรียกใช้เซลล์และเปลี่ยนโฟกัสไปยังเซลล์ถัดไป โดยจะสร้างเซลล์หากจำเป็น รอให้เซลล์ดำเนินการก่อนที่จะไปยังขั้นตอนถัดไป

หมายเหตุ: คุณจะเห็น [ ] ทางด้านซ้ายเมื่อยังไม่ได้เรียกใช้เซลล์ ขณะที่เซลล์กำลังดำเนินการ คุณจะเห็นภาพเคลื่อนไหวการทำงานที่หมุนอยู่ เมื่อเซลล์ทำงานเสร็จแล้ว ตัวเลขจะปรากฏขึ้น เช่น [13] 9. เรียกใช้เซลล์ที่โหลด CSV ลงใน DataFrame รอให้ระบบโหลดไฟล์และตรวจสอบข้อมูล 5 แถวแรก นี่คือข้อมูลสูตรอาหารที่เราจะโหลดลงใน BigQuery และในที่สุดเราจะใช้ข้อมูลนี้เพื่อเป็นพื้นฐานสำหรับเครื่องมือสร้างสูตรอาหาร 10. สร้างบล็อกโค้ดใหม่และป้อนความคิดเห็นด้านล่าง หลังจากพิมพ์ความคิดเห็นแล้ว ให้ย้ายไปที่บรรทัดโค้ดถัดไป แล้วคุณจะได้รับคำแนะนำ df.columns จากนั้นยอมรับแล้วเรียกใช้เซลล์

# List the current DataFrame column names

เราเพิ่งแสดงให้เห็นว่าคุณมี 2 ตัวเลือกในการรับความช่วยเหลือจาก Gemini Code Assist ในสมุดบันทึก Jupyter ได้แก่ เซลล์ข้อความเหนือเซลล์โค้ด หรือความคิดเห็นภายในเซลล์โค้ด ความคิดเห็นภายในโค้ดเซลล์จะทำงานได้ดีในสมุดบันทึก Jupyter แต่แนวทางนี้จะใช้ได้ใน IDE อื่นๆ ที่รองรับ Gemini Code Assist ของ Google ด้วย

11. มาจัดระเบียบคอลัมน์กันหน่อย เปลี่ยนชื่อคอลัมน์ Unnamed: 0 เป็น id และ link เป็น uri ใช้เทคนิคพรอมต์ > โค้ดที่คุณเลือกเพื่อสร้างโค้ด จากนั้นเรียกใช้เซลล์เมื่อพอใจ

# Rename the column 'Unnamed: 0' to 'id' and 'link' to 'uri'
df.rename(columns={'Unnamed: 0': 'id', 'link': 'uri'}, inplace=True)

12. นำคอลัมน์ source และ NER ออก แล้วใช้ head() เพื่อดู 2-3 แถวแรก อีกครั้งที่ Gemini ช่วยคุณได้ เรียกใช้ 2 บรรทัดสุดท้ายและตรวจสอบผลลัพธ์

# Remove the source and NER columns
df.drop(columns=['source', 'NER'], inplace=True)
df.head()

13. มาดูกันว่าชุดข้อมูลของเรามีกี่ระเบียน อีกครั้ง ให้เริ่มต้นด้วยเทคนิคการแจ้งที่คุณเลือกและดูว่าคุณสามารถขอให้ Gemini ช่วยสร้างโค้ดได้หรือไม่

# Count the records in the DataFrame
df.shape # count() will also work

14. บันทึก 2.23 ล้านรายการอาจมีสูตรอาหารมากกว่าที่เรามีเวลาทำ กระบวนการจัดทำดัชนีใน Agent Builder อาจใช้เวลานานเกินไปสำหรับการฝึกของเราในวันนี้ เราจะสุ่มตัวอย่างสูตรอาหาร 150,000 รายการและใช้ข้อมูลดังกล่าว ใช้แนวทางพรอมต์ > โค้ดเพื่อนำตัวอย่างไปจัดเก็บใน DataFrame ใหม่ชื่อ dfs (s สำหรับ small)

# Sample out 150,000 records into a DataFrame named dfs
dfs = df.sample(n=150000)

15. ข้อมูลแหล่งที่มาของสูตรอาหารพร้อมที่จะโหลดลงใน BigQuery แล้ว ก่อนที่จะโหลด เรามาที่ BigQuery และเตรียมชุดข้อมูลเพื่อเก็บตารางกัน ใน Google Cloud Console ให้ใช้ช่องค้นหาเพื่อไปยัง BigQuery คุณอาจคลิกขวาที่ BigQuery แล้วเปิดในแท็บเบราว์เซอร์ใหม่
16. หากยังไม่เห็น ให้เปิดแผงแชท AI ของ Gemini โดยใช้โลโก้ Gemini ที่ด้านขวาบนของ Cloud Console หากระบบขอให้คุณเปิดใช้ API อีกครั้ง ให้กดเปิดใช้หรือรีเฟรชหน้าเว็บ เรียกใช้พรอมต์: What is a dataset used for in BigQuery? หลังจากสำรวจคำตอบแล้ว ให้ถามว่า How can I create a dataset named recipe_data using the Cloud Console? เปรียบเทียบผลลัพธ์กับขั้นตอนต่อไปนี้

17. ในแผง BigQuery Explorer ให้คลิกเมนูจุด 3 จุดดูการดำเนินการข้างรหัสโปรเจ็กต์ จากนั้นเลือกสร้างชุดข้อมูล

18. ระบุชุดข้อมูลและรหัสของ recipe_data ปล่อยให้ประเภทสถานที่ตั้งเป็นสหรัฐอเมริกา แล้วสร้างชุดข้อมูล หากได้รับข้อผิดพลาดว่ามีชุดข้อมูลอยู่แล้ว ให้ดำเนินการต่อ

เมื่อสร้างชุดข้อมูลใน BigQuery แล้ว ให้กลับไปที่ Notebook แล้วแทรก 19. เปลี่ยนกลับไปที่ Notebook การจัดระเบียบข้อมูลใน Colab Enterprise ในโค้ดเซลล์ใหม่ ให้สร้างตัวแปรชื่อ project_id และใช้ตัวแปรนี้เพื่อเก็บรหัสโปรเจ็กต์ปัจจุบัน ดูที่ด้านซ้ายบนของวิธีการเหล่านี้ ใต้ปุ่ม "สิ้นสุด Lab" คุณจะเห็นรหัสโปรเจ็กต์ปัจจุบัน นอกจากนี้ คุณยังดูได้ในหน้าแรกของ Cloud Console ด้วย กำหนดค่าให้กับตัวแปร project_id แล้วเรียกใช้เซลล์

# Create a variable to hold the current project_id
project_id='YOUR_PROJECT_ID'

20. ใช้แนวทางพรอมต์ > โค้ดเพื่อสร้างบล็อกโค้ดที่จะแทรก DataFrame dfs ลงในตารางชื่อ recipes ในชุดข้อมูลที่เราเพิ่งสร้าง recipe_data เรียกใช้เซลล์

dfs.to_gbq(destination_table='recipe_data.recipes', project_id=project_id, if_exists='replace')

7. งานที่ 4 สร้างแอปค้นหาใน Vertex AI Agent Builder สำหรับเครื่องมือสร้างสูตรอาหาร

ยอดเยี่ยม เมื่อสร้างตารางข้อมูลสูตรอาหารแล้ว เรามาใช้ตารางนี้เพื่อสร้างแหล่งข้อมูลที่อิงตามความเป็นจริงสำหรับเครื่องมือสร้างสูตรอาหารกัน แนวทางที่เราจะใช้จะคล้ายกับที่เราใช้กับแชทบอททำอาหาร เราจะใช้ Vertex AI Agent Builder เพื่อสร้างพื้นที่เก็บข้อมูล จากนั้นใช้พื้นที่เก็บข้อมูลดังกล่าวเป็นแหล่งข้อมูลที่เชื่อถือได้สำหรับแอปค้นหา

หากต้องการ คุณสามารถขอให้ Gemini ใน Google Cloud Console ช่วยเตือนขั้นตอนในการสร้างแอปค้นหา Agent Builder หรือทำตามขั้นตอนที่ระบุไว้ด้านล่างได้

1. ใช้การค้นหาเพื่อไปยังAgent Builder เปิดพื้นที่เก็บข้อมูลและสร้างพื้นที่เก็บข้อมูล คราวนี้ให้เลือกประเภทที่เก็บข้อมูล BigQuery
2. ในเซลล์การเลือกตาราง ให้กดเรียกดู แล้วค้นหา recipes เลือกปุ่มตัวเลือกข้างตาราง หากเห็นสูตรจากโปรเจ็กต์อื่นๆ ของ qwiklabs-gcp-... ให้เลือกสูตรที่เป็นของคุณ

หมายเหตุ: หากคุณคลิก recipes แทนการเลือกปุ่มตัวเลือกข้างๆ ระบบจะเปิดแท็บใหม่ในเบราว์เซอร์และนำคุณไปยังหน้าภาพรวมของตารางใน BigQuery เพียงปิดแท็บเบราว์เซอร์แล้วเลือกปุ่มตัวเลือกใน Agent Builder 3. ตรวจสอบแต่ไม่ต้องเปลี่ยนตัวเลือกเริ่มต้นที่เหลือ แล้วคลิกต่อไป 4. ในหน้าตรวจสอบสคีมา ให้ตรวจสอบการกำหนดค่าเริ่มต้นครั้งแรก แต่ไม่ต้องเปลี่ยนแปลงอะไร ดำเนินการต่อ 5. ตั้งชื่อที่เก็บข้อมูล recipe-data แก้ไขรหัส Datastore และตั้งค่าเป็น recipe-data-id สร้างที่เก็บข้อมูล 6. ไปที่แอปโดยใช้เมนูการนำทางด้านซ้าย แล้วสร้างแอป 7. เลือกแอป Search อีกครั้ง ตั้งชื่อแอปว่า recipe-search และตั้งรหัสเป็น recipe-search-id ตั้งชื่อบริษัทเป็น Google แล้วดำเนินการต่อ 8. คราวนี้ให้ตรวจสอบแหล่งข้อมูล recipe-data สร้างแอป

ตารางฐานข้อมูลจะใช้เวลาสักครู่ในการจัดทำดัชนี ในระหว่างนี้ เรามาทดลองใช้ Data Canvas ใหม่ของ BigQuery และดูว่าเราจะพบสูตรที่น่าสนใจหรือไม่ 9. ใช้ช่องค้นหาเพื่อไปที่ BigQuery ที่ด้านบนของ BigQuery Studio ให้คลิกลูกศรลงข้างแท็บขวาสุด แล้วเลือกผืนผ้าใบข้อมูล ตั้งค่าภูมิภาคเป็น us-central1

10. ในช่องค้นหาของ Data Canvas ให้ค้นหา recipes แล้วเพิ่มตารางลงใน Canvas
11. ระบบจะโหลดการแสดงภาพของตารางสูตรอาหารลงใน Canvas ข้อมูล BigQuery คุณสามารถสำรวจสคีมาของตาราง ดูตัวอย่างข้อมูลในตาราง และตรวจสอบรายละเอียดอื่นๆ ได้ คลิกคําค้นหาใต้การแสดงตาราง
12. Canvas จะโหลดกล่องโต้ตอบการค้นหา BigQuery ที่ค่อนข้างปกติ โดยมีส่วนที่เพิ่มเข้ามาคือกล่องข้อความเหนือหน้าต่างการค้นหา ซึ่งคุณใช้เพื่อแจ้งให้ Gemini ช่วยเหลือได้ มาดูกันว่าเราจะค้นหาสูตรเค้กในตัวอย่างได้ไหม เรียกใช้พรอมต์ต่อไปนี้ (โดยพิมพ์ข้อความแล้วกด Enter/Return เพื่อทริกเกอร์การสร้าง SQL)

Please select the title and ingredients for all the recipes with a title that contains the word cake.

13. ดู SQL ที่สร้างขึ้น เมื่อพอใจแล้ว ให้เรียกใช้การค้นหา
14. ไม่เลวเลย คุณสามารถลองใช้พรอมต์และคำค้นหาอื่นๆ ก่อนดำเนินการต่อได้ เมื่อทำการทดลอง ให้ลองใช้พรอมต์ที่เฉพาะเจาะจงน้อยลงเพื่อดูว่าอะไรใช้ได้และอะไรใช้ไม่ได้ ตัวอย่างเช่น พรอมต์นี้

Do I have any chili recipes?

(อย่าลืมเรียกใช้คำค้นหาใหม่) แสดงรายการสูตรพริก แต่ไม่แสดงส่วนผสมจนกว่าฉันจะแก้ไขเป็น

Do I have any chili recipes?  Please include their title and ingredients.

(ใช่ ฉันพูดว่า "โปรด" เมื่อป้อนพรอมต์ My Mama would be so proud.)

ฉันสังเกตเห็นว่าสูตรพริกสูตรหนึ่งมีเห็ด และใครจะอยากใส่เห็ดในพริกกัน ฉันจึงขอให้ Gemini ช่วยยกเว้นสูตรอาหารเหล่านั้น

Do I have any chili recipes?  Please include their title and ingredients, and ignore any recipes with mushrooms as an ingredient.

8. งานที่ 5 สร้างกรอบแอปพลิเคชันเว็บหลักของ Python และ Streamlit โดยใช้ความช่วยเหลือเล็กๆ น้อยๆ จาก Gemini

เมื่อทั้งที่เก็บข้อมูล Vertex AI Agent Builder ของเราได้รับการจัดทำดัชนี และแอปค้นหาของเราพร้อมใช้งานแล้ว เรามาเริ่มสร้างเว็บแอปพลิเคชันกันเลย

เราจะใช้ประโยชน์จาก Gemini Code Assist ขณะทำงาน ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ Gemini Code Assist ใน Visual Studio Code ได้ที่เอกสารประกอบที่นี่

เราจะทำการพัฒนาใน Google Cloud Workstation ซึ่งเป็นสภาพแวดล้อมการพัฒนาบนระบบคลาวด์ ในกรณีของเราคือโหลด Eclipse Theia (Visual Studio Code แบบโอเพนซอร์ส) ไว้ล่วงหน้า สคริปต์อัตโนมัติในแบบฝึกหัดนี้ได้สร้างคลัสเตอร์และกำหนดค่า Cloud Workstation ให้เราแล้ว แต่เรายังต้องสร้าง Cloud Workstation เอง หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับ Cloud Workstations และการใช้งาน คุณควรขอความช่วยเหลือจาก Gemini Cloud Assist :-)

1. ใช้การค้นหาเพื่อไปยัง Cloud Workstations แล้วคลิกสร้างเวิร์กสเตชัน ตั้งชื่อเวิร์กสเตชัน dev-env และใช้การกำหนดค่า my-config สร้างเวิร์กสเตชัน
2. หลังจากผ่านไป 2-3 นาที คุณจะเห็นเวิร์กสเตชันใหม่ในรายการเวิร์กสเตชันของฉัน เริ่ม dev-env และเมื่อทำงานแล้ว ให้เปิดสภาพแวดล้อมในการพัฒนา
3. โปรแกรมแก้ไขเวิร์กสเตชันจะเปิดขึ้นในแท็บเบราว์เซอร์ใหม่ และหลังจากนั้นไม่นาน คุณจะเห็นอินเทอร์เฟซ Theia (Visual Studio Code) ที่คุ้นเคย ที่ด้านซ้ายของอินเทอร์เฟซ ให้ขยายแท็บการควบคุมแหล่งข้อมูล แล้วกดโคลนที่เก็บ

4. สำหรับ URL ของที่เก็บ ให้ป้อน https://github.com/haggman/recipe-app โคลนที่เก็บลงในโฟลเดอร์ user จากนั้นเปิดที่เก็บที่โคลนเพื่อแก้ไข
5. ก่อนที่จะไปดูโฟลเดอร์ที่โคลนและเริ่มทำงานกับเว็บแอปพลิเคชัน เราต้องให้ปลั๊กอิน Cloud Code ของเอดิเตอร์บันทึกข้อมูลเข้าสู่ Google Cloud และเปิดใช้ Gemini มาเริ่มกันเลย คลิก Cloud Code - ลงชื่อเข้าใช้ ที่ด้านซ้ายล่างของโปรแกรมแก้ไข หากไม่เห็นลิงก์ ให้รอสักครู่แล้วตรวจสอบอีกครั้ง

6. หน้าต่างเทอร์มินัลจะแสดง URL แบบยาว เปิด URL ในเบราว์เซอร์และทำตามขั้นตอนเพื่อให้สิทธิ์เข้าถึงสภาพแวดล้อม Google Cloud แก่ Cloud Code ตรวจสอบว่าคุณใช้บัญชีชั่วคราวสำหรับการออกกำลังกาย student-... ไม่ใช่บัญชี Google Cloud ส่วนตัวเมื่อตรวจสอบสิทธิ์ ในกล่องโต้ตอบสุดท้าย ให้คัดลอกรหัสยืนยัน แล้ววางกลับลงในหน้าต่างเทอร์มินัลที่รออยู่ในแท็บเบราว์เซอร์ของ Cloud Workstation
7. หลังจากนั้นไม่นาน ลิงก์ Cloud Code ที่ด้านล่างซ้ายของโปรแกรมแก้ไขจะเปลี่ยนเป็น Cloud Code - ไม่มีโปรเจ็กต์ คลิกลิงก์ใหม่เพื่อเลือกโปรเจ็กต์ พาเล็ตคำสั่งควรเปิดขึ้นที่ด้านบนของเอดิเตอร์ คลิกเลือกโปรเจ็กต์ Google Cloud แล้วเลือกโปรเจ็กต์ qwiklabs-gcp-... หลังจากนั้นสักครู่ ลิงก์ที่ด้านซ้ายล่างของโปรแกรมแก้ไขจะอัปเดตเพื่อแสดงรหัสโปรเจ็กต์ ซึ่งแสดงว่า Cloud Code เชื่อมต่อกับโปรเจ็กต์ที่ใช้งานอยู่เรียบร้อยแล้ว
8. เมื่อเชื่อมต่อ Cloud Code กับโปรเจ็กต์แล้ว คุณจะเปิดใช้งาน Gemini Code Assist ได้ คลิกโลโก้ Gemini ที่มีขีดฆ่าที่ด้านขวาล่างของอินเทอร์เฟซตัวแก้ไข แผง Gemini Chat จะเปิดขึ้นทางด้านซ้ายของเครื่องมือแก้ไข คลิกเลือกโปรเจ็กต์ Google Cloud เมื่อพาเล็ตคำสั่งเปิดขึ้น ให้เลือกโปรเจ็กต์ qwiklabs-gcp-... หากทำตามขั้นตอนอย่างถูกต้อง (และ Google ไม่ได้เปลี่ยนแปลงอะไร) คุณควรเห็นหน้าต่างแชท Gemini ที่ใช้งานอยู่

9. สุดท้าย เรามากำหนดค่าหน้าต่างเทอร์มินัลของเอดิเตอร์ให้เท่ากัน ใช้เมนูแฮมเบอร์เกอร์ > ดู > เทอร์มินัลเพื่อเปิดหน้าต่างเทอร์มินัล ดำเนินการ gcloud init อีกครั้ง ให้ใช้ลิงก์เพื่ออนุญาตให้เทอร์มินัล Cloud Shell ทำงานกับโปรเจ็กต์ qwiklabs-gcp-... เมื่อระบบขอ ให้เลือกตัวเลือกที่เป็นตัวเลขของqwiklabs-gcp-...โปรเจ็กต์
10. เยี่ยมเลย ตอนนี้เราได้ตั้งค่าเทอร์มินัล, Gemini Chat และ Cloud Code เรียบร้อยแล้ว ให้เปิดแท็บExplorer แล้วใช้เวลาสักครู่เพื่อสำรวจไฟล์ในโปรเจ็กต์ปัจจุบัน

11. ใน Explorer ให้เปิดไฟล์ requirements.txt เพื่อแก้ไข เปลี่ยนไปใช้แผงแชท Gemini แล้วถามว่า

From the dependencies specified in the requirements.txt file, what type of application are we building?

12. เราจึงสร้างเว็บแอปพลิเคชันแบบอินเทอร์แอกทีฟโดยใช้ Python และ Streamlit ซึ่งโต้ตอบกับ Vertex AI และ Discovery Engine ตอนนี้เรามาโฟกัสที่คอมโพเนนต์ของเว็บแอปพลิเคชันกันก่อน ดังที่ Gemini กล่าว Streamlit เป็นเฟรมเวิร์กสําหรับสร้างเว็บแอปพลิเคชันที่อิงตามข้อมูลใน Python ตอนนี้ให้ถามว่า

Does the current project's folder structure seem appropriate for a Streamlit app?s

ซึ่งเป็นจุดที่ Gemini มักจะมีปัญหา Gemini สามารถเข้าถึงไฟล์ที่คุณเปิดอยู่ในเครื่องมือแก้ไขได้ แต่ไม่สามารถดูทั้งโปรเจ็กต์ได้ ลองถามคำถามต่อไปนี้

Given the below, does the current project's file and folder structure seem appropriate for a Streamlit app?

- build.sh
- Home.py
- requirements.txt
- pages
-- Cooking_Advice.py
-- Recipe_Search.py

รับคำตอบที่ดีกว่านี้ไหม

13. มาดูข้อมูลเพิ่มเติมเกี่ยวกับ Streamlit กัน

What can you tell me about Streamlit?

ดีเลย เราจะเห็นว่า Gemini ให้ภาพรวมที่ดีแก่เรา ซึ่งรวมถึงข้อดีและข้อเสีย

14. หากต้องการดูข้อเสีย คุณอาจถามว่า

What are the major downsides or shortcomings?

โปรดสังเกตว่าเราไม่จำเป็นต้องพูดว่า "ของ Streamlit" เนื่องจาก Gemini Chat เป็นการสนทนา (หลายรอบ) Gemini รู้ว่าเราคุยเรื่องอะไรกันอยู่เพราะเราอยู่ในเซสชันแชท หากต้องการล้างประวัติแชทกับ Gemini เมื่อใดก็ตาม ให้ใช้ไอคอนถังขยะที่ด้านบนของหน้าต่างแชทโค้ดกับ Gemini

9. งานที่ 6: ทำให้เว็บแอปพลิเคชันใช้งานได้ใน Cloud Run

ยอดเยี่ยม เรามีโครงสร้างแอปพลิเคชันหลักแล้ว แต่ทุกอย่างจะทำงานได้ไหม และเราควรโฮสต์ใน Google Cloud ที่ไหนดี

1. ในหน้าต่างแชทของ Gemini ให้ถามว่า

If I containerize this application, what compute technologies
in Google Cloud would be best for hosting it?

2. โปรดทราบว่าหากยังไม่ได้ทำงานใน IDE คุณก็ใช้ Google Cloud Assist ได้เช่นกัน เปิด Google Cloud Console จากนั้นเปิด Gemini Cloud Assist แล้วถามว่า

If I have a containerized web application, where would be the
best place to run it in Google Cloud?

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

3. สำหรับเว็บแอปพลิเคชันแบบไม่เก็บสถานะที่มีคอนเทนเนอร์ซึ่งมีอายุการใช้งานสั้น Cloud Run จะเป็นตัวเลือกที่ยอดเยี่ยม ในหน้าต่างแชทกับ Gemini ของโปรแกรมแก้ไขโค้ด ให้ลองใช้พรอมต์ต่อไปนี้

What steps would be required to run this application in
Cloud Run?

4. ดูเหมือนว่าสิ่งแรกที่เราต้องทำคือการสร้าง Dockerfile ใช้โปรแกรมแก้ไขเพื่อสร้างไฟล์ชื่อ Dockerfile ในรูทของโฟลเดอร์โปรเจ็กต์ โปรดตรวจสอบว่าคุณไม่ได้วางไฟล์ดังกล่าวไว้ในโฟลเดอร์หน้าเว็บโดยไม่ตั้งใจ เปิดไฟล์เพื่อแก้ไข
5. มาใช้แผงแชท Gemini ด้านข้างเพื่อสร้าง Dockerfile กัน ใช้พรอมต์เช่นเดียวกับพรอมต์ด้านล่าง เมื่อผลลัพธ์แสดงในแชท ให้ใช้เครื่องหมาย + ข้างไอคอนคัดลอกที่อยู่เหนือ Dockerfile ที่แนะนำเพื่อแทรกโค้ดที่แนะนำลงใน Dockerfile

Create a Dockerfile for the application in the current folder.
The dependencies are defined in requirements.txt and I want you
to use the Python 3 slim bookworm base image.

Gemini ไม่ได้แสดงคำตอบเดียวกันสำหรับพรอมต์เดียวกันเสมอไป ครั้งแรกที่ฉันขอ Dockerfile จาก Gemini ฉันได้รับไฟล์ที่ฉันจะแนะนำให้คุณใช้ เมื่อสักครู่ฉันได้รับคำแนะนำว่า

```docker
# Base image
FROM python:3-bookworm-slim

# Set working directory
WORKDIR /app

# Install dependencies
RUN apt-get update && apt-get install -y \
    build-essential \
    libpq-dev \
    gcc \
    python3-dev \
    && rm -rf /var/lib/apt/lists/*

# Install pip and virtualenv
RUN pip install --upgrade pip virtualenv

# Create virtual environment
RUN python3 -m venv venv

# Activate virtual environment
WORKDIR /app/venv/bin
RUN . activate

# Install Streamlit and libraries from requirements.txt
RUN pip install -r requirements.txt

# Copy application files
COPY . /app

# Expose port 8501 for Streamlit
EXPOSE 8501

# Start Streamlit app
CMD ["streamlit", "run", "main.py"]

That's a heck of a Dockerfile. I'd simplify it a bit. We don't need the apt-get section as anything needed for Python is already in our base image. Also, using a virtual environment in a Python container is a waste of space, so I'd remove that. The expose command isn't strictly necessary, but it's fine. Also, it's trying to start main.py which I don't have.

6. Tweak the Dockerfile so it resembles the following:

FROM python:3.11-slim-bookworm

WORKDIR /app

COPY requirements.txt . RUN pip install –no-cache-dir –upgrade pip &&
pip install –no-cache-dir -r requirements.txt

คัดลอก .

CMD ["streamlit", "run", "Home.py"]

7. We need a place in Google cloud where we can store our container image. Let's get a little help from Gemini. In the Google Cloud Console Gemini Cloud Assist ask:

ที่ใดใน Google Cloud ที่เหมาะที่สุดในการจัดเก็บอิมเมจ Docker

8. If one of the answers you received is the Google Container Registry, then I guess Gemini hasn't gotten word that GCR is deprecated. Again, just like human assistants, you may get out of date or simply wrong answers (hallucinations). Always make sure to consider your choices carefully, even when Gemini is recommending something.

Let's go with Artifact Registry. Ask Gemini Cloud Assist how to create a docker registry in Artifact Registry named cooking-images.

ฉันจะใช้ gcloud เพื่อสร้างรีจิสทรี Docker ใน Artifact Registry ได้อย่างไร

9. Now ask Gemini how you could use Cloud Build to build a new image named `recipe-web-app` from the Dockerfile in the current folder.

ฉันจะใช้ gcloud เพื่อสร้างบริการ Cloud Run ใหม่ชื่อ recipe-web-app จากอิมเมจที่มีชื่อเดียวกันจากที่เก็บ Artifact Registry ที่เราเพิ่งสร้างได้อย่างไร

10. To save you a little time, I've created a script that will create the Artifact Registry repo (if needed), use Cloud Build to build and push the image to the repo, and finally to deploy the application to Cloud Run. In your code editor use the **Explorer** view to open `build.sh` and explore the file.
11. Gemini can operate via the chat window, but it can also work directly in your code file using comments, like we used in the Data Wrangling notebook, and it also may be invoked using Control+i on Windows or Command+i on Mac. Click somewhere in the build.sh script file, activate Gemini using the appropriate Command+i / Control+i command.

<img src="img/61ac2c9a245a3695.png" alt="61ac2c9a245a3695.png"  width="624.00" />

12. At the prompt enter the below. Examine and **Accept** the change.

โปรดแสดงความคิดเห็นในไฟล์ปัจจุบัน

How cool is that?! How many times have you had to work with someone elses code, only to have to waste time gaining a base understanding of their commentless work before you can even start making your changes. Gemini to the rescue!

13. Let's build and deploy our application. In the terminal window execute the `build.sh` file.

. build.sh

14. If you watch the build process, first it will build the Artifact Registry docker repo. Then, it uses Cloud Build to create the container image from the Dockerfile in the local folder (since we didn't supply a `cloudbuild.yaml`). Lastly, the docker image will be deployed into a new Cloud Run service. At the end of the script you'll get a Cloud Run test URL to use.

Open the returned link in a new tab of your browser. Take a moment and explore the application's structure and pages. Nice, now we need a hook in our generative AI functionality.


## Task 7: Connect the Cooking Advice page to our cookbook-search Agent Builder app



We have the framework for the web application running, but we need to connect the two work pages to our two Vertex AI Agent Builder search apps. Let's start with Cooking Advice.

1. In the Google Cloud console use search to navigate to **Chat** in Vertex AI.
2. In the right hand settings page pane set the model to **gemini-1.5-flash-002**. Slide the output token limit up to the max so the model can return longer answers if needed. Open the **Safety Filter Settings**. Set Hate speech, Sexually explicit content, and Harassment content to **Block some**. Set Dangerous content to **Block few** and **Save**. We're setting Dangerous Content a bit lower because talking about knives and cutting can be misinterpreted by Gemini as violence.
3. Slide on the toggle to enable **Grounding** then click **Customize**. Set the grounding source to **Vertex AI search** and for the datastore path use the following. Change YOUR_PROJECT_ID to the project ID found up near the End Lab button in these instructions, then **Save** the grounding settings

projects/YOUR_PROJECT_ID/locations/global/collections/default_collection/dataStores/old-cookbooks-id

**Note:** If you get an error then you either didn't change the project ID to your actual project ID, or you may have missed the step where you changed the old-cookbooks Agent Builder Data Store ID. Check your Agent Builder > Data Stores > old-cookbooks for its actual Data store ID.

4. Test a couple of chat messages. Perhaps start with the below. Try a few others if you like.

ฉันจะรู้ได้อย่างไรว่ามะเขือเทศสุกแล้ว

5. The model works, now let's experiment with the code. Click **Clear Conversation** so our conversations don't become part of the code then click **Get Code**.

<img src="img/dce8ad7ee006cca1.png" alt="dce8ad7ee006cca1.png"  width="624.00" />

6. At the top of the code window, press Open Notebook so we can experiment and perfect the code in Colab Enterprise before integrating it into our app.
7. Take a few minutes to familiarize yourself with the code. Let's make a couple of changes to adapt it to what we want. Before we start, run the first code cell to connect to the compute and install the AI Platform SDK. After the block runs you will be prompted to restart the session. Go ahead and do that.
8. Move to the code we pulled out of Vertex AI Studio. Change the name of the method *multiturn_generate_content* to `start_chat_session`.
9. Scroll to the `model = GenerativeModel(` method call. The existing code defines the `generation_config` and `safety_settings` but doesn't actually use them. Modify the creation of the `GenerativeModel` so it resembles:

model = GenerativeModel( "gemini-1.5-flash-002", tools=tools, generation_config=generation_config, safety_settings=safety_settings, )

10. Lastly, add a final line to the method, just below `chat = model.start_chat()`, so the function returns the `chat` object. The finished function should look like the below.

**Note:** DO NOT COPY this code into your notebook. It is simply here as a sanity check.

def start_chat_session(): vertexai.init(project="qwiklabs-gcp-02-9a7298ceaaec", location="us-central1") tools = [ Tool.from_retrieval( retrieval=grounding.Retrieval( source=grounding.VertexAISearch(datastore="projects/qwiklabs-gcp-02-9a7298ceaaec/locations/global/collections/default_collection/dataStores/old-cookbooks-id"), ) ), ] model = GenerativeModel( "gemini-1.5-flash-002", tools=tools, generation_config=generation_config, safety_settings=safety_settings, ) chat = model.start_chat() return chat

11. Scroll to the bottom of the code cell and change the final line calling the old function so it calls the new function name and stores the returned object in a variable `chat`. Once you are satisfied with your changes, run the cell.

chat = start_chat_session()

12. Create a new code cell and add the comment `# Use chat to invoke Gemini and print out the response`. Move to the next line and type resp and Gemini should auto complete the block for you. Update the prompt to `How can I tell if a tomato is ripe?`. Run the cell

response = chat.send_message("How can I tell if a tomato is ripe?") print(response)

13. That's the response alright, but the part we really want is that nested text field. Modify the codeblock to print just that section, like:

response = chat.send_message("How can I tell if a tomato is ripe?") print(response.candidates[0].content.parts[0].text)

14. Good, now that we have working chat code, let's integrate it into our web application. Copy all the contents of the code cell that creates the `start_chat_session` function (we won't need the test cell). If you click into the cell you can click the triple dot menu in the upper right corner and copy from there

<img src="img/17bf8d947393d4b.png" alt="17bf8d947393d4b.png"  width="326.00" />

15. Switch to your Cloud Workstation editor and open pages\Cooking_Advice.py for editing.
16. Locate the comment:

เพิ่มโค้ดที่คุณคัดลอกจากสมุดบันทึกไว้ใต้ข้อความนี้

17. Paste your copied code just below the above comment. Nice, now we have the section which drives the chat engine via a grounded call to Gemini. Now let's integrate it into Streamlit.
18. Locate section of commented code directly below the comment:

นี่คือโค้ดในการตั้งค่าตัวแปรเซสชัน

ยกเลิกการแสดงความคิดเห็นในบล็อกนี้เมื่อได้รับคำสั่ง

19. Uncomment this section of code (Up till the next `Setup done, let's build the page UI` section) and explore it. It creates or retrieves the chat and history session variables.
20. Next, we need to integrate the history and chat functionality into the UI. Scroll in the code until you locate the below comment.

นี่คือโค้ดสำหรับสร้างอินเทอร์เฟซแชท

ยกเลิกการแสดงความคิดเห็นในโค้ดด้านล่างเมื่อได้รับคำสั่ง

21. Uncomment the rest of the code below the comment and take a moment to explore it. If you like, highlight it and get Gemini to explain its functionality.
22. Excellent, now let's build the application and deploy it. When the URL comes back, launch the application and give the Cooking Advisor page a try. Perhaps ask it about ripe tomatoes, or the bot knows a good way to prepare brussels sprouts.

. build.sh

How cool is that! Your own personal AI cooking advisor :-)


## Task 8: (Optional) Connect the Recipe Search page to the recipe-search Agent Builder app



When we connected the Cooking Advice page to its grounded source, we did so using the Gemini API directly. For Recipe Search, let's connect to the Vertex AI Agent Builder search app directly.

1. In your Cloud Workstation editor, open the `pages/Recipe_Search.py` page for editing. Investigate the structure of the page.
2. Towards the top of the file, set your project ID.
3. Examine the `search_sample` function. This code more or less comes directly from the Discovery Engine documentation  [here](https://cloud.google.com/generative-ai-app-builder/docs/preview-search-results#genappbuilder_search-python). You can find a working copy in this notebook  [here](https://github.com/GoogleCloudPlatform/generative-ai/blob/main/search/create_datastore_and_search.ipynb).
4. The only change I made was to return the `response.results` instead of just the results. Without this, the return type is an object designed to page through results, and that's something we don't need for our basic application.
5. Scroll to the very end of the file and uncomment the entire section below `Here are the first 5 recipes I found`.
6. Highlight the whole section you just uncommented and open Gemini Code chat. Ask, `Explain the highlighted code`. If you don't have something selected, Gemini can explain the whole file. If you highlight a section and ask Gemini to explain, or comment, or improve it, Gemini will.

Take a moment and read through the explanation. For what it's worth, using a Colab Enterprise notebook is a great way to explore the Gemini APIs before you integrate them into your application. It's especially helpful at exploring some of the newer APIs which may not be documented as well as they could be.
7. At your editor terminal window, run `build.sh` to deploy the final application. Wait until the new version is deployed before moving to the next step.


## Task 9: (Optional) Explore the final application



Take a few minutes to explore the final application.

1. In the Google Cloud console, use search to navigate to **Cloud Run**, then click into your **recipe-web-app**.
2. Locate the application test URL (towards the top) and open it in a new browser tab.
3. The application home page should appear. Note the basic layout and navigation provided by Streamlit, with the python files from the `pages` folder displayed as navigational choices, and the `Home.py` loaded as the home page. Navigate to the **Cooking Advice** page.
4. After a few moments the chat interface will appear. Again, note the nice core layout provided by Streamlit.
5. Try a few cooking related questions and see how the bot functions. Something like:

คุณมีคำแนะนำในการเตรียมบรอกโคลีไหม

หรือจะลองสูตรซุปไก่แบบคลาสสิกไหม

บอกข้อมูลเกี่ยวกับเมอแรงก์หน่อย

6. Now let's find a recipe or two. Navigate to the Recipe Search page and try a few searches. Something like:

ชิลลี่ คอน คาร์เน

พริก ข้าวโพด ข้าว

พายเลมอนเมอแรงก์

ของหวานที่มีสตรอว์เบอร์รี

## Congratulations!



You have created an application leveraging Vertex AI Agent Builder applications. Along the way you've explored Gemini Cloud Assist, Gemini Code Assist, and the natural language to SQL features of BigQuery's Data Canvas. Fantastic job!