Cara melakukan streaming Respon OpenAI di NextJS
Diterbitkan: 2024-03-22Ringkasan:
Pelajari cara melakukan streaming respons OpenAI dengan lancar di NextJS menggunakan AI SDK Vercel. Dengan proses integrasi sederhana yang diuraikan dalam panduan ini, pengembang dapat secara efisien memanfaatkan kekuatan generasi AI real-time, sehingga meningkatkan pengalaman pengguna dan efisiensi alur kerja.
Dalam lanskap digital yang berkembang pesat saat ini, mengintegrasikan kemampuan AI yang canggih menjadi suatu keharusan bagi perusahaan yang berupaya untuk tetap kompetitif. Sebagai perusahaan pengembang OpenAI, memanfaatkan kekuatan teknologi mutakhir seperti NextJS untuk menyederhanakan proses menghasilkan dan mengelola respons OpenAI memberikan banyak keuntungan.
Dari meningkatkan pengalaman pengguna hingga mengoptimalkan efisiensi alur kerja, keahlian perusahaan pengembang OpenAI dapat berdampak besar pada integrasi dan pemanfaatan kemampuan OpenAI dalam kerangka NextJS. Dalam panduan ini, kami mempelajari strategi dan wawasan yang penting bagi perusahaan pengembang OpenAI untuk secara efektif memanfaatkan potensi NextJS dalam menyederhanakan respons OpenAI, sehingga memberdayakan bisnis untuk membuka bidang inovasi dan efisiensi baru.
Kami tahu Anda merasa frustrasi dan sedang menjelajahi streaming tanggapan OpenAI di NextJS. Ada banyak cara untuk melakukan streaming respons OpenAI dan juga banyak hal yang harus dilakukan setelah streaming yang menguraikan data agar dapat dibaca.
Catatan: Kami akan menggunakan NextJS dan Vercel AI SDK di seluruh blog.
Apa itu Next.js?
Next.js adalah kerangka React untuk membangun aplikasi web full-stack. Anda menggunakan React Components untuk membangun antarmuka pengguna, dan Next.js untuk fitur dan pengoptimalan tambahan.
Di balik terpalnya, Next.js juga mengabstraksi dan secara otomatis mengonfigurasi peralatan yang diperlukan untuk React, seperti bundling, kompilasi, dan banyak lagi. Hal ini memungkinkan Anda untuk fokus membangun aplikasi daripada menghabiskan waktu dengan konfigurasi.
Baik Anda seorang pengembang individu atau bagian dari tim yang lebih besar, Next.js dapat membantu Anda membangun aplikasi React yang interaktif, dinamis, dan cepat.
Apa itu Vercel?
Vercel adalah platform untuk pengembang yang menyediakan alat, alur kerja, dan infrastruktur yang Anda perlukan untuk membangun dan menerapkan aplikasi web Anda lebih cepat, tanpa memerlukan konfigurasi tambahan.
Vercel mendukung kerangka kerja frontend populer yang siap digunakan, dan infrastrukturnya yang terukur dan aman didistribusikan secara global untuk menyajikan konten dari pusat data di dekat pengguna Anda untuk kecepatan optimal.
Apa hubungan antara Vercel dan Nextjs?
Platform Vercel dibuat oleh pencipta Next.js, dirancang untuk aplikasi Next.js. Kesimpulannya, hubungan antara Vercel dan Next.js mewakili kemitraan simbiosis yang mengubah cara kami membangun dan menerapkan aplikasi web. Dengan memanfaatkan kekuatan kedua platform, pengembang dapat membuka kemungkinan-kemungkinan baru dan memberikan pengalaman web luar biasa yang menonjol dalam lanskap kompetitif saat ini.
Selama pengembangan, Vercel menyediakan alat untuk kolaborasi real-time pada proyek Anda seperti pratinjau otomatis dan lingkungan produksi, serta komentar pada penerapan pratinjau.
Bagaimana cara membuat streaming lebih mudah menggunakan Vercel dan NextJS?
Pada bulan Juni 2023 Vercel merilis perpustakaan baru ai (Vercel AI SDK) yang menyediakan Adaptor LLM Bawaan / Pembantu UI Streaming Pertama / Pembantu Aliran dan Panggilan Balik. Sejak perpustakaan ini, respons streaming OpenAI menjadi lebih mudah.
Sebelum masuk ke contoh, izinkan saya memberi tahu Anda perpustakaan/kerangka node apa yang didukung oleh Vercel AI SDK.
Ini mendukung React/Next.js, Svelte/SvelteKit, dengan dukungan untuk Nuxt/Vue segera hadir.
Contoh — Frontend/Backend keduanya di NextJS (Kerangka reaksi)
Langkah 1: Membuat aplikasi NextJS dan menginstal Vercel AI SDK
npx buat-aplikasi-berikutnya@terbaru
Untuk menginstal SDK, masukkan perintah berikut di terminal Anda:
npm aku ai
Untuk menginstal Openai, masukkan perintah berikut di terminal Anda:
npm aku buka
Saya baru saja mengikuti struktur folder sederhana/default yang dibuat oleh npx create-next-app@latest untuk membuat demo ini sederhana dan mudah dipahami.
Langkah 2: Buat halaman front-end untuk mengalirkan respons
impor { useState } dari "reaksi";
ekspor fungsi default Beranda() {
const [pertanyaan, setQuestion] = useState("")
const [jawaban, setAnswer] = useState("")
/// berfungsi untuk memanggil router openai dan memproses respon streaming
fungsi async retriveResponse() {
/// panggil rutenya
respon const: any = menunggu pengambilan("/api/chat", {
metode: "POSTING",
isi: JSON.stringify({
pertanyaan
}),
berikutnya: { validasi ulang: 0 }
})
biarkan resptext = "";
const reader = respon.body
.pipeThrough(TextDecoderStream()) baru
.getReader();
/// melanjutkan aliran
sementara (benar) {
const { nilai, selesai } = menunggu pembaca.read();
jika (selesai) {
merusak;
}
teks tanggapan += nilai;
setAnswer(teks jawaban);
}
}
kembali (
<div>
<label htmlFor="Ajukan pertanyaan Anda"></label>
<input type="text" value={question} onChange={(e)=>setQuestion(e.target.value)}/>
<button onClick={retriveResponse}>Respon Streaming</button>
<br />
<p>{jawab}</p>
</div>
);
}
Komponen di atas membuat antarmuka di mana pengguna dapat memasukkan pertanyaan, dan mengklik tombol untuk mengirim pertanyaan ke API sisi server (/api/chat), dan menampilkan respons streaming dari server secara real-time
Langkah 3: Buat rute back-end untuk mengalirkan respons
impor OpenAI dari "openai";
// Atur runtime ke edge untuk performa terbaik
ekspor konfigurasi const = {
waktu proses: "tepi",
};
ekspor pengendali fungsi async default (permintaan, respons) {
const { pertanyaan } = menunggu permintaan.json();
// Ambil respons dari OpenAI API
const openai = OpenAI baru({
apiKey: proses.env.NEXT_PUBLIC_OPENAI_KEY,
});
const responFromOpenAI = menunggu openai.chat.completions.create({
model: "gpt-3.5-turbo",
suhu: 0,
atas_p: 1,
pesan: [{ peran: "pengguna", konten: pertanyaan }],
aliran: benar,
})
mencoba {
// Ubah respons menjadi aliran teks yang ramah
const stream = OpenAIStream(responseFromOpenAI);
// Tanggapi dengan aliran
kembalikan StreamingTextResponse(aliran);
} tangkapan (kesalahan) {
return respon.kirim(400).kirim(kesalahan);
}
}
Kode di atas mendefinisikan fungsi tanpa server yang menerima pertanyaan dari permintaan HTTP, mengirimkannya ke OpenAI API untuk diproses, dan mengalirkan kembali respons ke klien.
Langkah 4: Jalankan aplikasi
npm jalankan dev
Keluaran
Video.webm
Video demonya
drive.google.com
Jika Anda telah menonton videonya, Anda mungkin sudah memahami dengan baik cara kerja demonya. Bagi yang tertarik mempelajari kode lengkapnya, Anda dapat menemukannya di GitHub di tautan ini: Next.js OpenAI Streaming.
Referensi:
https://vercel.com/blog/introducing-the-vercel-ai-sdk
https://sdk.vercel.ai/docs https://platform.openai.com/docs/introduction
https://platform.openai.com/docs/introduction
Untuk tetap mendapat informasi tentang perkembangan terkini di bidang AI, sebaiknya perhatikan dokumentasi AI Vercel. Pastikan untuk terus mengikuti pembaruan dan penyempurnaan seiring Vercel terus memajukan penawarannya di domain AI.