در اینجا نحوه ساخت chatbot به صورت رایگان با استفاده از API های OpenRouter و Deepseek

من می خواستم در اینجا بارگذاری کنم ، اما رمزگذاری ویدیو حدود 10 روز در حال انجام بود. من دوباره حذف و بارگذاری کردم ، اما همین مسئله اتفاق افتاد.

بنابراین من این ویدئو را در YouTube بارگذاری کردم تا ببینید که چگونه Chatbot کار می کند.

https://www.youtube.com/watch؟v=arquwmzqlea

توجه داشته باشید که این فقط یک برنامه جبهه با استفاده از فناوری های وانیل است ، HTMLبا CSS، و ، JavaScriptبشر

من کد کامل زیر را ارائه داده ام ، تمام کاری که شما باید انجام دهید این است که کلید API خود را از OpenRouter ایجاد کنید و در کد چسبانده کنید:

const API_KEY =
          "Add your API KEY";
        const MODEL = "deepseek/deepseek-r1:free";

در اینجا کد کامل برای استفاده شخصی شما آورده شده است:

حالا بیایید با عملکردی که در این chatbot اضافه کردم ، طی کنیم.

1. پیام رسانی گپ و ادغام API

رسیدگی به پیام کاربر

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

// Add a user message to the chat and save it
addMessageToUI("user", message);
chatHistory[currentChatId].messages.push({
  role: "user",
  content: message,
});

تماس API برای OpenRouter

Chatbot از API OpenRouter با مدل رایگان استفاده می کند (deepseek/deepseek-r1:free) برای تکمیل گپ. درخواست پست با تاریخ مکالمه انجام می شود و پاسخ به عقب پخش می شود.

fetch("https://openrouter.ai/api/v1/chat/completions", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    model: "deepseek/deepseek-r1:free",
    messages: chatHistory[currentChatId].messages,
    stream: true,
  }),
});

2. پاسخ های جریان و اثرات تایپ کردن

نمایش پاسخ افزایشی

پاسخ API پخش می شود ، به این معنی که پاسخ دستیار دریافت می شود و نامه به صورت نامه نمایش داده می شود. این یک اثر تایپ در زمان واقعی را شبیه سازی می کند و باعث می شود مکالمه تعاملی باشد.

function processBuffer() {
  if (typingBuffer.length > 0 && !stopGeneration) {
    accumulatedText += typingBuffer[0];
    typingBuffer = typingBuffer.slice(1);
    messageContent.innerHTML = getStableRendering(accumulatedText);
    setTimeout(processBuffer, typingSpeed);
  }
}

گزینه تولید توقف

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

3. پردازش و برجسته سازی کد

نمایش مارک

متن ورودی با استفاده از کتابخانه Marked.js پردازش می شود. این Markdown (از جمله هدرها ، لیست ها و پیوندها) را برای نمایش مناسب به HTML تبدیل می کند.

function processMarkdownContent(content) {
  return marked.parse(content);
}

تشخیص بلوک کد و برجسته سازی نحو

chatbot بلوک های کد (مشخص شده توسط پشتی های سه گانه) را تشخیص می دهد و آنها را به طور جداگانه ارائه می دهد. از Highlight.js برای اعمال برجسته سازی نحو استفاده می کند و حتی یک دکمه کپی به صفحه را اضافه می کند.

// Code snippet for copy-to-clipboard on code blocks
copyButton.addEventListener("click", () => {
  navigator.clipboard.writeText(segment.content).then(() => {
    // Feedback on successful copy
  });
});

4. بارگذاری و پردازش پرونده

بارگذاری پرونده

کاربران می توانند پرونده ها (تصاویر ، پرونده های متنی ، JSON و غیره) را بارگذاری کنند. پرونده با استفاده از API Filereader خوانده می شود و پیش نمایش قبل از ارسال به عنوان بخشی از مکالمه نشان داده می شود.

fileUploadInput.addEventListener("change", (event) => {
  const file = event.target.files[0];
  if (file) {
    pendingFile = file;
    displayPendingFilePreview(file);
  }
});

رسیدگی به محتوای پرونده

پس از انتخاب پرونده ، محتوای آن خوانده می شود (به عنوان URL داده برای تصاویر یا متن برای اسناد) و سپس به عنوان پیام کاربر در گپ ادغام می شود.

5. تاریخچه گپ و مدیریت جلسه

ذخیره محلی چت ها

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

// Saving chat history to localStorage
localStorage.setItem("chatHistory", JSON.stringify(chatHistory));

چندین جلسه

نوار کناری تاریخچه چت به کاربران اجازه می دهد تا بین مکالمات متعدد ، جلسات حذف یا تغییر نام را جابجا کنند و از مدیریت جلسه هموار اطمینان حاصل کنند.

6. صادرات ، بازسازی و گزینه ها گپ گپ

صادرات مکالمات

کاربران می توانند مکالمه چت فعلی را به عنوان یک فایل Markdown صادر کنند. مکالمه (با پیام های کاربر و دستیار) در یک متن متن ساخته شده و بارگیری می شود.

const blob = new Blob([exportText], { type: "text/markdown" });
a.download = `${chat.title.replace(/[^\w\s]/gi, "")}.md`;

پاسخ بازسازی

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

گزینه های گپ

هر مورد تاریخچه چت دارای گزینه هایی (حذف یا تغییر نام) از طریق منوی کشویی است.

7. ویژگی های اضافی

تغییر شکل

کاربران می توانند بین حالت های سبک و تاریک جابجا شوند. موضوع انتخاب شده در LocalStorage ذخیره می شود و لیست کلاس صفحه بر این اساس به روز می شود.

ورودی با رزرو خودکار

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

function autoResizeTextarea() {
  userInput.style.height = "auto";
  userInput.style.height = userInput.scrollHeight + "px";
}

8. کتابخانه ها و خدمات شخص ثالث

• OpenRouter API:

  مورد استفاده برای تولید گپ از طریق deepseek/deepseek-r1:free مدل.

• marked.js: یک تجزیه کننده Markdown که متن Markdown را به HTML تبدیل می کند.

• Highlight.js: برجسته سازی نحو برای بلوک های کد در مکالمه را فراهم می کند.

• قلم عالی: آیکون های مورد استفاده در طول رابط (به عنوان مثال ، برای دکمه ها و گزینه ها).

• خدمات CDN: کتابخانه هایی مانند Marked.js ، Highlight.js و Font Awesome از طریق CDN بارگیری می شوند (به عنوان مثال ، از CDNJ).

چه چیزی را می خواهید در این چت بابات بیشتر اضافه کنید؟ من کد را برای شما تهیه کرده ام ، سعی کنید عملکردهای بیشتری را افزایش داده و اضافه کنید.

به حمایت خود ادامه دهید ، به اشتراک بگذارید و بیایید با هم رشد کنیم! 🚀

📍 مرا پیدا کن: LinkedIn | متوسط ​​| بلوزکی | هکر