NextJS'de OpenAI Yanıtı nasıl yayınlanır?
Yayınlanan: 2024-03-22Özet:
Vercel'in AI SDK'sını kullanarak NextJS'de OpenAI yanıtlarını sorunsuz bir şekilde nasıl aktaracağınızı öğrenin. Bu kılavuzda özetlenen basit bir entegrasyon süreciyle geliştiriciler, gerçek zamanlı yapay zeka oluşturmanın gücünden verimli bir şekilde yararlanarak kullanıcı deneyimlerini ve iş akışı verimliliğini artırabilir.
Günümüzün hızla gelişen dijital ortamında, gelişmiş yapay zeka yeteneklerinin entegre edilmesi, rekabetçi kalmaya çalışan şirketler için zorunlu hale geldi. Bir OpenAI geliştirme şirketi olarak, OpenAI yanıtlarını oluşturma ve yönetme sürecini kolaylaştırmak için NextJS gibi en son teknolojilerin gücünden yararlanmak çok sayıda avantaj sunar.
Bir OpenAI geliştirme şirketinin uzmanlığı, kullanıcı deneyimini geliştirmekten iş akışı verimliliğini optimize etmeye kadar, OpenAI'nin yeteneklerinin NextJS çerçevesi içinde kusursuz entegrasyonunu ve kullanımını derinden etkileyebilir. Bu kılavuzda, OpenAI geliştirme şirketlerinin NextJS'nin OpenAI yanıtlarını kolaylaştırma potansiyelinden etkili bir şekilde yararlanması ve böylece işletmelerin yeni inovasyon ve verimlilik alanlarının kilidini açmasını sağlaması için gerekli olan stratejileri ve içgörüleri derinlemesine inceliyoruz.
Hayal kırıklığına uğradığınızı ve NextJS'de OpenAI yanıtlarını yayınlamak için gezindiğinizi biliyoruz. OpenAI yanıtını yayınlamanın birçok yolu vardır ve ayrıca verileri okunabilir hale getirmek için ayrıştıran akıştan sonra yapılacak çok şey vardır.
Not: Blog boyunca NextJS ve Vercel AI SDK'yı kullanacağız.
Next.js nedir?
Next.js, tam yığın web uygulamaları oluşturmaya yönelik bir React çerçevesidir. Kullanıcı arayüzleri oluşturmak için React Components'ı, ek özellikler ve optimizasyonlar için Next.js'yi kullanırsınız.
Next.js ayrıca React için gereken paketleme, derleme ve daha fazlası gibi araçları da soyutlar ve otomatik olarak yapılandırır. Bu, yapılandırmayla zaman harcamak yerine uygulamanızı oluşturmaya odaklanmanıza olanak tanır.
İster bireysel bir geliştirici olun ister daha büyük bir ekibin parçası olun, Next.js etkileşimli, dinamik ve hızlı React uygulamaları oluşturmanıza yardımcı olabilir.
Vercel nedir?
Vercel, web uygulamalarınızı ek yapılandırmaya ihtiyaç duymadan daha hızlı oluşturup dağıtmanız için ihtiyaç duyduğunuz araçları, iş akışlarını ve altyapıyı sağlayan, geliştiricilere yönelik bir platformdur.
Vercel, popüler ön uç çerçevelerini kullanıma hazır olarak destekler ve ölçeklenebilir, güvenli altyapısı, optimum hızlar için kullanıcılarınızın yakınındaki veri merkezlerinden içerik sunmak üzere küresel olarak dağıtılmıştır.
Vercel ve Nextjs arasındaki ilişki nedir?
Vercel'in platformu, Next.js uygulamaları için tasarlanan Next.js'nin yaratıcıları tarafından yapılmıştır. Sonuç olarak Vercel ve Next.js arasındaki ilişki, web uygulamalarını oluşturma ve dağıtma şeklimizi yeniden tanımlayan simbiyotik bir ortaklığı temsil ediyor. Geliştiriciler, her iki platformun da güçlü yönlerinden yararlanarak yeni olanakların kilidini açabilir ve günümüzün rekabet ortamında öne çıkan olağanüstü web deneyimleri sunabilir.
Geliştirme sırasında Vercel, projelerinizde otomatik önizleme ve üretim ortamları ve önizleme dağıtımlarına ilişkin yorumlar gibi gerçek zamanlı işbirliği için araçlar sağlar.
Vercel ve NextJS'yi kullanarak akışı nasıl kolaylaştırabiliriz?
Haziran 2023'te Vercel, Yerleşik LLM Adaptörleri / Akış İlk Kullanıcı Arayüzü Yardımcıları / Akış Yardımcıları ve Geri Aramalar sağlayan yeni bir kitaplık ai (Vercel AI SDK) yayınladı. Bu kitaplıktan bu yana OpenAI yanıtını yayınlamak çok daha kolay hale geldi.
Bir örneğe dalmadan önce size Vercel AI SDK'nın hangi düğüm kitaplıklarını/çerçevelerini desteklediğini söyleyeyim.
React/Next.js ve Svelte/SvelteKit'i destekliyor; Nuxt/Vue desteği de yakında gelecek.
Örnek - NextJS'de (A react Framework) ön uç/arka uç
1. Adım: NextJS uygulamasını oluşturma ve Vercel AI SDK'yı yükleme
npx create-sonraki uygulama@en son
SDK'yı yüklemek için terminalinize aşağıdaki komutu girin:
npm ben ai
Openai'yi kurmak için terminalinize aşağıdaki komutu girin:
npm açtım
Bu demoyu basit ve anlaşılması kolay hale getirmek için npx create-next-app@latest'in benim için oluşturduğu basit/varsayılan klasör yapısını takip ettim.
2. Adım: Yanıtı yayınlamak için ön uç sayfası oluşturun
{ useState }'i "react"tan içe aktarın;
varsayılan işlevi dışa aktar Home() {
const [soru, setQuestion] = useState("")
const [answer, setAnswer] = useState("")
/// openai yönlendiricisini çağırma ve akış yanıtını işleme işlevi
eşzamansız işlev retriveResponse() {
/// rotayı çağır
const yanıtı: any = wait fetch("/api/chat", {
yöntem: "POST",
gövde: JSON.stringify({
soru
}),
sonraki: { yeniden doğrulama: 0 }
})
let yanıt metni = "";
const okuyucu = yanıt.body
.pipeThrough(new TextDecoderStream())
.getReader();
/// akışı ilerletir
while (doğru) {
const { değer, yapıldı } = okuyucuyu bekliyor.read();
eğer (bitti) {
kırmak;
}
yanıt metni += değer;
setAnswer(resptext);
}
}
geri dönmek (
<div>
<label htmlFor="Sorunuzu sorun"></label>
<input type="text" value={question} onChange={(e)=>setQuestion(e.target.value)}/>
<button onClick={retriveResponse}>Yanıt Akışı</button>
<br />
<p>{cevap</p>
</div>
);
}
Yukarıdaki bileşen, kullanıcıların soru girebileceği ve soruyu sunucu tarafındaki bir API'ye (/api/chat) göndermek için bir düğmeyi tıklatabileceği ve sunucudan gelen akış yanıtını gerçek zamanlı olarak görüntüleyebileceği bir arayüz oluşturur.
3. Adım: Yanıtı yayınlamak için arka uç rotası oluşturun
OpenAI'yi "openai"den içe aktarın;
// En iyi performans için çalışma zamanını uç noktaya ayarlayın
const yapılandırmasını dışa aktar = {
çalışma zamanı: "kenar",
};
varsayılan eşzamansız işlev işleyicisini dışa aktar (istek, yanıt) {
const { soru } = wait request.json();
// Yanıtı OpenAI API'sinden getir
const openai = yeni OpenAI({
apiKey: proses.env.NEXT_PUBLIC_OPENAI_KEY,
});
const yanıtFromOpenAI = openai.chat.completions.create bekliyor({
modeli: "gpt-3.5-turbo",
sıcaklık: 0,
üst_p: 1,
mesajlar: [{ rol: "kullanıcı", içerik: soru }],
akış: doğru,
})
denemek {
// Yanıtı kolay anlaşılır bir metin akışına dönüştürün
const akışı = OpenAIStream(responseFromOpenAI);
// Akışla yanıt ver
yeni StreamingTextResponse(stream) döndür;
} yakalamak (hata) {
return yanıt.send(400).send(hata);
}
}
Yukarıdaki kod, bir HTTP isteğinden soru alan, bunu işlenmek üzere OpenAI API'ye gönderen ve yanıtı istemciye geri aktaran sunucusuz bir işlevi tanımlar.
4. Adım: Uygulamayı çalıştırın
npm çalıştırma geliştiricisi
Çıktı
Video.webm
Demonun videosu
Drive.google.com
Videoyu izlediyseniz muhtemelen demonun nasıl çalıştığını iyi anlamışsınızdır. Kodun tamamını keşfetmek isteyenler için GitHub'da şu bağlantıdan bulabilirsiniz: Next.js OpenAI Streaming.
Referanslar:
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
Yapay zeka alanındaki en son gelişmelerden haberdar olmak için Vercel'in yapay zeka belgelerine göz atmanız tavsiye edilir. Vercel yapay zeka alanındaki tekliflerini geliştirmeye devam ederken güncellemeler ve geliştirmeler için bizi takip etmeyi unutmayın.