เผยแพร่: 30 เมษายน 2026
AI ในตัวช่วยให้เว็บไซต์หรือเว็บแอปพลิเคชันของคุณทำงานที่ขับเคลื่อนด้วย AI ได้ โดยไม่ต้องติดตั้งใช้งาน จัดการ หรือโฮสต์โมเดลด้วยตนเอง คุณอาจพบว่าการเปลี่ยนจากเดโมไปเป็นฟีเจอร์ที่พร้อมใช้งานจริงเป็นเรื่องท้าทาย เอกสารนี้ ครอบคลุมข้อควรพิจารณาด้านเทคนิคและ UX เพื่อช่วยให้คุณหลีกเลี่ยงข้อผิดพลาดที่พบบ่อย
เตรียมโมเดลล่วงหน้า
ใช้กับ API ทั้งหมด เช่น Summarizer, Translator และ Writer
สิ่งที่ควรทำ: เริ่มต้นเซสชันทันทีที่คุณทราบถึงความตั้งใจของผู้ใช้ เนื่องจากต้องมีการเปิดใช้งานผู้ใช้เพื่อเริ่มต้นเซสชัน คุณจึงใช้การโต้ตอบใดก็ได้ เช่น การคลิกที่ใดก็ได้ในหน้าเว็บที่นำเสนอฟีเจอร์ที่ทำงานด้วยระบบ AI ซึ่งจะเตรียมโมเดลและรันไทม์ ขณะที่ผู้ใช้โต้ตอบกับ UI เมื่อเกี่ยวข้อง ให้เริ่มงาน AI ที่มีแนวโน้มมากที่สุดถัดไปทันทีที่คุณเริ่มแสดงผลลัพธ์
อย่า: รอจนกว่าผู้ใช้จะคลิก "สร้าง" เพื่อเริ่มต้นเซสชัน ซึ่งจะทำให้เกิดการหน่วงเวลาของ Cold Start หลายวินาที เนื่องจากโมเดลต้องโหลดครั้งแรกเข้าสู่หน่วยความจำและเตรียมไปป์ไลน์การดำเนินการก่อน
ตั้งค่าพรอมต์เริ่มต้นระหว่างการสร้าง
ใช้กับ: Prompt API
สิ่งที่ควรทำ: ระบุวิธีการของระบบในระหว่างการเริ่มต้นเซสชันเพื่อปรับปรุง ความเร็วของพรอมต์แรก
อย่า: เริ่มต้นด้วยเซสชันที่ว่างเปล่าและส่งคำสั่งของระบบเป็นส่วนหนึ่งของ
การเรียกใช้ prompt() ครั้งแรก ซึ่งจะเพิ่มเวลาในการตอบสนองเนื่องจากบังคับให้โมเดล
ประมวลผลคำสั่งเหล่านั้นในนาทีสุดท้าย
// ✅ DO: Create the session as early as possible (tip on warming up the model early) and use initialPrompts for system instructions in the create call
const session = await LanguageModel.create({
initialPrompts: [
{ role: 'system', content: 'You are a helpful assistant specialized in code reviews.' }
]
});
// A few moments later, when the user triggers the AI feature
const review = await session.prompt(`Review the following code:\n\n${code}`);
// ❌ DON'T: Send instructions using prompt() after creation
// const slowerSession = await LanguageModel.create();
// await slowerSession.prompt(`You are a helpful assistant specialized in code reviews.\n\nReview the following code:\n\n${code}`); // Higher latency
โคลนเซสชันสำหรับงานที่ทำซ้ำ
ใช้กับ: Prompt API
สำหรับ Prompt API แต่ละเซสชันจะติดตามบริบทของ การสนทนา โดยคำนึงถึงการโต้ตอบก่อนหน้าทั้งหมด เนื่องจากโคลนจะรับช่วงทุกอย่างจากเซสชันหลัก รวมถึงพรอมต์เริ่มต้นและประวัติการโต้ตอบทั้งหมดจนถึงจุดที่โคลน คุณจึงควรจัดโครงสร้างการใช้งานเพื่อรับช่วงเฉพาะสิ่งที่คุณต้องการ
สิ่งที่ควรทำ
- สร้างเซสชันพื้นฐาน: สร้างเซสชันพื้นฐานที่มีเฉพาะคำสั่งของระบบและไม่มีบริบทการสนทนาก่อนหน้า เพื่อจัดการงานที่ไม่เกี่ยวข้องอย่างมีประสิทธิภาพ
- โคลนพื้นฐาน: ใช้
clone()ในเซสชันพื้นฐานนั้นสำหรับงานใหม่เพื่อประหยัด ค่าใช้จ่ายในการแยกวิเคราะห์คำสั่งของระบบที่มีขนาดใหญ่ซ้ำ ซึ่งจะช่วยให้คุณสร้าง การสนทนาแบบคู่ขนานหรือรีเซ็ตงานเป็นค่าพื้นฐานได้
สิ่งที่ไม่ควรทำ
- อย่าใช้เซสชันเดียวกันซ้ำสำหรับงานที่ไม่เกี่ยวข้อง และหลีกเลี่ยงการโคลนเซสชันที่มีประวัติการโต้ตอบที่ไม่จำเป็นอยู่แล้ว ทั้ง 2 รูปแบบ อาจทำให้บริบทก่อนหน้าที่ไม่เกี่ยวข้องรบกวนงานปัจจุบันของคุณ
- อย่าเรียกใช้
create()ซ้ำๆ ด้วยคำสั่งระบบที่เหมือนกันและมีขนาดใหญ่ ให้ใช้รูปแบบการโคลนแทนเพื่อเพิ่มประสิทธิภาพ
// ✅ DO: Create a baseline session and clone it for each new task
const baseSession = await LanguageModel.create({
initialPrompts: [{
role: 'system',
content: 'You are a technical editor...',
}],
});
// Clone the base session once for the first task
const task1 = await baseSession.clone();
const response1 = await task1.prompt("Review this first draft...");
// ... Repeat the cloning pattern for subsequent independent tasks
// Each task starts fresh from the baseline system instructions
// ❌ DON'T:
// Bad performance pattern: repeated create() calls for identical tasks.
// This forces the model to re-parse instructions every time, increasing latency.
// const sessionA = await LanguageModel.create({ initialPrompts: [...] });
// await sessionA.prompt("Task 1...");
// const sessionB = await LanguageModel.create({ initialPrompts: [...] });
// await sessionB.prompt("Task 2...");
// Bad quality pattern: reusing the same session for unrelated tasks.
// const session = await LanguageModel.create();
// await session.prompt("Analyze this financial report...");
// Unrelated task in the same session:
// await session.prompt("Now write a children's story...");
ทำลายเซสชันที่ไม่ได้ใช้
ใช้กับ: API ทั้งหมด
สิ่งที่ควรทำ: เรียกใช้ destroy() อย่างชัดเจนในเซสชันที่คุณไม่ต้องการใช้อีกต่อไป เพื่อเพิ่มพื้นที่ว่างในหน่วยความจำเมื่อไม่ได้ใช้ฟีเจอร์
อีกต่อไป หากใช้รูปแบบการโคลน ให้เก็บเซสชันฐานไว้และ
ทำลายโคลนที่คุณไม่ต้องการแล้ว
อย่า:เปิดเซสชันขนาดใหญ่หลายเซสชันพร้อมกัน แต่ละเซสชันจะใช้หน่วยความจำ
ซึ่งทำให้เกิดการใช้ทรัพยากรโดยไม่จำเป็นและอาจกลายเป็นปัญหาได้ โปรแกรมเก็บขยะจะล้างเซสชันโดยอัตโนมัติ แต่การเรียกใช้ destroy()
จะช่วยเพิ่มพื้นที่หน่วยความจำได้เร็วขึ้น
// ✅ DO: Use the clone and destroy it immediately after
const clone = await baseSession.clone();
const response = await clone.prompt("Quick task...");
// Free memory right away: destry the clone, keep the baseSession
clone.destroy();
แสดงผลการตอบกลับแบบสตรีมอย่างปลอดภัยและมีประสิทธิภาพ
มีผลกับ: API ทั้งหมดที่รองรับการสตรีม (Prompt, Summarizer, Writer, Rewriter และ Translator)
สิ่งที่ควรทำ: ถือว่าเอาต์พุตทั้งหมดของ LLM เป็นเนื้อหาที่ไม่น่าเชื่อถือ ล้างข้อมูลเอาต์พุตแบบรวมทั้งหมด ไม่ใช่แค่ก้อนข้อมูล เนื่องจากโค้ดที่เป็นอันตรายอาจแยกออกจากการอัปเดต ก่อนที่จะแสดงผล ให้ใช้ Sanitizer API ในที่ที่ระบบรองรับ หากไม่ต้องการให้ประสิทธิภาพลดลง ให้ใช้ตัวแยกวิเคราะห์มาร์กดาวน์แบบสตรีมมิง เช่น streaming-markdown
อย่า: ตั้งค่า innerHTML โดยตรงในการอัปเดตแต่ละก้อน ซึ่งจะช้า
โดยเฉพาะอย่างยิ่งเมื่อมีการจัดรูปแบบที่ซับซ้อน เช่น การไฮไลต์ไวยากรณ์ และเสี่ยงต่อการ
แทรกโค้ด
import * as smd from "streaming-markdown";
// Set up virtual buffer and Sanitizer API
const sanitizer = new Sanitizer({
allowElements: ['figure', 'figcaption', 'p', 'br', 'strong', 'em', 'img', 'a'],
allowAttributes: {
'loading': ['img'], 'decoding': ['img'], 'src': ['img'], 'href': ['a']
}
});
// Create an off-screen fragment so the parser doesn't cause flicker
// or trigger XSS in the live DOM during the building process.
const buffer = new DocumentFragment();
const parser = smd.parser_new(buffer);
// Use sanitizer as a gatekeeper / cleaner function so we can combine it with the streaming Markdown parser
function syncSanitized(target, sourceFragment) {
// .sanitize() returns a fresh, clean DocumentFragment
const cleanFragment = sanitizer.sanitize(sourceFragment);
// replaceChildren is the modern high-performance way to swap DOM content
target.replaceChildren(cleanFragment);
}
// Streaming Logic
// `chunks` keeps track of the raw string (useful for logs/debug)
chunks += chunk;
// Let the parser build the DOM incrementally in the buffer.
// This is high-performance because the buffer is not live
smd.parser_write(parser, chunk);
// Use the Sanitizer API to port the content safely to the container.
syncSanitized(container, buffer);
เพิ่มประสิทธิภาพอินพุตเพื่อความเร็ว
ใช้กับ: API ทั้งหมด
สิ่งที่ควรทำ: ส่งเฉพาะสิ่งที่จำเป็นจริงๆ ให้กับโมเดล ตัดทุกอย่างที่ไม่เกี่ยวข้องกับงานที่ทำอยู่ สำหรับชุดข้อมูลขนาดใหญ่ ให้ระบุภาพรวมสั้นๆ และ เลือกรายการที่เกี่ยวข้องเพียงเล็กน้อย
อย่าส่งข้อความดิบที่ยังไม่ได้ประมวลผล ข้อมูลเมตาที่ไม่จำเป็น แท็ก HTML หรือรายการขนาดใหญ่ที่ไม่ได้กรองไปยัง API เวลาในการตอบสนองจะเพิ่มขึ้นอย่างมากตามขนาดอินพุต ซึ่งอาจทำให้ฟีเจอร์ AI ดูเหมือนใช้งานไม่ได้ในอุปกรณ์หลายเครื่อง
// ✅ DO: Send only relevant text
const cleanText = document.querySelector('#article').innerText;
const summary = await Summarizer.summarize(cleanText);
// ❌ DON'T: Send the entire DOM structure
// const dirtyText = document.querySelector('#article').innerHTML;
ใช้เอาต์พุตที่มีโครงสร้างเพื่อให้ได้ผลลัพธ์ที่คาดการณ์ได้
ใช้กับ: Prompt API
สิ่งที่ควรทำ: เมื่อต้องการให้โมเดลแสดงข้อมูลในรูปแบบที่เฉพาะเจาะจง ให้ใช้เอาต์พุตที่มีโครงสร้างโดยระบุฟิลด์ responseConstraint เพื่อระบุสคีมา JSON ซึ่งจะช่วยให้มั่นใจได้ว่า
เอาต์พุตจะคาดการณ์ได้ และช่วยให้คุณไม่ต้องทำการประมวลผลภายหลังที่ซับซ้อน
หรือการแยกวิเคราะห์ด้วยตนเอง
อย่า: ใช้คำสั่งภาษาธรรมชาติ (เช่น "แสดงผลเฉพาะ JSON") เพียงอย่างเดียว โมเดลอาจมีคำเสริมที่ใช้ในการสนทนาซึ่งทำให้ตัวแยกวิเคราะห์ของคุณหยุดทำงาน
// ✅ DO: Use a JSON Schema for predictable results
const schema = {
type: "object",
properties: {
isTopicCats: { type: "boolean" }
}
};
const result = await session.prompt(`Is this post about cats?\n\n${post}`, {
responseConstraint: schema,
});
console.log(JSON.parse(result).isTopicCats);
แยกการสร้างออกจากข้อจำกัดด้านความยาว
ใช้กับ Prompt API เนื่องจากเป็น API เดียวที่รองรับสคีมาเอาต์พุตที่มีโครงสร้าง
สิ่งที่ควรทำ: ปล่อยให้โมเดลสร้างคำตอบตามธรรมชาติ แล้วใช้ตรรกะฝั่งไคลเอ็นต์ เพื่อตัดข้อความให้พอดีกับ UI
อย่า: บังคับใช้ขีดจำกัดอักขระที่เข้มงวด เช่น maxLength: 125 โดยใช้สคีมาเอาต์พุตที่มีโครงสร้าง เมื่อคำตอบของโมเดลยาวเกินขีดจำกัดที่คุณตั้งไว้ โมเดลอาจเปลี่ยนไปใช้โทเค็นที่มีความหนาแน่นสูง เช่น ภาษาต่างประเทศหรืออีโมจิ เพื่อบีบอัดความหมาย ซึ่งส่งผลให้เอาต์พุตไม่สมเหตุสมผล
/* DO: Handle overflow using CSS */
.result {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; /* Displays '…' */
}
// ❌ DON'T: Force length in the prompt
const result = await session.prompt("Write a bio in exactly 50 characters.");
จัดการความอดทนของผู้ใช้
ใช้กับ: API ทั้งหมด
สิ่งที่ควรทำ: ใช้ภาพเคลื่อนไหวและเทคนิค UI เพื่อจัดการความอดทนของผู้ใช้ แนวทางที่ดีที่สุดจะขึ้นอยู่กับกรณีการใช้งานและความยาวที่คาดไว้ของเอาต์พุต API ลองดูไอเดียต่อไปนี้เป็นตัวอย่าง
- การสตรีมเนื้อหาขนาดยาว: สำหรับข้อมูลสรุปหรือแชท การสตรีมจะสร้าง เอฟเฟกต์ข้อความแบบเครื่องพิมพ์ดีดต่อโทเค็นโดยค่าเริ่มต้น ซึ่งจะช่วยให้คุณรู้สึกเป็นธรรมชาติและได้รับ ความคิดเห็นทันที
- การไม่สตรีมสำหรับงานสั้นๆ (หรืองานแบบอะซิงโครนัสที่ใช้เวลานาน): สำหรับเอาต์พุตสั้นๆ เช่น ข้อความแทน การไม่สตรีมจะช่วยสร้าง UI ที่ดูดีขึ้น นอกจากนี้ยังช่วยให้มีเวลาเตรียมงาน AI ถัดไปในเชิงคาดการณ์ขณะที่งานปัจจุบันกำลังเรนเดอร์ แนวทางนี้ใช้ได้กับงานแบบอะซิงโครนัสหรือแบบเบื้องหลังที่ใช้เวลานานกว่าด้วย หากไม่ได้บล็อกผู้ใช้ในเอาต์พุตเพื่อดำเนินการต่อ ก็ไม่จำเป็นต้องสร้างเอาต์พุตทันที ส่งสัญญาณว่า กระบวนการกำลังดำเนินการใน UI
- การเปลี่ยนภาพสำหรับการอัปเดต: เมื่อแปลหรือเขียนข้อความใหม่ ให้ใช้ภาพเคลื่อนไหว เช่น การเปลี่ยนรูปคำ
อย่า: อัปเดต UI โดยไม่มีคำแนะนำด้วยภาพ
สอดคล้องกับโมเดลทางจิตของผู้ใช้เกี่ยวกับเวลาและการทำงาน
ใช้กับ: API ทั้งหมด
ทำ: พิจารณาการหน่วงเวลาเทียม 1 หรือ 2 วินาทีหากการตอบกลับเกิดขึ้น แทบจะทันที ในทางตรงกันข้าม ผู้ใช้อาจพบว่าผลการค้นหาน่าเชื่อถือมากขึ้นเมื่อรับรู้ถึงกระบวนการสร้างที่สอดคล้องกับความยากของงานที่รับรู้ ใช้ภาพเคลื่อนไหวเพื่อส่งสัญญาณว่ามีการประมวลผล AI
อย่า: ทำให้ผู้ใช้ประหลาดใจด้วยการแทนที่ UI ทันที
อนุญาตให้ผู้ใช้ไปยังส่วนต่างๆ และเลิกทำการแก้ไขด้วย AI ได้อย่างรวดเร็ว
ใช้กับ: API ทั้งหมด
สิ่งที่ควรทำ: ติดตั้ง UI ด้วยตัวควบคุมขั้นตอนหรือประวัติการนำทางที่ช่วยให้ผู้ใช้ สำรวจผลลัพธ์ต่างๆ ได้อย่างมั่นใจ และช่วยให้ผู้ใช้ยกเลิกการแก้ไขด้วย AI ได้อย่างรวดเร็ว ซึ่งจะช่วยให้มั่นใจว่าเวอร์ชันต่างๆ จะยังคงพร้อมใช้งาน
อย่า: เขียนทับฉบับร่างก่อนหน้าของผู้ใช้หรือผลลัพธ์จาก AI ที่ผู้ใช้อาจชอบ โดยไม่มีวิธีกลับไป แก้ไข หรือเปรียบเทียบเวอร์ชัน
เพิ่มอำนาจให้ผู้ใช้ควบคุมและลบล้าง
ใช้กับ: API ทั้งหมด
สิ่งที่ควรทำ: ให้ผู้ใช้เป็นผู้พูดคำสุดท้ายเสมอ มีวิธี ลบล้างคำแนะนำด้วยตนเอง API อาจให้ผลลัพธ์ที่ไม่ถูกต้อง
ไม่ควร: บังคับให้ผลลัพธ์ที่ AI สร้างขึ้นเป็นตัวเลือกเดียว
แคชผลลัพธ์สำหรับงานที่ทำซ้ำ
ใช้กับ: API ทั้งหมด
สิ่งที่ควรทำ: ใช้แคชผลการค้นหาในเครื่อง (เช่น ใช้ sessionStorage หรือ
IndexedDB) สำหรับอินพุตหรือคำค้นหาที่ซ้ำกัน ทำให้อินพุตเป็นมาตรฐานโดยการตัด
ช่องว่างและเปลี่ยนเป็นตัวพิมพ์เล็กเพื่อเพิ่มการเข้าชมแคช สำหรับอินพุตที่มีขนาดใหญ่ เช่น รูปภาพ ให้สร้างแฮชเพื่อใช้เป็นคีย์แคช ตั้งค่า Time to Live (TTL) แบบอนุรักษ์นิยมสำหรับแคช (หรือแสดงผลลัพธ์ที่แคชไว้ขณะอัปเดตในเบื้องหลัง) อนุญาตให้ผู้ใช้ทริกเกอร์การอนุมานใหม่หากผลลัพธ์ไม่น่าพอใจ
อย่า: เรียกใช้การอนุมานเดียวกันซ้ำสำหรับคำค้นหาที่ซ้ำกันหรือข้อมูลที่ป้อนเหมือนกัน เช่น เมื่อผู้ใช้ไปยังหน้าผลการค้นหาไปมา แม้ว่าการอนุมานในอุปกรณ์จะไม่มีค่าใช้จ่ายในแง่ของต้นทุนระบบคลาวด์ แต่ก็ มีค่าใช้จ่ายในแง่ของเวลาของผู้ใช้และอายุการใช้งานแบตเตอรี่
// ✅ DO: Check a local cache before running inference
async function getAiResponse(userInput, forceRefresh = false) {
// Normalize the query to increase cache hits
const query = userInput.trim().toLowerCase();
const cacheKey = `ai_results_${query}`;
const TTL_MS = 3600000; // 1 hour conservative TTL
if (!forceRefresh) {
const itemStr = localStorage.getItem(cacheKey);
if (itemStr) {
const item = JSON.parse(itemStr);
const now = Date.now();
// Check if the item has expired
if (now < item.expiry) {
// Lightweight safety check before rendering
if (isValid(item.value)) return item.value;
} else {
// Delete the stale entry if the TTL has passed
localStorage.removeItem(cacheKey);
}
}
}
// Fallback: Run inference if no valid cache exists
const session = await LanguageModel.create();
const response = await session.prompt(userInput);
// Store the result for future use (with an expiration)
const cacheData = {
value: response,
expiry: Date.now() + TTL_MS
};
localStorage.setItem(cacheKey, JSON.stringify(cacheData));
return response;
}