با React و OpenAI API کلون ChatGPT خود را بسازید

در این آموزش، نحوه ساخت یک برنامه چت بات سفارشی را توضیح خواهیم داد که به ما امکان می دهد سؤال بپرسیم و پاسخ هایی با کیفیت بالا دریافت کنیم. ربات اعلان های قبلی را به خاطر می آورد و مکالمه آگاه از زمینه را شبیه سازی می کند.

که ربات تمام شده ما را در حال کار نشان می دهد" loading="lazy">

چت‌بات‌ها به ابزاری ضروری برای کسب‌وکارها و توسعه‌دهندگانی تبدیل شده‌اند که به دنبال بهبود تعاملات مشتری و ساده‌سازی تجربیات کاربر در چشم‌انداز دیجیتالی امروزی هستند که به سرعت در حال تحول هستند.

ChatGPT OpenAI از یک آزمایش پیشرفته به یک نیروگاه در توسعه ربات چت تبدیل شده است. افزایش شهاب‌ساختی آن به موفقیت چیزی جز چشمگیر نیست و کاربران در سراسر جهان را مجذوب خود می‌کند.

کد دمو این پروژه در CodeSandbox موجود است. شما باید کلید OpenAI API خود را در فایل .env ارائه دهید تا آن را به صورت زنده آزمایش کنید. برای دریافت آن، یک حساب کاربری در OpenAI ایجاد کنید، وارد شوید، به کلیدهای API بروید و یک کلید API جدید ایجاد کنید.

ویژگی های برنامه ریزی و رابط کاربری

برنامه ما بر اساس React خواهد بود و از OpenAI API برای دسترسی به داده ها و استفاده از ماژول های CSS برای استایل سازی استفاده می کنیم.

استفاده از React به ما این امکان را می دهد که یک رابط کاربری پویا و پاسخگو ایجاد کنیم و تجربه کلی کاربر را افزایش دهیم.

OpenAI API به ما امکان می دهد به قابلیت های پیشرفته پردازش زبان دسترسی پیدا کنیم و داده هایی را برای ایجاد تعاملات روشنگرانه فراهم کنیم.

علاوه بر این، ماژول‌های CSS به ما اجازه می‌دهند تا یک طراحی ماژولار را حفظ کنیم و توسعه کارآمد و سفارشی‌سازی برنامه را تسهیل کنیم.

ویژگی هایی که ما اجرا خواهیم کرد عبارتند از:

یک منطقه ورودی مشخص که در آن کاربران می‌توانند درخواست‌هایی را ایجاد کنند، و درخواست‌های مرتبط با متن را دعوت کنند.

یک دکمه ارسال که به کاربران امکان می دهد درخواست های خود را به API ارسال کنند و فرآیند مکالمه را آغاز کنند.

موارد پیامی که به عنوان پیام‌هایی به سبک چت در پنجره مکالمه نمایش داده می‌شوند و تجربه گفتگوی تعاملی را بهبود می‌بخشند.

مواردی را برای نمایش پاسخ‌های ChatGPT پیام دهید که یک جریان مکالمه را فراهم می‌کنند.

یک ویژگی History که تمام درخواست‌های اخیر کاربر را فهرست می‌کند. این همچنین به کاربران امکان می دهد مکالمات قبلی را مجدداً مشاهده کنند.

یک دکمه Clear که امکان حذف محتوای تولید شده را فراهم می کند و یک صفحه تمیز برای مکالمات جدید ارائه می دهد.

تصویر زیر وایرفریم مبتنی بر کامپوننت ما را نشان می دهد.

از رابط برنامه" loading="lazy">

کل برنامه در ظرف اصلی پیچیده می شود که همه عناصر را در کنار هم نگه می دارد. بیشتر به یک طرح دو ستونی تقسیم می شود.

ستون اول شامل تمام پیام‌های کاربر و ChatGPT می‌شود. در پایین ستون، یک ناحیه ورودی و یک دکمه برای ارسال درخواست وجود دارد.

ستون دوم تاریخچه همه اعلان های اخیر را نگه می دارد. در پایین ستون، یک دکمه Clear وجود دارد که به کاربر اجازه می دهد محتوای تولید شده را پاک کند.

انتخاب طرح رنگ

طراحی اپلیکیشن سهولت درک محتوا را در اولویت قرار خواهد داد. این به ما امکان می دهد چند مزیت مهم را ارائه دهیم:

کاربران قادر خواهند بود به سرعت اطلاعات ارائه شده را درک کنند که منجر به تجربه بصری تر و کاربر پسندتر می شود.

همچنین دسترسی را افزایش می‌دهد و تضمین می‌کند که افراد با پیشینه‌ها و توانایی‌های مختلف می‌توانند به راحتی محتوا را پیمایش کرده و با آن درگیر شوند.

تصویر زیر طرح رنگ ما را نشان می دهد.

پس‌زمینه برنامه سیاه و پیام‌ها، موارد تاریخچه و فرم ورودی خاکستری تیره خواهد بود.

متن روی پیام‌ها و پس‌زمینه‌های ورودی سفید خواهد بود که کنتراست خوبی ایجاد می‌کند و خواندن متن را آسان می‌کند.

برای دادن نکات برجسته به برنامه، عناوین ستون‌ها، دکمه ارسال ، و آواتارهای پیام پاسخ از رنگ سبز روشن و سبز استفاده می‌کنند.

برای برجسته کردن دکمه Clear ، از رنگ قرمز ملایم استفاده می شود. این همچنین به کاربران کمک می کند تا از کلیک تصادفی روی دکمه جلوگیری کنند.

راه اندازی برنامه React

ما از create-react-app برای ایجاد برنامه خود استفاده خواهیم کرد. npx create-react-app react-chatgpt برای ایجاد یک پروژه React جدید اجرا کنید.

یک دقیقه صبر کنید تا تنظیمات کامل شود و سپس پوشه کاری را با استفاده از cd react-chatgpt به پوشه ای که به تازگی ایجاد شده است تغییر دهید و npm start اجرا کنید تا سرور توسعه دهنده راه اندازی شود.

این باید پروژه ما را در مرورگر پیش فرض ما باز کند. اگر نه، به http://localhost:3000 بروید تا آن را به صورت دستی باز کنید. همانطور که در تصویر زیر مشاهده می کنید، باید صفحه خوش آمد گویی React به ما ارائه شود.

اضافه کردن سبک های جهانی

برای ایجاد یک ظاهر بصری منسجم و یکپارچه در تمام اجزای برنامه، استایل جهانی اضافه می کنیم.

index.css باز کنید و قوانین استایل زیر را در آن لحاظ کنید:

 @import url ( "https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" ) ; * { margin : 0 ; padding : 0 ; box-sizing : border-box ; font-family : "Varela Round" , sans-serif ; } body { background-color : #121212 ; }

ابتدا فونت Varela Round را وارد می کنیم و کل برنامه را برای استفاده از آن تنظیم می کنیم.

ما همچنین هر گونه حاشیه و بالشتک از پیش تعریف شده را حذف می کنیم، و همچنین box-sizing روی border-box قرار می دهیم تا برنامه در مرورگرهای مختلف یکسان به نظر برسد.

در نهایت، پس‌زمینه بدنه را روی رنگ تیره قرار می‌دهیم که به ما امکان می‌دهد محتوای برنامه را برجسته کنیم.

برای نشان دادن نویسندگان پیام‌های کاربر و OpenAI API به چند آواتار نیاز داریم. به این ترتیب تشخیص آنها راحت تر خواهد بود.

یک پوشه icons جدید در دایرکتوری src ایجاد کنید و آیکون های bot.png و user.png را در آن قرار دهید.

می‌توانید نمونه‌هایی را از فهرست icons در اینجا دانلود کنید، یا می‌توانید از نمونه‌های سفارشی از سایت‌هایی مانند FlatIcon یا Icons8 استفاده کنید، البته تا زمانی که نام فایل‌های بالا را نگه دارید.

ساخت اجزا

اول، ما به یک ساختار فایل به خوبی سازماندهی شده نیاز داریم که با طراحی وایرفریم مطابقت داشته باشد.

ما از ترمینال برای ایجاد پوشه و فایل های مؤلفه لازم استفاده می کنیم. هر مؤلفه فایل جاوا اسکریپت خود را برای عملکرد و فایل CSS برای یک ظاهر طراحی خواهد داشت.

دایرکتوری کاری موجود در پوشه src را با اجرای cd src تغییر دهید و سپس دستور زیر را اجرا کنید:

 mkdir components && cd components && touch Message.js Message.module.css Input.js Input.module.css History.js History.module.css Clear.js Clear.module.css

دستور بالا ابتدا یک پوشه /components/ ایجاد می کند، سپس پوشه کاری را به آن تغییر می دهد و تمام فایل های لازم را در داخل آن ایجاد می کند.

جزء پیام

مولفه Message اعلان‌های کاربر و پاسخ‌های API را در مکالمه نمایش می‌دهد و تبادل اطلاعات در زمان واقعی بین کاربر و ربات چت را تسهیل می‌کند.

فایل Message.js را باز کنید و کد زیر را وارد کنید:

 import bot from "../icons/bot.png" ; import user from "../icons/user.png" ; import styles from "./Message.module.css" ; export default function Message ( { role , content } ) { return ( < div className = { styles . wrapper } > < div > < img src = { role === "assistant" ? bot : user } className = { styles . avatar } alt = "profile avatar" / > < / div > < div > < p > { content } < / p > < / div > < / div > ) ; }

ابتدا آیکون های دانلود شده را برای آواتارها وارد می کنیم و سپس قوانین CSS خارجی را برای استایل کردن وارد می کنیم.

پس از آن، ما یک پوشش برای کامپوننت Message ایجاد می کنیم که شامل آیکون ها و محتوای متنی است.

برای نمایش آواتار مناسب به عنوان تصویر src از role prop در شرطی استفاده می کنیم.

ما همچنین از محفظه content استفاده می کنیم که به عنوان پاسخ متنی از OpenAI API و اعلان ورودی کاربر ارسال می شود.

حالا بیایید کامپوننت را طوری سبک کنیم که شبیه یک پیام چت به نظر برسد! فایل Message.module.css را باز کنید و قوانین زیر را در آن لحاظ کنید:

 .wrapper { display : grid ; grid-template-columns : 60 px auto ; min-height : 60 px ; padding : 20 px ; margin-bottom : 20 px ; border-radius : 10 px ; background-color : #1b1b1d ; } .avatar { width : 40 px ; height : 40 px ; }

ما طرح را به دو ستون تقسیم می کنیم که آواتارها در ظرف با عرض ثابت در سمت راست و متن در سمت چپ نشان داده شده اند.

سپس مقداری padding و margin به انتهای پیام اضافه می کنیم. همچنین پیام را طوری استایل می دهیم که حاشیه های گرد داشته باشد و پس زمینه را خاکستری تیره می کنیم.

در نهایت، نماد آواتار را روی یک عرض و ارتفاع ثابت قرار می دهیم.

جزء ورودی

مؤلفه Input یک عنصر رابط خواهد بود که برای گرفتن سؤالات کاربر طراحی شده است و به عنوان ابزاری برای تعامل و تعامل کاربران با ربات چت عمل می کند.

فایل Input.js را باز کنید و کد زیر را وارد کنید:

 import styles from "./Input.module.css" ; export default function Input ( { value , onChange , onClick } ) { return ( < div className = { styles . wrapper } > < input className = { styles . text } placeholder = "Your prompt here..." value = { value } onChange = { onChange } / > < button className = { styles . btn } onClick = { onClick } > Go < / button > < / div > ) ; }

ابتدا شیوه نامه خارجی را برای استایل دادن به کامپوننت وارد می کنیم.

ما پوشش کامپوننت را که شامل فیلد ورودی برای درخواست‌های کاربر و دکمه ارسال آن به API است، برمی‌گردانیم.

ما مقدار مکان نگهدار را تنظیم می کنیم که وقتی فرم ورودی خالی است نمایش داده شود، و value prop را برای نگه داشتن دستور وارد شده و همچنین prop onChange ایجاد می کنیم که پس از تغییر مقدار ورودی فراخوانی می شود.

برای دکمه، هنگامی که کاربر بر روی دکمه کلیک کند، پروپ onClick فراخوانی می شود.

حالا بیایید کامپوننت را طوری استایل کنیم که ناحیه ورودی زیبا به نظر برسد و کاربر تشویق شود که دستورات را ارائه دهد! فایل Input.module.css را باز کنید و قوانین زیر را در آن لحاظ کنید:

 .wrapper { display : grid ; grid-template-columns : auto 100 px ; height : 60 px ; border-radius : 10 px ; background-color : #323236 ; } .text { border : none ; outline : none ; background : none ; padding : 20 px ; color : white ; font-size : 16 px ; } .btn { border : none ; border-radius : 0 10 px 10 px 0 ; font-size : 16 px ; font-weight : bold ; background-color : rgb ( 218 , 255 , 170 ) ; } .btn :hover { cursor : pointer ; background-color : rgb ( 200 , 253 , 130 ) ; }

ما بسته بندی را به دو ستون تقسیم می کنیم که یک عرض ثابت برای دکمه و بقیه عرض موجود به ناحیه ورودی اختصاص داده شده است.

همچنین ارتفاع خاص کامپوننت را تعریف می کنیم، حاشیه های گرد را برای آن تعیین می کنیم و پس زمینه را خاکستری تیره می کنیم.

برای ناحیه ورودی، حاشیه، طرح کلی، پس‌زمینه پیش‌فرض را حذف کرده و مقداری بالشتک اضافه می‌کنیم. رنگ متن را سفید قرار می دهیم و اندازه فونت خاصی را تعیین می کنیم.

جزء تاریخچه

مؤلفه History توالی تعاملات قبلی کاربر و چت بات را نشان می دهد و به کاربران یک مرجع متنی از مکالمه خود ارائه می دهد.

فایل History.js را باز کنید و کد زیر را وارد کنید:

 import styles from "./History.module.css" ; export default function History ( { question , onClick } ) { return ( < div className = { styles . wrapper } onClick = { onClick } > < p > { question . substring ( 0 , 15 ) } ... < / p > < / div > ) ; }

ابتدا قوانین سبک خارجی را برای کامپوننت وارد می کنیم. سپس لفافی را که شامل متن می شود برمی گردانیم.

مقدار متن به عنوان یک question از درخواست کاربر ارسال می شود و فقط ۱۵ کاراکتر اول رشته متن نمایش داده می شود.

کاربران مجاز خواهند بود بر روی موارد تاریخچه کلیک کنند، و ما برای کنترل رفتار کلیک، پایه onClick را ارسال می کنیم.

حالا بیایید کامپوننت را سبک کنیم تا مطمئن شویم که از نظر بصری جذاب است و به خوبی در نوار کناری قرار می گیرد! فایل History.module.css را باز کنید و قوانین زیر را در آن لحاظ کنید:

 .wrapper { padding : 20 px ; margin-bottom : 20 px ; border-radius : 10 px ; background-color : #1b1b1d ; } .wrapper :hover { cursor : pointer ; background-color : #323236 ; }

مقداری بالشتک تنظیم می کنیم، حاشیه را به پایین اضافه می کنیم و گوشه های گرد را برای آیتم های تاریخچه تنظیم می کنیم. رنگ پس زمینه را هم روی خاکستری تیره قرار دادیم.

هنگامی که کاربر روی مورد قرار می گیرد، مکان نما به یک اشاره گر و رنگ پس زمینه به سایه روشن تر از خاکستری تغییر می کند.

مولفه Clear

مولفه Clear یک عنصر رابط کاربری است که برای بازنشانی یا پاک کردن مکالمه در حال انجام طراحی شده است و راهی سریع برای شروع یک تعامل جدید بدون دور شدن از رابط فعلی را در اختیار کاربران قرار می دهد.

فایل Clear.js را باز کنید و کد زیر را وارد کنید:

 import styles from "./Clear.module.css" ; export default function Clear ( { onClick } ) { return ( < button className = { styles . wrapper } onClick = { onClick } > Clear < / button > ) ; }

ابتدا شیوه نامه خارجی را برای استایل دادن به کامپوننت وارد می کنیم.

دکمه ای را برمی گردانیم که به کاربران امکان می دهد محتوای برنامه را پاک کنند. برای دستیابی به رفتار دلخواه، پایه onClick ارسال می کنیم.

حالا بیایید کامپوننت را استایل کنیم تا برجسته شود و احتمال اینکه کاربران به طور تصادفی آن را فشار دهند کاهش می یابد! فایل Clear.module.css را باز کنید و قوانین زیر را در آن لحاظ کنید:

 .wrapper { width : 100 % ; height : 60 px ; background-color : #ff9d84 ; border : none ; border-radius : 10 px ; font-size : 16 px ; font-weight : bold ; } .wrapper :hover { cursor : pointer ; background-color : #ff886b ; }

دکمه را طوری تنظیم می کنیم که عرض ستون را پر کند، ارتفاع مشخص را تنظیم کرده و رنگ پس زمینه را روی قرمز ملایم قرار می دهیم.

ما همچنین حاشیه پیش فرض را حذف می کنیم، گوشه های گرد را تنظیم می کنیم، اندازه فونت خاصی را تعیین می کنیم و آن را پررنگ می کنیم.

در حالت شناور، مکان نما به یک اشاره گر و رنگ پس زمینه به یک سایه تیره تر از قرمز تغییر می کند.

ساخت رابط کاربری

در بخش قبل، تمام اجزای لازم را ساختیم. حالا بیایید آنها را کنار هم بگذاریم و رابط کاربری برنامه را بسازیم.

ما عملکرد آنها را برای ایجاد یک رابط چت بات کاربردی و تعاملی با کد سازمان یافته و قابل استفاده مجدد پیکربندی می کنیم.

فایل App.js را باز کنید و کد زیر را وارد کنید:

 import { useState } from "react" ; import Message from "./components/Message" ; import Input from "./components/Input" ; import History from "./components/History" ; import Clear from "./components/Clear" ; import "./styles.css" ; export default function App ( ) { const [ input , setInput ] = useState ( "" ) ; const [ messages , setMessages ] = useState ( [ ] ) ; const [ history , setHistory ] = useState ( [ ] ) ; return ( < div className = "App" > < div className = "Column" > < h3 className = "Title" > Chat Messages < / h3 > < div className = "Content" > { messages . map ( ( el , i ) => { return < Message key = { i } role = { el . role } content = { el . content } / > ; } ) } < / div > < Input value = { input } onChange = { ( e ) => setInput ( e . target . value ) } onClick = { input ? handleSubmit : undefined } / > < / div > < div className = "Column" > < h3 className = "Title" > History < / h3 > < div className = "Content" > { history . map ( ( el , i ) => { return ( < History key = { i } question = { el . question } onClick = { ( ) => setMessages ( [ { role : "user" , content : history [ i ] . question } , { role : "assistant" , content : history [ i ] . answer } , ] ) } / > ) ; } ) } < / div > < Clear onClick = { clear } / > < / div > < / div > ) ; }

ابتدا، قلاب useState را وارد می کنیم که از آن برای ردیابی وضعیت داده برای برنامه استفاده می کنیم. سپس تمام اجزایی را که ساختیم و شیوه نامه خارجی را برای یک ظاهر طراحی وارد می کنیم.

سپس متغیر وضعیت input را برای ذخیره ورودی درخواست کاربر، messages برای ذخیره مکالمه بین کاربر و ChatGPT و history برای ذخیره تاریخچه درخواست‌های کاربر ایجاد می‌کنیم.

ما همچنین پوشش اصلی را برای کل برنامه ایجاد می کنیم که دو ستون را نگه می دارد.

هر ستون دارای عنوان و بسته بندی محتوا است که شامل پیام های مکالمه، ناحیه ورودی و دکمه ارسال برای ستون اول و موارد تاریخچه و دکمه پاک کردن برای ستون دوم است.

پیام‌های مکالمه با نگاشت از طریق متغیر وضعیت messages و موارد سابقه ایجاد می‌شوند - با نگاشت از طریق متغیر وضعیت history .

ورودی onChange طوری تنظیم می کنیم که هر بار که کاربر هر مقداری را در فرم ورودی وارد می کند، متغیر حالت input را به روز می کند.

هنگامی که کاربر روی دکمه Send کلیک کرد، درخواست کاربر برای پردازش و دریافت پاسخ به OpenAI API ارسال می شود.

برای آیتم های تاریخچه، پایه onClick طوری تنظیم می کنیم که متغیر وضعیت messages به درخواست و پاسخ خاص به روز شود.

در نهایت، برای دکمه Clear ، تابع onClick prop را ارسال می کنیم که هم مقادیر پیام و هم مقدار تاریخچه را پاک می کند و داده های برنامه را پاک می کند.

ایجاد طرح بندی برنامه

در این بخش، اجزای رابط کاربری را برای ایجاد یک ساختار بصری برای تعامل مؤثر با کاربر ترتیب می‌دهیم.

App.css باز کنید و قوانین استایل زیر را در آن لحاظ کنید:

 .App { display : grid ; grid-template-columns : auto 200 px ; gap : 20 px ; max-width : 1000 px ; margin : 0 auto ; min-height : 100 vh ; padding : 20 px ; } .Column { color : white ; } .Title { padding : 20 px ; margin-bottom : 20 px ; border-radius : 10 px ; color : black ; background-color : rgb ( 218 , 255 , 170 ) ; } .Content { height : calc ( 100 vh - 200 px ) ; overflow-y : scroll ; margin-bottom : 20 px ; } ::-webkit-scrollbar { display : none ; }

ما بسته بندی اصلی برنامه را به دو ستون تقسیم می کنیم که با استفاده از طرح بندی شبکه ای CSS با یک شکاف از هم جدا می شوند و ستون سمت چپ را برای موارد تاریخچه روی یک عرض ثابت قرار می دهیم.

در مرحله بعد، wrapper را طوری تنظیم می‌کنیم که هرگز از عرض معینی تجاوز نکند، آن را روی صفحه وسط قرار می‌دهیم، از تمام ارتفاع نمای صفحه نمایش استفاده می‌کنیم و مقداری بالشتک داخل آن اضافه می‌کنیم.

برای محتویات هر ستون، رنگ متن را سفید قرار می دهیم.

برای عناوین ستون ها، مقداری بالشتک تنظیم می کنیم، حاشیه پایین را اضافه می کنیم و گوشه های گرد را تنظیم می کنیم. همچنین رنگ پس‌زمینه عنصر عنوان را روی لیمویی-سبز و رنگ متن را روی سیاه قرار می‌دهیم.

همچنین با تنظیم این قانون که محتوا نباید از ارتفاع معینی تجاوز کند، خود ستون‌ها را استایل می‌دهیم و در صورت رسیدن به خارج از ارتفاع، محتوای قابل پیمایش را تنظیم می‌کنیم. یک حاشیه هم به پایین اضافه می کنیم.

ما همچنین نوارهای اسکرول را مخفی می کنیم تا مجبور نباشیم به آنها استایل دهیم تا مقادیر پیش فرض هر مرورگر را نادیده بگیریم. این قانون اختیاری است و می‌توانیم آن را کنار بگذاریم.

دریافت کلید API از OpenAI

اگر قبلاً کلید API خود را برای Sandbox در مقدمه این آموزش تنظیم نکرده اید، مطمئن شوید که یک حساب کاربری در وب سایت OpenAI ایجاد کرده اید.

سپس وارد شوید و به کلیدهای API بروید و یک کلید API جدید ایجاد کنید.

کلید را در کلیپ بورد کپی کنید و پروژه خود را باز کنید.

یک فایل .env جدید در ریشه پروژه خود ایجاد کنید و مقدار آن را برای کلید زیر قرار دهید:

 REACT_APP_OPENAI_API_KEY = paste-your-code-here

آماده سازی درخواست تماس به OpenAI API

از طریق OpenAI API، ربات چت ما می‌تواند اعلان‌های متنی را به سرور OpenAI ارسال کند، که سپس ورودی را پردازش می‌کند و پاسخ‌هایی شبیه به انسان ایجاد می‌کند.

این امر با استفاده از یک مدل زبان قدرتمند که بر روی منابع متنی متنوع آموزش دیده است به دست می آید. با ارائه یک تاریخچه مکالمه به مدل و درخواست کاربر فعلی، ربات چت ما پاسخ های آگاه از زمینه را از API دریافت می کند.

در این بخش، درخواست را آماده کرده و فراخوانی API را برای دریافت پاسخ پیاده سازی می کنیم و داده ها را روی متغیر حالتی که قبلا تعریف کرده بودیم تنظیم می کنیم.

App.js را دوباره باز کنید و کد زیر را اضافه کنید:

 export default function App ( ) { const handleSubmit = async ( ) => { const prompt = { role : "user" , content : input , } ; setMessages ( [ ... messages , prompt ] ) ; await fetch ( "https://api.openai.com/v1/chat/completions" , { method : "POST" , headers : { Authorization : ` Bearer ${ process . env . REACT_APP_OPENAI_API_KEY } ` , "Content-Type" : "application/json" , } , body : JSON . stringify ( { model : "gpt-3.5-turbo" , messages : [ ... messages , prompt ] , } ) , } ) . then ( ( data ) => data . json ( ) ) . then ( ( data ) => { const res = data . choices [ 0 ] . message . content ; setMessages ( ( messages ) => [ ... messages , { role : "assistant" , content : res , } , ] ) ; setHistory ( ( history ) => [ ... history , { question : input , answer : res } ] ) ; setInput ( "" ) ; } ) ; } ; const clear = ( ) => { setMessages ( [ ] ) ; setHistory ( [ ] ) ; } ; return < div className = "App" > }

ابتدا یک تابع handleSubmit جداگانه ایجاد می کنیم که زمانی که کاربر دستور را در فرم ورودی وارد کرده و دکمه ارسال را کلیک کند، اجرا می شود.

در داخل handleSubmit ، ابتدا متغیر prompt را ایجاد می کنیم که user role و خود prompt را به عنوان یک شی نگه می دارد. این نقش مهم است زیرا، هنگام ذخیره پیام های خود، باید بدانیم که کدام یک از پیام های کاربر هستند.

سپس متغیر وضعیت messages را با فرمان کاربر به روز می کنیم.

در مرحله بعد، ما یک تماس واقعی fetch با نقطه پایانی api.openai.com/v1/chat/completions برای دسترسی به داده‌های OpenAI API برقرار می‌کنیم.

ما مشخص می‌کنیم که این یک درخواست POST است و هدرها را با نشانه مجوز و نوع محتوا تنظیم می‌کنیم. برای پارامترهای body ، ما مشخص می‌کنیم که از کدام مدل API استفاده کنیم و متغیر messages به عنوان محتوا از کاربر ارسال می‌کنیم.

پس از دریافت پاسخ، آن را در متغیر res ذخیره می کنیم. ما شیء متشکل از assistant نقش و خود پاسخ را به متغیر وضعیت message اضافه می کنیم.

ما همچنین متغیر وضعیت history را با شی به روز می کنیم و question و answer مربوطه را به عنوان کلید به روز می کنیم.

پس از دریافت پاسخ و به روز رسانی متغیرهای حالت، متغیر وضعیت input را پاک می کنیم تا فرم ورودی برای درخواست بعدی کاربر آماده شود.

در نهایت، ما یک تابع ساده clear برای پاک کردن messages و متغیرهای وضعیت history ایجاد می کنیم که به کاربر امکان می دهد داده های برنامه را پاک کند.

تست اپلیکیشن

در این مرحله، ما باید یک برنامه چت کاملاً کاربردی ایجاد می کردیم! آخرین کاری که باید انجام دهید این است که آن را آزمایش کنید.

ابتدا، بیایید سعی کنیم یک سوال از ChatGPT بپرسیم.

از طریق برنامه جدید ما پرسیده شد" loading="lazy">

انیمیشن بالا یک سوال در حال ارسال و یک پاسخ در حال دریافت را نشان می دهد.

حالا بیایید سعی کنیم یک مکالمه ایجاد کنیم.

همانطور که در انیمیشن بالا نشان داده شده است، چت بات متن پیام‌های قبلی را به خاطر می‌آورد، پس می‌توانیم با آن صحبت کنیم در حالی که کاملاً از متن آگاه هستیم.

حالا بیایید ببینیم وقتی روی دکمه History کلیک می کنیم چه اتفاقی می افتد.

توجه کنید که چت چگونه به درخواست و پاسخ کاربر مربوطه تغییر می کند. این می تواند مفید باشد اگر بخواهیم گفتگو را از نقطه ای خاص از سر بگیریم.

در نهایت بر روی دکمه Clear کلیک می کنیم.

همانطور که انتظار می رفت، محتویات برنامه پاک می شود. این یک گزینه مفید برای زمانی است که محتوای زیادی وجود دارد و کاربر می‌خواهد تازه شروع کند.

نتیجه

در این آموزش، نحوه ایجاد یک رابط کاربری با کاربری آسان، نحوه ساختار کدهای خود از طریق کامپوننت ها، نحوه کار با وضعیت ها، نحوه برقراری تماس های API و نحوه پردازش داده های دریافتی را یاد گرفتیم.

با ترکیبی از قابلیت‌های پیشرفته پردازش زبان طبیعی OpenIAI API و انعطاف‌پذیری React، اکنون می‌توانید برنامه‌های چت ربات پیچیده‌ای ایجاد کنید که می‌توانید آن‌ها را مطابق میل خود سفارشی کنید.

توجه داشته باشید که این آموزش کلید API را در قسمت جلویی ذخیره می‌کند، که ممکن است برای تولید امن نباشد. اگر می خواهید پروژه را مستقر کنید، توصیه می شود یک سرور Express ایجاد کنید و از کلید API در آنجا استفاده کنید.

همچنین، اگر می‌خواهید درخواست‌های تاریخچه پس از راه‌اندازی اولیه بعدی در دسترس باشد، می‌توانید آنها را ذخیره کرده و سپس از حافظه محلی بخوانید یا حتی یک پایگاه داده را به برنامه خود متصل کنید و داده‌ها را از آنجا ذخیره و بخوانید.

خبرکاو