หน้านี้ได้รับการแปลโดย Cloud Translation API

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

1. ภาพรวม

ในชั้นเรียนนี้ คุณจะใช้ผลิตภัณฑ์ Generative AI ของ Google เพื่อสร้างโครงสร้างพื้นฐานใน Google Cloud ด้วยความช่วยเหลือของ Gemini Cloud Assist, ค้นหาข้อมูล BigQuery โดยใช้ภาษาที่เป็นธรรมชาติกับฟีเจอร์ SQL ของ Data Canvas, เขียนโค้ดใน Jupyter Notebook ของ 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. ข้อกำหนดเบื้องต้น

หากยังไม่มีบัญชี Google คุณต้องสร้างบัญชี Google
- ใช้บัญชีส่วนตัวแทนบัญชีงานหรือบัญชีโรงเรียน บัญชีงานและบัญชีโรงเรียนอาจมีข้อจํากัดที่ทำให้คุณเปิดใช้ API ที่จําเป็นสําหรับห้องทดลองนี้ไม่ได้

3. การตั้งค่าโปรเจ็กต์

ลงชื่อเข้าใช้คอนโซล Google Cloud
เปิดใช้การเรียกเก็บเงินในคอนโซล Cloud
- การทำแล็บนี้ให้เสร็จสมบูรณ์ควรใช้ทรัพยากรในระบบคลาวด์ไม่ถึง $1 USD
- คุณสามารถทำตามขั้นตอนที่ส่วนท้ายของห้องทดลองนี้เพื่อลบทรัพยากรเพื่อหลีกเลี่ยงการเรียกเก็บเงินเพิ่มเติม
- ผู้ใช้ใหม่มีสิทธิ์รับช่วงทดลองใช้ฟรีมูลค่า$300 USD
- หากเข้าร่วมกิจกรรมเสมือนจริงในแล็บแบบลงมือปฏิบัติ คุณอาจได้รับเครดิตมูลค่า$5 USD
สร้างโปรเจ็กต์ใหม่หรือเลือกนําโปรเจ็กต์ที่มีอยู่มาใช้ซ้ำ
ยืนยันว่าเปิดใช้การเรียกเก็บเงินในโปรเจ็กต์ของฉันในการเรียกเก็บเงินใน Cloud
- หากโปรเจ็กต์ใหม่แสดง Billing is disabled ในคอลัมน์ Billing account ให้ทำดังนี้
  1. คลิกจุด 3 จุดในคอลัมน์ Actions
  2. คลิกเปลี่ยนการเรียกเก็บเงิน
  3. เลือกบัญชีสำหรับการเรียกเก็บเงินที่ต้องการใช้
- หากคุณเข้าร่วมกิจกรรมแบบสด บัญชีมีแนวโน้มที่จะชื่อว่าบัญชีสำหรับการเรียกเก็บเงินของ Google Cloud Platform เวอร์ชันทดลองใช้

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

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

หากต้องการเปิดใช้งาน Cloud Assist เพื่อใช้งาน ให้คลิกช่องค้นหาที่ด้านบนของ UI ของ Cloud Console แล้วเลือกขอความช่วยเหลือจาก Gemini หรือขอความช่วยเหลือจาก Gemini สำหรับ Cloud Console
เลื่อนไปที่ส่วน API ที่จําเป็นในหน้าเว็บ แล้วเปิดใช้ Gemini for Google Cloud API
หากไม่เห็นอินเทอร์เฟซแชทในทันที ให้คลิกเริ่มแชท เริ่มต้นด้วยการขอให้ Gemini อธิบายประโยชน์บางประการของการใช้เครื่องมือแก้ไข Cloud Shell ใช้เวลาสักครู่เพื่อดูคำตอบที่สร้างขึ้น
จากนั้นถามเกี่ยวกับประโยชน์ของ Agent Builder และวิธีที่เครื่องมือนี้ช่วยสร้างคำตอบแบบ Generative ได้
สุดท้ายนี้ มาดูการเปรียบเทียบกัน ในหน้าต่างแชท 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?
```

5. สร้างแอปการค้นหาใน Vertex AI Agent Builder สําหรับแชทบ็อตให้คําแนะนําการทําอาหาร

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

ใช้ช่องค้นหาของ Cloud Console เพื่อไปยัง Vertex AI จากแดชบอร์ด ให้คลิกเปิดใช้ API ที่แนะนําทั้งหมด อาจใช้เวลาสักครู่ หากได้รับกล่องป๊อปอัปเกี่ยวกับความจำเป็นในการเปิดใช้ Vertex AI API โปรดเปิดใช้ API ดังกล่าวด้วย เมื่อเปิดใช้ API แล้ว ให้ไปยังขั้นตอนถัดไป
ใช้การค้นหาเพื่อไปยัง Agent Builder แล้วดำเนินการต่อและเปิดใช้งาน API
ดังที่ Gemini แนะนำในการขอคำแนะนำก่อนหน้านี้ การสร้างแอปการค้นหาใน Agent Builder เริ่มต้นด้วยการสร้างแหล่งข้อมูลที่เชื่อถือได้ เมื่อผู้ใช้ค้นหา Gemini จะเข้าใจคำถามและวิธีเขียนคำตอบที่ชาญฉลาด แต่จะมองหาแหล่งข้อมูลที่ใช้คำตอบนั้นแทนที่จะดึงมาจากความรู้ที่มีอยู่แล้ว จากเมนูด้านซ้ายมือ ให้ไปที่ที่เก็บข้อมูลและสร้างที่เก็บข้อมูล
ตำราอาหารที่เป็นสาธารณสมบัติที่เราใช้อ้างอิงในหน้าคำแนะนำการทำอาหารอยู่ในที่เก็บข้อมูล Cloud Storage ในโปรเจ็กต์ภายนอก เลือกประเภทแหล่งที่มาของ Cloud Storage
ตรวจสอบแต่อย่าเปลี่ยนตัวเลือกเริ่มต้นที่เกี่ยวข้องกับประเภทข้อมูลที่เรานําเข้า ตั้งค่าประเภทการนําเข้าเป็นโฟลเดอร์ และสำหรับเส้นทางที่เก็บข้อมูล ให้ใช้ labs.roitraining.com/labs/old-cookbooks จากนั้นคลิกต่อไป
ตั้งชื่อที่เก็บข้อมูล: old-cookbooks คลิกแก้ไข แล้วเปลี่ยนรหัสเป็น old-cookbooks-id และสร้างที่เก็บข้อมูล

Vertex AI Agent Builder รองรับแอปหลายประเภท และที่เก็บข้อมูลจะทำหน้าที่เป็นแหล่งข้อมูลสำหรับแต่ละแอป แอปการค้นหาเหมาะสำหรับการใช้งานทั่วไปและการค้นหา แอป Chat มีไว้สำหรับโฟลว์การสร้างในแอปพลิเคชันแชทบ็อต/วอยซ์บอทที่ขับเคลื่อนโดย Dataflow แอปคำแนะนำช่วยสร้างเครื่องมือแนะนำที่ดีขึ้น และแอปตัวแทนมีไว้สำหรับสร้างตัวแทนที่ทำงานด้วย GenAI ในที่สุดแล้ว ตัวแทนอาจเหมาะกับสิ่งที่เราต้องการมากที่สุด แต่เนื่องจากผลิตภัณฑ์อยู่ในระยะทดลองใช้ เราจึงจะใช้แอปประเภท Search ต่อไป

ใช้เมนูด้านซ้ายเพื่อไปยังแอป แล้วคลิกสร้างแอปใหม่
คลิกสร้างในการ์ดค้นหาเว็บไซต์ ตั้งชื่อแอป cookbook-search คลิกแก้ไข แล้วตั้งค่ารหัสแอปเป็น cookbook-search-id ตั้งค่าบริษัทเป็น Google แล้วคลิกต่อไป
ตรวจสอบพื้นที่เก็บข้อมูล old-cookbooks ที่คุณสร้างไว้เมื่อ 2-3 ขั้นตอนที่ผ่านมา แล้วสร้างแอปการค้นหา

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

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

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

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

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

Import the Pandas library
```
ในโค้ดบล็อกใต้บล็อกข้อความที่คุณเพิ่งสร้างขึ้น ให้เริ่มพิมพ์ imp แล้วเครื่องมือช่วยเขียนโค้ดของ Gemini ควรแนะนำการนําเข้าที่เหลือเป็นสีเทา กด Tab เพื่อยอมรับคําแนะนํา
```
import pandas as pd
```
ใต้ช่องรหัสการนําเข้า ให้สร้างกล่องข้อความอีกช่อง แล้วป้อนข้อมูลต่อไปนี้
```
Create a Pandas DataFrame from: gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv. View the first few records.
```
สร้างและแก้ไขบล็อกโค้ดอื่น อีกครั้ง ให้เริ่มพิมพ์ df = แล้วตรวจสอบโค้ดที่ Gemini Code Assistant สร้างขึ้น หากเห็นรายการแบบเลื่อนลงที่เติมข้อความอัตโนมัติของคีย์เวิร์ด Python เหนือคำแนะนำที่สร้างขึ้น ให้กดแป้น Escape เพื่อดูโค้ดที่แนะนำสีเทาอ่อน กด Tab อีกครั้งเพื่อยอมรับคำแนะนำ หากคําแนะนําไม่มีคําเรียกฟังก์ชัน head() ให้เพิ่มคําเรียกฟังก์ชันนั้น
```
df = pd.read_csv('gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv')
df.head()
```
คลิกเซลล์โค้ดแรกที่คุณนําเข้า Pandas และใช้เมนูคําสั่งหรือแป้นพิมพ์เพื่อเรียกใช้เซลล์ที่เลือก บนแป้นพิมพ์ shift+enter จะเรียกใช้เซลล์และย้ายโฟกัสไปยังเซลล์ถัดไป โดยระบบจะสร้างเซลล์ใหม่หากจำเป็น รอให้เซลล์ทำงานเสร็จก่อนดำเนินการต่อ หมายเหตุ: คุณจะเห็น [ ] ทางด้านซ้ายเมื่อเซลล์ยังไม่ได้ทำงาน ขณะที่เซลล์กำลังทำงาน คุณจะเห็นภาพเคลื่อนไหวที่ทำงานอยู่ซึ่งหมุนอยู่ เมื่อเซลล์เสร็จสิ้นแล้ว ตัวเลขจะปรากฏขึ้น เช่น [13]
เรียกใช้เซลล์ที่โหลด CSV ลงใน DataFrame รอให้ไฟล์โหลดและตรวจสอบข้อมูล 5 แถวแรก นี่คือข้อมูลสูตรอาหารที่เราโหลดลงใน BigQuery และจะใช้ข้อมูลนี้เพื่อกำหนดพื้นฐานให้กับเครื่องมือสร้างสูตรอาหาร
สร้างบล็อกโค้ดใหม่และป้อนความคิดเห็นด้านล่าง หลังจากพิมพ์ความคิดเห็นแล้ว ให้เลื่อนไปยังบรรทัดโค้ดถัดไป คุณควรได้รับคำแนะนำ df.columns ยอมรับแล้วเรียกใช้เซลล์
```
# List the current DataFrame column names
```
เราเพิ่งสาธิตให้คุณเห็นว่าคุณมี 2 วิธีในการรับความช่วยเหลือจากฟีเจอร์ช่วยเขียนโค้ดของ Gemini ใน Jupyter Notebook ได้แก่ เซลล์ข้อความเหนือเซลล์โค้ดหรือความคิดเห็นภายในเซลล์โค้ด ความคิดเห็นภายในเซลล์โค้ดใช้งานได้ดีใน Jupyter Notebook แต่แนวทางนี้จะใช้ได้กับ IDE อื่นๆ ที่รองรับความช่วยเหลือเกี่ยวกับโค้ด Gemini ของ Google ด้วย
มาจัดระเบียบคอลัมน์กันสักหน่อย เปลี่ยนชื่อคอลัมน์ 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)
```
นำคอลัมน์ source และ NER ออก และใช้ head() เพื่อดูแถวแรกๆ โปรดให้ Gemini ช่วยคุณอีกครั้ง เรียกใช้ 2 บรรทัดสุดท้ายและตรวจสอบผลลัพธ์
```
# Remove the source and NER columns
df.drop(columns=['source', 'NER'], inplace=True)
df.head()
```
มาดูจำนวนระเบียนในชุดข้อมูลกัน อีกครั้ง ให้เริ่มต้นด้วยเทคนิคพรอมต์ที่คุณเลือก แล้วดูว่า Gemini ช่วยคุณสร้างโค้ดได้ไหม
```
# Count the records in the DataFrame
df.shape # count() will also work
```
2.23 ล้านระเบียนอาจเป็นสูตรอาหารมากกว่าที่เราจะมีเวลาทำ กระบวนการจัดทําดัชนีใน Agent Builder อาจใช้เวลานานเกินไปสําหรับการฝึกของเราในวันนี้ เพื่อเป็นการประนีประนอม เราขอสุ่มตัวอย่างสูตรอาหาร 150,000 รายการและดำเนินการกับจำนวนดังกล่าว ใช้พรอมต์ > โค้ดเพื่อดึงตัวอย่างและจัดเก็บไว้ใน DataFrame ใหม่ชื่อ dfs (s สำหรับขนาดเล็ก)
```
# Sample out 150,000 records into a DataFrame named dfs
dfs = df.sample(n=150000)
```
ข้อมูลแหล่งที่มาของสูตรพร้อมที่จะโหลดลงใน BigQuery แล้ว ก่อนโหลดข้อมูล ให้ไปที่ BigQuery และเตรียมชุดข้อมูลที่จะเก็บตาราง ในคอนโซล Google Cloud ให้ใช้ช่องค้นหาเพื่อไปยัง BigQuery คุณอาจคลิกขวาที่ BigQuery แล้วเปิดในแท็บเบราว์เซอร์ใหม่
หากไม่เห็น ให้เปิดแผงแชท 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 ขั้นตอนต่อไปนี้
ในแผงเครื่องมือสํารวจ BigQuery ให้คลิกเมนู 3 จุดดูการดําเนินการข้างรหัสโปรเจ็กต์ จากนั้นเลือกสร้างชุดข้อมูล
ระบุชุดข้อมูลและรหัสของ recipe_data ปล่อยประเภทสถานที่เป็นสหรัฐอเมริกา แล้วคลิกสร้างชุดข้อมูล หากได้รับข้อผิดพลาดว่าชุดข้อมูลมีอยู่แล้ว ให้ข้ามไป เมื่อสร้างชุดข้อมูลใน BigQuery แล้ว ให้กลับไปที่โน้ตบุ๊กและทำการแทรก
เปลี่ยนกลับไปที่สมุดบันทึกการจัดการข้อมูลใน Colab Enterprise ในเซลล์โค้ดใหม่ ให้สร้างตัวแปรชื่อ project_id และใช้ตัวแปรดังกล่าวเพื่อเก็บรหัสโปรเจ็กต์ปัจจุบัน มองที่ด้านซ้ายบนของวิธีการเหล่านี้ใต้ปุ่ม "สิ้นสุดห้องทดลอง" แล้วคุณจะเห็นรหัสโปรเจ็กต์ปัจจุบัน หรือจะดูในหน้าแรกของ Cloud Console ก็ได้ กําหนดค่าลงในตัวแปร project_id แล้วเรียกใช้เซลล์
```
# Create a variable to hold the current project_id
project_id='YOUR_PROJECT_ID'
```
ใช้พรอมต์ > โค้ดเพื่อสร้างบล็อกโค้ดที่จะแทรก DataFrame dfs ลงในตารางชื่อ recipes ในชุดข้อมูลที่เราเพิ่งสร้าง recipe_data เรียกใช้เซลล์
```
dfs.to_gbq(destination_table='recipe_data.recipes', project_id=project_id, if_exists='replace')
```

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

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

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

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

ระบบจะใช้เวลาสักครู่ในการจัดทำดัชนีตารางฐานข้อมูล ในระหว่างนี้ เรามาลองใช้ Data Canvas ใหม่ของ BigQuery และดูว่าเราจะค้นพบสูตรที่น่าสนใจสัก 2-3 สูตรไหม

ใช้ช่องค้นหาเพื่อไปยัง BigQuery ที่ด้านบนของ BigQuery Studio ให้คลิกลูกศรลงข้างแท็บด้านขวาสุด แล้วเลือกผืนผ้าใบข้อมูล ตั้งค่าภูมิภาคเป็น us-central1
คลิกค้นหาข้อมูล ในช่องค้นหาของผืนผ้าใบข้อมูล ให้ค้นหา recipes แล้วกด Enter/Return เพื่อค้นหา แล้วคลิกปุ่มเพิ่มลงในผืนผ้าใบข้างชื่อตาราง
ระบบจะโหลดการแสดงภาพตารางสูตรอาหารลงในผืนผ้าใบข้อมูล BigQuery คุณสามารถสำรวจสคีมาของตาราง ดูตัวอย่างข้อมูลในตาราง และตรวจสอบรายละเอียดอื่นๆ คลิกการค้นหาใต้การแสดงตาราง
แคนวาสจะโหลดกล่องโต้ตอบการค้นหา BigQuery ทั่วไปที่มีการเพิ่มอีก 1 อย่างคือกล่องข้อความเหนือหน้าต่างการค้นหาที่คุณสามารถใช้เพื่อแจ้งให้ Gemini ช่วยเหลือ มาดูกันว่าเราจะพบสูตรเค้กในตัวอย่างไหม เรียกใช้พรอมต์ต่อไปนี้ (โดยพิมพ์ข้อความแล้วกด Enter/Return เพื่อเรียกใช้การสร้าง SQL)
```
Please select the title and ingredients for all the recipes with a title that contains the word cake.
```
ดูที่ SQL ที่สร้างขึ้น เมื่อพอใจแล้ว ให้เรียกใช้การค้นหา
เยี่ยมไปเลย คุณลองใช้พรอมต์และการค้นหาอื่นๆ เพิ่มเติมก่อนดำเนินการต่อได้ เมื่อทำการทดสอบ ให้ลองใช้พรอมต์ที่ไม่เฉพาะเจาะจงมากนักเพื่อดูว่าอะไรได้ผลและไม่ได้ผล ตัวอย่างเช่น พรอมต์นี้
```
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. เปิดเครื่องมือแก้ไข Cloud Shell

ไปที่ Cloud Shell Editor
หากเทอร์มินัลไม่ปรากฏที่ด้านล่างของหน้าจอ ให้เปิดเทอร์มินัลโดยทำดังนี้
- คลิกเมนู 3 ขีด
- คลิก Terminal
- คลิก New Terminal
ในเทอร์มินัล ให้ตั้งค่าโปรเจ็กต์ด้วยคำสั่งนี้
- รูปแบบ:
```
gcloud config set project [PROJECT_ID]
```
- ตัวอย่าง
```
gcloud config set project lab-project-id-example
```
- หากจำรหัสโปรเจ็กต์ไม่ได้ ให้ทำดังนี้
  - คุณแสดงรายการรหัสโปรเจ็กต์ทั้งหมดได้โดยทำดังนี้
```
gcloud projects list | awk '/PROJECT_ID/{print $2}'
```
หากได้รับข้อความแจ้งให้ให้สิทธิ์ ให้คลิกให้สิทธิ์เพื่อดำเนินการต่อ
คุณควรเห็นข้อความนี้
```
Updated property [core/project].
```
หากเห็น WARNING และระบบถาม Do you want to continue (Y/N)? แสดงว่าคุณอาจป้อนรหัสโปรเจ็กต์ไม่ถูกต้อง กด N แล้วกด Enter แล้วลองเรียกใช้คำสั่ง gcloud config set project อีกครั้ง

9. เปิดใช้ API

เปิดใช้ API ต่อไปนี้ในเทอร์มินัล

gcloud services enable \
  compute.googleapis.com \
  sqladmin.googleapis.com \
  run.googleapis.com \
  artifactregistry.googleapis.com \
  cloudbuild.googleapis.com \
  networkconnectivity.googleapis.com \
  servicenetworking.googleapis.com \
  cloudaicompanion.googleapis.com

หากได้รับข้อความแจ้งให้ให้สิทธิ์ ให้คลิกให้สิทธิ์เพื่อดำเนินการต่อ คลิกเพื่อให้สิทธิ์ Cloud Shell

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

Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.

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

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

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

ในเทอร์มินัล Cloud Shell Editor ให้เรียกใช้คำสั่งนี้เพื่อโคลนที่เก็บแอปสูตรอาหาร
```
git clone https://github.com/haggman/recipe-app
```
เรียกใช้คำสั่งนี้เพื่อเปิดโฟลเดอร์แอปพลิเคชันใน Cloud Shell Editor
```
cloudshell open-workspace recipe-app/
```
ก่อนที่จะสำรวจโฟลเดอร์ที่โคลนและเริ่มทํางานกับเว็บแอปพลิเคชัน เราต้องทำให้ปลั๊กอิน Cloud Code ของเครื่องมือแก้ไขเข้าสู่ระบบ Google Cloud และเปิดใช้ Gemini มาเริ่มกันเลย คลิก Cloud Code - Sign in ที่ด้านซ้ายล่างของตัวแก้ไข หากไม่เห็นลิงก์ ให้รอสักครู่แล้วตรวจสอบอีกครั้ง
หน้าต่างเทอร์มินัลจะแสดง URL แบบยาว เปิด URL ในเบราว์เซอร์ แล้วทําตามขั้นตอนเพื่ออนุญาตให้ Cloud Code เข้าถึงสภาพแวดล้อม Google Cloud ในกล่องโต้ตอบสุดท้าย ให้คัดลอกรหัสยืนยันและวางกลับไปยังหน้าต่างเทอร์มินัลที่รออยู่ในแท็บเบราว์เซอร์ของ Cloud Shell Editor
หลังจากผ่านไป 2-3 นาที ลิงก์โค้ดระบบคลาวด์ที่ด้านซ้ายล่างของเครื่องมือแก้ไขจะเปลี่ยนเป็นโค้ดระบบคลาวด์ - ไม่มีโปรเจ็กต์ คลิกลิงก์ใหม่เพื่อเลือกโปรเจ็กต์ พาเล็ตคำสั่งจะเปิดขึ้นที่ด้านบนของเครื่องมือแก้ไข คลิกเลือกโปรเจ็กต์ที่อยู่ใน Google Cloud แล้วเลือกโปรเจ็กต์ หลังจากนั้นสักครู่ ลิงก์ที่ด้านซ้ายล่างของเครื่องมือแก้ไขจะอัปเดตเพื่อแสดงรหัสโปรเจ็กต์ ซึ่งหมายความว่า Cloud Code แนบกับโปรเจ็กต์ที่ใช้งานอยู่เรียบร้อยแล้ว
เมื่อเชื่อมต่อ Cloud Code กับโปรเจ็กต์แล้ว คุณจะเปิดใช้งาน Gemini Code Assist ได้ คลิกโลโก้ Gemini ที่ถูกขีดฆ่าที่ด้านขวาล่างของอินเทอร์เฟซเครื่องมือแก้ไข แผง Gemini Chat จะเปิดขึ้นทางด้านซ้ายของเครื่องมือแก้ไข คลิกเลือกโปรเจ็กต์ที่อยู่ใน Google Cloud เมื่อพาเล็ตคำสั่งเปิดขึ้น ให้เลือกโปรเจ็กต์ หากคุณทำตามขั้นตอนอย่างถูกต้อง (และ Google ไม่ได้เปลี่ยนแปลงอะไร) คุณควรเห็นหน้าต่างแชท Gemini ที่ใช้งานอยู่
เยี่ยมมาก การตั้งค่าเทอร์มินัล แชท Gemini และ Cloud Code เสร็จสมบูรณ์แล้ว ให้เปิดแท็บ Explorer แล้วสละเวลา 2-3 นาทีเพื่อสำรวจไฟล์ในโปรเจ็กต์ปัจจุบัน
ใน Explorer ให้เปิดไฟล์ requirements.txt เพื่อแก้ไข เปลี่ยนไปใช้แผงแชท Gemini แล้วถามคำถามต่อไปนี้
```
From the dependencies specified in the requirements.txt file, what type of application are we building?
```
เรากําลังสร้างเว็บแอปพลิเคชันแบบอินเทอร์แอกทีฟโดยใช้ Python และ Streamlit ซึ่งโต้ตอบกับ Vertex AI และ Discovery Engine ในระหว่างนี้ เรามามุ่งเน้นที่คอมโพเนนต์ของเว็บแอปพลิเคชันกัน ตามที่ Gemini กล่าวไว้ Streamlit เป็นเฟรมเวิร์กสำหรับสร้างเว็บแอปพลิเคชันที่ขับเคลื่อนโดยข้อมูลใน Python ตอนนี้ให้ถาม
```
Does the current project's folder structure seem appropriate for a Streamlit app?
```
ส่วนนี้มักจะเป็นจุดที่ 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
```
รับคำตอบที่ดีกว่าไหม
มาดูข้อมูลเพิ่มเติมเกี่ยวกับ Streamlit กัน
```
What can you tell me about Streamlit?
```
เยี่ยมเลย เราเห็นว่า Gemini แสดงภาพรวมที่ดี รวมถึงข้อดีและข้อเสีย
หากต้องการสำรวจข้อเสีย คุณอาจถามคำถามต่อไปนี้
```
What are the major downsides or shortcomings?
```
โปรดทราบว่าเราไม่จำเป็นต้องพูดว่า "จาก Streamlit" เนื่องจากแชท Gemini เป็นแบบการสนทนา (หลายรอบ) Gemini รู้สิ่งที่เราคุยกันอยู่เนื่องจากเราอยู่ในเซสชันการแชท หากต้องการล้างประวัติการแชทของ Gemini ให้ใช้ไอคอนถังขยะที่ด้านบนของหน้าต่างแชทโค้ด Gemini

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

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

ในหน้าต่างแชทของ Gemini ให้ถามดังนี้

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

โปรดทราบว่าหากไม่ได้ทํางานใน IDE อยู่แล้ว คุณสามารถใช้ Google Cloud Assist แทนได้ เปิดคอนโซล 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 และเครื่องมือแก้ไขโค้ดจะช่วยให้คุณทำงานได้อย่างมีประสิทธิภาพมากขึ้น
สำหรับเว็บแอปพลิเคชันที่มีคอนเทนเนอร์แบบไม่เก็บสถานะและมีอายุสั้น Cloud Run เป็นตัวเลือกที่ยอดเยี่ยม ในหน้าต่างแชท Gemini ของเครื่องมือแก้ไขโค้ด ให้ลองใช้พรอมต์ต่อไปนี้
```
What steps would be required to run this application in Cloud Run?
```
ดูเหมือนว่าสิ่งแรกที่เราต้องทําคือสร้าง Dockerfile ใช้เครื่องมือแก้ไขเพื่อสร้างไฟล์ชื่อ Dockerfile ในรูทของโฟลเดอร์โปรเจ็กต์ ตรวจสอบว่าคุณไม่ได้วางไฟล์ไว้ในโฟลเดอร์ pages โดยไม่ได้ตั้งใจ เปิดไฟล์เพื่อแก้ไข
มาลองใช้แผงแชท 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 เป็นครั้งแรก เราได้รับไฟล์ที่ตรงกับที่เรากำลังจะแนะนำให้คุณใช้ ฉันเพิ่งได้รับคำแนะนำต่อไปนี้
```
# 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"]
```
นี่มัน Dockerfile ที่ยอดเยี่ยม เราขออธิบายให้เข้าใจง่ายขึ้น เราไม่จำเป็นต้องใช้ส่วน apt-get เนื่องจากทุกอย่างที่จำเป็นสำหรับ Python อยู่ในอิมเมจฐานของเราอยู่แล้ว นอกจากนี้ การใช้สภาพแวดล้อมเสมือนในคอนเทนเนอร์ Python นั้นสิ้นเปลืองพื้นที่เก็บข้อมูล เราจึงจะนําออก คำสั่ง expose ไม่จำเป็นต้องใช้ แต่ใช้ก็ได้ นอกจากนี้ ระบบยังพยายามเริ่ม main.py ซึ่งฉันไม่มี

ในโฟลเดอร์ recipe-app ให้สร้างไฟล์ชื่อ Dockerfile แล้ววางเนื้อหาต่อไปนี้

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

COPY . .

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

Gemini สามารถทํางานผ่านหน้าต่างแชทได้ แต่ก็ทํางานในไฟล์โค้ดโดยตรงโดยใช้ความคิดเห็นได้ด้วย เช่นที่เราใช้ในโน้ตบุ๊กสำหรับจัดการข้อมูล และสามารถเรียกใช้โดยใช้ Control+i ใน Windows หรือ Command+i ใน Mac คลิกที่ใดก็ได้ใน Dockerfile แล้วเปิดใช้งาน Gemini โดยใช้คําสั่ง Command+i / Control+i ที่เหมาะสม
ป้อนข้อมูลด้านล่างเมื่อได้รับข้อความแจ้ง ตรวจสอบและยอมรับการเปลี่ยนแปลง
```
Please comment the current file.
```
เจ๋งไปเลยใช่ไหมล่ะ คุณเคยต้องทำงานกับโค้ดของคนอื่นกี่ครั้งแล้ว แต่ต้องเสียเวลาทำความเข้าใจพื้นฐานของงานที่ไม่มีความคิดเห็นก่อนที่จะเริ่มทำการเปลี่ยนแปลงได้ Gemini จะมาช่วยแก้ปัญหา
ตอนนี้ให้ถาม Gemini ว่าคุณจะใช้ Cloud Run เพื่อสร้างและทำให้ใช้งานได้กับอิมเมจใหม่ชื่อ recipe-web-app จาก Dockerfile ในโฟลเดอร์ปัจจุบันได้อย่างไร
```
How could I use gcloud to build a new Cloud Run service named recipe-web-app from the current directory?
```
มาสร้างและทำให้แอปพลิเคชันใช้งานได้กัน ในหน้าต่างเทอร์มินัล ให้เรียกใช้คำสั่ง gcloud run deploy
```
gcloud run deploy recipe-web-app \
    --allow-unauthenticated \
    --source=. \
    --region=us-central1 \
    --port=8501
```
หากได้รับข้อความแจ้งให้สร้างที่เก็บข้อมูล Artifact Registry ให้กด enter/return
```
Deploying from source requires an Artifact Registry Docker repository to store built containers. A repository
named cloud-run-source-deploy in region us-central1 will be created.

Do you want to continue (Y/n)?
```
หากคุณดูกระบวนการบิลด์ ระบบจะสร้างที่เก็บ Docker ของ Artifact Registry ก่อน จากนั้นจะใช้ Cloud Build เพื่อสร้างอิมเมจคอนเทนเนอร์จาก Dockerfile ในโฟลเดอร์ในเครื่อง สุดท้าย ระบบจะทําให้อิมเมจ Docker ใช้งานได้ในบริการ Cloud Run ใหม่ ในตอนท้ายของสคริปต์ คุณจะได้รับ URL การทดสอบ Cloud Run เพื่อใช้งาน

เปิดลิงก์ที่แสดงในแท็บใหม่ของเบราว์เซอร์ ใช้เวลาสักครู่เพื่อสำรวจโครงสร้างและหน้าต่างๆ ของแอปพลิเคชัน เยี่ยม ตอนนี้เราต้องเชื่อมต่อฟังก์ชันการทำงานของ Generative AI

12. เชื่อมต่อหน้าคําแนะนําการทําอาหารกับแอปเครื่องมือสร้างตัวแทนการค้นหาตำราอาหาร

เรามีเฟรมเวิร์กสําหรับเว็บแอปพลิเคชันที่ทํางานอยู่ แต่เราต้องเชื่อมต่อหน้างาน 2 หน้ากับแอปการค้นหา Vertex AI Agent Builder 2 แอป มาเริ่มกันที่ "คำแนะนำการทำอาหาร"

เปิดแท็บ Cloud Shell Editor ค้างไว้ ในคอนโซล Google Cloud ให้ใช้การค้นหาเพื่อไปยัง Chat ใน Vertex AI
ในแผงหน้าการตั้งค่าทางด้านขวา ให้ตั้งค่ารุ่นเป็น gemini-1.5-flash-002 เลื่อนขีดจํากัดโทเค็นเอาต์พุตเป็นค่าสูงสุดเพื่อให้โมเดลแสดงคำตอบที่ยาวขึ้นได้หากจําเป็น เปิดการตั้งค่าตัวกรองความปลอดภัย ตั้งค่าวาจาสร้างความเกลียดชัง เนื้อหาเกี่ยวกับเรื่องเพศอย่างโจ่งแจ้ง และเนื้อหาการคุกคามเป็นบล็อกบางส่วน ตั้งค่าเนื้อหาที่เป็นอันตรายเป็นบล็อกบางรายการ แล้วบันทึก เราจะตั้งค่าเนื้อหาที่เป็นอันตรายให้ต่ำลงเล็กน้อยเนื่องจาก Gemini อาจตีความการพูดถึงมีดและการกรีดว่าเป็นความรุนแรง
เลื่อนปุ่มเปิด/ปิดเพื่อเปิดใช้การต่อกราวด์ แล้วคลิกปรับแต่ง ตั้งค่าแหล่งที่มาของข้อมูลอ้างอิงเป็น Vertex AI Search และใช้เส้นทางข้อมูลต่อไปนี้สำหรับเส้นทางข้อมูลดิบ เปลี่ยน YOUR_PROJECT_ID เป็นรหัสโปรเจ็กต์ที่พบใกล้กับปุ่ม "สิ้นสุดการทดสอบ" ในวิธีการเหล่านี้ จากนั้นบันทึกการตั้งค่าการต่อกราวด์
```
projects/YOUR_PROJECT_ID/locations/global/collections/default_collection/dataStores/old-cookbooks-id
```
หมายเหตุ: หากพบข้อผิดพลาด แสดงว่าคุณไม่ได้เปลี่ยนรหัสโปรเจ็กต์เป็นรหัสโปรเจ็กต์จริง หรือคุณอาจพลาดขั้นตอนที่เปลี่ยนรหัสที่เก็บข้อมูล Agent Builder ของตำราเก่า ตรวจสอบรหัสที่แท้จริงของที่เก็บข้อมูลในเครื่องมือสร้างตัวแทน > ที่เก็บข้อมูล > ตำราเก่า
ทดสอบข้อความแชท 2-3 ข้อความ เราขอแนะนำให้เริ่มต้นด้วยข้อความด้านล่าง ลองใช้คำสั่งอื่นๆ เพิ่มเติมได้หากต้องการ
```
How can I tell if a tomato is ripe?
```
โมเดลทํางานแล้ว มาลองใช้โค้ดกัน คลิกล้างการสนทนาเพื่อไม่ให้การสนทนาของเราเป็นส่วนหนึ่งของรหัส แล้วคลิกรับรหัส
ที่ด้านบนของหน้าต่างโค้ด ให้กดเปิดสมุดบันทึกเพื่อให้เราทดสอบและปรับแต่งโค้ดใน Colab Enterprise ให้สมบูรณ์แบบก่อนที่จะผสานรวมเข้ากับแอปของเรา
โปรดใช้เวลาสักครู่เพื่อทำความคุ้นเคยกับรหัส มาทําการเปลี่ยนแปลง 2-3 อย่างเพื่อปรับให้เหมาะกับสิ่งที่เราต้องการกัน ก่อนเริ่มต้น ให้เรียกใช้เซลล์โค้ดแรกเพื่อเชื่อมต่อกับระบบประมวลผลและติดตั้ง AI Platform SDK หลังจากบล็อกทำงานแล้ว คุณจะได้รับข้อความแจ้งให้เริ่มเซสชันอีกครั้ง ในกรณีดังกล่าวให้ดำเนินการสร้างคีย์ตามที่ระบบแจ้ง
ย้ายไปยังโค้ดที่เราดึงมาจาก Vertex AI Studio เปลี่ยนชื่อเมธอด multiturn_generate_content เป็น start_chat_session
เลื่อนไปที่การเรียกใช้เมธอด model = GenerativeModel( โค้ดที่มีอยู่จะกำหนด generation_config และ safety_settings แต่ไม่ได้ใช้งานจริง แก้ไขการสร้าง GenerativeModel ให้มีลักษณะดังนี้
```
model = GenerativeModel(
    "gemini-1.5-flash-002",
    tools=tools,
    generation_config=generation_config,
    safety_settings=safety_settings,
)
```

สุดท้าย ให้เพิ่มบรรทัดสุดท้ายลงในเมธอดใต้ chat = model.start_chat() เพื่อให้ฟังก์ชันแสดงผลออบเจ็กต์ chat ฟังก์ชันที่เสร็จแล้วควรมีลักษณะดังด้านล่าง หมายเหตุ: อย่าคัดลอกโค้ดนี้ลงในโน้ตบุ๊ก ข้อมูลนี้เป็นเพียงการตรวจสอบความถูกต้อง

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

เลื่อนไปที่ด้านล่างของเซลล์โค้ดและเปลี่ยนบรรทัดสุดท้ายที่เรียกใช้ฟังก์ชันเดิมเพื่อให้เรียกใช้ชื่อฟังก์ชันใหม่และจัดเก็บออบเจ็กต์ที่แสดงผลไว้ในตัวแปร chat เมื่อพอใจกับการเปลี่ยนแปลงแล้ว ให้เรียกใช้เซลล์
```
chat = start_chat_session()
```
สร้างเซลล์โค้ดใหม่และเพิ่มความคิดเห็น # Use chat to invoke Gemini and print out the response ย้ายไปที่บรรทัดถัดไปแล้วพิมพ์ resp แล้ว Gemini จะเติมบล็อกให้เสร็จโดยอัตโนมัติ อัปเดตพรอมต์เป็น How can I tell if a tomato is ripe? เรียกใช้เซลล์
```
response = chat.send_message("How can I tell if a tomato is ripe?")
print(response)
```
นี่เป็นคําตอบที่ถูกต้อง แต่สิ่งที่เราต้องการจริงๆ คือช่อง text ที่ฝังอยู่ แก้ไขโค้ดบล็อกให้พิมพ์เฉพาะส่วนนั้น เช่น
```
response = chat.send_message("How can I tell if a tomato is ripe?")
print(response.candidates[0].content.parts[0].text)
```
เยี่ยม ตอนนี้เรามีโค้ดแชทที่ใช้งานได้แล้ว มาผสานรวมโค้ดดังกล่าวกับเว็บแอปพลิเคชันกัน คัดลอกเนื้อหาทั้งหมดของเซลล์โค้ดที่สร้างฟังก์ชัน start_chat_session (เราจะไม่ใช้เซลล์ทดสอบ) หากคลิกเข้าไปในเซลล์ คุณสามารถคลิกเมนู 3 จุดที่มุมขวาบนแล้วคัดลอกจากตรงนั้นได้
เปลี่ยนไปใช้แท็บ Cloud Shell Editor แล้วเปิด pages\Cooking_Advice.py เพื่อแก้ไข

ค้นหาความคิดเห็น

#
# Add the code you copied from your notebook below this message
#

วางโค้ดที่คัดลอกไว้ใต้ความคิดเห็นเพิ่มโค้ด เยี่ยม ตอนนี้เรามีส่วนที่จะขับเคลื่อนเครื่องมือแชทผ่านคอลที่ยึดตามข้อกำหนดไปยัง Gemini แล้ว มาผสานรวมกับ Streamlit กัน
ค้นหาส่วนโค้ดที่มีความคิดเห็นใต้ความคิดเห็นโดยตรง
```
#
# Here's the code to setup your session variables
# Uncomment this block when instructed
#
```
ยกเลิกการคอมเมนต์โค้ดส่วนนี้ (จนถึงส่วน Setup done, let's build the page UI ถัดไป) แล้วลองดู โดยจะสร้างหรือเรียกข้อมูลตัวแปรเซสชันการแชทและประวัติ
ถัดไป เราต้องผสานรวมฟังก์ชันประวัติและการแชทเข้ากับ UI เลื่อนดูโค้ดจนกว่าจะพบความคิดเห็นด้านล่าง
```
#
# Here's the code to create the chat interface
# Uncomment the below code when instructed
#
```
ยกเลิกการคอมเมนต์โค้ดที่เหลือใต้ความคิดเห็นและใช้เวลาสักครู่เพื่อสำรวจ คุณสามารถไฮไลต์คำนั้นและขอให้ Gemini อธิบายฟังก์ชันการทำงานได้หากต้องการ
เยี่ยมมาก มาสร้างและทำให้แอปพลิเคชันใช้งานได้กัน เมื่อ URL กลับมาแล้ว ให้เปิดแอปพลิเคชันและลองใช้หน้า "ที่ปรึกษาการปรุงอาหาร" อาจจะถามเกี่ยวกับมะเขือเทศสุก หรือบอทอาจรู้วิธีเตรียมบรัสเซลส์สปริทที่อร่อย
```
gcloud run deploy recipe-web-app \
    --allow-unauthenticated \
    --source=. \
    --region=us-central1 \
    --port=8501
```

เยี่ยมไปเลยใช่ไหมล่ะ ที่ปรึกษาการทำอาหาร AI ส่วนตัวของคุณเอง :-)

13. (ไม่บังคับ) เชื่อมต่อหน้าการค้นหาสูตรอาหารกับแอป Agent Builder สำหรับการค้นหาสูตรอาหาร

เมื่อเชื่อมต่อหน้า "คำแนะนำในการปรุงอาหาร" กับแหล่งที่มาที่เชื่อถือได้ เราใช้ Gemini API โดยตรง สําหรับการค้นหาสูตรอาหาร ให้เชื่อมต่อกับแอปการค้นหา Vertex AI Agent Builder โดยตรง

เปิดหน้า pages/Recipe_Search.py สำหรับการแก้ไขใน Cloud Shell Editor ตรวจสอบโครงสร้างของหน้า
ตั้งค่ารหัสโปรเจ็กต์ที่ด้านบนของไฟล์
ตรวจสอบฟังก์ชัน search_sample รหัสนี้มาจากเอกสารประกอบของ Discovery Engine โดยตรงที่นี่ คุณดูสําเนาที่ใช้งานได้ในโน้ตบุ๊กนี้ได้ที่นี่ การเปลี่ยนแปลงเพียงอย่างเดียวที่เราทําคือแสดง response.results แทนที่จะเป็นเฉพาะผลลัพธ์ หากไม่มีสิ่งนี้ ประเภทผลลัพธ์จะเป็นออบเจ็กต์ที่ออกแบบมาเพื่อเลื่อนดูผลลัพธ์ ซึ่งเป็นสิ่งที่เราไม่ต้องการสําหรับแอปพลิเคชันพื้นฐาน
เลื่อนไปที่ด้านล่างสุดของไฟล์และยกเลิกการคอมเมนต์ทั้งส่วนที่อยู่ด้านล่าง Here are the first 5 recipes I found
ไฮไลต์ทั้งส่วนที่เพิ่งยกเลิกการคอมเมนต์แล้วเปิดแชทโค้ดของ Gemini ถาม Explain the highlighted code หากไม่ได้เลือกอะไรเลย Gemini จะอธิบายทั้งไฟล์ได้ หากคุณไฮไลต์ส่วนใดส่วนหนึ่งและขอให้ Gemini อธิบาย แสดงความคิดเห็น หรือปรับปรุงส่วนนั้น Gemini จะดำเนินการให้ โปรดอ่านคำอธิบาย การใช้สมุดบันทึก Colab Enterprise เป็นวิธีที่ยอดเยี่ยมในการสำรวจ Gemini API ก่อนที่จะผสานรวมลงในแอปพลิเคชัน ซึ่งจะเป็นประโยชน์อย่างยิ่งในการสำรวจ API ใหม่ๆ บางรายการที่อาจไม่มีเอกสารประกอบที่สมบูรณ์
ในหน้าต่างเทอร์มินัลของเครื่องมือแก้ไข ให้เรียกใช้ build.sh เพื่อทำให้แอปพลิเคชันเวอร์ชันสุดท้ายใช้งานได้ โปรดรอจนกว่าระบบจะติดตั้งใช้งานเวอร์ชันใหม่ก่อนทำขั้นตอนถัดไป

14. (ไม่บังคับ) สำรวจแอปพลิเคชันเวอร์ชันสุดท้าย

ใช้เวลาสักครู่เพื่อดูแอปพลิเคชันเวอร์ชันสุดท้าย

ในคอนโซล Google Cloud ให้ใช้การค้นหาเพื่อไปยัง Cloud Run แล้วคลิก recipe-web-app
ค้นหา URL การทดสอบแอปพลิเคชัน (ด้านบน) แล้วเปิดในแท็บเบราว์เซอร์ใหม่
หน้าแรกของแอปพลิเคชันจะปรากฏขึ้น สังเกตเลย์เอาต์พื้นฐานและการนำทางที่ Streamlit มีให้ โดยไฟล์ Python จากโฟลเดอร์ pages จะแสดงเป็นตัวเลือกการนำทาง และ Home.py จะโหลดเป็นหน้าแรก ไปที่หน้าคำแนะนำในการปรุงอาหาร
อินเทอร์เฟซแชทจะปรากฏขึ้นหลังจากผ่านไปสักครู่ โปรดสังเกตเลย์เอาต์หลักที่ยอดเยี่ยมซึ่ง Streamlit มีให้
ลองถามคำถามเกี่ยวกับการทำอาหาร 2-3 ข้อเพื่อดูว่าบอททำงานอย่างไร ประมาณนี้
```
Do you have any advice for preparing broccoli?

How about a classic chicken soup recipe?

Tell me about meringue.
```
มาค้นหาสูตรอาหารกัน ไปที่หน้าค้นหาสูตรอาหาร แล้วลองค้นหาสัก 2-3 ครั้ง ประมาณนี้
```
Chili con carne

Chili, corn, rice

Lemon Meringue Pie

A dessert containing strawberries
```

15. ยินดีด้วย

คุณสร้างแอปพลิเคชันที่ใช้แอปพลิเคชัน Vertex AI Agent Builder แล้ว คุณได้สำรวจฟีเจอร์ Gemini Cloud Assist, Gemini Code Assist และฟีเจอร์ภาษาที่เป็นธรรมชาติไปยัง SQL ของผืนผ้าใบข้อมูลของ BigQuery แล้ว ยอดเยี่ยมมาก

ล้างข้อมูล

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

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

หากต้องการลบโปรเจ็กต์ ให้ทำดังนี้

gcloud projects delete $GOOGLE_CLOUD_PROJECT

คุณอาจต้องลบทรัพยากรที่ไม่จำเป็นออกจากดิสก์ CloudShell ด้วย ดังนี้

ลบไดเรกทอรีโปรเจ็กต์ Codelab โดยทำดังนี้
```
rm -rf ~/task-app
```
คำเตือน! การดำเนินการถัดไปนี้จะยกเลิกไม่ได้ หากต้องการลบทุกอย่างใน Cloud Shell เพื่อเพิ่มพื้นที่ว่าง คุณสามารถลบไดเรกทอรีหน้าแรกทั้งหมด โปรดตรวจสอบว่าคุณได้บันทึกข้อมูลทั้งหมดที่ต้องการเก็บไว้ไว้ที่อื่นแล้ว
```
sudo rm -rf $HOME
```