Популярное
Свежее
Моя лента
Сообщения
Обзор
Курсы
Темы
Маркетинг
Деньги
Сервисы
Крипто
Личный опыт
Маркетплейсы
Образование
AI
Карьера
Право
Показать все
vc.ru
О проекте
Правила
Реклама
Приложения
NeuroЭнтузиаст (Алексей)

Как создать ИИ-инструмент с помощью WordPress за 5 минут!

В этом посте я покажу вам, как создать с помощью WordPress ИИ-инструмент, подобный этому:

Как создать ИИ-инструмент с помощью WordPress за 5 минут!

Еще больше полезностей - в моем телеграм-канале про нейросети и канале про генерацию изображений Миджорниум.

Зачем создавать онлайн-инструменты?

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

1. Получать больше трафика:

  • Вовлечение: Онлайн-инструменты, особенно те, которые работают на основе искусственного интеллекта, могут заинтриговать и привлечь пользователей, заставляя их проводить больше времени на вашем сайте.
  • Преимущества для SEO: Уникальный интерактивный контент может повысить рейтинг вашего сайта в поисковых системах, что приведет к увеличению органического трафика.
  • Возможность распространения: Если ваш инструмент представляет ценность, пользователи охотнее делятся им в социальных сетях, что еще больше увеличивает охват аудитории.

2. Лид-магниты:

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

Монетизация:

  • Модели подписки: Вы можете ограничить доступ к премиум-функциям, предлагая многоуровневые варианты подписки для различных потребностей пользователей.
  • Доходы от рекламы: Если инструмент привлекает большую базу пользователей, можно монетизировать его с помощью целевой рекламы.
  • B2B-партнерство: Ваш инструмент может привлечь бизнес-клиентов, заинтересованных в сотрудничестве.

Структура инструмента

Создание ИИ-инструментов на WordPress включает в себя 3 основных этапа. Ниже - подробное описание того, как создать этот инструмент:

1. Создайте страницу WordPress:

Начните с создания новой страницы на вашем сайте WordPress, на которой будет размещен ИИ-инструмент. Эта страница станет пользовательским интерфейсом для взаимодействия с инструментом.

2. Добавьте HTML-код:

Добавьте немного HTML-кода, чтобы создать страницу инструмента. Это будет начальная точка взаимодействия с API OpenAI.

3. Реализуйте функцию WordPress:

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

4. Подключение к API OpenAI:

Функция WordPress соединяется с API OpenAI и генерирует текст на основе промпта пользователя.

Как создать ИИ-инструмент с помощью WordPress за 5 минут!

1. Добавление функции вызова API

В этом шаге мы добавим PHP-функцию, которая позволит нашему инструменту взаимодействовать с API OpenAI. Для этого мы воспользуемся плагином WPCode в WordPress.

Что такое плагин WPCode?

WPCode - это плагин для WordPress, который обеспечивает чистый и простой способ запуска фрагментов PHP-кода на вашем сайте. Он избавляет вас от необходимости добавлять пользовательские сниппеты в файл functions.php вашей темы.

Установка и активация плагина Code Snippets

  1. На панели управления WordPress перейдите в раздел 'Плагины > Добавить новый'.
  2. В строке поиска введите 'WPCode'.
  3. Найдите плагин в результатах поиска и нажмите "Установить сейчас", а затем "Активировать".
Как создать ИИ-инструмент с помощью WordPress за 5 минут!

Добавление вызова API OpenAI

После активации плагина выполните следующие действия, чтобы добавить вызов API:

  1. На панели управления WordPress перейдите в раздел 'Code Snippets> Add New'.
  2. В поле "Title" дайте новому сниппету название, например "OpenAI API Call".
  3. Установите тип кода на PHP
  4. В текстовое поле "Code" скопируйте свой PHP-код. Ниже приведен пример того, как можно структурировать этот код:
function openai_generate_text() { // Get the topic from the AJAX request $prompt = $_POST['prompt']; // OpenAI API URL and key $api_url = 'https://api.openai.com/v1/chat/completions'; $api_key = 'sk-XXX'; // Replace with your actual OpenAI API key // Headers for the OpenAI API $headers = [ 'Content-Type' => 'application/json', 'Authorization' => 'Bearer ' . $api_key ]; // Body for the OpenAI API $body = [ 'model' => 'gpt-3.5-turbo', 'messages' => [['role' => 'user', 'content' => $prompt]], 'temperature' => 0.7 ]; // Args for the WordPress HTTP API $args = [ 'method' => 'POST', 'headers' => $headers, 'body' => json_encode($body), 'timeout' => 120 ]; // Send the request $response = wp_remote_request($api_url, $args); // Handle the response if (is_wp_error($response)) { $error_message = $response->get_error_message(); wp_send_json_error("Something went wrong: $error_message"); } else { $body = wp_remote_retrieve_body($response); $data = json_decode($body, true); if (json_last_error() !== JSON_ERROR_NONE) { wp_send_json_error('Invalid JSON in API response'); } elseif (!isset($data['choices'])) { wp_send_json_error('API request failed. Response: ' . $body); } else { wp_send_json_success($data); } } // Always die in functions echoing AJAX content wp_die(); } add_action('wp_ajax_openai_generate_text', 'openai_generate_text'); add_action('wp_ajax_nopriv_openai_generate_text', 'openai_generate_text');

Код определяет PHP-функцию openai_generate_text, которая будет выполняться при запросе к WordPress с действием openai_generate_text.

Эта функция взаимодействует с API OpenAI для генерации текста на основе промпта, предоставленного пользователем.

Сначала функция получает промпт из POST-запроса:

$prompt = $_POST['prompt'];

И последние две строки кода подключают функцию к действиям wp_ajax_openai_generate_text и wp_ajax_nopriv_openai_generate_text, чтобы она выполнялась, когда к WordPress поступает запрос с действием openai_generate_text.

Опубликуйте сниппет кода

Теперь не забудьте установить этот скрипт на выполнение везде и опубликовать его.

Как создать ИИ-инструмент с помощью WordPress за 5 минут!

2. Создание страницы инструмента

Теперь, когда наша API-функция готова, давайте создадим новую страницу на нашем сайте WordPress, куда мы сможем добавить наш ИИ-инструмент.

Для создания страницы мы будем использовать Elementor, популярный конструктор страниц WordPress.

📣 Примечание: Вы можете использовать любой конструктор, который вам нравится. Главное - чтобы на страницу можно было добавить пользовательский HTML-код.

Установка и активация Elementor

  1. На панели управления WordPress перейдите в раздел "Плагины > Добавить новый".
  2. В строке поиска введите 'Elementor'.
  3. Найдите плагин в результатах поиска и нажмите "Установить сейчас", а затем "Активировать".

Создание новой страницы с помощью Elementor

  1. Перейдите к разделу "Pages > Add New" на панели управления WordPress.
  2. Введите название страницы, например "ИИ-инструмент".
  3. Нажмите на "Edit with Elementor", чтобы начать оформление страницы.
Как создать ИИ-инструмент с помощью WordPress за 5 минут!

Добавление пользовательского HTML в Elementor

Чтобы добавить пользовательский HTML в Elementor, вам нужно перетащить виджет HTML Code на свою страницу. Для этого выполните следующие действия:

  1. На странице редактора Elementor слева вы увидите боковую панель с несколькими иконками. Нажмите на ту, которая похожа на сетку или матрицу.
  2. Откроется список виджетов, которые вы можете использовать. Найдите виджет "HTML".
Как создать ИИ-инструмент с помощью WordPress за 5 минут!

Здесь вы можете вставить свой собственный HTML-код для вашего ИИ-инструмента. В нашем случае это будет код для поля ввода, кнопки и текстовой области для вывода результатов.
Основной пример:

<div> <input type="text" id="userInput" placeholder="Type something here..."> <button id="submitButton">Submit</button> <textarea id="resultArea"></textarea> </div>

Чтобы облегчить вам задачу, я создал полный код HTML, JS и CSS, чтобы вы могли скопировать и вставить его напрямую:

<div id="text-generation-tool"> <input type="text" id="topic" placeholder="Your Topic..."> <button id="generate-button">Generate Story!</button> <div id="result-container" style="display: none;"> <div class="result-wrapper"> <div class="result-content"> <textarea id="result" readonly></textarea> </div> <div class="copy-button-container"> <button id="copy-button">Copy</button> </div> </div> </div> <div id="loading" class="loader" style="display: none;"></div> </div> <style> /* Basic styles for the text generation tool */ #text-generation-tool { width: 100%; max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif; } #topic { width: 100%; padding: 15px; margin-bottom: 20px; font-size: 16px; border-radius: 5px; border: 1px solid #ddd; } #generate-button { display: block; width: 100%; padding: 15px; margin-bottom: 20px; font-size: 16px; border: none; border-radius: 5px; color: #fff; background-color: #3498db; cursor: pointer; transition: background-color 0.3s ease; } #generate-button:hover { background-color: #2980b9; } #result-container { display: none; margin-bottom: 20px; } .result-wrapper { position: relative; overflow: hidden; } .result-content { display: flex; } #result { flex: 1; height: 400px; padding: 15px; font-size: 16px; border-radius: 5px; border: 1px solid #ddd; background-color: #f9f9f9; } .copy-button-container { margin-top: 10px; text-align: right; } #copy-button { padding: 8px 12px; font-size: 14px; border: none; border-radius: 5px; color: #fff; background-color: #3498db; cursor: pointer; transition: background-color 0.3s ease; } #copy-button:hover { background-color: #2980b9; } /* CSS for the loader */ .loader { display: block; margin: 50px auto; border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style>

Кстати! Я сгенерировал этот код с помощью ChatGPT примерно за 5 минут!

Не стесняйтесь использовать этот код в качестве базового для любого инструмента, который вы хотите создать. Например, если вы хотите изменить текст-заполнитель в поле ввода, измените эту строку:

Но это еще не все. Вы даже можете ввести этот код в ChatGPT и попросить его внести изменения за вас. Давайте посмотрим пример этого в действии:

Промпт: "Обнови поле ввода до выпадающего списка, в котором я могу выбрать одно из следующих: (любовь, помощь, дружба)".

После обработки этого промпта вот что выдал ChatGPT:

<div id="text-generation-tool"> <select id="topic"> <option value="" selected disabled>Your Topic...</option> <option value="love">Love</option> <option value="help">Help</option> <option value="friendship">Friendship</option> </select> <button id="generate-button">Generate Story!</button> <div id="result-container" style="display: none;"> <div class="result-wrapper"> <div class="result-content"> <textarea id="result" readonly></textarea> </div> <div class="copy-button-container"> <button id="copy-button">Copy</button> </div> </div> </div> <div id="loading" class="loader" style="display: none;"></div> </div>

После обработки этого промпта вот что выдал ChatGPT:

<div id="text-generation-tool"> <select id="topic"> <option value="" selected disabled>Your Topic...</option> <option value="love">Love</option> <option value="help">Help</option> <option value="friendship">Friendship</option> </select> <button id="generate-button">Generate Story!</button> <div id="result-container" style="display: none;"> <div class="result-wrapper"> <div class="result-content"> <textarea id="result" readonly></textarea> </div> <div class="copy-button-container"> <button id="copy-button">Copy</button> </div> </div> </div> <div id="loading" class="loader" style="display: none;"></div> </div>

Возможности таких моделей ИИ, как ChatGPT, практически безграничны, поэтому обучение взаимодействию с ними - один из самых востребованных навыков сегодня и будет востребован в будущем.

Сохраните свою страницу!

После того как вы вставили код, нажмите "Обновить", чтобы сохранить изменения.

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

3. Подключите страницу к функции API

Теперь, когда у нас есть функция API и страница инструмента, пришло время связать их. Здесь на помощь приходит код JavaScript (JS).

Что делает этот код JavaScript?

Этот код JS устанавливает слушателя событий на кнопку "Generate Story!", чтобы при нажатии на кнопку он собирал тему, выбранную пользователем, и отправлял ее нашей функции API OpenAI с помощью AJAX.

Пока рассказ генерируется, на экране отображается вращающийся индикатор загрузки. Как только рассказ будет готов, индикатор исчезнет, а рассказ отобразится в текстовой области результатов.

Если в какой-то момент произошла ошибка, в текстовой области результата появляется сообщение об ошибке.

Код также устанавливает слушателя событий на кнопку "Copy", чтобы при нажатии она копировала сгенерированную историю в буфер обмена.

Добавление кода JavaScript

Вот код JavaScript, который вам нужно добавить:

<script> document.getElementById("generate-button").addEventListener("click", function(e){ e.preventDefault(); var generateButton = document.getElementById("generate-button"); if (generateButton.disabled) { return; // Prevent multiple clicks while content is being generated } generateButton.disabled = true; var topic = document.getElementById('topic').value; var prompt = "Generate a 3 sentence story about " + topic; var loading = document.getElementById('loading'); var result = document.getElementById('result'); var resultC = document.getElementById('result-container'); loading.style.display = 'block'; result.style.display = 'none'; // hide result textarea resultC.style.display = 'none'; var formData = new FormData(); formData.append('action', 'openai_generate_text'); formData.append('prompt', prompt); fetch('/wp-admin/admin-ajax.php', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { loading.style.display = 'none'; if(data.success) { result.value = data.data.choices[0].message.content; result.style.display = 'block'; // show result textarea resultC.style.display = 'block'; generateButton.disabled = false; } else { result.value = 'An error occurred: ' + data.data; result.style.display = 'block'; // show result textarea resultC.style.display = 'block'; generateButton.disabled = false; } }) .catch(error => { loading.style.display = 'none'; result.value = 'An error occurred: ' + error.message; result.style.display = 'block'; // show result textarea resultC.style.display = 'block'; generateButton.disabled = false; }); }); var copyButton = document.getElementById('copy-button'); copyButton.addEventListener('click', function() { var result = document.getElementById('result'); result.select(); document.execCommand('copy'); alert('Copied to clipboard!'); }); </script>

Главное, на что вы должны обратить внимание, - это промпт:

var prompt = "Generate a 3 sentence story about " + topic;

В моем случае я просто использовал очень простой промпт, чтобы помочь вам понять концепцию.

В вашем случае, основываясь на логике вашего ИИ-инструмента, вы добавите свой собственный промпт; например, допустим, мы создаем инструмент генератора доменных имен. Вы бы использовали такой промпт:

Составь список из 10 идей доменных имен для сайта на [тему] и дай краткое объяснение каждому предложению.

А если вы хотите быть более профессиональными, позвольте мне дать вам один из моих секретных Power-промптов премиум-класса, который генерирует доменные имена с помощью искусственного интеллекта:

Пожалуйста, придумай 10 оригинальных и креативных доменных имен, специально разработанных для ниши [ниша], с акцентом на ее основные концепции и целевую аудиторию. В твоем ответе приоритетными должны быть доменные имена, которые эффективно привлекают внимание аудитории [ниши]

и отражают ее ключевые темы. Для каждого доменного имени дай краткое объяснение (1-2 предложения) подчеркивая его соответствие нише. Убедись, что каждое доменное имя соответствует следующим критериям:

1. Актуальность бренда: Поддерживай тесную связь с нишей и ее центральными понятиями.

2. Запоминаемость: Придумай привлекательные, легко запоминающиеся доменные имена с привычным написанием.

3. Лаконичность: Каждое доменное имя должно содержать от 6 до 14 символов для удобства набора и запоминания.

4. Простота: Избегай использования дефисов и цифр для более чистого вида.

5. Включение ключевых слов: По возможности используй ключевые слова из соответствующей ниши для улучшения SEO.

6. Произношение: Убедись, что каждое доменное имя легко воспринимается на слух или является "удобным для радио".

7. Расширения домена: Отдавай предпочтение расширениям .com, .net, .org и .ai, если это применимо.

8. Законность: Воздержись от нарушения существующих торговых марок или брендов.

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

[ниша]:

В любом случае, идея заключается в том, чтобы заменить ваш промпт на то, что нужно именно вам, и готово!

Добавьте этот код JavaScript на страницу с инструментом:

  1. Снова откройте редактор Elementor для страницы инструмента.
  2. Перетащите виджет "HTML" на страницу так же, как мы делали это ранее.
  3. Вставьте код JavaScript в поле 'HTML Code'.
  4. Нажмите "Обновить", чтобы сохранить изменения.

Или вы можете вставить код в то же поле HTML-кода, которое мы использовали ранее.

Вот и все! Теперь ваша страница инструмента подключена к функции OpenAI API, и пользователи могут использовать инструмент в соответствии с выбранной темой.

Оптимизация нашего инструмента

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

Одним из интересных аспектов современного ИИ, такого как ChatGPT, является его универсальность и адаптивность. Например, вы можете попросить ChatGPT оптимизировать код, внести изменения в пользовательский интерфейс или модифицировать любой другой аспект инструмента.

Допустим, вы хотите изменить пользовательский интерфейс вашего инструмента. Вы можете просто отправить этот запрос в ChatGPT, например:

"Помоги мне разработать более красивый и профессиональный интерфейс для моего инструмента?".

ChatGPT предоставит предложения или даже целый набор нового HTML/CSS-кода, адаптированного под ваши нужды.

Добавление такой меры безопасности, как капча, также может стать значительным улучшением, поскольку она помогает защитить ваш инструмент от ботов и обеспечивает реальное взаимодействие с пользователями. Вы можете найти множество плагинов и ресурсов в Интернете, чтобы добавить капчу на ваш сайт WordPress.

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

Бонус: монетизируйте свои инструменты!

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

1. Модели членства:

Вы можете создать на своем сайте раздел только для участников, предоставляющий эксклюзивный доступ к вашим ИИ-инструментам. Для этого предназначены такие плагины, как Promembership, MemberPress и другие.

  • ProMembership: Этот плагин идеально подходит для создания многоуровневых членских программ, позволяя предоставлять различные уровни доступа в зависимости от плана подписки, открывая возможности для различных ценовых предложений.
  • MemberPress: Известный своим удобством в использовании, MemberPress позволяет ограничить доступ к определенным страницам или целым категориям контента. Вы можете установить единовременные платежи или периодические подписки для доступа.

2. Реклама и партнерский маркетинг:

Если вы предпочитаете не взимать плату с пользователей напрямую, вы можете монетизировать свои услуги с помощью рекламы или партнерского маркетинга. Сотрудничайте с соответствующими отраслевыми партнерами или используйте рекламные сети, которые соответствуют вашей аудитории.

3. Создание инструментов как услуга фрилансера:

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

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

4. Создание SaaS с помощью WordPress:

Комбинируя вышеописанные стратегии, вы можете создать платформу "Программное обеспечение как услуга" (SaaS) с помощью WordPress. Используйте различные плагины, чтобы создать бесперебойный рабочий процесс, интегрировать платежные шлюзы и предоставить своим пользователям профессиональный, безупречный опыт.

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

Еще больше полезностей - в моем телеграм-канале про нейросети и канале про генерацию изображений Миджорниум.

#chatgpt #chatgpt4 #chatgptнарусском

Источник статьи на английском - здесь.

1313
1 комментарий
Иван Головлев

В ответе выдает:
—--—--—--—--—--—--—--—--—---
An error occurred: API request failed. Response: {
"error": {
"message": "Country, region, or territory not supported",
"type": "request_forbidden",
"param": null,
"code": "unsupported_country_region_territory"
}
—--—--—--—--—--—--—--—--—---
Есть варианты обхода ограничения, VPN на API?

Ответить