เผยแพร่เมื่อวันที่ 14 มกราคม 2025
ในงาน Google I/O 2024 เมื่อปีที่แล้ว เราได้เปิดตัว Console Insights ซึ่งเป็นฟีเจอร์ AI แรกในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ข้อมูลเชิงลึกของคอนโซลช่วยให้เข้าใจข้อผิดพลาดและคําเตือนที่บันทึกไว้ในคอนโซลโดยการส่งข้อมูลเครือข่าย ซอร์สโค้ด และสแต็กเทรซที่เกี่ยวข้องกับข้อความบันทึกไปยัง Gemini ซึ่งเป็นโมเดลภาษาขนาดใหญ่ (LLM) ของ Google ข้อมูลเชิงลึกของ Console จะส่งพรอมต์เดียวไปยัง Gemini ซึ่งจะแสดงคำตอบเดียวโดยที่นักพัฒนาแอปไม่สามารถถามคำถามต่อได้ แม้ว่าขั้นตอนการทำงานแบบเดียวนี้จะใช้อธิบายข้อความแสดงข้อผิดพลาดได้ดี แต่ก็ไม่เหมาะกับกรณีการใช้งานการแก้ไขข้อบกพร่องที่ซับซ้อนมากขึ้นในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ซึ่งไม่แน่ชัดว่า AI ต้องการข้อมูลใดจากหน้าเว็บที่ตรวจสอบเพื่อช่วยเหลือ
Use Case อย่างหนึ่งที่กล่าวถึงคือการแก้ไขข้อบกพร่องเกี่ยวกับการจัดรูปแบบ หน้าเว็บหน้าเดียวอาจมีองค์ประกอบและกฎ CSS หลายพันรายการ โดยมีเพียงบางส่วนเท่านั้นที่เกี่ยวข้องกับการแก้ไขข้อบกพร่องของสถานการณ์หนึ่งๆ การระบุโค้ดที่ถูกต้องเพื่อแก้ไขข้อบกพร่องนั้นเป็นเรื่องยาก แม้กระทั่งสำหรับมนุษย์ แต่จากการสร้างต้นแบบระหว่างแฮ็กแฮทแคน AI ที่ Google เราพบว่า LLM ทำงานได้ดีทีเดียว เราจึงอยากนำความสามารถนี้มามอบให้แก่ผู้ใช้เครื่องมือสำหรับนักพัฒนาเว็บด้วย นั่นคือการสร้างเครื่องมือที่สามารถตรวจสอบปัญหาการจัดสไตล์โดยการค้นหาหน้าเว็บเพื่อหาข้อมูลบริบทเพิ่มเติมแบบอินเทอร์แอกทีฟ สิ่งที่เราสร้างขึ้นได้เปิดตัวเป็นความช่วยเหลือจาก AI สำหรับการจัดสไตล์ในอีกไม่กี่เดือนต่อมา
ในโพสต์นี้ เราต้องการพูดถึงความท้าทายที่เราพบขณะนํา AI มาใช้กับผลิตภัณฑ์ที่ได้รับความนิยม เช่น เครื่องมือสําหรับนักพัฒนาเว็บใน Chrome ซึ่งเป็นเว็บแอปโดยพื้นฐาน และสิ่งที่คุณสามารถปรับใช้กับฟีเจอร์ AI ของคุณเอง
การเก็บรวบรวมข้อมูลที่ถูกต้อง
ข้อมูลเชิงลึกของคอนโซลจะใช้จุดข้อมูลเดียวกันเสมอเพื่อตอบสนองพรอมต์ที่กําหนดไว้ล่วงหน้า เพื่อให้ความช่วยเหลือจาก 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 มีประสิทธิภาพสูงและครอบคลุม Use Case ในการแก้ไขข้อบกพร่องหลายรายการโดยพื้นฐาน แม้ว่าการใช้การเรียก API ด้วยตนเองเพื่อไปยังส่วนต่างๆ ของ DOM หรือเข้าถึงสไตล์ที่คอมไพล์แล้วเพื่อแก้ไขข้อบกพร่องอาจเป็นเรื่องน่าเบื่อสำหรับนักพัฒนาซอฟต์แวร์ แต่ LLM สามารถสร้างโค้ดที่เรียกใช้ API เหล่านั้นได้
- แม้ว่าจะสร้าง API ใหม่ให้ตัวแทนใช้ได้ แต่การใช้ API สาธารณะที่มีอยู่ซ้ำๆ มักเป็นทางเลือกที่ดีกว่า เนื่องจาก LLM รู้จัก API เหล่านั้นอยู่แล้ว การให้ความรู้ LLM เกี่ยวกับ API ใหม่ต้องใช้ทรัพยากรจํานวนมากเพื่อการปรับแต่งและข้อมูลการฝึกอบรมเฉพาะ
แต่การเรียกใช้โค้ดที่ AI สร้างขึ้นในพื้นที่ผู้ใช้มีความเสี่ยง สำหรับความช่วยเหลือจาก AI เราจำเป็นต้องลดความเสี่ยงของการเปลี่ยนแปลงที่อาจทำลายหน้าเว็บซึ่งตัวแทนอาจทำ ด้วยเหตุนี้ เราจึงใช้การตรวจสอบผลข้างเคียงที่ V8 ซึ่งเป็นเครื่องมือ JavaScript ของ Chrome แสดงผ่านโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome การตรวจสอบเดียวกันนี้ใช้กับฟังก์ชันการทำงานแบบเติมข้อความอัตโนมัติในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ โดยจะเรียกใช้เฉพาะโค้ด 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;
}
}
แม้ว่าวิธีนี้จะไม่แก้ปัญหาความขัดแย้งของสไตล์ที่อาจเกิดขึ้นในหน้าเว็บได้ทั้งหมด แต่วิธีนี้ใช้ได้กับกรณีส่วนใหญ่
ข้อดีของการใช้สไตล์ชีตของเครื่องมือตรวจสอบเมื่อเทียบกับสไตล์แบบแทรกในบรรทัดคือวิธีนี้จะทำให้การเปลี่ยนแปลงที่ตัวแทนทำปรากฏในแผงการเปลี่ยนแปลงด้วย ซึ่งช่วยให้ติดตามการเปลี่ยนแปลงรูปแบบองค์ประกอบที่ทำไปแล้วและสิ่งที่นักพัฒนาซอฟต์แวร์ต้องโอนไปยังซอร์สโค้ดพื้นฐานได้ง่ายขึ้น การผสานรวมกับแผงการเปลี่ยนแปลงยังช่วยให้คุณเปลี่ยนกลับการเปลี่ยนแปลงได้หากไม่จําเป็นต้องใช้การเปลี่ยนแปลงนั้นอีกต่อไป
การทําให้ผู้ใช้เห็นการดําเนินการของตัวแทน
เมื่อเพิ่มฟีเจอร์ตัวแทนลงในผลิตภัณฑ์ สิ่งสำคัญคือต้องทำให้การดำเนินการของตัวแทนมีความโปร่งใสต่อผู้ใช้ เพื่อให้ผู้ใช้มีโอกาสติดตาม เข้าใจ และอาจแทรกแซงได้
ดังนั้น เราจึงสั่งให้ Gemini จัดโครงสร้างคำตอบในรูปแบบที่เจาะจงสำหรับการช่วยเหลือจาก AI โดยเพิ่มข้อมูลต่อไปนี้ในคำนำ
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 ที่ครอบคลุมซึ่งมีพรอมต์การสาธิตมากมายให้ลองใช้กับหน้าเว็บของคุณเอง และอย่าลืมบอกให้เราทราบความคิดเห็นของคุณในข้อบกพร่องในการสนทนาที่เปิดอยู่