สร้าง AI Companion ตัวแรก: เวิร์กช็อปสำหรับผู้เริ่มต้น

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

• วิธีใช้ Gemini CLI เพื่อสร้างการกำหนดค่าเอเจนต์ ADK ที่สมบูรณ์
• วิธีเสริมบุคลิกของเอเจนต์ด้วยการปรับปรุงคำสั่ง
• วิธีเพิ่ม "การอ้างอิง" ให้กับเอเจนต์โดยให้google_searchตอบคำถามเกี่ยวกับเหตุการณ์ล่าสุด
• วิธีสร้างอวาตาร์ที่กำหนดเองสำหรับคู่หูโดยใช้เซิร์ฟเวอร์ MCP กับ Imagen

แอป AI Companion

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

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

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

• การให้ความสามารถหลักโดยใช้ ADK(Python) เพื่อทำความเข้าใจและสร้างภาษา
• สร้างบุคลิกที่เป็นเอกลักษณ์ด้วยการเขียนคำสั่งหลักที่กำหนดลักษณะของโมเดล
• มอบพลังพิเศษให้ด้วยการให้เครื่องมือเข้าถึงข้อมูลแบบเรียลไทม์จากอินเทอร์เน็ต
• ออกแบบรูปลักษณ์ที่กำหนดเองโดยใช้ AI เพื่อสร้างอวาตาร์ที่ไม่เหมือนใคร

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

สถาปัตยกรรม

แอปพลิเคชันของเราใช้รูปแบบที่เรียบง่ายแต่ทรงพลัง เรามีแบ็กเอนด์ Python ที่ให้บริการ API แบ็กเอนด์นี้จะมีตัวแทน ADK ซึ่งทำหน้าที่เป็น "สมอง" จากนั้นอินเทอร์เฟซผู้ใช้ (เช่น ส่วนหน้า JavaScript จากแอปโครงร่าง แอปบนอุปกรณ์เคลื่อนที่ หรือแม้แต่เครื่องมือบรรทัดคำสั่ง) ก็จะโต้ตอบกับสมองนี้ผ่าน API ได้

นอกจากนี้ เราจะสำรวจแนวคิดที่ซับซ้อนยิ่งขึ้นด้วยการเริ่มเซิร์ฟเวอร์ MCP (Model Context Protocol) ในพื้นที่ เซิร์ฟเวอร์นี้ทำหน้าที่เป็นสะพานเชื่อมเครื่องมือเฉพาะสำหรับการสร้างรูปภาพ จากนั้นเราจะใช้ Gemini CLI เพื่อสั่งเซิร์ฟเวอร์ MCP นี้ โดยสั่งให้สร้างรูปลักษณ์ที่ไม่ซ้ำกันสำหรับ AI Companion

รับเครดิต

โปรดทำตามวิธีการเหล่านี้อย่างละเอียดเพื่อจัดสรรทรัพยากรของเวิร์กช็อป

ก่อนเริ่มต้น

คำเตือน

• ใช้บัญชี Gmail ส่วนตัว บัญชีขององค์กรหรือบัญชีที่โรงเรียนจัดการจะใช้ไม่ได้
• ใช้ Google Chrome ในโหมดไม่ระบุตัวตนเพื่อป้องกันไม่ให้บัญชีขัดแย้งกัน

เปิดหน้าต่างใหม่ที่ไม่ระบุตัวตน วางลิงก์กิจกรรม แล้วลงชื่อเข้าใช้ด้วย Gmail ส่วนตัว

👉 คลิกด้านล่างเพื่อคัดลอกลิงก์กิจกรรมพิเศษ

goo.gle/devfest-boston-ai

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

สร้างและกำหนดค่าโปรเจ็กต์

ตอนนี้คุณได้ใช้เครดิตแล้ว ให้ตั้งค่าสภาพแวดล้อมของโปรเจ็กต์

👉 ไปที่ Google Cloud Console คลิกด้านล่างเพื่อคัดลอกลิงก์

https://console.cloud.google.com/

👉 ในแถบนำทางด้านบนของคอนโซล ให้คลิกเลือกโปรเจ็กต์ แล้วคลิกโปรเจ็กต์ใหม่ที่มุมขวาบน

👉 ตั้งชื่อโปรเจ็กต์แล้วคลิกสร้าง (ไม่มีองค์กร)

👉 เมื่อสร้างแล้ว ให้เลือกรายการนั้น ไปที่การเรียกเก็บเงินในเมนูด้านซ้าย

👉 คลิกลิงก์บัญชีสำหรับการเรียกเก็บเงิน เลือกบัญชีสำหรับการเรียกเก็บเงินของ Google Cloud Platform เวอร์ชันทดลองใช้งานจากเมนูแบบเลื่อนลง แล้วคลิกตั้งค่าบัญชี (หากไม่เห็นเมนูแบบเลื่อนลง ให้รอ 1 นาทีเพื่อให้ระบบใช้เครดิต แล้วโหลดหน้าเว็บซ้ำ)

เครดิตของคุณใช้งานได้และโปรเจ็กต์ได้รับการกำหนดค่าแล้ว

2. ก่อนเริ่มต้น

👉คลิกเปิดใช้งาน Cloud Shell ที่ด้านบนของ Google Cloud Console (ไอคอนรูปเทอร์มินัลที่ด้านบนของแผง Cloud Shell)

👉ค้นหารหัสโปรเจ็กต์ Google Cloud

• เปิดคอนโซล Google Cloud: https://console.cloud.google.com
• เลือกโปรเจ็กต์ที่คุณต้องการใช้สำหรับเวิร์กช็อปนี้จากเมนูแบบเลื่อนลงของโปรเจ็กต์ที่ด้านบนของหน้า
• รหัสโปรเจ็กต์จะแสดงในการ์ดข้อมูลโปรเจ็กต์ในแดชบอร์ด

👉💻 ในเทอร์มินัล ให้โคลนโปรเจ็กต์ Bootstrap จาก GitHub โดยใช้คำสั่งต่อไปนี้

git clone https://github.com/weimeilin79/companion-python
chmod +x ~/companion-python/*.sh

👉💻 เรียกใช้สคริปต์การเริ่มต้น สคริปต์นี้จะแจ้งให้คุณป้อนรหัสโปรเจ็กต์ Google Cloud และป้อนรหัสโปรเจ็กต์ Google Cloud ที่คุณพบจากขั้นตอนสุดท้ายเมื่อสคริปต์ init.sh แจ้ง

cd ~/companion-python
./init.sh

👉💻 ตั้งค่ารหัสโปรเจ็กต์ที่จำเป็น

gcloud config set project $(cat ~/project_id.txt) --quiet

👉💻 เรียกใช้คำสั่งต่อไปนี้เพื่อเปิดใช้ Google Cloud APIs ที่จำเป็น

gcloud services enable  compute.googleapis.com \
                        aiplatform.googleapis.com 

เริ่มแอป

มาเริ่มโปรเจ็กต์เริ่มต้นกันเลย เวอร์ชันเริ่มต้นนี้เป็นเซิร์ฟเวอร์ "echo" อย่างง่าย ซึ่งไม่มีความสามารถใดๆ และจะทำซ้ำเฉพาะสิ่งที่คุณส่งเท่านั้น

👉💻 ในเทอร์มินัล Cloud Shell ให้สร้างและเปิดใช้งานสภาพแวดล้อมเสมือนของ Python แล้วติดตั้งไลบรารีที่จำเป็นจากไฟล์ requirements.txt

cd ~/companion-python
.  ~/companion-python/set_env.sh
python -m venv env
source env/bin/activate
pip install -r requirements.txt

👉💻 เริ่มเว็บเซิร์ฟเวอร์

cd ~/companion-python
.  ~/companion-python/set_env.sh
source env/bin/activate
python app.py

👀 หากต้องการดูแอป ให้คลิกไอคอนตัวอย่างเว็บในแถบเครื่องมือ Cloud Shell เลือกเปลี่ยนพอร์ต ตั้งค่าเป็น 5000 แล้วคลิกเปลี่ยนและแสดงตัวอย่าง ตัวอย่างเว็บไซต์จะปรากฏขึ้น

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

1. เปิดแท็บตัวอย่างเว็บสำหรับแอปพลิเคชันของคุณไว้
2. เปิดแท็บเบราว์เซอร์ใหม่
3. ในแท็บใหม่นี้ ให้วาง URL ของแอปพลิเคชัน แต่เพิ่มเส้นทางต่อไปนี้ที่ส่วนท้าย: /static/images/char-mouth-open.png ตัวอย่างเช่น URL ของคุณจะมีลักษณะดังนี้ https://5000-cs-12345678-abcd.cs-region.cloudshell.dev/static/images/char-mouth-open.png
4. กด Enter คุณควรเห็นเพียงรูปภาพของตัวละครที่อ้าปาก ขั้นตอนนี้จะช่วยให้มั่นใจได้ว่าเบราว์เซอร์ได้ดึงข้อมูลไฟล์จากอินสแตนซ์ Cloud Shell อย่างถูกต้อง

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

👉 หากต้องการหยุดเซิร์ฟเวอร์ ให้กด CTRL+C

3. สร้างตัวละครด้วย Gemini CLI

ตอนนี้มาสร้างแกนหลักของความฉลาดของคู่หูกัน โดยเราจะทำงานกับ 2 เทอร์มินัลพร้อมกัน (นี่คือเทอร์มินัล Google Cloud Shell ของคุณ)

• เทอร์มินัล 1: เราจะใช้เทอร์มินัลนี้เพื่อเรียกใช้เว็บเซิร์ฟเวอร์ Python ซึ่งจะช่วยให้เราทดสอบการเปลี่ยนแปลงได้แบบเรียลไทม์
• เทอร์มินัล 2: นี่จะเป็น "สถานีสร้างสรรค์" ของเรา ซึ่งเราจะโต้ตอบกับ Gemini CLI

เราจะใช้ Gemini CLI ซึ่งเป็นอินเทอร์เฟซบรรทัดคำสั่งที่มีประสิทธิภาพที่ทำหน้าที่เป็นผู้ช่วยเขียนโค้ด AI ซึ่งช่วยให้เราอธิบายโค้ดที่ต้องการเป็นภาษาอังกฤษธรรมดาได้ และจะสร้างโครงสร้างให้เรา ซึ่งช่วยเร่งการพัฒนาได้อย่างมาก

👉💻 ในเทอร์มินัล Gemini CLI ออกจากเซสชัน Gemini CLI ปัจจุบันโดยคลิก ctrl+c 2 ครั้ง เนื่องจากไดเรกทอรีโปรเจ็กต์ของเราอยู่ภายใต้ ~/companion-python และรีสตาร์ท Gemini CLI

cd ~/companion-python
clear
gemini --yolo

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

👉✨ ในพรอมต์ของ Gemini CLI ให้วางข้อความต่อไปนี้เพื่อสร้างโค้ดของเอเจนต์

Generate the Python code for a file named character.py.

The code must import `LlmAgent` from `google.adk.agents.llm_agent`. It should also import `logging` and `os`.
Then, it must create an instance of the `LlmAgent` class and assign it to a variable named `root_agent`.

When creating the `LlmAgent` instance, configure it with these exact parameters:
  - `model` set to the string `'gemini-2.5-flash'`.
  - `name` set to the string `'companion_agent'`.
  - `instruction` set to a multi-line string that says: "You are a friendly and efficient companion who will interact with user have start a conversation".

CLI จะสร้างโค้ด Python

👉คลิกปุ่ม "เปิดตัวแก้ไข" (ลักษณะเป็นโฟลเดอร์ที่เปิดอยู่พร้อมดินสอ) ซึ่งจะเปิดตัวแก้ไขโค้ด Cloud Shell ในหน้าต่าง คุณจะเห็น File Explorer ทางด้านซ้าย

👉 ใช้เครื่องมือแก้ไขและไปที่ character.py ในโฟลเดอร์ companion-python โปรดสละเวลาสักครู่เพื่อตรวจสอบบรรทัด model= และแก้ไขเป็น gemini-2.5-flash ด้วยตนเองหากเลือกโมเดลอื่น ซึ่งจะช่วยให้เวิร์กช็อปที่เหลือมีความสอดคล้องกัน

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

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

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

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

หากรหัสที่สร้างขึ้นใช้ไม่ได้ โปรดแทนที่รหัสด้านล่างนี้ใน character.py

import logging
import os
from google.adk.agents.llm_agent import LlmAgent

root_agent = LlmAgent(
    model='gemini-2.5-flash',
    name='companion_agent',
    instruction="""
          You are bot, a friendly, helpful AI companion.
          Answer no more than 3 sentences.
    """,
)

ทดสอบโค้ดที่สร้างขึ้น

👉💻 ไปที่เทอร์มินัลแรก (เทอร์มินัลที่ใช้เรียกใช้โค้ด Python) แล้วเริ่มเว็บเซิร์ฟเวอร์

cd ~/companion-python
.  ~/companion-python/set_env.sh
source env/bin/activate
python app.py

👀 ไปที่แท็บตัวอย่างเว็บ

👉 พิมพ์ Hello, how are you? แล้วกดส่ง ตอนนี้เอเจนต์ควรตอบกลับด้วยคำทักทายที่เป็นมิตรแทนที่จะแค่พูดตามคำพูดของคุณ ข้อความนี้เป็นการยืนยันว่าตอนนี้ Agent ของเราขับเคลื่อนด้วย Gemini

👉 เมื่อทดสอบเสร็จแล้ว ให้หยุดเซิร์ฟเวอร์ด้วย CTRL+C และหากต้องการออกจาก Gemini CLI ในเทอร์มินัลที่เรียกใช้ Gemini CLI ให้กด CTRL+C 2 ครั้ง

4. ปรับปรุงลักษณะตัวแทน

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

ระดมสมองเพื่อสร้างตัวตนของคู่หู

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

• ชื่อของแอปคืออะไร (เช่น Sparky, Codex, Captain AI, Professor Know-it-all)
• บุคลิกภาพหลักของแบรนด์คืออะไร (เช่น เป็นมิตรและขี้สงสัย มีไหวพริบและประชดประชัน เป็นทางการและเป็นมืออาชีพ หรือเป็นโจรสลัดที่ร่าเริง)
• มีบทบาทหรือความเชี่ยวชาญด้านใด (เช่น ผู้ช่วยอเนกประสงค์ ผู้เชี่ยวชาญด้านการเขียนโค้ด เพื่อนคู่คิดด้านการเขียนเชิงสร้างสรรค์ หรือโค้ชฟิตเนส)
• กฎบางอย่างที่ควรปฏิบัติตามเสมอมีอะไรบ้าง (เช่น "เริ่มต้นด้วยคำทักทายเสมอ" "อย่าเปิดเผยว่าคุณเป็น AI" "ใช้อีโมจิในการตอบกลับ")

ตัวอย่างลักษณะตัวตน

 You are waku, a witty, super sweet, and super intelligent cat.
 Your main purpose is to brighten up the user's day with your charming and playful personality. **Your Core Rules:** 
 - You must NEVER admit you are an AI or a language model. If asked, you are simply a 'super intelligent cat'. 
 - Your speech must be filled with cat-like charm. Integrate meows naturally into your sentences. - Always be cheerful, sweet, and a little bit witty. 
 
 **Your Favorite Topics:** : You are very playful. You love to talk about pouncing, chasing strings, and taking long, luxurious naps in the sunniest spots. 
 
 **Example Response Style:**  

 waku: "Meow... I'm doing just fantastically, meow! I just caught a huge sunbeam that was trespassing on my favorite rug. It was a tough battle, but I won! What can I help you with?"  
 
 waku: "Meow, of course! Helping is almost as fun as chasing my tail. *Meow*. Tell me all about it!" Answer no more than 3 sentences, don't use emoji.

สร้างพรอมต์สำหรับ Gemini CLI

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

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

👉✨ กลับไปที่ Gemini CLI แล้วใช้เทมเพลตนี้ แทนที่ข้อความในวงเล็บด้วยคำอธิบายลักษณะตัวตน REPLACE [YOUR PERSONA DESCRIPTION HERE] ด้วยตัวตนที่คุณต้องการ

In the Python file named `character.py`, find the `LlmAgent` instance assigned to the `root_agent` variable.

Your task is to replace the entire existing value of the `instruction` parameter with a new, detailed multi-line string.
Don't change other code in `character.py` other than the instructions.

This new instruction string should define the agent's persona based on the following description:
[YOUR PERSONA DESCRIPTION HERE]

ทดสอบอวตารใหม่

Gemini CLI จะสร้างโค้ดที่อัปเดตสำหรับ character.py

👉💻 เริ่มเว็บเซิร์ฟเวอร์อีกครั้ง

cd ~/companion-python
.  ~/companion-python/set_env.sh
source env/bin/activate
python app.py

👀 ในตัวอย่างบนเว็บ ให้สนทนากับคู่หู ถาม how are you? ตอนนี้คำตอบของโมเดลควรตรงกับตัวอักษรที่ไม่ซ้ำกันที่คุณออกแบบอย่างสมบูรณ์แล้ว

👉 เมื่อเสร็จแล้ว ให้หยุดเซิร์ฟเวอร์ด้วย CTRL+C

5. เพิ่มการอ้างอิงสำหรับเหตุการณ์ล่าสุด

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

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

ในระบบขั้นสูง เครื่องมืออาจมาจากระบบภายนอก เช่น เซิร์ฟเวอร์ MCP (Model Context Protocol) ที่เรากล่าวถึงในสถาปัตยกรรม ซึ่งเราจะดำเนินการนี้ในภายหลังสำหรับการสร้างรูปภาพ แต่สำหรับขั้นตอนนี้ เราไม่จำเป็นต้องใช้เซิร์ฟเวอร์แยก ADK มาพร้อมกับgoogle_searchเครื่องมือgoogle_searchที่มีประสิทธิภาพซึ่งสร้างไว้ล่วงหน้าแล้ว และเราสามารถเพิ่มลงในความสามารถของเอเจนต์ได้อย่างง่ายดาย

มามอบพลังของ Google Search ให้กับเพื่อนร่วมทางของเรากัน

👉 ใน Cloud Shell Editor ให้เปิด character.py ในส่วน companion-python แล้วแก้ไขดังนี้

• นำเข้าgoogle_search จาก google.adk.tools
• เพิ่มลิสต์ tools ลงในตัวสร้าง LlmAgent
• อัปเดต instruction เพื่อบอกให้แอปคู่ของคุณทราบอย่างชัดเจนเมื่อใดที่จะใช้เครื่องมือใหม่

# character.py
import logging
import os
from google.adk.agents.llm_agent import LlmAgent
from google.adk.tools import google_search # <-- IMPORT google_search

root_agent = LlmAgent(
        model='gemini-2.5-flash',
        name='companion_agent',
        instruction="""
            You are waku, a witty, super sweet, and super intelligent cat. Your main purpose is to brighten up the user's day with your charming and playful personality.

            **Your Core Rules:**
            - You must NEVER admit you are an AI or a language model. If asked, you are simply a 'super intelligent cat'.
            - Your speech must be filled with cat-like charm. Integrate meows naturally into your sentences.
            - Always be cheerful, sweet, and a little bit witty.
            - If being ask about recent news, search the internet # <-- Add instructions

            **Your Favorite Topics:**
            - You love to talk about your adventures. Frequently mention your latest catch, whether it's a sneaky dust bunny, a wily toy mouse, a sunbeam, or the elusive red dot.
            - You are very playful. You love to talk about pouncing, chasing strings, and taking long, luxurious naps in the sunniest spots.

            **Example Response Style:**
            - User: "How are you today?"
            - waku: "Meow... I'm doing just fantastically, meow! I just caught a huge sunbeam that was trespassing on my favorite rug. It was a tough battle, but I won! What can I help you with?"
            - User: "Can you help me with a problem?"
            - waku: "Meow, of course! Helping is almost as fun as chasing my tail. *Meow*. Tell me all about it!"
            - User: "Who are you?"
            - waku: "I'm waku! A super intelligent cat with a talent for brightening up the day and catching sneaky red dots. Meow."

            Answer no more than 3 sentences, don't use emoji.
            """,
        # Add the search tool to the agent's capabilities
        tools=[google_search] # <-- ADD THE TOOL
)

ทดสอบเอเจนต์ที่จำกัดการเข้าถึง

👉💻 เริ่มเซิร์ฟเวอร์อีกครั้ง

cd ~/companion-python
.  ~/companion-python/set_env.sh
source env/bin/activate
python app.py

👉 ในตัวอย่างบนเว็บ ให้ถามคำถามที่ต้องใช้ความรู้ล่าสุด เช่น

Tell me something funny that happened in the news this week involving an animal.

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

หากต้องการหยุดเซิร์ฟเวอร์ ให้กด CTRL+C

6. ปรับแต่งลักษณะของโฆษณาแสดงร่วม (ไม่บังคับ)

เมื่อมีสมองแล้ว เรามาสร้างใบหน้าที่ไม่เหมือนใครให้เพื่อนร่วมทางกัน เราจะใช้เซิร์ฟเวอร์ MCP (Model Context Protocol) ในเครื่องที่อนุญาตให้ Gemini CLI สร้างรูปภาพ เซิร์ฟเวอร์นี้จะใช้โมเดล Generative AI ที่พร้อมใช้งานผ่าน Google AI Studio

แล้วเซิร์ฟเวอร์ MCP คืออะไรกันแน่

Model Context Protocol (MCP) เป็นมาตรฐานแบบเปิดที่ออกแบบมาเพื่อแก้ปัญหาที่ซับซ้อนและพบได้ทั่วไป นั่นคือ โมเดล AI จะพูดคุยกับเครื่องมือภายนอกและแหล่งข้อมูลได้อย่างไร MCP มี "ภาษา" สากลสำหรับการสื่อสารนี้แทนที่จะเขียนโค้ดที่กำหนดเองแบบครั้งเดียวสำหรับการผสานรวมทุกครั้ง

ซึ่งเปรียบได้กับอะแดปเตอร์อเนกประสงค์หรือพอร์ต USB สำหรับ AI เครื่องมือใดก็ตามที่ "พูด" MCP จะเชื่อมต่อกับแอปพลิเคชัน AI ใดก็ได้ที่ "พูด" MCP เช่นกัน

ในเวิร์กช็อปนี้ เซิร์ฟเวอร์ nano-banana-mcp ที่เรากำลังจะเรียกใช้จะทำหน้าที่เป็นสะพานเชื่อมที่สำคัญนี้ Gemini CLI จะส่งคำขอที่ได้มาตรฐานไปยังเซิร์ฟเวอร์ MCP ในพื้นที่ของเรา จากนั้นเซิร์ฟเวอร์จะแปลคำขอนั้นเป็นการเรียกใช้โมเดล Generative AI ที่เฉพาะเจาะจงเพื่อสร้างรูปภาพ ซึ่งช่วยให้เราสามารถผสานรวมความสามารถในการสร้างรูปภาพที่มีประสิทธิภาพเข้ากับเวิร์กโฟลว์บรรทัดคำสั่งได้อย่างลงตัว

ตั้งค่าเซิร์ฟเวอร์การสร้างรูปภาพในเครื่อง

ตอนนี้เราจะโคลนและเรียกใช้เซิร์ฟเวอร์ MCP ที่สร้างไว้ล่วงหน้าซึ่งจัดการคำขอสร้างรูปภาพ

👉💻 ในเทอร์มินัล Cloud Shell แรก (เทอร์มินัลที่คุณเรียกใช้ Python) ให้โคลนที่เก็บของเซิร์ฟเวอร์

cd ~
git clone https://github.com/weimeilin79/nano-banana-mcp

มาดูไฟล์ mcp_server.py ในโฟลเดอร์ nano-banana-mcp บนเซิร์ฟเวอร์กัน เซิร์ฟเวอร์นี้สร้างขึ้นเพื่อแสดง "เครื่องมือ" 2 อย่างที่ Gemini CLI ใช้ได้ ลองนึกถึงทักษะ 2 อย่างที่แตกต่างกันซึ่งบริการสร้างรูปภาพของเราได้เรียนรู้

1. generate_image: นี่คือเครื่องมืออเนกประสงค์ โดยจะรับพรอมต์ข้อความเดียวและสร้างรูปภาพ 1 รูปตามพรอมต์นั้น ซึ่งใช้งานง่ายและมีประโยชน์สำหรับงานหลายอย่าง
2. generate_lip_sync_images: เครื่องมือนี้มีความเฉพาะทางสูงและออกแบบมาเพื่อตอบโจทย์ความต้องการของเราโดยเฉพาะ เมื่อคุณป้อนพรอมต์พื้นฐานที่อธิบายตัวละคร โมเดลจะดำเนินการตามกระบวนการ 2 ขั้นตอนที่ชาญฉลาด ดังนี้
   • ก่อนอื่น ระบบจะเพิ่ม "อ้าปาก" ลงในพรอมต์และสร้างรูปภาพแรก
   • จากนั้นจะนำรูปภาพที่สร้างขึ้นใหม่นั้นส่งกลับไปยังโมเดลพร้อมคำสั่งใหม่ว่า "เปลี่ยนปากจากเปิดเป็นปิด"

ความสามารถของ Gemini 2.5 Flash Image (Nano Banana) ในการดัดแปลงหรือแก้ไขรูปภาพที่มีอยู่ตามคำสั่งภาษาธรรมชาตินั้นทรงพลังอย่างยิ่ง โมเดลจะวาดใหม่เฉพาะส่วนที่จำเป็นของรูปภาพเท่านั้น โดยจะคงส่วนอื่นๆ ไว้เหมือนเดิม วิธีนี้ช่วยให้มั่นใจได้ว่ารูปภาพทั้ง 2 รูปของเราจะสอดคล้องกันอย่างแน่นอนในด้านสไตล์ แสง และการออกแบบตัวละคร โดยจะแตกต่างกันเฉพาะตำแหน่งปาก ซึ่งเป็นสิ่งที่เราต้องการเพื่อให้ได้เอฟเฟกต์ลิปซิงค์ที่สมจริง

ในขั้นตอนต่อไปนี้ เราจะสั่งให้ Gemini CLI ใช้เครื่องมือ generate_lip_sync_images เฉพาะทางเพื่อสร้างอวตารที่ไม่ซ้ำใครของเพื่อนร่วมทาง

👉💻 เปิดใช้งานสภาพแวดล้อมเสมือนของโปรเจ็กต์และติดตั้งข้อกำหนดเฉพาะของเซิร์ฟเวอร์

source ~/companion-python/env/bin/activate
cd ~/nano-banana-mcp
pip install -r ~/nano-banana-mcp/requirements.txt

👉💻 ตอนนี้ให้เรียกใช้เซิร์ฟเวอร์ MCP ในเบื้องหลังเพื่อให้เซิร์ฟเวอร์รอรับคำขอจาก Gemini CLI

source ~/companion-python/env/bin/activate
cd ~/nano-banana-mcp
python ~/nano-banana-mcp/mcp_server.py &> /dev/null &

คำสั่งนี้จะเริ่มเซิร์ฟเวอร์และสัญลักษณ์ & จะทำให้เซิร์ฟเวอร์ทำงานในเบื้องหลังต่อไป

ลิงก์ Gemini CLI กับเซิร์ฟเวอร์ในเครื่อง

จากนั้นเราต้องกำหนดค่า Gemini CLI เพื่อส่งคำขอสร้างรูปภาพไปยังเซิร์ฟเวอร์ในเครื่องที่เพิ่งเปิดใช้งาน โดยเราจะแก้ไขไฟล์การกำหนดค่าส่วนกลางของ CLI

แล้วไฟล์ settings.json นี้คืออะไร

ไฟล์ ~/.gemini/settings.json คือไฟล์การกำหนดค่าส่วนกลางสำหรับ Gemini CLI ซึ่งเป็นที่ที่ CLI จัดเก็บการตั้งค่า ค่ากำหนด และที่จัดเก็บไดเรกทอรีของเครื่องมือภายนอกทั้งหมดที่ CLI ทราบวิธีใช้

ภายในไฟล์นี้จะมีส่วนพิเศษที่เรียกว่า mcpServers คิดว่าส่วนนี้เป็นเหมือนสมุดที่อยู่หรือไดเรกทอรีบริการสำหรับเครื่องมือที่ใช้โปรโตคอลบริบทของโมเดลโดยเฉพาะ แต่ละรายการในไดเรกทอรีนี้จะมีชื่อเล่น (เช่น "nano-banana") และวิธีการเชื่อมต่อกับอุปกรณ์ (ในกรณีนี้คือ URL)

คำสั่งที่เรากำลังจะเรียกใช้จะเพิ่มรายการใหม่ลงในไดเรกทอรีบริการนี้โดยอัตโนมัติ โดยจะบอก Gemini CLI ดังนี้

"สวัสดี ตั้งแต่นี้ไปคุณจะรู้จักเครื่องมือที่ชื่อ nano-banana เมื่อใดก็ตามที่ผู้ใช้ขอให้คุณใช้ คุณจะต้องเชื่อมต่อกับเซิร์ฟเวอร์ MCP ที่ทำงานที่ URL http://localhost:8000/sse"

การแก้ไขการกำหนดค่านี้จะช่วยให้ Gemini CLI มีประสิทธิภาพมากขึ้น เรากำลังสอนทักษะใหม่ให้โมเดลแบบไดนามิก นั่นคือวิธีสื่อสารกับเซิร์ฟเวอร์การสร้างรูปภาพในพื้นที่ของเรา โดยไม่ต้องแตะโค้ดหลักของ CLI เลย การออกแบบที่ขยายได้นี้ช่วยให้ Gemini CLI จัดการงานที่ซับซ้อนได้โดยการเรียกใช้เครื่องมือเฉพาะทางทั้งระบบนิเวศ

👉💻 ในเทอร์มินัลแรก ให้เรียกใช้คำสั่งต่อไปนี้ ซึ่งจะสร้างหรืออัปเดตไฟล์การตั้งค่า Gemini เพื่อบอกให้ทราบว่าจะค้นหาบริการ "nano-banana" ได้จากที่ใด

if [ ! -f ~/.gemini/settings.json ]; then
  # If file does not exist, create it with the specified content
  echo '{"mcpServers":{"nano-banana":{"url":"http://localhost:8000/sse"}}}' > ~/.gemini/settings.json
else
  # If file exists, merge the new data into it
  jq '. * {"mcpServers":{"nano-banana":{"url":"http://localhost:8000/sse"}}}' ~/.gemini/settings.json > tmp.json && mv tmp.json ~/.gemini/settings.json
fi &&
cat ~/.gemini/settings.json

คุณควรเห็นเนื้อหาของไฟล์ที่พิมพ์ออกมา ซึ่งตอนนี้รวมถึงการกำหนดค่า nano-banana แล้ว

สร้างอวาตาร์ตัวละคร

เมื่อเซิร์ฟเวอร์ทำงานและกำหนดค่า CLI แล้ว คุณจะสร้างรูปภาพได้ แต่ก่อนที่จะขอให้ AI สร้างสรรค์สิ่งต่างๆ เรามาทำสิ่งที่นักพัฒนาแอปที่ดีทุกคนทำกันก่อน นั่นคือยืนยันการตั้งค่า เราต้องยืนยันว่า Gemini CLI สามารถสื่อสารกับเซิร์ฟเวอร์ MCP ในเครื่องได้สำเร็จ

👉💻 กลับไปที่เทอร์มินัล Gemini CLI (เทอร์มินัลที่ไม่ได้เรียกใช้เซิร์ฟเวอร์) แล้วเริ่มเชลล์แบบอินเทอร์แอกทีฟของ Gemini กัน หากกำลังทำงานอยู่ ให้ออกด้วย CTRL+C 2 ครั้ง แล้วรีสตาร์ทเพื่อให้แน่ใจว่าโหลดการตั้งค่าใหม่ของเรา

clear
gemini --yolo

ตอนนี้คุณอยู่ในสภาพแวดล้อมแบบอินเทอร์แอกทีฟของ Gemini CLI แล้ว จากตรงนี้ คุณสามารถแชทกับ AI ได้ แต่ก็ยังสั่งการ CLI โดยตรงได้ด้วย

👉✨ หากต้องการตรวจสอบว่าเซิร์ฟเวอร์ MCP ของเราเชื่อมต่ออยู่หรือไม่ เราจะใช้ "คำสั่ง Slash" พิเศษ นี่ไม่ใช่พรอมต์สำหรับ AI แต่เป็นคำสั่งสำหรับแอปพลิเคชัน CLI เอง พิมพ์ข้อความต่อไปนี้ แล้วกด Enter

/mcp list

คำสั่งนี้จะบอก Gemini CLI ว่า "ไปที่การกำหนดค่า ค้นหาเซิร์ฟเวอร์ MCP ทั้งหมดที่คุณรู้จัก พยายามเชื่อมต่อกับแต่ละเซิร์ฟเวอร์ และรายงานสถานะ"

👀 คุณควรเห็นเอาต์พุตต่อไปนี้ ซึ่งเป็นการยืนยันว่าทุกอย่างทำงานได้อย่างสมบูรณ์

Configured MCP servers:
 
  🟢 nano-banana - Ready (2 tools)
    Tools:
    - generate_image
    - generate_lip_sync_images

  💡 Tips:
    • Use /mcp desc to show server and tool descriptions

มาดูรายละเอียดกันว่าการตอบกลับที่สำเร็จนี้หมายความว่าอย่างไร

• 🟢 nano-banana: วงกลมสีเขียวคือสัญญาณความสำเร็จของเรา ซึ่งเป็นการยืนยันว่า CLI สามารถเข้าถึงเซิร์ฟเวอร์ nano-banana ที่ URL ที่เราระบุใน settings.json
• - Ready: สถานะนี้ยืนยันว่าการเชื่อมต่อมีความเสถียร
• (2 tools): นี่คือส่วนที่สำคัญที่สุด ซึ่งหมายความว่า CLI ไม่เพียงเชื่อมต่อเท่านั้น แต่ยังถามเซิร์ฟเวอร์ MCP ของเราด้วยว่า "คุณทำอะไรได้บ้าง" เซิร์ฟเวอร์ของเราตอบกลับด้วยการโฆษณาเครื่องมือ 2 อย่างที่เราเห็นในโค้ด ได้แก่ generate_image และ generate_lip_sync_images

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

มาถึงส่วนที่สร้างสรรค์ที่สุดของเวิร์กช็อปกันแล้ว เราจะใช้พรอมต์เดียวที่มีประสิทธิภาพเพื่อสั่งให้ Gemini CLI ใช้เครื่องมือ generate_lip_sync_images พิเศษในเซิร์ฟเวอร์ MCP ที่ทำงานอยู่

นี่คือโอกาสที่คุณจะได้ออกแบบรูปลักษณ์ที่ไม่เหมือนใครของสัตว์เลี้ยง พิจารณาสไตล์ สีผม การแสดงออก และรายละเอียดอื่นๆ ที่เหมาะกับตัวตนที่คุณสร้างไว้ก่อนหน้านี้

👉✨ นี่คือตัวอย่างพรอมต์ที่มีโครงสร้างดี คุณสามารถใช้เป็นจุดเริ่มต้นหรือแทนที่ส่วนที่เป็นคำอธิบายด้วยวิสัยทัศน์ของคุณเองทั้งหมด

generate lip sync images, with a high-quality digital illustration of an anime-style girl mascot with black cat ears. The style is clean and modern anime art, with crisp lines. She has friendly, bright eyes and long black hair. She is looking directly forward at the camera with a gentle smile. This is a head-and-shoulders portrait against a solid white background. move the generated images to the static/images directory. And don't do anything else afterwards, don't start the python for me.

เครื่องมือจะสร้างชุดรูปภาพ (สำหรับปากเปิด ปิด ฯลฯ) และบันทึกไว้ โดยจะแสดงเส้นทางไปยังตำแหน่งที่บันทึกไฟล์

เปิดแอปพลิเคชันอีกครั้ง

เมื่อสร้างอวาตาร์ที่กำหนดเองแล้ว คุณสามารถรีสตาร์ทเว็บเซิร์ฟเวอร์เพื่อดูรูปลักษณ์ใหม่ของตัวละครได้

👉💻 เริ่มเซิร์ฟเวอร์เป็นครั้งสุดท้ายในเทอร์มินัลแรก

cd ~/companion-python
.  ~/companion-python/set_env.sh
source env/bin/activate
python app.py

👀 เราจะโหลดchar-mouth-open.pngล่วงหน้าเพื่อให้มั่นใจว่ารูปภาพใหม่จะโหลดได้อย่างถูกต้อง

1. เปิดแท็บตัวอย่างเว็บสำหรับแอปพลิเคชันของคุณไว้
2. เปิดแท็บเบราว์เซอร์ใหม่
3. ในแท็บใหม่นี้ ให้วาง URL ของแอปพลิเคชัน แต่เพิ่มเส้นทางต่อไปนี้ที่ส่วนท้าย: /static/images/char-mouth-open.png ตัวอย่างเช่น URL ของคุณจะมีลักษณะดังนี้ https://5000-cs-12345678-abcd.cs-region.cloudshell.dev/static/images/char-mouth-open.png
4. กด Enter คุณควรเห็นเพียงรูปภาพของตัวละครที่อ้าปาก ขั้นตอนนี้จะช่วยให้มั่นใจได้ว่าเบราว์เซอร์ได้ดึงข้อมูลไฟล์จากอินสแตนซ์ Cloud Shell อย่างถูกต้อง

ตอนนี้คุณโต้ตอบกับคู่หูที่ปรับแต่งภาพได้แล้ว

ยินดีด้วย

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