<div id="chatbot"></div>
   <script>
   async function chatGPTQuery(prompt) {
       const response = await fetch('https://api.openai.com/v1/engines/davinci-codex/completions', {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json',
               'Authorization': `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`
           },
           body: JSON.stringify({
               prompt: prompt,
               max_tokens: 150,
               n: 1,
               stop: null,
               temperature: 0.7
           })
       });
       const data = await response.json();
       return data.choices[0].text.trim();
   }

   document.addEventListener('DOMContentLoaded', () => {
       const chatbotDiv = document.getElementById('chatbot');
       const input = document.createElement('input');
       input.type = 'text';
       input.placeholder = 'Escribe tu pregunta aquí...';
       const button = document.createElement('button');
       button.innerText = 'Enviar';

       button.onclick = async () => {
           const question = input.value;
           const answer = await chatGPTQuery(question);
           const p = document.createElement('p');
           p.innerText = `Q: ${question}\nA: ${answer}`;
           chatbotDiv.appendChild(p);
       };

       chatbotDiv.appendChild(input);
       chatbotDiv.appendChild(button);
   });
   </script>