REQUEST A QUOTE SUPPORT

mainsale

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ChatGPT Chatbot</title>
</head>
<body>
  <div style="width: 100%; max-width: 600px; margin: 0 auto;">
    <h1 style="text-align: center;">ChatGPT Chatbot</h1>

    <div id="chatWindow" style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow-y: scroll;">
      <!-- Messages will appear here -->
    </div>

    <label for="instructions" style="display: block; margin-top: 10px;">Conversation Instructions:</label>
    <textarea id="instructions" rows="4" style="width: 100%; resize: none;"></textarea>

    <input type="text" id="userInput" placeholder="Type your message..." style="width: 75%; margin-top: 10px;">
    <button onclick="sendMessage()" style="width: 23%; margin-left: 2%; margin-top: 10px;">Send</button>

    <script>
      const chatWindow = document.getElementById('chatWindow');
      const userInput = document.getElementById('userInput');
      const instructions = document.getElementById('instructions');

      async function sendMessage() {
        const userMessage = userInput.value.trim();
        if (userMessage === '') return;

        const instruction = instructions.value.trim();
        displayMessage('user', userMessage);
        userInput.value = '';

        const response = await getChatGPTResponse(userMessage, instruction);
        displayMessage('bot', response);
      }

      async function getChatGPTResponse(message, instruction) {
        // Replace with your actual API key and endpoint
        const apiKey = 'your_api_key';
        const endpoint = 'https://api.openai.com/v1/engines/davinci-codex/completions';

        const prompt = `Conversation Instructions: ${instruction}\nUser: ${message}\nChatbot: `;
        const data = {
          prompt: prompt,
          max_tokens: 100,
          n: 1,
          stop: null,
          temperature: 1,
        };

        const response = await fetch(endpoint, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`,
          },
          body: JSON.stringify(data),
        });

        const json = await response.json();
        return json.choices[0].text.trim();
      }

      function displayMessage(sender, message) {
        const messageDiv = document.createElement('div');
        messageDiv.style.marginBottom = '10px';
        messageDiv.innerHTML = `<strong>${sender === 'user' ? 'You' : 'Chatbot'}:</strong> ${message}`;
        chatWindow.appendChild(messageDiv);
        chatWindow.scrollTop = chatWindow.scrollHeight;
      }
    </script>
  </div>
</body>
</html>