open OpenAI API — Создание динамического генератора шаблонов электронной почты на WordPress

В современном быстро меняющемся цифровом мире эффективное общение по электронной почте имеет решающее значение. Будь то для профессиональных целей или случайных бесед, наличие хорошо продуманных шаблонов электронной почты может сэкономить время и обеспечить последовательный обмен сообщениями. В этом сообщении блога мы рассмотрим процесс создания веб-страницы на веб-сайте WordPress, которая позволяет пользователям создавать персонализированные шаблоны электронной почты на основе их ввода с помощью OpenAI API. Используя HTML, JavaScript и мощный API OpenAI, мы можем предоставить пользователям беспроблемный опыт создания электронных писем для различных целей. В этом сообщении блога я очень рад поделиться с вами динамическим генератором шаблонов электронной почты, который я уже создал на веб-сайте WordPress. Вы можете изучить код и скриншоты проекта ниже.

Настройка среды разработки

Прежде чем углубляться в технические детали, давайте настроим нашу среду разработки. Начните с установки WordPress и создания пользовательского шаблона страницы для нашего генератора шаблонов электронной почты. Кроме того, убедитесь, что в вашем распоряжении надежный редактор кода для эффективной разработки.

Проектирование пользовательского интерфейса

Успех любого веб-приложения заключается в его пользовательском интерфейсе. Разработка интуитивно понятного и визуально привлекательного пользовательского интерфейса имеет первостепенное значение. Создайте удобный макет, включающий раскрывающиеся меню для выбора типа электронного письма (официальное, неформальное и т. д.) и желаемого тона (счастливый, дипломатичный, грустный). Эти параметры позволят пользователям настраивать свои шаблоны электронной почты в соответствии со своими конкретными потребностями. Помните, что чистый и хорошо организованный дизайн улучшает взаимодействие с пользователем.

В этом примере я не тратил слишком много времени на пользовательский интерфейс, так как хотел поскорее закончить его и сначала получить работающий фрагмент кода.

Реализация динамического поведения

Теперь давайте реализуем динамическое поведение нашего генератора шаблонов электронной почты с помощью JavaScript. Используя прослушиватели событий, мы можем фиксировать пользовательский ввод и запускать соответствующие действия. Создавайте функции, которые реагируют на выбор пользователя, и генерируйте соответствующий шаблон электронной почты на основе выбранных параметров.

Использование OpenAI API

Чтобы сделать наш генератор шаблонов электронной почты еще более мощным, мы интегрируем API OpenAI. Этот API позволяет нам генерировать текстовый контент на естественном языке на основе выбора пользователя. Благодаря расширенным языковым моделям OpenAI мы можем предоставить пользователям хорошо структурированные и контекстно-подходящие шаблоны электронной почты. Объясните, как делать запросы к API и обрабатывать ответы, чтобы беспрепятственно интегрировать возможности генерации языка OpenAI в нашу веб-страницу.

Тестирование и доработка

Тщательно протестируйте функциональность генератора шаблонов электронной почты, чтобы обеспечить бесперебойную работу пользователей. Обращайте внимание на потенциальные проблемы или ошибки, которые могут возникнуть в процессе разработки, и устраняйте их соответствующим образом. Итеративно улучшайте генератор на основе отзывов пользователей, внося необходимые коррективы для повышения его производительности и удобства использования.

Развертывание и рекомендации по развертыванию

Как только генератор шаблонов электронной почты будет готов, пришло время развернуть его на работающем веб-сайте WordPress. Проведите читателей через процесс развертывания, убедившись, что у них под рукой есть полнофункциональный инструмент. Обсудите важные вопросы, такие как оптимизация производительности, обеспечение кросс-браузерной совместимости и внедрение адаптивного дизайна для бесперебойной работы на различных устройствах.

Код

HTML

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://techhorizoncity.com/wp-content/themes/consulting/lib/scripts/openai_custom_tp_02.js"></script>
<style>
  /* CSS styles omitted for brevity */
  /* Style for full-size textarea */
  .response-output {
    width: 90%;
    height: 70vh;
  }
</style>
<div class="container">
  <div class="form-group">
    <label for="prompt-input">Select Email Type:</label>
    <select id="prompt-input">
      <option value="Write a detailed formal Email">Formal Email</option>
      <option value="Write a detailed informal Email">Informal Email</option>
      <option value="Write a detailed thank you email">Thank You Email</option>
      <option value="Write a detailed apology email">Apology Email</option>
      <option value="Write a detailed invitation email">Invitation Email</option>
      <option value="write a detailed followup email">Follow-up Email</option>
      <option value="Write a detailed sales/marketing email">Sales/Marketing Email</option>
      <option value="Write a detailed feedback email">Feedback Email</option>
    <option value="Write a detailed Resignation email">Resignation Email</option>
    <option value="Write a detailed offer letter acceptance email">Offer Letter Acceptance Email</option>
    <option value="Write a detailed email complaining to your boss about work life balance">
Work life Balance Email</option>
   <option value="write a detailed email requesting for leave">Leave Request Email</option>
    </select>
<div class="form-group-2">
  <label for="prompt-input-2">Select the Tone of Email:</label>
  <select id="prompt-input-2">
  <option value=" in a normal tone.">Normal</option>
    <option value=" in an angry tone.">Angry</option>
    <option value=" in a happy tone.">Happy</option>
    <option value=" in a sad tone.">Sad</option>
    <option value=" in a diplomatic tone.">Diplomatic</option>
    <option value=" in a complaining tone.">Complaining</option>
    <option value=" in a sarcastic tone.">Sarcastic</option>
    <option value=" in an appreciative tone.">Appreciative</option>
  </select>
</div>
  </div>
  <div class="form-group">
    <button id="ok-button">OK</button>
    <button id="clear-button">Clear</button>
  </div>
  <div class="form-group">
    <label for="response-output">Response:</label>
    <textarea id="response-output" class="response-output" ></textarea>
  </div>
</div>
<script>
  // JavaScript code to clear the text area
  document.getElementById("clear-button").addEventListener("click", function() {
    document.getElementById("response-output").value = "";
  });
</script>
<script src="https://techhorizoncity.com/wp-content/themes/consulting/lib/scripts/openai_custom_tp_02.js"></script>

JavaScript

document.addEventListener('DOMContentLoaded', function () {
  var promptInput = document.getElementById('prompt-input');
  var promptInput2 = document.getElementById('prompt-input-2');
  var okButton = document.getElementById('ok-button');
  var responseOutput = document.getElementById('response-output');
  if (!promptInput || !promptInput2 || !okButton || !responseOutput) {
    console.error('Required HTML elements not found. Check the IDs of the input fields and buttons.');
    return;
  }
  
    okButton.addEventListener('click', function () {
    var prompt = promptInput.value;
    var prompt2 = promptInput2.value;
    var fullPrompt = prompt + prompt2;
    var maxTokens = 1000;
    var maxTemp = 1;
    var headers = {
      'Content-Type': 'application/json',
      'Authorization': 'YOUR API KEY' // Replace with your actual API key
    };
    var data = {
      'prompt': fullPrompt,
      'max_tokens': maxTokens,
      'temperature': maxTemp
    };
    
    axios.post('https://api.openai.com/v1/engines/text-davinci-003/completions', data, { headers })
      .then(response => {
        var completion = response.data.choices[0].text;
        displayResponse(completion); // Call the displayResponse function
      })
      .catch(error => {
        console.error('Error:', error);
      });
  });
  function displayResponse(response) {
    responseOutput.text = response.trim(); // Trim leading/trailing spaces
   
  }
  
});

Добавить код в Functions.php

function enqueue_openai_scripts() {
  wp_enqueue_script('axios', 'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js', array(), '1.0', true);
  
  wp_enqueue_script( 'openai-custom', get_template_directory_uri() . '/lib/scripts/openai_custom_tp_02.js', array(), '1.0', true );	
	
}
add_action('wp_enqueue_scripts', 'enqueue_openai_scripts');

Скриншот

Заключение

Создание динамического генератора шаблонов электронной почты с помощью OpenAI API на веб-сайте WordPress открывает бесконечные возможности для оптимизации общения. Выполняя шаги, описанные в этом сообщении блога, вы можете предоставить пользователям возможность создавать персонализированные шаблоны электронной почты в соответствии с их конкретными потребностями. Используйте гибкость HTML, JavaScript и API OpenAI для улучшения функциональности вашей веб-страницы, что в конечном итоге сэкономит время и усилия при составлении электронной почты. Экспериментируйте, собирайте отзывы и продолжайте совершенствовать генератор шаблонов электронной почты, чтобы обеспечить исключительный пользовательский опыт.

Ссылка на этот проект: https://techhorizoncity.com/generate-email/

Дополнительная литература: https://techhorizoncity.com/openai-api-integration/