เกี่ยวกับ Codelab นี้
1 ภาพรวม
Codelab นี้จะสาธิตวิธีใช้ Gemini เพื่อสร้างแอปพลิเคชันไคลเอ็นต์ โดยเสริมจากแบ็กเอนด์ API ที่มีอยู่
สิ่งที่คุณจะได้เรียนรู้
ห้องทดลองนี้มีวัตถุประสงค์เพื่อแสดงการใช้ Gemini ร่วมกับแอปพลิเคชันที่มีอยู่ ในห้องทดลองนี้ คุณจะได้ศึกษาวิธีทำสิ่งต่อไปนี้
- ปรับใช้โซลูชัน Jump Start สำหรับการประมวลผลรูปภาพ AI/ML
- ใช้ Gemini เพื่อสำรวจแอปพลิเคชัน API
- ใช้ Gemini เพื่อสร้างไคลเอ็นต์สำหรับแอปพลิเคชัน API
ตั้งค่า - สร้างโปรเจ็กต์ใหม่
คุณอาจไม่สามารถทำให้โซลูชันนี้ใช้งานได้อย่างถูกต้อง ทั้งนี้ขึ้นอยู่กับนโยบายขององค์กร
คำแนะนำ: ใช้บัญชีที่คุณมีสิทธิ์โดยสมบูรณ์ (เช่น บัญชีส่วนตัว) แทนที่จะใช้บัญชีของบริษัทหรือโรงเรียน
หมายเหตุ: หากเพิ่งสร้างโปรเจ็กต์ที่คุณมีสิทธิ์โดยสมบูรณ์และเปิดใช้ Gemini API ในโปรเจ็กต์นั้นอยู่แล้ว คุณจะใช้โปรเจ็กต์นั้นต่อและข้ามขั้นตอนนี้ได้ เช่น หากเพิ่งทำ Codelab ของ Gemini เสร็จไปเมื่อเร็วๆ นี้ ก็ข้ามขั้นตอนนี้ได้
- ไปที่คอนโซล Google Cloud
- คลิกเมนูแบบเลื่อนลงของโปรเจ็กต์ปัจจุบัน
- คลิกโปรเจ็กต์ใหม่
- เพิ่มชื่อโปรเจ็กต์แล้วคลิกสร้าง
- คำแนะนำ: ใช้ชื่อโปรเจ็กต์ที่ไม่ซ้ำกันเพื่อให้
Project name
และProject ID
เป็นเดียวกัน
- คำแนะนำ: ใช้ชื่อโปรเจ็กต์ที่ไม่ซ้ำกันเพื่อให้
2 ปรับใช้โซลูชัน Jump Start
Jump Start Solutions คือเทมเพลตโซลูชันที่สร้างไว้ล่วงหน้าจาก Google Cloud ห้องทดลองนี้ใช้โซลูชันเริ่มต้นอย่างรวดเร็วเพื่อแสดงให้เห็นว่า Gemini จะช่วยปรับปรุงแอปพลิเคชันที่มีอยู่แล้วได้อย่างไร
- ไปที่หน้ารายละเอียดโซลูชันการเริ่มต้นการประมวลผลรูปภาพ AI/ML
- คลิกเมนู 3 ขีด
- ในแท็บผลิตภัณฑ์และ เมนูย่อย ให้คลิก Jump Start Solutions
- คลิกการประมวลผลรูปภาพ AI/ML บน Cloud Functions
- คลิกทำให้ใช้งานได้
- หากโปรเจ็กต์ไม่ได้เปิดใช้การเรียกเก็บเงิน ให้เปิดใช้การเรียกเก็บเงิน
- ยืนยันชื่อโปรเจ็กต์แล้วคลิกดำเนินการต่อ
- เลือก
us-central1 (Iowa)
เป็นภูมิภาค - หากได้รับแจ้งสำหรับอินพุตอื่น ให้ยอมรับค่าเริ่มต้น
- คลิกทำให้ใช้งานได้
- การดำเนินการนี้อาจใช้เวลาสูงสุด 15 นาที
- คุณไม่จำเป็นต้องทำการเปลี่ยนแปลงใดๆ แต่คุณสามารถสำรวจการใช้งานโซลูชัน Jump Start ได้
การแก้ปัญหา
- ปัญหา: คุณเห็นข้อผิดพลาดที่ระบุว่า
Partial deployment.
ไหม- วิธีแก้ไข: ขออภัย ซึ่งหมายความว่าคุณควรลบการติดตั้งใช้งานและเริ่มต้นใหม่ โดยควรมีปุ่มที่ระบุว่าลบการทำให้ใช้งานได้ คลิกปุ่มดังกล่าวและทำให้โซลูชันเริ่มต้น Jump Start ใช้งานได้อีกครั้ง
3 เปิดใช้ Gemini
ตั้งค่าสภาพแวดล้อมการแก้ไขโค้ดและเปิดใช้ Gemini
- ไปที่ Cloud Shell Editor
- กลับไปที่คอนโซล Google Cloud
- พิมพ์
Cloud Shell Editor
ในแถบค้นหา แล้วคลิก Cloud Shell Editor จากเมนูแบบเลื่อนลง - คลิกลองใช้เครื่องมือแก้ไขใหม่ หากคุณใช้เครื่องมือแก้ไขเดิม
- หมายเหตุ: หากไม่เห็นปุ่มลองใช้เครื่องมือแก้ไขใหม่ อาจเป็นไปได้ว่าคุณกำลังใช้เครื่องมือแก้ไขใหม่อยู่ เครื่องมือแก้ไขเดิมจะยังทำงานได้ แต่มุมมองจะแตกต่างออกไปเล็กน้อย
- คลิกไอคอนเปิดในหน้าต่างใหม่
- หากได้รับข้อความแจ้ง ให้เข้าสู่ระบบหรือให้สิทธิ์บัญชีของคุณ
- คุณอาจได้รับแจ้งให้อนุญาตบัญชีของคุณหลายครั้งในระหว่างห้องทดลองนี้ เมื่อระบบขอ ให้เลือกให้สิทธิ์ทุกครั้ง ทั้งนี้ขึ้นอยู่กับการตั้งค่าของคุณ
- คลิกปุ่ม Cloud Code - Sign inในแถบสถานะด้านล่างตามที่แสดง ให้สิทธิ์ปลั๊กอินตามคำแนะนำ
- หากได้รับข้อความแจ้ง ให้คลิกเลือกโปรเจ็กต์ Google Cloud แล้วเลือกโปรเจ็กต์ที่คุณใช้
- เปิดใช้ Gemini
- คลิก Cloud Code
- หมายเหตุ: อาจใช้เวลา 1 หรือ 2 ขั้นตอน ทั้งนี้ขึ้นอยู่กับขนาดหน้าจอของคุณ
- หมายเหตุ: อาจใช้เวลา 1 หรือ 2 ขั้นตอน ทั้งนี้ขึ้นอยู่กับขนาดหน้าจอของคุณ
- คลิกเปลี่ยนการตั้งค่าในส่วนความช่วยเหลือและความคิดเห็น
- ประเภท
Gemini: Enable
- เลือกช่องทำเครื่องหมาย (หากยังไม่ได้เลือกไว้)
- โหลด IDE ซ้ำ
- การดำเนินการนี้จะเปิดใช้ Gemini ใน Cloud Code และแถบสถานะ Gemini จะปรากฏใน IDE ของคุณ
- คลิก Cloud Code
- คลิกปุ่ม Gemini ที่มุมขวาล่างตามที่แสดง แล้วเลือกโปรเจ็กต์ Google Cloud ที่ถูกต้อง
- หากคุณเห็นข้อผิดพลาดว่า
Gemini has not been enabled for your selected project
คลิกเปิดใช้ Gemini API
- หากคุณเห็นข้อผิดพลาดว่า
- ยืนยันว่าคุณเห็นโปรเจ็กต์ Google Cloud ที่ถูกต้องทางด้านซ้าย (คุณจะเห็นชื่อโปรเจ็กต์ของคุณ) และเปิดใช้ Gemini ทางด้านขวาในแถบสถานะดังที่แสดงด้านล่าง
4 ดาวน์โหลดโค้ด Cloud Function
ดาวน์โหลดโค้ดและใช้ Gemini เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับ Jump Start Solutions และโค้ดที่คุณทำให้ใช้งานได้
- หากคุณออกไปแล้ว ให้คลิก Cloud Code
- คลิก Cloud Functions
- หากเห็นปุ่มเลือกโปรเจ็กต์ ให้คลิกปุ่มโปรเจ็กต์ แล้วเลือกโปรเจ็กต์ที่ใช้งานอยู่
- คลิกฟังก์ชัน annotate-http
- คลิกไอคอนดาวน์โหลดไปยังพื้นที่ทำงานใหม่
- ใช้ annotate-http-1 เป็นชื่อพื้นที่ทำงาน (ควรเป็นค่าเริ่มต้น) และคลิกตกลง
- เปิดไฟล์
main.py
- คลิกไอคอนนักสำรวจ
- คลิกไฟล์
main.py
เพื่อเปิด
- คลิกไอคอนนักสำรวจ
- คลิกไอคอน Gemini Chat
- หมายเหตุ: อาจใช้เวลา 1 หรือ 2 ขั้นตอน ทั้งนี้ขึ้นอยู่กับขนาดหน้าจอของคุณ
- หมายเหตุ: อาจใช้เวลา 1 หรือ 2 ขั้นตอน ทั้งนี้ขึ้นอยู่กับขนาดหน้าจอของคุณ
- ลองถามคำถาม Gemini ป้อนพรอมต์ เช่น
What is a Jump Start Solution in Google Cloud?
Explain this code.
กำลังรีเซ็ต Gemini Chat
พรอมต์จะส่งผลต่อพรอมต์ในอนาคต เช่น หากพิมพ์รหัสหรือภูมิภาคของโปรเจ็กต์ผิด พรอมต์และคำตอบในอนาคตจะยังคงมีผลซึ่งส่งผลเสียต่อประสบการณ์การใช้งานของคุณ หากคุณพิมพ์ผิดหรือต้องการล้างประวัติด้วยเหตุผลอื่น คุณสามารถใช้ไอคอนถังขยะเพื่อรีเซ็ตแชท
5 การเรียกใช้ปลายทาง Cloud Function ที่มีอยู่
สำรวจโค้ดและเรียกใช้ปลายทางที่คุณทำให้ใช้งานได้ใน Jump Start Solution
- ป้อนข้อความแจ้ง:
- สำคัญ แทนที่
my-project-with-duet
ในพรอมต์ต่อไปนี้ด้วยรหัสโปรเจ็กต์ The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
- คุณควรได้รับการตอบกลับที่มีคำสั่ง curl เช่นนี้:
curl -X POST \
-H "Authorization: Bearer $(gcloud auth print-access-token)" \
... - คัดลอกคำสั่ง curl นี้เพื่อใช้ในขั้นตอนถัดไป
- สำคัญ แทนที่
- ทดสอบคำสั่งในเทอร์มินัลใหม่
- คลิกเมนู 3 ขีด
- คลิก Terminal
- คลิกเทอร์มินัลใหม่
- วางคำสั่ง curl จากขั้นตอนก่อนหน้าลงในเทอร์มินัลแล้วกด
Enter
เพื่อเรียกใช้คำสั่ง - คุณควรได้รับการตอบกลับที่ขึ้นต้นว่า
{
"labelAnnotations": [
{
"mid": "/m/0csby",
"description": "Cloud",
"score": 0.97885925,
"topicality": 0.97885925,
...
- (ไม่บังคับ) ดำเนินการนี้กับรูปภาพอื่นจากอินเทอร์เน็ตสาธารณะโดยแจ้งให้ Duet ด้อยข้อมูลดังนี้
Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg
การแก้ปัญหา
หมายเหตุเกี่ยวกับความไม่กําหนด: Gemini และผลิตภัณฑ์อื่นๆ ที่ขับเคลื่อนโดยโมเดลภาษาขนาดใหญ่ (LLM) นั้นไม่มีการกำหนดตายตัว ซึ่งหมายความว่าหากได้รับอินพุตเดียวกัน คุณอาจได้รับเอาต์พุตที่แตกต่างกัน แม้ว่าจะทำตามขั้นตอนอย่างสมบูรณ์แล้ว แต่คุณอาจยังไม่ได้รับคำสั่งที่ใช้งานได้ ขั้นตอนการแก้ปัญหาเหล่านี้น่าจะช่วยแก้ไขปัญหาเหล่านั้นได้
คำสั่ง curl ที่สร้างขึ้นควรมีลักษณะดังนี้
curl -X POST \
-H "Authorization: Bearer $(gcloud auth print-access-token)" \
-H "Content-Type: application/json" \
-d '{
"image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
"features": "LABEL_DETECTION"
}' \
"https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"
Gemini กำลังใช้ TEST_IMAGE
ในไฟล์ main.py
ซึ่งเป็นรูปภาพหอไอเฟล
หากคำสั่ง curl ไม่ทำงานสำหรับคุณ โปรดตรวจสอบสิ่งต่อไปนี้
- ปัญหา: ปลายทางของ URL มี
.a.run.app
ไหม- วิธีแก้ไข: Duet อาจคิดว่าคุณกำลังทำให้ใช้งานได้กับ Cloud Run แทนที่
my-project-with-duet
ด้วยรหัสโปรเจ็กต์ในhttps://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
เพื่อรับปลายทาง Cloud Functions ที่ถูกต้องและใช้รหัสดังกล่าวสำหรับคำสั่ง curl
- วิธีแก้ไข: Duet อาจคิดว่าคุณกำลังทำให้ใช้งานได้กับ Cloud Run แทนที่
- ปัญหา: ปลายทางของ URL มี
my-project-with-duet
ไหม- วิธีแก้ไข: ใส่รหัสโปรเจ็กต์แทน
my-project-with-duet
- วิธีแก้ไข: ใส่รหัสโปรเจ็กต์แทน
- ปัญหา: ปลายทางของ URL ไม่มี
us-central1
ใช่ไหม- วิธีแก้ไข: ตรวจสอบว่า URL ขึ้นต้นด้วย
us-central1
เช่นhttps://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
ด้วยรหัสโปรเจ็กต์
- วิธีแก้ไข: ตรวจสอบว่า URL ขึ้นต้นด้วย
- ปัญหา: บางครั้งปลายทางที่สร้างขึ้นจะมีลักษณะเป็น
cloudfunctions.net/annotate-http
หรือcloudfunctions.net/annotate
ทั้งนี้ขึ้นอยู่กับพรอมต์ที่ใช้ ปลายทาง URL ไม่มี/annotate-http/annotate
ที่ส่วนท้ายใช่ไหม- วิธีแก้ไข: ตรวจสอบว่าปลายทาง URL ลงท้ายด้วยเส้นทางแอปพลิเคชัน API แบบเต็ม
cloudfunctions.net/annotate-http/annotate
- วิธีแก้ไข: ตรวจสอบว่าปลายทาง URL ลงท้ายด้วยเส้นทางแอปพลิเคชัน API แบบเต็ม
- ปัญหา: คำขอ cURL ใช้งานได้ แต่ไม่ได้รับข้อมูลกลับมามากนัก คำขอนี้มีฟีเจอร์ไหม
- วิธีแก้ไข: นี่ไม่ใช่ปัญหาหลัก หากดำเนินการต่อโดยไม่ทำการเปลี่ยนแปลงใดๆ ที่เหลือในห้องทดลองจะยังคงใช้ได้ หากต้องการข้อมูลเพิ่มเติมกลับมา คุณขอให้ Duet เพิ่มฟีเจอร์ต่างๆ ลงในคำขอ cURL ได้
- ปัญหา: คำตอบดูเหมือนจะไม่ถูกต้องหรือไม่มีบริบทเฉพาะโค้ด คุณกำลังใช้ Gemini Chat ภายใน Cloud Shell Editor ใช่ไหม
- วิธีแก้ปัญหา: ลองเปิดไฟล์
main.py
และไฮไลต์โค้ดที่เกี่ยวข้องกับพรอมต์ของคุณขณะใช้ Gemini Chat ภายใน Cloud Shell Editor ผู้ช่วย Gemini ทั่วทั้ง Google Cloud นั้นมีบริบทที่แตกต่างกัน ซึ่งจะนำมาสู่คำตอบที่แตกต่างกันไป
- วิธีแก้ปัญหา: ลองเปิดไฟล์
- ปัญหา: คำตอบพรอมต์ยังไม่ถูกต้องนัก
- วิธีแก้ไข: ลองใช้พรอมต์อื่นที่คุณให้ Gemini กำหนดทิศทางเพิ่มเติมเกี่ยวกับสิ่งที่คุณต้องการผลิต โปรดแทนที่
my-project-with-duet
ด้วยรหัสโปรเจ็กต์ มีตัวอย่างดังต่อไปนี้Give me the curl command for:
1- Cloud Function running in us-central1 and project my-project-with-duet
2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }
- วิธีแก้ไข: ลองใช้พรอมต์อื่นที่คุณให้ Gemini กำหนดทิศทางเพิ่มเติมเกี่ยวกับสิ่งที่คุณต้องการผลิต โปรดแทนที่
- ปัญหา: หลังจากขั้นตอนการแก้ปัญหาเหล่านี้ทั้งหมดแล้ว ระบบก็ยังไม่ทำงาน
- วิธีแก้ปัญหา: เนื่องจาก LLM มีลักษณะเฉพาะตัว จึงเป็นไปได้ว่า Duet จะสร้างคำตอบที่ใช้งานไม่ได้ ในกรณีนี้ ให้คัดลอกตัวอย่างคำสั่ง curl ด้านบน แล้วลองเรียกใช้ในเทอร์มินัล โปรดแทนที่
my-project-with-duet
ด้วยรหัสโปรเจ็กต์
- วิธีแก้ปัญหา: เนื่องจาก LLM มีลักษณะเฉพาะตัว จึงเป็นไปได้ว่า Duet จะสร้างคำตอบที่ใช้งานไม่ได้ ในกรณีนี้ ให้คัดลอกตัวอย่างคำสั่ง curl ด้านบน แล้วลองเรียกใช้ในเทอร์มินัล โปรดแทนที่
6 สร้างไคลเอ็นต์เว็บแอปพลิเคชันสำหรับ API
ใช้ Gemini เพื่อสร้างไฟล์ index.html
ที่เรียกใช้ปลายทาง Cloud Function ของ Jump Start Solution จากนั้นทำให้ไฟล์ index.html
ใช้งานได้ในโฮสติ้งของ Firebase เพื่อดูการทำงานของโค้ด
- สร้างโค้ดฝั่งไคลเอ็นต์
- กลับไปที่ช่องแชทของ Gemini แล้วป้อนพรอมต์ต่อไปนี้
Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
- คัดลอกไฟล์
index.html
ที่สร้างขึ้นในการตอบกลับ- หมายเหตุ: คุณต้องใช้โค้ดนี้ในภายหลัง ดังนั้นให้บันทึกรหัสนี้ไว้ที่ใดก็ได้เมื่อกังวลว่าอาจทำรหัสหาย
- ปิด
main.py
- กลับไปที่ช่องแชทของ Gemini แล้วป้อนพรอมต์ต่อไปนี้
- สร้างไดเรกทอรี
frontend
ใหม่- คุณถาม Gemini ได้ เช่น
What are the console commands to create and navigate to a new frontend directory?
- คุณควรเห็นผลลัพธ์ที่คล้ายกับ
mkdir frontend
และcd frontend
- ใช้ Cloud Shell Terminal เพื่อยืนยันว่าคุณยังอยู่ในไดเรกทอรี
annotate-http-1
และเรียกใช้คำสั่งเหล่านั้น:cd ~/annotate-http-1
mkdir frontend
cd frontend
- คุณถาม Gemini ได้ เช่น
- ยืนยันว่าคุณเข้าสู่ระบบโปรเจ็กต์ที่ถูกต้องในเทอร์มินัล Cloud Shell
- คุณถาม Gemini ได้ เช่น
What is the gcloud command to set my project?
- คุณควรเห็นผลลัพธ์ที่คล้ายกับ
gcloud config set project my-project-with-duet
- ยืนยันว่ารหัสโปรเจ็กต์ถูกต้อง แล้วเรียกใช้คำสั่งในเทอร์มินัล Cloud Shell
- คุณถาม Gemini ได้ เช่น
- เปิดใช้ Firebase
- ในแท็บใหม่ (เปิด Cloud Shell Editor ปัจจุบันค้างไว้) ไปที่ https://console.firebase.google.com/
- คลิกเพิ่มโครงการ
- พิมพ์รหัสโปรเจ็กต์และรอให้รหัสปรากฏในเมนูแบบเลื่อนลง
- คลิกรหัสโปรเจ็กต์
- คลิกต่อไป
- คลิกยืนยันแผน
- คลิกต่อไป
- ยกเลิกการเลือกเปิดใช้ Google Analytics สำหรับโปรเจ็กต์นี้
- Firebase ขอแนะนําให้ใช้ Google Analytics แต่จะไม่ใช้ในแอปพลิเคชันนี้
- คลิกต่อไป
- ปิดแท็บนี้และกลับไปที่ Cloud Shell Editor
- หมายเหตุ: ขั้นตอนเหล่านี้จำเป็นสำหรับผู้ใช้ที่ไม่เคยใช้ Firebase มาก่อนเท่านั้น แต่การดำเนินการนี้จะอนุญาตให้ทุกคนใช้เส้นทางเดียวกันได้ หากคุณทำแบบนี้อีกในอนาคต ก็ข้ามขั้นตอนนี้ได้
- เข้าสู่ระบบ Firebase ใน Cloud Shell
- เรียกใช้คำสั่ง
firebase login --no-localhost
ในเทอร์มินัล Cloud Shell Editor - เข้าสู่ URL ที่ระบุ
- คลิกใช่ ฉันเพิ่งเรียกใช้คำสั่งนี้
- คลิกใช่ นี่คือรหัสเซสชันของฉัน
- คลิกคัดลอก
- กลับไปที่เทอร์มินัลเครื่องมือแก้ไข Cloud Shell
- วางค่าที่คัดลอกลงในเทอร์มินัลที่มีข้อความว่า:
Enter authorization code:
- กด
Enter
- เรียกใช้คำสั่ง
- ทำให้เว็บไซต์ใหม่ใช้งานได้ในโฮสติ้งของ Firebase
- เริ่มต้นโปรเจ็กต์ Firebase ใหม่
- คุณถาม Gemini ได้ เช่น
What are the commands to initialize and deploy a new firebase application?
- คุณควรเห็นผลลัพธ์อย่างเช่น
firebase init
และfirebase deploy
พร้อมวิธีการ - เนื่องจาก Gemini อาจแนะนำได้หลายวิธีหากพิจารณาจากความต้องการของคุณ เราจึงขอมอบคำแนะนำที่เฉพาะเจาะจงให้คุณทำตามต่อไปนี้
firebase init
- ลูกศรลงไปยัง
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
- กดแถบ
Space
- กด
Enter
- กดแถบ
- ลูกศรลงไปยัง
Use an existing project
- กด
Enter
- กด
- หากเห็นรายการโปรเจ็กต์ ให้กดลูกศรลงไปยังโปรเจ็กต์ที่คุณใช้งานอยู่ในวันนี้
- กด
Enter
- กด
- หากระบบขอให้คุณ
Please input the ID of the Google Cloud Project you would like to add Firebase:
- พิมพ์รหัสโปรเจ็กต์
- กด
Enter
- สำหรับข้อความแจ้งที่เหลือทั้งหมด ให้กด
Enter
- ลูกศรลงไปยัง
firebase deploy
- คุณถาม Gemini ได้ เช่น
- เริ่มต้นโปรเจ็กต์ Firebase ใหม่
- ทำให้แอปพลิเคชันใช้งานได้อีกครั้งด้วยการเรียกใช้ปลายทาง API ฟังก์ชันระบบคลาวด์
- คำสั่งก่อนหน้าควรสร้างไดเรกทอรี
public
ด้วยไฟล์index.html
ภายในไดเรกทอรีfrontend
ที่คุณสร้างไว้ก่อนหน้านี้ คุณควรทำการเปลี่ยนแปลงไฟล์~/annotate-http-1/frontend/public/index.html
ดังต่อไปนี้ - เปิดไฟล์
index.html
- คลิกไอคอนนักสำรวจ
- คลิกโฟลเดอร์
frontend
- คลิกโฟลเดอร์
public
- คลิกไฟล์
index.html
""
- คลิกไอคอนนักสำรวจ
- ล้างไฟล์
index.html
ที่มีอยู่ - วางโค้ดที่คุณคัดลอกไว้ก่อนหน้านี้ลงในไฟล์
index.html
- เรียกใช้
firebase deploy
เพื่อทำให้แอปพลิเคชันใหม่ใช้งานได้ - ไปที่ URL โฮสติ้งของ Firebase เพื่อดูว่าใช้งานได้หรือไม่
- หมายเหตุ: คุณอาจต้องรีเฟรชเว็บไซต์ใหม่ทั้งหมดเพื่อดูข้อมูลอัปเดต
- คำสั่งก่อนหน้าควรสร้างไดเรกทอรี
การแก้ปัญหา
ไฟล์ index.html
ควรมีลักษณะดังนี้
<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
<label for="image-uri">Image URI:</label>
<input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
<br>
<label for="features">Features:</label>
<select id="features" name="features">
<option value="LABEL_DETECTION">LABEL_DETECTION</option>
<option value="TEXT_DETECTION">TEXT_DETECTION</option>
<option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
</select>
<br>
<input type="submit" value="Annotate">
</form>
<div id="result"></div>
<script>
const form = document.getElementById('annotate-form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const imageUri = document.getElementById('image-uri').value;
const features = document.getElementById('features').value;
const data = {
image_uri: imageUri,
features: features,
};
fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then((response) => response.json())
.then((result) => {
const resultElement = document.getElementById('result');
resultElement.innerHTML = JSON.stringify(result, null, 2);
});
});
</script>
</body>
</html>
หากเว็บไซต์ไม่ทำงาน โปรดตรวจสอบสิ่งต่อไปนี้
- ปัญหา: 404 (ไม่พบ) URL ที่ใช้ในเมธอด
fetch
มีmy-project-with-duet
ด้วยไหม- วิธีแก้ไข: ใส่รหัสโปรเจ็กต์แทน
my-project-with-duet
- วิธีแก้ไข: ใส่รหัสโปรเจ็กต์แทน
- ปัญหา: 404 (ไม่พบ) URL ที่ใช้ในเมธอด
fetch
ไม่มี URL แบบเต็มใช่ไหม- วิธีแก้ไข: อย่าลืมใส่ URL แบบเต็มในเมธอด
fetch
ซึ่งควรมีลักษณะคล้ายกับhttps://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
- วิธีแก้ไข: อย่าลืมใส่ URL แบบเต็มในเมธอด
- ปัญหา: คำตอบพรอมต์ยังไม่ถูกต้องนัก
- วิธีแก้ไข: ลองใช้พรอมต์อื่นที่คุณให้ Gemini กำหนดทิศทางเพิ่มเติมเกี่ยวกับสิ่งที่คุณต้องการผลิต โปรดแทนที่
my-project-with-duet
ด้วยรหัสโปรเจ็กต์ ต่อไปนี้เป็นตัวอย่าง:Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
- วิธีแก้ไข: ลองใช้พรอมต์อื่นที่คุณให้ Gemini กำหนดทิศทางเพิ่มเติมเกี่ยวกับสิ่งที่คุณต้องการผลิต โปรดแทนที่
- ปัญหา: เว็บไซต์ของคุณใช้งานไม่ได้แล้ว แต่ใช้งานไม่ได้
- วิธีแก้ปัญหา: เนื่องจาก LLM มีลักษณะเฉพาะตัว จึงเป็นไปได้ว่า Duet จะสร้างคำตอบที่ใช้งานไม่ได้ ในกรณีนี้ ให้คัดลอกตัวอย่าง
index.html
ด้านบนและลองใช้firebase deploy
อีกครั้ง โปรดแทนที่my-project-with-duet
ด้วยรหัสโปรเจ็กต์
- วิธีแก้ปัญหา: เนื่องจาก LLM มีลักษณะเฉพาะตัว จึงเป็นไปได้ว่า Duet จะสร้างคำตอบที่ใช้งานไม่ได้ ในกรณีนี้ ให้คัดลอกตัวอย่าง
7 (ไม่บังคับ) เปิดการสํารวจ
- ใช้ Gemini และผู้ช่วยในเครื่องมือแก้ไขเพื่อเพิ่มรูปแบบ CSS ให้กับแอปพลิเคชัน และทำให้แอปพลิเคชันใช้งานได้อีกครั้งเมื่อเสร็จแล้ว หากคุณกำลังมองหาแรงบันดาลใจ ต่อไปนี้เป็นตัวอย่างคำสั่งที่คุณสามารถลองใช้ได้:
Make this index.html file use material design.
- สิ่งอื่นๆ ที่ควรลอง:
- เว็บไซต์ที่สร้างขึ้นควรใช้ได้กับรูปภาพ
http
สาธารณะทุกรูป ใช้งานร่วมกับ Duet เพื่อแสดงรูปภาพในหน้าเว็บ
- เว็บไซต์ที่สร้างขึ้นควรใช้ได้กับรูปภาพ
8 (ไม่บังคับ) ลบโปรเจ็กต์
หากต้องการหลีกเลี่ยงไม่ให้มีการเรียกเก็บเงินสำหรับทรัพยากรที่สร้างขึ้นในวันนี้ คุณสอบถาม Duet เกี่ยวกับวิธีดำเนินการดังกล่าวได้
- ป้อนข้อความแจ้ง:
How can I delete my project?
- คุณควรเห็นผลลัพธ์ที่คล้ายกับ
gcloud projects delete my-project-with-duet
- สำคัญ แทนที่
my-project-with-duet
ในคำสั่งก่อนหน้าด้วยรหัสโปรเจ็กต์
- เรียกใช้คำสั่ง
gcloud projects delete
เพื่อนำทรัพยากรทั้งหมดที่คุณสร้างขึ้นในวันนี้ออก