สร้างฟีเจอร์ใหม่โดยใช้ AI ในตัวใน Chrome

Thomas Steiner

เผยแพร่เมื่อวันที่ 26 พฤษภาคม 2026

โพสต์นี้เป็นการสรุปเนื้อหาการบรรยายของ Thomas Steiner ในงาน Google I/O 2026

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

เราได้ร่วมมือกับ Build Awesome (เดิมชื่อ Eleventy) เพื่อเปิดตัวเทมเพลตบล็อกที่มีฟีเจอร์ AI ทั้งหมด ที่ระบุไว้ในการบรรยาย

ทำไมต้องใช้ AI ในตัว

  • คุ้มค่า: ไม่เสียค่าใช้จ่ายในการอนุมานในระบบคลาวด์ การคำนวณทั้งหมดเกิดขึ้นในอุปกรณ์ที่รองรับของผู้ใช้
  • ให้ความสำคัญกับความเป็นส่วนตัว: ข้อมูลที่ละเอียดอ่อนจะไม่ถูกส่งออกจากเบราว์เซอร์
  • ฟังก์ชันการทำงานแบบออฟไลน์: เมื่อดาวน์โหลดโมเดลแล้ว ฟีเจอร์ AI จะทำงานได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต
  • ประสิทธิภาพ: การเร่งฮาร์ดแวร์ช่วยให้โมเดลในอุปกรณ์มีประสิทธิภาพเทียบเท่า (และบางครั้งดีกว่า) ความเร็วของระบบคลาวด์
  • การอนุมานแบบไฮบริด: การใช้ Polyfill และเครื่องมืออย่าง Firebase AI Logic, ช่วยให้คุณกลับไปใช้ระบบคลาวด์ในอุปกรณ์ที่ไม่รองรับ (เช่น อุปกรณ์เคลื่อนที่) ขณะที่ยังคงใช้ฟีเจอร์ในตัวในเดสก์ท็อปได้

ฟีเจอร์ AI สำหรับเว็บแอปสมัยใหม่

Summarizer API

ตัวแก้ไข trAIlblazers ใช้ Summarizer API เพื่อ สร้างบรรทัดแรกและคำอธิบายเมตาที่เป็นมิตรกับ SEO โดยอัตโนมัติ

ตัวอย่าง: สร้างบรรทัดแรก

const blogPost = document.querySelector('.article-body').innerText;
const summarizer = await Summarizer.create({
  type: 'headline',
  sharedContext: 'Write headlines that make people want to read the blog post',
});

for await (const chunk of summarizer.summarizeStreaming(blogPost)) {
  headline.append(chunk);
}

Prompt API (พร้อมเอาต์พุตที่มีโครงสร้าง)

หากต้องการข้อมูลเฉพาะ การใช้ JSON Schema กับ Prompt API จะช่วยให้ AI แสดงผลลัพธ์ในรูปแบบที่ คาดการณ์ได้ ทีม trAIlblazers ใช้ฟีเจอร์นี้เพื่อวัตถุประสงค์ต่อไปนี้

  • การสร้างแท็ก: แนะนำหมวดหมู่ เช่น "ผจญภัย" หรือ "ชายหาด" จากรายการที่กำหนดไว้ล่วงหน้า
  • การดูแลความคิดเห็น: จัดประเภทความคิดเห็นเป็น "ปลอดภัย" หรือ "เป็นอันตราย" ก่อนที่จะเผยแพร่

การช่วยเหลือพิเศษสำหรับสื่อ

ตัวแก้ไขจะทำงาน "ส่วนที่ยาก" ของ Markdown โดยอัตโนมัติ เมื่อคุณวางรูปภาพ the Prompt API (พร้อมอินพุตมัลติโมดัล) จะวิเคราะห์พิกเซลเพื่อสร้างข้อความแสดงแทนที่เข้าถึงได้และคำอธิบายที่ให้ข้อมูล

การเขียนและการเขียนใหม่

ด้วย Writer และ Rewriter API ผู้ใช้สามารถขยายรายการแบบมีสัญลักษณ์แสดงหัวข้อย่อยให้เป็น ย่อหน้าแบบเต็มและเปลี่ยนโทนของย่อหน้าให้ "เป็นกันเองมากขึ้น" หรือ "สั้นลง" ได้ด้วยการคลิกเพียงครั้งเดียว

การแปลที่ราบรื่น

Translator API ช่วยให้ครีเอเตอร์ร่าง เนื้อหาเป็นภาษาอังกฤษและแปลเป็นภาษาที่ผู้อ่านภาษาสเปนหรือภาษาญี่ปุ่นเข้าใจได้ทันที ซึ่งเจ้าของภาษาจะปรับแต่งเนื้อหาได้

ตัวอย่างการทำงานของ Translator API
ร่างเนื้อหาด้วย Translator API เป็นภาษาอังกฤษและแปลเป็นภาษาสเปนและภาษาญี่ปุ่นได้ทันที

เรื่องราวความสำเร็จจากสถานการณ์จริง

พาร์ทเนอร์หลายรายได้เปิดตัว API เหล่านี้ในเวอร์ชันที่ใช้งานจริงแล้ว ตัวอย่างที่น่าสนใจมีดังนี้

  • Drupal: ใช้ Summarizer API เพื่อสร้างแท็ก SEO ภายใน CKEditor
  • Yahoo! Japan: ใช้ Prompt API เพื่อการตรวจสอบความคิดเห็นในชุมชน
  • Trip.com: ช่วยให้ผู้ซื้อเลือกดูตัวเลือกการจองเที่ยวบินที่ซับซ้อนได้ง่ายขึ้นด้วยภาพรวมที่สร้างโดย AI

แหล่งข้อมูลจากการบรรยาย

พร้อมที่จะสร้างประสบการณ์การใช้งาน "trAIlblazers" ของคุณเองแล้วใช่ไหม โปรดดูแหล่งข้อมูลต่อไปนี้