React ve OpenAI API ile ChatGPT Klon Uygulaması Nasıl Oluşturulur ve Dağıtılır

Sohbet robotlarının ve sanal asistanların kullanımı artmaya devam ettikçe, birçok işletme ve geliştirici kendi yapay zeka destekli sohbet robotlarını oluşturmanın yollarını arıyor. ChatGPT, OpenAI tarafından oluşturulan, insan benzeri konuşmalar yapabilen ve çok çeşitli soruları yanıtlayabilen böyle bir sohbet robotudur.

Ne İnşa Edeceksin

Bu eğitimde, React ve OpenAI API kullanarak bir ChatGPT klon uygulamasının nasıl oluşturulacağını öğreneceksiniz. Hafta sonu eğlenceli ve ilgi çekici bir projede şansınızı denemek istiyorsanız, bu React ve OpenAI'ye dalmak için harika bir fırsat.

Ayrıca, projenizi hızlı bir şekilde hayata geçirmek için ücretsiz bir .kinsta.app alanı sağlayan Kinsta'nın Uygulama Barındırma platformuna doğrudan GitHub deponuzdan nasıl dağıtılacağını öğreneceksiniz. Kinsta'nın ücretsiz deneme sürümü ve Hobby Tier ile hiçbir ücret ödemeden kolayca başlayabilirsiniz.

İşte ChatGPT klon uygulamasının canlı bir demosu.

Bu projeyi daha yakından incelemek isterseniz GitHub deposuna erişebilirsiniz.

Alternatif olarak, başlamanıza yardımcı olması için stiller, Font Awesome CDN bağlantısı, OpenAI paketi ve temel yapı gibi temel öğelerle birlikte gelen React uygulama başlangıç ​​projesini de klonlayabilirsiniz.

Gereksinimler/Ön Koşullar

Bu eğitim, bir "takip etme" deneyimi olacak şekilde tasarlanmıştır. Bu nedenle, kolaylıkla kodlamak için aşağıdakilere sahip olmanız önerilir:

• Temel HTML, CSS ve JavaScript anlayışı
• React ile biraz aşinalık
• Node.js ve npm (Node Package Manager) veya bilgisayarınızda kurulu yarn

OpenAI API'si nedir?

OpenAI API, geliştiricilerin bir API aracılığıyla OpenAI'nin GPT-3 gibi dil modellerine erişmesini sağlayan bulut tabanlı bir platformdur. Geliştiricilerin, modellerini geliştirmeden ve eğitmeden uygulamalarına metin tamamlama, duyarlılık analizi, özetleme ve çeviri gibi doğal dil işleme özellikleri eklemelerine olanak tanır.

OpenAI API'yi kullanmak için geliştiricilerin OpenAI web sitesinde bir hesap oluşturması ve bir API anahtarı alması gerekir. API anahtarı, API isteklerini doğrulamak ve kullanımı izlemek için kullanılır.

API anahtarı alındıktan sonra geliştiriciler, dil modeline metin göndermek ve yanıtları almak için API'yi kullanabilir.

Neden Tepki?

React, kullanıcı arayüzleri oluşturmak için popüler bir JavaScript kitaplığıdır. 2022 Stack Overflow geliştirici anketine göre %42,62 pazar payı ile en sık kullanılan ikinci web teknolojisidir.

React, geliştiricilerin kullanıcı arabiriminin farklı bölümlerini temsil eden bildirime dayalı bileşenler oluşturmasına olanak tanır. Bu bileşenler, JavaScript ve HTML'nin birleşimi olan JSX adlı bir sözdizimi kullanılarak tanımlanır.

Bileşen kitaplıklarından ve kitlerinden oluşan geniş ekosistemi sayesinde geliştiriciler, karmaşık sohbet arabirimleri oluşturmak için OpenAI API gibi API'lerle kolayca çalışabilir ve bunları entegre edebilir ve onu bir ChatGPT klon uygulaması oluşturmak için mükemmel bir seçim yapan da budur.

React Geliştirme Ortamınızı Nasıl Kurarsınız?

React'i kurmanın veya bir React projesi oluşturmanın en iyi yolu, onu create-react-app ile kurmaktır. Bir önkoşul, makinenizde Node.js'nin yüklü olmasıdır. Düğümün kurulu olduğunu doğrulamak için terminalinizde aşağıdaki komutu çalıştırın.

 node -v

Bir sürüm getirirse, var demektir. npx'i kullanmak için Düğüm sürümünüzün v14.0.0'dan ve NPM sürümünüzün v5.6'dan düşük olmadığından emin olmanız gerekir; aksi takdirde, npm update -g komutunu çalıştırarak güncellemeniz gerekebilir. npm'yi anladıktan sonra, aşağıdaki komutu çalıştırarak bir React projesi oluşturabilirsiniz:

 npx create-react-app chatgpt-clone

Not: "chatgpt-clone", oluşturduğumuz uygulama adıdır, ancak onu istediğiniz herhangi bir adla değiştirebilirsiniz.

Yükleme işlemi birkaç dakika sürebilir. Başarılı olduktan sonra dizine gidebilir ve aşağıdaki komutu kullanarak Node.js'den OpenAI API'ye kolay erişim sağlayan Node.js OpenAI paketini yükleyebilirsiniz:

 npm install openai

Artık uygulamanızı localhost:3000 üzerinde canlı olarak görmek için npm start çalıştırabilirsiniz.

create-react-app komutu kullanılarak bir React projesi oluşturulduğunda, otomatik olarak bir klasör yapısı oluşturur. Sizi ilgilendiren ana klasör, geliştirmenin yapıldığı src klasörüdür. Bu klasör, varsayılan olarak birçok dosya içerir, ancak yalnızca App.js , index.js ve index.css dosyalarıyla ilgilenmelisiniz.

1. App.js : App.js dosyası, bir React uygulamasındaki ana bileşendir. Genellikle uygulamadaki diğer tüm bileşenleri işleyen en üst düzey bileşeni temsil eder.
2. index.js : Bu dosya, React uygulamanızın giriş noktasıdır. Uygulama açıldığında yüklenen ilk dosyadır ve App.js bileşeninin tarayıcıya işlenmesinden sorumludur.
3. index.css : Bu dosya, React uygulamanızın genel stilini ve düzenini tanımlamaktan sorumludur.

React ve OpenAI API ile ChatGPT Klonu Nasıl Oluşturulur

ChatGPT klon uygulaması, uygulamanın anlaşılmasını ve bakımını kolaylaştırmak için iki bileşenden oluşacaktır. Bu iki bileşen şunlardır:

1. Form Bölümü : Bu bileşen, kullanıcıların chatbot ile etkileşime girmesi için bir metin alanı alanı ve bir düğme içerir.
2. Cevap Bölümü : Sorular ve karşılık gelen cevaplar bir dizide saklanacak ve bu bölümde görüntülenecektir. Dizide kronolojik olarak dolaşacak ve en sonuncuyu en başta göstereceksin.

ChatGPT Klon Uygulamasını Kurma

Bu eğitimde, önce uygulama arayüzünü oluşturarak başlayalım ve ardından uygulamanızın OpenAI API ile etkileşime girmesi için işlevselliği uygulayabilirsiniz. Bu eğitimde kullanacağınız iki bileşeni oluşturarak başlayın. Düzgün bir organizasyon için, tüm bileşenlerin depolanacağı src klasöründe bir bileşenler klasörü oluşturacaksınız.

Form Bölümü Bileşeni

Bu, bir textarea ve bir gönder button oluşan basit bir formdur.

 // components/FormSection.jsx const FormSection = () => { return ( <div className="form-section"> <textarea rows="5" className="form-control" placeholder="Ask me anything..." ></textarea> <button className="btn"> Generate Response </button> </div> ) } export default FormSection;

App.js dosyanıza aktardığınızda formun böyle görünmesi bekleniyor:

Cevap Bölümü Bileşeni

Bu bölüm tüm soru ve cevapların görüntüleneceği yerdir. App.js dosyanıza da aktardığınızda bu bölüm böyle görünecek.

Kodunuzun okunmasını ve bakımını kolaylaştırmak için bu soruları ve yanıtları bir diziden ve döngüden alacaksınız.

 // components/AnswerSection.jsx const AnswerSection = () => { return ( <> <hr className="hr-line" /> <div className="answer-container"> <div className="answer-section"> <p className="question">Who is the founder of OpenAi?</p> <p className="answer">OpenAI was founded in December 2015 by Elon Musk, Sam Altman, Greg Brockman, Ilya Sutskever, Wojciech Zaremba, and John Schulman.</p> <div className="copy-icon"> <i className="fa-solid fa-copy"></i> </div> </div> </div> </> ) } export default AnswerSection;

Ana Sayfa

Artık her iki bileşeni de oluşturdunuz, ancak uygulamanızı çalıştırdığınızda hiçbir şey görünmeyecek çünkü bunları App.js dosyanıza aktarmanız gerekiyor. Bu uygulama için herhangi bir yönlendirme biçimi uygulamayacaksınız, yani App.js dosyası uygulamanızın ana bileşeni/sayfası olarak hizmet verecek.

Bileşenleri içe aktarmadan önce uygulamanızın başlığı ve açıklaması gibi bazı içerikler ekleyebilirsiniz.

 // App.js import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { return ( <div> <div className="header-section"> <h1>ChatGPT CLONE </h1> <p> I am an automated question and answer system, designed to assist you in finding relevant information. You are welcome to ask me any queries you may have, and I will do my utmost to offer you a reliable response. Kindly keep in mind that I am a machine and operate solely based on programmed algorithms. </p> </div> <FormSection /> <AnswerSection /> </div> ); }; export default App;

Yukarıdaki kodda, iki bileşen içe aktarılır ve uygulamaya eklenir. Uygulamanızı çalıştırdığınızda, uygulamanız şöyle görünecektir:

İşlevsellik Ekleme ve OpenAI API'yi Entegre Etme

Artık uygulamanızın kullanıcı arayüzüne sahipsiniz. Bir sonraki adım, uygulamayı OpenAI API ile etkileşime girebilmesi ve yanıt alabilmesi için işlevsel hale getirmektir. Öncelikle, OpenAI API'sini sorgulamak için kullanılacağından, gönderildiğinde formunuzdan değeri almanız gerekir.

Formdan Veri Alma

React'te verileri depolamanın ve güncellemenin en iyi yolu durumları kullanmaktır. İşlevsel bileşenlerde, durumlarla çalışmak için useState() kancası kullanılır. Bir durum oluşturabilir, formunuzdaki değeri duruma atayabilir ve değeri değiştiğinde güncelleyebilirsiniz. useState() kancasını FormSection.jsx bileşenine aktararak ve ardından newQuestions depolamak ve güncellemek için bir durum oluşturarak başlayalım.

 // components/FormSection.jsx import { useState } from 'react'; const FormSection = ({ generateResponse }) => { const [newQuestion, setNewQuestion] = useState(''); return ( // Form to submit a new question ) } export default FormSection;

Ardından, textarea alanının değerini duruma atayabilir ve giriş değeri her değiştiğinde durumu güncellemek için bir onChange() olayı oluşturabilirsiniz:

 <textarea rows="5" className="form-control" placeholder="Ask me anything..." value={newQuestion} onChange={(e) => setNewQuestion(e.target.value)} ></textarea>

Son olarak, gönder düğmesine her tıklandığında bir işlev yüklemek için bir onClick() olayı oluşturabilirsiniz. Bu yöntem, App.js dosyasında oluşturulacak ve argüman olarak newQuestion ve setNewQuestion değerleri ile FormSection.jsx bileşenine bir donanım olarak iletilecektir.

 <button className="btn" onClick={() => generateResponse(newQuestion, setNewQuestion)}> Generate Response </button>

Artık form değerini depolamak ve güncellemek için bir durum oluşturdunuz, App.js dosyasından props olarak iletilen ve click olayını işleyen bir yöntem eklediniz. Son kod şöyle görünecek:

 // components/FormSection.jsx import { useState } from 'react'; const FormSection = ({ generateResponse }) => { const [newQuestion, setNewQuestion] = useState(''); return ( <div className="form-section"> <textarea rows="5" className="form-control" placeholder="Ask me anything..." value={newQuestion} onChange={(e) => setNewQuestion(e.target.value)} ></textarea> <button className="btn" onClick={() => generateResponse(newQuestion, setNewQuestion)}> Generate Response </button> </div> ) } export default FormSection;

Bir sonraki adım, App.js dosyasında OpenAI API ile etkileşim sürecinin tamamını işlemek için bir yöntem oluşturmak olacaktır.

OpenAI API ile Etkileşim

OpenAI API ile etkileşime geçmek ve bir React uygulamasında API anahtarları almak için bir OpenAI API hesabı oluşturmanız gerekir. Google hesabınızı veya e-postanızı kullanarak OpenAI web sitesinde bir hesap için kaydolabilirsiniz. Bir API anahtarı oluşturmak için web sitesinin sağ üst köşesindeki Kişisel'e tıklayın; bazı seçenekler görünecektir; API anahtarlarını görüntüle'yi tıklayın.

Yeni gizli anahtar oluştur düğmesini tıklayın, anahtarı bu uygulamada OpenAI ile etkileşim kurmak için kullanacağınız gibi bir yere kopyalayın. Artık openai paketini (önceden yüklemiş olduğunuz) yapılandırma yöntemiyle birlikte içe aktararak OpenAI'yi başlatmaya devam edebilirsiniz. Ardından, oluşturduğunuz anahtarla bir yapılandırma oluşturun ve OpenAI'yi başlatmak için kullanın.

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); return ( // Render FormSection and AnswerSection ); }; export default App;

Yukarıdaki kodda OpenAI API anahtarı, .env dosyasında bir ortam değişkeni olarak saklanır. Uygulamanızın kök klasöründe bir .env dosyası oluşturabilir ve anahtarı REACT_APP_OPENAI_API_KEY değişkeninde saklayabilirsiniz.

 // .env REACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx…

Artık App.js dosyasında generateResponse yöntemini oluşturmaya devam edebilir ve isteği işlemek ve API'den yanıt almak için önceden oluşturduğunuz formdan beklenen iki parametreyi iletebilirsiniz.

 // src/App.js import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const generateResponse = (newQuestion, setNewQuestion) => { // Set up OpenAI API and handle response }; return ( // Render FormSection and AnswerSection ); }; export default App;

Artık OpenAI API'sine istek gönderebilirsiniz. OpenAI API, soru-cevap (Soru-Cevap), Dilbilgisi düzeltme, çeviri ve daha pek çok işlem gibi birçok işlemi gerçekleştirebilir. Bu işlemlerin her biri için seçenekler farklıdır. Örneğin, Q&A için motor değeri text-davinci-00 iken, SQL translate için code-davinci-002 . Çeşitli örnekler ve seçenekleri için OpenAI örnek belgelerini kontrol etmekten çekinmeyin.

Bu eğitim için, yalnızca Soru-Cevap ile çalışıyoruz, seçenek şöyle görünüyor:

 { model: "text-davinci-003", prompt: "Who is Obama?", temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ["\"], }

Not: Bilgi istemi değerini değiştirdim.

Bilgi istemi, formdan gönderilen sorudur. Bu, onu, generateResponse yöntemine parametre olarak ilettiğiniz form girişinden almanız gerekeceği anlamına gelir. Bunu yapmak için seçenekleri tanımlayacak ve ardından bilgi istemini içeren eksiksiz bir seçenek oluşturmak için forma operatörünü kullanacaksınız:

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; }; return ( // Render FormSection and AnswerSection ); }; export default App;

Bu noktada geriye, yanıt almak için createCompletion yöntemiyle OpenAI'ye istek göndermek kalıyor.

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; import { useState } from 'react'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const [storedValues, setStoredValues] = useState([]); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; const response = await openai.createCompletion(completeOptions); console.log(response.data.choices[0].text); }; return ( // Render FormSection and AnswerSection ); }; export default App;

Yukarıdaki kodda, yanıtın metni konsolunuzda görüntülenecektir. Herhangi bir soru sorarak uygulamanızı test etmekten çekinmeyin. Son adım, soru ve cevap dizisini tutacak bir durum oluşturmak ve ardından bu diziyi bir pervane olarak AnswerSection bileşenine göndermek olacaktır. App.js son kodu şöyle görünecektir:

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; import { useState } from 'react'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const [storedValues, setStoredValues] = useState([]); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; const response = await openai.createCompletion(completeOptions); if (response.data.choices) { setStoredValues([ { question: newQuestion, answer: response.data.choices[0].text, }, ...storedValues, ]); setNewQuestion(''); } }; return ( <div> <div className="header-section"> <h1>ChatGPT CLONE </h1> <p> I am an automated question and answer system, designed to assist you in finding relevant information. You are welcome to ask me any queries you may have, and I will do my utmost to offer you a reliable response. Kindly keep in mind that I am a machine and operate solely based on programmed algorithms. </p> </div> <FormSection generateResponse={generateResponse} /> <AnswerSection storedValues={storedValues} /> </div> ); }; export default App;

Artık App.js'den props değerini alması için AnswerSection bileşenini düzenleyebilir ve storedValues ​​dizisine bakmak için JavaScript Map() yöntemini kullanabilirsiniz:

 // components/AnswerSection.jsx const AnswerSection = ({ storedValues }) => { return ( <> <hr className="hr-line" /> <div className="answer-container"> {storedValues.map((value, index) => { return ( <div className="answer-section" key={index}> <p className="question">{value.question}</p> <p className="answer">{value.answer}</p> <div className="copy-icon"> <i className="fa-solid fa-copy"></i> </div> </div> ); })} </div> </> ) } export default AnswerSection;

Uygulamanızı çalıştırdığınızda ve sorular sorarak test ettiğinizde, cevap aşağıda görünecektir. Ancak kopyala düğmesinin çalışmadığını fark edeceksiniz. İşlevselliği işlemek için bir yöntemi tetiklemesi için düğmeye bir onClick() olayı eklemeniz gerekir. İşlevselliği işlemek için navigator.clipboard.writeText() yöntemini kullanabilirsiniz. AnswerSection bileşeni şimdi şöyle görünecek:

 // components/AnswerSection.jsx const AnswerSection = ({ storedValues }) => { const copyText = (text) => { navigator.clipboard.writeText(text); }; return ( <> <hr className="hr-line" /> <div className="answer-container"> {storedValues.map((value, index) => { return ( <div className="answer-section" key={index}> <p className="question">{value.question}</p> <p className="answer">{value.answer}</p> <div className="copy-icon" onClick={() => copyText(value.answer)} > <i className="fa-solid fa-copy"></i> </div> </div> ); })} </div> </> ) } export default AnswerSection;

Uygulamanızı çalıştırdığınızda, ChatGPT klon uygulamanız mükemmel bir şekilde çalışacaktır. Artık uygulamanızı çevrimiçi olarak erişmek ve arkadaşlarınızla paylaşmak için dağıtabilirsiniz.

React Uygulamanızı Kinsta'ya Nasıl Dağıtırsınız?

Bu uygulamayı oluşturup yerel bilgisayarlarınızda bırakmanız yeterli değildir. Başkalarının erişebilmesi için çevrimiçi olarak paylaşmak isteyeceksiniz. GitHub ve Kinsta kullanarak bunu nasıl yapacağımızı görelim.

Kodunuzu GitHub'a Aktarın

Kodunuzu GitHub'a göndermek için kod değişikliklerini yönetmenin, projeler üzerinde işbirliği yapmanın ve sürüm geçmişini korumanın güvenilir ve verimli bir yolu olan Git komutlarını kullanabilirsiniz.

Kodlarınızı zorlamak için ilk adım, GitHub hesabınızda oturum açıp ekranın sağ üst köşesindeki + düğmesine tıklayarak ve açılır menüden Yeni depo'yu seçerek yeni bir depo oluşturmak olacaktır.

Deponuza bir ad verin, bir açıklama ekleyin (isteğe bağlı) ve genel mi yoksa özel mi olmasını istediğinizi seçin. Oluşturmak için Depo oluştur'a tıklayın.

Deponuz oluşturulduktan sonra, kodunuzu GitHub'a göndermek için ihtiyaç duyacağınız depo URL'sini havuzunuzun ana sayfasından aldığınızdan emin olun.

Terminalinizi veya komut isteminizi açın ve projenizi içeren dizine gidin. Kodunuzu GitHub deponuza göndermek için aşağıdaki komutları tek tek çalıştırın:

 git init git add . git commit -m "my first commit" git remote add origin [repository URL] git push -u origin master

git init yerel bir Git deposu başlatır, git add . geçerli dizindeki ve alt dizinlerindeki tüm dosyaları yeni Git deposuna ekler. git commit -m "my first commit" depodaki değişiklikleri kısa bir mesajla taahhüt eder. git remote add origin [repository URL] havuz URL'sini uzak havuz olarak ayarlar ve git push -u origin master kodu ana daldaki uzak depoya (orijin) gönderir.

ChatGPT Clone React Uygulamanızı Kinsta'ya Dağıtın

Deponuzu Kinsta'ya dağıtmak için şu adımları izleyin:

1. My Kinsta kontrol panelinde oturum açın veya Kinsta hesabınızı oluşturun.
2. Sol kenar çubuğunda Uygulamalar'ı ve ardından Hizmet ekle'yi tıklayın.
3. Bir React uygulamasını Kinsta'ya dağıtmak için açılır menüden Uygulama'yı seçin.
4. Görünen modelden konuşlandırmak istediğiniz depoyu seçin. Birden çok şubeniz varsa dağıtmak istediğinizi seçebilir ve uygulamaya bir ad atayabilirsiniz. Mevcut 25 veri merkezi arasından bir veri merkezi konumu seçin, Kinsta otomatik olarak bir başlatma komutunu algılayacaktır.
5. Son olarak, API anahtarlarını GitHub gibi genel ana bilgisayarlara göndermek güvenli değildir, yerel olarak bir ortam değişkeni olarak eklenmiştir. Barındırırken, değeriyle aynı değişken adını ve anahtarı kullanarak bunu bir ortam değişkeni olarak da ekleyebilirsiniz.

Uygulamanız dağıtılmaya başlayacak ve birkaç dakika içinde uygulamanızın dağıtılan sürümüne erişmek için bir bağlantı sağlanacaktır. Bu durumda, bu https://chatgpt-clone-g9q10.kinsta.app/ Not: Otomatik dağıtımı etkinleştirebilirsiniz, böylece kod tabanınızı her değiştirdiğinizde Kinsta uygulamanızı yeniden konuşlandırır ve GitHub'a aktarır.

Özet

OpenAI API, müşteri desteği ve kişisel asistanlardan dil çevirisine ve içerik oluşturmaya kadar çok çeşitli potansiyel uygulamalar oluşturmak için kullanılabilir.

Bu eğitimde, React ve OpenAI ile bir ChatGPT klon uygulamasının nasıl oluşturulacağını öğrendiniz. Kullanıcılara insan benzeri konuşma deneyimleri sağlamak için bu uygulamayı/özelliği diğer uygulamalara entegre edebilirsiniz.

OpenAI API ile neler yapılabileceği ve bu klon uygulamasının nasıl geliştirileceği hakkında daha çok şey var. Örneğin, önceki soruların ve yanıtların tarayıcınızı yeniledikten sonra bile kaybolmaması için yerel depolama uygulayabilirsiniz.

Kinsta'nın ücretsiz deneme sürümü ve Hobby Tier ile Uygulama Barındırma hizmetimize hiçbir ücret ödemeden kolayca başlayabilirsiniz. Öyleyse neden bir deneyip neler yaratabileceğinizi görmüyorsunuz?

Projenizi ve deneyimlerinizi aşağıdaki yorumda paylaşın.