การสตรีมคำตอบของปัญญาประดิษฐ์ในส่วนติดต่อผู้ใช้
เรียนรู้การสตรีมเอาต์พุตของปัญญาประดิษฐ์ทีละโทเค็นไปยังส่วนหน้า เพื่อให้ AI SaaS ของคุณตอบสนองได้รวดเร็วแทนที่จะค้างระหว่างการสร้างผลลัพธ์ที่ใช้เวลานาน
การสตรีมคำตอบของปัญญาประดิษฐ์ในส่วนติดต่อผู้ใช้ เป็นบทเรียน AI SaaS Builder ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน AI SaaS Builder และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส AI SaaS Builder มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดการสตรีมจึงปรับปรุงประสบการณ์ผู้ใช้
การรอ 10 วินาทีเพื่อรับคำตอบทั้งหมดทำให้รู้สึกเหมือนระบบเสีย การสตรีม จะแสดงข้อความขณะที่กำลังสร้าง ทำให้แอปดูรวดเร็วและมีชีวิตชีวา
การสตรีมทำงานอย่างไร
แบบจำลองจะส่ง โทเค็น ออกมาทีละส่วน เซิร์ฟเวอร์ส่งต่อแต่ละส่วนไปยังเบราว์เซอร์ ซึ่งจะเพิ่มลงบนหน้าจอ
เหตุการณ์ที่ส่งจากเซิร์ฟเวอร์
SSE คือกระแสข้อมูลทางเดียวที่เรียบง่ายจากเซิร์ฟเวอร์ไปยังไคลเอนต์ผ่าน HTTP เหมาะอย่างยิ่งสำหรับการสตรีมโทเค็น
res.setHeader('Content-Type', 'text/event-stream')
res.write('data: Hello\n\n')
res.write('data: world\n\n')การรับกระแสข้อมูลบนไคลเอนต์
ใช้ตัวอ่านกระแสข้อมูลของ Fetch (หรือ EventSource) เพื่ออ่านข้อมูลทีละส่วนและอัปเดตสถานะเมื่อข้อมูลมาถึง
const reader = res.body.getReader()
while (true) {
const { value, done } = await reader.read()
if (done) break
appendText(new TextDecoder().decode(value))
}การแสดงผลทีละส่วน
เพิ่มข้อมูลแต่ละส่วนลงในบัฟเฟอร์สถานะแล้วแสดงผล หลีกเลี่ยงการแสดงผลทั้งหน้าใหม่ทุกครั้งที่มีโทเค็น เพื่อให้ส่วนติดต่อผู้ใช้ลื่นไหล
setText(prev => prev + chunk)การแสดงตัวบ่งชี้การพิมพ์
ก่อนโทเค็นแรกจะมาถึง ให้แสดงภาพเคลื่อนไหว กำลังโหลด หรือเคอร์เซอร์ เพื่อให้ผู้ใช้ทราบว่าระบบเริ่มทำงานแล้ว
การจัดการการยกเลิก
ให้ผู้ใช้ หยุดการสร้างผลลัพธ์ที่ใช้เวลานาน ยกเลิกคำขอเพื่อประหยัดโทเค็นและค่าใช้จ่าย
const controller = new AbortController()
fetch('/generate', { signal: controller.signal })
// stop button:
controller.abort()การสตรีม Markdown อย่างปลอดภัย
Markdown ที่ยังไม่สมบูรณ์อาจแสดงผลผิดรูปแบบระหว่างการสตรีม ให้แสดงผลไปเรื่อย ๆ แต่ ทำความสะอาด HTML สุดท้ายเพื่อป้องกันการแทรกคำสั่ง
การจัดการข้อผิดพลาดระหว่างการสตรีม
กระแสข้อมูลอาจล้มเหลวระหว่างทาง ตรวจจับกระแสข้อมูลที่ขาดตอนและแสดงตัวเลือก ลองใหม่ที่ชัดเจน แทนการปล่อยให้มีข้อความขาดหาย
ข้อควรพิจารณาด้านการเข้าถึง
ข้อความที่อัปเดตอย่างรวดเร็วอาจทำให้โปรแกรมอ่านหน้าจอรับภาระมากเกินไป โปรดใช้พื้นที่เนื้อหาแบบสดที่ประกาศอย่างสุภาพ และประกาศเมื่อทำงานเสร็จ แทนการประกาศทุกโทเคน
<div aria-live="polite">{streamedText}</div>เมื่อไม่ควรใช้การสตรีม
สำหรับผลลัพธ์ที่มีโครงสร้างสั้น ๆ (เช่นออบเจ็กต์ JSON เดียว) การสตรีมเพิ่มความซับซ้อนโดยให้ประโยชน์เพียงเล็กน้อย ควรใช้กับข้อความที่ยาวและอ่านได้โดยมนุษย์เท่านั้น
ตรวจสอบอย่างรวดเร็ว
ตรวจสอบความรู้เกี่ยวกับการสตรีมของคุณ
สรุปทบทวน
คุณได้เรียนรู้ว่าการสตรีมโทเคนทำงานอย่างไร วิธีส่งข้อมูลด้วย SSE วิธีรับข้อมูลบนไคลเอนต์ การแสดงผลทีละส่วน การแสดงตัวบ่งชี้การพิมพ์ การรองรับการยกเลิก การจัดการข้อผิดพลาดระหว่างการสตรีม การทำให้เข้าถึงได้ และกรณีที่การสตรีมไม่คุ้มค่า
เรียนรู้ AI SaaS Builder ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 12
- บทเรียน
- 47
คำถามที่พบบ่อย
บทเรียน “การสตรีมคำตอบของปัญญาประดิษฐ์ในส่วนติดต่อผู้ใช้” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การสตรีมคำตอบของปัญญาประดิษฐ์ในส่วนติดต่อผู้ใช้” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส AI SaaS Builder ให้อัปเกรดเป็น CoddyKit PRO คอร์ส AI SaaS Builder มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การสตรีมคำตอบของปัญญาประดิษฐ์ในส่วนติดต่อผู้ใช้”
เรียนรู้การสตรีมเอาต์พุตของปัญญาประดิษฐ์ทีละโทเค็นไปยังส่วนหน้า เพื่อให้ AI SaaS ของคุณตอบสนองได้รวดเร็วแทนที่จะค้างระหว่างการสร้างผลลัพธ์ที่ใช้เวลานาน คุณปฏิบัติ AI SaaS Builder ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน AI SaaS Builder หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน AI SaaS Builder บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การสตรีมคำตอบของปัญญาประดิษฐ์ในส่วนติดต่อผู้ใช้” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน AI SaaS Builder นี้ได้ไหม
ได้ บทเรียน AI SaaS Builder ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เฟรมเวิร์กส่วนหน้าสำหรับ SaaS
- การแสดงผลลัพธ์ของปัญญาประดิษฐ์เป็นภาพ
- แนวทางปฏิบัติที่ดีที่สุดด้านประสบการณ์ผู้ใช้ (UX)
- การสตรีมคำตอบของปัญญาประดิษฐ์ในส่วนติดต่อผู้ใช้