بررسی اجمالی
این مقاله نحوه ایجاد یک برنامه ChatGPT در Blazor WebAssembly با استفاده از OpenAI API را آموزش می دهد. ChatGPT یک مدل زبان قدرتمند توسعه یافته توسط OpenAI است که برای تولید متنی شبیه به انسان بر اساس اعلان های ورودی آموزش دیده است. این مدل پاسخهای زبانی جذاب و طبیعی را تولید میکند و آن را برای رابطهای مکالمه ایدهآل میکند.
معرفی
Blazor یک چارچوب متن باز نوآورانه و مدرن است که امکان ایجاد برنامه های کاربردی وب با استفاده از C# و .NET را فراهم می کند. این چارچوب نشان دهنده یک رویکرد جدید و پیشرفته برای توسعه رابط های کاربری غنی و تعاملی است که سریع، کارآمد و کاربر پسند باشد. با Blazor، می توانید از قدرت WebAssembly برای اجرای کد دات نت در مرورگر استفاده کنید و تجربه ای یکپارچه و یکپارچه برای کاربر نهایی ایجاد کنید.
یکی از اپلیکیشن های جالبی که می توان با استفاده از Blazor ساخت، چت بات است که می تواند متنی شبیه انسان بر اساس ورودی های کاربر تولید کند. ChatGPT یک مدل زبان بزرگ است که توسط OpenAI توسعه یافته است که بر روی حجم عظیمی از داده ها آموزش دیده است و می تواند پاسخ هایی مشابه آنچه توسط یک انسان نوشته شده است ایجاد کند. با استفاده از OpenAI API، میتوانیم به این مدل دسترسی داشته باشیم و بر اساس ورودیهای کاربر، پاسخهایی تولید کنیم.
الزامات
برای ایجاد برنامه ChatGPT خود، با راه اندازی محیط توسعه خود شروع می کنیم. این شامل نصب ابزارها و وابستگیهای لازم، از جمله NET SDK و Blazor WebAssembly است. در مرحله بعد، یک پروژه Blazor WebAssembly جدید ایجاد می کنیم و آن را برای استفاده از OpenAI API برای ChatGPT پیکربندی می کنیم. این شامل ایجاد یک کلید API و تنظیم نقاط پایانی مناسب برای ارتباط بین برنامه ما و OpenAI API است.
هنگامی که محیط خود را راه اندازی کردیم، به اجرای برنامه خود ادامه خواهیم داد. این شامل ایجاد یک رابط کاربری ساده و شهودی است که به کاربر اجازه می دهد یک درخواست را وارد کرده و پاسخی را از ChatGPT دریافت کند.
برای مدیریت ارتباط بین برنامه ما و OpenAI API، از کلاس HttpClient در C# استفاده می کنیم. این کلاس یک راه راحت برای درخواست HTTP و دریافت پاسخ از یک وب API ارائه می دهد. ما از این کلاس برای ارسال درخواست ورودی کاربر به OpenAI API و دریافت پاسخ از ChatGPT استفاده خواهیم کرد.
پاسخ دادن به سؤالات و نشان دادن پاسخ ها در قسمت جلو
در کد زیر می توانید یک فیلد ورودی را مشاهده کنید که داده های آن به متغیر «@message» محدود شده است.
این سوال ما برای انتقال به فراخوانی API خواهد بود و برای آن پاسخی به عنوان پاسخ دریافت خواهیم کرد.
پس از دریافت پاسخ، باید آن را در UI ارائه دهیم. برای این برنامه، ما یک رابط کاربری ساده با استفاده از اجزای ریش تراش مانند صفحات تیغ ارائه شده توسط Blazor ایجاد کرده ایم.
<div class="h1 mb-4 text-center"> Welcome to Chat GPT Made with Blazor Web Assembly </div>
<div style="line-height:40px;" class="h4 mb-4 text-center"> Here you can search for anything, and even impress your friends or colleagues by making one yourself. </div>
<div class="form-group text-center">
<input class="form-control my-4 text-center py-2 m-auto" style="max-width:600px;" type="text" @bind="@message" placeholder="Type your message here" />
<button class="btn btn-success mb-4 px-2" style="max-width:200px;" onclick="@GetResponseFromGPT3">Find Answer</button>
</div>
<div class="d-flex justify-content-center text-center">
<div style="min-width:600px; min-height:260px; max-width:700px;" class="mt-2container border border-1 rounded-2 p-3 text-center">@generatedText</div>
</div>
پاسخ واکشی شده در «@generatedText» ذخیره میشود و سپس در داخل div ما نشان داده میشود.