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

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

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

กำลังรีเซ็ต Gemini Chat

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

ไฮไลต์การไฮไลต์ข้อความในถังขยะสำหรับ Duot

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