วิธีสตรีมการตอบสนองของ OpenAI ใน NextJS

เผยแพร่แล้ว: 2024-03-22
AI/ML 4 นาที 3
22 มีนาคม 2024

สรุป:

เรียนรู้วิธีสตรีมการตอบสนองของ OpenAI ใน NextJS ได้อย่างราบรื่นโดยใช้ AI SDK ของ Vercel ด้วยกระบวนการบูรณาการที่เรียบง่ายตามที่ระบุไว้ในคู่มือนี้ นักพัฒนาสามารถควบคุมพลังของการสร้าง AI แบบเรียลไทม์ได้อย่างมีประสิทธิภาพ ปรับปรุงประสบการณ์ผู้ใช้และประสิทธิภาพเวิร์กโฟลว์

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

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

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

หมายเหตุ: เราจะใช้ NextJS และ Vercel AI SDK ทั่วทั้งบล็อก

Next.js คืออะไร?

Next.js เป็นเฟรมเวิร์ก React สำหรับการสร้างเว็บแอปพลิเคชันแบบฟูลสแตก คุณใช้ React Components เพื่อสร้างอินเทอร์เฟซผู้ใช้ และใช้ Next.js สำหรับคุณสมบัติเพิ่มเติมและการเพิ่มประสิทธิภาพ

ภายใต้ประทุน Next.js ยังสรุปและกำหนดค่าเครื่องมือที่จำเป็นสำหรับ React โดยอัตโนมัติ เช่น การรวมกลุ่ม การคอมไพล์ และอื่นๆ สิ่งนี้ช่วยให้คุณมุ่งเน้นไปที่การสร้างแอปพลิเคชันของคุณแทนที่จะใช้เวลาไปกับการกำหนดค่า

ไม่ว่าคุณจะเป็นนักพัฒนารายบุคคลหรือเป็นส่วนหนึ่งของทีมขนาดใหญ่ Next.js สามารถช่วยคุณสร้างแอปพลิเคชัน React แบบโต้ตอบ ไดนามิก และรวดเร็วได้

เวอร์เซลคืออะไร?

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

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

ความสัมพันธ์ระหว่าง Vercel และ Nextjs คืออะไร?

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

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

เราจะทำให้การสตรีมง่ายขึ้นโดยใช้ Vercel และ NextJS ได้อย่างไร

ในเดือนมิถุนายน 2023 Vercel ได้เปิดตัวไลบรารี ai ใหม่ (Vercel AI SDK) ซึ่งมีอะแดปเตอร์ LLM ในตัว / ตัวช่วย UI แรกสตรีมมิ่ง / ตัวช่วยสตรีมและการโทรกลับ ตั้งแต่ไลบรารีนี้ การสตรีมการตอบสนองของ OpenAI ก็ง่ายขึ้นมาก

ก่อนที่จะเจาะลึกตัวอย่าง ให้ฉันบอกคุณว่าไลบรารีโหนด/เฟรมเวิร์กใดบ้างที่ Vercel AI SDK รองรับ

รองรับ React/Next.js, Svelte/SvelteKit และรองรับ Nuxt/Vue ในเร็วๆ นี้

ตัวอย่าง — ส่วนหน้า/ส่วนหลังทั้งใน NextJS (A react Framework)

ขั้นตอนที่ 1: การสร้างแอป NextJS และติดตั้ง Vercel AI SDK

npx create-next-app@latest

หากต้องการติดตั้ง SDK ให้ป้อนคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ:

เวลา 22.00 น. ฉัน ai

หากต้องการติดตั้ง Openai ให้ป้อนคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ:

เวลา 23.00 น. ฉันเปิดแล้ว

ฉันเพิ่งปฏิบัติตามโครงสร้างโฟลเดอร์แบบธรรมดา/ค่าเริ่มต้นของสิ่งที่ npx create-next-app@latest สร้างขึ้นสำหรับฉันเพื่อทำให้การสาธิตนี้ง่ายและเข้าใจง่าย

ขั้นตอนที่ 2: สร้างส่วนหน้าเพื่อสตรีมการตอบกลับ

"ใช้ไคลเอนต์"

นำเข้า { useState } จาก "โต้ตอบ";

ส่งออกฟังก์ชันเริ่มต้น Home() {

const [คำถาม setQuestion] = useState("")

const [คำตอบ setAnswer] = useState("")

/// ฟังก์ชั่นเพื่อเรียกเราเตอร์ openai และประมวลผลการตอบสนองการสตรีม

ฟังก์ชัน async ดึงการตอบสนอง () {

/// โทรสอบถามเส้นทาง

การตอบสนอง const: any = รอการดึงข้อมูล ("/api/chat", {

วิธีการ: "โพสต์"

เนื้อความ: JSON.stringify({

คำถาม

})

ถัดไป: { ตรวจสอบอีกครั้ง: 0 }

})

ให้การตอบสนอง = "";

ผู้อ่าน const = response.body

.pipeThrough (TextDecoderStream ใหม่ ())

.getReader();

/// ดำเนินการสตรีม

ในขณะที่ (จริง) {

const { ค่า เสร็จสิ้น } = รอ reader.read();

ถ้า (เสร็จแล้ว) {

หยุดพัก;

}

การตอบสนอง += ค่า;

setAnswer(ตอบกลับ);

}

}

กลับ (

<div>

<label htmlFor="ถามคำถามของคุณ"></label>

<input type="text" value={question} onChange={(e)=>setQuestion(e.target.value)}/>

<button onClick={retriveResponse}>การตอบกลับของสตรีม</button>

<br />

<p>{answer}</p>

</div>

);

}

ส่วนประกอบด้านบนสร้างอินเทอร์เฟซที่ผู้ใช้สามารถป้อนคำถาม และคลิกปุ่มเพื่อส่งคำถามไปยัง API ฝั่งเซิร์ฟเวอร์ (/api/chat) และแสดงการตอบสนองแบบสตรีมจากเซิร์ฟเวอร์แบบเรียลไทม์

ขั้นตอนที่ 3: สร้างเส้นทางส่วนหลังเพื่อสตรีมการตอบกลับ

นำเข้า { OpenAIStream, StreamingTextResponse } จาก "ai";

นำเข้า OpenAI จาก "openai";

// ตั้งค่ารันไทม์เป็น Edge เพื่อประสิทธิภาพที่ดีที่สุด

ส่งออกการกำหนดค่า const = {

รันไทม์: "ขอบ",

};

ส่งออกตัวจัดการฟังก์ชัน async เริ่มต้น (คำขอ, ตอบกลับ) {

const { คำถาม } = รอ request.json();

// ดึงการตอบสนองจาก OpenAI API

const openai = OpenAI ใหม่ ({

apiKey: กระบวนการ env.NEXT_PUBLIC_OPENAI_KEY,

});

const responseFromOpenAI = รอ openai.chat.completions.create({

รุ่น: "gpt-3.5-เทอร์โบ",

อุณหภูมิ: 0,

ท็อป_พี: 1,

ข้อความ: [{ บทบาท: "ผู้ใช้" เนื้อหา: คำถาม }],

กระแส: จริง,

})

พยายาม {

// แปลงการตอบกลับเป็นสตรีมข้อความที่เป็นมิตร

const stream = OpenAIStream (ตอบกลับจาก OpenAI);

//ตอบตามกระแส

ส่งคืน StreamingTextResponse ใหม่ (สตรีม);

} จับ (ข้อผิดพลาด) {

กลับ response.send (400). send (ข้อผิดพลาด);

}

}

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

ขั้นตอนที่ 4: เรียกใช้แอป

ผู้พัฒนารัน NPM

เอาท์พุต

วีดีโอ.webm

วิดีโอของการสาธิต

drive.google.com

หากคุณได้ดูวิดีโอ คุณอาจมีความเข้าใจที่ดีเกี่ยวกับวิธีการทำงานของการสาธิต สำหรับผู้ที่สนใจสำรวจโค้ดฉบับเต็ม สามารถพบได้บน GitHub ที่ลิงก์นี้: Next.js OpenAI Streaming

อ้างอิง:

https://vercel.com/blog/introduction-the-vercel-ai-sdk

https://sdk.vercel.ai/docs https://platform.openai.com/docs/introduction

https://platform.openai.com/docs/introduction

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