ปรับปรุงประสิทธิภาพและ UX สำหรับ AI ฝั่งไคลเอ็นต์

Maud Nalpas
Maud Nalpas
X GitHub

แม้ว่าฟีเจอร์ AI ส่วนใหญ่บนเว็บจะขึ้นอยู่กับเซิร์ฟเวอร์ แต่ AI ฝั่งไคลเอ็นต์จะทำงานโดยตรงในเบราว์เซอร์ของผู้ใช้ ซึ่งมีข้อดีต่างๆ เช่น เวลาในการตอบสนองต่ำ ต้นทุนฝั่งเซิร์ฟเวอร์ลดลง ไม่ต้องใช้คีย์ API ความเป็นส่วนตัวของผู้ใช้เพิ่มขึ้น และการเข้าถึงแบบออฟไลน์ คุณสามารถใช้ AI ฝั่งไคลเอ็นต์ที่ทํางานในเบราว์เซอร์ต่างๆ ด้วย TensorFlow.js, Transformers.js และ MediaPipe GenAI

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

  • Use Case ของคุณ AI ฝั่งไคลเอ็นต์เป็นตัวเลือกที่เหมาะสมสําหรับฟีเจอร์ของคุณหรือไม่ ฟีเจอร์ของคุณอยู่ในเส้นทางของผู้ใช้ที่สําคัญหรือไม่ และหากใช่ คุณมีทางเลือกอื่นไหม
  • แนวทางปฏิบัติที่ดีในการดาวน์โหลดและใช้โมเดล โปรดอ่านต่อเพื่อดูข้อมูลเพิ่มเติม

ก่อนดาวน์โหลดโมเดล

คลังความคิดและขนาดโมเดล

หากต้องการใช้ AI ฝั่งไคลเอ็นต์ คุณจะต้องมีโมเดลและมักจะต้องมีไลบรารีด้วย เมื่อเลือกไลบรารี ให้ประเมินขนาดของไลบรารีเช่นเดียวกับที่เลือกเครื่องมืออื่นๆ

ขนาดของโมเดลก็สำคัญเช่นกัน ข้อมูลขนาดใหญ่สำหรับโมเดล AI นั้นขึ้นอยู่กับปัจจัยหลายประการ 5 MB เป็นค่าประมาณที่มีประโยชน์เนื่องจากเป็นเปอร์เซ็นต์ไทล์ที่ 75 ของขนาดหน้าเว็บมัธยฐาน จำนวนที่ผ่อนปรนมากขึ้นคือ 10MB

สิ่งสำคัญที่ควรพิจารณาเกี่ยวกับขนาดโมเดลมีดังนี้

  • โมเดล AI เฉพาะงานจำนวนมากอาจมีขนาดเล็กมาก โมเดลอย่าง BudouX สำหรับตัวแบ่งอักขระที่ถูกต้องในภาษาเอเชียมีขนาดเล็กเพียง 9.4 KB เมื่อเป็นไฟล์ GZipped โมเดลการตรวจจับภาษาของ MediaPipe มีขนาดใหญ่ 315 KB
  • แม้แต่โมเดลวิสัยทัศน์ก็อาจมีขนาดที่เหมาะสม โมเดล Handpose และทรัพยากรที่เกี่ยวข้องทั้งหมดมีทั้งหมด 13.4 MB แม้ว่าจะมีขนาดใหญ่กว่าแพ็กเกจหน้าเว็บที่คอมไพล์ให้เล็กที่สุดส่วนใหญ่ แต่ก็เทียบเท่ากับหน้าเว็บค่ามัธยฐานซึ่งมีขนาด 2.2MB (2.6MB ในเดสก์ท็อป)
  • โมเดล Gen AI อาจมีขนาดใหญ่กว่าขนาดที่แนะนำสำหรับแหล่งข้อมูลบนเว็บ DistilBERT ซึ่งถือว่าเป็น LLM ที่มีขนาดเล็กมากหรือโมเดล NLP ที่เรียบง่าย (ความเห็นแตกต่างกันไป) จะมีน้ำหนักอยู่ที่ 67 MB แม้แต่ LLM ที่มีขนาดเล็ก เช่น Gemma 2B ก็มีขนาดไม่เกิน 1.3 GB ซึ่งมีขนาดมากกว่าค่ามัธยฐานของหน้าเว็บถึง 100 เท่า

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

ขนาดการดาวน์โหลดสำหรับโมเดลการตรวจจับภาษาของ MediaPipe ในแผง Chrome DevTools Network สาธิต
ในแผงเครือข่ายของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome ให้ดูขนาดการดาวน์โหลดสำหรับโมเดล AI ทั่วไป ได้แก่ Gemma 2B (LLM ขนาดเล็ก), DistilBERT (NLP ขนาดเล็ก/LLM ขนาดเล็กมาก)

เพิ่มประสิทธิภาพขนาดโมเดล

  • เปรียบเทียบคุณภาพของโมเดลและขนาดการดาวน์โหลด โมเดลขนาดเล็กอาจมีความแม่นยำเพียงพอสำหรับกรณีการใช้งานของคุณ ทั้งยังเล็กกว่ามาก การปรับแต่งอย่างละเอียดและเทคนิคการลดขนาดโมเดลมีไว้เพื่อลดขนาดโมเดลได้อย่างมากในขณะที่ยังคงความแม่นยำไว้อย่างเพียงพอ
  • เลือกโมเดลเฉพาะทางเมื่อเป็นไปได้ โมเดลที่ปรับให้เหมาะกับงานบางอย่างมักจะมีขนาดเล็กกว่า เช่น หากต้องการทํางานบางอย่างที่เฉพาะเจาะจง เช่น การวิเคราะห์ความรู้สึกหรือความเป็นพิษ ให้ใช้โมเดลที่เชี่ยวชาญในงานเหล่านี้แทน LLM ทั่วไป
ตัวเลือกโมเดลสําหรับการสาธิตการถอดเสียงด้วย AI ฝั่งไคลเอ็นต์โดย j0rd1smit

แม้ว่าโมเดลทั้งหมดเหล่านี้จะทำงานเหมือนกัน แต่มีความแม่นยำที่ต่างกัน แต่ขนาดของโมเดลก็มีความแตกต่างกันอย่างมาก โดยมีตั้งแต่ 3 MB ไปจนถึง 1.5 GB

ตรวจสอบว่าโมเดลทำงานได้หรือไม่

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

ในระหว่างนี้ คุณสามารถดำเนินการต่อไปนี้ได้

  • ตรวจสอบการรองรับ WebGPU ไลบรารี AI ฝั่งไคลเอ็นต์หลายรายการ รวมถึง Transformers.js เวอร์ชัน 3 และ MediaPipe ใช้ WebGPU ปัจจุบัน ไลบรารีเหล่านี้บางส่วนไม่ได้สำรอง กับ Wasm โดยอัตโนมัติหากไม่สนับสนุน WebGPU คุณสามารถลดปัญหานี้ได้โดยการใส่โค้ดที่เกี่ยวข้องกับ AI ไว้ในการตรวจสอบการตรวจหาฟีเจอร์ WebGPU หากทราบว่าคลัง AI ฝั่งไคลเอ็นต์ต้องใช้ WebGPU
  • นำอุปกรณ์ที่ใช้พลังงานต่ำออก ใช้ Navigator.hardwareConcurrency, Navigator.deviceMemory และ Compute Pressure API เพื่อประมาณความสามารถและภาระของอุปกรณ์ เบราว์เซอร์บางรุ่นไม่รองรับ API เหล่านี้ และ API เหล่านี้มีไว้เพื่อไม่แม่นยำโดยเจตนาเพื่อป้องกันการระบุตัวตนโดยอิงตามข้อมูลลายนิ้วมือของอุปกรณ์ แต่ก็ยังช่วยตัดอุปกรณ์ที่ดูเหมือนจะมีกำลังประมวลผลต่ำมากออกได้

สัญญาณการดาวน์โหลดขนาดใหญ่

สำหรับโมเดลขนาดใหญ่ ให้เตือนผู้ใช้ก่อนดาวน์โหลด ผู้ใช้เดสก์ท็อปมีแนวโน้มที่จะยอมรับการดาวน์โหลดขนาดใหญ่มากกว่าผู้ใช้อุปกรณ์เคลื่อนที่ หากต้องการตรวจหาอุปกรณ์เคลื่อนที่ ให้ใช้ mobile จาก User-Agent Client Hints API (หรือสตริง User-Agent หาก UA-CH ไม่รองรับ)

จำกัดการดาวน์โหลดไฟล์ขนาดใหญ่

  • ดาวน์โหลดเฉพาะสิ่งที่จำเป็น โดยเฉพาะอย่างยิ่งหากโมเดลมีขนาดใหญ่ ให้ดาวน์โหลดเมื่อมีความมั่นใจในระดับหนึ่งว่าจะใช้ฟีเจอร์ AI เช่น หากคุณมีฟีเจอร์ AI คำแนะนำในการพิมพ์ล่วงหน้า ให้ดาวน์โหลดเมื่อผู้ใช้เริ่มใช้ฟีเจอร์การพิมพ์เท่านั้น
  • แคชโมเดลอย่างชัดเจนในอุปกรณ์โดยใช้ Cache API เพื่อหลีกเลี่ยงการดาวน์โหลดทุกครั้งที่เข้าชม อย่าใช้เพียงแคช HTTP ของเบราว์เซอร์โดยนัย
  • แบ่งการดาวน์โหลดโมเดลเป็นหลายส่วน fetch-in-chunks จะแบ่งการดาวน์โหลดขนาดใหญ่ออกเป็นหลายส่วนเล็กๆ

การดาวน์โหลดและการเตรียมโมเดล

ไม่บล็อกผู้ใช้

ให้ความสำคัญกับประสบการณ์ของผู้ใช้ที่ราบรื่น: อนุญาตให้ฟีเจอร์หลักทำงานได้แม้ว่าโมเดล AI จะยังโหลดไม่สมบูรณ์

ตรวจสอบว่าผู้ใช้ยังคงโพสต์ได้
ผู้ใช้จะยังคงโพสต์รีวิวได้แม้ว่าฟีเจอร์ AI ฝั่งไคลเอ็นต์จะยังไม่พร้อมใช้งานก็ตาม สาธิตโดย @maudnals

ระบุความคืบหน้า

ขณะที่ดาวน์โหลดโมเดล ระบบจะระบุความคืบหน้าที่เสร็จสมบูรณ์และเวลาที่เหลือ

การแสดงความคืบหน้าในการดาวน์โหลดโมเดล การใช้งานที่กำหนดเองด้วยfetch-in-chunks Demo โดย @tomayac

จัดการการหยุดชะงักของเครือข่ายอย่างราบรื่น

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

การเชื่อมต่อที่ไม่เสถียรเป็นอีกเหตุผลหนึ่งที่ต้องดาวน์โหลดเป็นกลุ่มๆ

โอนงานที่ต้องใช้ทรัพยากรมากไปยัง Web Worker

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

ดูการสาธิตและการใช้งานแบบเต็มโดยอิงตาม Web Worker

การติดตามประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
ด้านบน: มี Web Worker ด้านล่าง: ไม่มี Web Worker

ระหว่างการอนุมาน

เมื่อดาวน์โหลดโมเดลและพร้อมใช้งานแล้ว คุณจะเรียกใช้การอนุมานได้ การคํานวณการอนุมานอาจใช้ทรัพยากรมาก

ย้ายการอนุมานไปยังเว็บเวิร์กเกอร์

หากการอนุมานเกิดขึ้นผ่าน WebGL, WebGPU หรือ WebNN การอนุมานจะขึ้นอยู่กับ GPU ซึ่งหมายความว่าการดำเนินการนี้เกิดขึ้นในกระบวนการแยกต่างหากที่ไม่ได้บล็อก UI

แต่สําหรับการใช้งานที่อิงตาม CPU (เช่น Wasm ซึ่งสามารถใช้เป็นทางเลือกสําหรับ WebGPU ได้หากระบบไม่รองรับ WebGPU) การเปลี่ยนการอนุมานไปยัง Web Worker จะช่วยให้หน้าเว็บตอบสนองได้อยู่เสมอ เช่นเดียวกับระหว่างการเตรียมโมเดล

การติดตั้งใช้งานอาจง่ายขึ้นหากโค้ดทั้งหมดที่เกี่ยวข้องกับ AI (การดึงข้อมูลโมเดล การเตรียมโมเดล การอนุมาน) อยู่ในที่เดียวกัน คุณจึงเลือก Web Worker ได้ไม่ว่าจะมีการใช้ GPU หรือไม่ก็ตาม

จัดการข้อผิดพลาด

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

  • จัดการข้อผิดพลาดในการอนุมาน ใส่การอนุมานไว้ในบล็อก try/catch และจัดการข้อผิดพลาดรันไทม์ที่เกี่ยวข้อง
  • จัดการข้อผิดพลาดของ WebGPU ทั้งข้อผิดพลาดที่ไม่คาดคิดและ GPUDevice.lost ซึ่งเกิดขึ้นเมื่อมีการรีเซ็ต GPU เนื่องจากอุปกรณ์ทำงานได้ไม่ดี

ระบุสถานะการอนุมาน

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

ตัวอย่างภาพเคลื่อนไหวระหว่างการอนุมาน
การสาธิตโดย @maudnals และ @argyleink

ทำให้การอนุมานยกเลิกได้

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