كيفية بناء ونشر تطبيق ChatGPT Clone باستخدام React و OpenAI API

مع استمرار نمو استخدام روبوتات المحادثة والمساعدين الافتراضيين ، يبحث العديد من الشركات والمطورين عن طرق لإنشاء روبوتات الدردشة الخاصة بهم التي تعمل بالذكاء الاصطناعي. يعد ChatGPT أحد روبوتات الدردشة هذه ، التي أنشأتها OpenAI ، وهي قادرة على المشاركة في محادثات شبيهة بالبشر والإجابة على مجموعة واسعة من الأسئلة.

ما سوف تقوم ببنائه

في هذا البرنامج التعليمي ، ستتعلم كيفية إنشاء تطبيق استنساخ ChatGPT باستخدام React وواجهة برمجة تطبيقات OpenAI. إذا كنت ترغب في تجربة يدك في مشروع ممتع وجذاب خلال عطلة نهاية الأسبوع ، فهذه فرصة رائعة للتعمق في React و OpenAI.

ستتعلم أيضًا كيفية النشر مباشرةً من مستودع GitHub الخاص بك إلى منصة استضافة التطبيقات في Kinsta ، والتي توفر نطاقًا مجانيًا .kinsta.app لجعل مشروعك يعمل بسرعة. ومع الإصدار التجريبي المجاني من Kinsta و Hobby Tier ، يمكنك البدء بسهولة دون أي تكلفة.

إليك عرض توضيحي مباشر لتطبيق ChatGPT clone.

إذا كنت ترغب في فحص هذا المشروع عن كثب ، يمكنك الوصول إلى مستودع GitHub الخاص به.

بدلاً من ذلك ، يمكنك أيضًا استنساخ مشروع بدء تطبيق React ، والذي يأتي مع عناصر أساسية مثل الأنماط ، ورابط Font Awesome CDN ، وحزمة OpenAI ، والبنية الأساسية ، لمساعدتك في البدء.

المتطلبات / المتطلبات الأساسية

تم تصميم هذا البرنامج التعليمي ليكون بمثابة تجربة "متابعة على طول". لذلك ، يوصى بأن يكون لديك ما يلي للتعليمة البرمجية جنبًا إلى جنب بسهولة:

• الفهم الأساسي لـ HTML و CSS و JavaScript
• بعض الإلمام بـ React
• Node.js و npm (مدير حزمة Node) أو الغزل المثبت على جهاز الكمبيوتر الخاص بك

ما هو OpenAI API؟

OpenAI API عبارة عن نظام أساسي قائم على السحابة يمنح المطورين الوصول إلى نماذج لغة OpenAI ، مثل GPT-3 ، عبر واجهة برمجة التطبيقات. يسمح للمطورين بإضافة ميزات معالجة اللغة الطبيعية مثل إكمال النص وتحليل المشاعر والتلخيص والترجمة إلى تطبيقاتهم دون تطوير وتدريب نماذجهم.

لاستخدام OpenAI API ، يجب على المطورين إنشاء حساب على موقع OpenAI الإلكتروني والحصول على مفتاح API. يتم استخدام مفتاح API لمصادقة طلبات API وتتبع الاستخدام.

بمجرد الحصول على مفتاح API ، يمكن للمطورين استخدام API لإرسال نص إلى نموذج اللغة وتلقي الردود.

لماذا تتفاعل؟

React هي مكتبة JavaScript شائعة لبناء واجهات المستخدم. وفقًا لاستطلاع مطور Stack Overflow لعام 2022 ، فهو ثاني أكثر تقنيات الويب استخدامًا ، مع 42.62٪ من حصة السوق.

يتيح React للمطورين إنشاء مكونات تعريفية تمثل أجزاء مختلفة من واجهة المستخدم. يتم تعريف هذه المكونات باستخدام بناء جملة يسمى JSX ، وهو مزيج من JavaScript و HTML.

بفضل النظام البيئي الكبير للمكتبات والمجموعات المكونة ، يمكن للمطورين العمل بسهولة مع واجهات برمجة التطبيقات ودمجها مثل OpenAI API ، لبناء واجهات دردشة معقدة وهذا ما يجعله خيارًا ممتازًا لبناء تطبيق استنساخ ChatGPT.

كيفية إعداد بيئة تطوير التفاعل الخاص بك

أفضل طريقة لتثبيت React أو إنشاء مشروع React هي تثبيته باستخدام تطبيق create-react-app. أحد المتطلبات الأساسية هو تثبيت Node.js على جهازك. للتأكد من تثبيت Node لديك ، قم بتشغيل الأمر التالي في جهازك الطرفي.

 node -v

إذا ظهرت نسخة ، فهي موجودة. لاستخدام npx ، ستحتاج إلى التأكد من أن إصدار Node الخاص بك لا يقل عن v14.0.0 ، وأن إصدار NPM الخاص بك ليس أقل من v5.6 ؛ وإلا ، فقد تحتاج إلى تحديثه عن طريق تشغيل npm update -g . بمجرد اكتشاف npm ، يمكنك الآن إعداد مشروع React عن طريق تشغيل الأمر أدناه:

 npx create-react-app chatgpt-clone

ملاحظة: "chatgpt-clone" هو اسم التطبيق الذي نقوم بإنشائه ، ولكن يمكنك تغييره إلى أي اسم من اختيارك.

قد تستغرق عملية التثبيت بضع دقائق. بمجرد النجاح ، يمكنك الانتقال إلى الدليل وتثبيت حزمة Node.js OpenAI ، والتي توفر وصولاً مناسبًا إلى OpenAI API من Node.js باستخدام الأمر أدناه:

 npm install openai

يمكنك الآن تشغيل npm start لمشاهدة تطبيقك مباشرة على localhost: 3000 .

عندما يتم إنشاء مشروع React باستخدام الأمر create-react-app ، فإنه يقوم تلقائيًا بتدعيم بنية المجلد. المجلد الرئيسي الذي يهمك هو المجلد src ، حيث يتم التطوير. يحتوي هذا المجلد على العديد من الملفات افتراضيًا ولكن يجب أن تهتم فقط بملفات App.js و index.js و index.css .

1. App.js : ملف App.js هو المكون الرئيسي في تطبيق React. يمثل عادةً مكون المستوى الأعلى الذي يعرض جميع المكونات الأخرى في التطبيق.
2. index.js : هذا الملف هو نقطة دخول تطبيق React الخاص بك. إنه أول ملف يتم تحميله عند فتح التطبيق وهو مسؤول عن عرض مكون App.js في المتصفح.
3. index.css : هذا الملف مسؤول عن تحديد التصميم العام والتخطيط لتطبيق React الخاص بك.

كيفية بناء نسخة ChatGPT باستخدام React و OpenAI API

سيتألف تطبيق استنساخ ChatGPT من مكونين لتسهيل فهم التطبيق وصيانته. هذين المكونين هما:

1. قسم النموذج : يتضمن هذا المكون حقل منطقة نص وزرًا للمستخدمين للتفاعل مع روبوت المحادثة.
2. قسم الإجابات : سيتم تخزين الأسئلة والإجابات المقابلة في مصفوفة وعرضها في هذا القسم. سوف تمر عبر المصفوفة ترتيبًا زمنيًا ، وتظهر الأحدث أولاً.

إعداد تطبيق ChatGPT Clone

في هذا البرنامج التعليمي ، دعنا نبدأ من خلال إنشاء واجهة التطبيق أولاً ثم يمكنك تنفيذ الوظائف بحيث يتفاعل تطبيقك مع OpenAI API. ابدأ بإنشاء المكونين اللذين ستستخدمهما في هذا البرنامج التعليمي. للتنظيم المناسب ، ستقوم بإنشاء مجلد مكونات في مجلد src حيث سيتم تخزين جميع المكونات.

مكون قسم النموذج

هذا نموذج بسيط يتكون من textarea button إرسال.

 // 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 :

مكون قسم الإجابة

هذا القسم هو المكان الذي سيتم فيه عرض جميع الأسئلة والأجوبة. هذا ما سيبدو عليه هذا القسم عند استيراده أيضًا إلى ملف App.js.

ستجلب هذه الأسئلة والإجابات من مصفوفة وحلقة لتسهيل قراءة التعليمات البرمجية الخاصة بك وصيانتها.

 // 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;

الصفحة الرئيسية

لديك الآن كلا المكونين ، ولكن لن يظهر أي شيء عند تشغيل التطبيق لأنك تحتاج إلى استيرادهما إلى ملف App.js الخاص بك. بالنسبة لهذا التطبيق ، لن تقوم بتنفيذ أي شكل من أشكال التوجيه ، مما يعني أن ملف App.js سيكون بمثابة المكون / الصفحة الرئيسية للتطبيق الخاص بك.

يمكنك إضافة بعض المحتوى ، مثل عنوان ووصف التطبيق الخاص بك ، قبل استيراد المكونات.

 // 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;

في الكود أعلاه ، يتم استيراد المكونين وإضافتهما إلى التطبيق. عند تشغيل التطبيق الخاص بك ، هذا هو الشكل الذي سيبدو عليه التطبيق الخاص بك:

إضافة وظائف ودمج OpenAI API

لديك الآن واجهة المستخدم للتطبيق الخاص بك. تتمثل الخطوة التالية في جعل التطبيق يعمل حتى يتمكن من التفاعل مع OpenAI API والحصول على الردود. أولاً ، تحتاج إلى الحصول على القيمة من النموذج الخاص بك عند إرساله لأنه سيتم استخدامه للاستعلام عن OpenAI API.

الحصول على البيانات من النموذج

في React ، أفضل طريقة لتخزين البيانات وتحديثها هي استخدام الحالات. في المكونات الوظيفية ، يتم استخدام الخطاف useState() للعمل مع الحالات. يمكنك إنشاء حالة ، وتعيين القيمة من النموذج الخاص بك إلى الحالة ، وتحديثها كلما تغيرت قيمتها. لنبدأ باستيراد الخطاف useState() إلى مكون FormSection.jsx ثم إنشاء حالة لتخزين وتحديث newQuestions .

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

بعد ذلك ، يمكنك تعيين قيمة حقل textarea إلى الحالة وإنشاء حدث onChange() لتحديث الحالة كلما تغيرت قيمة الإدخال:

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

أخيرًا ، يمكنك إنشاء حدث onClick() ، لتحميل وظيفة كلما تم النقر فوق زر الإرسال. سيتم إنشاء هذه الطريقة في ملف App.js وتمريرها كعوامل إلى مكون FormSection.jsx باستخدام قيمتي newQuestion و setNewQuestion كوسائط.

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

لقد أنشأت الآن حالة لتخزين وتحديث قيمة النموذج ، وإضافة طريقة يتم تمريرها كعناصر من ملف App.js وتعالج حدث النقر. هذا ما سيبدو عليه الرمز النهائي:

 // 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;

ستكون الخطوة التالية هي إنشاء طريقة في ملف App.js للتعامل مع العملية الكاملة للتفاعل مع OpenAI API.

التفاعل مع OpenAI API

للتفاعل مع OpenAI API والحصول على مفاتيح API في تطبيق React ، يجب عليك إنشاء حساب OpenAI API. يمكنك التسجيل للحصول على حساب على موقع OpenAI الإلكتروني باستخدام حساب google أو البريد الإلكتروني الخاص بك. لإنشاء مفتاح API ، انقر فوق شخصي في الزاوية العلوية اليمنى من موقع الويب ؛ ستظهر بعض الخيارات. انقر فوق عرض مفاتيح API .

انقر فوق الزر إنشاء مفتاح سري جديد ، وانسخ المفتاح في مكان ما كما تستخدمه في هذا التطبيق للتفاعل مع OpenAI. يمكنك الآن المتابعة لتهيئة OpenAI عن طريق استيراد حزمة openai (قمت بتثبيتها بالفعل) جنبًا إلى جنب مع طريقة التكوين. ثم قم بإنشاء تكوين باستخدام المفتاح الذي تم إنشاؤه واستخدمه لتهيئة OpenAI.

 // 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;

في الكود أعلاه ، يتم تخزين مفتاح OpenAI API كمتغير بيئة في ملف env . يمكنك إنشاء ملف .env في المجلد الجذر للتطبيق الخاص بك وتخزين المفتاح إلى المتغير REACT_APP_OPENAI_API_KEY .

 // .env REACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx…

يمكنك الآن المتابعة لإنشاء طريقة generateResponse في ملف App.js ، وتمرير المعلمتين المتوقعتين من النموذج الذي أنشأته بالفعل للتعامل مع الطلب والحصول على استجابة من واجهة برمجة التطبيقات.

 // 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;

يمكنك الآن إرسال طلب إلى OpenAI API. يمكن لواجهة برمجة تطبيقات OpenAI إجراء العديد من العمليات ، مثل السؤال والجواب (سؤال وجواب) وتصحيح القواعد والترجمة وغير ذلك الكثير. تختلف الخيارات لكل عملية من هذه العمليات. على سبيل المثال ، قيمة المحرك لـ Q&A هي text-davinci-00 ، بينما بالنسبة لـ SQL translate هي code-davinci-002 . لا تتردد في التحقق من توثيق مثال OpenAI للأمثلة المختلفة وخياراتها.

في هذا البرنامج التعليمي ، نحن نعمل فقط مع الأسئلة والأجوبة ، وهذا ما يبدو عليه الخيار:

 { 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: ["\"], }

ملاحظة: لقد غيرت قيمة المطالبة.

الموجه هو السؤال الذي يتم إرساله من النموذج. هذا يعني أنك ستحتاج إلى استلامه من إدخال النموذج الذي تقوم بتمريره إلى طريقة generateResponse كمعامل. للقيام بذلك ، سوف تحدد الخيارات ثم تستخدم عامل الانتشار لإنشاء خيار كامل يتضمن الموجه:

 // 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;

في هذه المرحلة ، ما تبقى هو إرسال طلب عبر طريقة createCompletion إلى OpenAI للحصول على رد.

 // 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;

في الكود أعلاه ، سيتم عرض نص المجيب على وحدة التحكم الخاصة بك. لا تتردد في اختبار طلبك عن طريق طرح أي سؤال. ستكون الخطوة الأخيرة هي إنشاء حالة تحتوي على مجموعة من الأسئلة والأجوبة ثم إرسال هذه المصفوفة كعنصر خاص في مكون قسم الإجابة . هذا ما سيبدو عليه الكود النهائي لـ App.js :

 // 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;

يمكنك الآن تحرير مكون AnswerSection ، بحيث يتلقى قيمة props من App.js واستخدام طريقة JavaScript Map() للبحث في مصفوفة storedValues :

 // 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;

عند تشغيل التطبيق الخاص بك واختباره عن طريق طرح الأسئلة ، ستظهر الإجابة أدناه. لكن ستلاحظ أن زر النسخ لا يعمل. ستحتاج إلى إضافة حدث onClick() إلى الزر ، بحيث يُطلق طريقة للتعامل مع الوظيفة. يمكنك استخدام طريقة navigator.clipboard.writeText() للتعامل مع الوظيفة. هذا ما سيبدو عليه مكون AnswerSection الآن:

 // 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;

عند تشغيل التطبيق الخاص بك ، سيعمل تطبيق استنساخ ChatGPT الخاص بك بشكل مثالي. يمكنك الآن نشر تطبيقك للوصول إليه عبر الإنترنت ومشاركته مع الأصدقاء.

كيفية نشر تطبيق React الخاص بك على Kinsta

لا يكفي إنشاء هذا التطبيق وتركه على أجهزة الكمبيوتر المحلية الخاصة بك. سترغب في مشاركته عبر الإنترنت ، حتى يتمكن الآخرون من الوصول إليه. دعونا نرى كيفية القيام بذلك باستخدام GitHub و Kinsta.

ادفع الرمز الخاص بك إلى GitHub

لدفع التعليمات البرمجية الخاصة بك إلى GitHub ، يمكنك استخدام أوامر Git ، وهي طريقة موثوقة وفعالة لإدارة تغييرات التعليمات البرمجية ، والتعاون في المشاريع ، والحفاظ على محفوظات الإصدار.

ستكون الخطوة الأولى لدفع الرموز الخاصة بك هي إنشاء مستودع جديد عن طريق تسجيل الدخول إلى حساب GitHub الخاص بك ، والنقر فوق الزر + في الزاوية اليمنى العليا من الشاشة ، وتحديد مستودع جديد من القائمة المنسدلة.

امنح مستودعك اسمًا ، وأضف وصفًا (اختياريًا) ، واختر ما إذا كنت تريد أن يكون عامًا أو خاصًا. انقر فوق إنشاء مستودع لإنشائه.

بمجرد إنشاء المستودع الخاص بك ، تأكد من حصولك على عنوان URL الخاص بالمستودع من الصفحة الرئيسية للمستودع الخاص بك ، والتي ستحتاج إلى دفع التعليمات البرمجية الخاصة بك إلى GitHub.

افتح Terminal أو موجه الأوامر وانتقل إلى الدليل الذي يحتوي على مشروعك. قم بتشغيل الأوامر التالية واحدًا تلو الآخر لدفع التعليمات البرمجية الخاصة بك إلى مستودع GitHub الخاص بك:

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

يقوم git init بتهيئة مستودع Git محلي ، git add . يضيف كل الملفات الموجودة في الدليل الحالي والأدلة الفرعية الخاصة به إلى مستودع Git الجديد. git commit -m "my first commit" بإجراء التغييرات على المستودع برسالة موجزة. يعيّن git remote add origin [repository URL] عنوان URL للمستودع حيث يقوم المستودع البعيد و git push -u origin master بدفع الكود إلى المستودع البعيد (الأصل) في الفرع الرئيسي.

انشر تطبيق ChatGPT Clone React الخاص بك على Kinsta

لنشر مستودعك في Kinsta ، اتبع الخطوات التالية:

1. قم بتسجيل الدخول إلى أو إنشاء حساب Kinsta الخاص بك على لوحة معلومات My Kinsta.
2. انقر فوق التطبيقات على الشريط الجانبي الأيسر ، ثم انقر فوق إضافة خدمة .
3. حدد التطبيق من القائمة المنسدلة لنشر تطبيق React على Kinsta.
4. حدد المستودع الذي ترغب في نشره من النموذج الذي يظهر. إذا كان لديك عدة فروع ، يمكنك اختيار الفرع الذي تريد نشره وتعيين اسم للتطبيق. حدد موقعًا لمركز البيانات من بين 25 موقعًا متاحًا ، وسيقوم Kinsta تلقائيًا باكتشاف أمر بدء.
5. أخيرًا ، ليس من الآمن دفع مفاتيح API إلى المضيفين العامين مثل GitHub ، فقد تمت إضافته كمتغير بيئة محليًا. عند الاستضافة ، يمكنك أيضًا إضافته كمتغير بيئة باستخدام نفس اسم المتغير والمفتاح كقيمة له.

سيبدأ تطبيقك في النشر ، وفي غضون بضع دقائق ، سيتم توفير ارتباط للوصول إلى الإصدار المنشور من التطبيق الخاص بك. في هذه الحالة ، هذا هو https://chatgpt-clone-g9q10.kinsta.app/ ملاحظة: يمكنك تمكين النشر التلقائي ، لذلك سيعيد Kinsta نشر تطبيقك كلما قمت بتغيير قاعدة الكود ودفعه إلى GitHub.

ملخص

يمكن استخدام OpenAI API لبناء مجموعة واسعة من التطبيقات المحتملة ، من دعم العملاء والمساعدين الشخصيين إلى ترجمة اللغة وإنشاء المحتوى.

في هذا البرنامج التعليمي ، تعلمت كيفية إنشاء تطبيق استنساخ ChatGPT باستخدام React و OpenAI. يمكنك دمج هذا التطبيق / الميزة في تطبيقات أخرى لتوفير تجارب محادثة شبيهة بالبشر للمستخدمين.

هناك المزيد لما يمكن فعله باستخدام OpenAI API وكيفية تحسين تطبيق النسخ هذا. على سبيل المثال ، يمكنك تنفيذ التخزين المحلي بحيث لا تختفي الأسئلة والأجوبة السابقة حتى بعد تحديث المتصفح.

مع الإصدار التجريبي المجاني من Kinsta و Hobby Tier ، يمكنك البدء بسهولة دون أي تكلفة على استضافة التطبيق لدينا. فلماذا لا تجربها وترى ما يمكنك إنشاؤه؟

شارك مشروعك وخبراتك في التعليق أدناه.