เผยแพร่เมื่อวันที่ 14 มกราคม 2025
ในงาน Google I/O 2024 เมื่อปีที่แล้ว เราได้เปิดตัวข้อมูลเชิงลึกของคอนโซล ซึ่งเป็นฟีเจอร์ AI แรกใน Chrome DevTools ข้อมูลเชิงลึกของคอนโซลช่วยให้เข้าใจข้อผิดพลาดและคําเตือนที่บันทึกไว้ในคอนโซลด้วยการส่งข้อมูลเครือข่าย โค้ดต้นทาง และสแต็กเทรซที่เกี่ยวข้องกับข้อความบันทึกไปยัง Gemini ซึ่งเป็นโมเดลภาษาขนาดใหญ่ (LLM) ของ Google ข้อมูลเชิงลึกของ Console จะส่งพรอมต์เดียวไปยัง Gemini ซึ่งจะแสดงคำตอบเดียวโดยที่นักพัฒนาแอปไม่สามารถถามคำถามต่อได้ แม้ว่าขั้นตอนการทำงานแบบเดียวนี้จะใช้อธิบายข้อความแสดงข้อผิดพลาดได้ดี แต่ก็ไม่เหมาะกับ Use Case การแก้ไขข้อบกพร่องที่ซับซ้อนมากขึ้นในเครื่องมือสำหรับนักพัฒนาเว็บ ซึ่งไม่แน่ชัดว่า AI ต้องการข้อมูลใดจากหน้าเว็บที่ตรวจสอบเพื่อช่วยเหลือ
กรณีการใช้งานอย่างหนึ่งที่พบได้บ่อยคือการแก้ไขข้อบกพร่องเกี่ยวกับการจัดรูปแบบ หน้าเว็บหน้าเดียวอาจมีองค์ประกอบและกฎ CSS หลายพันรายการ โดยมีเพียงบางส่วนเท่านั้นที่เกี่ยวข้องกับการแก้ไขข้อบกพร่องในสถานการณ์หนึ่งๆ การระบุโค้ดที่ถูกต้องเพื่อแก้ไขข้อบกพร่องอาจเป็นเรื่องยาก แม้กระทั่งสำหรับมนุษย์ แต่จากการสร้างต้นแบบระหว่างแฮ็กอะทันสำหรับ AI ที่ Google เราพบว่า LLM ทำได้ค่อนข้างดีทีเดียว เราจึงอยากนำความสามารถนี้มามอบให้แก่ผู้ใช้เครื่องมือสำหรับนักพัฒนาเว็บด้วย นั่นคือการสร้างเครื่องมือที่สามารถตรวจสอบปัญหาการจัดสไตล์โดยค้นหาข้อมูลบริบทเพิ่มเติมจากหน้าเว็บแบบอินเทอร์แอกทีฟ สิ่งที่เราสร้างขึ้นได้เปิดตัวเป็นความช่วยเหลือจาก AI สำหรับการจัดสไตล์ในอีกไม่กี่เดือนต่อมา
ในโพสต์นี้ เราต้องการพูดถึงความท้าทายที่เราพบขณะนํา AI มาใช้กับผลิตภัณฑ์ที่ได้รับความนิยม เช่น Chrome DevTools ซึ่งเป็นเว็บแอปโดยพื้นฐาน และสิ่งที่คุณสามารถปรับใช้กับฟีเจอร์ AI ของคุณเอง
การเก็บรวบรวมข้อมูลที่ถูกต้อง
ข้อมูลเชิงลึกของ Console จะใช้จุดข้อมูลเดียวกันเสมอเพื่อตอบสนองพรอมต์ที่กําหนดไว้ล่วงหน้า เพื่อให้ความช่วยเหลือจาก AI มีประโยชน์กับพรอมต์ที่ผู้ใช้กำหนด เราจำเป็นต้องกำหนดข้อมูลบริบทที่สำคัญสำหรับคำค้นหานั้นๆ ให้เป็นแบบไดนามิก
เราจึงใช้ ReAct (Yao et al., 2022) strategy กลยุทธ์การแจ้งเตือนนี้ช่วยให้ LLM สามารถใช้เหตุผลได้อย่างอิสระและกำหนดการดำเนินการต่อตามการหาเหตุผล
ด้วยเหตุนี้ ความช่วยเหลือจาก AI จึงทำงานในวงจรของความคิด การดำเนินการ และการสังเกตจนกว่าจะพบคำตอบที่เหมาะสมสำหรับคำค้นหาของผู้ใช้ เมื่อถึงจุดนั้น AI ก็จะสิ้นสุดวงจรและแสดงคำตอบ กระบวนการที่ทำงานซ้ำๆ นี้ช่วยให้ LLM รวบรวมข้อมูลที่แม่นยำซึ่งจําเป็นต่อการแก้ไขข้อบกพร่องการจัดรูปแบบได้อย่างมีประสิทธิภาพ
ในการรวบรวมข้อมูล เราได้ให้เครื่องมือเพียงอย่างเดียวแก่ Gemini นั่นคือการเรียกใช้ JavaScript ในหน้าที่ตรวจสอบ ซึ่งจะช่วยให้ Gemini ดำเนินการต่างๆ ผ่านความช่วยเหลือของ AI ได้ เช่น
- เข้าถึงและวิเคราะห์ DOM: เรียกดูผ่านต้นไม้ DOM, ตรวจสอบแอตทริบิวต์ขององค์ประกอบ และทําความเข้าใจความสัมพันธ์ระหว่างองค์ประกอบ
- เรียกข้อมูลรูปแบบที่คำนวณแล้ว: เข้าถึงรูปแบบที่คำนวณแล้วสำหรับองค์ประกอบใดก็ได้
- ทําการคํานวณและการวัด: เรียกใช้โค้ด JavaScript เพื่อคํานวณระยะทาง ขนาด และตําแหน่งขององค์ประกอบ
วิธีนี้ช่วยให้ความช่วยเหลือจาก AI ทำงานกับโค้ดที่เกี่ยวข้องเท่านั้นแบบอินเทอร์แอกทีฟ ซึ่งช่วยปรับปรุงคุณภาพการตอบกลับ เวลาในการตอบกลับ และการใช้ทรัพยากรการประมวลผล เมื่อเทียบกับการส่งซอร์สโค้ด HTML และ CSS ทั้งหมดไปยัง Gemini
เรียกใช้โค้ดที่ AI สร้างขึ้นในพื้นที่ผู้ใช้
คุณอาจแปลกใจที่เราใช้ JavaScript ในการแก้ไขข้อบกพร่องเกี่ยวกับการจัดสไตล์ ซึ่งสาเหตุมี 2 ประการดังนี้
- Web API มีประสิทธิภาพสูงและครอบคลุมกรณีการใช้งานการแก้ไขข้อบกพร่องหลายกรณี แม้ว่าการใช้การเรียก API ด้วยตนเองเพื่อเรียกใช้ DOM หรือเข้าถึงสไตล์ที่คอมไพล์แล้วสำหรับการแก้ไขข้อบกพร่องอาจเป็นเรื่องน่าเบื่อสำหรับนักพัฒนาซอฟต์แวร์ แต่ LLM สามารถสร้างโค้ดที่เรียกใช้ API เหล่านั้นได้
- แม้ว่าคุณจะสร้าง API ใหม่ให้ตัวแทนใช้ได้ แต่การใช้ API สาธารณะที่มีอยู่ซ้ำๆ มักเป็นทางเลือกที่ดีกว่า เนื่องจาก LLM รู้จัก API เหล่านั้นอยู่แล้ว การให้ความรู้ LLM เกี่ยวกับ API ใหม่ต้องใช้ทรัพยากรจำนวนมากสำหรับการปรับแต่งและข้อมูลการฝึกอบรมเฉพาะ
แต่การเรียกใช้โค้ดที่ AI สร้างขึ้นในพื้นที่ผู้ใช้มีความเสี่ยง สำหรับความช่วยเหลือจาก AI เราจำเป็นต้องลดความเสี่ยงของการเปลี่ยนแปลงที่อาจก่อให้เกิดความเสียหายซึ่งตัวแทนอาจทำกับหน้าเว็บ ด้วยเหตุนี้ เราจึงใช้การตรวจสอบผลข้างเคียงที่ V8 ซึ่งเป็นเครื่องมือ JavaScript ของ Chrome แสดงผ่านโปรโตคอล Chrome DevTools การตรวจสอบเดียวกันนี้ใช้กับฟังก์ชันการทำงานแบบเติมข้อความอัตโนมัติในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ โดยจะเรียกใช้เฉพาะโค้ด JavaScript ตราบใดที่ไม่ได้แก้ไขสถานะหน้าเว็บ การตรวจสอบจะดำเนินการขณะที่ V8 เรียกใช้โค้ดและจะอิงตามรายการที่อนุญาตของ JavaScript ในตัวที่ทราบว่าไม่มีผลข้างเคียง
หากการตรวจสอบพบว่าโค้ดที่สร้างขึ้นกำลังแก้ไขหน้าเว็บที่ตรวจสอบ ระบบจะหยุดการเรียกใช้ชั่วคราวและขอให้ผู้ใช้ตรวจสอบโค้ดและยืนยันว่าสามารถเรียกใช้ได้
นอกจากนี้ ระบบจะเรียกใช้ JavaScript ที่สร้างขึ้นใน"โลก" แยกต่างหาก ซึ่งคล้ายกับวิธีที่ส่วนขยายเรียกใช้สคริปต์แซนด์บ็อกซ์ นั่นคือ โค้ดที่สร้างขึ้นจะสามารถเข้าถึง DOM และ Web API แต่ไม่สามารถเข้าถึงโค้ด JavaScript หรือสถานะที่หน้าเว็บที่ตรวจสอบกำหนดไว้
การติดตามการเปลี่ยนแปลงที่ตัวแทนทำ
นอกจากการตรวจสอบปัญหาและตอบคําถามเกี่ยวกับการแก้ไขข้อบกพร่องเกี่ยวกับหน้าเว็บแล้ว เรายังต้องการให้ตัวแทนความช่วยเหลือของ AI สามารถแก้ไขสไตล์ในหน้าเว็บในลักษณะที่นักพัฒนาแอปสามารถติดตามได้
ในการดําเนินการนี้ เราได้ใช้การเชื่อมโยงที่เรียกว่า setElementStyles ซึ่งแสดงต่อบริบทการดําเนินการของตัวแทน นอกเหนือจาก Web API เริ่มต้น
เราได้แจ้งให้ Gemini ทราบถึงวิธีการใหม่นี้โดยระบุไว้ในคำนำของความช่วยเหลือจาก AI
If you need to set styles on an HTML element, always call the \`async setElementStyles(el: Element, styles: object)\` function.
แม้ว่าจะเป็น API ที่ออกแบบมาเพื่อเอเจนต์โดยเฉพาะ ซึ่งมาพร้อมกับความท้าทายที่กล่าวถึงก่อนหน้านี้ แต่ Gemini ก็ใช้ API นี้ได้อย่างน่าเชื่อถือแม้ไม่ได้ปรับแต่งอย่างละเอียดเมื่อต้องเปลี่ยนสไตล์ในองค์ประกอบหนึ่งๆ
ทางด้านเครื่องมือสำหรับนักพัฒนาเว็บ เมื่อมีการเรียก setElementStyles จากตัวแทน ความช่วยเหลือจาก AI จะใช้สไตล์ชีตของเครื่องมือตรวจสอบเพื่อบันทึกการเปลี่ยนแปลงสำหรับตัวเลือกองค์ประกอบ การฝัง CSS ใช้เพื่อตั้งชื่อการเปลี่ยนแปลงและเพิ่มความเฉพาะเจาะจงของตัวเลือกองค์ประกอบ กฎ CSS ตัวอย่างที่ตัวแทนสร้างขึ้นจึงมีลักษณะดังนี้
.ai-style-change-1 { /* the ID is incremented for each change*/
.element-selector { /* Element selector is computed based on the element setElementStyles was called on. */
color: blue;
}
}
แม้ว่าวิธีนี้จะไม่แก้ปัญหาความขัดแย้งของสไตล์ที่อาจเกิดขึ้นในหน้าเว็บได้ทั้งหมด แต่ก็ใช้ได้กับกรณีส่วนใหญ่
ข้อดีของการใช้สไตล์ชีตของเครื่องมือตรวจสอบเมื่อเทียบกับสไตล์แบบแทรกในบรรทัดคือวิธีนี้จะทำให้การเปลี่ยนแปลงที่ตัวแทนทำปรากฏในแผงการเปลี่ยนแปลงด้วย ซึ่งช่วยให้ติดตามการเปลี่ยนแปลงสไตล์องค์ประกอบที่ทำได้ง่ายขึ้นและนักพัฒนาซอฟต์แวร์ต้องโอนอะไรไปยังซอร์สโค้ดพื้นฐาน การผสานรวมกับแผงการเปลี่ยนแปลงยังช่วยให้คุณเปลี่ยนกลับการเปลี่ยนแปลงได้หากไม่จําเป็นต้องใช้การเปลี่ยนแปลงนั้นอีกต่อไป
การแสดงการดำเนินการของตัวแทนให้ผู้ใช้เห็น
เมื่อเพิ่มฟีเจอร์ตัวแทนลงในผลิตภัณฑ์ สิ่งสำคัญคือต้องทำให้การดำเนินการของตัวแทนมีความโปร่งใสสำหรับผู้ใช้ เพื่อให้ผู้ใช้มีโอกาสติดตาม ทำความเข้าใจ และอาจแทรกแซงได้
ดังนั้นสําหรับความช่วยเหลือจาก AI เราจึงสั่งให้ Gemini จัดโครงสร้างคําตอบในรูปแบบที่เฉพาะเจาะจงโดยเพิ่มส่วนนําหน้าดังนี้
You are going to answer to the query in these steps:
* THOUGHT
* TITLE
* ACTION
* ANSWER
* SUGGESTIONS
Use THOUGHT to explain why you take the ACTION. Use TITLE to provide a short summary of the thought.
จากนั้นโครงสร้างนี้จะใช้เพื่อนำเสนอกระบวนการคิดและการดําเนินการของ Gemini เป็นขั้นตอนที่ยุบอยู่ตั้งแต่แรก ซึ่งจะช่วยป้องกันไม่ให้มีข้อมูลมากเกินไป แต่ก็ยังคงอนุญาตให้ผู้ใช้ตรวจสอบรายละเอียดที่เกี่ยวข้องหรือหยุดการดําเนินการในกรณีที่เกิดผลข้างเคียงที่ไม่ตั้งใจ
แนวทางนี้ไม่ได้เกี่ยวกับการสังเกต AI เพียงอย่างเดียว แต่ยังเป็นการเรียนรู้จาก AI อย่างสม่ำเสมอ เมื่อขยายส่วนเหล่านี้ ผู้ใช้จะวิเคราะห์ข้อมูลที่ Gemini เห็นว่ามีความเกี่ยวข้องกับการแก้ไขข้อบกพร่องที่เฉพาะเจาะจง และเข้าใจกระบวนการที่ดำเนินการได้ ความโปร่งใสนี้ช่วยให้ผู้ใช้เรียนรู้จากกลยุทธ์การแก้ไขข้อบกพร่องของ AI เพื่อให้ใช้เทคนิคที่คล้ายกันกับปัญหาในอนาคตได้ แม้ว่าจะทำงานโดยไม่ใช้ AI ก็ตาม
ความช่วยเหลือจาก AI ยังให้คำแนะนำที่เกี่ยวข้องตามบริบทตามคำตอบของ AI เพื่อปรับปรุงประสบการณ์ของผู้ใช้ให้ดียิ่งขึ้น คําแนะนําเหล่านี้จะช่วยเพิ่มประสิทธิภาพการสนทนา เสนอแนวคิดสําหรับขั้นตอนแก้ไขข้อบกพร่องถัดไป หรือแม้แต่ช่วยให้ผู้ใช้ดําเนินการแก้ไขที่แนะนําได้โดยตรงในคลิกเดียว
ในช่วงแรก เราได้พิจารณาใช้โมเดลแยกต่างหากขนาดเล็กกว่าสำหรับการสรุปโดยเฉพาะ เพื่อสร้างชื่อขั้นตอนและคำแนะนำในความช่วยเหลือของ AI อย่างไรก็ตาม เราพบว่ารูปแบบ ReAct ซึ่งจัดโครงสร้างการหาเหตุผลของ Gemini เป็นลูปของ "ความคิด" และ "การกระทำ" สามารถขยายผลได้อย่างมีประสิทธิภาพ ดังนั้นแทนที่จะเปิดตัวโมเดลที่ 2 ซึ่งจะมาพร้อมกับเวลาในการตอบสนองที่เพิ่มขึ้นด้วย เราจึงแก้ไขพรอมต์เพื่อสั่งให้ Gemini ไม่เพียงสร้าง "ความคิด" และ "การดำเนินการ" หลักเท่านั้น แต่ยังสร้างชื่อที่กระชับและคำแนะนำที่เป็นประโยชน์ภายในลูป ReAct เดียวกันด้วย
การพัฒนาที่ขับเคลื่อนโดยการประเมิน
การพัฒนาความช่วยเหลือด้านการจัดสไตล์ด้วย AI เกิดขึ้นจากกระบวนการประเมินที่เข้มงวด เราได้รวบรวมตัวอย่างการแก้ไขข้อบกพร่องของเว็บในชีวิตจริงที่ครอบคลุมเพื่อวัดประสิทธิภาพและระบุจุดที่ต้องปรับปรุง ซึ่งจะอธิบายปัญหาที่พบได้ทั่วไปเกี่ยวกับรายการที่แสดงเกินขีดจำกัด คอมโพเนนต์เว็บ ภาพเคลื่อนไหว และอื่นๆ ซึ่งช่วยให้เราจับภาพพื้นที่ปัญหาการแก้ไขข้อบกพร่องเว็บได้อย่างครอบคลุมและเข้าใจความท้าทายที่เกี่ยวข้องอย่างถ่องแท้ แต่งานนี้ก็ไม่มีวันจบสิ้น เนื่องจากมีการเพิ่มฟีเจอร์ใหม่ๆ ลงในแพลตฟอร์มเว็บเป็นประจำ เราจึงต้องอัปเดตตัวอย่างเหล่านั้นให้ทันสมัยอยู่เสมอในอนาคต
ระบบจะป้อนตัวอย่างเหล่านั้นลงในไปป์ไลน์การประเมินอัตโนมัติ โดยบันทึกคำตอบของ Gemini จากนั้นระบบจะแสดงข้อมูลจากการทดสอบอัตโนมัติเหล่านั้นในเครื่องมือที่สร้างขึ้นเอง ซึ่งเราจะประเมินประสิทธิภาพของ Gemini สำหรับความช่วยเหลือจาก AI ด้วยตนเองเทียบกับเกณฑ์ที่กำหนดไว้ล่วงหน้า ซึ่งจะเป็นข้อมูลในขั้นตอนการพัฒนาของเราในลำดับถัดไป
แนวทางที่เน้นการประเมินนี้ช่วยให้มั่นใจได้ว่าการเปลี่ยนแปลงทั้งหมด ไม่ว่าจะเป็นการปรับแต่งลักษณะการทำงานที่มีอยู่หรือเปิดตัวความสามารถใหม่ๆ ได้รับการยืนยันอย่างละเอียดเพื่อให้บรรลุทั้งการปรับปรุงที่ต้องการและป้องกันการถดถอยของฟังก์ชันการทำงานที่มีอยู่
เรากำลังพัฒนาวิธีการยืนยันอัตโนมัติเพื่อปรับปรุงกระบวนการประเมินให้ดียิ่งขึ้น ซึ่งรวมถึง
- การยืนยันเพื่อยืนยันว่าการแก้ไขถูกต้อง
- การตรวจสอบตามโค้ดเพื่อป้องกันไม่ให้ Gemini แสดงผลลัพธ์ที่ไม่ต้องการ
- การใช้ LLM เป็นผู้ตัดสินโดยยึดตามเกณฑ์การให้คะแนนที่เฉพาะเจาะจง เพื่อทำให้การประเมินด้วยตนเองเป็นแบบกึ่งอัตโนมัติและรวดเร็วขึ้น
แม้ว่าการยืนยันอัตโนมัติจะช่วยปรับขนาดได้ แต่ความคิดเห็นจากเจ้าหน้าที่ก็มีความสำคัญเช่นกัน เรากำลังรวบรวมความคิดเห็นของผู้ใช้ด้วยการควบคุมการลงคะแนนเสียงใต้คำตอบทุกรายการในการช่วยเหลือของ AI เพื่อดูว่าผู้ใช้พึงพอใจเพียงใด ปุ่มรายงานเพิ่มเติมช่วยให้ผู้ใช้แสดงความคิดเห็นที่แม่นยำยิ่งขึ้นสำหรับคำตอบที่โต้แย้งได้
การแทรกพรอมต์
ข้อจํากัดที่ทราบกันดีและมีการบันทึกไว้ของ LLM คือมีแนวโน้มที่จะเกิดการแทรกพรอมต์ การส่งผ่านพรอมต์เป็นเทคนิคในการหาวิธีเขียนทับคำสั่งระบบเดิมของ LLM ซึ่งทำให้ระบบแสดงผลเนื้อหาที่ไม่ได้ตั้งใจโดยนักพัฒนาซอฟต์แวร์
ขณะนี้โมเดลส่วนใหญ่มีมาตรการลดผลกระทบของการแทรกพรอมต์อยู่แล้ว เช่นเดียวกับ Gemini นอกจากนี้ เรายังพยายามลดปัญหานี้ในภาคหน้าด้วย โดยใส่วิธีการต่อไปนี้
If the user asks a question about religion, race, politics, sexuality, gender, or other sensitive topics, answer with "Sorry, I can't answer that. I'm best at questions about debugging web pages.
แม้ว่าวิธีนี้จะได้ผลกับคำถามที่ไม่ตรงหัวข้ออย่างชัดแจ้งบางรายการ แต่ก็ไม่ใช่วิธีที่ดีที่สุด ข้อเสียอย่างหนึ่งที่เราสังเกตเห็นคือคําค้นหาสั้นๆ ที่ไม่ชัดเจนอาจได้รับการจัดประเภทว่าไม่ตรงหัวข้อ
การสร้างจากรากฐานที่มั่นคง
เมื่อนำ AI มาใช้กับผลิตภัณฑ์เป็นครั้งแรก คุณควรทำทีละขั้นตอนแทนที่จะกระโดดข้ามขั้นตอนไปหลายๆ ขั้นตอนพร้อมกัน นี่เป็นวิธีที่เราใช้รับความช่วยเหลือจาก AI ด้วย ทุกอย่างที่เราได้เรียนรู้เมื่อสร้างตัวแทนการจัดสไตล์ช่วยให้เรามีรากฐานที่มั่นคงในการขยายความช่วยเหลือจาก AI ไปยังส่วนอื่นๆ ของ DevTools ในภายหลัง
หลังจากแก้ปัญหาที่สำคัญส่วนใหญ่เมื่อทำงานกับเครื่องมือจัดสไตล์ได้เพียงไม่กี่เดือน เราก็สามารถเปิดตัวความช่วยเหลือจาก AI สำหรับเครือข่าย ประสิทธิภาพ และแหล่งที่มา และมุ่งเน้นที่ปัญหาแต่ละอย่างได้
ผลกระทบด้านความปลอดภัยเมื่อทำงานกับคําขอเครือข่าย
ความช่วยเหลือจาก AI สำหรับเครือข่ายช่วยให้ผู้ใช้พูดคุยเกี่ยวกับคำขอเครือข่ายที่เฉพาะเจาะจงกับ Gemini โดยใช้ข้อมูลจากคำขอเป็นบริบทในการสนทนา โดยระบบจะส่งข้อมูลต่อไปนี้ไปยัง Gemini
- ส่วนหัวของคําขอ: ส่วนย่อยของส่วนหัวที่เบราว์เซอร์ส่งไปยังเซิร์ฟเวอร์
- ส่วนหัวของคำตอบ: ส่วนย่อยของส่วนหัวที่เซิร์ฟเวอร์แสดงผล
- สถานะการตอบกลับ: รหัสสถานะ HTTP ที่บ่งบอกการตอบกลับของเซิร์ฟเวอร์ (เช่น 200, 404)
- การกําหนดเวลา: ข้อมูลการกําหนดเวลาโดยละเอียดซึ่งครอบคลุมระยะต่างๆ ของคําขอ เช่น การตั้งค่าการเชื่อมต่อและการโอนข้อมูล
- เชนผู้เริ่มคําขอ: ลําดับการดําเนินการและสคริปต์ที่เริ่มคําขอ
แม้ว่าส่วนหัวจะมีความสําคัญในการทําความเข้าใจวิธีสร้างคําขออย่างสมบูรณ์ แต่ก็มีความเสี่ยงด้านความปลอดภัย เนื่องจากอาจมีข้อมูลเข้าสู่ระบบ เช่น คีย์ API, โทเค็นเซสชัน หรือแม้แต่รหัสผ่านธรรมดา เราไม่ส่งส่วนหัวทั้งหมดไปยัง Gemini เพื่อปกป้องข้อมูลที่ละเอียดอ่อนดังกล่าว แต่เราจะมีรายการที่อนุญาตของส่วนหัวที่ได้รับอนุญาตแทน ระบบจะแทนที่ค่าของส่วนหัวที่ไม่ได้อยู่ในรายการที่อนุญาตด้วย <redacted> วิธีนี้ช่วยให้มั่นใจได้ว่า Gemini จะได้รับบริบทที่จําเป็นขณะที่ปกป้องข้อมูลผู้ใช้
การปรับตัวให้เข้ากับรูปแบบข้อมูลต่างๆ
ความช่วยเหลือจาก AI สําหรับแหล่งที่มาช่วยให้นักพัฒนาแอปถามคําถามเกี่ยวกับไฟล์ต้นฉบับในแผงแหล่งที่มาได้ เช่น "ไฟล์นี้มีไว้สําหรับอะไร"
ระบบจะส่งข้อมูลเกี่ยวกับไฟล์ทั้งหมดในพรอมต์เดียว ซึ่งรวมถึงชื่อไฟล์ เนื้อหาไฟล์ และระบุว่ามีการแมปแหล่งที่มาหรือไม่ ข้อความนี้ได้ผลดีเนื่องจากเป็นข้อความธรรมดา แต่ไฟล์ข้อความขนาดใหญ่หรือไฟล์ไบนารีเป็นปัญหาสําหรับ LLM สำหรับไฟล์ไบนารี เราตัดสินใจที่จะระบุว่าเนื้อหาเป็นไบนารีในพรอมต์และจะไม่ส่งเนื้อหาจริง สำหรับไฟล์ข้อความขนาดใหญ่ เราจะส่งเฉพาะเนื้อหาส่วนเล็กๆ ที่ตัดมาจากต้นไฟล์เท่านั้น
สำหรับความช่วยเหลือด้านประสิทธิภาพจาก AI ซึ่งช่วยให้นักพัฒนาแอปถามคําถามเกี่ยวกับงานหนึ่งๆ จากโปรไฟล์ประสิทธิภาพที่บันทึกไว้ได้ การสร้างการแสดงผลที่พอดีกับกรอบบริบทของ Gemini และสามารถตีความเพื่อให้ข้อมูลเชิงลึกเพิ่มเติมได้ก็ถือเป็นความท้าทายที่คล้ายกัน
ในการสร้างงานนำเสนอดังกล่าวจากโปรไฟล์ประสิทธิภาพ เราได้สร้างโปรแกรมแปลงข้อมูลโดยเฉพาะที่เรียกว่า AiCallTree ซึ่งจัดรูปแบบลําดับการเรียกใช้สําหรับงานในลักษณะที่ LLM ประมวลผลได้ ในอนาคต เราจะลองใช้กลยุทธ์ ReAct ที่นี่ด้วย เพื่อลดปริมาณข้อมูลที่จําเป็นต้องส่งไปยัง Gemini ล่วงหน้า
ความช่วยเหลือจาก AI ในอนาคต
ผลลัพธ์ของการทำงานทั้งหมดนี้พร้อมให้ใช้งานแล้วใน Chrome เวอร์ชัน 132 ซึ่งรวมถึงความช่วยเหลือจาก AI สำหรับการจัดสไตล์ เครือข่าย แหล่งที่มา และประสิทธิภาพ เราหวังว่าคุณจะสนุกกับการใช้แอปนี้มากเท่ากับที่เราสนุกกับการสร้างแอป
หากต้องการทราบวิธีเริ่มต้นใช้งาน โปรดดูคำแนะนำฉบับสมบูรณ์เกี่ยวกับการเริ่มต้นใช้งานความช่วยเหลือจาก AI พร้อมพรอมต์การสาธิตมากมายให้ลองใช้กับหน้าเว็บของคุณเอง และอย่าลืมบอกให้เราทราบความคิดเห็นของคุณในข้อบกพร่องในการสนทนาที่เปิดอยู่