วิธีใช้ Gemini เพื่อสำรวจและปรับปรุงแอปพลิเคชันที่มีอยู่

1. ภาพรวม

Codelab นี้จะสาธิตวิธีใช้ Gemini เพื่อสร้างแอปพลิเคชันไคลเอ็นต์บนแบ็กเอนด์ API ที่มีอยู่

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

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

ติดตั้งใช้งานโซลูชันการเริ่มต้นใช้งานการประมวลผลรูปภาพด้วย AI/ML
ใช้ Gemini เพื่อสำรวจการใช้งาน API
ใช้ Gemini เพื่อสร้างไคลเอ็นต์สำหรับแอปพลิเคชัน API

การตั้งค่า - สร้างโปรเจ็กต์ใหม่

คุณอาจไม่มีสิทธิ์ติดตั้งใช้งานโซลูชันนี้อย่างถูกต้อง ทั้งนี้ขึ้นอยู่กับนโยบายขององค์กร

คำแนะนำ: ใช้บัญชีที่คุณมีสิทธิ์เต็ม (เช่น บัญชีส่วนตัว) แทนบัญชีบริษัทหรือโรงเรียน

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

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

2. ติดตั้งใช้งานโซลูชัน Jump Start

Jump Start Solutions คือเทมเพลตโซลูชันที่สร้างไว้ล่วงหน้าจาก Google Cloud แล็บนี้ใช้โซลูชัน Jump Start เพื่อสาธิตวิธีที่ Gemini ช่วยปรับปรุงแอปพลิเคชันที่มีอยู่แล้วได้

ไปที่หน้ารายละเอียดโซลูชันเริ่มต้นการประมวลผลรูปภาพด้วย AI/ML
- คลิกเมนู 3 ขีด
- ในเมนูย่อยผลิตภัณฑ์และโซลูชัน ให้คลิกโซลูชันเริ่มต้น
- คลิกการประมวลผลรูปภาพ AI/ML ใน Cloud Functions
คลิกทำให้ใช้งานได้
- หากโปรเจ็กต์ไม่ได้เปิดใช้การเรียกเก็บเงิน ให้เปิดใช้การเรียกเก็บเงิน
- ยืนยันชื่อโปรเจ็กต์ แล้วคลิกดำเนินการต่อ
- เลือก us-central1 (Iowa) เป็นภูมิภาค
- หากระบบแจ้งให้ป้อนข้อมูลอื่นๆ ให้ยอมรับค่าเริ่มต้น
- คลิกติดตั้งใช้งาน
- การดำเนินการนี้อาจใช้เวลาสูงสุด 15 นาที
- คุณไม่จำเป็นต้องทำการเปลี่ยนแปลงใดๆ แต่สามารถดูข้อมูลเพิ่มเติมเกี่ยวกับการติดตั้งใช้งานโซลูชัน Jump Start ได้

การแก้ปัญหา

ปัญหา: คุณเห็นข้อผิดพลาดที่ระบุว่า Partial deployment. ไหม
- วิธีแก้ปัญหา: ขออภัยที่หมายความว่าคุณควรลบการทำให้ใช้งานได้แล้วเริ่มใหม่อีกครั้ง คุณควรเห็นปุ่มที่ระบุว่าลบการติดตั้งใช้งาน คลิกปุ่มดังกล่าว แล้วติดตั้งโซลูชัน Jump Start อีกครั้ง

3. เปิดใช้ Gemini

ตั้งค่าสภาพแวดล้อมการแก้ไขโค้ดและเปิดใช้ Gemini

ไปที่ Cloud Shell Editor
- กลับไปที่ Google Cloud Console
- พิมพ์ Cloud Shell Editor ในแถบค้นหา แล้วคลิก Cloud Shell Editor จากเมนูแบบเลื่อนลง
- คลิกลองใช้เครื่องมือแก้ไขใหม่หากคุณใช้เครื่องมือแก้ไขเดิม
  - หมายเหตุ: หากไม่เห็นปุ่มลองใช้เครื่องมือแก้ไขใหม่ แสดงว่าคุณอาจใช้เครื่องมือแก้ไขใหม่อยู่แล้ว เอดิเตอร์เวอร์ชันเดิมจะยังใช้งานได้ แต่มุมมองจะแตกต่างออกไปเล็กน้อย
- คลิกไอคอนเปิดในหน้าต่างใหม่
หากได้รับข้อความแจ้ง ให้เข้าสู่ระบบหรือให้สิทธิ์บัญชี
- ระบบอาจแจ้งให้คุณให้สิทธิ์บัญชีหลายครั้งในระหว่างห้องทดลองนี้ ทั้งนี้ขึ้นอยู่กับการตั้งค่าของคุณ เมื่อระบบขอให้ให้สิทธิ์ ให้เลือก "ให้สิทธิ์" ทุกครั้ง
คลิกปุ่ม Cloud Code - ลงชื่อเข้าใช้ ในแถบสถานะด้านล่างตามที่แสดง ให้สิทธิ์ปลั๊กอินตามวิธีการ
หากได้รับข้อความแจ้ง ให้คลิกเลือกโปรเจ็กต์ Google Cloud แล้วเลือกโปรเจ็กต์ที่คุณใช้
เปิดใช้ Gemini
- คลิก Cloud Code
  - หมายเหตุ: อาจใช้เวลา 1 หรือ 2 ขั้นตอน ทั้งนี้ขึ้นอยู่กับขนาดหน้าจอ
- คลิกเปลี่ยนการตั้งค่าในส่วนความช่วยเหลือและความคิดเห็น
- ประเภท Gemini: Enable
- เลือกช่องทำเครื่องหมาย (หากยังไม่ได้เลือก)
- โหลด IDE ซ้ำ
- ซึ่งจะเปิดใช้ Gemini ใน Cloud Code และแถบสถานะ Gemini จะปรากฏใน IDE
คลิกปุ่ม 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
- คลิกไอคอน Explorer
- คลิกไฟล์ main.py เพื่อเปิด
คลิกไอคอน Gemini Chat
- หมายเหตุ: อาจใช้เวลา 1 หรือ 2 ขั้นตอน ทั้งนี้ขึ้นอยู่กับขนาดหน้าจอ
ลองถามคำถาม Gemini ป้อนพรอมต์ เช่น
- What is a Jump Start Solution in Google Cloud?
- Explain this code.

การรีเซ็ต Gemini Chat

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

รีเซ็ตไฮไลต์ถังขยะของแชท Duet

5. การเรียกใช้ปลายทาง Cloud Function ที่มีอยู่

สำรวจโค้ดและเรียกใช้ปลายทางที่คุณติดตั้งใช้งานในโซลูชัน Jump Start

ป้อนพรอมต์:
- สําคัญ แทนที่ 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
- คลิก Terminal ใหม่
- วางคำสั่ง curl จากขั้นตอนก่อนหน้าลงในเทอร์มินัล แล้วกด Enter เพื่อเรียกใช้คำสั่ง
- คุณควรได้รับการตอบกลับที่เริ่มต้นด้วยข้อความต่อไปนี้
```
{
    "labelAnnotations": [
    {
    "mid": "/m/0csby",
    "description": "Cloud",
    "score": 0.97885925,
    "topicality": 0.97885925,
...
```
(ไม่บังคับ) ทำเช่นนี้กับรูปภาพอื่นจากอินเทอร์เน็ตสาธารณะโดยการป้อนพรอมต์ให้ Duet AI ด้วยข้อความที่คล้ายกับ
- 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
ปัญหา: ปลายทาง 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 พร้อมรหัสโปรเจ็กต์
ปัญหา: บางครั้งปลายทางที่สร้างขึ้นจะมีลักษณะเป็น cloudfunctions.net/annotate-http หรือ cloudfunctions.net/annotate โดยขึ้นอยู่กับพรอมต์ที่ใช้ URL ปลายทางไม่มี /annotate-http/annotate ที่ส่วนท้ายใช่ไหม
- วิธีแก้ไข: ตรวจสอบว่าปลายทาง URL ลงท้ายด้วยเส้นทางการสมัครใช้ API แบบเต็ม cloudfunctions.net/annotate-http/annotate
ปัญหา: คำขอ 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" }
```
ปัญหา: หลังจากทำตามขั้นตอนการแก้ปัญหาทั้งหมดนี้แล้ว แต่ก็ยังใช้งานไม่ได้
- วิธีแก้ปัญหา: เนื่องจากลักษณะที่ไม่แน่นอนของ LLM จึงเป็นไปได้ที่ Duet จะสร้างคำตอบที่ใช้ไม่ได้ หากเกิดกรณีนี้ ให้คัดลอกตัวอย่างคำสั่ง curl ด้านบน แล้วลองเรียกใช้ในเทอร์มินัล อย่าลืมแทนที่ my-project-with-duet ด้วยรหัสโปรเจ็กต์ของคุณ

6. สร้างไคลเอ็นต์เว็บแอปพลิเคชันสำหรับ API

ใช้ Gemini เพื่อสร้างไฟล์ index.html ที่เรียกใช้ปลายทาง Cloud Functions ของโซลูชัน Jump Start จากนั้นทำให้ไฟล์ index.html ใช้งานได้กับ Firebase Hosting เพื่อดูโค้ดที่ทำงาน

สร้างโค้ดฝั่งไคลเอ็นต์
- กลับไปที่ช่องแชทกับ 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
สร้างfrontendไดเรกทอรี
- คุณขอให้ Gemini ทำสิ่งต่อไปนี้ได้
  - What are the console commands to create and navigate to a new frontend directory?
- คุณควรเห็นผลลัพธ์เช่น mkdir frontend และ cd frontend
- ใช้เทอร์มินัล Cloud Shell เพื่อยืนยันว่าคุณยังอยู่ในไดเรกทอรี annotate-http-1 และเรียกใช้คำสั่งเหล่านั้น
  - cd ~/annotate-http-1
  - mkdir frontend
  - cd frontend
ตรวจสอบว่าคุณเข้าสู่ระบบโปรเจ็กต์ที่ถูกต้องในเทอร์มินัล Cloud Shell
- คุณขอให้ Gemini ทำสิ่งต่อไปนี้ได้
  - What is the gcloud command to set my project?
- คุณควรเห็นผลลัพธ์เช่น gcloud config set project my-project-with-duet
  - ยืนยันว่ารหัสโปรเจ็กต์ถูกต้อง แล้วเรียกใช้คำสั่งในเทอร์มินัล Cloud Shell
เปิดใช้ Firebase
- ในแท็บใหม่ (เปิด Cloud Shell Editor ปัจจุบันไว้) ให้ไปที่ https://console.firebase.google.com/
- คลิกเพิ่มโปรเจ็กต์
- พิมพ์รหัสโปรเจ็กต์แล้วรอให้รหัสปรากฏในเมนูแบบเลื่อนลง
- คลิกรหัสโปรเจ็กต์
- คลิกต่อไป
- คลิกยืนยันแพ็กเกจ
- คลิกต่อไป
- ยกเลิกการเลือกเปิดใช้ Google Analytics สําหรับโปรเจ็กต์นี้
  - Firebase ขอแนะนําให้ใช้ Google Analytics แต่จะไม่ได้ใช้ในแอปพลิเคชันนี้
- คลิกต่อไป
- ปิดแท็บนี้แล้วกลับไปที่ Cloud Shell Editor
- หมายเหตุ: ขั้นตอนเหล่านี้จำเป็นสำหรับผู้ใช้ที่ไม่เคยใช้ Firebase มาก่อนเท่านั้น แต่จะช่วยให้ทุกคนทำตามเส้นทางเดียวกันได้ หากคุณทำขั้นตอนนี้อีกในอนาคต คุณจะข้ามขั้นตอนนี้ได้
เข้าสู่ระบบ Firebase ใน Cloud Shell
- ในเทอร์มินัลของ Cloud Shell Editor ให้เรียกใช้คำสั่ง firebase login --no-localhost
- ไปที่ URL ที่ระบุ
  - คลิกใช่ ฉันเพิ่งเรียกใช้คำสั่งนี้
  - คลิกใช่ นี่คือรหัสเซสชันของฉัน
  - คลิกคัดลอก
- กลับไปที่เทอร์มินัลของ Cloud Shell Editor
- วางค่าที่คัดลอกไว้ในเทอร์มินัลที่ระบุว่า 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
นำแอปพลิเคชันไปใช้งานอีกครั้งโดยเรียกใช้ปลายทาง Cloud Functions API
- คำสั่งก่อนหน้าควรสร้างไดเรกทอรี public ที่มีไฟล์ index.html อยู่ภายในไดเรกทอรี frontend ที่คุณสร้างไว้ก่อนหน้านี้ คุณควรทำการเปลี่ยนแปลงอีก 2-3 รายการถัดไปใน~/annotate-http-1/frontend/public/index.html
- เปิดไฟล์ index.html
  - คลิกไอคอน Explorer
  - คลิกโฟลเดอร์ frontend
  - คลิกโฟลเดอร์ public
  - คลิกไฟล์ index.html
- ล้างไฟล์ index.html ที่มีอยู่
- วางรหัสที่คัดลอกไว้ก่อนหน้าลงในไฟล์ index.html
- เรียกใช้ firebase deploy เพื่อทำให้แอปพลิเคชันใหม่ใช้งานได้
- ไปที่ URL ของ Firebase Hosting เพื่อดูว่าใช้งานได้หรือไม่
  - หมายเหตุ: คุณอาจต้องรีเฟรชเว็บไซต์อย่างเต็มรูปแบบเพื่อดูข้อมูลที่อัปเดต

การแก้ปัญหา

ไฟล์ 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
ปัญหา: คำตอบของพรอมต์ยังไม่ถูกต้อง
- วิธีแก้ปัญหา: ลองใช้พรอมต์อื่นที่คุณให้คำแนะนำแก่ 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.
ปัญหา: เว็บไซต์ของคุณได้รับการติดตั้งใช้งานแล้ว แต่ไม่ทำงานใช่ไหม
- วิธีแก้ปัญหา: เนื่องจากลักษณะที่ไม่แน่นอนของ LLM จึงเป็นไปได้ที่ Duet จะสร้างคำตอบที่ใช้ไม่ได้ หากเกิดกรณีดังกล่าว ให้คัดลอกตัวอย่าง index.html ด้านบน แล้วลองนำไปใช้ซ้ำกับ firebase deploy อย่าลืมแทนที่ my-project-with-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 เพื่อนำทรัพยากรทั้งหมดที่คุณสร้างในวันนี้ออก