در این آموزش، نحوه ساخت یک رابط کاربری ساده را بررسی خواهیم کرد که از OpenAI HTTP API در React استفاده می کند. برنامه ای که ما ایجاد خواهیم کرد به کاربران امکان را می دهد که با استفاده از فناوری پردازش زبان طبیعی OpenAI، سؤالات خود را بپرسند و پاسخ های تکمیل شده را دریافت کنند، بسیار شبیه به تعامل در یک جلسه ChatGPT که تجربه کرده ایم.

ما مراحل ساده ساختن یک برنامه هوشمند تکمیل متن با OpenAI API و React را طی خواهیم کرد. این مراحل عبارتند از:

1- یک کلید API از پلتفرم OpenAI دریافت کنید.
2- با create-react-app یک برنامه react ایجاد کنید.
3- نصب axios (یک کتابخانه سرویس گیرنده HTTP مبتنی بر Promise ها برای جاوا اسکریپت است.) برای ساده کردن شبکه (و بعداً می توان از react-query استفاده کرد) را انجام دهید.
4- آماده سازی پارامترهای لازم برای کال کردنOpenAI HTTP.
5- ارسال درخواست های HTTP و دریافت پاسخ از OpenAI API.
6- ساخت یک رابط کاربری پایه برای نمایش متن کامل شده و تعامل با کاربر.

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

1- کلید API را برای OpenAPI دریافت کنید

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

به وب سایت OpenAI بروید و روی دکمه Profile در گوشه سمت راست بالا کلیک کنید. در منوی کشویی که ظاهر می‌شود، «View API keys» را انتخاب کنید تا به هر کلید API موجود مرتبط با حساب خود دسترسی داشته باشید.

اگر یک کلید API موجود ندارید یا نیاز به ایجاد یک کلید جدید دارید، این کار را می توان به راحتی در پلتفرم OpenAI مطابق تصویر زیر انجام دهید.

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

2-یک برنامه React ایجاد کنید

ابتدا یک برنامه خالی به نام chatty با create-react-app ایجاد می کنیم:

یک پوشه با همان نام ایجاد می شود و تمام وابستگی ها را در آن قرار می گیرد. پس از آن، برای ساده کردن منطق شبکه، باید axios را نصب کنید.

و سپس می توانید برنامه خالی خود را راه اندازی کنید:

3- آماده سازی پارامترها برای تماس HTTP

اکنون، بیایید پارامترهای مورد نیاز برای فراخوانی API را آماده کنیم. از آنجایی که می خواهیم OpenAI به ما پیشنهاد دهد، به این نقطه پایانی نیاز داریم:

به چند پارامتر نیاز دارید:

PROMPT به عنوان نقطه شروع یا زمینه ای برای ایجاد پاسخ استفاده می شود. مدل های زیادی ارائه شده است. این الگوریتم اصلی ChatGPT است و با مکانیسم ها و مجموعه داده های مختلف آموزش داده شده است.

ما در اینجا از text-davinci-002 برای کار خود استفاده خواهیم کرد. نشانه ها فقط کلماتی هستند که با فاصله یا سایر علائم نگارشی تقسیم می شوند. و پارامتر stop رشته‌ای است که دنباله‌ای از نشانه‌ها را نشان می‌دهد که اگر توسط API تولید شوند، سیگنالی را نشان می‌دهند که تولید باید متوقف شود.

و با پارامتر، ما همچنین به مقداری هدر HTTP (برای حمل اطلاعات توکن و قالب داده) نیاز داریم.

لطفاً توجه داشته باشید که API_KEY را با چیزی که در مرحله اول کپی کرده‌اید جایگزین کنید – لطفاً آن را در پایگاه کد خود قرار ندهید و هرگز آن را به مخزن git وارد نکنید

4- درخواست شبکه را انجام دهید

بنابراین بیایید نظریه فوق را با هم در یک تابع قرار دهیم:

لطفاً توجه داشته باشید که داده های بازگردانده شده از سرور ممکن است چندین مورد داشته باشد. ما همیشه اولین مورد را در لیست انتخاب می کنیم و از قسمت text آن استفاده می کنیم.

5- ساختن یک رابط کاربری ساده

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

آنها را کنار هم قرار دهید

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

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

خلاصه

این یک آموزش راه اندازی و اجرای سریع است. ما نشان دادیم که چگونه با استفاده از OpenAI API و React یک برنامه تکمیل متن ساده بسازیم. ما در ساخت یک کلید API و ادغام API با یک برنامه React با استفاده از کتابخانه axios قدم برداشتیم. سپس نحوه استفاده از API را برای تولید تکمیل متن بر اساس ورودی کاربر و نحوه نمایش نتایج در برنامه React نشان دادیم.

سوالات و نظرات خود را با ما در میان بگذارید.