Next.js, Cerebras API ve Llama 3.1 ile Bir Sohbet Robotu Olu\u015fturma<\/p>\n
G\u00fcn\u00fcm\u00fczde yapay zeka h\u0131zla geli\u015fiyor ve hayat\u0131m\u0131z\u0131n bir\u00e7ok alan\u0131na entegre oluyor. Sohbet robotlar\u0131, yapay zekan\u0131n en yayg\u0131n uygulamalar\u0131ndan biri haline geldi ve bir\u00e7ok sekt\u00f6rde kullan\u0131l\u0131yor. Bu makalede, Next.js, Cerebras API ve Llama 3.1 kullanarak bir sohbet robotu olu\u015fturma s\u00fcrecini ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n
* **Next.js:** Next.js, React tabanl\u0131 bir web \u00e7er\u00e7evesidir ve performansl\u0131, sunucu taraf\u0131 olu\u015fturma (SSR) \u00f6zelliklerine sahiptir. [Next.js](https:\/\/nextjs.org\/) ile sohbet robotumuzu geli\u015ftirebiliriz.
\n* **Cerebras API:** Cerebras API, Cerebras sistemlerinin i\u015flevselli\u011fine eri\u015fmek i\u00e7in kullan\u0131lan bir API’dir. Bu API ile b\u00fcy\u00fck dil modellerini (LLM) kullanarak sohbet robotunuzu e\u011fitebilirsiniz. [Cerebras API](https:\/\/www.cerebras.ai\/platform\/api\/)
\n* **Llama 3.1:** Llama 3.1, Meta taraf\u0131ndan e\u011fitilmi\u015f a\u00e7\u0131k kaynak kodlu bir b\u00fcy\u00fck dil modelidir. Bu model, sohbet robotumuzun temelini olu\u015fturacakt\u0131r. [Llama 3.1](https:\/\/ai.facebook.com\/blog\/llama-2-open-and-responsible-large-language-model\/)<\/p>\n
\u00d6ncelikle, yeni bir Next.js projesi olu\u015fturun. Komut sat\u0131r\u0131ndan a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
“`bash
\nnpx create-next-app@latest my-chatbot-app
\n“`<\/p>\n
Proje olu\u015fturulduktan sonra, Cerebras API ve Llama 3.1’i entegre etmeniz gerekecektir.<\/p>\n
Cerebras API’yi kullanmak i\u00e7in, \u00f6ncelikle API anahtar\u0131n\u0131z\u0131 alman\u0131z gerekecektir. Cerebras web sitesinde bir hesap olu\u015fturarak API anahtar\u0131n\u0131z\u0131 alabilirsiniz. API anahtar\u0131n\u0131z\u0131 ald\u0131ktan sonra, Next.js projenizdeki bir ortam de\u011fi\u015fkeni olarak ayarlay\u0131n. Bu, API anahtar\u0131n\u0131z\u0131 do\u011frudan kodunuzda saklamay\u0131 \u00f6nleyecektir. A\u015fa\u011f\u0131daki komut, API anahtar\u0131n\u0131z\u0131 bir ortam de\u011fi\u015fkeni olarak ayarlaman\u0131z\u0131 sa\u011flar:<\/p>\n
“`bash
\nexport CEREBRAS_API_KEY=YOUR_API_KEY
\n“`<\/p>\n
Art\u0131k Cerebras API’ye eri\u015febilirsiniz. API’yi kullanarak, Llama 3.1 modelini e\u011fitebilir ve sohbet robotunuzu \u00e7al\u0131\u015ft\u0131rabilirsiniz.<\/p>\n
Llama 3.1, bir sohbet robotu olu\u015fturmak i\u00e7in kullanabilece\u011finiz g\u00fc\u00e7l\u00fc bir LLM’dir. Llama 3.1’i entegre etmek i\u00e7in, \u00f6ncelikle modeli indirmeniz gerekecektir. Modelin indirme ba\u011flant\u0131s\u0131n\u0131 Meta web sitesinden alabilirsiniz. Modeli indirdikten sonra, onu Next.js projenizdeki bir klas\u00f6re kopyalay\u0131n.<\/p>\n
Ard\u0131ndan, Llama 3.1 modeli ile etkile\u015fim kurmak i\u00e7in gerekli olan k\u00fct\u00fcphaneleri y\u00fcklemeniz gerekecektir. A\u015fa\u011f\u0131daki komut, gerekli k\u00fct\u00fcphaneleri y\u00fcklemenizi sa\u011flar:<\/p>\n
“`bash
\nnpm install llama.js
\n“`<\/p>\n
\u015eimdi, Next.js projenizde Llama 3.1 modelini kullanarak sohbet robotunuzu programlayabilirsiniz.<\/p>\n
Sohbet robotunuzu kullanmak i\u00e7in bir aray\u00fcz olu\u015fturman\u0131z gerekecektir. Next.js, React bile\u015fenleri kullanarak bir aray\u00fcz olu\u015fturmay\u0131 kolayla\u015ft\u0131r\u0131r. A\u015fa\u011f\u0131daki kod snippet’i, basit bir sohbet robotu aray\u00fcz\u00fc olu\u015fturmak i\u00e7in kullan\u0131labilen bir \u00f6rnektir:<\/p>\n
“`javascript
\nimport React, { useState } from ‘react’;<\/p>\n
const Chatbot = () => {
\n const [messages, setMessages] = useState([]);
\n const [userInput, setUserInput] = useState(”);<\/p>\n
const handleInputChange = (event) => {
\n setUserInput(event.target.value);
\n };<\/p>\n
const handleSubmit = async (event) => {
\n event.preventDefault();<\/p>\n
setMessages([…messages, { type: ‘user’, text: userInput }]);
\n setUserInput(”);<\/p>\n
const response = await CerebrasAPI.query(userInput);
\n setMessages([…messages, { type: ‘bot’, text: response.text }]);
\n };<\/p>\n
return (<\/p>\n
))}\n <\/p><\/div>\n