راهنمای جامع ساخت چت‌بات هوش مصنوعی برای وب‌سایت با Cloudflare Workers

پیش‌نیازها و راه‌اندازی پروژه

برای ساخت یک ویجت چت‌بات هوش مصنوعی قابل جاسازی با استفاده از قابلیت‌های قدرتمند Cloudflare Workers، نیاز به یک سری آمادگی‌های اولیه و راه‌اندازی دقیق پروژه دارید. این پروژه به شما امکان می‌دهد تا یک دستیار هوش مصنوعی کاملاً کاربردی را، مشابه با سرویس‌های گران‌قیمت مانند Intercom یا Drift، اما کاملاً رایگان و تحت کنترل خودتان، به هر وب‌سایتی از جمله وب‌سایت‌های ساخته شده با وردپرس اضافه کنید. پیش از آنکه وارد جزئیات کدنویسی شوید، اطمینان از فراهم بودن پیش‌نیازها و درک ساختار کلی پروژه، گام‌های اساسی برای موفقیت در این فرآیند هستند.

آمادگی‌های اولیه برای شروع کار

قبل از غواصی در کدنویسی و پیکربندی، مطمئن شوید که سیستم شما برای این سفر آماده است. این پروژه به گونه‌ای طراحی شده که حتی بدون تجربه قبلی با Cloudflare Workers نیز می‌توانید آن را بسازید، اما داشتن دانش پایه در JavaScript و ابزارهای توسعه وب ضروری است. فراهم کردن این موارد، یک شروع هموار را تضمین می‌کند و از بروز مشکلات غیرمنتظره در مراحل بعدی جلوگیری می‌نماید.

• یک حساب کاربری Cloudflare (حتی با طرح رایگان نیز به خوبی کار می‌کند).
• Node.js نسخه ۱۸ یا بالاتر بر روی کامپیوتر شما نصب شده باشد.
• دانش پایه از JavaScript.

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

اجزای اصلی ربات هوشمند شما و سرویس‌های کلودفلر

ربات چت‌باتی که قصد ساخت آن را داریم، از دو بخش اصلی تشکیل شده است: یک Backend Worker که مغز متفکر ربات است و وظیفه مدیریت درخواست‌های چت، جلسات کاربران و اتصال به هوش مصنوعی را بر عهده دارد؛ و یک Frontend Widget که رابط کاربری قابل جاسازی برای تعامل کاربران را فراهم می‌کند. این معماری به شما اجازه می‌دهد تا بخش منطقی و رابط کاربری را به طور مستقل توسعه دهید و در نهایت با هم ادغام کنید. این قابلیت انعطاف‌پذیری، بستر مناسبی را برای توسعه و نگهداری آسان‌تر فراهم می‌آورد و برای مدیران وب‌سایت‌های وردپرسی نیز امکان سفارشی‌سازی بیشتر را می‌دهد.

علاوه بر این، در این پروژه از چهار سرویس کلیدی Cloudflare استفاده می‌شود که هر یک نقش مهمی در عملکرد چت‌بات ایفا می‌کنند:

• Workers AI: برای ارائه پاسخ‌های هوش مصنوعی با استفاده از مدل‌هایی مانند Llama 3 متا.
• Vectorize: برای ذخیره‌سازی و جستجوی سؤالات متداول (FAQ) با استفاده از روش RAG (Retrieval Augmented Generation)، که پاسخ‌های AI را با اطلاعات مرتبط تقویت می‌کند و از پاسخ‌های نامربوط جلوگیری می‌کند.
• KV (Key-Value): برای حفظ سابقه مکالمات بین جلسات کاربران، تا ربات بتواند مکالمات قبلی را به خاطر بسپارد و تعاملات شخصی‌تری ارائه دهد.
• Workers: برای اجرای بک‌اند سرورلس شما در شبکه جهانی لبه کلودفلر، که باعث سرعت بالا و تأخیر کم می‌شود، بدون نیاز به مدیریت زیرساخت سرور.

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

گام‌به‌گام راه‌اندازی پروژه و پیکربندی ابزارها

اولین قدم، ایجاد یک پروژه جدید Cloudflare Workers است. ترمینال خود را باز کرده و دستور زیر را اجرا کنید. در پاسخ به سوال زبان برنامه‌نویسی، javascript را انتخاب کرده و برای استقرار برنامه، no را برگزینید، زیرا استقرار در مراحل پایانی انجام خواهد شد:

npm create cloudflare@latest ai-chatbot-widget -- --type=hello-world

سپس، وارد دایرکتوری پروژه جدید خود شوید:

cd ai-chatbot-widget

و وابستگی‌های توسعه مورد نیاز را نصب کنید. این وابستگی‌ها شامل Tailwind CSS برای استایل‌دهی، Autoprefixer و PostCSS برای پردازش CSS، و Wrangler برای مدیریت پروژه‌های Cloudflare Workers می‌شوند:

npm install --save-dev tailwindcss autoprefixer postcss wrangler

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

npm install -g wrangler

برای ورود به حساب کاربری کلودفلر خود از طریق Wrangler، دستور زیر را اجرا کنید که یک تب مرورگر برای اعطای مجوز باز می‌کند:

wrangler login

سپس، منابع مورد نیاز Cloudflare را ایجاد خواهید کرد. این یک راه‌اندازی یک‌بار مصرف است و از طریق Wrangler CLI برای اتوماسیون توصیه می‌شود. برای ایجاد یک Vectorize index برای RAG که به شما امکان جستجوی معنایی را می‌دهد (به جای مطابقت دقیق کلمات کلیدی)، دستور زیر را اجرا کنید. این ایندکس برای ذخیره سوالات متداول وب‌سایت شما، مثلاً برای یک سایت وردپرسی، کاربرد دارد:

npx wrangler vectorize create faq-vectors --dimensions=768 --metric=cosine

در ادامه، برای ذخیره‌سازی سابقه مکالمات هر کاربر، یک KV namespace ایجاد می‌کنید. این حافظه برای چت‌بات حیاتی است تا بتواند مکالمات گذشته را به خاطر بسپارد و تجربه کاربری پیوسته‌تری را ارائه دهد:

npx wrangler kv namespace create CHAT_SESSIONS

شناسه خروجی از دستور بالا را یادداشت کنید، زیرا آن را در فایل wrangler.jsonc جایگزین YOUR_KV_NAMESPACE_ID خواهید کرد. این فایل پیکربندی به Wrangler اعلام می‌کند که Worker شما به کدام سرویس‌های کلودفلر نیاز دارد. بندهای کلیدی شامل ASSETS برای فایل‌های استاتیک، AI برای اتصال به Workers AI، VECTORIZE برای ایندکس FAQ و CHAT_SESSIONS برای سابقه مکالمات است. این پیکربندی، پایه‌ای محکم برای یکپارچه‌سازی ربات شما با هر پلتفرمی، از جمله با استفاده از یک افزونه وردپرس یا جاسازی مستقیم کد، فراهم می‌سازد.

پیاده‌سازی بک‌اند با Cloudflare Workers

در معماری هر چت‌بات هوش مصنوعی قابل امبد، بخش بک‌اند نقشی حیاتی و محوری ایفا می‌کند؛ این بخش به عنوان مغز متفکر سیستم، تمامی تعاملات و منطق پیچیده را مدیریت می‌کند. با استفاده از Cloudflare Workers، می‌توانیم یک بک‌اند قدرتمند و مقیاس‌پذیر بسازیم که قابلیت‌های کلیدی چت‌بات را فراهم آورد. این Worker مسئول دریافت درخواست‌های چت، مدیریت نشست‌های کاربری، جستجو در بخش سوالات متداول (FAQ) برای یافتن اطلاعات مرتبط، ارتباط با سرویس‌های هوش مصنوعی و در نهایت، ارسال پاسخ‌ها به صورت جریانی به کاربر نهایی است. این رویکرد سرورلس، نگهداری و مقیاس‌پذیری را برای مدیران وب‌سایت، به‌ویژه در محیط‌های پویا مانند یک وب‌سایت وردپرسی، به شدت ساده می‌کند.

Worker بک‌اند، قلب تپنده چت‌بات شماست. این بخش، تمامی پیام‌های چت ورودی را پردازش می‌کند، محتوای مرتبط از FAQ را جستجو کرده، مکالمه را به هوش مصنوعی می‌فرستد، پاسخ‌ها را به صورت جریانی برای کاربر ارسال می‌کند و تمامی جزئیات را برای مراجعات بعدی در Cloudflare KV ذخیره می‌نماید. برای پیاده‌سازی این بخش، فایلی به نام src/index.js ایجاد می‌شود که تمامی کد مورد نیاز برای عملکرد بک‌اند را در خود جای داده است. در این فایل، متغیر SYS نقش یک پرامپت سیستمی را ایفا می‌کند که شخصیت و سبک پاسخ‌دهی هوش مصنوعی را تعیین می‌کند؛ مثلاً «شما یک دستیار پشتیبانی مشتری مفید هستید. دوستانه، حرفه‌ای و مختصر باشید.» همچنین، متغیر TTL مدت زمان انقضای نشست‌های کاربری را مشخص می‌کند و تنظیمات CORS نیز برای فعال‌سازی ارتباطات بین دامنه‌ای ضروری است.

مدیریت نشست‌ها و بازیابی با RAG

یکی از امکانات مهم و کاربردی چت‌بات، توانایی آن در به‌خاطر سپردن مکالمات قبلی با هر کاربر است که به حفظ پیوستگی و ارائه تجربه‌ای شخصی‌سازی‌شده کمک می‌کند. تابع cookie در Worker بک‌اند، مسئول استخراج شناسه‌ی نشست (Session ID) از کوکی‌های مرورگر کاربر است. هنگامی که کاربر برای اولین بار با چت‌بات ارتباط برقرار می‌کند، Worker یک شناسه‌ی نشست منحصر به فرد تولید کرده و آن را در یک کوکی HTTP-only ذخیره می‌کند. سپس، تاریخچه مکالمه به سرویس Cloudflare KV ارسال شده و در آنجا نگهداری می‌شود. در بازدیدهای بعدی، Worker با استفاده از این شناسه‌ی نشست، تاریخچه مکالمه‌ی کاربر را از KV بازیابی کرده و مکالمه را از جایی که متوقف شده بود، ادامه می‌دهد. این قابلیت، برای وب‌سایت‌های وردپرسی که می‌خواهند تعامل عمیق‌تر و شخصی‌تری با کاربران خود داشته باشند، بسیار مفید است.

بخش دیگر و حیاتی بک‌اند، پیاده‌سازی RAG (Retrieval Augmented Generation) یا همان تولید تقویت‌شده با بازیابی اطلاعات است که توسط تابع faq انجام می‌شود. این تکنیک به چت‌بات شما امکان می‌دهد تا به جای تکیه صرف بر دانش مدل زبان بزرگ (LLM) که ممکن است پاسخ‌های غیردقیق یا “توهم‌آمیز” تولید کند، از داده‌های FAQ خودتان استفاده نماید. فرآیند RAG به شرح زیر است:

• ابتدا، سوال مطرح شده توسط کاربر با استفاده از یک مدل هوش مصنوعی مانند @cf/baai/bge-base-en-v1.5 به یک بردار عددی (embedding) تبدیل می‌شود.
• سپس، این بردار به سرویس Cloudflare Vectorize ارسال می‌شود تا سه ورودی مرتبط‌تر در پایگاه داده FAQ را بر اساس شباهت معنایی جستجو کند.
• در نهایت، محتوای بازیابی شده (سوال و پاسخ‌های مرتبط از FAQ) به عنوان زمینه به پرامپت اصلی هوش مصنوعی اضافه می‌شود. این کار کمک می‌کند تا هوش مصنوعی پاسخ‌هایی دقیق‌تر، مرتبط‌تر و مستند به دانش شما ارائه دهد.

این قابلیت، برای هر مدیر وب‌سایتی که به دنبال ارائه پاسخ‌های دقیق و تخصصی از سوی چت‌بات خود است، به‌ویژه اگر FAQ غنی‌ای در وبلاگ وردپرس خود دارد، یک مزیت بزرگ محسوب می‌شود.

پاسخ‌های جریانی و تزریق داده FAQ

تجربه کاربری روان و پویا، یکی از انتظارات اصلی از یک چت‌بات مدرن است. تابع chat در Worker بک‌اند با بهره‌گیری از TransformStream، امکان ارسال پاسخ‌های هوش مصنوعی را به صورت جریانی فراهم می‌کند. این بدان معناست که هر توکن از پاسخ، به محض تولید شدن توسط مدل AI (مانند @cf/meta/llama-3-8b-instruct)، بلافاصله به سمت کلاینت ارسال شده و به تدریج در رابط کاربری نمایش داده می‌شود. این ویژگی، حس تایپ طبیعی و لحظه‌ای را برای کاربران فراهم می‌آورد و تجربه تعامل را به شکل قابل ملاحظه‌ای بهبود می‌بخشد. پس از اتمام کامل جریان و دریافت تمامی توکن‌ها، پاسخ کامل در سرویس Cloudflare KV ذخیره می‌شود تا در صورت نیاز برای نشست‌های بعدی قابل بازیابی باشد و پیوستگی مکالمات تضمین شود.

برای اینکه چت‌بات شما بتواند از قابلیت RAG به‌درستی استفاده کند و به سوالات متداول پاسخ دهد، نیاز است که پایگاه داده Vectorize آن با داده‌های FAQ شما پر شود. تابع seed مسئول این فرآیند است. این تابع، هر جفت سوال و پاسخ را از لیست FAQ شما می‌گیرد، آنها را با استفاده از مدل BGE به بردارهای عددی تبدیل می‌کند و سپس این بردارها را به همراه ابرداده‌های مربوطه (سوال و پاسخ اصلی) در Vectorize ذخیره می‌نماید. این فرآیند تزریق داده تنها یک بار پس از استقرار اولیه چت‌بات یا هر زمان که نیاز به به‌روزرسانی محتوای FAQ (مثلاً پس از افزودن صفحات جدید به وب‌سایت وردپرسی خود) باشد، باید اجرا شود. برای مثال، با ارسال یک درخواست POST به مسیر /api/seed، پایگاه داده FAQ چت‌بات شما به‌روز خواهد شد و آماده پاسخگویی دقیق‌تر می‌گردد.

در نهایت، تابع fetch در فایل src/index.js مسئول مسیریابی تمامی درخواست‌های ورودی به Worker است. این تابع، بر اساس مسیر URL، درخواست‌ها را به توابع مربوطه هدایت می‌کند:

• /api/chat: برای مدیریت پیام‌های چت جدید.
• /api/history: برای بازیابی تاریخچه مکالمات کاربر.
• /api/seed: برای تزریق یا به‌روزرسانی داده‌های FAQ.
• /api/health: برای بررسی وضعیت سلامت Worker.

همچنین، این تابع درخواست‌های مربوط به فایل‌های استاتیک را (که می‌تواند شامل اسکریپت ویجت برای تعبیه در هر وب‌سایتی باشد) از پوشه public ارائه می‌دهد. این ساختار انعطاف‌پذیر، امکان پیکربندی آسان و سفارشی‌سازی چت‌بات را برای توسعه‌دهندگان وردپرس و سایر پلتفرم‌ها فراهم می‌آورد و تضمین می‌کند که تمامی جنبه‌های بک‌اند چت‌بات به بهترین شکل ممکن عمل کنند.

طراحی ابزارک فرانت‌اند و استایل‌دهی

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

استفاده از Tailwind CSS برای استایل‌دهی حرفه‌ای

برای اینکه ابزارک چت‌بات شما ظاهری صیقلی و حرفه‌ای داشته باشد، استفاده از Tailwind CSS توصیه می‌شود. Tailwind یک فریم‌ورک CSS مبتنی بر ابزارهای کاربردی (utility-first) است که به شما امکان می‌دهد مستقیماً در HTML خود با استفاده از کلاس‌های کوچک و تک‌منظوره مانند bg-black، rounded-full و shadow-lg، عناصر را استایل‌دهی کنید. مزیت اصلی Tailwind این است که نیاز به نوشتن شیوه نامه‌های جداگانه و ابداع نام کلاس‌ها را از بین می‌برد. این ویژگی برای یک ابزارک جاسازی‌شدنی بسیار مفید است، زیرا تمام استایل‌ها خودبسنده هستند و با CSS وب‌سایت میزبان، حتی یک وب‌سایت وردپرسی پیچیده، تداخلی ایجاد نمی‌کنند.

پیکربندی Tailwind با ایجاد فایل tailwind.config.js در ریشه پروژه آغاز می‌شود. این فایل به Tailwind می‌گوید که تمام فایل‌های HTML و جاوااسکریپت در پوشه public را برای نام کلاس‌ها اسکن کند. تنظیم darkMode: 'class' نیز امکان تغییر حالت تاریک و روشن را با افزودن کلاس dark به کانتینر ابزارک فراهم می‌کند. سپس، فایل CSS منبع را در src/input.css ایجاد می‌کنید که استایل‌های پایه، کلاس‌های کامپوننت و کلاس‌های ابزارهای کاربردی Tailwind را وارد می‌کند. هنگام ساخت پروژه، Tailwind کد شما را اسکن کرده و یک فایل CSS حداقل حاوی فقط کلاس‌هایی که واقعاً استفاده کرده‌اید، تولید می‌کند. این بهینه‌سازی حجم فایل CSS را کاهش داده و بارگذاری سریع‌تر را برای کاربران وردپرس تضمین می‌کند.

در نهایت، اسکریپت‌های ساخت را در فایل package.json به‌روزرسانی می‌کنید. اسکریپت build:css وظیفه کامپایل و فشرده‌سازی CSS Tailwind را بر عهده دارد. اسکریپت‌های deploy و dev نیز به‌طور خودکار CSS را قبل از شروع سرور توسعه یا استقرار، می‌سازند. این فرآیند اتوماتیک، اطمینان می‌دهد که استایل‌دهی ابزارک همیشه به‌روز و بهینه است و برای مدیران سایت وردپرس، دغدغه‌ای بابت استایل‌ها باقی نمی‌ماند.

پیاده‌سازی ابزارک چت با جاوااسکریپت

ابزارک فرانت‌اند هسته تعامل کاربر با چت‌بات را تشکیل می‌دهد و یک فایل جاوااسکریپت خودبسنده (public/widget.js) است که کل رابط کاربری چت را ایجاد می‌کند. هنگامی که کسی اسکریپت شما را به وب‌سایت خود اضافه می‌کند، این فایل به‌طور خودکار دکمه حباب چت، پنجره چت و تمام قابلیت‌های تعاملی را ایجاد و مدیریت می‌کند. این رویکرد ماژولار و مستقل، نصب و راه‌اندازی آن را بر روی هر وب‌سایتی، از جمله وب‌سایت‌های وردپرسی، به سادگی یک افزونه وردپرس می‌کند.

این ویجت از یک IIFE (Immediately Invoked Function Expression) برای جلوگیری از آلودگی فضای نام سراسری استفاده می‌کند. چندین تابع کلیدی در این اسکریپت وجود دارد: تابع init() که HTML ابزارک را ایجاد و به صفحه تزریق می‌کند؛ تابع bind() که تمام شنونده‌های رویداد را تنظیم می‌کند؛ تابع theme() که حالت تاریک/روشن را تغییر می‌دهد؛ تابع flip() که پنجره چت را با انیمیشن باز و بسته می‌کند؛ تابع draw() که تمام پیام‌ها را رندر می‌کند؛ تابع send() که ارسال پیام را با قابلیت استریم مدیریت می‌کند؛ و تابع load() که تاریخچه چت را از سرور بارگذاری می‌کند. این توابع در کنار هم یک تجربه کاربری روان و کامل را ارائه می‌دهند.

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

سفارشی‌سازی و ادغام ابزارک در وب‌سایت

صفحه دموی public/index.html در طول توسعه به عنوان زمین آزمایش و پس از استقرار به عنوان ویترین ابزارک عمل می‌کند. کاربران با مراجعه مستقیم به URL Worker مستقر شده، این صفحه را با ابزارک چت‌بات از قبل یکپارچه شده مشاهده خواهند کرد. این صفحه به شما نشان می‌دهد که چگونه به سادگی می‌توان این چت‌بات را به یک صفحه وردپرس یا هر وب‌سایت دیگری اضافه کرد. کافی است دو تگ script را قبل از تگ پایانی body در HTML وب‌سایت خود قرار دهید. این سادگی نصب، ابزارک شما را به جایگزینی مناسب برای افزونه‌های چت‌بات پیچیده وردپرس تبدیل می‌کند.

<script>
  window.CHATBOT_BASE_URL = 'https://ai-chatbot-widget.YOUR-SUBDOMAIN.workers.dev';
  window.CHATBOT_TITLE = 'Your Company';
  window.CHATBOT_GREETING = '👋 How can I help you today?';
</script>
<script src="https://ai-chatbot-widget.YOUR-SUBDOMAIN.workers.dev/widget.js"></script>

این کد به شما امکان می‌دهد ابزارک را با متغیرهای پیکربندی جهانی مانند CHATBOT_BASE_URL برای تعیین URL سرویس‌دهی Worker، CHATBOT_TITLE برای عنوان نمایش داده شده در هدر، CHATBOT_PLACEHOLDER برای متن پیش‌فرض فیلد ورودی، و CHATBOT_GREETING برای پیام خوش‌آمدگویی اولیه، سفارشی‌سازی کنید. این انعطاف‌پذیری به مدیران سایت وردپرس اجازه می‌دهد تا چت‌بات را با برند و نیازهای خاص وب‌سایت خود هماهنگ کنند بدون اینکه نیازی به تغییرات عمیق در کد جاوااسکریپت داشته باشند.

برای سفارشی‌سازی استایل خود ابزارک، تمامی استایل‌ها از کلاس‌های Tailwind CSS در widget.js استفاده می‌کنند. برای تغییر ظاهر، می‌توانید به راحتی کلاس‌های Tailwind را ویرایش کنید. به عنوان مثال، می‌توانید bg-black را به رنگ برند خود تغییر دهید، ابعاد w-[400px] h-[600px] را برای پنجره چت تنظیم کنید، یا bottom-6 right-6 را برای موقعیت قرارگیری ابزارک تغییر دهید. این سطح از کنترل بر روی استایل‌دهی، ابزارک را برای هر طراح قالب وردپرس یا توسعه‌دهنده‌ای که می‌خواهد ظاهری کاملاً منحصربه‌فرد ایجاد کند، بسیار جذاب می‌سازد.

پیکربندی و استقرار بر Cloudflare

ساخت یک ربات چت هوش مصنوعی تعبیه‌پذیر نیازمند پیکربندی دقیق و استقرار بر زیرساخت ابری قدرتمند است. Cloudflare Workers یک پلتفرم ایده‌آل برای این منظور ارائه می‌دهد که به شما امکان می‌دهد سرویس‌های بدون سرور (serverless) را در نزدیک‌ترین نقطه به کاربران خود اجرا کنید. این بخش به شما کمک می‌کند تا مراحل حیاتی پیکربندی ابزار Wrangler و استقرار پروژه خود را بر روی Cloudflare، همراه با آماده‌سازی پایگاه دانش چت‌بات، درک کنید. با استفاده از Wrangler CLI، فرآیند ایجاد و مدیریت منابع کلودفلر، مانند پایگاه داده‌های برداری برای جستجوی معنایی و حافظه کلید-مقدار برای ذخیره تاریخچه گفتگو، ساده‌تر می‌شود. هدف نهایی، راه‌اندازی یک چت‌بات کاملاً کاربردی است که به سرعت و با کارایی بالا در دسترس کاربران قرار گیرد و تجربه کاربری بهینه‌ای را فراهم آورد.

آماده‌سازی با Wrangler و پیکربندی منابع

Wrangler ابزار خط فرمان کلودفلر برای توسعه و استقرار Workers است. برای شروع، پس از نصب Wrangler (با دستور npm install -g wrangler)، باید وارد حساب کاربری خود شوید که با اجرای دستور wrangler login و تأیید در مرورگر انجام می‌شود. یک Cloudflare Worker یک تابع بدون سرور است که در شبکه جهانی لبه کلودفلر اجرا می‌شود و پاسخ‌های سریع‌تر و تأخیر کمتری را به دلیل اجرای نزدیک به کاربران فراهم می‌آورد. پس از ورود، نوبت به ایجاد منابع ضروری می‌رسد. این فرآیند شامل ایجاد یک فهرست برداری (Vectorize Index) برای قابلیت RAG (Retrieval Augmented Generation) و یک فضای نام KV (Key-Value) برای ذخیره تاریخچه جلسات گفتگو است.

فهرست برداری Vectorize به ربات چت شما اجازه می‌دهد تا به جای جستجوی کلمات کلیدی دقیق، جستجوی معنایی انجام دهد. برای مثال، سوالات متداول شما به بردارهای عددی تبدیل می‌شوند و هنگامی که کاربر سوالی می‌پرسد، ربات چت آن سوال را به یک بردار تبدیل کرده و ورودی‌های مشابه را در FAQ پیدا می‌کند. این عمل با دستور npx wrangler vectorize create faq-vectors --dimensions=768 --metric=cosine انجام می‌شود. در ادامه، برای نگهداری تاریخچه گفتگوهای کاربر، یک فضای نام KV به نام CHAT_SESSIONS ایجاد می‌کنیم که این کار با دستور npx wrangler kv namespace create CHAT_SESSIONS صورت می‌گیرد. شناسه خروجی این فرمان باید در فایل wrangler.jsonc جایگزین YOUR_KV_NAMESPACE_ID شود. این فایل پیکربندی به Wrangler اطلاع می‌دهد که Worker شما به کدام سرویس‌های Cloudflare نیاز دارد:

• ASSETS: برای ارائه فایل‌های استاتیک مانند جاوااسکریپت و CSS ویجت از پوشه public.
• AI: برای اتصال به Cloudflare Workers AI و اجرای مدل‌های یادگیری ماشین.
• VECTORIZE: برای لینک دادن به فهرست Vectorize شما و ذخیره و جستجوی بردارهای FAQ.
• CHAT_SESSIONS: برای اتصال به فضای نام KV و ذخیره تاریخچه گفتگو.

اجرا و استقرار در شبکه جهانی Cloudflare

پس از آماده‌سازی تمامی فایل‌های پروژه، از جمله Worker بک‌اند، ویجت فرانت‌اند و تنظیمات Tailwind CSS، می‌توانید ربات چت خود را به صورت محلی آزمایش کنید. با اجرای دستور npm run dev، ویجت چت‌بات در آدرس http://localhost:8787 در دسترس خواهد بود. این مرحله امکان رفع اشکال و اطمینان از عملکرد صحیح تمامی اجزا را قبل از استقرار نهایی فراهم می‌کند. پس از تأیید عملکرد محلی، زمان آن فرا می‌رسد که چت‌بات خود را به صورت عمومی در شبکه جهانی Cloudflare مستقر کنید. فرآیند استقرار به سادگی با یک دستور انجام می‌شود: npm run deploy. این دستور ابتدا فایل‌های CSS مربوط به Tailwind را می‌سازد و سپس کل پروژه را به Cloudflare مستقر می‌کند.

پس از اتمام استقرار، یک آدرس URL مشابه https://ai-chatbot-widget.YOUR-SUBDOMAIN.workers.dev به شما داده می‌شود که ربات چت شما اکنون به صورت زنده در آنجا قرار دارد. اما قبل از اینکه ربات چت شما بتواند به سوالات از FAQ پاسخ دهد، باید پایگاه داده Vectorize را با سوالات و پاسخ‌های خود پر کنید. این فرآیند که “seed کردن” نامیده می‌شود، با ارسال یک درخواست POST به نقطه پایانی /api/seed انجام می‌شود. می‌توانید از دستور curl -X POST https://ai-chatbot-widget.YOUR-SUBDOMAIN.workers.dev/api/seed استفاده کنید (به یاد داشته باشید که YOUR-SUBDOMAIN را با زیردامنه‌ی واقعی خود جایگزین کنید). پس از موفقیت‌آمیز بودن این عملیات، ربات چت شما آماده پاسخگویی به سوالات خواهد بود. می‌توانید با مراجعه به URL استقرار خود و پرسیدن سوالاتی در مورد حمل و نقل، بازگشت کالا یا روش‌های پرداخت، آن را آزمایش کنید.

تعبیه و سفارشی‌سازی ویجت در وب‌سایت شما

هیجان‌انگیزترین بخش، تعبیه ربات چت شما در هر وب‌سایتی است، خواه یک وب‌سایت استاتیک ساده باشد یا یک وب‌سایت پیچیده مانند یک وب‌سایت وردپرسی. این کار تنها با اضافه کردن دو تگ <script> قبل از تگ پایانی </body> در کد HTML وب‌سایت شما انجام می‌شود. این رویکرد به شما امکان می‌دهد تا بدون نیاز به پلاگین‌های خاص، چت‌بات هوش مصنوعی خود را به راحتی به قالب وردپرس یا هر سیستم مدیریت محتوای دیگری اضافه کنید.

برای مثال، کد زیر نشان می‌دهد که چگونه می‌توان ویجت را با تنظیمات اولیه تعبیه کرد:

<script>
  window.CHATBOT_BASE_URL = 'https://ai-chatbot-widget.YOUR-SUBDOMAIN.workers.dev';
  window.CHATBOT_TITLE = 'شرکت شما';
  window.CHATBOT_GREETING = '👋 امروز چطور می‌توانم به شما کمک کنم؟';
</script>
<script src="https://ai-chatbot-widget.YOUR-SUBDOMAIN.workers.dev/widget.js"></script>

اطمینان حاصل کنید که YOUR-SUBDOMAIN را با زیردامنه‌ی واقعی Cloudflare Workers خود جایگزین کنید. گزینه‌های پیکربندی مختلفی برای سفارشی‌سازی ویجت در دسترس هستند:

• CHATBOT_BASE_URL: URL استقرار یافته Worker شما.
• CHATBOT_TITLE: نام نمایش داده شده در هدر چت‌بات.
• CHATBOT_PLACEHOLDER: متن پیش‌فرض در فیلد ورودی پیام.
• CHATBOT_GREETING: پیام خوش‌آمدگویی اولیه.

علاوه بر این، می‌توانید چت‌بات را بیشتر سفارشی کنید. برای افزودن سوالات متداول خود، تابع seed در فایل src/index.js را ویرایش کرده و جفت‌های سوال و جواب نمونه را با محتوای خود جایگزین کنید. سپس پروژه را مجدداً با npm run deploy مستقر کرده و نقطه پایانی /api/seed را فراخوانی کنید. برای تغییر شخصیت هوش مصنوعی، ثابت SYS در بالای فایل src/index.js را ویرایش کنید تا نحوه پاسخگویی هوش مصنوعی شکل بگیرد. تمامی استایل‌ها از کلاس‌های Tailwind CSS در widget.js استفاده می‌کنند و به شما امکان می‌دهند رنگ‌ها، اندازه و موقعیت پنجره چت را به دلخواه تغییر دهید. این انعطاف‌پذیری به شما اجازه می‌دهد تا چت‌بات را کاملاً با برند و ظاهر وب‌سایت خود، از جمله وب‌سایت‌های ساخته شده با وردپرس، هماهنگ کنید.

جاسازی و شخصی‌سازی چت‌بات در وب‌سایت

نحوه جاسازی ویجت چت‌بات در وب‌سایت

پس از ساخت و استقرار چت‌بات، نوبت به یکی از جذاب‌ترین بخش‌ها یعنی جاسازی آن در وب‌سایت شما می‌رسد. این کار به سادگی با افزودن دو تگ `script` قبل از تگ بسته شدن `</body>` در کد HTML وب‌سایتتان انجام می‌شود. تگ اول برای تنظیم متغیرهای پیکربندی جهانی مانند آدرس پایه (Base URL) چت‌بات، عنوان آن و پیام خوش‌آمدگویی اولیه است. این متغیرها به شما امکان می‌دهند تا تجربه کاربری چت‌بات را متناسب با برند و نیازهای خاص وب‌سایت خود تنظیم کنید. تگ دوم نیز فایل `widget.js` را بارگذاری می‌کند که حاوی تمام منطق و رابط کاربری ویجت چت‌بات شماست. حتماً `YOUR-SUBDOMAIN` را با زیردامنه واقعی Cloudflare Workers خود جایگزین کنید تا ویجت به درستی از سرویس‌های ابری شما تغذیه کند. این روش جاسازی بسیار منعطف است و به شما اجازه می‌دهد تا چت‌بات را به راحتی در هر صفحه‌ای از وب‌سایت خود که نیاز دارید، فعال کنید.

گزینه‌های پیکربندی برای ویجت چت‌بات

ویجت چت‌بات شما از طریق مجموعه‌ای از متغیرهای پیکربندی سراسری قابل تنظیم است که انعطاف‌پذیری بالایی را در اختیار شما قرار می‌دهد. `CHATBOT_BASE_URL` به شما امکان می‌دهد آدرس URL استقرار یافته Worker خود را تعیین کنید. در صورت خالی ماندن، ویجت از همان مبدأ فعلی استفاده خواهد کرد. `CHATBOT_TITLE` برای نمایش نام چت‌بات در قسمت هدر آن به کار می‌رود و به طور پیش‌فرض “AI Assistant” است که می‌توانید آن را به “پشتیبانی” یا نام شرکت خود تغییر دهید. `CHATBOT_PLACEHOLDER` متن راهنمای درون کادر ورودی پیام را مشخص می‌کند و معمولاً “پیام…” است. در نهایت، `CHATBOT_GREETING` پیام خوش‌آمدگویی اولیه را تنظیم می‌کند که وقتی کاربر برای اولین بار پنجره چت را باز می‌کند، نمایش داده می‌شود. تنظیم صحیح این متغیرها به شما کمک می‌کند تا چت‌باتی را ارائه دهید که کاملاً با هویت بصری و کلامی برند شما همسو باشد.

شخصی‌سازی پیشرفته چت‌بات

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

افزودن پرسش‌های متداول (FAQ) اختصاصی

برای اینکه چت‌بات شما بتواند به سوالات خاص کسب‌وکار شما پاسخ دهد، باید پایگاه دانش FAQ آن را با اطلاعات خود به‌روز کنید. این کار با ویرایش فایل `src/index.js` و پیدا کردن تابع `seed` انجام می‌شود. در این تابع، آرایه `faqs` را با جفت‌های پرسش و پاسخ اختصاصی خود جایگزین کنید. هر جفت شامل یک سوال و پاسخ مربوط به آن است. پس از افزودن FAQهای جدید، باید پروژه را مجدداً با دستور `npm run deploy` استقرار دهید و سپس با فراخوانی مجدد نقطه پایانی `/api/seed`، پایگاه داده وکتور Cloudflare Vectorize خود را به‌روزرسانی کنید. این مرحله اطمینان می‌دهد که چت‌بات از اطلاعات جدید شما برای ارائه پاسخ‌های دقیق و مرتبط استفاده می‌کند.

تغییر شخصیت و لحن هوش مصنوعی

شخصیت و لحن پاسخ‌دهی هوش مصنوعی یکی از جنبه‌های کلیدی در تجربه کاربری چت‌بات است. می‌توانید این ویژگی را با ویرایش ثابت `SYS` در ابتدای فایل `src/index.js` تغییر دهید. این ثابت شامل یک “پرامپت سیستمی” است که به هوش مصنوعی دستور می‌دهد چگونه رفتار کند و به سوالات پاسخ دهد. به عنوان مثال، می‌توانید آن را به یک دستیار دوستانه برای شرکت خود یا یک متخصص فنی تغییر دهید. با تنظیم دقیق این پرامپت، مطمئن می‌شوید که چت‌بات شما با صدا و هویت برند شما همسو است و با لحنی مناسب و حرفه‌ای با کاربران تعامل می‌کند.

سفارشی‌سازی ظاهر ویجت

ظاهر بصری چت‌بات نیز از اهمیت بالایی برخوردار است و می‌توانید آن را به طور کامل با استفاده از کلاس‌های Tailwind CSS که در فایل `widget.js` تعبیه شده‌اند، سفارشی‌سازی کنید. برای تغییر رنگ‌ها، کافیست کلاس‌های مربوط به رنگ مانند `bg-black` را به رنگ‌های برند خود تغییر دهید. ابعاد پنجره چت، مانند عرض و ارتفاع آن، با کلاس‌هایی نظیر `w-[400px]` و `h-[600px]` قابل تنظیم هستند تا متناسب با طراحی وب‌سایت شما باشند. همچنین، موقعیت قرارگیری ویجت در صفحه، با اصلاح کلاس‌هایی مانند `bottom-6 right-6` امکان‌پذیر است. این انعطاف‌پذیری در استایل‌دهی به شما کمک می‌کند تا چت‌باتی با ظاهری یکپارچه و جذاب داشته باشید که به خوبی در طراحی کلی وب‌سایت شما جای گیرد.

جمع‌بندی و توصیه‌های نهایی

در این مقاله، راهنمای جامعی برای ساخت یک ویجت چت‌بات هوش مصنوعی پیشرفته و قابل جاسازی با استفاده از Cloudflare Workers ارائه شد. شما توانستید چت‌باتی را بسازید که قابلیت‌های رقابتی با راه‌حل‌های SaaS گران‌قیمت مانند Intercom و Drift دارد، اما با مزیت کاملاً رایگان بودن و کنترل کامل بر آن. این چت‌بات پاسخ‌های AI را به صورت بلادرنگ پخش می‌کند، با استفاده از تکنیک RAG به سوالات متداول پاسخ می‌دهد، و تاریخچه مکالمات را در طول جلسات مختلف به خاطر می‌سپارد. معماری سرورلس Cloudflare، شامل Workers AI برای هوش مصنوعی، Vectorize برای جستجوی معنایی FAQ و KV برای ذخیره تاریخچه، ستون فقرات این پروژه را تشکیل می‌دهد. توصیه می‌شود که با شخصی‌سازی بیشتر FAQها، تغییر شخصیت AI و تطبیق ظاهر ویجت با برند خود، چت‌بات را به یک ابزار قدرتمند و یکپارچه برای وب‌سایتتان تبدیل کنید. با توجه به سطوح رایگان سخاوتمندانه Cloudflare، این راهکار برای اکثر وب‌سایت‌ها، به‌ویژه کسب‌وکارهای کوچک و متوسط، یک گزینه ایده‌آل و مقرون‌به‌صرفه محسوب می‌شود که کارایی و تجربه کاربری بی‌نظیری را ارائه می‌دهد. این پلتفرم امکان توسعه و مقیاس‌پذیری آسان را نیز فراهم می‌آورد تا چت‌بات شما همواره با نیازهای در حال تغییر کسب‌وکارتان همگام باشد.