چطور یک رابط زبان طبیعی به اپلیکیشن خود اضافه کنیم؟

نکات کلیدی

• اضافه‌کردن یک رابط زبان طبیعی به هر اپلیکیشنی آسان است؛ چه یک وب‌اپلیکیشن باشد چه یک اپلیکیشن نیتیو.

• می‌توان با اضافه‌کردن یک رابط کاربری پیام‌رسانی به اپلیکیشن، یک چت‌بات پایه ساخت تا کاربران بتوانند با چت‌بات صحبت کنند.

• می‌توانید در OpenAI Playground با رفتن به بخش assistant، فعال‌کردن Retrieval و سپس کلیک روی Add، فایل‌های PDF و CSV را آپلود کنید تا دانش سفارشی به چت‌بات اضافه شود.

• می‌توانید با استفاده از OpenAI functions به چت‌بات دسترسی به قابلیت‌های سفارشی داخل اپلیکیشن خود بدهید.

• برای تجربه کاربری بهتر، می‌توان چت‌بات را با افزودن فرمان‌های صوتی گسترش داد؛ با استفاده از MediaRecorder API مرورگر همراه با API تبدیل گفتار به متن (speech transcription) در OpenAI.

مقدمه

اوایل سال ۲۰۲۳، ChatGPT دنیا را زیر و رو کرد. ترکیبی از ترس و هیجان شکل گرفت درباره اینکه این فناوری چه کارهایی می‌تواند انجام دهد و چه کارهایی نمی‌تواند. شخصاً از دیدنش شگفت‌زده شدم و هنوز هم تقریباً هر روز از ChatGPT استفاده می‌کنم تا ایده‌هایم را سریع‌تر از چیزی که قبلاً تصور می‌کردم به نتیجه برسانم.

چند ماه گذشته را صرف یادگیری APIهای بتای OpenAI کرده‌ام برای ادغام دستیارهای سبک ChatGPT (یعنی چت‌بات‌ها) داخل اپلیکیشن‌های خودمان. راستش را بخواهید، واقعاً شوکه شدم از اینکه اضافه‌کردن یک رابط زبان طبیعی به هر اپلیکیشنی چقدر راحت است (مثال من اینجا یک وب‌اپلیکیشن است، اما هیچ دلیلی وجود ندارد که نتوانید آن را در یک اپلیکیشن نیتیو هم ادغام کنید).

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

در پایان هم چند ایده را پوشش می‌دهیم درباره اینکه چت‌بات‌ها و رابط‌های زبان طبیعی چطور می‌توانند کسب‌وکار را بهتر کنند.

دموهای زنده و کد نمونه

این مقاله همراه با دموهای زنده و کد نمونه‌ی قابل اجرا ارائه شده است. می‌توانید دموهای زنده را امتحان کنید تا ظاهرش را ببینید بدون اینکه مجبور شوید کد را اجرا کنید. البته اجرای کد هم خیلی سخت نیست و قدم بعدی برای شما این است که خودتان آن را اجرا کنید.

ممکن است دوست داشته باشید کد نمونه را در VS Code (یا هر ادیتور دیگری) باز کرده باشید تا هنگام خواندن بخش‌های بعدی بتوانید همراهی کنید و کل کد را در متن خودش ببینید.

دو مورد استفاده‌ی نمونه در این مقاله بررسی می‌شود:

کنترل یک نقشه با چت و صدا:

• Live demo

• Example code

پرسیدن سؤال از یک منبع داده سفارشی:

• Live demo

• Example code

پیش‌نیازها

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

ساخت یک چت‌بات پایه

بیایید با ابتدایی‌ترین چت‌بات شروع کنیم. این یعنی اضافه‌کردن یک رابط کاربری پیام‌رسانی به اپلیکیشن تا کاربران بتوانند با چت‌بات صحبت کنند. به‌تنهایی خیلی مفید نیست (چون کاربران می‌توانند همان کار را با رابط ChatGPT انجام دهند)، اما یک پله‌ی ضروری برای رسیدن به یک چت‌بات پیچیده‌تر است.

می‌توانید کل کد چت‌بات را از اینجا پیدا کنید.

برای اینکه همراه شوید و کد را خودتان اجرا کنید، ریپازیتوری را روی کامپیوترتان clone کنید:

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

توجه کنید که باید یک سرور بک‌اند خودمان را بین فرانت‌اند و OpenAI REST API قرار دهیم. اگر فرانت‌اند می‌توانست مستقیم با OpenAI صحبت کند ساده‌تر بود، اما متأسفانه این ممکن نیست چون باید کلید API OpenAI را ارسال کنیم. اگر این کلید را مستقیم از کد فرانت‌اند بفرستیم، دیگر نمی‌توانیم آن را محرمانه نگه داریم.

کلید API باید محرمانه بماند، پس نمی‌توانیم اجازه بدهیم در کد فرانت‌اند استفاده شود. قرار دادن بک‌اند بین فرانت‌اند و OpenAI کمک می‌کند کلید API پنهان بماند. فکر نکنید این قرار است خیلی پیچیده شود؛ بک‌اند بسیار ساده است و بیشتر کاری که می‌کند این است که درخواست‌های HTTP را از فرانت‌اند به OpenAI REST API فوروارد می‌کند.

شکل ۱. عملکرد پایه‌ی یک چت‌بات OpenAI

بعد از ثبت‌نام در OpenAI، باید به صفحه‌ی API keys بروید و کلید API خودتان را بسازید (یا یک کلید موجود را بردارید) همان‌طور که در شکل ۲ نشان داده شده است. قبل از اجرای بک‌اند چت‌بات باید این را به‌عنوان یک متغیر محیطی (environment variable) تنظیم کنید.

شکل ۲. گرفتن یک کلید API از OpenAI

برای فرانت‌اند، من از یک فریم‌ورک UI متن‌باز در Tailwind Components استفاده کردم که در شکل ۳ می‌بینید. خیلی ممنون از Porter-smith که این را برای همه در دسترس گذاشته است. این UI چت‌بات با HTML و Tailwind ساخته شده است.

شکل ۳. گرفتن یک UI برای چت‌بات

حالا برگردید به داشبورد OpenAI و یک assistant بسازید و پیکربندی کنید، همان‌طور که در شکل ۴ نشان داده شده است. شناسه‌ی assistant را یادداشت کنید؛ این هم یکی دیگر از جزئیات پیکربندی است که باید به‌عنوان یک متغیر محیطی وقتی بک‌اند چت‌بات را اجرا می‌کنید تنظیم شود.

همچنین به دکمه‌ی Test در شکل ۴ توجه کنید. می‌توانید روی آن کلیک کنید تا چت‌بات را بدون ترک داشبورد OpenAI امتحان کنید. این خیلی مهم است چون ممکن است وقت بگذارید و کد فرانت‌اند و بک‌اند بنویسید و بعد بفهمید چت‌بات آن کاری که می‌خواهید را انجام نمی‌دهد. باید تا جایی که می‌توانید همین‌جا چت‌بات را تست کنید تا مطمئن شوید برای کسب‌وکار و مشتری مناسب است، قبل از اینکه وقت صرف ادغامش در اپلیکیشن کنید.

شکل ۴. ساختن یک assistant در OpenAI

بعد از گرفتن کلید API و راه‌اندازی assistant در OpenAI، حالا آماده‌اید کد چت‌بات را بنویسید. برای اینکه مقدار زیادی از زمان‌تان ذخیره شود، احتمالاً بهتر است کدی را که من آماده کرده‌ام اجرا کنید. لطفاً برای دستورالعمل‌های اجرای بک‌اند و فرانت‌اند، فایل readme را ببینید. مطمئن شوید کلید API و assistant ID را به‌عنوان متغیر محیطی برای بک‌اند تنظیم کرده‌اید.

پروژه‌ی نمونه برای فرانت‌اند از JavaScript و React استفاده می‌کند و برای بک‌اند از JavaScript و Express. انتخاب زبان و فریم‌ورک تقریباً اهمیتی ندارد؛ هر طور هم بسازید، تقریباً همین شکلی می‌شود و باید همین نوع کارها را انجام دهد.

شکل ۵ نشان می‌دهد چطور هنگام لود صفحه یک thread چت جدید می‌سازیم. فرانت‌اند یک درخواست HTTP POST به بک‌اند می‌فرستد. بک‌اند از کتابخانه‌ی کدنویسی OpenAI از npm استفاده می‌کند تا thread چت را بسازد. این کتابخانه استفاده از OpenAI REST API را ساده می‌کند.

شکل ۵. ساختن یک thread چت

وقتی کاربر پیام‌هایش را وارد می‌کند و دکمه Send را می‌زند، همان‌طور که در شکل ۶ می‌بینید با HTTP POST آن را به بک‌اند ارسال می‌کنیم. سپس در بک‌اند، توابع کتابخانه‌ی OpenAI را صدا می‌زنیم تا پیام را بسازیم و thread را اجرا کنیم. اجرای thread همان چیزی است که باعث می‌شود هوش مصنوعی درباره پیامی که فرستاده‌ایم «فکر کند» و در نهایت پاسخ بدهد (الان پاسخ‌دادن خیلی کند است، امیدوارم OpenAI در آینده بهترش کند).

شکل ۶. اضافه‌کردن پیام به thread چت

بعد فرانت‌اند باید پاسخ هوش مصنوعی را دریافت کند و به کاربر نمایش دهد. ما پاسخ را با polling دریافت می‌کنیم. یعنی به‌صورت دوره‌ای یک درخواست HTTP POST به بک‌اند می‌فرستیم همان‌طور که در شکل ۷ نشان داده شده است. بک‌اند توابع OpenAI را صدا می‌زند تا پیام‌ها و وضعیت run فعلی را دریافت کند. از این طریق می‌توانیم پیام را در فرانت‌اند نمایش دهیم (با قرار دادن آن‌ها در state ری‌اکت) و اگر run تمام شده باشد، polling را متوقف کنیم.

شکل ۷. دریافت پیام‌های چت

و تمام. این یک چت‌بات پایه بود. برای مرور مهم‌ترین بخش‌ها:

• هنگام لود صفحه یک thread چت بسازید؛

• وقتی کاربر پیام وارد می‌کند آن را به OpenAI ارسال کنید؛ و

• وقتی هوش مصنوعی پاسخ تولید می‌کند آن را به کاربر نمایش دهید.

اضافه‌کردن دانش سفارشی به چت‌بات

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

اولین روش این است که دانش سفارشی به چت‌بات اضافه کنیم. این کار خیلی ساده انجام می‌شود و لازم نیست هیچ کد جدیدی به چت‌بات اضافه کنید. در OpenAI Playground، به assistant خودتان بروید، Retrieval را فعال کنید، سپس روی Add کلیک کنید تا فایل‌های PDF و CSV را آپلود کنید، همان‌طور که در شکل ۸ مشخص شده است. OpenAI اسناد شما را اسکن می‌کند و چت‌بات را با دانشی که داخل آن‌هاست مجهز می‌کند.

شکل ۸. آپلود اسناد برای assistant در OpenAI

در این مرحله می‌توانید assistant را مستقیم داخل OpenAI Playground تست کنید. دوباره توصیه می‌کنم قبل از اینکه متعهد به نوشتن کد شوید، همین کار را انجام دهید. این به شما اجازه می‌دهد اول «آزمون و خطا» کنید و ببینید آیا assistant نیازهای شما را برآورده می‌کند یا نه، قبل از اینکه زمان قابل توجهی روی آن سرمایه‌گذاری کنید. چند سؤال بپرسید که مشخصاً مربوط به محتوای PDF آپلودشده باشد. در مثال من، یک PDF از رزومه‌ام آپلود کردم و توانستم سؤال‌هایی مثل «Ashley چه مهارت‌هایی دارد؟» بپرسم. چت‌بات هم یک خلاصه‌ی خوب از مهارت‌هایی که در رزومه‌ام آمده بود ارائه داد. خودتان در دمو زنده امتحانش کنید.

واقعاً همین است. همین مقدار کافی است تا یک چت‌بات دانش سفارشی درباره خودتان، شرکت‌تان، محصول‌تان یا هر چیز دیگری که بتوانید در قالب PDF یا CSV مستند کنید داشته باشد.

سفارشی‌کردن رفتار چت‌بات

مرحله بعدیِ پیشرفته‌تر برای چت‌بات شما، این بار چیزی که نمی‌توانید در OpenAI Playground تستش کنید، این است که به چت‌بات توانایی انجام کارها در اپلیکیشن‌تان را بدهید.

برای مثال، تصور کنید یک کلاینت ایمیل می‌سازید و می‌خواهید چیزهایی مثل «ارسال ایمیل» و «بررسی ایمیل‌های جدید» را در دسترس قرار دهید تا کاربر بتواند با صحبت‌کردن با چت‌بات این اقدامات را انجام دهد. در نسخه‌ی من از دمو Wunderlust در OpenAI، شما با نقشه تعامل می‌کنید و سؤال‌هایی مثل «پاریس را به من نشان بده» و «یک جای خوب برای گرفتن عکس از برج ایفل علامت بزن» می‌پرسید. خودتان در دمو زنده Wunderlist امتحانش کنید، واقعاً شگفت‌انگیز است.

کد نمونه‌ی Wunderlust از اینجا در دسترس است.

برای ادامه و اجرای کد، ریپازیتوری را clone کنید:

طبق دستورالعمل‌های readme، فرانت‌اند و بک‌اند wunderlust-example را اجرا کنید.

ما توانایی‌های چت‌بات را با اجازه‌دادن به آن برای فراخوانی توابع در کد خودمان گسترش می‌دهیم. در مثال من یک اپلیکیشن مبتنی بر نقشه ساخته‌ام (با الهام از دمو Wunderlust در OpenAI) و بنابراین توابع شامل به‌روزرسانی نقشه (مرکز و سطح زوم) و اضافه‌کردن یک marker روی نقشه هستند. پیاده‌سازی JavaScript این توابع را در شکل ۹ می‌بینید.

شکل ۹. ساخت توابع برای در معرض قرار دادن قابلیت‌های اپلیکیشن

چت‌بات نمی‌تواند این توابع را فراخوانی کند مگر اینکه درباره‌شان بداند. پس باید با پیکربندی metadata برای هر تابع، به OpenAI بگوییم چه کار می‌کند. این شامل نام تابع، توضیح کاری که انجام می‌دهد و توضیح ورودی‌ها و خروجی‌هاست. JSON مربوط به تابع updateMap را که من به assistant در OpenAI اضافه کرده‌ام در شکل ۱۰ می‌بینید.

شکل ۱۰. توصیف توابع به فرمت JSON

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

شکل ۱۱. ادغام فراخوانی تابع در حلقه چت

سپس باید لیست توابعی را که چت‌بات می‌خواهد صدا بزند پیمایش کنیم، آن توابع را اجرا کنیم، خروجی‌ها را جمع کنیم و بعد خروجی توابع را با HTTP POST به بک‌اند ارسال کنیم تا به OpenAI تحویل داده شود. این را در شکل ۱۲ می‌بینید.

شکل ۱۲. اجرای توابع درخواستی و ارسال نتیجه به OpenAI

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

فعال‌کردن کنترل صوتی

برای تجربه بهتر کاربر، حالا چت‌بات را طوری گسترش می‌دهیم که بتواند با صدا هم تعامل کند. احتمالاً دکمه میکروفون را در دمو Wunderlust دیده‌اید، اگر نه امتحانش کنید. روی دکمه کلیک کنید و با چت‌بات صحبت کنید. مثلاً بگویید: «بلندترین کوه دنیا را به من نشان بده». باید نقشه را روی Mount Everest مرکز کند.

این کار با ترکیب قابلیت ضبط صوت در مرورگرهای مدرن و سرویس تبدیل گفتار به متن OpenAI نسبتاً ساده است.

اول باید از کاربر اجازه بگیریم تا در مرورگرش صدا ضبط کنیم. در شکل ۱۳ می‌بینید این کار چطور انجام می‌شود.

شکل ۱۳. درخواست اجازه برای ضبط صدا در مرورگر

بعد از گرفتن stream صوتی، می‌توانیم یک MediaRecorder از آن بسازیم. می‌توانیم رویداد ondataavailable را مدیریت کنیم تا chunkهای صوتی را که از stream می‌آیند جمع کنیم، همان‌طور که در شکل ۱۴ نشان داده شده است.

شکل ۱۴. ضبط صدا با MediaRecorder

وقتی کاربر ضبط را متوقف می‌کند، رویداد onstop فعال می‌شود. اینجا جایی است که chunkهای صوتی را تجمیع می‌کنیم و با HTTP POST به بک‌اند می‌فرستیم. بک‌اند سپس از OpenAI برای تبدیل صدا به متن استفاده می‌کند. این متن به‌سادگی به عنوان پیام بعدیِ کاربر به thread چت اضافه می‌شود. شکل ۱۵ نشان می‌دهد این روند چطور کار می‌کند.

شکل ۱۵. ارسال صدا برای تبدیل به متن و اضافه‌کردن به thread چت

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

رابط‌های زبان طبیعی آینده هستند

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

• استفاده از چت‌بات‌ها به‌عنوان نماینده سازمان و اجازه‌دادن به عموم مردم برای پرسیدن سؤال درباره ما، شرکت ما، محصول ما یا یک رویداد، صرفاً با دادن مستندات موجود به چت‌بات. یک اپلیکیشن مدیریت رویداد را تصور کنید و کاربر بپرسد: «چه ساعتی باید از خانه خارج شوم تا به کارگاه ساعت ۱۰ صبحِ John Smith به موقع برسم؟»

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

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

• دادن دسترسی چت‌بات به همه ویژگی‌ها باعث می‌شود بتواند هوشمندانه از آن‌ها در ترکیب‌هایی که از قبل پیش‌بینی نشده‌اند استفاده کند تا بفهمد کاربر چه می‌خواهد. من همین حالا هم از روش‌های عجیب و غیرمنتظره‌ای که بعضی مشتریان از نرم‌افزارم استفاده می‌کنند غافلگیر می‌شوم. اضافه‌کردن چت‌بات در را به روی سطح بالاتری از خلاقیت مشتریان باز می‌کند.

• پرس‌وجوی اپلیکیشن برای موارد بسیار مشخص. همان اپلیکیشن رویداد را تصور کنید: «سخنران دیگر که همراه John ساعت ۱۰ ارائه می‌دهد کیست؟»

• در معرض قرار دادن همه داده‌های اپلیکیشن برای چت‌بات از طریق یک فایل CSV به کاربران اجازه می‌دهد برای تحلیل داده‌ها سؤال بپرسند. «یک نمودار نشان بده تا بتوانم زمان اجرای همه نشست‌های کنفرانس را مقایسه کنم.» اگر قبلاً یک CSV را داخل ChatGPT آپلود کرده‌اید و از آن خواسته‌اید نمودار بسازد و تحلیل کند، می‌دانید چقدر قدرتمند است. و این تازه اول راه است. این موضوع نحوه تعامل ما با داده‌ها را تغییر می‌دهد.

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

می‌توانید تصور کنید وقتی این موضوع همه‌گیر شود، رابط صوتی داخل سیستم‌عامل‌ها تعبیه خواهد شد. در واقع لازم نیست تصور کنید، همین حالا هم در دستگاه‌های موبایل تعبیه شده است. اما یک تفاوت کلیدی در آینده این خواهد بود که اپلیکیشن‌ها قابلیت‌های خودشان را در معرض قرار می‌دهند و ما می‌توانیم دستورات را با صدا اجرا کنیم و پرس‌وجو انجام دهیم؛ و نه فقط این، بلکه می‌توانیم کارها را به هم «وصل» کنیم و فعالیت‌ها را بین اپلیکیشن‌های مختلف هماهنگ کنیم. پرس‌وجویی مثل «چطور سر قرارم به موقع برسم؟» شامل تعامل بین تقویم، ساعت و نقشه است.

تنها چیزی که در این تصویر اشتباه است: این چت‌بات‌ها برای کارکردن به اتصال اینترنت نیاز دارند. این باید تغییر کند. واقعاً امیدوارم بتوانیم آن‌ها را آفلاین اجرا کنیم. مدل‌های زبانی بزرگ، بزرگ هستند؛ احتمالاً آن‌قدر بزرگ که روی یک دستگاه به‌صورت محلی اجرا نشوند. اما هیچ دلیلی وجود ندارد که در آینده این تغییر نکند. با بهینه‌سازی و کوچک‌سازی مدل‌ها و با قدرتمندترشدن دستگاه‌ها، در نهایت باید بتوانیم مدل‌های هوش مصنوعی را به‌جای ابر، روی دستگاه به‌صورت محلی اجرا کنیم. وقتی این خطوط را می‌نویسم، برای یک آخر هفته خارج از دسترس آماده می‌شوم. مشتاق قطع ارتباط و یک «دیجیتال‌دتوکس» هستم، اما این به آن معنا نیست که دلم برای دوست باهوشم ChatGPT تنگ نمی‌شود.