ادغام ChatGPT در وب سایت بدون نیاز به بک اند: راهنمای گام به گام

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

چرا ادغام ChatGPT بدون بک اند؟

استفاده از APIهای ChatGPT به طور مستقیم از فرانت اند مزایای زیادی دارد:

• سرعت: نیازی به رفت و برگشت اطلاعات به سرور نیست.
• سادگی: پیاده سازی بسیار ساده تر و سریع تر است.
• کاهش هزینه ها: نیازی به مدیریت سرور و بک اند نیست.

پیش نیازها

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

• کلید API از OpenAI: برای استفاده از ChatGPT API به یک کلید API معتبر نیاز دارید. از سایت OpenAI دریافت کنید.
• دانش HTML، CSS و JavaScript: آشنایی با این زبان ها برای پیاده سازی ضروری است.

مراحل ادغام ChatGPT در وب سایت

1. ایجاد ساختار HTML

ابتدا یک ساختار HTML ساده برای صفحه وب خود ایجاد کنید. این ساختار شامل یک فرم برای ورود متن توسط کاربر و یک ناحیه برای نمایش پاسخ ChatGPT خواهد بود.

   
   <div id="chat-container">
    <div id="chat-log"></div>
    <input type="text" id="user-input" placeholder="متن خود را وارد کنید...">
    <button id="send-button">ارسال</button>
   </div>
   
  

2. اضافه کردن CSS

با استفاده از CSS، ظاهر صفحه را بهبود بخشید. می توانید استایل های مورد نظر خود را به عناصر HTML اضافه کنید.

   
   #chat-container {
    width: 500px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 10px;
   }

   #chat-log {
    height: 300px;
    overflow-y: scroll;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #eee;
   }

   #user-input {
    width: 80%;
    padding: 8px;
    border: 1px solid #ccc;
   }

   #send-button {
    padding: 8px 12px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
   }
   
  

3. نوشتن کد JavaScript

این بخش، قلب تپنده ادغام ChatGPT است. کد JavaScript مسئول ارسال درخواست به OpenAI API و نمایش پاسخ است.

   
   const userInput = document.getElementById('user-input');
   const sendButton = document.getElementById('send-button');
   const chatLog = document.getElementById('chat-log');

   sendButton.addEventListener('click', async () => {
    const message = userInput.value;
    if (message.trim() !== '') {
     addUserMessage(message);
     userInput.value = '';
     try {
      const response = await getChatGPTResponse(message);
      addChatGPTMessage(response);
     } catch (error) {
      console.error('Error:', error);
      addChatGPTMessage('متاسفم، مشکلی پیش آمد.');
     }
    }
   });

   function addUserMessage(message) {
    const messageElement = document.createElement('div');
    messageElement.textContent = 'شما: ' + message;
    chatLog.appendChild(messageElement);
    chatLog.scrollTop = chatLog.scrollHeight;
   }

   function addChatGPTMessage(message) {
    const messageElement = document.createElement('div');
    messageElement.textContent = 'ChatGPT: ' + message;
    chatLog.appendChild(messageElement);
    chatLog.scrollTop = chatLog.scrollHeight;
   }

   async function getChatGPTResponse(message) {
    const apiKey = 'YOUR_OPENAI_API_KEY'; // جایگزین با کلید API خود
    const apiUrl = 'https://api.openai.com/v1/completions';

    const requestOptions = {
     method: 'POST',
     headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
     },
     body: JSON.stringify({
      model: "text-davinci-003",
      prompt: message,
      max_tokens: 150,
      n: 1,
      stop: null,
      temperature: 0.7,
     })
    };

    const response = await fetch(apiUrl, requestOptions);
    const data = await response.json();

    if (response.ok) {
     return data.choices[0].text.trim();
    } else {
     throw new Error(data.error.message);
    }
   }
   
  

توجه: حتماً `YOUR_OPENAI_API_KEY` را با کلید API خود جایگزین کنید.

نکات مهم

• امنیت: هرگز کلید API خود را در کد فرانت اند به صورت مستقیم قرار ندهید. از یک پروکسی سرور یا روش های امنیتی دیگر استفاده کنید. (برای پروژه های بزرگ و تجاری).
• مدیریت هزینه ها: استفاده از OpenAI API هزینه بر است. مراقب تعداد درخواست ها و مصرف خود باشید.
• تجربه کاربری: سعی کنید یک رابط کاربری ساده و کاربرپسند ایجاد کنید تا کاربران بتوانند به راحتی با ChatGPT تعامل داشته باشند.

سوالات متداول (FAQ)

این راهنما به شما کمک می کند تا به سادگی ChatGPT را در وب سایت خود ادغام کنید. اگر نیاز به کمک بیشتری دارید، با ما تماس بگیرید. ما آماده ارائه خدمات سئو و بهینه سازی وب سایت شما هستیم: 09190994063 - 09376846692