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

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

ก่อนคลิกปุ่ม "เริ่มใช้งาน Lab"

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

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

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

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

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

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

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

วิธีเริ่มใช้งานห้องทดลองและลงชื่อเข้าใช้คอนโซล Google Cloud

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

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

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

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

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

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

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

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

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

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

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

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

4. งานที่ 1 เปิดใช้งานและใช้ฟีเจอร์ความช่วยเหลือจากระบบคลาวด์ของ Gemini

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

1. หากต้องการเปิดใช้งาน Cloud Assist เพื่อใช้งาน ให้คลิกช่องค้นหาที่ด้านบนของ UI ของ Cloud Console แล้วเลือกถาม Gemini (หรือข้อความอาจระบุว่าถาม Gemini สำหรับ Cloud Console)
2. เลื่อนไปที่ส่วน API ที่จําเป็นในหน้าเว็บ แล้วเปิดใช้ Gemini for Google Cloud API
3. หากไม่เห็นอินเทอร์เฟซแชทในทันที ให้คลิกเริ่มแชท เริ่มต้นด้วยการขอให้ Gemini อธิบายประโยชน์บางส่วนของการใช้เวิร์กสเตชันบนระบบคลาวด์ ใช้เวลาสักครู่เพื่อดูคำตอบที่สร้างขึ้น
4. จากนั้นถามเกี่ยวกับประโยชน์ของ Agent Builder และวิธีที่เครื่องมือนี้ช่วยสร้างคำตอบที่ตรงกับบริบท
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 ที่แนะนําทั้งหมด หากได้รับกล่องป๊อปอัปเกี่ยวกับความจำเป็นในการเปิดใช้ Vertex AI API โปรดเปิดใช้ API ดังกล่าวด้วย
2. ใช้การค้นหาเพื่อไปยัง Agent Builder แล้วดำเนินการต่อและเปิดใช้งาน API
3. ดังที่ Gemini แนะนำในการขอคำปรึกษาก่อนหน้านี้ การสร้างแอปการค้นหาใน Agent Builder เริ่มต้นด้วยการสร้างแหล่งข้อมูลที่เชื่อถือได้ เมื่อผู้ใช้ค้นหา Gemini จะเข้าใจคำถามและวิธีเขียนคำตอบที่ชาญฉลาด แต่จะมองหาแหล่งที่มาที่เชื่อถือได้สำหรับข้อมูลที่ใช้ในการตอบกลับนั้น แทนที่จะดึงมาจากความรู้ที่มีอยู่แล้ว

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

Vertex AI Agent Builder รองรับแอปหลายประเภท และที่เก็บข้อมูลจะทำหน้าที่เป็นแหล่งข้อมูลที่เป็นความจริงสำหรับแต่ละแอป แอปการค้นหาเหมาะสำหรับการใช้งานทั่วไปและการค้นหา แอป Chat มีไว้สำหรับโฟลว์การสร้างในแอปพลิเคชันแชทบ็อต/วอยซ์บ็อตที่ขับเคลื่อนโดย Dataflow แอปคำแนะนำช่วยสร้างเครื่องมือแนะนำที่ดีขึ้น และแอปตัวแทนมีไว้สำหรับสร้างตัวแทนที่ทำงานด้วย GenAI ในที่สุดแล้ว ตัวแทนอาจเหมาะกับสิ่งที่เราต้องการมากที่สุด แต่เนื่องจากผลิตภัณฑ์กำลังอยู่ในช่วงทดลองใช้ เราจึงจะใช้แอปประเภท 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 วิธีในการทำงานกับสมุดบันทึก Jupiter เราจะใช้ Colab Enterprise ซึ่งเป็นข้อเสนอใหม่ล่าสุดของ Google บางคนอาจคุ้นเคยกับผลิตภัณฑ์ Colab ของ Google ซึ่งมักใช้โดยบุคคลและองค์กรที่ต้องการทดลองใช้ Jupiter Notebook ในสภาพแวดล้อมแบบไม่มีค่าใช้จ่าย Colab Enterprise เป็นข้อเสนอเชิงพาณิชย์ของ Google Cloud ที่ผสานรวมกับผลิตภัณฑ์ระบบคลาวด์อื่นๆ ของ Google อย่างเต็มรูปแบบ และใช้ประโยชน์จากความสามารถด้านความปลอดภัยและการปฏิบัติตามข้อกำหนดของสภาพแวดล้อม GCP อย่างเต็มที่

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

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

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

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

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

# Data Wrangling

Import the Pandas library

5. ในโค้ดบล็อกใต้บล็อกข้อความที่คุณเพิ่งสร้างขึ้น ให้เริ่มพิมพ์ imp แล้วเครื่องมือช่วยเขียนโค้ดของ Gemini จะแนะนำการนําเข้าที่เหลือเป็นสีเทา กด 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 ใน Jupyter Notebook ได้แก่ เซลล์ข้อความเหนือเซลล์โค้ด หรือความคิดเห็นภายในเซลล์โค้ด ความคิดเห็นภายในเซลล์โค้ดใช้งานได้ดีใน Jupyter Notebook แต่วิธีนี้ยังใช้ได้กับ IDE อื่นๆ ที่รองรับความช่วยเหลือเกี่ยวกับโค้ด Gemini ของ 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() เพื่อดูแถวแรกๆ โปรดให้ 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 สำหรับขนาดเล็ก)

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

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

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

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

เมื่อสร้างชุดข้อมูลใน BigQuery แล้ว ให้กลับไปที่โน้ตบุ๊กและทำการแทรก 19. เปลี่ยนกลับไปที่สมุดบันทึกการจัดการข้อมูลใน Colab Enterprise ในเซลล์โค้ดใหม่ ให้สร้างตัวแปรชื่อ project_id และใช้ตัวแปรดังกล่าวเพื่อเก็บรหัสโปรเจ็กต์ปัจจุบัน มองที่ด้านซ้ายบนของวิธีการเหล่านี้ใต้ปุ่ม "สิ้นสุดห้องทดลอง" แล้วคุณจะเห็นรหัสโปรเจ็กต์ปัจจุบัน หรือจะดูในหน้าแรกของ 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 ช่วยเตือนขั้นตอนการสร้างแอปการค้นหาของ Agent Builder ก็ได้ หรือจะทำตามขั้นตอนที่ระบุไว้ด้านล่างก็ได้

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

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

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

10. ในช่องค้นหาของผืนผ้าใบข้อมูล ให้ค้นหา recipes แล้วเพิ่มลงในผืนผ้าใบ
11. ระบบจะโหลดการแสดงภาพตารางสูตรอาหารลงในผืนผ้าใบข้อมูล BigQuery คุณสามารถสำรวจสคีมาของตาราง ดูตัวอย่างข้อมูลในตาราง และตรวจสอบรายละเอียดอื่นๆ คลิกการค้นหาใต้การแสดงตาราง
12. แคนวาสจะโหลดกล่องโต้ตอบการค้นหา BigQuery ทั่วไปที่มีการเพิ่มอีก 1 อย่างคือกล่องข้อความเหนือหน้าต่างการค้นหาที่คุณสามารถใช้เพื่อแจ้งให้ 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.

(ใช่ ฉันพูดว่า "ขออนุญาต" เมื่อแจ้ง แม่ของฉันจะภูมิใจมากๆ)

เราสังเกตเห็นว่าสูตรพริกสูตรหนึ่งมีเห็ด ใครจะอยากใส่เห็ดในพริก เราขอให้ 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

เมื่อทั้ง 2 พื้นที่เก็บข้อมูล 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 เอง หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับเวิร์กสเตชันบนระบบคลาวด์และการใช้งาน โปรดสอบถามทีมสนับสนุนของ Gemini Cloud :-)

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

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

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

9. สุดท้าย มากำหนดค่าหน้าต่างเทอร์มินัลของตัวแก้ไขให้เท่ากัน ใช้เมนู 3 ขีด > มุมมอง > เทอร์มินัลเพื่อเปิดหน้าต่างเทอร์มินัล ดำเนินการ gcloud init ใช้ลิงก์อีกครั้งเพื่ออนุญาตให้เทอร์มินัล Cloud Shell ทำงานกับโปรเจ็กต์ qwiklabs-gcp-... เมื่อระบบถาม ให้เลือกตัวเลือกตัวเลขของโปรเจ็กต์ qwiklabs-gcp-...
10. เยี่ยมมาก ตอนนี้เราได้กำหนดค่าเทอร์มินัล แชท Gemini และ 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 เป็นแบบการสนทนา (หลายรอบ) 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. โปรดทราบว่าคุณใช้ Google Cloud Assist ได้หากไม่ได้ทํางานใน IDE เปิดคอนโซล Google Cloud จากนั้นเปิด 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

คัดลอก 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:

พื้นที่เก็บข้อมูลอิมเมจ Docker ที่เหมาะที่สุดใน Google Cloud

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!